Hay veces en que las ideas parecen venir solas, y otras en las que es necesario salir en busca de la inspiración. Para esto último existen multitud de webs que, a modo de galerías, nos dan ideas para nuestros diseños web y nos permiten estar al tanto de las tendencias en este mundillo, que es tan cambiante o más que en otras disciplinas del diseño. ¿Necesitas ideas? Pues toma nota de estas recomendaciones:

CSS Manía

Todo un clásico que lleva siguiendo la evolución del diseño en Internet desde el año 2004, con multitud de actualizaciones casi a diario que convierten a esta galería en toda una referencia. Una fuente casi inagotable de ideas que no puede faltar en tus lecturas diarias si lo de diseñar webs está entre tus proyectos presentes o futuros.

Enlace | CSS Manía

CSS Impress

Otra propuesta a la que merece la pena seguir la pista por la gran cantidad de actualizaciones que nos trae, convirtiéndose en un flujo constante de ideas con las que enriquecer nuestras creaciones. Cuenta además con la interesante posibilidad de buscar en categorías organizadas por colores, por si nos apetece crear algo en un tono determinado y buscamos ejemplos que vayan en este estilo.

Enlace | CSS Impress

Designflavr

Esta galería no se centra en el diseño web, sino que ofrece ideas sobre arte visual en general, pero podemos navegar exclusivamente por su categoría CSS si así lo deseamos. Al repartirse entre más disciplinas se actualiza menos que otras webs del estilo, pero las ideas que ofrecen son siempre muy impactantes y atrayentes.

Enlace | Designflavr (sección web)

Crossmind

La gran ventaja de esta galería es que nos permite filtrar nuestras búsquedas en base a multitud de parámetros: por color, por elementos de diseño, por posibilidades multimedia, por la tecnología empleada… Ideal para cuando busquemos ideas muy concretas. La pega es que no cuenta con algo tan básico como un feed para seguir sus actualizaciones.

Enlace | Crossmind

Design By Grind

Lo interesante de esta última propuesta es que está especializada únicamente en páginas web diseñadas utilizando la técnica de Grind, o cuadrícula, la cual a pesar de no estar muy extendida todavía, ofrece resultados bastante buenos. Ideas y consejos para dotar a tu próximo diseño de una calidad superior de estructuración.

Enlace | Design By Grind

Terminamos este especial sobre HTML5 con la parte más desagradable (o agradable) del estándar: lo que se elimina. Es curioso que un montón de elementos comunes pasan a estar prohibidos en HTML5, por razones diversas que ahora veremos. Por esas mismas razones bastantes atributos han sido eliminados bien de un elemento concreto o de todos los elementos.

Sin embargo hay que aclarar estas prohibiciones, ya que hay dos caras en esta moneda. Por un lado los desarrolladores no pueden usarlos, si quieren que sus documentos sean HTML5 válidos. Por el otro lado, los navegadores tienen la obligación de implementarlos y soportarlos, para ser compatible hacia atrás con HTML4 y anteriores. Esta dualidad es muy interesante y nos ahorra bastantes problemas de una manera limpia definida en el estándar.

Elementos eliminados

Como decía, estos son los elementos eliminados y las razones de por qué son prohibidos:

• Los siguientes elementos (muy usados hace pocos años) se quitan de HTML5 porque son puramente presentacionales (no tienen semántica) y todo el tema estético se debe tratar con CSS:
  • basefont
  • big
  • center
  • font
  • s
  • strike
  • tt
  • u
• Los elementos para trabajar con frames (frame, frameset y noframes) se quitan del estándar por razones obvias: afectan negativamente a la usabilidad y accesibilidad de la web. Además, prácticamente rompen la web, y si se necesita algo similar se puede acudir a los iframe, más potentes y mejor pensados.
• El elemento acronym se elimina simplemente porque crea confusión sobre su uso, y los desarrolladores no entienden demasiado bien para qué usarlo. Las abreviaciones y acrónimos se pueden marcar con abbr, que sí se mantiene en el estándar.
• El elemento applet se ha declarado obsoleto y hoy en día no se utiliza. El elemento object reemplaza sus funciones y es lo común hoy en día.
• El elemento isindex se quita definitivamente. En la era de las cavernas se utilizaba para mandar información al servidor, pero con la llegada de los formularios su uso es arcaico y poco útil.
• El elemento dir también se declara obsoleto (ya lo era en HTML4), y simplemente se recomienda usar listas normales con ul.
• El elemento noscript se mantiene en HTML pero no en XML/XHTML, ya que su contenido está en HTML. No estoy muy de acuerdo con este movimiento, pero así será.

Atributos eliminados

