<HTML><BODY>Hola mundo!</body></html> Introducción El HTML, acrónimo para HyperText Markup Language es un lenguaje interpretado, esto quiere decir que se puede ver fácilmente el código detrás del lenguaje seleccionando Ver código fuente en el menú Ver o Herramientas de Internet Explorer o Mozilla Firefox. Tal como todos los lenguajes, es necesario que alguien lo pueda leer. En un principio, aunque se respetaban ciertas normas básicas, empezaron a surgir pequeñas variaciones con lo cual hasta el día de hoy, existen ciertas diferencias para representar ciertas cosas. Una de las más importantes es sin duda la inclusión de un objeto flash, ya que lo que para algunos navegadores se trata de un objeto, para otros se trata de un archivo embebido.
Historia de HTML, importancia de estándares Gracias a los primeros esfuerzos en 1990 por parte de Tim Berners-Lee hoy en día se puede desarrollar una página Web que pueda interpretarse correctamente en un 90% ya sea en Firefox, Safari, Opera, Internet Explorer o Lynx siguiendo un estándar simple pero efectivo. La gran excepción a la regla hoy en día lo es Internet Explorer, ya que Microsoft se ha caracterizado por siempre tratar de imponer sus estándares que no siguen la regla general y en cambio, sólo han contribuido a la confusión generalizada cuando se trata del desarrollo de una aplicación, ya que lo que funciona en todos los navegadores, puede no funcionar en Microsoft Internet Explorer o vice-versa. Por ese entonces, el físico nuclear del CERN, se propuso a unir dos proyectos que en ese entonces estaban separados: el hipertexto e Internet. Fue así como en diciembre de 1990, Berners-Lee había creado todas las herramientas básicas que constituyen la Web: un navegador Web (curiosamente llamado WorldWideWeb), un servidor Web y también los documentos que describían el proyecto (que en el fondo constituían las páginas). Finalmente, en Abril de 1993, el CERN anunció que la Web sería gratuita para todos, sin ningún tipo de honorarios. En Julio de 2009, Tim Berner s Lee se mostró arrepentido por esta acción diciendo que ojalá hubiese cobrado royalties. Desde el inicio hasta la actualidad, Tim Berners-Lee ha trabajado arduamente en desarrollar nuevas versiones de HTML, siendo las más importantes: HTML: El primero de todos. Definió 22 elementos de los cuales 13 todavía son vigentes e incluidos en la última versión. Fue lanzado en 1990. HTML 2.0: Lanzado oficialmente en 1993. Sucesor de HTML+ que nunca vio la luz. HTML 3.2: Sucesor del nunca lanzado HTML 3.0 que incluía la capacidad de crear tablas. Lanzado en 1995. HTML 4.0: Lanzado en Abril de 1998, y base del estándar Web actual. Página 1 - Hecho por Camilo Sperberg para Inverluz S.A.
HTML 4.01: Vigente desde el 24 de Diciembre de 1999. Estándar actual. Es lo mismo que HTML 4.0, pero con algunas correcciones. Debido a la gran explosión de contenido multimedia, ahora se está trabajando en un nuevo estándar sucesor de HTML 4.01 que será conocido (de forma muy original) como HTML 5.0. Uno de los tantos cambios a introducirse será la vuelta del atributo target, que había sido extraído con la introducción de HTML 4.01 Strict, ocupada en muchísimos sitios Web y que no permitía la validación Strict de un documento HTML, sino solamente Transitional (dos temas de los cuales hablaremos más adelante), además de algunos tags nuevos tales como la inclusión de Audio y Video sin necesariamente ocupar Flash. Otros tipos de documentos cuyo propósito es algo distinto son SVG, XML, XHTML, entre otros. Página 2 - Hecho por Camilo Sperberg para Inverluz S.A.
Validación, Strict, Transitional, Frameset: Qué son? En la sección anterior hablamos de algunos conceptos nuevos tales como la validación de un documento HTML 4.01, y las palabras Strict y Transitional. En esta sección se pretende explicar las diferencias que existen en cada una, aclarando a su vez bajo qué casos o circunstancias puede servir cada una. Validación La W3C (Organismo que regula y crea el estándar HTML) nos presenta varios validadores, siendo los más principales el validador del HTML y la otra para CSS. El objetivo de estos validadores es poder crear documentos HTML que se puedan visualizar de la misma manera en cualquier navegador y evitar la creación de estándares de código cerrado. En la actualidad y con la introducción de teléfonos celulares capaces de navegar por Internet y los netbooks, se han agregado más validadores que validan si la página puede ser visualizado correctamente en uno de estos dispositivos, ya que debido a las limitaciones especiales de los mismos (ancho de banda, velocidad, tamaño de la pantalla, usabilidad, etc), por lo general se tiene que hacer una página o un sitio totalmente distinto. Asimismo, gracias al crecimiento exponencial de los feeds RSS y Atom, ahora también se pueden validar estos tipos de documentos en la página de la W3C. Estos validadores se pueden encontrar en las siguientes direcciones: HTML: http://validator.w3.org/ CSS: http://jigsaw.w3.org/css-validator/ Móviles: http://validator.w3.org/mobile/ RSS: http://validator.w3.org/feed/ Debido a que la orientación de este curso es netamente HTML y CSS, sólo analizaremos en profundidad el validador de HTML y el de CSS, explicando las diferencias que hay entre los distintos tipos de documentos. Página 3 - Hecho por Camilo Sperberg para Inverluz S.A.
Validador de HTML: Diferenciación entre Strict, Frameset y Transitional Cuando se creó HTML 4.0, su antecesor (HTML 3.2) llevaba ya cerca de 3 años en línea, en una época donde la Web crecía exponencialmente a un ritmo desenfrenado, antes de la crisis asiática y mucho antes de la crisis de las.com en el año 2000/2001. Todo el mundo (literalmente) se había acostumbrado a los tags o etiquetas de HTML 3.2 y el traspaso a HTML 4.0 iba a ser un proceso lento. A su vez, en aquella época ya se estaba tratando de erradicar el uso de frames, que producía más dolores de cabeza que soluciones para los desarrolladores. Es por esto que desde el momento que se hizo disponible HTML 4.0, se crearon diferentes tipos de validaciones, algunas más permisivas que otras: Frameset: Un documento HTML 4.01 Frameset es uno de los más permisivos, pues recoge todas las reglas de frames de HTML 3.2 y permite la validación de contenido que mezcla reglas de HTML 3.2 y HTML 4.01. Transitional: Un documento HTML 4.01 Transitional recoge distintos atributos de HTML 3.2 (exceptuando todo lo que tenga que ver con frames) y permite la validación de un documento que contenga reglas tanto de HTML 3.2 como de 4.01, aunque más orientado a 4.01. Strict: Un documento HTML 4.01 Strict sólo permite su validación si el documento cumple las normas HTML 4.01 a cabalidad; excluye toda regla de HTML 3.2. En la actualidad, se recomienda realizar una página o un sitio idealmente bajo XHTML 1.0 Transitional o Strict, o bien bajo las reglas de HTML 4.01 Strict o Transitional. Ambas tienen algunas diferencias chicas en su implementación. Página 4 - Hecho por Camilo Sperberg para Inverluz S.A.
Estructura general de HTML Curso SENCE Un documento HTML, a grandes rasgos, presenta fundamentalmente 2 secciones: la primera sección dedicada a las cabeceras del documento (<head>), y la otra sección dedicada al cuerpo (<body>) del documento: lo que el usuario finalmente verá en su pantalla. Básicamente, HTML es sólo la apertura y posterior cierre de etiquetas. Estas etiquetas pueden (o no) incluir atributos, que regularán ciertos aspectos que son relevantes especialmente para el diseño o ciertas funcionalidades que queramos implementar dinámicamente en nuestro sitio Web mediante sus propiedades o variables: De esta manera, la construcción de un sitio Web que diga Hola mundo! quedará de la siguiente forma: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html lang="es"> <head> <title>título de la página</title> <!-- Termina el Head --> </head> <body> <p style= color:#3333ee;background:#eeeeee; >Hola mundo!</p> </body> </html> Página 5 - Hecho por Camilo Sperberg para Inverluz S.A.
En nuestro ejemplo, definimos las etiquetas básicas así como algunos atributos. El resultado final de lo que verá el usuario es este: Las etiquetas son todas aquellas que están destacadas en negrita entre el signo < y >, y los atributos son aquellos que están con letra azul. Estos atributos a su vez tienen sus propiedades, destacadas en rojo. A excepción de la etiqueta <p>, lo demás es recomendado para todo documento básico en la Web. Desglosemos nuestro sitio: La primera línea define el tipo de estándar a ocupar. Dependiendo de cuál estándar queramos ocupar, tenemos que escribir una u otra que se podrá encontrar en el mismo sitio del validador. La segunda línea indica mediante la etiqueta, que el documento a desplegarse es uno de tipo HTML, y que, mediante el atributo lang se trata de un documento en idioma español. La tercera línea consiste en decirle al navegador que vienen las cabeceras, que, como aprenderán más adelante, sirven para insertar CSS o JavaScript. También se introducirá aquí el título de la página, que va a ser lo que mostrará el navegador en la barra de título. La cuarta línea es el título de la página, entre etiquetas <title>. Nótese el cierre de título ( </title> ) como también el uso de las entidades: Página 6 - Hecho por Camilo Sperberg para Inverluz S.A.
Internet es un medio global, con muchos idiomas distintos, y distintas formas de representar los caracteres correctamente bajo esas condiciones. Más adelante se explicará mejor este punto. La quinta línea es un comentario, saldrá en el código fuente, pero no en la visualización de nuestra Web. Un comentario puede ir en cualquier parte de la página. La sexta línea es el cierre de nuestras cabeceras. La séptima línea es la apertura de nuestro body, el contenido de la página. La octava línea es interesante: Mediante la etiqueta P (que significa párrafo) y el atributo STYLE, definimos el color de nuestra fuente a #3333EE, que se asemeja al azul. Asimismo, definimos un color de fondo gris de color #EEEEEE. Finalmente, escribimos nuestro texto y cerramos la etiqueta P. En las siguientes dos líneas nos dedicaremos a cerrar etiquetas: cerramos nuestro body y cerramos también nuestro documento HTML. Códigos HTML básicos <html>: Define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML. Se cierra con </html>. <head>: Define la cabecera del documento HTML, esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario, como por ejemplo el título de la ventana del navegador. Se cierra con </head>. Dentro de la cabecera <head> podemos encontrar: <title>: Define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana. Se cierra con </title>. <link>: Para vincular el sitio a hojas de estilo o iconos. Ejemplo: <link rel="stylesheet" href="style.css" type="text/css" /> <style>: Para colocar el estilo interno de la página, ya sea usando CSS, JavaScript u otros lenguajes similares. Se cierra con </style>. Cuando Página 7 - Hecho por Camilo Sperberg para Inverluz S.A.
existan conflictos con un CSS previamente enlazado, primará el último estilo definido. <script>: Sirve para indicar la inclusión o el contenido de código hecho en JavaScript. Debe cerrarse con </script>. <body>: Define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Debe cerrarse con </body>. Dentro del cuerpo <body> podemos encontrar numerosas etiquetas. A continuación se indican algunas a modo de ejemplo: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Encabezados o títulos del documento con diferente relevancia. Debe cerrarse con </hx>, donde X representa el número de apertura. <table>: Define una tabla, debe cerrarse con </table>. o <tr>: Fila de una tabla o <td>: Celda de datos de una tabla <a>: Hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse la dirección a la cual apunta por medio del atributo href. Ejemplo: <a href="http://www.unreal4u.com">unreal4u</a> se representará como unreal4u en pantalla. <div>: Área de la página. Debe cerrarse con </div>. <img>: Imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagen. Ejemplo: <img src="./imagenes/mifoto.jpg" /> <ul> / <ol><li>: Etiquetas para listas. Cada una de ellas debe cerrarse con su equivalente en el orden inverso en que fueron creadas: </li></ol> / </ul>. <strong>: texto en negrita (Antes (HTML 3.2-) conocida como <b>). Debe cerrarse con </strong>. Página 8 - Hecho por Camilo Sperberg para Inverluz S.A.
<i>: texto en cursiva. Debe cerrarse con </i>. <u>: texto subrayado. Debe cerrarse con </u>. Curso SENCE Las entidades Debido a la naturaleza globalizada de Internet, nació la necesidad de que cualquier computador del mundo pudiera desplegar cualquier página en cualquier idioma. Sin embargo, hay algunos caracteres especiales que necesitan de una traducción, ya que el mismo código pudiera ser ocupado en otro país para representar un mismo carácter. Asimismo, la representación del carácter < ó > se hace imposible, puesto que el navegador va a pensar que se trata de una etiqueta, las cuales no despliega. De ahí fue que nacieron las entidades HTML y el set de caracteres. En Chile, el set de caracteres (conjunto de letras y símbolos más ocupados) que mejor se ajusta a nuestra realidad, es el ISO-9959-1. En sus primeros 128 caracteres, incluye algunos símbolos de control, el alfabeto inglés en minúsculas y mayúsculas, los números del 0 al 9 y algunos símbolos comunes como el punto, punto y coma, la resta, la suma, corchetes, signo peso, paréntesis, entre otros. La parte alta en cambio, reúne símbolos menos cotidianos pero igualmente importantes, como los símbolos, µ, y también la combinación Ññ, Áá, Éé, Íí, Óó y Úú. La única excepción a la regla serían las escrituras que no consistan en un alfabeto latino, pero debido a lo escaso y lejano no se verán estos casos en este curso. Por lo general, en Chile y los demás países restantes de América Latina, es muy probable que estos caracteres se puedan ver sin problema alguno escribiéndolas directamente; sin embargo; y dependiendo de la configuración del servidor este caso no se cumple para una persona que visita el sitio desde Estados Unidos o Europa del Este. Para evitar estos casos, lo mejor es escribir estos caracteres especiales mediante su entidad, de esta manera, algunos de los símbolos más comunes se tendrán que escribir de la siguiente manera: Página 9 - Hecho por Camilo Sperberg para Inverluz S.A.
Carácter Entidad Carácter Entidad Ñ ñ É é Ó ó Ñ ñ É é Ó ó < & & Á á Í í Ú ú > Á á Í í Ú ú < > Una lista completa de entidades se puede encontrar en el sitio web de la W3schools, en la siguiente dirección: http://www.w3schools.com/tags/ref_entities.asp Página 10 - Hecho por Camilo Sperberg para Inverluz S.A.
Recursos externos a HTML Curso SENCE HTML en sí es limitado. Muy limitado. Si no fuera por tecnologías tales como CSS o JavaScript, no estaríamos muy lejos de esta realidad: Página principal de Google el año 1998 Sin embargo, desde la introducción masiva de Internet a los usuarios tanto del hogar como de oficinas, han surgido varias tecnologías que juegan un papel de salvavidas y sirven como parche para el despliegue de la información solicitada por el navegante, hasta el punto que hoy en día, existe una multitud de sitios que despliegan su información basada netamente en HTML puro y CSS avanzado. Si nuestro navegador no comprendiera CSS, lo más probable es que se vea una página en blanco con mucho texto, tal como la imagen de arriba pero sin colores ni imágenes. Uno de los aspectos más importantes de la Web en la actualidad es que existen dos formas de ejecutar un código, cada una con sus pros y sus contras, pero hay que tener muy en claro qué se ejecuta dónde: Se puede ejecutar un código tanto en el servidor o en el computador del cliente (Usuario). Página 11 - Hecho por Camilo Sperberg para Inverluz S.A.
Que se ejecute o no un código en el servidor o en el cliente tiene algunas implicancias. Cuando se ejecuta en el servidor, no tenemos ninguna posibilidad de pedirle datos al usuario; un ejemplo muy bueno es mostrar la hora que puede resultar incorrecto si no se piensa antes el cómo hacerlo; debido a que, por ejemplo, la hora del servidor en Chile no es la misma que en Japón. Aún si ajustamos la hora del servidor a la hora de Japón, dejamos descontento a todos los usuarios en Australia. De la misma manera, cuando un usuario se le pide ingresar la edad lo más lógico sería que lo escribiera en números. Sin embargo, el objeto <input> de HTML no diferencia entre el ingreso de números, letras o caracteres extraños y nunca hay que confiar en el usuario: siempre van a haber usuarios que; ya sea por equivocación o por maldad; no van a ingresar números. HTML 5.0 soluciona algunos de estos inconvenientes, creando inputs de tipo fecha, hora y edad, pero todavía está en fase beta y algunas cosas están sujetas a cambio. Lo mejor sería controlar el ingreso de este tipo de variable solamente en el servidor (control total), pero no es lo más óptimo en todos los casos debido a que estaríamos desperdiciando tiempo y recursos informáticos al tener que generar, validar y transferir nuevamente la página, indicando el/los errores cometidos. Lo más óptimo sería poder controlar esto también en el lado del cliente, donde todo se ejecuta en el PC que éste posea, haciendo menos engorroso y más usable nuestro sistema, pero sin olvidar que no todos los usuarios son iguales: algunos pueden tener desactivadas ciertas funciones que necesitaremos. Adelantando un poco el curso, a continuación una tabla resumida de qué se ejecuta dónde en cada caso: Ítem Participación Servidor Participación Cliente HTML La genera Lo interpreta Javascript La genera Lo ejecuta CSS La genera Lo interpreta PHP Lo ejecuta Ninguna Base de Datos Lo ejecuta Ninguna Página 12 - Hecho por Camilo Sperberg para Inverluz S.A.
Javascript Es un lenguaje de scripts que se ejecuta en el computador del cliente. Esto se hizo de esta manera debido a la necesidad de acelerar y facilitar las cosas al usuario, principalmente porque en la época temprana de Internet, tener un módem de 56KBps era un lujo (Hoy en día se define banda ancha de 1.500KBps hacia arriba) y cargar una foto podía ser una actividad de valiosos segundos y hasta minutos si era muy pesada. Como punto de comparación: cargar www.youtube.com en una línea de 56KBps tomaría cerca de 18 segundos mientras que con una línea de banda ancha no se demoraría más de 2 segundos, contando además con el hecho de que no se está tomando en cuenta los posibles scripts que se ejecutarán y el despliegue (rendereo) de la página por parte del navegador, que puede llegar hasta a 5 ó 6 segundos en equipos modernos. Originalmente fue utilizado más que nada para la validación de formularios y ahora último para la creación de efectos de transición y muchos otros mezclando tecnologías de CSS y técnicas de programación avanzadas para poder construir librerías de uso libre tal como jquery, mootools u otros. Aunque algunos efectos son realmente sorprendentes, cuando se abusa de ellos puede llegar a ser un problema bastante serio debido a que al usuario se le quedará pegado el navegador durante algunos instantes. Tampoco hay que olvidar que estos efectos son recientes, y tanto The Mozilla Foundation, Opera Software y otros fabricantes de motores de navegadores se encuentran recién mejorando su soporte de JavaScript avanzado, justamente para evitar estos problemas. Una mención aparte se la lleva Google: con la fuerte entrada de computadores con múltiples procesadores (cores) fueron los primeros en soportar multi-threading tanto para el rendereo, ejecución de JavaScript y otras tareas más livianas. Un script en JavaScript puede ejecutarse en cualquier parte de la página, aunque por buena práctica (y dependiendo del caso) se sugiere dejar todo JavaScript dentro de las cabeceras o justo antes del cierre de la etiqueta body. Página 13 - Hecho por Camilo Sperberg para Inverluz S.A.
Existen 2 posibles formas de incluir un script en JavaScript, y cada una tiene algunas ventajas y otras desventajas. Primer método: incrustado en la página Web: <html><head><title>título</title> <script type= text/javascript > // Aquí el contenido del JavaScript </script> </head> <body> <p style="background:#555;border:3px solid #F0F;color:#FFF;">Hola mundo!</p> </body></html> En este caso, todo el contenido JavaScript se escribe en el mismo documento, lo cual es ventajoso si es un script chico que sólo se ocupe en la misma. Sin embargo, si ocupamos el mismo script en 300 páginas, sería engorroso cambiar alguna cosa en las 300, y por lo mismo, existe otra forma de incluir un JavaScript. Segundo método: como un archivo externo: <html><head><title>título</title> <script type= text/javascript src= mi_javascript.js ></script> </head> <body> <p style="background:#555;border:3px solid #F0F;color:#FFF;">Hola mundo!</p> </body></html> En este caso, se importa el JavaScript desde mi_javascript.js, el cual es un archivo externo. La única desventaja que se podría tener es que si tengo 300 páginas con 300 JavaScripts distintos también tendría 300 archivos JavaScripts distintos, pero fuera de eso es lo mejor que se puede hacer: el cliente guardará una copia del javascript en caché por lo que no será necesario cargarlo nuevamente si cambia de una página a otra en nuestro sitio. Más adelante se verá en detalle el uso de JavaScript para validar formularios. Página 14 - Hecho por Camilo Sperberg para Inverluz S.A.
CSS Los Cascading Style Sheets u Hojas de Estilo, también basado en el lenguaje de scripts, son; en palabras simples; órdenes para el navegador que le indican todo lo relacionado con el diseño de la página. De esta forma, se separa al 100% el contenido del diseño, pudiendo de esta manera ir añadiendo diferentes estilos a una misma página sin alterar su contenido. Existen tres formas para incluir una hoja de estilo en una página Web; los recorreremos de la menos a la más recomendada. Como parte del atributo style de cada etiqueta: <html><head><title>título</title></head> <body style="background:#eee;"> <p style="background:#555;border:3px solid #F0F;color:#FFF;">Hola mundo, esto es parte del ejemplo 2</p> <a href="ejemplo1.php" style="color:#252;">link al ejemplo1</a> <p>un texto sin ningún tipo de estilo</p> <a href="ejemplo1.php">link sin estilo</a> </body></html> Esto producirá la siguiente salida en pantalla: Página 15 - Hecho por Camilo Sperberg para Inverluz S.A.
Como parte de un style en las cabeceras: Curso SENCE <html> <head> <title>título</title> <style> body { background:#eee; } p { background:#555; border:3px solid #F0F; color:#fff; } a { color:#252; } </style> </head> <body> <p>hola mundo, esto es parte del ejemplo 3</p> <a href="ejemplo1.php">link al ejemplo1</a> </body></html> Esto producirá esta salida en pantalla: Página 16 - Hecho por Camilo Sperberg para Inverluz S.A.
Como parte de un archivo externo: Contenido de ejemplo4.php: <html> <head> <title>título</title> <link rel= stylesheet href= estilo4.css type= text/css /> </head> <body> <p>hola mundo, esto es parte del ejemplo 4</p> <a href="ejemplo1.php">link al ejemplo1</a> </body></html> Contenido de estilo4.css: body { background:#eee; } p { background:#555; border:3px solid #F0F; color:#fff; } a { color:#252; } La salida en pantalla: Página 17 - Hecho por Camilo Sperberg para Inverluz S.A.
Tal como se puede apreciar en los ejemplos de arriba, la salida de cada una de ellas en pantalla es exactamente la misma, pero las ventajas y desventajas de cada método son: Método Ventajas Desventajas Como parte del atributo style Es el que requiere menos código En caso de grandes proyectos y muchos estilos similares, puede complicarse cambiar una cosa chica en muchos tags. Como parte de Es práctico para corregir Ídem que el punto anterior. las cabeceras cosas chicas A la larga, genera demasiado tráfico en el servidor. Como parte de Se centraliza todo el Muchos estilos chicos únicos un archivo externo diseño en un solo archivo, sumamente fácil de editar. generan mucho código. Por supuesto, que estos tres estilos se pueden usar a la vez. La única condición es que en el caso de existir un conflicto, prevalece la última declaración efectuada. La principal ventaja de las hojas de estilo es que presentan una característica única que los hacen muy potentes: los objetos tienen herencia. Esto significa que si establecemos un cierto tamaño de fuente o color en el body, en todos los demás objetos de la página se replicará. Ejemplo: Contenido de ejemplo5.php: <html><head><title>ejemplo 5</title> <link rel="stylesheet" href="estilo5.css" type="text/css" /> </head><body> Texto sin ningún estilo <p>texto con tag <p></p> <h1>texto como título</h1> </body></html> Página 18 - Hecho por Camilo Sperberg para Inverluz S.A.
Contenido de estilo5.css: body { background:#113; color:#3e9; } Lo cual produce esto: Una excepción a la regla son los links, ya que tienen su propio color predeterminado, el cual hay que sobre-escribir. Lo mismo pasa con el tamaño en las etiquetas (<hx>). Por el momento, sólo veremos algunas de las propiedades más comunes en CSS; lo demás se aprenderá de forma práctica en las clases presenciales. Página 19 - Hecho por Camilo Sperberg para Inverluz S.A.
Declarando propiedades en CSS Tal como se ha visto en los ejemplos previos, CSS nos da la posibilidad de crear estilos para ciertas etiquetas pre-establecidas del HTML, tales como BODY, P, SPAN, UL, etc. Éstas se declaran en el CSS como el nombre de la etiqueta seguido de una llave, las declaraciones y finalmente una llave que cierra la que se abrió previamente. Sin embargo, en el caso que se tengan dos etiquetas iguales y se les quiera dar un estilo distinto a cada uno, es bastante fácil poder crear múltiples declaraciones distintas para un mismo tipo de etiqueta sin que éstos se sobrescriban mutuamente. Esto es posible gracias a los atributos id o class de HTML: de esta forma, podemos tener un link con atributo hola y otro link con atributo mundo, las cuales, en el CSS van a tener dos estilos total y absolutamente diferentes. ID y CLASS Existen diferencias grandes a nivel conceptual de una id y un class. La principal de ellas es que el id se ocupa para elementos únicos en la página y no se puede ocupar dos veces. Un class en cambio, se puede replicar múltiples veces. Otra diferencia grande entre ambos es en su declaración en el CSS: /* Declarando un párrafo con ID: */ #mi-parrafo{ font-family:"verdana"; font-weight:bolder; } /* Declarando un párrafo con CLASS: */.mi-segundo-parrafo{ font-family:"arial"; font-size:16pt; } Página 20 - Hecho por Camilo Sperberg para Inverluz S.A.
La salida en pantalla será la siguiente: Contenedores y tablas: cuál es la diferencia? En tiempos antiguos del HTML, no existía la necesidad de organizar eficientemente una página: simplemente se escribía el texto y el navegador la mostraba. La presencia en la Web en ese entonces simplemente implicaba tener una página con texto y un par de imágenes. Sin embargo, esto cambió bastante a medida que la Web se fue haciendo más popular y las grandes empresas necesitaban mostrar su diseño y una línea editorial o línea particular de diseño. Fue en este punto donde nació CSS y con ello todo un mundo nuevo que hoy en día es capaz de ser una profesión. El único problema de la evolución en la Web es que existen múltiples maneras de conseguir lo que se quiere lograr. Así, es posible basar el diseño en HTML puro, lo cual, a pesar de que es altamente desaconsejable, es lo más fácil. Por ello, es que hoy en día todavía existen múltiples páginas que basan su diseño en tablas. Sin embargo, la nueva moda es presentar una página completa mediante contenedores, layers, divs o cualquiera de los múltiples nombres que recibe. Página 21 - Hecho por Camilo Sperberg para Inverluz S.A.
A pesar de que en clases profundizaremos en este apartado, se aconseja desde ya la instalación y aprendizaje básico de Firebug para Firefox, debido a que este plugin nos presentará la página y su CSS asociado de forma visual y con posibilidades de modificarlo a modo de vista previa de una forma fácil y rápida. La herencia Uno de los principios fundamentales de CSS, es la herencia de los objetos. Aunque al principio algo difícil de entender (y aplicar), una vez entendido resulta bastante más fácil crear un estilo simple, chico y rápido. HTML en sí es nada más que un objeto dentro de otros: así, un texto debe ir dentro de un párrafo, a su vez que este párrafo puede ir dentro de un div, y el div irá dentro del cuerpo del documento. La herencia se trata básicamente de que los objetos hijos (en este caso, nuestro texto), hereden las propiedades de su padre. Así, si tenemos este CSS: <html><head><title>ejemplo 15a, uso de divs y herencia</title> <style> body{font-family:"verdana"; font-size:18pt; margin:0;padding:0; background:#ddd;} #central{margin:0 auto;width:600px;} p.texto-general{background:#333;} span.texto-final{color:#eee;} </style> </head> <body> <div id="central"> <p class="texto-general"> <span class="texto-final">este es mi texto, con propiedades heredadas</span> </p> </div> </body></html> Visitar http://unreal4u.com/inverluz/ejemplo15a.php para mejor visualización del código fuente Página 22 - Hecho por Camilo Sperberg para Inverluz S.A.
En pantalla se verá lo siguiente: En este caso, nuestro texto final hereda las siguientes propiedades: 1- La familia de la fuente (Declarado en el body) 2- El tamaño de la fuente (Declarado en el body) 3- El color del fondo (Declarado en el párrafo) 4- El color de la letra (Declarado en el span que contiene el texto) Y a su vez, algunas propiedades son sobrescritas con otras, como es en este caso el fondo: mientras que en nuestro body declaramos que el fondo debe ser de color #DDD, en nuestro párrafo sobrescribimos ese valor con #333, con lo cual sólo lo que haya dentro del párrafo heredará ese color. Sin embargo, hay que tener en cuenta que no todas las propiedades se heredan: de esta forma, el centrado del div no hace que el texto se centre. Pequeña nota sobre los colores en CSS En CSS existen 3 formas de representar colores. La primera es mediante su nombre en inglés, aunque presenta la gran limitante de no poder representar más de 16 colores que son los nombres oficiales reconocidos. El segundo método es mediante el código hexadecimal del color. Para averiguar el código hexadecimal, podemos valernos de los cientos de sitios que tengan un Página 23 - Hecho por Camilo Sperberg para Inverluz S.A.
colorpicker (buscar por online colorpicker en Google), o bien, si se está ocupando Firefox se puede bajar el plugin ColorZilla, con la cual podremos escoger un color directamente desde la pantalla o bien hacer zoom de la página para verla desde más cerca, entre otras opciones. Por último, en ciertos casos, se puede acortar el código hexadecimal siempre y cuando cumpla con la regla de que los pares de colores RGB sean iguales. Así, el color #1111FF se puede acortar como #11F. Lo que no se puede hacer es acortar este código: #1244BB, ya que el primer par no es igual. Tampoco es posible acortar #CCCCCC a #C, sino sólo a #CCC. Teniendo en cuenta esta simple regla, se puede minimizar la transferencia hacia el cliente, cosa que se agradece bastante sobretodo cuando el sitio es altamente concurrido. Más propiedades y declaraciones de CSS se verán en mayor profundidad durante las clases. Página 24 - Hecho por Camilo Sperberg para Inverluz S.A.
PHP El antiguamente conocido Personal Home Page creado por Rasmus Lendorf en 1994, creado como un simple contador de visitas, ha evolucionado tanto y de manera tan rápida que hoy en día cerca del 75% de las webs mundiales lo utilizan. Ha evolucionado de tal forma que su acrónimo (extrañamente recursivo) cambió: en vez de Personal Home Page ahora significa PHP Hyper-text Pre-processor. Es gracias a su facilidad de uso, su gran rendimiento, su alta seguridad y escabilidad que mucha gente lo prefiere. Continuamente se está actualizando y se le están agregando más y mejores funciones que permiten resolver de manera óptima cualquier problema basado en la Web. Es, como casi todo lo relacionado con las tecnologías Web, un lenguaje interpretado. La función primordial de PHP (hoy en día) es tomar ciertas entradas y producir una salida en HTML de acuerdo a las condiciones establecidas por el programador: Página 25 - Hecho por Camilo Sperberg para Inverluz S.A.
Además provee de una puerta de acceso a las distintas opciones de bases de datos -tales como MySQL, PostGreSQL, Oracle, MS SQL Server, entre muchos otros- para que, de esta manera, se pueda interactuar con ellas y crear aplicaciones muy poderosas con muy poco esfuerzo. La única función que veremos por el momento es la que servirá para poder incluir diversas partes de páginas en una sola. Esto nos permitirá mantener un solo estilo en todas las páginas o poder incluir un menú en todas nuestras páginas, o para incluir cabeceras o pies de página. Para poder hacer esto, primero debemos tener en claro que todas las páginas se deben guardar con la extensión.php, que es la que le indica al servidor Web que el archivo podría incluir directivas PHP que procesar. En la actualidad, se recomienda guardar todos los documentos como.php, debido a que de esta manera, no crearemos posibles links rotos en caso de querer agregar funcionalidad PHP en alguna de nuestras páginas. Si bien es cierto no es absolutamente necesario guardar un archivo como.php para que el motor lo interprete como un archivo con directivas, en el 99% de los casos esto sí es así. La indicación al interpretador de que vamos a ocupar PHP es mediante los tags: <?php directivas_php;?> Existe también un formato corto de apertura ( <? ) pero por compatibilidad es recomendado la forma larga. Página 26 - Hecho por Camilo Sperberg para Inverluz S.A.
Para incluir un documento dentro del actual, haremos uso de una de las primeras y más antiguas funciones de PHP: la directiva include(); Contenido de ejemplo6.php: <html><head><title>ejemplo 6</title> <link rel="stylesheet" href="estilo6.css" type="text/css" /> </head> <body> Hola, esto es una página común y corriente. <?php include('footer6.php');?> </body></html> Contenido de footer6.php: <p class="chico">este es un footer. Sitio hecho por unreal4u (Camilo Sperberg)</p> Contenido de estilo6.css: body { Background:#445; color:#fff; } p.letrachica { font-size:0.9em; Background:#FFF; color:#000; border:1px dashed #999; margin:3px; text-align:center; } En el CSS tenemos varios conceptos nuevos, tal como border (que define bordes), margin (que regula márgenes) y text-align (que define la justificación del texto). Asimismo, en nuestro CSS especificamos el valor p.letrachica, con esto todas las etiquetas de clase letrachica van a tomar este mismo formato. Página 27 - Hecho por Camilo Sperberg para Inverluz S.A.
La salida producida por el código arriba expresado es la siguiente: Curso SENCE De esta forma, es posible construir muchos documentos con el mismo formato. Si se construye un sitio Web con 300 páginas distintas, y queremos cambiar nuestro pie de página para todas ellas (footer6.php), lo único que tendremos que hacer es cambiar el archivo footer6.php para que de esta manera, el cambio se aprecie en las 300 páginas restantes. Al finalizar el curso, con un poco de práctica y haciendo aún más dinámica su página, se puede lograr un index como la que está en http://www.unreal4u.com/nuevo/ con sólo estas líneas: Contenido de index.php: <?php $titulo = Bienvenidos! ; include('includes/header.php'); include('paginas/index.php'); include('includes/footer.php');?> Página 28 - Hecho por Camilo Sperberg para Inverluz S.A.
Recursos utilizados Curso SENCE En la construcción de este manual se consultaron primordialmente los siguientes recursos disponibles en la Web: Información sobre HTML: http://es.wikipedia.org/wiki/html Más información sobre HTML: http://es.wikipedia.org/wiki/world_wide_web Información sobre Tim Berners-Lee: http://www.chw.net/foro/personajes-f82/19101-tim-berners-lee.html Screenshot de Google en 1998: http://en.wikipedia.org/wiki/google Información sobre HTML 4.01: http://www.w3.org/tr/rec-html40/ Información sobre HTML 5.0: http://www.w3.org/tr/html5-diff/#changelog Nuevas características en HTML 5.0: http://www.phpguru.org/static/html5 Información sobre CSS: http://www.w3schools.com/css/ Información sobre PHP: http://www.php.net/ Estadísticas globales en el uso de tecnologías Web: http://www.securityspace.com/s_survey/ Posibilidades de CSS: http://www.mezzoblue.com/zengarden/alldesigns/ Página 29 - Hecho por Camilo Sperberg para Inverluz S.A.