Aprendiendo Web

Imagina que estás navegando por la web (no debería ser muy dificil ya que lo estas haciendo en este momento), tienes toda la información que necesitas a un click de distancia.

Desde tu blog preferido hasta esa información técnica que estabas buscando, en la web todo está a un click de distancia y esa es la idea de hipertexto.

¿Pero que pasa si no estás en la web?, ¿que tal si estás leyendo un libro?, ¿o tal vez escuchando un podcast?

Algo que siempre me molestó es leer un libro y que cite artículos con direcciones web, esto no sería un gran problema si no fuera por la estructura de una dirección web.

Déjame ponerte un ejemplo, estoy leyendo un muy buen libro sobre Microformatos, y en eso el libro dice algo así:

...see Bruce Sterling's Wired Magazine article titled "Order Out of Chaos" at www.wired.com/wired/archive/13.04/view.html?pg=4

Recuerda que es un libro así que no puedo simplemente hacer copy/paste de esa dirección web en la barra del navegador, no, tengo que escribirla letra por letra (y es muy probable que me equivoque).

Continúa leyendo...

Hace unos minutos salió un borrador de la especificación del content model de HTML 5 (no te preocupes, no es tan complicado como suena).

Es básicamente una descripción detallada del lenguaje de marcado, así como el alcance y uso de cada uno de los elementos de la especificación de HTML 5.

Es bastante largo y muy detallado, por ratos se vuelve demasiado técnico, pero eso sí, me parece un documento de referencia indispensable si quieres aprender a manejar esta especificación de HTML.

Personalmente el HTML 5 no me termina de convencer, aunque tiene muchos elementos interesantes, pero sí trato de seguir sus avances para darme una idea de hacia donde van las cosas.

Al HTML 5 aún le falta mucho camino por recorrer para volverse un estándar, pero no es mala idea ir dándole una miradita, te podría evitar problemas en el futuro, además tendrás un buen tema de conversación para tu próxima fiesta ;)

Aquí puedes ver el draft HTML: The Markup Language

¿Qué opinas tú sobre el HTML 5?

Continúa leyendo...

6 cosas que odio del diseño web

Las intros en flash

Pocas cosas me irritan más que tener que perder segundos de mi vida mirando una intro en flash para poder entrar a una página y no es excusa que tengan el famoso botón saltar intro (que generalmente es tan chico que no se ve)

La música en las webs

Me ha pasado muchas veces que navego escuchando alguno de mis grupos favoritos, cuando de pronto se empieza a escuchar una mezcla extraña de sonidos, y es que a alguien se le ocurrió que su blog estaría mucho mejor si empezara a tocar música apenas lo visitas.

No tengo que decir que esas páginas no duran más de 5 segundos en la ventana de mi querido Firefox.

Nota, la música está OK si tu sitio es el de una banda o algo por el estilo, en cualquier otro caso, por favor evítala.

Los layouts con tablas

Qué les puedo decir acerca de eso, ver layouts con tablas me hace sentir como en un museo...

Continúa leyendo...

Hace un par de días escribí sobre cómo insertar caracteres especiales en tus páginas web, ahora he creado una página de referencia de todos los caracteres especiales de HTML tomados de la referencia del W3C.

Estos son los caracteres de HTML

 ¡¢£¤¥¦§¨©ª«¬­® ¯°±²³´µ¶·¸¹º»¼ ½¾¿ÀÁÂÃÄÅÆÇÈ ÉÊËÌÍÎÏÐÑÒÓÔÕ Ö×ØÙÚÛÜÝÞßàáâ ãäåæçèéêëìíîï ðñòóôõö÷øùúûü ýþÿƒΑΒΓΔΕΖΗΘΙΚ ΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβ γδεζηθικλμνξοπρ ςστυφχψωϑϒϖ•…′ ″‾⁄℘ℑℜ™ℵ←↑→↓↔↵ ⇐⇑⇒⇓⇔∀∂∃∅∇∈∉∋∏∑ −∗√∝∞∠∧∨∩∪∫∴∼≅≈≠ ≡≤≥⊂⊃⊄⊆⊇⊕⊗⊥⋅⌈⌉⌊ ⌋⟨⟩◊♠♣♥♦"&<>Œœ ŠšŸˆ˜   ‌‍‎‏–— ‘’‚“”„†‡‰‹›€

