Archivo | HTML Feed RSS de esta sección

HTML5 y CSS3: 11 tutoriales para soluciones concretas

Como comentamos en el artículo “11 tendencias de diseño web para 2011” se espera que este sea el año en el que se produzca el uso intensivo de  CSS3 HTML5.

Mediante HTML5, podemos resolver parte de los elementos para los que, tradicionalmente, hemos utilizado Flash, aunque, todavía, con este nuevo estándar nos se pueden aplicar ciertas soluciones de diseño e interactividad que podemos lograr a través de Flash.

Por otra parte, las nuevas funcionalidades que nos ofrece CSS3 nos permiten ir dejando a un lado ciertos soluciones gráficas para las que antes exclusivamente necesitábamos imágenes: degradados, sombras, bordes redondeados de elementos gráficos, transformaciones, etc.

En este artículo incluimos referencias a tutoriales que nos pueden ayudar a comenzar a utilizar estos dos emergentes lenguajes de programación web. No se trata de tutoriales generales sobre ambas tecnologías, sino ejemplos de su aplicación a soluciones concretas como, entre otras situaciones, desarrollo de botones de acción en páginas web, desarrollo de formularios, aplicación de nuevas características de transformaciones y animaciones a casos concretos, interacción con jQuery, etc.

Continuar leyendo →

Comentarios { 1 }

HTML5: 30 sitios web para inspiración

HTML5 es la próxima gran revisión del estándar HTML, actualmente en desarrollo. Al igual que sus predecesores inmediatos, HTML 4.01 y XHTML 1.1, HTML 5 es un estándar para la estructuración y presentación de contenidos en Internet.

Aunque aun no se ha terminado de especificar el estándar y no todos los navegadores soportan en la actualidad algunas de sus nuevas funcionalidades, la salida al mercado de dispositivos como el iPad de Apple está acelerando su utilización en desarrollos web comerciales.

Como continuación del artículo “HTML5: ejemplos de sitios web reales para inspiración“, en este artículo os mostramos 30 sitios web que han sido desarrollados con HTML5.

Continuar leyendo →

Comentarios { 2 }

HTML5: ejemplos de sitios web reales para inspiración

HTML5 es la nueva y actualizada versión de la web estándar HTML. Debido a la enorme cantidad de nuevas funcionalidades, permite a los desarrolladores y diseñadores web aplicar técnicas y efectos que antes únicamente podíamos emplear mediante plugins y complementos no estándar de terceros como Adobe Flash o Microsoft Silverlight.

En este blog ya hemos incluido varios artículos sobre el uso de HTML5 y tecnologías relacionadas como CSS3, en esta ocasión os proponemos que visitéis sitios web publicados en Internet que las utilizan, a fin de comprobar sus capacidades y aplicaciones. Encontraréis como otros diseñadores utilizan las novedades del nuevo estándar, como:

  • Etiquetas (canvas 2D y 3D, audio, video) con codecs para mostrar los contenidos multimedia. Actualmente hay una lucha entre imponer codecs gratuitos (WebMVP8) o de pago (H.264/MPEG-4 AVC).
  • Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, menu y Command. Permiten generar tablas dinámicas que pueden filtrar, ordenar y ocultar contenido en cliente.
  • Mejoras en los formularios. Nuevos tipos de datos (eMail, number, url, datetime …) y facilidades para validar el contenido sin Javascript.
  • Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales). En general se deja abierto a poder interpretar otros lenguajes XML.
  • Drag and Drop. Nueva funcionalidad para arrastrar objetos como imágenes.
  • Etiquetas para manejar la Web Semántica (Web 3.0): header, footer, article, nav, time( fecha del contenido), link rel=‘’ (tipo de contenido que se enlaza).

Continuar leyendo →

Comentarios { 2 }

Guía de frameworks CSS gratuitos

Existen un buen número de razones para usar un framework  para desarrollo de sitios web. Entre otras , este tipo de herramientas nos permiten acelerar el desarrollo, crear sitios más agradables estéticamente y nos pueden ayudar a eliminar algunos aspectos negativos de la (in)compatibilidad entre navegadores (aunque no todos ellos hacen esto, o lo hacen bien). Por otra parte, en algunos casos, y debido a la gran cantidad de entornos de desarrollo gratuitos para CSS existente,  la decisión más complicada es elegir uno de ellos y, después, aprender a utilizarlos.

En la actualidad y en nuestra opinión, no existe un framework para CSS que destaque, de forma general, sobre los demás. La decisión sobre el uso de uno u otro marco depende de multitud de factores, aunque pensamos que el principal es el tipo de diseño web que queremos implementar. Existen frameworks destinados a diseños web en grid, otros más orientados a la tipografía de las páginas que creemos, algunos están diseñados para ensalzar determinados elementos de las páginas, etc.

Tampoco hay que olvidar la curva de aprendizaje que precisan unos y otros. Algunos marcos son ideales para diseñadores web que se inicien en este asunto y otros que necesitan un estudio intenso de sus funcionalidades y conocimientos avanzados.

En general, a la hora de elegir un framework CSS, hay que tener dos aspectos en cuenta:

  1. Asegurarnos que el entorno de desarrollo elegido es capaz de manejar el tipo de diseño escogido para nuestro sitio web y que soporta las funcionalidades que queremos implementar en el mismo.
  2. Nuestras propias capacidades para que, el conseguir los  conocimientos adecuados sobre el entorno, no nos represente una barrera que nos impida sacar el máximo partido al mismo.

En las secciones de este blog dedicadas a herramientas de desarrollo web, podéis encontrar multitud de utilidades que nos pueden ayudar a encontrar un entorno de desarrollo que nos resulte cómodo. En este artículo (original de Cameron Chapman en Devsnippets y ampliado por nosotros), incluimos un listado de los  frameworks CSS que consideramos más óptimos e indicamos sus principales características y ámbitos de aplicación. La decisión final sobre la elección de uno u otro dependerá de vosotros y de vuestras necesidades concretas…

Continuar leyendo →

Comentarios { 1 }

Experimentos en HTML5

En el blog de Ricardo Cabello hemos encontrado una colección de “experimentos” realizados en HTML5 que son, simplemente, alucinantes. Entrando por http://mrdoob.com/ podéis acceder a una serie de pruebas que muestran las capacidades del nuevo HTML.

Experimentos HTML5

Igual, moviendo el ratón conseguimos....

Experimentos en HTML5

... Esto

Continuar leyendo →

Comentarios { 1 }

HTML5 JavaScript APIs

Charla de Remy Sharp en CODEBITS sobre los APIs y funcionalidades de HTML5 APIs: elemento video, canvas, web storage, etc.
Continuar leyendo →

Comentarios { 1 }

Compression Plugin made by Cork Tiles