RFC8288: Web Linking

RFC8288: Web Linking

Según van pasando los años vamos viendo como aparecen más RFC relacionados con los elementos más simples de Internet y de los sitios web, y en esta ocasión voy a hablar del secreto de la red de redes: los enlaces.

Bootstrap 4.0

Bootstrap 4.0

Se acerca la llegada de Bootstrap 4 a nuestros hogares web y es hora de ver algunos elementos a favor y contra de lo que ya conocíamos.

HTML5 download

HTML5 download

En estas dos últimas semanas llevo revisando y revisando elementos del HTML5 que, como ya dije, me apasionan, porque básicamente han hecho mejoras muy impresionantes.

Sitios web más accesibles

Sitios web más accesibles

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) son unas mejoras del HTML para mejorar la accesibilidad de los sitios web.

HTML5 Server-Sent Events

HTML5 Server-Sent Events

Hoy toca hablar de los eventos Server-Sent. Básicamente este sistema lo que permite es que el navegador reciba información de forma automática de una fuente de datos sin necesidad de recargar.

Piensa en asíncrono

Piensa en asíncrono

Sin duda una de las mejoras del HTML5 es la posibilidad de cargar determinados elementos de forma asíncrona en la página.

Cursos de Verano: HTML 5

Otra semana que empieza y otra semana con más cursos de formación… hoy ha tocado una pequeña introducción a algunos elementos interesantes de HTML 5 para hacer abrir boca a desarrolladores y parte de la gente de contenidos. Básicamente me he centrado en comentar los nuevos elementos (los que he considerado más interesantes), en comentar los que desaparecen y otras cosas bastante estándar como son los meta-tags, los enlaces o las relaciones entre elementos. En fin, como siempre, mejor dejo la descarga de la presentación y cualquier cosa comentáis.

HTML 5 en todos los navegadores

Hace ya un tiempo que no comento cosas de HTML 5, y ahora que se va acercando la fecha de su puesta en marcha ya muchos proyectos nuevos se plantean, al menos la estructura base, comenzarse en esta nueva versión del idioma de Internet. En su día comenté cómo conseguir que, mediante un pequeño script, funcionase HTML5 en Internet Explorer 8. El tema es ¿cómo hacer que funciona siempre? La solución es bastante sencilla y a la vez también algo compleja, aunque en su día permitirá hacer una actualización bastante rápida del código con un simple «replace». Como ya sabéis, HTML 5 es un markup, al igual que lo son el HTML, los XML, el RDFa, etc… de forma que, lo mismo que podemos cargar XML en el … Leer más

HTML5 Prefetch

Hace un tiempo, cuando comencé a hablar del HTML 5, hice una breve referencia a los distinto «rel-algo» que podemos encontrar en la nueva codificación. Entre estos hay uno que puede ser muy interesante si sabes cómo navegan los usuarios de tu sitio web y, aun no sabiéndolo, crees que puedes acelerar la velocidad de carga de la misma. El link prefetching básicamente lo que permite es descargar las URL indicadas antes de que se vayan a visitar… y el HTML 5 incluye un sistema para avisarlo, ya de forma estándar (hasta ahora sólo Firefox le daba soporte). El sistema es tan sencillo como poner en el <head> algo como: <link rel=»prefetch» href=»http://sitio.web/url-siguiente/»> o algo como: <link rel=»prefetch» href=»http://sitio.web/imagen-siguiente.png»> Otra posibilidad es la de acelerar la carga pero … Leer más

Reproductor HTML 5 para vídeo

Reproductor HTML 5 para vídeo

Estamos muy mal acostumbrados a que nuestros vídeos se alojen en FLV en sitios como Youtube o Vimeo. Hoy en día teniendo en cuenta que el ancho de banda está tirado de precio, no entiendo porqué no se tiende a la calidad y a alojar la propia información si que otros decidan. Con HTML 5 y su nuevo elemento <video> tenemos la posibilidad de incluir muchos formatos de vídeo con muchas opciones… y para hacerlo ya todo más sencillo, además de hacerlo compatible con versiones anteriores que no soportan los nuevos formatos, están apareciendo algunos sistemas que permiten estos reproductores de una forma «chula» y fácil. Algunos de los que he encontrado son estos: FlareVideo: Necesita de jQuery y el soporte es, a mi gusto, un poco reducido… … Leer más