Para empezar, todos los atributos referentes a la presentación han sido eliminados, por la misma razón de antes: CSS sirve mejor ese propósito. Recuerdo que el atributo style (que contiene CSS) es ahora universal y puede ser aplicado a todos los elementos, así que si queremos indicar su presentación sin añadir una hoja de estilos aparte, tendremos que usar este atributo. Atención a la lista porque esto sí que es importante, ya que algunos de estos elementos son muy usados, aunque otros están muy obsoletos:

• Atributo align en todos los elementos.
• Atributos alink, link, text y vlink en el elemento body.
• Atributo background en el elemento body.
• Atributo bgcolor en los elementos table, tr, td, th y body.
• Atributo border en todos los elementos.
• Atributos cellpadding y cellspacing en el elemento table.
• Atributos char y charoff en los elementos col, colgroup, tbody, td, tfoot, th, thead y tr.
• Atributo clear en el elemento br.
• Atributo compact en los elementos dl, menu, ol y ul.
• Atributo frame en el elemento table.
• Atributo frameborder en el elemento iframe.
• Atributo height en los elementos td y th.
• Atributos hspace y vspace en los elementos img y object.
• Atributos marginheight y marginwidth en el elemento iframe.
• Atributo noshade en el elemento hr.
• Atributo nowrap en los elementos td y th.
• Atributo rules en el elemento table.
• Atributo scrolling en el elemento iframe.
• Atributo size en el elemento hr.
• Atributo type en los elementos li, ol y ul.
• Atributo valign en los elementos col, colgroup, tbody, td, tfoot, th, thead y tr.
• Atributo width en los elementos hr, table, td, th, col, colgroup y pre.

Como veis, algunos de estos atributos sí que se mantienen para ciertos elementos, como la anchura y altura en las imágenes. Sin embargo estos no son los únicos atributos que se eliminan, también hay otros que se quitan por redundancia, por evitar confusiones, por su bajo uso o porque simplemente se han quedado obsoletos.

• Atributo accesskey en los elementos a, area, button, input, label, legend y textarea.
• Atributos rev y charset en los elementos link y a.
• Atributos shape y coords en el elemento a.
• Atributo longdesc en los elementos img y iframe.
• Atributo target en el elemento link.
• Atributo nohref en el elemento area.
• Atributo profile en el elemento head.
• Atributo version en el elemento html.
• Atributo name en los elementos img y a. Para obtener un comportamiento similar se recomienda usar id.
• Atributo scheme en el elemento meta.
• Atributos archive, classid, codebase, codetype, declare y standby en el elemento object.
• Atributos valuetype y type en el elemento param.
• Atributo language en el elemento script.
• Atributo summary en el elemento table.
• Atributos axis y abbr en los elementos td y th.
• Atributo scope en el elemento td.

Otros cambios

Hay diversos elementos que no se eliminan por su extendida fama, pero que siendo un tanto ortodoxos deberían eliminarse. Para evitar esto los que están escribiendo el estándar han tenido que redefinir su definición, de tal forma que se tratan de manera similar pero semánticamente son diferentes.

Un ejemplo muy claro es u e i, muy usados pero que progresivamente pierden importancia frente a strong y em. Estos dos elementos, que indicaban negrita y cursiva respectivamente, pasan a definirse de una manera muy vaga para indicar un texto diferente en alguna manera al texto normal. Otros elementos se redefinen, particularmente me resulta curioso que se mantenga small mientras big se elimina. De cualquier manera, no es demasiado relevante para los desarrolladores web, en el sentido de que podrán seguir usándolos como ahora.

Conclusiones

Tal y cómo habéis ido viendo, las novedades de HTML5 se centran en facilitar la implementación de aplicaciones web, avanzar hacia la web semántica y limpiar un poco toda la basura heredada de las anteriores versiones de HTML. Aunque todo eso parezca lejano, lo cierto es que muchos navegadores ya implementan algunas partes sueltas de HTML5, y ya existen varias páginas experimentales que juegan con estos elementos. Por ejemplo, cerramos este minucioso especial precisamente en el día en que Firefox 3.5 es lanzado, pero Safari, Opera, Chrome e incluso IE8 ya soportan algunas cosas.

Ahora queda preguntarnos, ¿cuándo se acabará este estándar? Precisamente no hay ninguna fecha, y la condición para que HTML5 se considere estándar es, según la W3C, que al menos un navegador implemente todo HTML5 correctamente. De esta manera se asegura que todo el estándar es factible, que puede ser implementado. Para esto puede quedar dos o tres años, si todo va bien, pero nada es seguro.

Enlace | Las novedades de HTML5 (I)
Enlace | Las novedades de HTML5 (II)
Enlace | Las novedades de HTML5 (III)
Enlace | Borrador actual de HTML5

