Cómo hacer una página web (5) - Elementos HTML

En anteriores tutoriales vimos cómo poner un título a tu página web empleando el elemento TITLE y cómo escribir párrafos con el elemento P. Como supongo que ya habrás adivinado, los elementos HTML sirven para estructurar una página web, catalogando su contenido y dando así sentido al conjunto. Si sólo escribes texto pero no lo incluyes como parte de elementos HTML, al navegador le será imposible interpretar qué es un título, qué es un párrafo, qué es una lista, etc. Y si el navegador no sabe qué es qué, no podrá mostrarlo de la manera adecuada, como por ejemplo con unos determinados márgenes y tipo de texto.

Ahora me gustaría que imprimieras la tabla con los elementos HTML 4 que aparece en el site del W3C español. Añado además la versión en inglés para que sepas cómo se denomina a los elementos de manera internacional.

• Lista de elementos HTML en español
• Lista de elementos HTML en inglés

Como verás, tenemos una tabla en cuya primera columna aparece el nombre de los elementos. Éste es a veces una palabra completa (CAPTION, TABLE, etc.), pero lo más habitual es que sea una abreviatura o acrónimo, como por ejemplo UL (unordered list, lista no ordenada).

En los encabezados de las siguientes tres columnas de la tabla leemos Etiqueta inicial (o de apertura), Etiqueta final (o de cierre) y Vacío. Esto hace referencia a tres tipos de elementos HTML, dependiendo de cómo se creen:

1. Elementos que DEBEN tener una etiqueta de apertura y otra de cierre.
   • Son los elementos de la tabla cuyas tres columnas mencionadas están vacías.
   • La etiqueta de apertura consta del signo "menor que" + el nombre del elemento + el signo "mayor que": <nombre-del-elemento>
   • La etiqueta de cierre consta del signo "menor que" + la barra oblicua + el nombre del elemento + el signo "mayor que": </nombre-del-elemento>
   • Entre ambas etiquetas hay contenido.
2. Elementos con contenido cuya etiqueta de cierre y/o de apertura son opcionales.
   • Son los elementos de la tabla en cuya columna "Etiqueta inicial" y/o columna "Etiqueta final" hay una "O" de opcional.
   • Son elementos que, como los primeros, tienen un determinado contenido.
3. Elementos que NUNCA tienen etiquetas de cierre.
   • Son los elementos de la tabla en cuya columna "Vacío" hay una "V".
   • Estos elementos son clasificados como vacíos porque no tienen contenido. Un ejemplo es BR, que sirve para forzar un salto de línea, o IMG, para insertar una imagen en la página.

¡Importante! Aunque la Especificación HTML 4.01 permita que no haga falta escribir las etiquetas de ciertos elementos, te recomiendo usar las etiquetas de apertura y cierre en TODOS los elementos que no estén vacíos. Si algún día decides pasarte al XHTML, el acostumbrarte a emplear las etiquetas te puede ahorrar muchos quebraderos de cabeza. Por esta misma razón, aunque las etiquetas puedan escribirse tanto en mayúsculas como en minúsculas, te recomiendo que lo hagas siempre en minúsculas.

Respecto a la quinta columna, basta por ahora con indicarte que en ella se señala con una "D" a los elementos desaprobados, es decir, elementos que no deben usarse con el HTML 4.01 Strict.

Aplicando buenas técnicas de programación

Quería descargarme el nuevo navegador Opera (la versión 10) y me he topado sin querer con este interesante artículo (en inglés) donde se explican diferentes técnicas para hacer un código Javascript eficiente, robusto y legible.

Aunque está enfocado al lenguaje de programación Javascript lo cierto es que son en su mayoría reglas universales que se pueden aplicar a cualquier otro lenguaje.

Si eres un programador veterano y no aplicas estas técnicas ya es hora de "renovarse" y actualizar tu forma de programar y si eres "novato" es un buen momento para empezar a programar usando estas directrices que, aunque al principio nos parezca que complican las cosas, al final nos ahorrarán muchos quebraderos de cabeza.

