HTML 5

  • Open Standard Media (OSM) Player

    ·

    Uno de los poyos que siempre me he encontrado a la hora de poner un reproductor de vídeo en la web es que en la mayoría de casos sólo aceptaba vídeos flash (.flv). La cosa es que con el HTML 5 y con jQuery se han montado un reproductor llamado Open Standard Media que tiene muy buena pinta, es código abierto y gratuito. Entre otras cosas, permite el uso de HTML 5, soporta los nuevos elementos audio y video del HTML 5 con los formatos estándar, para el resto de formatos monta un reproductor Flash, se le puede cambiar el… Read More →

  • font dragr: prueba tus fuentes sólo arrastrándolas

    ·

    Aunque hago un parón en cuanto a publicar de HTML 5, he encontrado esta herramienta, web o como queramos llamarlo que tiene su gracia, sobretodo si te dedicas a maquetar o eres diseñador. El sitio se llama font dragr y básicamente es una página en la que arrastrando un fichero de tipo de letra -truetype (ttf), opentype (otf), scalable vector graphics (svg) o Web Open Font Format (WOFF)- te actualizará los textos de la página con esa fuente. Además, el contenido original de la página es editable, por lo que puedes poner un texto de ejemplo y así ver cómo… Read More →

  • HTML 5: formularios, el elemento 2.0 (parte 2)

    ·

    Hace unos días explicaba principalmente el elemento input de los formularios en HTML 5 y hoy toca el resto de elementos. Y es que no es moco de pavo todo lo que hay. fieldset Este elemento se utiliza para agrupar varios elementos de un formulario… si un formulario tiene varios «bloques» o contenidos distintos, se deberían agrupar con este elemento. Si se le indica el atributo disabled entonces los elementos contenidos en él también lo están. También se le puede indicar el atributo form que hace referencia al formulario padre, y el atributo name, para acceder externamente con un nombre… Read More →

  • HTML 5: formularios, el elemento 2.0 (parte 1)

    ·

    Si hay un elemento que ha evolucionado enormemente con respecto a las versiones anteriores sin duda es el de los formularios. Y es que en estos últimos 10 años de ha construido lo que se llama web 2.0 (también conocido como yo ya había visto eBay en el 98 y era una web 1.0, así que alguien me está tomando el pelo). En fin, no quiero discutir sobre cómo se llaman las cosas en internet, porque la gente las llama como le da la gana. Aunque sí que es cierto que hay algo que no se puede obviar, y es… Read More →

  • CSS Reset para HTML 5

    ·

    Llevo varios días intentando encontrar un CSS Reset pero para HTML 5. Hasta ahora usaba el de Yahoo! YUI, pero incluso la versión 3 no da soporte a las nuevas etiquetas. Por eso me he decidido a revisar un poco los elementos que hay hasta ahora e intentar ofrecer una primera versión del CSS Reset para HTML 5. html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,hr,iframe,embed,object,legend{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup,a,small,q,time,samp,kbd,sup,sub,mark,col,colgroup,tbody,thead,tfoot,tr,td,th,label,input,button,textarea,select,optgroup,option,label,output{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;font-variant:normal;}i{font-style:italic;}b{font-weight:bold;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:»;}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select{*font-size:100%;}header,article,section,aside,footer,nav,hgroup,address,figure,figcaption,video,audio,legend,datalist,optgroup,details,summary,command,menu{display:block;margin:0;padding:0;} Se puede descargar el CSS Reset para HTML 5. NOTA: Que conste que es una propuesta personal, basándome en la mayoría de los elementos que propone el HTML 5. ACTUALIZACIÓN: Me han pasado este de Rich Clark. Read More →

  • HTML 5: las tablas… ¿de multiplicar?

    ·

    Y aquí un día más para seguir hablando de HTML 5. Por cierto he creado una sección especial en la que he recopilado todas las entradas sobre ello. En esta ocasión toca hablar de las tablas, y es que, aunque las tablas han sido un elemento que parecía que iba a desaparecer, no es así aunque sí que se le quiere dar un uso muy concreto. Y es que las tablas representan información en una o más dimensiones que se pueden representar en forma de tabla (qué frase más retroalimentada…). Lo que sí queda muy escrito es que las tablas… Read More →

  • HTML 5: imagen grande, ande o no ande

    ·

    Ahora que ya tenemos la mayor parte del HTML formateado, toca hacer revisión del resto de elementos más detallados. Y, al igual que pasó con los enlaces, con las imágenes voy a dedicar un capítulo entero para ello ya que aunque la configuración no es tan compleja, se lo merece. Las imágenes se representan con el elemento img. Una imagen puede ser un mapa estático (png, gif, jpg…), vectorial (pdf, xml con svg…), imágenes anmadas (gif, apng…) y otra serie de elementos que cada navegador soporte, pero que el propio HTML 5 no especifica, ya que queda en manos de… Read More →

  • HTML 5: dándole color a lo que escribimos

    ·

    Si por algo se inventó el HTML en su día fue para hacer «markup» de los textos, lo que, en el fondo, significa que se inventó para hacer que los textos de la red de redes tuvieran una forma de darles color, formato y, sobretodo, vinculación. Pero como ya he hablado de la vinculación de los elementos, ahora toca hablar de los elementos que hacen que podamos tener negritas, cursivas, y una serie de cosas que cualquier texto debería poder tener. em Aunque muchos asocian el elemento em a las cursivas, no es así. Habitualmente se representa como una cursiva… Read More →

  • Usa el tipo de letra que quieras en tu sitio

    ·

    Estos días hablando con mi diseñadora favorita, Ana, hemos cruzado algunas cosas sobre la posibilidad de «incrustar tu fuente» en los sitios web. Ella últimamente hace diseños para algunos hoteles, y estos siempre quieren cosas especiales. Al final de hablar sobre ello, comenzamos a ver el tema del @font-face del CSS3. Pero, claro está, nos encontramos con el asunto de que no funciona en todos los navegadores. Así que me he puesto a investigar y he encontrado un código, un poco extraño, pero que parece ser la solución a la compatibilidad con todos los navegadores, incluido Internet Explorer. <!DOCTYPE html>… Read More →

  • HTML 5: enlaces que cobran vida

    ·

    Si hay un elemento que hace que Internet sea lo que es son los hipervínculos, los enlaces o, en definitiva en elemento anchor. Y es que la importancia de los enlaces en la red de redes no es trivial, ya que es lo que hace que Internet se distinga de la mayor biblioteca del mundo: el poder saltar de una información a otra sin necesidad de ir al final del libro y buscar en la bibliografía. Los enlaces, hasta ahora, simplemente eran eso, enlaces. Poco a poco en los últimos años se han ido creando elementos suplementarios, pero que al… Read More →

  • HTML 5: los bloques de contenido textual

    ·

    Hace unos días os comentaba los bloques genéricos que contienen la estructura de las páginas en HTML 5, y ahora toca los bloques que contienen texto, y su forma de organizarse… Parece que no, pero aunque muchos elementos de organización de textos son muy parecidos, no se han de utilizar para las mismas cosas… y el objetivo de esta entrada es ver esos elementos y los pocos nuevos que se han añadido… ¿comenzamos? p El elemento p es sencillo de definir: es un parágrafo. Se podría decir que es el elemento básico a la hora de escribir un contenido… Y… Read More →

  • HTML 5: cómo estructurar, ahora, una página

    ·

    Hace unos días os explicaba algunos de los cambios genéricos en el HTML 5, y después cómo ha de ser la cabecera del sitio. Pero si una cosa ha cambiado mucho en cuando al diseño de las distintas páginas del sitio es la introducción de lo que se puede llamar «los tags de la estructura web». Hace unos 10 años, cuando se quería hacer una página, te podías plantear el uso de los frames que eran la forma más sencilla de no tener que repetir y repetir infinidad de veces el mismo código. Con la entrada de los lenguajes de… Read More →

  • HTML 5: cómo es la cabecera de una página

    ·

    Hoy comienzo un repaso de las nuevas etiquetas del HTML 5, aunque también hablaré, claro está de las etiquetas que ya existen, y si han cambiado o no con respecto a las versiones anteriores. Y como no me quiero enrollar mucho, porque no es lo que toca, voy a empezar con algunos de estos tags… doctype Para empezar cualquier página toca el doctype. La verdad es que históricamente este elemento nunca ha tenido un buen acompañamiento, ya que había que indicarle algunos parámetros y versiones que normalmente nunca se ajustaban a la realidad. Ahora, con el HTML 5 esto queda… Read More →

  • HTML 5: atributos globales

    ·

    Antes de empezar a hablar de las etiquetas en el HTML 5, hay que tener presente una serie de elementos globales que sirven para la gran mayoría de etiquetas y que hay que tener en cuenta a la hora de comenzar a desarrollar, sobre todo por la gran posibilidades de acción que nos permiten. Estos elementos que os comentaré ahora son atributos de los tags, de forma que se pueden añadir dentro del tag como un parámetro más. Y, una vez explicado esto, vamos a comenzar con cada uno de ellos: accesskey Este atributo accesskey básicamente lo que permite es… Read More →

  • Primeros datos SEO del nuevo Tumanitas

    ·

    Hace ya unos días que hemos lanzado la nueva versión de TuManitas y la verdad es que los datos que puedo extraer de tan pocos días son bastante espectaculares. Voy a intentar poner un resumen de la mayor cantidad de gráficas y datos que tenemos… Para empezar os dejo la gráfica de Rendimiento del sitio que da Webmaster Tools: También os dejo las Páginas rastreadas al día: El siguiente es el de los Kilobytes descargados al día: Y el que más nos está gustando al equipo, el de Tiempo de descarga de una página: Finalmente, os dejo el histórico de… Read More →

  • HTML 5: algunas novedades antes de empezar

    ·

    Sin duda HTML 5 es el futuro presente, y un claro ejemplo ha sido el lanzamiento de este mismo blog en HTML desde Octubre de 2009 y algo comercial como es TuManitas en Abril de 2010. Para empezar he de decir que uno de los detalles que más me ha gustado es que los tags «únicos» ya no sea obligatorio cerrarlos. Esto significa que podemos poner cosas como <br> o <img src=»http://example.com/example.jpg»> sin necesidad de incluir la barra «/» final. Otro detalle es que se va a poder tener acceso a dispositivos externos como una cámara web gracias al tag… Read More →

  • TuManitas, ¿primera web comercial en HTML 5?

    ·

    Sí, el gran proyecto en el que he estado trabajando estos últimos 4 meses es TuManitas. Ya os comenté hace tiempo que me incorporé al proyecto como CTO, y desde principios de año que «unos arreglillos» se convirtieron en el desarrollo del producto completamente nuevo. Los cambios no han sido sólo estéticos (algo bastante evidente) sino sobretodo en funcionalidades y usabilidad. Que conste que sé que hay cosas a arreglar, así que ahora no me bombardeéis de mensajes diciendo que tal o pascual… los conozco casi todos los fallos. Con respecto a la usabilidad, pues básicamente las mejoras han ido… Read More →

  • Las nuevas etiquetas del HTML5

    ·

    Y este, por ahora, será el último artículo que escriba en referencia al HTML5. Hasta ahora he hablado de cómo hacer que funcione en Explorer 8, y de las novedades en cuanto a los enlaces internos y externos. Ahora lo que toca es enseñar algunos de estos nuevos «tags» que considero que tiene cierto sentido a la hora de dar formato a un sitio, o cierto peso a la hora de organizar la información. <article> El significado principal es sencillo: aquí se encuentra el contenido importante de la página. Si hablásemos en términos de SEO, esto sería lo que hay… Read More →

  • Los enlaces en HTML5 y el SEO

    ·

    El otro día os comentaba cómo hacer que Internet Explorer 8 detecte el HTML5 y ahora os traigo un poco de información y lucidez sobre el peso de los enlaces en HTML5 y las relaciones entre contenidos, lo que algunos llaman el «linkbuilding» y el «linkjuice». Existe un elemento que desde hace un tiempo se ha ido creando de forma autónoma que son los «rel=». Seguro que a los SEO les suena el «rel=nofollow» como un gran clásico, pero existen algunos más y HTML5 los ha incorporado de serie. Para los CSS Un gran clásico es que los CSS sean… Read More →

  • JavierCasares.com en HTML5

    ·

    Por fin lo he hecho… ha costado, no voy a negarlo, tenía mis dudas sobre si sabría hacerlo más o menos bien, pero como ha sido la primera vez, creo que no ha salido mal del todo… Acabo de lanzar mi template en HTML5. Por lo poco que he podido ver, una de dos, el HTML5 está bastante bien soportado, pero el CSS no lo aguanta muy bien, o los «nuevos tags» no pueden «tener formato», porque al final he acabado poniendo ID y CLASS a la mayoría de los elementos, y dándoles formatos a todos ellos… También sé, por… Read More →