Después de las dos primeras entregas de este repaso a HTML5 (parte I y parte II), llegamos a la parte dinámica del estándar, lo que se añade al DOM y a Javascript para conseguir aplicaciones web avanzadas. Por un lado tenemos diversas APIs, es decir, conjuntos de funciones y herramientas que implementan un propósito concreto. Por el otro lado tenemos varias funciones y atributos que sirven a propósitos más generales y que no se pueden enmarcar en una API concreta.

Nuevas APIs

No está claro que todas las APIs siguientes se vayan a incluir en el estándar HTML5 propiamente, de hecho seguro que alguna de ellas se separará creando un estándar propio dedicado. De cualquier forma, estas son las nuevas APIs que nacen o se desarrollan en HTML5:

• Una API para dibujar en 2D, que se podrá usar junto al nuevo elemento canvas. Básicamente, se pueden pintar elementos sobre un lienzo, de manera similar a lenguajes como Java.
• Una API para controlar los nuevos elementos multimedia, video y audio. Así podremos controlar la reproducción con código Javascript, algo interesante pero que puede dar más de sí.
• Una API para guardar datos localmente, utilísimo para que las aplicaciones web puedan trabajar sin necesitar conexión a Internet. Ese DOM storage está ya implementado en las últimas versiones de los grandes navegadores, así que dentro de poco podremos disfrutar de esta clase de aplicaciones sin necesidad de extensiones como Google Gears.
• Una API para que las aplicaciones web puedan enlazarse a protocolos o tipos de archivos MIME, otro añadido extremadamente útil. Esto permitiría abrir las fotos de tu disco duro directamente en una aplicación de retoque online, o un archivo mp3 en una biblioteca online, etc…
• Una API para editar los campos que sean editables, valga la rebuznancia. Esto permite controlar los elementos HTML que son editables por el usuario, tipo Word. Por ejemplo, Google Docs o editar HTML en emails será muy sencillo, y con esta API es trivial cambiar ese contenido con Javascript.
• Una API para controlar las acciones Drag & Drop sobre los elementos que se puedan arrastrar. Esto se puede conseguir actualmente con algunas librerías, pero con esta API el navegador lo permite de manera nativa y más poderosa.
• Una API para controlar el historial desde una aplicación web. Esto permitirá a las aplicaciones web que se muevan con Javascript añadir páginas al historial para que los botones Atrás-Adelante funcionen siempre.
• Una API para habilitar la comunicación entre varias “páginas web”. Es decir, si tenemos varios iframes externos en una web, podemos comunicarnos con ellos y compartir información de manera segura, por ejemplo con gadgets de Facebook o similares.

Novedades en el DOM

Se han añadido a los elementos del DOM nuevas funciones y atributos que facilitan su uso y permiten realizar acciones muy usadas. Aquí comentaré los más interesantes, que trabajan sobre el documento (HTMLDocument) o sobre cualquier elemento (HTMLElement).

• La función getElementsByClassName() se añade a todos los elementos y al documento. Su funcionamiento es similar a getElementsById(), pero en este caso selecciona todos los elementos del documento o de cierto subárbol del documento que contengan esa clase. Su definición es tan amplia que incluso elementos que contenga SVG o MathML pueden ser encontrados.
• El atributo classList está disponible para cualquier elemento, y contiene una lista con todas las clases que tiene ese elemento. Además contiene varios métodos que facilitan trabajar con esa lista: buscar, modificar, borrar, etc. Muy útil para trabajar con elementos que puedan tener más de una clase, es muy sencillo y muy conveniente de usar. Los enlaces también tienen un elemento similar adicional llamado relList que permite lo mismo pero con el atributo rel (como el famoso rel=”nofollow”).
• El atributo innerHTML se añade, por fin, al estándar. Prácticamente usado por todas las aplicaciones web y soportado por todos los navegadores, creo que todos los desarrolladores web lo conocen de sobra. Para aquellos que no lo conozcan, este atributo permite trabajar con el contenido de un elemento en texto plano, incluso cambiando elementos HTML que pueda haber. Igualmente, se añade a todos los elementos y al propio documento, pudiendo cambiar TODO el contenido de una web.
• Los atributos activeElement y hasFocus están disponibles sobre un documento, y permiten conocer qué elemento está activo y si el documento tiene el foco, respectivamente.
• La función getSelection() se aplica también al documento y devuelve un objeto con el texto y elementos que están seleccionados.
• El atributo designMode es otra novedad sobre el documento e indica/modifica que el documento pueda o no ser editado.
• La función execCommand() se aplica sobre el documento y permite ejecutar acciones o “comandos” típicos de edición de documentos. Por ejemplo, con este método se llamaría a los útiles copiar/pegar, pero también a otros típicos como crear un enlace o cambiar el color de un elemento. Como el anterior, la mayoría de estos comandos trabajan sobre elementos editables.