Presentaciones Tenerife Lan Party 2010

Hoy estoy en la Tenerife Lan Party haciendo un par de presentaciones, una de ellas sobre penalizaciones (principalmente de Google) y otra sobre HTML 5 (relacionada con temas más bien de SEO). Y, aunque va a ser una entrada breve, os dejo con la descarga en PDF de ambas para quien quiera darles una ojeada: Penalizaciones en Google SEO y HTML 5 Lástima estos días que Tenerife Norte está teniendo unos nubarrones bastante importantes y no he podido ni ir a la piscina ni a la playita, y ya mañana me vuelvo para Barcelona.

HTML MicroDatos: Personas y Empresas

HTML MicroDatos: Personas y Empresas

Tras ver el otro día qué son los MicroDatos, hoy voy a explicaros lo que antiguamente eran los hCard. Este microformato es de los más extendidos y extensibles, y ahora se ha convertido, usando la misma base, en un MicroDato bastante interesante, sobretodo porque ya viene documentado en el HTML 5. En la actualidad conozco 3 formatos en los que se habla de cómo dar formato a las fichas de personas y/o empresas… que son: Microformat hCard Data-Vocabulary Person Data-Vocabulary Organization Teniendo en cuenta que de los 3, el primero es el más completo, y que tal como dice Google en los otros 2, es capaz de interpretar similitudes entre unos y otros, voy a enfocarme en el más completo de todos. fn: Es el nombre completo (u … Leer más

HTML MicroDatos (antes MicroFormatos, antes RDFa)

HTML MicroDatos (antes MicroFormatos, antes RDFa)

Los que me conocéis sabéis que desde hace tiempo he sido un seguidos de los microformatos, y una de las mejoras que descubrí al hacer la serie de artículos de HTML 5 fue la incorporación «oficial» de lo que antiguamente se denominaba microformatos en lo que actualmente pasan a ser los midrodatos (microdata en inglés) y que vienen de la antigua implementación denominada RDFa. Pero ¿qué son los microdatos? Pues básicamente son pequeñas mejoras del HTML que, en apariencia no han de modificar nada, pero que hacen que las máquinas (buscadores, navegadores, aplicaciones…) sean capaces de interpretar y mejorar semánticamente el significado de parte de la información que se muestra por pantalla. Hasta ahora los microformatos eran bastante complejos de integrar ya que no existía un sistema estándar, … Leer más

HTML 5: el gran hermano te geolocaliza

HTML 5: el gran hermano te geolocaliza

Aunque se asocia el lanzamiento de las funciones de geolocalización al HTML 5, lo cierto es que la Geolocation API son unas funciones en JavaScript independientes de esta forma de mostrar las páginas web. Básicamente el navegador, dependiendo de la conexión a Internet, será capaz de saber qué latitud, longitud y otros datos tienes en ese momento. Os dejo con un par de ejemplos de código que, dependiendo del navegador, deberían funcionar. El primero de ellos es simplemente textual, el segundo muestra un mapa. El código más sencillo tiene una pinta tal que esta: <script type=»text/javascript»>   if (navigator.geolocation) {     navigator.geolocation.getCurrentPosition(successFunction, errorFunction);   } else {     alert(‘Tu navegador no soporta la geolocalizacion.’);   }   function successFunction(position) {     var lat = position.coords.latitude;     var long = position.coords.longitude;     alert(‘Tu localizacion es — latitud : … Leer más

HTML 5: el “rich media” está de moda

HTML 5: el “rich media” está de moda

Poco a poco se acaban los temas a tratar referentes al código que podemos desarrollar sobre HTML 5, aunque eso no significa que las entradas sobre el tema se acaben. En esta ocasión toca ya cerrar los elementos, y lo haré con los multimedia. No voy a entrar en muchísima profundidad en cada uno de ellos, ya que algunos darían para documentación muy extensa (sobre todo su actividad externa y el funcionamiento), pero aquí os comento un poco sobre cada uno de ellos. embed El elemento embed normalmente se utiliza para integrar elementos multimedia no-HTML, como aplicaciones o elementos interactivos. El bastante sencillo de configurar ya que tiene pocos atributos. El primero de ellos es el src para indicar la dirección URL del elemento en cuestión, y también … Leer más

HTML 5: las pseudo-clases para mayor interactividad

HTML 5: las pseudo-clases para mayor interactividad

Está claro que hoy en día el HTML no es nada sin los CSS, y hay algunos elementos que tienen algunas pseudo-clases que permiten algunas mejoras a la hora de interactuar con los estilos o diseños. Con la nueva versión, el HTML 5 tiene algunas clases que en las versiones anteriores no existían… aquí la lista de clases: : link: Son enlaces (o elementos) que no hayan sido visitados. : visited: Son enlaces (o elementos) que sí han sido visitados. : active: Son enlaces (o elementos) que están activados (por ejemplo, en el momento en el que hace clic en ellos). : enabled: Son elementos que están activos, como enlaces, botones, formularios… : disabled: Para los elementos contrarios al anterior, aquellos que en ese momento están desactivados. : … Leer más

HTML 5: los «malditos» iframes

HTML 5: los "malditos" iframes

Aunque es uno de los elementos que se utilizan todavía, la verdad es que el consumo que provoca en los navegadores es tan alto que si nos paramos a pensar fríamente, no es nada recomendable su uso… aún así, el HTML 5 todavía lo mantiene ya que para algunas cosas sigue siento un elemento valioso (aunque, como digo, yo no lo recomiendo, ni yo ni Google ni Yahoo!…) iframe El elemento iframe básicamente permite integrar lo que se podría decir como una ventana de navegador dentro de otra, o sea, una página dentro de otra, en un espacio definido. De esta forma podemos abrir el contenido de una página propia o externa dentro de una parte de la que actualmente visualizamos. El principal atributo que lo acompaña es … Leer más

Open Standard Media (OSM) Player

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 diseño de una forma sencilla gracias al uso de ThemeRoller, permite la integraciónd e vídeos de Vimeo y Youtube (simplemente indicando la URL), tiene la opción de listados … Leer más

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

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 quedaría directamente en el navegador web. Otro detalle que ya avisan es que lo de arrastrar sólo funciona con in Firefox 3.6, que es, en estos momentos, el … Leer más

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

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 único. legend Si se le quiere poner una cabecera descriptiva a cada uno de los fieldset, el legend es el elemento que debemos utilizar. Con este texto podremos … Leer más

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

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 que el hecho de que los sitios web sean más interactivos con el usuarios ha hecho que las necesidades de diferencias y complementar algunos elementos y atributos crezcan. … Leer más

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.

HTML 5: las tablas… ¿de multiplicar?

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 no pueden ser parte del layout de un sitio web. table Las table son un elemento muy interesante ya que disponen de muchos subelementos, y son un contenedor … Leer más

HTML 5: imagen grande, ande o no ande

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 cada uno de ellos. src Este atributo es obligatorio al añadir una imagen e indica la dirección URL donde se encuentra el elemento a mostrar. alt Este elemento … Leer más

HTML 5: dándole color a lo que escribimos

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 pero el elemento em básicamente lo que implica es dar énfasis a una palabra para que, dentro de una frase, se haga un mayor esfuerzo en ello. Es … Leer más

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> <html> <head>   <meta charset=»utf-8″>   <title>Font Face Demo</title>   <style type=»text/css» media=»screen»>     @font-face {       font-family: ‘AaarghNormal’;       src: url(‘Aaargh-webfont.eot’);       src: local(‘☺’), url(‘Aaargh-webfont.woff’) format(‘woff’), url(‘Aaargh-webfont.ttf’) format(‘truetype’), url(‘Aaargh-webfont.svg#webfont’) format(‘svg’);       font-weight: normal;       font-style: normal; … Leer más

HTML 5: enlaces que cobran vida

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 no ser estándar cada uno hacía un poco lo que le daba la gana. Y digo «cada uno» haciendo referencia a los seres humanos, a los navegadores y … Leer más

HTML 5: los bloques de contenido textual

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 poco más a decir… hr El hr históricamente se ha utilizado como «barra». Su uso real es el de separar párrafos o contenidos temáticos, de forma que si … Leer más