Espero que disfrutéis con la lectura.
http://dev.opera.com/articles/view/javascript-best-practices/

Cómo hacer una página web (4) - El W3C

Es inevitable que, antes de continuar con la parte práctica, te explique algunas cosas que son muy, muy importantes.

A partir de ahora mencionaré bastante al W3C (World Wide Web Consortium), cuya misión es, tal y como se describe en su site español, guiar la Web hacia su máximo potencial a través del desarrollo de protocolos y pautas que aseguren el crecimiento futuro de la Web.

Yo me quedo con esto: Para que la Web alcance su máximo potencial, las tecnologías Web más importantes deben ser compatibles entre sí y permitir que cualquier hardware y software, utilizado para acceder a la Web, funcione conjuntamente. El W3C hace referencia a este objetivo como 'interoperabilidad Web'. Al publicar estándares abiertos (no propietarios) para lenguajes Web y protocolos, el W3C trata de evitar la fragmentación del mercado y, por lo tanto, la fragmentación de la Web.

Y es que el W3C crea las llamadas W3C Recommendations (Recomendaciones del W3C), documentos que describen cuáles deberían ser las prácticas estándares de la industria Web: Una Recomendación del W3C es lo mismo que un estándar Web, sólo que una especificación desarrollada por el W3C es estable, contribuye a fomentar la interoperabilidad en la Web, y ha sido revisada por los Miembros del W3C, que favorecerán su adopción por parte de la industria.

Y, si le echas un vistazo a la lista de miembros del W3C, te darás cuenta por qué hay que tener en cuenta lo que proponen.

¿Estándares abiertos? ¿no propietarios? ¿fragmentación de la Web? ¿qué tipo de lío es éste, Bríd?

Un ejemplo que te lo va a dejar un poquito más claro; seguro que has escuchado alguna vez que hay videojuegos, o programas de TV, que pueden causar un ataque en personas con epilepsia fotosensitiva. Pues bien, en una de las Recomendaciones del W3C se establecen unas pautas para hacer que el contenido web sea accesible para personas con discapacidades, y en uno de sus puntos se pide a los desarrolladores web que no hagan parpadear la pantalla hasta que los navegadores no permitan que los internautas puedan parar el parpadeo a voluntad. Esta Recomendación se llama Web Content Accesibility guidelines 1.0 (Pautas de Accesibilidad al Contenido en la Web 1.0.)

Otra Recomendación del W3C muy importante es la HTML 4.01 Specification ( Especificación HTML 4.01). Cualquier desarrollador web debe tener conocimiento de estos estándares, de estas Recomendaciones o Especificaciones, y al mismo tiempo conocer cómo cumplen los principales navegadores con las Recomendaciones. Porque, efectivamente, también hay estándares propuestos para los navegadores. Esto explica un poco más la frase que subrayé arriba: ¿para qué fragmentar el mercado creando por ejemplo elementos HTML que sólo tu navegador va a saber interpretar? ¿no será mejor ponerse de acuerdo y que haya un solo HTML que sea interpretado igual por todos los navegadores?

Bueno, ésta es al menos la teoría, en la práctica no es así ni mucho menos. Así a voz de pronto me viene a la mente que son muchisimos los maquetadores que se ***** en Microsoft Internet Explorer todos los días. ¡Pero dejémoslo aquí por hoy!

Nota: en el site español de la W3C no hay traducciones de todo el contenido del inglés al español, de ahí que los enlaces a las Pautas de Accesibilidad al Contenido en la Web 1.0 y la Especificación HTML 4.01 enlacen con conclase.net, donde Varias personas y organizaciones se han ofrecido voluntarias para traducir al castellano algunas de las recomendaciones del W3C. A aquellos que se manejen con el inglés les recomiendo que sean los documentos originales los que le sirvan de referencia, ya que son los únicos normativos.

Cómo hacer una página web (3) - párrafos