Con esto ya hemos acabado con todas las novedades de HTML5, al menos las más importantes e interesantes para los desarrolladores web. Pero aún nos queda una parte muy importante: los elementos y atributos que se eliminan del estándar y que formaban parte de HTML4 y anteriores. Son muchos y variados, y algunos pueden causar más de un dolor de cabeza, así que los dejamos para la cuarta y última entrega de este especial.

Enlace | Las novedades de HTML5 (I)
Enlace | Las novedades de HTML5 (II)
Enlace | Las novedades de HTML5 (y IV)
Enlace | Borrador actual de HTML5

Si en la primera parte de este repaso a HTML5 os comentamos todos los nuevos elementos, ahora vamos a centrarnos en los nuevos atributos más interesantes. Al igual que como comentaba en la primera parte, hay que tener en cuenta que no es un estándar acabado, así que estas especificaciones pueden cambiar y cambiarán. También hay que tener en cuenta que estos no son todos los cambios, solo he seleccionado los relevantes para el día a día de un desarrollador web. Por último, habría que distinguir entre los atributos que solo afectan a un subconjunto de los elementos y los globales, que afectan a cualquier elemento.

Nuevos atributos

Los elementos ya existentes añaden nuevos atributos que permiten hacer cosas muy interesantes. Los más importantes o novedosos son:

• Atributo ping para el elemento a. Este atributo contiene una lista de URLs, las cuáles serán llamadas cuando un usuario haga click en ese enlace. Por ejemplo, un uso práctico sería para estadísticas.
• Atributo autofocus para los elementos de un formulario. Indica qué elemento de un formulario debe ganar el foco al cargar una página. Por ejemplo, en la página principal de Google la cajita de texto gana el foco automáticamente para ayudarnos a escribir sin usar el ratón.
• Atributo form para los elementos de un formulario. Indica a qué formulario pertenece este elemento, y permite poner un elemento de un formulario en cualquier parte de una página. Tal y como está ahora, todos los elementos deben ir dentro de <form>.
• Atributo required para los elementos de un formulario. Indica que es obligatorio rellenar un valor para enviar ese formulario, algo que hoy en día se comprueba con Javascript o en el servidor.
• Atributos autocomplete, min, max, multiple, pattern y step para los elementos input. Estos atributos indican que el valor del input debe cumplir ciertos requisitos, por ejemplo seguir cierto patrón.
• Atributo novalidate para el elemento form. Esto deshabilitará la validación de sus elementos, algo útil si se usa dinámicamente (es decir, con Javascript, activando y desactivándolo).
• Atributos formaction, formenctype, formmethod, formnovalidate, y formtarget para los elementos de un formulario. Estos atributos modifican los atributos del formulario si el elemento es usado (por ejemplo un botón es pulsado o un input es rellenado). Esto permite que dependiendo qué botón usemos podemos tratar el formulario en diferentes páginas usando solo un formulario, algo complicado en HTML4.
• Atributo scoped en el elemento style. Esto permite aplicar estilos solo a cierto subárbol del documento. Por ejemplo, imagina que tenemos un elemento con id igual a “cabecera”; si añadimos el atributo scoped a un style, los estilos contenidos en él solamente se aplicarán a ese elemento y a sus hijos.
• Atributo async en el elemento script. Con este atributo especificamos que el código interno se puede ejecutar en cualquier momento de la página, mejorando la velocidad de carga.
• Atributo manifest en el elemento html. Esto permite indicar nuevos elementos, sobre todo será útil en aplicaciones web.
• Atributo reversed en el elemento ol. De esta forma la lista será numerada en orden descendiente (3, 2, 1…).

Nuevos atributos globales

Además de los anteriores tenemos otros atributos que pueden ser aplicados a todos los elementos de un documento. Esto lo hacen especialmente conveniente si vamos a usar Javascript para modificarlos dinámicamente, ya que no tenemos que comprobar el tipo de elemento para usar los atributos comunes.

• Atributos id, class, style, title, lang y tabindex, ya existentes pero ahora permitidos en todos los elementos. Pues eso, los atributos más usados se vuelven universales.
• Atributo contenteditable, para indicar que el elemento es editable por el usuario. Muy interesante, ya que ahora podremos editar cualquier cosa de manera trivial para el desarrollador, no solamente los elementos de un formulario.
• Atributo contextmenu, para indicar un menú contextual sobre un elemento. Como veis, está todo muy pensado para las aplicaciones web.
• Atributos data-*, donde el asterisco puede ser cualquier nombre. Esto permite atributos personalizados, que luego podremos obtener con Javascript.
• Atributo draggable, para indicar que un elemento se puede arrastrar.
• Atributo hidden, para ocultar un elemento que ya no interesa.
• Atributo spellcheck, para indicar si el contenido de un elemento debe ser pasado por el corrector ortográfico.

