lunes, 25 de octubre de 2021

Trabajando con PHP

¿QUÉ ES PHP? ¿PARA QUÉ SIRVE PHP?

PHP es un lenguaje de código abierto muy popular, adecuado para desarrollo web y que puede ser incrustado en HTML. Es popular porque un gran número de páginas y portales web están creadas con PHP. Código abierto significa que es de uso libre y gratuito para todos los programadores que quieran usarlo. Incrustado en HTML significa que en un mismo archivo vamos a poder combinar código PHP con código HTML, siguiendo unas reglas.

 

PHP se utiliza para generar páginas web dinámicas. Recordar que llamamos página estática a aquella cuyos contenidos permanecen siempre igual, mientras que llamamos páginas dinámicas a aquellas cuyo contenido no es el mismo siempre. Por ejemplo, los contenidos pueden cambiar en base a los cambios que haya en una base de datos, de búsquedas o aportaciones de los usuarios, etc.

¿Cómo trabaja PHP? El lenguaje PHP se procesa en servidores, que son potentes ordenadores con un software y hardware especial. Cuando se escribe una dirección tipo http://www.aprenderaprogramar.com/index.php en un navegador web como Internet Explorer, Firefox o Chrome, ¿qué ocurre? Se envían los datos de la solicitud al servidor que los procesa, reúne los datos (por eso decimos que es un proceso dinámico) y el servidor lo que devuelve es una página HTML como si fuera estática.

El esquema es: Petición de página web al servidor --> El servidor recibe la petición, reúne la información necesaria consultando a bases de datos o a otras páginas webs, otros servidores, etc --> El servidor responde enviando una página web “normal” (estática) pero cuya creación ha sido dinámica (realizando procesos de modo que la página web devuelta no siempre es igual).

En resumen:

Páginas estáticas: Petición --> Respuesta

Páginas dinámicas: Petición --> Procesado y preparación --> Respuesta

 

 

En un sitio dinámico, la información generalmente está contenida en una base de datos. Cada vez que mostramos la página, como por ejemplo una página de noticas, buscamos en la base de datos las últimas noticias que tenemos ingresadas para mostrar en el navegador del visitante. Ahora bien, ¿cómo se consigue que la página vaya mostrando noticias nuevas? Simplemente cargando las mismas en la base de datos, por ejemplo, a través de un formulario que rellena una persona y que una vez relleno cuando pulsa “Enviar” implica que lo que haya escrito se guarde en nuestra base de datos. De esta manera, cuando solicitamos la página web y el servidor consulte la base de datos, encontrará esta nueva información y mostrará nuestra página de forma distinta a como se veía anteriormente.

Por regla general este tipo de lenguaje suele ser utilizado para crear contenido dinámico y poder interactuar con el usuario.

Veamos un ejemplo del contenido de una página web php, que habremos de almacenar en un archivo que termina con la extensión .php y que contiene texto:

<!DOCTYPE html>

<html>

<head>

<title>Ejemplo</title>

</head>

<body>

<?php

echo "Bienvenidos a aprenderaprogramar.com";

?>

</body>

</html>

 

 

Como podrás comprobar el contenido del archivo incluye código HTML y en un momento dado aparece una etiqueta <?php que significa que ahí empieza el código PHP. Por eso decimos que el código PHP está embebido (incluido o incrustado) en código HTML.

