25 sitios importantes para aprender HTML5

@ 20 . septiembre . 2011

Junto a una muy útil y completa conferencia de CVander sobre las páginas más importantes para desarrollar en HTML5, los chicos de Maestros del web han publicado una lista de los mejores 30 sitios para que podamos aprender técnicas, estructuras, código, funciones, frameworks y trucos útiles para crear páginas en HTML5, la innovación de la web.

Esta es la lista completa:

HTML5 cool logo

W3C y el draft HTML5: muestra los avances oficiales de la W3C sobre la dirección que tiene HTML5.
El grupo de Whatwg: Mientras que la W3C se movía hacia XHTML2, este grupo empieza a generar su propia propuesta sobre el verdadero futuro de la web y son ellos quienes le dieron vida a HTML5, un estándar vivo. Actualizan todo el tiempo.
HTML5 Test: Un test en línea que evaluá cuan bueno y completo es el soporte de HTML5 en tu navegador.
HTML5 Readiness: Documenta gráficamente el avance de los diferentes navegadores desde el 2008 y las características de HTML5.
Guía HTML5 de mejorando.la: Freddy Vega y Cvander crearon este draft permanente de lo que están aprendiendo de HTML5, en español, en pdf.
HTML5 Cheat Sheet: Una tarjetita práctica para tener todos los elementos de HTML5 cerca para fácil consulta.
HTML5 enabling script: Script para que Internet Explorer interprete HTML5.
HTML5 Boilerplate: Con esta plantilla conocerás el poder de las nuevas etiquetas, código CSS3 y filosofía detrás de HTML5. Para móviles, recomendado ver el HTML5 Boilerplate mobile.
Initializr: Este sitio te genera una plantilla personalizada con solo las características que vas a utilizar. Muy práctico para diseñadores.
Bootstrap de Twitter Twitter comparte un entorno básico para empezar con tu proyecto web basado en su misma plataforma. HTML5, CSS3 (con LESS).
Modernizr: Librería de JavaScript, pensando en compatibilidades e impulsando nuevas características a navegadores viejos.
Paper.js: Una librería JavaScript para trabajar con Canvas en el navegador. Todo sobre el manejo vectorial en HTML5.
Impact.js: Motores de Videojuegos con HTML5.
Can I Use?: Informa sobre el soporte de HTML5, CSS3 y SVG en diferentes navegadores para escritorios y entornos móviles.
Mobile HTML5: Completa tabla comparativa de los diferentes navegadores para móviles y tabletas.
VideoSWS: Comparación de características de cada player para el tag video.
Youtube y HTML5: El player de video de YouTube en HTML5.
HTML5 Doctor: Un espacio colaborativo entre asistentes a un FOWD en Londres que están siempre inquietos por noticias y desarrollo de HTML5.
Apple y HTML5: El compromiso, ejemplos de Apple y el uso de HTML5 en su ecosistema de desarrollo, sitios web y dispositivos.
Web Open Wonder de Mozilla: Ejemplos de Mozilla con HTML5, diseño, vídeo y Webgl.
Chrome Experiments: Galería con enlaces a increíbles ejemplos del equipo de Chrome y lo que han hecho con HTML5. Su eslogan es: Not your mother’s Javascript.
Html5 Rocks: Propuesta lanzada por Google con guías, tutoriales, ejemplos y código libre disponible para modificarse y re-compartir.
El Test Drive de IE por Microsoft: Muestra ejemplos del equipo de IE10 realizados con HTML5. Recomendadísimo el SVG Girl que es un anime japonés diseñado para el IE.
The expressive web por Adobe: Un showcase de CSS3 (animaciones, gradientes, transformaciones, transiciones, letras), HTML5 (canvas, audio, formularios, videos) y almacenamiento. Adobe está transformando su suite de aplicaciones en miras de HTML5.
Fluid Squares: (esta página es mi aporte a la lista original) Sitio que con un interesante grid sigue listando los sitios más recientes sobre el desarrollo del HTML5. Este elemento de la lista es para entrar a otra lista, tipo Inception

Libro: Dive into HTML5

Si en lugar de varias pestañas abiertas desde tus marcadores, prefieres tener todo impreso en un libro, según CVander el mejor libro que se puede obtener sobre HTML5 fue escrito por Mark Piligrim: Dive into HTML5. Se puede comprar una copia de O’relly en Amazon, y si lo lees en forra digital online te sale gratis. Está en inglés y vale mucho la pena.

Enlace al libro completo: Diveintohtml5.org

Autor del post: DanielSemper: @aeromental + Facebook

mondongovirtual

disculpa, cual crees que seria la mejor pagina para aprender HTML5 y paginas web desde cero???? cual es tu recomendacion de la pagiba que crees mas didáctica y fácil???
DanielSemper