Por supuesto estos no son todos los cambios, en próximas entregas explicaremos otros aspectos de este nuevo estándar.

Enlace | Las novedades de HTML5 (I)
Enlace | Las novedades de HTML5 (III)
Enlace | Las novedades de HTML5 (y IV)
Enlace | Borrador actual de HTML5

HTML5 está llamada a ser el reemplazo del actual (X)HTML, una de las patas de la web desde su nacimiento. Precisamente en un momento en el que la web está lo suficientemente madura, este estándar aprende de los errores cometidos e intenta solucionar la mayoría de problemas con los que un desarrollador web se encuentra. Como muchas de sus novedades son interesantes y afectan directamente a la futura web, desde AnexoM te vamos a comentar en varios artículos los cambios más importantes, empezando por este artículo donde comentaremos los nuevos elementos.

Antes de seguir habría que aclarar que HTML5 sigue en borrador y lo seguirá estando durante algunos años más. El enfoque general ha cambiado bastante respecto a versiones anteriores de HTML, añadiendo semántica y accesibilidad implícitas, especificando cada detalle y borrando cualquier ambigüedad. También se tiene en cuenta que muchas páginas web actuales son dinámicas, pareciéndose más a aplicaciones que a documentos. Algo básico es que HTML5 está definido en base al DOM (la representación interna de una web con la que trabaja un navegador), dejando de lado la representación “real”, definiendo a la vez un estándar HTML y XHTML.

Mejor estructura

Hoy en día se abusa bastante del elemento div, que nos permite estructurar una web en bloques. En HTML5 hay varios elementos que sirven para estructurar mejor una página web, estableciendo qué es cada sección, y reemplazando en muchas ocasiones a div. Con este extra de semántica, será mucho más coherente y fácil de entender por otras personas. Y lo que es más importante, será trivial de entender para una máquina, dándole más importancia a unas secciones y pudiendo jugar con esos datos automáticamente. Concretamente, la tarea de un buscador será mucho más fácil, pero cualquier aplicación que “lea” páginas web se beneficiará. Estos son los elementos:

• section representa una sección “general” dentro de un documento o aplicación, como un capítulo de un libro. Puede contener subsecciones y si lo acompañamos de h1-h6 podemos estructurar mejor toda la página.
• article representa un contenido independiente en un documento, el caso más claro son las entradas de un blog o las noticias de un periódico online. Así, dentro de la portada podremos tener varios artículos demarcados semánticamente, por lo que una herramienta puede extraerlos fácilmente.
• aside representa un contenido que está muy poco relacionado con el resto de la página, como una barra lateral. Esencial para delimitar el contenido “importante” del contenido “de apoyo”, haciendo más caso al primero que al segundo.
• header representa la cabecera de una sección, y es de suponer que se le dé más importancia que al resto, sobre todo si la sección es un artículo.
• footer representa el pié de una sección, con información acerca de la página/sección que poco tiene que ver con el contenido de la página, como el autor, el copyright o el año.
• nav representa una sección dedicada a la navegación entre el sitio, como la típica barra superior de los periódicos.

En la anterior imagen vemos un ejemplo de cómo cambiaría un documento escrito en HTML normal a HTML5 con estos elementos.

Mejores formularios

El elemento input ha sido ampliado y ahora permite todos estos tipos de datos:

• datetime, datetime-local, date, month, week, time, para que indicar una fecha/hora.
• number para que el usuario indique un número.
• range para indicar un rango entre dos números.
• email para indicar un correo electrónico.
• url para indicar una dirección web.
• search para indicar una búsqueda.
• color para indicar un color.

Lo más interesante de esto es que los navegadores podrán implementar interfaces específicas para cada tipo de dato, por ejemplo una fecha o un color se podrán indicar de manera directa e intuitiva. Otro ejemplo sería el teclado del iPhone, que muestra unos símbolos u otros dependiendo de si es un texto normal, un email (añade @ y el punto) o una url (añade la barra y el punto com), y que por tanto gana mucho con este estándar.

Otros elementos importantes

