HTML

HTML / herramientas — 1 Comentario
24
Jun 10

Framework HTML5 para aplicaciones en dispositivos móviles

Sencha Touch es un framework para aplicaciones móviles que implementa soluciones web basadas en tecnologías como  HTML5, CSS3 y Javascript, de forma que simulan ser aplicaciones nativas.

Está soportado en dispositivos Android y Apple IOS y se distribuye con una licencia GPL 3.0 + FLOSS License.

Sencha Touch: Framework HTML5 para aplicaciones móviles

Sencha Touch: Framework HTML5 para aplicaciones móviles

Características:

  • Desarrollado con HTML5 y otros estándares web como CSS3 , y Javascript, lo que le dota de una gran flexibilidad
  • Soporte para eventos de la interface táctil
  • Ajuste automático a las distintas resoluciones de pantalla de los dispositivos móviles
  • Permite cargar datos mediante AJAX, YQL o JSONp
  • Permite la personalización de colores, iconos, etc.
  • Soporte para geolocalización y mapas, incluyendo un componente que implementa el API de Google Maps
  • Animaciones predefinidas con muchas características personalizables

Al utilizar la tecnología SASS , el sistema permite a los desarrolladores la personalización de la apariencia de las aplicaciones, mediante variables similares a los selectores CSS. Los distintos componentes del framework utilizan las características de CSS3 para la gran mayoría de los aspectos relacionados con el diseño de la aplicación ( esquinas redondeadas , degradados de fondo , sombras, etc.).
(más…)

Continuar leyendo: Framework HTML5 para aplicaciones en dispositivos móviles →
Estándares / HTML / diseño web — 1 Comentario
11
Jun 10

HTML5: estado resumido en una infografía

Vía Social Media Graphics hemos conocido la siguiente infográfia que resume el “estado del arte” del desarrollo de HTML5.

Especialmente interesante, desde nuestro punto de vista, es el clarificador bloque que trata sobre el estado actual del soporte del HTML5 por los navegadores:

Soporte de HTML5 en los navegadores

Soporte de HTML5 en los navegadores

Así como el último bloque del gráfico, donde se resume cualitativamente la comparación entre HTML5 y Flash en términos de costes, de capacidades, de aceptación por la industria y de eficiencia:

Comparativa Flash vs HTML5

Comparativa Flash vs HTML5

(más…)

Continuar leyendo: HTML5: estado resumido en una infografía →
CSS / HTML / diseño web — 1 Comentario
20
May 10

Prototipo en HTML5 de Sports Illustrated

Video del prototipo de la publicación digital de Sports Illustrated, presentada ayer durante el Google I/O y desarrollada totalmente en HTML5 utilizando, entre otras funcionalidades, estas:

  • Animaciones en CSS3
  • Fuentes embebidas
  • Drag & Drop
  • HTML5 Video
  • Geolocalización
  • Web Workers
  • App Cache
  • Web DB
  • Feeds
  • Google Maps API
  • Google Buzz API
  • Rails

Continuar leyendo: Prototipo en HTML5 de Sports Illustrated →
HTML / herramientas — 2 Comentarios
5
May 10

Zen Coding, como escribir código HTML abreviado

Zen Coding es un proyecto alojado en Google Code y te permite escribir HTML mediante un método abreviado. Está licenciado bajo la GNU General Public License v3.

Su funcionamiento se basa en la instalación de un plugin en el editor (ver lista de editores disponibles) de forma que permite, para HTML, XML, XSL o cualquier otro formato de código estructurado, realizar una codificación más eficiente. El núcleo de este plugin es un “motor de abreviatura” que permite ampliar expresiones similares a los selectores de CSS. Por ejemplo:

div#page>div.logo+ul#navigation>li*5>a

se expandirá como:

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>

(más…)

Continuar leyendo: Zen Coding, como escribir código HTML abreviado →
CSS / Estándares / HTML / diseño web / navegadores — 1 Comentario
2
May 10

CSS3: soluciones para Internet Explorer

La utilización de CSS3 es probablemente la última tendencia en diseño web, permitiendo a los desarrolladores la oportunidad de implementar soluciones en sus diseños con selectores CSS más sencillos y evitando tener que recurrir a marcas no semánticas, utilización de imágenes adicionales y complejos códigos JavaScript.

Desafortunadamente, incluso en sus versiones mas actuales, Internet Explorer continua sin dar soporte a la release 3 de la especificación de hojas de estilo en cascada. Windows Internet Explorer 8 es completamente compatible con la especificación de CSS 2.1 y soporta solamente algunas funcionalidades de CSS 3 (ver nota del msn sobre la compatibilidad de CSS e Internet Explorer).

