En los primeros días de la Web, la vida era simple. Había archivos que contenían HTML y archivos binarios como imágenes. Desde entonces se han desarrollado varias tecnologías que organizan la apariencia de las páginas web. Por ejemplo, las hojas de estilo en cascada (CSS) que extraen la información de la presentación de su HTML y desde un solo lugar usted puede hacer cambios de formato a un conjunto completo de páginas a la vez; no teniendo que cambiar manualmente sus marcadores HTML uno a uno.
Usted puede potencialmente tener informaciónes procedentes de archivos HTML que hacen referencia a CSS, plantillas PHP y una base de datos MySQL de una sola vez.
Las plantillas de PHP facilitan el cambio del HTML en una página, cuando contiene campos rellenados por una consulta de base de datos.
Vamos a echar un rápido vistazo a cómo estas piezas se unen.
Sólo para darle el gusto de cómo su código se verá, este ejemplo muestra el código MySQL llamado desde PHP para insertar un comentario en una base de datos MySQL.
Este ejemplo contiene código PHP que genera código HTML desde una base de datos MySQL, y ese mismo HTML se refiere a una hoja de estilo CSS.
<?php //Una función para insertar un comentário en una tabla de //comentários basada en //el parámetro $comment //El nombre de la base de datos es también un parametro function add_comment($comment,$database){ //Adiciona un comentário //Como medida de seguridad, escaparemos cualquier caracter especial //en el user_name. $comment=mysql_real_escape_string($comment); //Este es el comando SQL $sql_insert="INSERT INTO 'comments' (body) values ('$comment')"; //Seleccionamos la base de datos $mysql_select_db($database); $success = mysql_query($sql_insert) or die(mysql_error()); //Imprimimos el encabezado (header) de la pagina print ('<html> <head> <title>Remove User</title> <link rel="stylesheet" type="text/css" href="example.css" /> </head> <body> <div class="comments">'); //comprobamos si el insertado de datos ha sido satisfactorio if($success){ //Le decimos al usuario que hubo exito print ("El comentário $comment ha sido insertado satisfactoriamente."); } else { //Le decimos al usuario que no ha habido suceso en la inserción print ("El comentário $comment no fué insertado. Por favor intente nuevamente "); } //Imprimimos el pie de pagina print ('</div></body></html>'); } ?>No se preocupe por entender exactamente lo que está sucediendo en el ejemplo. La idea es simplemente darse cuenta de que hay código PHP, código de base de datos y un enlace a una hoja de estilo.
Para simplificar el mantenimiento de sitios que tienen muchas páginas diferentes, pero que todas comparten una apariencia común, el encabezado y el pie de cada página se pueden colocar en un archivo independiente y luego se incluyen en cada página de PHP.
Esto permite realizar cambios en el encabezado o pie de página en una ubicación que cambia el aspecto de cada página automáticamente.
Esto hace más fácil la tarea del desarrollador evitando que tenga que modificar cada una de las páginas del sitio web por separado.
Los desarrolladores de PHP han entendido que separar el código PHP del código HTML puede hacer la vida más fácil para los desarrolladores y usuarios clientes que saben cómo modificar HTML, pero no entienden muy bien PHP.
Mediante la creación de archivos de plantilla PHP independientes que tienen marcadores de posición para datos dinámicos, usted puede separar la marca HTML del código PHP. Esto lo veremos claramente en uno de los siguientes artículos!, espero hayas entendido totalmente el texto.
En el siguiente ejemplo muestro un archivo de plantilla de ejemplo utilizando el formato de motor de plantillas para PHP llamado Smarty. El motor de plantilla se requiere para sustituir los valores en la plantilla.
¿Quiere saber Más del Motor de Plantillas Smarty? : ¿Qué es Smarty?
Cuando el motor de plantilla procesa la página, los marcadores de posición se reemplazan con sus valores asociados, como se muestra aquí:<html> <head> <title>My Books</title> </head> <body> <p>Favorite Books:</p> <p>Title: {$title}<br /> Author: {$author} </p> </body> </html>
<html> <head> <title>My Books</title> </head> <body> <p>Favorite Books:</p> <p>Title: Java in a Nutshell<br /> Author: Flanagan </p> </body> </html>El resultado es que, si bien se ha agregado otro archivo a la mezcla, ha facilitado la lectura del código HTML y el código PHP está menos lleno de HTML extraño. Un desarrollador web que no es experto en PHP puede modificar el aspecto de la página sin preocuparse de romper el código PHP.
El último tipo de información que se muestra aquí, es CSS, también viene de un deseo de separar los estilos de presentación, como los colores y el espaciado del contenido principal. Hojas de estilo en cascada (CSS) complementan a HTML para dar a los desarrolladores web y usuarios más control sobre la forma en que se muestran sus páginas web. Los diseñadores y usuarios pueden crear hojas de estilo que definan cómo deben aparecer en el sitio web sus diferentes elementos, como encabezados y enlaces. El término cascada deriva del hecho de que múltiples hojas de estilo en diferentes niveles pueden aplicarse a la misma página web con sus propias definiciones heredadas de un nivel al siguiente. Para aplicar código CSS, el código de ejemplo mostrado se coloca dentro de la cabecera de su archivo HTML, veamos:
<html> <head> <title>CSS Example</title> <style type="text/css"> h4, b {color: #80D92F; font-family: arial; } p { text-indent: 2cm; background: yellow; font-family:courier;} </style> </head> <body> <h3>Aprenda a usar CSS en sus sitios Web!</h3> <h4>Esto es magnífico! </h4> <p>Isn't this <b>nifty</b>?</p> </body> </html>En el CSS, puedes designar un color llamándolo, como lo hicimos aquí con la designación de fondo, "background: yellow", o puedes asignarlo con un código de color numérico, como hicimos aquí, "color: # 80D92F" . El código CSS comienza con <style.
El marcado HTML aplica etiquetas al contenido para identificar información que es de un tipo particular o que necesita un formato especial. Las etiquetas HTML siempre se incluyen entre corchetes angulares (<>) y no distinguen entre mayúsculas y minúsculas; por lo tanto, no importa si escribe en mayúsculas o minúsculas (aunque XHTML recomienda todas las minúsculas). Pero en realidad, es una cuestión de estilo. Usamos mayúsculas en nuestros sitios web para que podamos ver el HTML mejor y poner un retorno de transporte entre cada línea de marcado. Las etiquetas suelen aparecer en parejas de inicio a fin. Estos pares están en la forma:
<tag>Isn't this nifty?</tag>La primera <tag> indica el comienzo de un par de etiquetas, y la última </ tag> indica el final. A este par completo de etiquetas es denominado "elemento". Cualquier contenido dentro de un elemento tiene las reglas del elemento aplicado a este. En el ejemplo, el texto "Aprenda a usar CSS en sus Sitios Web!" Está contenido por un elemento h3, miren:
<h3>Aprenda a usar CSS en sus sitios Web!</h3>También es una buena práctica (y es requerido por XHTML) que sus etiquetas se aniden de manera limpia para producir elementos con límites claros. Siempre utilice las etiquetas finales cuando llegue al final de un elemento y evite tener pares de etiquetas que se superpongan. (En lugar de <b> negrita <i> cursiva </ i> </ b>, debe cerrar el código de esta forma: </ b> </ i>.) En otras palabras, debe abrir y cerrar elementos en el mismo nivel. Por lo tanto, si abre una negrita y, a continuación, cursiva, debe cerrar la cursiva antes de cerrar el negrita.
Con esto he concluído un Artículo que nos refresca la memoria en cuanto al HTML y CSS. No dejemos de practicar mis amigos!
Déjenos su Comentário:
0 commentários: