La diversidad de dispositivos para conectarse a la red y navegar por las páginas web es creciente, y con ello la disparidad de resoluciones, desde una pequeña pantalla vertical de un teléfono móvil inteligente, como el iPhone o cualquier dispositivo con Android hasta los mil formatos de monitores que van desde los ordenadores corporativos que aún cuentan con pantallas de 15 y 17″ y resoluciones de 800 píxeles de ancho hasta los grandes monitores de veintitantas pulgadas y resoluciones super horizontales de más de 1900 píxeles.

Es tal esta diversidad de formatos que si queremos aprovechar mínimamente la resolución disponible en cada pantalla o dispositivo la solución es diseñar para varios formatos, de lo contrario tus clientes te llamarán diciéndote, no se aprovecha el ancho de pantalla, no se ve bien con el móvil, aparecen barras y es innavegable, será tal el caos que te traemos una de las muchas soluciones existentes: La librería que combina javascript y CSS denominada Adapt

Esta librería te permite disponer de varias hojas de estilo y cargar dinámicamente la que mejor se adapta al dispositivo que visita la página web.

Dale un vistazo en: http://adapt.960.gs/

Páginas relacionadas con este artículo:

1. Estructuras redimensionables para iPhone
2. Clase PHP para móviles
3. Compatibilidad CSS3 con diferentes navegadores

La W3C le ha puesto logo a la implementación de HTML5, y no sólo se ha quedado hay, ha iconizado las diferentes tecnologías que van a integrar esta nueva normativa que va imperar sobre el HTML, la tecnología  supuestamente llamada a ser una auténtico Flash Killer.

Los iconos de las tecnologías aquí:

Dependiendo de lo que uses en tu web puedes mostrar unos u otros logotipo, por este orden según la imagen: El primer icono hace referencia al uso de una estructura semántica HTML5, el segundo de que se usan bases de datos en cliente, el tercero que es multidispositivo, esto es que se ha cuidado para que se pueda acceder con PCs, tablets, móviles, etc. El cuarto icono hac referencia a que se usa conectividad con datos en tiempo real, los http request de antes, saltamos de línea y el icono de multimedia, es decir que esto lleva vídeo bajo HTML5, el segundo de la segunda nos informa que se hace uso de las 3D, a darle caña al Canvas. El tercero de la segunda que parece una flor, no! no es una flor nuclearizada significa que se trabaja duro en optimizarlo para ofrecer un cran rendimiento, y último, el más bonito a mi forma de entender la estética nos informa que aquí se usa CSS3.

Hoy me siento icónico los de la W3 incluso han colocado un generador del gráfico personalizado, esto es, seleccionas las tecnologías que implementas pulsas un botón y te escupen un código html que tras ser insertado en tu web mostrará, preferiblemente a pie de página lo hachetemelerocinco que tu eres.

¿Qué son las 09:00 de un día de enero del año 2011 y todavía no tienes tu pegatina HTML5?

Corre!!!!  http://www.w3.org/html/logo/

Páginas relacionadas con este artículo:

1. Compatibilidad del HTML5 entre navegadores
2. Plantillas de páginas web con HTML5
3. El aporte que HTML5 representa a los desarrolladores web

Excelente desarrollo de un sistema de capas deslizantes en modo acordeón o slider, lo mejor es que no precisa de jQuery pues está desarrollado exclusivamente en HTML+CSS3

Puedes verlo funcionar en dos sabores, horizontal y vertical recuerda que para descargarte el código para jugar deberás estudiar el HTML con un ver código fuente y descargarte el CSS… alguien ha oído FireBug?:

http://www.venturelab.co.uk/demos/accordion/

Páginas relacionadas con este artículo:

1. Creador visual de CSS3
2. Recursos en HTML5 y CSS3
3. Botones en CSS3

Aún no hemos podido comprobar la funcionalidad de esta clase pero por lo que parece indicar no es un sólo redireccionador de url atendiendo al dispositivo o browser sino que parece que puede modifica los enlaces al vuelo existentes en la página web para mantenerse en el formato apropiado del dispositivo.

http://code.google.com/p/cimobile/wiki/CiMobile

Páginas relacionadas con este artículo:

1. Diferentes dispositivos diferentes resoluciones
2. Estructuras redimensionables para iPhone
3. jQuery para móviles

Puedes descargar la hoja de estilos CSS en el siguiente enlace.

http://horaciobella.com/zardi/

Páginas relacionadas con este artículo:

1. Creador visual de CSS3
2. Recursos en HTML5 y CSS3
3. Iconos botones y elementos para reproductores

O como dicen los de lengua inglesa, ver el Wireframe, see the wireframe.

¿Qué es un wireframe?

Pues como ya decimos en el título un wireframe es un esquema de disposición de los diferentes elementos de una página web. Los módulos visuales sin textos en los que se distribuyen los contenidos.

La utilidad que le podemos dar es la del estudio y la inspiración, por ejemplo cuando una página web te gusta o te atrae por su usabilidad, ejecutas la herramienta y podrás ver su estructura, a partir de aquí inspira y expira código fuente hasta que la mejores.