En el artículo publicado en Smashing Magazine titulado “CSS3 Solutions for Internet Explorer”, nos dan pistas y soluciones sobre como utilizar una serrie de opciones que los desarrolladores pueden considerar para aquellas circunstancias en que se requiere compatibilidad con una característica de CSS3 para todas las versiones de Internet Explorer (IE6, IE7 e IE8).

En nuestra opinión se trata únicamente de recursos que pueden utilizarse exclusivamente en caso de necesidad, ya que, como se indica para cada uno de ellos, todos originan algún tipo de problema y, en su mayoría, provocan que nuestro código CSS no sea válido según los estándares de W3C.

En este post resumimos estas posibilidades para intentar hacer nuestros diseños basadaos en CSS3 más compatibles con el navegador de Microsoft.

(más…)

Continuar leyendo: CSS3: soluciones para Internet Explorer →
CSS / HTML / diseño web / herramientas — 2 Comentarios
27
Abr 10

CSS3 y HTML5: recursos de diseño web

Siguendo con la serie de post relativos a recursos relativos a CSS3 y HTML5 (ver contenidos relacionados), incluimos el listado de herramientas y artículos publicado en http://www.html5samples.com/. El listado incluye herramientas para probar y generar código de selectores CSS3, herramientas para crear transformaciones, degradados y otros muchos efectos posibles con la especificación actual publicada por el W3C, así como aspectos relacionados con el soporte de navegadores y ejemplos de su uso.

(más…)

Continuar leyendo: CSS3 y HTML5: recursos de diseño web →
Estándares / HTML / herramientas / navegadores — 2 Comentarios
23
Abr 10

HTML5: herramienta para test de compatibilidad de navegadores

En html5test.com podemos encontrar un test para la compatibilidad del navegador con HTML5. Las comprobaciones se basan en los borradores del W3C.

La lista de comprobación incluye:

  • Doctype
  • Canvas
  • Video
  • Audio
  • Geolocation
  • Storage
  • Offline Web Applications
  • Workers
  • Section elements
  • Grouping content elements
  • Text-level semantic element
  • Forms
  • User interaction

Incluimos el enlace a la página del test en el bloque de enlaces de este blog para facilitar su localización en el futuro.

Continuar leyendo: HTML5: herramienta para test de compatibilidad de navegadores →
HTML / diseño web / herramientas / javascript / programación — 4 Comentarios
25
Dic 09

Plugins jQuery para manejo de tablas HTML

Aunque en la actualidad el uso de tablas para maquetación web está cada vez mas en desuso en favor de otros elementos HTML como las capa, para algunas aplicaciones web sigue siendo vital la presentación de datos tabulados. Por este motivo incluimos el artículo publicado en Tripwiremagazine sobre Plugins basados en jQuery para manipulación de tablas HTML.

En este artículo se incluyen 25 utilidades para ayudar a los desarrolladores a dar funcionalidades a las tablas incluidas en sus páginas web, entre otras: permitir scroll de los datos de la tabla mientras se mantiene el cabecero de la misma fijo, reordenar filas y columnas, incluir filtros de datos en las tablas, añadir efectos de color y desplazamientos en columnas y filas, etc.

(más…)

Continuar leyendo: Plugins jQuery para manejo de tablas HTML →
Flash / HTML / Optimización sitios web / diseño web — 1 Comentario
5
Dic 09

Flash vs HTML: un estudio y un artículo de interés

Al respecto de la eterna disyuntiva sobre si es conveniente o no el uso de Flash, hemos encontrado estos dos artículos que arrojan algo de luz sobre el tema.

(más…)

Continuar leyendo: Flash vs HTML: un estudio y un artículo de interés →
CSS / HTML / diseño web — 1 Comentario
8
Oct 09

CSS3: Cómo darle estilo a una lista usando un solo píxel

Una imagen de fondo de un sólo píxel puede ser algo muy versátil. Con repeat-x puede ser una línea horizontal, repeat-y hace una línea vertical y repeat la transforma en un color relleno. Simplemente como una prueba divertida del concepto, podemos utilizar esto para crear una lista ordenada con subdvisiones. En el blog de elWebmaster.com han publicado este post sobre cómo utilizar esta herramienta de CSS para lograrlo.

Lista con un solo pixel

Lista con un solo pixel

(más…)

Continuar leyendo: CSS3: Cómo darle estilo a una lista usando un solo píxel →