Bien, pues seguimos con mi-pag-web.html. Ahora vas a poner algo de texto en tu página web. Para evitar distracciones, sobre todo por mi parte, voy a emplear el denominado Lorem ipsum, un texto de relleno muy usado tanto en el diseño gráfico como en el web.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

A pesar de no haber tenido más remedio que usarlo a menudo, quiero dejar claro que en el ámbito profesional lo ideal sería prescindir de texto de relleno para diseñar un sitio web. Los resultados pueden ser desastrosos. En diseño web una pequeña variación en la longitud de un texto puede implicar tener que rehacer muchas cosas, aparte de que si se conoce con anterioridad la cantidad de texto a poner en las páginas, te haces una idea del tipo de diseño que necesitas, los espacios en blanco, los colores.. mil detalles!

Pues manos a la obra. Copia la primera frase del Lorem ipsum y mira el código de mi-pag-web.html ¿Ves el elemento BODY (cuerpo)? Es aquel definido por la etiqueta de apertura <body> y la etiqueta de cierre </body>. Pues es entre medias de estas etiquetas donde vas a escribir tu primer párrafo; es decir, dentro del elemento BODY.

<body></body>

Los párrafos se crean con el elemento P (de paragraph), que está definido por la etiqueta de apertura <p> y la etiqueta de cierre </p>. Crear un párrafo es tan sencillo como escribir ambas etiquetas dentro de las del elemento BODY.

<body><p></p></body>

Ya está, has definido un párrafo. En esencia, le has indicado al navegador que lo que vas a escribir es un párrafo. Ahora sólo te falta pegar la primera frase del Lorem ipsum.

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</body>

Crea ahora otro párrafo, con la segunda frase del Lorem ipsum.

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</body>

¡Importante! el código puede escribirse seguido, no afecta al resultado. Si lo escribo en líneas diferentes es por claridad.

Salva el documento y visualízalo en el navegador.. por fin, contenido en tu pagina web! 8)

Y ahora, haz una prueba... quita las etiquetas de párrafo, de manera que el BODY quede así:

<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</body>

Vuelve a salvar y visualiza el resultado en el navegador. Como ves, el texto ya no está formateado como párrafos, con sus correspondientes márgenes, sino que se muestra seguido. Vuelve a definir los párrafos, y si quieres (yo sí!) seguimos mañana! ;)

Curso básico de programación con PHP (1)

No sabía muy bien como empezar este curso ya que partimos de casi cero, así que al final he pensado que vamos a ser muy prácticos, sin ahondar mucho en la teoría y sin utilizar muchos tecnicismos. Al principio programar es muy frustrante y si encima metemos mucho rollo vais a abandonar a la primera de cambio.

Os voy a contar, eso sí, como funciona esto de las páginas web. Como ya he comentado alguna que otra vez, una página web se encuentra alojada en un servidor. Un servidor no es más que un ordenador, de hecho,como veremos en el siguiente capítulo, vuestros ordenadores pueden perfectamente usarse como servidores. La única condición para que el servidor muestre las páginas web es que tenga instalado un programa que se llama "servidor web" (o webserver en inglés). El servidor web más famoso y sobre el que corren la mayoría de sites en el mundo se llama Apache (http://httpd.apache.org).

Una página web no deja de ser texto puro y duro. Con cualquier editor de texto plano, como el notepad de Windows, puedes hacer una página web. El metaleguaje que se usa para crear una página web se llama HTML. Si sobre esta página web hacéis click con el botón derecho y seleccionáis "Ver código fuente" (o algo parecido) veréis el código HTML de la propia página. Aquí no vamos a aprender nada de HTML, eso se lo dejaremos a Bríd, por ahora vamos a centrarnos en PHP.

PHP es un lenguaje del lado del servidor. ¿Qué quiere decir eso?, pues que se ejecuta en el servidor y nunca en los ordenadores de los usuarios que están visitando la página web. Los lenguajes del lado del cliente son los que se ejecutan en los ordenadores de los usuarios y javascript es el más claro ejemplo de este tipo de lenguajes.

¿Por qué se usan lenguajes de programación?. Pues porque sin ellos todo sería "estático", los usuarios no podrían interactuar...imagináos este blog sin un lenguaje de programación ni una base de datos, por cada post tendríamos que crear una página nueva y después editarla con el notepad cada vez que hubiera un comentario nuevo. Eso sin contar los cambios en las estadísticas, etc,etc....vamos, sería inviable. Pues con PHP y una base de datos MySQL se puede hacer todo automáticamente, ¿genial no?

En el siguiente capítulo explicaré como instalar un servidor web en vuestro propio ordenador y así empezar a hacer vuestras primeras aplicaciones.

Cómo hacer una página web (2) - TITLE

1) Abre un editor de texto