• audio y video sirven para incrustar un contenido multimedia de sonido o de vídeo, respectivamente. Sin duda uno de los añadidos más interesantes, ya que permite reproducir/controlar vídeos y audios sin necesidad de plugins como el de Flash. Se tratan de manera totalmente nativa como cualquier otro elemento, por ejemplo se pueden incluir enlaces o imágenes dentro de un vídeo. Aunque las implementaciones actuales son un tanto ineficientes, se espera que en un futuro próximo se optimicen. Portales de vídeo como Youtube o Dailymotion ya están empezando a mostrar que un futuro sin Flash es posible (¡y necesario!).
• embed sirve para contenido incrustado pero no nativo, sino ejecutado por plugins como el de Flash. Aunque embed está soportado por casi todos los navegadores desde hace tiempo, es ahora cuando entra parte del estándar y evita el infierno/pelea entre object y embed.
• canvas es un elemento complejo que permite generar gráficos, dibujando elementos dentro de él. Aunque nunca hayas oído hablar de él, seguro que lo has usado alguna vez, por ejemplo de Google Maps. Es un elemento muy potente que dará bastante que hablar en el futuro, y que será el culpable de aplicaciones web espectaculares.

Más elementos

• dialog se plantea para escribir conversaciones, por ejemplo para transcripciones de chat.
• figure se plantea para asociar un contenido multimedia (una foto, un vídeo, etc) a un título o leyenda.
• mark representa un texto resaltado, por ejemplo para resaltar una búsqueda.
• meter representa una medida, como el número de KB. Tiene más sentido si lo unimos con…
• progress representa el estado de una tarea, y se puede usar por ejemplo al subir un documento o al realizar varias tareas pesadas. Esto permitirá barras de tareas personalizadas y potentes.
• time representa una fecha o una hora.
• command representa un comando que el usuario puede ejecutar en su navegador.
• output representa una salida de un programa, probablemente ejecutado directamente en el navegador, como una calculadora.
• datagrid representa datos de manera interactiva y permite trabajar dinámicamente con información y cambiar la página respecto a esa información. Será útil sobre todo si se quiere trabajar con aplicaciones que necesiten de bastantes datos a la vez en el lado del cliente.

En las próximas entradas veremos más novedades interesantes de HTML5, centrándonos en aspectos más dinámicos.

Enlace | Las novedades de HTML5 (II)
Enlace | Las novedades de HTML5 (III)
Enlace | Las novedades de HTML5 (y IV)
Enlace | Borrador actual de HTML5

¿Y quién es Larry Roberts? Su formación científica pasa por su Doctorado en el Instituto Tecnológico de Massachusetts (MIT), lugar de donde salen la mayor parte de las maravillas tecnológicas de nuestro planeta, y por tanto uno de los centros con más genios pensantes por metro cuadrado.

Pero fue cuando Larry entró a trabajar en la Agencia de Investigación de Proyectos Avanzados de Defensa (DARPA) cuando se empezó a gestar su colaboración con los otros padres de Internet, Robert Kahn y Vinton Cerf para la posterior creación de ARPANET, como ya sabéis a estas alturas, lo que sería la primera red de conmutación de paquetes. Ahí es nada.

Por su cometido, ha sido el máximo responsable de la sistematización de fórmulas que permiten el enrutamiento y la localización de servidores en redes de datos. Pronto pasó a ser el máximo ejecutivo de Telenet, la primera operadora de datos a través de conmutación de paquetes que más adelante desarrollaría el protocolo X25 en el que se basará la red Europea EUNet.

Hoy en día preside Caspian Networks, uno de los principales centros de investigación aplicada de Estados Unidos. Sigue siendo un personaje activo en la red, podéis seguir su actividad más reciente desde aquí.

Entre sus últimas contribuciones desde Caspian Networks, cabe destacar la introducción del primer router TCP / IP en el que se pueden gestionar flujos de control tales como el retardo, obteniendo una verdadera QoS mediante TCP / IP IPv4. Esta optimización permite al final que el tráfico P2P sea controlado de forma que su uso no consuma excesivos recursos de la red. Y a mí que esto me recuerda a algo…

Tim Berners-Lee, nombrado Sir en 1997, nació en Junio de 1955 en Londres en una familia que le daría una educación que marcaría su futuro. Sus padres eran matemáticos y estuvieron implicados en el desarrollo del Manchester Mark I, uno de los ordenadores primigenios. No es de extrañar que, en un ambiente familiar de ese calibre, Lee se interesase por la electrónica, como bien demuestra su licenciatura en física por el Queen’s College de la Universidad de Oxford.

Como todo buen científico, Lee acabó en 1980 en el CERN (Suiza). Aunque sólo permaneció allí seis meses durante ese año, ya comenzó a trabajar en el hipertexto, la base de todas las páginas webs que existen. Tras abandonar el CERN a finales de 1980 para trabajar en John Poole Image Computer Systems Ltd, Lee regresó en 1984, donde siguió trabajando en la posibilidad de unir su hipertexto con el precario Internet de aquellos días, aprovechando que el propio CERN era el nodo de la red más grande de Europa.

