School of Webcraft, viendo el mundo como si fuera código HTML

School of Webcraft

School of Webcraft

Otro más de los ejercicios de la School of Webcraft, la clase Webmaking 101. Una vez familiarizado con algunos de los elementos más básicos de HTML, hay que salir a la calle y tomar fotos de cosas que conceptualmente son similares a esos conceptos. Por ejemplo, la gente haciendo cola en un negocio, sería <ol> (‘ordered list’, una lista cuyos elementos siguen un patrón en particular), cada una de las personas un <li> (‘list item’, elemento de la lista). Un ejercicio divertido, pero con alguna dosis de frustración.

Antes de comenzar, vale la pena mencionar la documentación en general, y el diccionario de elementos HTML en particular, que ofrece Mozilla Developer Network. Un sitio actualizado, exhaustivo y accesible no sólo para HTML, sino CSS, JavaScript, y mucho más.

En las fotografías, estan resaltados los elementos que percibí.

<time>

<time> es un elemento que define fecha y hora, como los horarios en una parada de autobuses.

<p> y <span>

<p> es tal vez uno de los elementos más comunes en HTML, e indica simplemente el inicio de un párrafo. Podemos ver en el texto de arriba como hay varios párrafos. <span> es un elemento similar a <div>: son elementos que sirven para marcar textos pero que por sí mismos no significan nada. <span>, a diferencia de <div>, no es un marcador de secciones. En esta foto, <span> podría ser usado para separar dos idiomas diferentes.

<ol> y <li>

<ol>, ‘ordered list’, marca una lista de elementos en un orden específico, normalmente números. La foto de arriba tambien podría ser una <ul>, ‘unordered list’, ya que no hay un orden explícito en la lista, pero hay un orden ciertamente ya que cualquier configuración alternativa no podría empezar con el elemento de en medio. Como en <ul>, en una <ol> cada elemento es un <li>, o ‘list item’.

<nav>

<nav>, a diferencia de <href>, es un vínculo dentro de la misma página. Como en la foto, el letrero lleva a la entrada del negocio, dentro del mismo edificio. Si el letrero estuviese en otro lado, sería sin lugar a dudas <href>, o un hipervínculo.

<menu> y <li>

<menu> es un elemento que contiene varias partes que llevan a acciones determinadas por los usuarios, tales como botones. También contienen <li>. En este ejemplo de la vida real, los usuarios del mundo eligen una acción, poner la basura en un contenedor o en otro.

<img>

<img> es uno de los elementos multimedia, tales como <video> o <audio>, que define una imagen dentro de la página. En este letrero, hay una imagen de una persona.

<div>

<div> divide secciones, y no tiene un significado inherente, puede ser determinado. En esta imagen, el encargado del jardín decidió que una sección sería de piedras y otra de pasto.

Despues de empezar a ver el código detrás del mundo real, poco a poco llegaremos a nuestra meta: ver todo como lo ve Neo al final de la primera película de Matrix:

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s