Creo que la mejor manera de aprender es usando un simple editor de texto, como el Notepad++ (el blog de notas de Windows no colorea el código). Ya tendrás tiempo de pasar a un programa tipo Dreamweaver (genial!) y permitirte el lujo de olvidarlo todo ;)

2) Copia y pega la estructura base

Copia y pega este código en el editor de texto. Se trata de la estructura base de un documento HTML 4.01 Strict. Te lo explicaré todo más adelante.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body>
</body>
</html>

3) Ponle un título a la página

El título de la página se llama en HTML elemento TITLE, y está formado por una etiqueta de apertura, el texto que se desee, y una etiqueta de cierre:

<title>Texto del título</title>

El título es muy importante y debe elegirse cuidadosamente. Los buscadores lo usan para indexar, y cuando se hace una búsqueda en Google, es el título lo que más sobresale en cada resultado, siendo determinante a la hora de informar al usuario sobre el contenido general de la página.

4) Visualiza la página en el navegador

Una vez elegido el título, salva el documento con el nombre que estimes oportuno y la extensión html. Por ejemplo: mi-pag-web.html. Si estás usando Notepad++ notarás que los colores cambian y tu código queda mucho más claramente dividido.

Ahora sólo tienes que abrir tu recién creado documento en un navegador. Para ello puedes arrastrar el archivo a la ventana del navegador o usar Archivo > Abrir archivo en la barra de menú (en la parte superior del navegador).

Como verás, parece no haber nada por el momento, pero si te fijas en la barra de título del navegador (la que está arriba del todo), ¡comprenderás por qué se llama así! Y es que el título que le pongas a cada página aparecerá en la barra de título al abrir el documento en el navegador.

Cómo hacer una página web (1) - intro

Mi objetivo con esta serie de tutoriales es que, quien los siga desde el primero hasta el último, acabe entendiendo un poquito mejor cómo se construye una página web. Espero humildemente que sirvan tanto para los que quieren defenderse modificando su template en Blogger o cualquier otro sitio de blogs, como para los que al final se lancen a la aventura de hacer su propio site.

Hay muchísimos recursos online, pero pocos he visto que partan de cero o que no te pongan la cabeza como un bombo por la cantidad de definiciones que escriben desde el principio. Soy consciente de que quienes comienzan normalmente prefieren ponerse manos a la obra y aprender haciendo las cosas, así que, dentro de lo posible, evitaré parrafadas (aunque a veces será inevitable). Edito el 19 de marzo.. imposible no poner parrafadas, lo siento! XD

Yo voy a explicar cómo se hacen las cosas usando HTML 4.01 Strict, CSS y buenas prácticas (ej. intentar maximizar la accesibilidad). Soy humana y sé de antemano que algo faltará, otro tanto sobrará y en algunas cosas me equivocaré. Sólo espero que, quienes estéis dispuestos a aprender, perdonéis de antemano estas cosas.

Aunque es más complicado que todo esto, resumiré diciendo que con el HTML definimos, a través de etiquetas, de qué tipo es un determinado contenido de la página (ej. tal texto es un párrafo, tal otro es un encabezado, esto es una imagen, etc.); las CSS sirven para dar formato a ese contenido (ej. el color del botón, el tamaño del encabezado, etc.); y la programamación... la programación se la dejamos a Jesús, que próximamente comenzará a escribir en Bridje.