Fue entonces, entre 1989 y 1990, cuando Lee creó las primeras definiciones para el HTTP (HyperText Transfer Protocol) y el HTML (HyperText Markup Language). El primero es el protocolo actual por el que un navegador puede solicitar ver una página web, la cual está codificada en el lenguaje HTML. Lee había creado un lenguaje y un medio de transporte virtual para crear y visualizar cualquier página web desde cualquier rincón del mundo.

Tim Berners-Lee junto al navegador WorldWideWeb

Evidentemente, estas herramientas eran inútiles sin un servidor web y un navegador web, así que Lee también creó las primeras versiones de estos elementos ya tan comunes a nuestros ojos y oídos. WorldWideWeb (de donde vienen las siglas www) fue el nombre que recibió este primer navegador, el cual fue liberado para que cualquiera pudiera usarlo como base y así crear nuevos y más avanzados navegadores. De esta semilla plantada por Lee nacieron los actuales Internet Explorer, Firefox, Safari y un largo etcétera.

De la misma manera, Lee liberó el primer servidor web que creó para acelerar la expansión del Internet tal como lo conocemos hoy, lo cual fue uno de los mayores aciertos de la historia al ver lo mucho que ha avanzado la red de redes en tan poco tiempo.

Tras marcar el inicio del Internet moderno, Lee se mudó a Estados Unidos, donde fundó el W3C (World Wide Web Consortium), organismo encargado de definir los estándares en materia de web. Cada vez que surge una nueva versión del lenguaje HTML es debido a que el W3C lo ha decidido así, definiendo las características del mismo.

Tim Berners-Lee se le puede considerar el mayor filántropo de la corta historia de Internet. Es un hombre que ha luchado, y lucha, por la libertad y la neutralidad en la red, la cual considera como una herramienta por y para el público. Su labor le ha llevado a ganar numerosos galardones, entre ellos el Premio Príncipe de Asturias (compartido con Vint Cerf, Lawrence Robert y Robert Kahn) y numerosos reconocimientos por parte de numerosas universidades, entre ellas las de Madrid y Barcelona, que lo han nombrado Doctor Honoris Causa.

Actualmente Lee vive en su Inglaterra natal, trabajando en la Universidad de Southampton por el avance de su más reciente proyecto, la web semántica.

En esta segunda parte del artículo seguiremos desgranando varias de ellas, con especial atención a las que hacen referencia a los diversos lenguajes de programación empleados para crear el gigantesco entramado del que disfrutamos cada vez que nos disponemos a navegar por Internet.

• HTML (HyperText Markup Language): Es el lenguaje de marcado más extendido a la hora de la creación de páginas web de manera estructrada, basándose en la definición de etiquetas que añaden unos atributos concretos a los elementos que rodean. De la unión de este lenguaje con el XML (Extensible Markup Language) surge el XHTML (Extensible HTML), el cual ofrece una mayor flexibilidad.

• CSS (Cascading Style Sheets): Lenguaje centrado en la parte estética de las páginas web, o de cualquier documento basado en lenguajes de marcado compatibles. Se basa en la definición de una hoja de estilos separada del contenido propio del documento, lo que facilita la accesibilidad al mismo y la flexibilidad de su uso.
• PHP (PHP Hypertext Pre-processor): Como veis, se trata de un acrónimo recursivo, pues la primera letra se refiere al propio acrónimo en sí. Se trata de un lenguaje de tipo interpretado para el desarrollo web que resulta bastante versátil en su cometido. Para poder emplearlo en alguna web determinada, el servidor debe estar preparado para hacerlo funcionar.
• RSS (Really Simple Syndication): Se trata del formato más empleado en la actualidad para la definición de los feeds de contenido de las páginas web. Está basado en el lenguaje XML antes comentado, y se identifica universalmente por su conocido icono naranja.



• DHCP (Dynamic Host Configuration Protocol): Protocolo destinado a la obtención de una dirección IP para nuestra conexión a Internet de manera aleatoria, en lugar de disponer permanentemente de una única dirección
• WEP (Wired Equivalent Privacy): Algoritmo para ofrecer seguridad e una red inalámbrica, cuyo uso ya no es recomendado debido a que los niveles de protección que ofrece son bastante bajos a día de hoy.
• WPA (Wi-Fi Protected Access): Este protocolo para la protección de redes inalámbricas fue definido por la Wi-Fi Alliance para superar los bajos niveles de seguridad ofrecidos por el anteriormente explicado WPE. Cuenta con una evolución aún más robusta denominada WPA2.
• SEO (Search Engine Optimization): Conjunto de técnicas destinadas a la optimización de una web para mejorar su posicionamiento orgánico en buscadores, esto es, sin pagar para aparecer en los resultados destacados. El término también sirve para hacer referencia a personas que se encargan de realizar dichas técnicas de manera profesional, a modo de consultores para empresas.
• W3C (World Wide Web Consortium): Organización de carácter internacional que se encarga de velar por la regulación y desarrollo de la multitud de estándares empleados en la web. Fue fundada en 1994 por Tim Berners-Lee y realiza una labor imprescindible para el correcto desarrollo de este gigantesco entramado.