Para esto he creado una página aparte llamada Caracteres especiales en HTML (Character entity references) y la he puesto en una nueva sección de referencia que puedes ubicar en el sidebar, justo debajo de las secciones.

También tengo planeado agregar referencias de XHTML y CSS.

Espero que les sea útil.

Continúa leyendo...

¿Alguna vez te preguntaste cómo insertar símbolos como ™ o ©?, ¿O cómo escribir algo como <p> sin que el navegador lo interprete como código HTML?

Pues para eso están los caracteres especiales!

Esta no es un una lista de caracteres especiales, es más bien un pequeño tutorial sobre cómo usarlos, aquí voy a hablar de los 5 más usados, en pocos días haré un lista con muchos más.

Cómo escribir los caracteres especiales

Continúa leyendo...

Cada vez hay monitores más grandes y con mayor resolución, y eso es algo que hay que tener en cuenta eso al momento de diseñar un web.

¿A qué me refiero cuando digo que tus páginas estén centradas?

A que por defecto, el contenido de las páginas está alineado a la izquierda, es decir, el contenido de tu página está pegado al borde izquierdo de la ventana del navegador.

Esto nunca fue un problema cuando la mayoría usaba monitores de 800 x 600, pero ahora (y desde hace bastante tiempo) este tipo de resolución casi ha desaparecido, entonces conviene diseñar pensando en monitores con resoluciones mayores.

Es mucho más fácil darse cuenta de esta diferencia con una imagen, aquí te muestro cómo se vería Aprendiendo Web centrado y alineado a la izquierda...

Continúa leyendo...

El Doctype es la primera declaración que va en una página web y le dice al navegador qué especificación de HTML o XHTML estas usando.

El doctype empieza con <!DOCTYPE (debe ser escrito en mayúsculas)

Doctypes en HTML

HTML especifica 3 tipos de documentos: Strict, Transitional y Frameset. (los pongo en ingles... porque así es como va en el código HTML)

HTML Strict DTD

Usalo cuando quieras un código limpio, sin indicaciones de como va a ser la presentación del documento (para eso está el CSS).

Continúa leyendo...

Esta es la segunda parte de la serie en Microformatos, aquí veras algunos de sus usos.

Encontrando una dirección

Imagínate que un amigo mio quiere pasar a visitarme pero no recuerda cómo llegar a mi casa... gracias a sus conocimientos de microformatos tiene instalado el plugin Operator en su navegador favorito, Firefox...

Como uso microformatos en Aprendiendo Web, mi amigo tiene la oportunidad de encontrar mi casa usando google maps!

Continúa leyendo...

Hace tiempo que quería escribir acerca de los microformatos, al final decidí hacerlo en varios posts ya que es un tema súper amplio, este es el primero de la serie.

Aquí verás una introducción a los microformatos y un ejemplo de su uso.

¿Que son los Microformatos?

Los microformatos son una manera de agregar información extra a tus páginas, usando generalmente el atributo class.

La idea de usar una clase para dar información extra es bastantes simple, se trata de darle un atributo class (con un nombre estándar) a un elemento para describir la información que contiene.

La forma más fácil de entender esto es con un ejemplo:

Digamos que tengo este párrafo en mi blog:

Lo único que ese HTML le comunica a una computadora es que se trata de un párrafo con un enlace a aprendiendoweb.com, no hay forma de decirle que soy autor de AprendiendoWeb.com ¿o si?

Para eso están los microformatos...

Continúa leyendo...

Hace 5 minutos, Arturo me pasó este video sobre web semántica (en inglés, subtitulado al español).

Puedes darte una muy buena idea de lo que es la web semántica en este video de 6 minutos.

El video

Continúa leyendo...