La w3schools tiene este tutorial paso a paso: html5 Introduction

En español esta buena la Guía HTML5 de mejorando.la
Alejandro

Daniel, una pregunta, me podrias dar el código HTML de los cuadros de diferentes colores que pones en algunos posts?
DanielSemper

alejandro,

no es HTML, es CSS.
Alejandro

Jejejejejejejeje, me equivoque al escribir, pero porfavor, me puedes explicar como puedo hacer los cuadros en los posts de mi blog??
DanielSemper
En el archivo CSS pones el campo de citas:
```
.post blockquote{
color:#77595D;
background-color:#09656D;
border-radius:7px;
}
```
Te recomiendo que busques tus propios colores en RGB (#09656D) y cambies a tu gusto los valores de color y background-color.
border-radius indica cuantos pixeles de radio tendrá cada esquina redondeada.
Alejandro

Solo entendí la como la mitad de eso pero de todas formas gracias Daniel, Aerometal manda :y:
Alejandro

Daniel, una última pregunta, de donde compraste el dominio de Aeromental y cual hosting usas??
DanielSemper

Todos los dominios que tengo los compré con Dreamhost, siempre los recomiendo para comprar cualquier dominio (a $9,95), son los más transparentes y confiables que hay y no te traen sorpresas ni pagos extras si alguna vez requieres cambiar de register (otros te ponen trabas y cobros). NUNCA compres con GoDaddy, porque juegan sucio, varios amigos perdieron sus dominios sin motivo alguno, GD los revendió al mejor postor siendo que aún seguían registrados y con pagos al día, es terrible.

En cuanto a hosting, si recién empiezas te recomiendo igualmente Dreamhost (Shared), ahí estuvo Aeromental durante los tres primeros años sin problemas (aguantan tranquilos hasta 7 mil visitas al día, superior a eso necesitaras de un hosting más caro).

Yo pago $95 al año en un plan que es pago por adelantado de 2 años (equivalente a $7,95 mes). Ahí tengo hospedadas como 8 páginas.

Aeromental actualmente esta exclusivamente en un servidor dedicado de $230 dolares al mes, pero es porque es una página muy visitada (más de 30 mil visitas al día) y lo requiere.

Aquí puedes ver los precios: dreamhost.com/servers/compare-our-products/

Dreamhost esta a $8,95 dólares el mes, y no necesitas pagar por un dominio .com, .org o .net, puesto que te regalan uno si les contratas hosting. Puedes hospedar varios dominios (ilimitado, con FTPs, emails, Bases de datos, etc), incluso puedes revender el hosting, recuperando toda la inversión e incluso ganando dinero extra (yo lo hago). WordPress se instala con un solo click (es otra ventaja).

OJO!!!! Si decides usar Dreamhost, me harías un gran favor si usas el siguiente enlace para ganarme unos puntos (y $uS):

Enlace especial: dreamhost.com/r.cgi?130620

y si al final del registro te pide un promocode, puedes usar la palabra: AEROMENTAL para tener un descuento en el primer pago.
Alejandro

Muchas gracias Daniel, una pregunta más, cuando cree todo en DreamHost, como le hago para ponerlo en WordPress.org?, otra cosa, si compro el hosting, dijiste que me dan el dominio, y el servidor es aparte?.
Claro que usaré el enlace especial.
y…., una cosa más, yo soy un principiante en esto de los blogs (CSS, HTML, etc.) y dijste que que vives en Cochabamba – Bolivia, y otambién y quería pedirte si un día de estos puedo conocerte, como soy tu fan (Y), y para que me ayudes con todas estas compras, y también me orientes un poco en estas cosas favor o sino, por lo menos un videollamada en Skype si puedieras, no te lo tomes a la mala, si no quieres no importa.

Aeromental manda!!!!!!!!!!!!!!!!
DanielSemper

Al momento de comprar el hosting te pedirá que ingreses el dominio que quieres comprar (tendrás que ver que sea uno que no exista) y automáticamente te lo registra en ese instante.

Esperas unas horas que el dominio salga online (de 6 horas a máximo 2 días).

Luego en el panel de control de Dreamhost te instalas wordpress, ya no necesitas ir a wordpress.org.

Dreamhost tinee una wiki para ayudarte en todo:

wiki.dreamhost.com/WordPress

Y también sacaron este video tutorial:
Alejandro

O gran Daniel, muchas gracias
Alejandro

Y el servidor viene con el hsoting?
DanielSemper

Si, en Shared te dan un servidor compartido. Si eliges VPS son varios servidores conectados, y dedicated es servidor dedicado.
Alejandro

Y la última pregunta para cerrar esto, al final cuento me cuesta al mes con todo lo que mecionaste??