Bueno, siendo francos, no todo es tan terrible, y lo cierto es que es una afición/profesión que también concede muchas alegrías a quienes la llevamos a cabo. Y como toda ayuda recibida es poca en este terreno, hemos pensado que os podrían resultar interesantes unos cuantos consejos para optimizar vuestra web, y hacer así que ésta cargue algo más rápido; porque lo creáis o no, cada décima cuenta.

La forma más evidente de conseguir una mejora en el tiempo de carga es, claro está, contratar un servidor más rápido. Pero para lo que yo estoy aquí es para contaros cómo podéis mejorar ese aspecto sin gastaros ni un duro. Tomad nota:

• El CSS y el Javascript en archivos externos: Este primer punto es una práctica muy recomendable por muchas otras razones además de por aligerar el tiempo de carga. En cualquier caso, centrándonos en el tema que nos atañe, con esto conseguiremos que el navegador sólo tenga que cargar una vez los elementos de diseño y almacenarlos en la caché, en vez de cargar nuevos elementos cada vez que el visitante abra una nueva página.
• Aprovecha las propiedades CSS que pueden agruparse: Existen varias propiedades que pueden agruparse para ocupar menos líneas de código, como por ejemplo en el caso del fondo de elemento, que nos permite aglutinar todo dentro de Background, en lugar de separarlo en Background-color, Background-image, etc. Hay muchos casos como éste que os pueden ayudar a optimizar vuestro código CSS.
• Optimiza las imágenes: Es uno de los errores más habituales que se cometen en diseño web, y de los que más fácil solución tienen. Intenta siempre buscar un compromiso entre la calidad de las imágenes que implementes en tu web y su peso (en Photoshop, la opción “Guardar para web y dispositivos” es ideal) y piensa que cada formato comprime mejor según las características de la imagen. Por ejemplo, con fotografía o simplemente con imágenes que impliquen mucho degradado de color, lo ideal es JPEG; si los cambios de color son bruscos (como por ejemplo en textos, o capturas web, etc), lo mejor es PNG o GIF. ¡Ah! Y por favor, olvídate de BMP.



Menú de “Guardar para web y dispositivos” en Photoshop




• La información mejor en texto que en imagen: Una vez más, este consejo es ideal por otras razones además de por el tiempo de carga, como por ejemplo la usabilidad o el mejor posicionamiento en buscadores. En lo que a adelgazamiento se refiere, recurre al uso de texto en formato imagen sólo cuando sea imprescindible por cuestiones de diseño, ya que ahorrarás unas preciosas décimas de carga a tus visitantes.
• Evita redundancias de código: Esto enlaza en parte con el segundo consejo que he comentado, aunque en este caso voy más allá, fijándome también en el lenguaje HTML o PHP de tu página. Por lo tortuoso que puede llegar a resultar un desarrollo, es inevitable que queden “residuos” o elementos redundantes en nuestro código, que están suponiendo un lastre para la página. Dedicar un tiempo a detectar aquello que sea innecesario en nuestro trabajo puede dar resultados muy valiosos.
• Usa elementos multimedia sólo cuando sean necesarios: Un consejo tan evidente como desatendido en demasiadas ocasiones, pues obviamente son las cargas más pesadas que podemos ofrecer a nuestros visitantes. Dejando a un lado el hecho de que personalmente el diseño web en Flash me parece algo caduco, si te decides a incluir partes de tu web en dicho formato, te aconsejo que sea porque no tienes más remedio. ¿Y aún piensas que lo de poner música a tu página es un exitazo? Te aconsejo que lo reconsideres.
• Los hacks para Internet Explorer por separado: Y al rey de la fiesta me lo dejo para el final. Sí, el dichoso Internet Explorer que tanto hemos sufrido muchos de nosotros. Lo quieras o no, una vez que termines tu trabajo y éste luzca espectacular en los navegadores decentes, te verás obligado a una prórroga de trabajo para adaptar tu CSS al browser de Microsoft. Una práctica muy recomendable es la de incluir todos los hacks (esto es, los “apaños”) en una hoja de estilos distinta que sólo se cargue cuando el visitante la abra con dicho programa, para que así quienes accedan a nuestra web con otro navegador no tengan que sufrir la carga de ese material extra.
]]> http://www.anexom.es/tecnologia/diseno-web/consejos-para-hacer-que-tu-web-cargue-mas-rapido/feed/ 10