Por tanto las páginas PHP contienen HTML con código PHP incluido en ellas para hacer "algo" (en este caso, mostrar Bienvenidos a aprenderaprogramar.com. El código PHP está comprendido entre etiquetas de comienzo y final especiales: <?php y ?>

Estas etiquetas especiales nos permitirán entrar y salir del "modo PHP". Le sirven al servidor web para saber que tiene que interpretar el código incluido entre esas etiquetas como PHP.

Lo que distingue a PHP de JavaScript es que el código es ejecutado en el servidor, generando HTML y enviándolo al cliente como si fuera una página web estática. El cliente recibirá los resultados que el servidor devuelve después de interpretar el código PHP, sin ninguna posibilidad de determinar qué código ha producido el resultado recibido. Es decir, a través de nuestro navegador podríamos ver el código HTML, pero nunca el código PHP que dio lugar al resultado HTML. El servidor web puede ser incluso configurado para que los usuarios no puedan saber si estás o no utilizando PHP.

Lo mejor de usar PHP es que es extremadamente simple para el principiante, pero a su vez, ofrece muchas características avanzadas para los programadores profesionales y más avanzados.

Con PHP puedes procesar la información de formularios, generar páginas con contenidos dinámicos, o enviar y recibir cookies, entre muchas más cosas. PHP lo utilizan desde pequeñas páginas web hasta grandes empresas. Muchas aplicaciones web están construidas usando PHP. Podemos citar Joomla y Drupal (gestores de contenido de páginas web), osCommerce y Prestashop (tiendas on-line para comercio electrónico), phpBB y SMF (sistemas de foros para páginas web), Moodle (plataforma educativa para educación on-line), etc.

Entre las habilidades de PHP se incluye la creación de imágenes a partir de datos. Por ejemplo, supongamos que tenemos una academia con 20 alumnos matriculados en un curso de informática, 50 alumnos matriculados en un curso de matemáticas y 30 alumnos matriculados en un curso de química. Con PHP podemos generar automáticamente imágenes similares a esta:

php ejemplo

 

 

PHP también puede utilizar y presentar resultados en otros estándares de datos o lenguajes propios de los desarrollos web, como XHTML y cualquier otro tipo de ficheros XML. PHP puede autogenerar éstos archivos y almacenarlos en el sistema de archivos en vez de presentarlos en la pantalla, utilizando estos ficheros para generar contenido dinámico. Es decir, el contenido dinámico puede surgir de otros sitios además de desde bases de datos.

También se puede interactuar con otros servidores usando cualquier protocolo. Por último, PHP puede enlazarse con otros lenguajes muy potentes como Java.

En resumen, PHP es un lenguaje potente, muy usado y de gran interés para los desarrollos web.

  

domingo, 10 de octubre de 2021

 

¿Qué es CSS y cuáles son sus funciones en Internet?

La especificación CSS, junto con HTML y JavaScript es una tecnología usada por muchos sitios web para crear páginas con un diseño agradable. En este artículo te enseñaremos lo que es CSS, para qué sirve y por qué te conviene implementar un CSS en tu site.

relación entre marketing y programación

    ¿Qué es CSS?

    El CSS (Cascading Style Sheets), en español Hojas de Estilo en Cascada, fue desarrollado por W3C en 1996.

    Se le denomina Hojas de Estilos en Cascada porque las características se aplican de arriba a abajo mediante reglas que poseen un esquema prioritario.

    Esta especificación es un lenguaje de diseño gráfico que se escribe dentro del código HTML del sitio web y, permite crear páginas de una manera más exacta y aplicarles estilos (colores, márgenes, formas, tipos de letras, etc.) por lo que se tiene mayor control de los resultados finales.

    ¿Para qué sirve el CSS?

    La tecnología CSS está diseñada para marcar la separación del contenido de las páginas web y la forma de presentación de estas. Lo que genera múltiples beneficios, como:

    • presentar el documento final en diferentes estilos (pantalla, voz, impresión);
    • tener un sitio web responsivo;
    • evitar hacer archivos demasiado pesados;
    • definir el estilo visual de todo un sitio web. Así, si cambiamos una página, cambiarán todas automáticamente;
    • trabajar con estándares y separar (hasta cierto punto) la estructura de la presentación logrando un trabajo más definido;
    • provee más flexibilidad y control en las especificaciones del sitio web;
    • simplifica la creación de la página.

    ¿Cómo se vinculan el CSS y el HTML?

    El HTML y CSS tienen una relación muy fuerte entre ellos, ya que el HTML es un lenguaje de marcado (constituye la base de un sitio web) y CSS define el estilo de la página (toda la parte estética).

    A pesar de que las Hojas de Estilo en Cascada no son imprescindibles, son importantes para darle forma y apariencia a tu página web. Si solo usas HTML tu página se verá desnuda y no destacará entre la competencia.

    ¿Por qué vale la pena implementar CSS en un sitio web?

    Las ventajas de utilizar las Hojas de Estilo en Cascada son numerosas, algunas ya te las mencionamos anteriormente y otras te las diremos a continuación:

    • la posibilidad de hacer modificaciones visuales en un solo lugar (sin tener que editar todos los documentos HTML por separado);
    • la facilidad de organizar y hacer cambios;
    • el permitir que las páginas descarguen con mayor rapidez;
    • mediante la separación se mejora la accesibilidad y escaneabilidad del contenido;
    • la simplicidad para crear versiones dependiendo de los dispositivos (tablets, teléfonos inteligentes o dispositivos móviles, entre otros), etc.

    A pesar de que el uso de CSS no parezca tan importante ¡sí lo es! Su ejecución te permite mejorar tus técnicas SEO y de posicionamiento lo que es crucial para una estrategia de Marketing Digital.

    En Resumen

    El CSS fue creado para trabajar en conjunto con el HTML. Y debido al concepto que utiliza (la separación de presentación y contenido), la tecnología CSS tiene un estándar muy amplio, con especificaciones, beneficios y posibilidades muy grandes.

    Hoy en día encontrarás al CSS en la mayoría de páginas web, ya que es un requisito tan importante como el propio lenguaje de marcado, ¡no dejes de implementarlo en tu sitio web!

    ¿Te gustó el artículo y quieres conocer otros temas interesantes? Entonces, te recomendamos que entres a nuestro blog y descubras qué es el XML y para qué sirve este lenguaje.

    Cuota

    sábado, 11 de septiembre de 2021

    HTML

    Todo sobre HTML, Hypertext Markup Language o el lenguaje de marcas hipertexto, con el que se realiza la creación básica de páginas web. Aquí encontrarás manuales, artículos prácticos y muchos complementos para empezar a desarrollar sitios web.

    HTML es un lenguaje de marcación que sirve para definir el contenido de las páginas web. Se compone en base a etiquetas, también llamadas marcas o tags, con las cuales conseguimos expresar las partes de un documento, cabecera, cuerpo, encabezados, párrafos, etc. En definitiva, el contenido de una página web.

    HTML es el primer lenguaje que debe aprender cualquier persona interesada en construir un sitio web. A partir del HTML podemos pasar a muchos otros lenguajes interesantes que sirven para hacer cosas diversas y más avanzadas. Es decir, sea cual sea la tecnología, herramienta o gestor de contenido que nos hayamos propuesto aprender, o que tengamos que usar en nuestro día a día, HTML siempre será el lenguaje en el que toda web se construye y, por tanto, es de obligado conocimiento para todos.

    Aprender HTML es sencillo. En pocos días o semanas serás capaz de entender y usar las etiquetas más comunes y componer documentos HTML (páginas web) correctas. Aquí encontrarás muchas ayudas para poder dar esos primeros pasos y luego profundizar en cualquier área que necesites.


    Esqueleto de un documento HTML

    Un documento HTML, una página web, contiene un árbol de etiquetas, que tiene una organización básica. La etiqueta raíz de un documento HTML es <html> y dentro tiene dos etiquetas principales:

    • <head>: con la información de cabecera de la página. Es información que en principio no aparecerá en el cuerpo de la página, pero que sirve para saber de qué trata la página, cómo deben interpretarla los distintos clientes web, etc.
    • <body>: que es la información del cuerpo, es decir, lo que se verá en el navegador cuando el usuario entre.

    Además, hay algunas otras etiquetas básicas de control, como podemos ver en el siguiente esqueleto de documento HTML básico.

    <!DOCTYPE html>
    <html lang="es">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Título del documento HTML</title>
    </head>
    <body>
      
    </body>
    </html>
    

    La primera etiqueta (DOCTYPE) indica el tipo de documento. Esta etiqueta debe estar siempre al principio. Fue definido y simplificado así desde HTML 5, ya que antes el doctype se expresaba con una etiqueta mucho mayor.

    Posteriormente tenemos la etiqueta <html>, con el atributo "lang" opcional. En este caso hemos indicado que el idioma es español.

    Luego encontramos el <head>, que tiene varias etiquetas. Las importantes son:

    • charset, siendo UTF-8 el recomendado. Lógicamente es importante que ese juego de caracteres se esté usando realmente al guardar el archivo con el código .html. Si usamos algún editor orientado a programadores seguramente se guarde con UTF-8 o al menos tengas la opción de escoger este juego de carácteres.
    • Title, que es lo que mostrará el navegador en la pestaña donde se muestre esta página. También es muy importante para que Google y otros motores identifiquen bien el contenido.

    Hay otras etiquetas en el <head> que son realmente aconsejables. El caso más claro es el del viewport. También es el lugar correcto para importar estilos CSS, por ejemplo.

    Para acabar, el <body> contendrá la mayor parte de las etiquetas, con todo el marcado necesario para definir el contenido completo que se verá en la página.

     EDITAR

    Archivos HTML

    Los archivos HTML son ficheros de texto con extensión .html.

    Como archivos de texto deben estar escritos con un editor ee texto plano, como los que generalmente se usan para programación.

    La recomendación es que estos archivos se guarden con codificación UTF-8.

    Los archivos HTML se pueden almacenar en cualquier carpeta del ordenador y para abrir los generalmente es suficiente con hacer doble clic sobre ellos, con ello el ordenador los abrirá con el navegador predeterminado configurado en el equipo.

    Varios archivos HTML enlazados entre sí es lo que llamamos un sitio web. generalmente se encontrarán todos almacenados en la misma carpeta o en carpetas dependientes de un directorio principal.

    El archivo index.htnl de la carpeta principal es el documento raíz del siti web, o la portada. Al index.html también se le llama documento por defecto o documento predeterminado y es el que se carga en el acceso a una carpeta, si no se indica ningún otro nombre de archivo HTML al que se pretenda acceder.

    Cómo trabajar con fondos de imagen en HTML, con ejemplos de código para usar imágenes de fondo en páginas web.

    En el presente taller de HTML vamos a tratar de explicar asuntos relativos al uso de fondos de imagen en HTML. Indicaremos la manera de utilizarlos correctamente, pues los fondos son capaces de lo peor y de lo mejor, es decir, pueden ser tan bonitos y vistosos como feos y molestos. Por supuesto, se trata de quedarnos con la parte buena!

    Pero antes de empezar, cabe recordar que HTML es un lenguaje que use debe usar para expresar el contenido de las páginas web. Sin embargo, el tema de los fondos es algo relativo a la presentación, por lo que lo lógico sería usar CSS para integrarlos. Al final de este artículo te explicaremos también cómo colocar el fondo usando CSS, así podrás aprender las dos partes.

    fondos de imagen HTML

    Colocar un fondo en una página web

    Para incluir un fondo en una página web necesitamos utilizar el atributo background en la etiqueta <BODY>, al que le asignamos el nombre del archivo que deseamos utilizar como fondo. Si el archivo se encuentra en un directorio distinto que la página web, necesitaremos incluir la ruta al archivo, teniendo en cuenta siempre de utilizar una ruta relativa al archivo .html para que se conserve la ruta en caso de que cambiemos el sitio web de localización.

    <body background="fondo.gif">

    Lo que conseguimos con esto es que el archivo fondo.gif se muestre en la página como fondo. Por defecto, la imagen de fondo aparece como un mosaico, repitiéndose a lo largo de todo el espacio de la página.

    Nota: insistimos, luego te explicaremos cómo hacer los fondos con CSS, lo que es más correcto y estándar en la web.

    Fondo en otros elementos

    No solo la página puede tener un fondo, también lo podemos colocar a las tablas o las celdas, por ejemplo. Se utiliza el mismo atributo background, aunque aplicado a otras etiquetas.

    <table background="fondo.gif">
    
    <td background="fondo.gif">

    Estos dos elementos (tablas y celdas), junto con el propio cuerpo de la página, eran los que permitían fondos en la web antes de existir el lenguaje CSS. Pero hoy, como veremos enseguida, con CSS podemos colocar fondos en casi cualquier elemento que tengas en tu página.

    Consejos para utilizar fondos

    Veamos ahora algunos consejos que se deberían seguir para una correcta utilización de los fondos de imagen.

    1) Colocar un fondo de color parecido a la imagen
    Cuando colocamos un fondo en una página debemos utilizar el atributo bgcolor para asignar un color de fondo parecido al predominante en la imagen que compone el mosaico. Posiblemente muchos de nosotros habremos accedido a una página en la que no se ve nada y, cuando se carga el fondo, nos damos cuenta que sí que había texto en la página, lo que ocurre es que no se veía porque no contrastaba con el color de fondo blanco por defecto. Es posible que en estos casos la imagen de fondo fuera oscura y que el texto fuera blanco y, hasta que no se carga la imagen de fondo, no se puede ver nada. Este problema se agrava si el fondo no se llega a cargar por un error en la transferencia del archivo o porque la imagen ha sido borrada del servidor accidentalmente.

    2) Que se puedan leer bien los textos
    Los fondos están para hacer más vistosa la página, no para molestar en la lectura de los textos. Es un error muy común utilizar un fondo que luego molesta al leer los textos. Ya es bastante difícil leer una web en un monitor como para que encima el texto no contraste bien con el fondo que se está utilizando. En este caso cabe indicar también que es muy importante que las combinaciones de color del texto y del fondo sean agradables, ya que hay ciertos colores que, aunque contrastan bien, provocan unas combinaciones difíciles de leer, por ejemplo un fondo con un color azul predominante y el texto en rojo.

    3) Los fondos de imagen de color homogéneo
    Si utilizamos un fondo de imagen, tenemos que procurar que en la imagen se utilicen colores de una misma gama. Si la imagen tiene partes oscuras y claras, ¿de qué color pondremos el texto para asegurarnos de que se lea bien siempre? Si el texto es claro no contrastará bien con las partes del fondo que también son claras. Igual pasará si colocamos el texto con un color oscuro, que no contrastará bien con las partes oscuras del fondo.

    4) Tener cuidado con las distintas definiciones de pantalla
    Es importante saber que un visitante puede acceder a una página con un tamaño de ventana variable. A veces un fondo se comporta bien con una definición dada, pero no con otras mayores. Ocurre muy a menudo que se utiliza un fondo y se ve el resultado en una ventana de dimensiones reducidas. Luego accede una persona con una definición de monitores de alta gama y ve la página incorrectamente porque se realiza un mosaico con el fondo que no había tenido en cuenta el desarrollador.

    5) Hacer un fondo suficientemente grande
    Es importante que el tamaño del archivo que vamos a utilizar como fondo tenga un cierto tamaño. Si utilizamos como fondo una imagen de unos pocos pixels, nuestro ordenador trabajará mucho para crear el mosaico repitiendo cientos o miles de veces esa imagen. Sin embargo, si el fondo hubiese sido un poco más grande, para realizar el mosaico hubiera trabajado mucho menos.

    En definitiva, tendremos que tener mucho cuidado al utilizar los fondos, puesto que pueden dificultar mucho la presentación de la información en la página de una manera clara. Por supuesto, el buen gusto y el sentido común ayudarán bastante.

    Si deseamos utilizar un fondo que pudiera dar algún problema, una idea para asegurarnos que los textos se visualicen correctamente es colocar todo el contenido de la página dentro de una tabla y asignarle a la tabla un color de fondo con el atributo bgcolor.

    <html>
    	<head>
    	    <title>Fondo de prueba</title>
    	</head>
    
    	<body background="fondo1.jpg" bgcolor="FFCECB">
    
    	<table width="550" bgcolor=FFCECB align=center>
    	<tr>
    	    <td>
    
    	    <h1 style="color:000000">Probando...</h1>
    	    <br>
    	    Este texto se lee bien porque tiene un fondo plano.
    	    <br>
    
    	    </td>
    	</tr>
    	</table>
    
    	</body>
    	</html>

    Fondos de imagen con CSS

    Como habíamos dicho, antes de existir el lenguaje CSS, la única manera de conseguir poner fondos en las páginas web era con HTML. Sin embargo, ha pasado ya mucho tiempo desde entonces.

    Hoy lo correcto es usar solamente el lenguaje CSS para colocar un fondo en una página web, ya sea como fondo en toda la página o como fondo en un elemento concreto.

    Si no conocemos CSS podemos aprender en el Manual de CSS de DesarrolloWeb. En ese manual aprenderemos que existen varias maneras de aplicar estilos CSS a un documento HTML. También conoceremos varios de los atributos de las CSS, al menos los más importantes. Sin ese conocimiento de base es complicado entender los ejemplos que vamos a ver, al menos completamente, pero vamos allá.

    Fondo para toda la página

    En CSS podemos colocar el fondo a toda la página con el selector "body", que sirve para darle estilo a la etiqueta BODY.

    body {
      background-color: #ffdd90;
      background-image: url("mi-imagen.jpg");
    }

    En el código anterior estamos expresando un fondo de color sólido, junto con un fondo de archivo gráfico llamado "mi-imagen.jpg".

    Nota: Este código CSS lo normal es que lo expresemos en un archivo aparte, independiente del código HTML. Luego enlazamos las declaraciones CSS con el documento HTML usando la etiqueta LINK, como explicamos en el artículo Usos de las CSS

    Lo bueno de las CSS es que nos permiten colocar no solo el fondo de una imagen, con un archivo gráfico, sino además decir si queremos que ese fondo se coloque con forma de mosaico, si queremos que tenga unas dimensiones dadas, un desplazamiento, etc.

    El código para colocar el fondo sobre un elemento cualquiera de la página es prácticamente el mismo. Por ejemplo, así estaríamos colocando un fondo de imagen sobre todos los párrafos de la página.

    p {
    	  background-color: #309d20;
    	  background-image: url("otro.png");
    }

    Conclusión sobre el uso de fondos de imagen

    Esperamos que se hayan aclarado tus dudas iniciales sobre el uso de fondos en páginas web. Hemos aprendido varias maneras de usar fondos, pero recuerda que lo más adecuado sería implementarlos mediante CSS.

    Existen infinidad de artículos en DesarrolloWeb.com donde tratamos también el uso de fondos. Puedes aprender a colocar múltiples imágenes de fondo sobre un elemento. usar fondos con transparencia (semitransparentes), posicionar el fondo dentro del elemento (para que se vea justo la parte que quieres) o usar fondos con degradados, entre muchas otras informaciones que encontrarás entre nuestros artículos.

    Miguel Angel Alvarez

    Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

     Manual
    ¿Te ha resultado útil este artículo?
    (6)
    (0)

    Lo estás imaginando... usamos c

     

    Insertar Editar Eliminar Registros con Función PHP MySQLi

    Insertar Editar Eliminar Registros con Función PHP MySQLi a)  Insertar Registros INSERT INTO tabla_name ( column1 , column2 ,...) VALUES (...