En la captura de pantalla anterior te mostramos el wireframe de la página corporativa de nuestra aplicación de gestión online invOOice.com, una distribución la mar de sencilla y clara, en el header, selector de idiomas, logo, menú de navegación cuerpo de a tres columnas con imagen en cada una y un footer.

La aplicación para ver el wireframe

Esta aplicación es un Bookmarklet, es decir una aplicación web que se puede instalar como favorito, para instalarla:

Arrástra ESTO hasta tu barra de favoritos, si no te funciona dirígete a la página de autor y allí encontrarás más botones para instalarlo y una mayor documentación.

Os copiamos un vídeo de youtube sobre el funcionamiento de esta aplicación:

Enlace original: http://www.volkside.com/2010/12/introducing-wirify-the-web-as-wireframes/

Páginas relacionadas con este artículo:

1. Menú de navegación desplegable en CSS3
2. Estructuras redimensionables para iPhone
3. Medir la velocidad de una web

Hoy vamos a jugar un poquito con las fantanbulosas webfonts de Mr. Google

¿Qué que son las webfonts?

Eso se lo preguntas a Google. http://code.google.com/apis/webfonts/

¿Cómo funcionan?

Para usarlas debes incluir cada fuente tipografía webfont que quieras usar en la sección header del HTML con un:

<link href="http://fonts.googleapis.com/css?family=Orbitron:bold&subset=latin" rel="stylesheet" type="text/css">

Luego en la hoja de estilo de tu página la debes definir, recuerda también tirar de segundas opciones, tal como lo reflejamos aquí, aria o cualquier tipografía “serif” esto es más que nada porque hay navegadores viejos o paratos como el iPad on iOS 3.x a los que se le atragantan las Webfonts.

font-family: 'Orbitron', arial, serif;

¿Dónde previsualizarlas?

Supongo que como a mi, te interesa ver de forma rápida que fuentes hay por la red, que pinta hacen y tal para poderlas meter en tu página o blog, pues bien los chicos y chicas de Google te las muestran en la siguiente dirección:

http://code.google.com/webfonts

¿Dónde comparar las Google Fonts?

Como el visualizador de Google es quizá demasiado escueto te recomendamos otro que está algo mejor, no mucho, pero algo es algo dijo un geek cuando se encontró un byte en la sopa…

http://www.fontcomparer.com/

¿Donde estamos usando ya webfonts?

Nosotros hemos empezado a incorporarlas en un proyecto en el que estamos trabajando basado en ecOOmmerce.com nuestro software de tiendas virtuales.

Páginas relacionadas con este artículo:

1. Recursos en HTML5 y CSS3
2. Compilador JavaScript de Google
3. Google Native Client

Bueno hoy algo sencillito, un CSS reset de los de copipastear, es totalmente free y open source, yo por respeto al autor “Eric Meyer” dejo su referencia, pero si lo necesitais para un proyecto comercial lo podeis quitar sin tenerlo que refreir ni nada, a pedir de boca. Aquí va:

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Páginas relacionadas con este artículo:

1. Cómo añadir un botón para compartir con Facebook
2. Tabla MySQL con provincias Argentinas
3. Estilos CSS del cursor

Te traemos una plantilla bajo HTML5 lista para usar, tienes dos opciones una a 2 columnas, la típica con el tradicional menús superior y menú lateral y otra de tres columnas, algo más moderna y aprovechable en su distribución. Si bien fuera de blogs y a nivel de empresa siempre defenderé el formato de a 2, porque facilita la asimilación de contenidos.

La demo de la plantilla de 2 columnas:

http://www.webdezign.co.uk/blog/html5-examples/2col/

La descarga de la plantilla HTML5  a dos columnas:

http://www.webdezign.co.uk/blog/html5-examples/2col.zip

La demo de la plantilla de 3 columnas:

http://www.webdezign.co.uk/blog/html5-examples/3col/

La descarga de la plantilla HTML5 a 3 columnas:

http://www.webdezign.co.uk/blog/html5-examples/3col.zip

Páginas relacionadas con este artículo:

1. Recursos en HTML5 y CSS3
2. El aporte que HTML5 representa a los desarrolladores web
3. Compatibilidad del HTML5 entre navegadores

http://www.literacy-ink.com/

El servicio que proporciona Literacy Ink es un servicio de revisión para websites que quieran reforzar su mensaje comercial, es decir enamorar desde los textos.

Este servicio no es nuevo pero lo que si destaca es ver su firma al pie, cosa que podría determinar en un auge de este tipo de empresas, así que webmasters con tinta en vena y escritores comerciales del mundo os lanzo una idea para un nuevo servicio podeis incorporar en vuestra cartera de servicios web.

Servicio de revisión de estilo comercial

Nosotros lo vamos a incorporar en http://www.deDavid.com

Páginas relacionadas con este artículo:

1. Optimizar servidor MySQL
2. Representar teclas del teclado
3. Estructuras redimensionables para iPhone