Total XHTML 1.0

Publicado por Juanjo el 5 de Junio, 2009  |  4 comentarios

Acabo de escribir y validar casi 600 líneas de código, en un único archivo XHTML, que contiene una enorme y completa colección de todos los elementos existentes en el lenguaje.

Sólo faltaría un mapa de imágenes, y algunos frames, que debido a su escaso uso en la práctica, he decidido tan sólo nombrarlos aquí.

Se ha creado con la idea de servir como plantilla universal, para el ejercicio de I+D en CSS. Por lo tanto, todo el contenido expuesto carece de relevancia y es mostrado en el archivo, sólo a modo de ejemplo.

Personalmente, lo voy a usar como lienzo para crear el CSS Base propio más completo que pueda existir ;-) Lo publico por si otro/a se anima con lo mismo ;-) Ahora mismo tiene anidado nuestro propio CSS Reset

Os aseguro que está absolutamente todo lo que existe en XHTML, a falta de los mapas de imágenes y frames, así que quizá también pueda servir a más de un estudiante, a modo de simple ejemplario.

En cualquier caso, para que cada uno haga lo que quiera con ello, lo que colgado aquí:

• Total XHTML 1.0

Un saludo. Espero que les guste.

Total Reset CSS v1.0

Publicado por Juanjo el 1 de Junio, 2009  |  3 comentarios

Hace tiempo publicamos nuestro propio Reset CSS, y debido a la gran fama que ha cogido desde entonces en nuestro Blog, hemos decidido seguir desarrollando el concepto.

Hicimos un Reset CSS que ponía todo por defecto, como bien nos recomienda la W3C, pero algunas personas necesitan y esperan, algo más que sólo eso de un Reset CSS.

Normalmente me refiero a personas que ya tienen un determinado nivel de CSS, y quieren “resetear” ellos más a su gusto, y por lo tanto necesitan un “reseteo inicial” más profundo, más radical, más allá de lo que la W3C les recomienda, yo lo he llamado: Total Reset CSS v1.0.

Mientras el Reset original lo resetea todo por Defecto, el Total Reset CSS v1.0 va más allá de eso, y lo resetea todo a cero absoluto, y por lo tanto, requiere inevitablemente de un diseñador web experimentado, que puntualice posteriormente cada uno de los atributos de estilo a su gusto. Eso sí, con la tranquilidad de que no le molestará ningún atributo puesto anteriormente por defecto :-)

El código del Total Reset:

{code type=CSS}

/*

Total Reset CSS v1.0/06/2009

By Objetivo Creativo

http://www.objetivocreativo.com

*/

* {

margin: 0;

padding: 0;

outline: 0;

border: 0;

display: inline;

vertical-align: baseline;

background: transparent;

color: black;

font: normal 1em/1.2 Helvetica, Arial, sans-serif;

text-align: left;

text-decoration: none;

text-indent: 0;

line-height: normal;

letter-spacing: normal;

white-space: normal;

}

:focus { outline: none; }

{/code}

• Lo he colgado aquí

P.D: Se puede usar sólo, o en combinación con el Reset original. Eso sí, en caso de usarlo en combinación, acordaros de cargar el “Total Reset” en segundo lugar…

Hasta la próxima ;)

Historia del Favicon compatible

Publicado por Juanjo el 30 de Abril, 2009  |  No hay comentarios

Poner un favicon en tu página web parece, hoy en día, como algo obligatorio en nuestras vidas, o al menos eso nos quieren hacer creer los gurús de la accesibilidad al recordárnoslo una y otra vez en sus libros y publicaciones…

Bien, seguro que a estas alturas, ya todo el mundo sabe lo que es un favicon ¿No? Y le ha quedado bastante claro qué tan importante es para nosotros. ¿No? Bueno, este blog todavía no tiene, pero tendrá, es que aún no he tenido tiempo de pararme mucho a diseñar los detalles del diseño :P

En fin, favicones… sí, sí… pero y ¿Cómo se hace? Genial! Nos ponemos a buscar en el Google cómo se hace para poner un favicon y nos encontrarnos con miles de soluciones mediocres al más puro estilo de Microsoft xD Es decir, que funcionan parcialmente :D

Me explico, esto de los favicons, como muchas otras cosas, fue originalmente idea de Microsoft. Ya saben Uds. que Microsoft tiene muchas ideas, pero que pocas funcionan bien. He aquí otro bonito ejemplo para la colección :-)

La idea en sí es buena, claro que sí, pero al principio la idea sólo funcionaba en navegadores de Internet Explorer. Claro, si la idea es nuestra, pues sólo para nosotros y para nadie más… (Si quieren entender la política de ventas de Microsoft, haber cogido apuntes en la asignatura del recreo, el gordo matón que te quitaba el bocata era un aplicado, y potencial Bill Gates, de la materia)

Con el tiempo, Apple conocido como “el guay”, cogió apuntes de la mala influencia e implementó su favicon en el Safari del Iphone. Por supuesto, implementó un favicon que sólo y únicamente funcionaba con su software privativo.

Mozilla y otros, conocidos como el grupo de los buenos (y de verdad), que son la mayoría… LLamaron al profesor de guardia en el recreo y le contaron lo que pasaba… El profesor se llamaba W3C.

-¡W3C! ¿Estás ahí? -preguntó Mozilla, en nombre de todos los afectados- Mira, es que el Matón y el Guay se han inventado eso, y no nos dejan a nosotros jugar con ello ;’(…

-¡No hay problema! -respondió con autoridad el profesor W3C- A partir de ahora para usar un favicon lo hareis TODOS de la misma forma, y se acabó -Concluyó reuniendo a toda la clase, y mostrando lo que debíamos hacer todos.

Al salir, ni Dios le hizo caso, ni si quiera el matón de Bill Gates, que era hijo del profesor. (Microsoft es miembro de la W3C, sí, lo sé, repugnante)

Mozilla y sus amigos hicieron caso del profesor, pero como fueron los únicos, al final también se inventaron su propia implementación, en contra de la voluntad del profesor, para no ser menos que los demás… :S

¿Resultado final? Quieres poner un favicon en tu página web, y te ayudas de Google para saber cómo se hace, y la mayoría de sitios que vas a encontrar son explicaciones de cómo se hace un favicon compatible sólo con Internet Explorer, o sólo con Safari, o sólo con Mozilla, o muchos foros donde se queja la gente de que no les funciona el favicon.

Y si eres de los pocos que ha tenido suerte buscando en Google sobre cómo se pone un favicon, y has encontrado esta página, podrás poner un favicon compatible con todos los navegadores posibles, Mozilla, Safari, Iphone, Internet Explorer, etc… usando el siguiente código XHTML crossbrowser :)

<link rel=”shortcut icon” href=”favicon.ico” type=”image/vnd.microsoft.icon” />

<link rel=”icon” href=”img/favicon.png” type=”image/png” />

<link rel=”apple-touch-icon” href=”img/apple-touch-icon.png” type=”image/png” />

NOTA: El .PNG tiene que ser una imagen de 16×16px o de 32×32px. El .ICO tiene que ser un icono de Windows también de 16×16px o 32×32px, llamarse favicon y estar obligatoriamente en el directorio raiz. El favicon que se usará en el Safari del Iphone (apple-touch-icon.png) tiene que ser de 32×32px. Ah, se me olvidaba, el código XHTML tiene que ir dentro del header, es decir, entre <head> y </head>.

NOTA2: A través de Google, lo que sí encontraréis son muchos y útiles generadores de favicons, que hacen la imagen de las dimensiones adecuadas. Para los que quieran saber lo que dijo el profesor: 

http://www.w3.org/2005/10/howto-favicon

Cómo hacer más rápida tu página web

Publicado por Juanjo el 27 de Marzo, 2009  |  No hay comentarios

…A través de la optimización de la carga de imágenes con Sprites de CSS.

Por cierto, cada día nos visita más gente, y ya hemos llegado a un millar de páginas vistas con tan sólo un mes y medio On-Line! Y al ritmo que vamos ahora mismo, seguiremos haciendo un millar nuevo casi con cada semana… :) Gracias a todos los que vienen desde Google, los que empiezan a visitarnos regularmente ahora, etc. Sin vuestras visitas no habría sentido ninguno para el Blog! Gracias.

En las páginas web profesionales se suele dedicar mucho tiempo a optimizar la carga de las páginas. La gente quiere navegar por Internet teniendo una buena experiencia. Si al cargar la página web, un visitante tiene que esperar 2 o 3 segundos a que se acabe de cargar la página, el visitante no está teniendo una buena experiencia. De manera que es muy importante este aspecto, y hoy vamos a ver una de las mejores técnicas que podemos usar para hacer una página web más rápida, los Sprites de CSS.

Al grano, como muchos todavía no saben lo que es un Sprite:

Sprite: Consiste en un sólo archivo de mapa de bits, que contiene todo lo que sale por la pantalla. Para controlar la salida se proporcionan diferentes coordenadas X e Y en el mapa de bits. Se usaba mucho antiguamente para la programación de videojuegos 2D tipo MarioBros  ^^ Toda la pantalla solía ser una sóla imagen estática, pero se mostraba diferentes puntos de X o Y a cada momento creando ese efecto 2D típico ¡Qué recuerdos! Los sprites :)

Ejemplo

¡Sorpresa! No sólo vais a aprender a usar Sprites en CSS sino que además os voy a regalar una estupénda colección de iconos web para vuestros pies de página! Recién diseñados por Objetivo Creativo! En total son una colección de 13 bonitos iconos que reservaba para la futura web de Objetivo Creativo, y ahora los estoy aprovechando para hacer este tutorial, y que vosotros también podéis usar a partir de ahora :) Por supuesto, licencia Creative Commons By, podéis usarlos libremente siempre que quede claro que nosotros somos los autores.

Bien, lo primero que tenemos que hacer es coger los 13 iconos y juntarlos todos en una sola imagen, además quiero crear otro par de iconos para hacer rollovers, en total serán 26 iconos. Tengo 10 con unas medidas de 266×46px y otros 3 con unas medidas de 156×46… Los voy a disponer todos unos debajo de otros, y las versiones del rollover las voy a poner al lado de cada original. De manera que: 13 iconos por 46px de alto cada uno son 598px. Para el ancho debería ser 266, pero como he dicho que quería disponer lateralmente las versiones del rollover, será el doble, 532px.

Lo habéis adivinado, ahora tenemos que hacer un archivo nuevo de 532×598px! :-) Yo he ido importando en Fireworks cada icono a mi lienzo de 532×598px y ubicándolos con el panel de propiedades en x=0, y=0 | x=0, y=46 | x=0, y=92 (+46)| x=0, y=138 (+46) etc… Hasta colocar los 13 iconos…

Luego he seleccionado todo, y he hecho una copia de los 13 iconos originales, en la coordenada x=266 que es el ancho de cada icono. A esa copia, les he añadido algo de brillo, perfilado un poco mejor, y cambiado ligeramente los matices de color :) El resultado final, es la imagen de a continuación:

¿Qué tal? ¿Os gusta? Están todos en la misma imagen, es justo lo que queríamos… Si lo hemos hecho bien, el pixel más superior e izquierdo de, por ejemplo el tercer icono original, debería estar en la coordenada: x=0, y=92px y su versión un poco más iluminada y perfilada en la coordenada: x=256, y=92px Espero haberme explicado con claridad cómo llegar hasta aquí :)

Ahora un poco de código CSS:

{code type=CSS}

#fi { width: 815px; margin: 0 auto; }
#fi_sprite_acn, #fi_sprite_acr, #fi_sprite_adm,
#fi_sprite_apd, #fi_sprite_aso, #fi_sprite_cll,
#fi_sprite_doc, #fi_sprite_lcc, #fi_sprite_omb,
#fi_sprite_ouf { width: 266px; height: 46px; background: url(“../img/footersicons.png”) top left no-repeat; display: table-cell }

#fi_sprite_xht, #fi_sprite_css,
#fi_sprite_wai { width: 156px; height: 46px; background: url(“../img/footersicons.png”) top left no-repeat; display: inline-table }

#fi_sprite_aso { background-position: 0 0; }
#fi_sprite_acn { background-position: 0 -46px; }
#fi_sprite_acr { background-position: 0 -92px; }
#fi_sprite_adm { background-position: 0 -138px; }
#fi_sprite_apd { background-position: 0 -184px; }
#fi_sprite_omb { background-position: 0 -230px; }
#fi_sprite_ouf { background-position: 0 -276px; }
#fi_sprite_doc { background-position: 0 -322px; }
#fi_sprite_lcc { background-position: 0 -368px; }
#fi_sprite_cll { background-position: 0 -414px; }
#fi_sprite_xht { background-position: 0 -460px; }
#fi_sprite_css { background-position: 0 -506px; }
#fi_sprite_wai { background-position: 0 -552px; }

#fi_sprite_aso:hover { background-position: -266px 0; }
#fi_sprite_acn:hover { background-position: -266px -46px; }
#fi_sprite_acr:hover { background-position: -266px -92px; }
#fi_sprite_adm:hover { background-position: -266px -138px; }
#fi_sprite_apd:hover { background-position: -266px -184px; }
#fi_sprite_omb:hover { background-position: -266px -230px; }
#fi_sprite_ouf:hover { background-position: -266px -276px; }
#fi_sprite_doc:hover { background-position: -266px -322px; }
#fi_sprite_lcc:hover { background-position: -266px -368px; }
#fi_sprite_cll:hover { background-position: -266px -414px; }
#fi_sprite_xht:hover { background-position: -266px -460px; }
#fi_sprite_css:hover { background-position: -266px -506px; }
#fi_sprite_wai:hover { background-position: -266px -552px; }

{/code}

Lo primero es cargar la imagen anterior en un contenedor… Después definir los huecos visibles, y a continuación… ir dando las coordenadas X e Y, de la posición de cada icono con la propiedad background-position :) La razón por la cual hay que poner un menos delante, es que esa propiedad no se pensó en un principio para hacer Sprites, sino para ubicar una imagen dentro de un fondo de determinado, pero nosotros le hemos dado un nuevo uso a esa propiedad, y con el menos delante, ahora nos sirve para hacer Sprites ^^

Lo siguiente es poner el código XHTML

{code type=HTML}

<div id=”fi”><!– FOOTERSICONS!! –>

<!– First line of footersicons –>
<div id=”fi_sprite_aso”></div>
<div id=”fi_sprite_xht”></div>
<div id=”fi_sprite_css”></div>
<div id=”fi_sprite_wai”></div>

<!– Second line of footersicons –>
<div id=”fi_sprite_acn”></div>
<div id=”fi_sprite_apd”></div>
<div id=”fi_sprite_doc”></div>

<!– Third line of footersicons –>
<div id=”fi_sprite_acr”></div>
<div id=”fi_sprite_omb”></div>
<div id=”fi_sprite_lcc”></div>

<!– Fourth line of footersicons –>
<div id=”fi_sprite_adm”></div>
<div id=”fi_sprite_ouf”></div>
<div id=”fi_sprite_cll”></div>

</div><!– /FOOTERSICONS!! –>
{/code}

Creo que con esto no tengo que nada más que decir. No sé si será suficiente para dar por explicado el uso de Sprites en CSS. De todas formas, os recuerdo que todavía puedo responder cualquier posible duda en los comentarios!! :)

Por último voy a recordaros también que con el uso de Sprites se ahorra mucho tiempo de carga en las páginas, con el ejemplo anterior, nos hemos ahorrado la petición de carga de la nada despreciable, cifra de 25 imágenes. Eso son unos cuantos segundos ganados :) Por otro lado, también se matan dos pájaros de un tiro, y se elimina el famoso parpadeo de los rollovers hechos con la pseudo-clase :Hover…

Al pasar el ratón por encima de cada imagen, no se tiene que esperar a que cargue la nueva imagen de cada rollover, por que si una está cargada, ya lo estarán todas las demás también. Es decir, Adiós al molesto parpadeo de los :Hover

Personalmente el uso de Sprites es algo más elaborado de lo normal en una página web, la mayoría de las veces no merecerá la pena trabajar tanto, pero sí lo suelen hacer sobretodo grandes empresas como Yahoo, Youtube, etc. para las cuales esos 2 o 3 segundos optimizados en la carga de sus webs, es toda una ganancia transformada en dinero, dado el número de visitas que ellos manejan. Una página web de máxima calidad profesional usará Sprites siempre que pueda.

Como primera impresión podrá ser igual que otra página web cualquiera que no use Sprites, pero en realidad si usas Sprites su calidad será muy superior. En el diseño web, casi siempre son los detalles que no se pueden ver, los que marcan la diferencia entre una buena web profesional y otra cualquiera que puede hacer la mayoría!

Un saludo, y hasta la próxima! ;) Por cierto, dejad en los comentarios vuestras dudas, quejas, y/o agradecimientos. Será un placer aprender de vuestras opiniones ^^

Versión final: Reset CSS v2.1

Publicado por Juanjo el 25 de Marzo, 2009  |  26 comentarios

Artículo modificado por  actualización del día 8 de junio de 2009: Actualización del Reset CSS a la versión 2.1. (Estable)

Si quereis verlo en pleno funcionamiento, hemos creado un archivo que contiene todos los elementos HTML que existen y son susceptibles de ser diseñados y luego le hemos colocado nuestro Reset CSS. Funciona genial.

Total XHTML con Reset CSS

Volvemos al día siguiente con una nueva y mejor versión del Reset CSS que propusimos ayer (*artículo suprimido), la verdad es que el de ayer era sólo un boceto. Deberíais saber que nos hemos metido bastante de lleno en el proyecto de crear nuestro propio Reset CSS, y dedicando bastantes horas de trabajo, casi hasta el nivel de la obsesión por el perfeccionismo en el código. Pero creo que el resultado ahora sí ha merecido la pena, y después de muchas horas, unas cuantas pruebas, y retoques por aquí y por allá, declaramos la versión v1.1 v2.1 de nuestro Reset CSS, como versión final y estable. El resultado final… El mejor Reset CSS y más elaborado que puedas haber visto antes; los de Meyer, YUI, etc. no cubren bastantes aspectos importantes, que a nuestro parecer, deben ser reiniciados también por defecto y bien, como debe ser.

La diferencia fundamental de nuestro Reset CSS con otros, son básicamente dos:

1. El nuestro se fundamenta estrictamente con recomendaciones de la W3C. Otros restauran los valores de una manera muy personal o privada, haciendo que su resultado final al aplicarlo en una web sea, en muchos casos, demasiado diferente con y sin el uso del CSS Reset. Sin embargo, con el uso de nuestro CSS Reset, sus webs casi no cambiaran en absoluto si usa Firefox, Opera, etc. ya que está basado íntegro en recomendaciones para los valores por defecto de la W3C como las que respetan también dichos navegadores. La verdadera funcionalidad de nuestro Reset CSS se verá cuando se muestre las páginas web con navegadores “rebeldes” que no respetan bien las normas. Es ahí donde nuestro Reset CSS ayudará a que sus páginas web se vean siempre igual. Un Reset CSS es eso, un reinicio de todos los valores por defecto, y nosotros nos hemos ceñido a esa definición exacta para crear el nuestro. Por ejemplo. <Body> tiene un margen por defecto en todos los navegadores, la mayoría de reinicios lo quitan, pues nosotros no lo hemos quitado, sólo nos hemos asegurado de que ese margen vaya a estar siempre y a la misma medida tal y como la W3C lo recomienda.
2. Es el más completo. La mayoría de reinicios opta por un reinicio simple y casi siempre suficiente, pero en algunos casos es necesario dejar las cosas más detalladas y en profundidad. Nuestro Reset CSS es todo-terreno, cubre TODOS los aspectos del XHTML 1.0/CSS 2.1 que hay en la especificación oficial actual, sin dejarse ni uno sólo de todos atributos y/o etiquetas que existen y que pueden redefinirse por defecto.

Os hacemos una lista de algunas de las características que tiene:

• Valida por la W3C como CSS 2.1
• Adaptación para medios impresos
• Adaptación para medios de audio (Personas discapacitadas)
• Adaptación para lectores de Braille (Personas discapacitadas)
• Adaptación para lectores móviles, y pantallas especiales
• Adaptación a medidas proporcionales, no se usan Pixels en ningún sitio.
• Uso del sistema ISO10646 para caracteres especiales
• Sistema de comillado bilingüe, español/inglés para Blockquote
• Por supuesto, Licencia Creative Commons By.
  
• Lo mejor será que vosotros mismos lo vean y prueben ;-)

Manual de uso fácil en 4 pasos:

1. Haz click con el botón derecho aquí, y selecciona guardar destino cómo…

2. Guarda el archivo reset.css que te has descargado, en el directorio raiz de tu web

3. Añade la siguiente línea a tus archivos *.html, *.htm. entre las etiquetas <head> y </head>, y antes de enlazar cualquier otra hoja de estilos:

<link rel=”stylesheet” type=”text/css” href=”reset.css” />

4. Disfruta de tu página web un poco más compatible! ;)

Manual de uso fácil en sólo 2 pasos, aún más fácil:

1. Añade la siguiente línea a tus archivos *.html, *.htm. entre las etiquetas <head> y </head> y antes de enlazar cualquier otra hoja de estilos:

<link rel=”stylesheet” type=”text/css” href=”http://www.objetivocreativo.com/reset.css” />

2. Disfruta de tu página web un poco más compatible, y encima un poco más fácil! ;)

P.D.: Más adelante comentaremos el código y haremos una versión minimal. Ahora necesitamos saber qué os parece, opiniones, y si alguien descubre algún fallo o quiere proponer alguna mejora al código presente, por favor, que la reporte… Por supuesto, cualquier duda será respondida. Por otro lado, si os gusta, no veis ningún error, y os parece todo perfecto, también podéis dejarnos un comentario para darnos las gracias :P

{code type=CSS}

/*

Reset CSS v2.1/06/2009

By Objetivo Creativo

http://www.objetivocreativo.com

*/

a, abbr, acronym, address, area,

b, base, big, blockquote, body,

br, caption, cite, code, col,

colgroup, dd, del, dfn, div,

dl, dt, em, form, frame,

frameset, h1, h2, h3, h4, h5,

h6, body, hr, html, i, iframe,

img, ins, kbd, label,

li, link, map, noframes,

noscript, object, ol, optgroup,

option, p, pre, q, samp, script,

small, span, strong, style, sub,

sup, table, tbody, td, tfoot, th,

thead, title, tr, tt, ul, var {

margin: 0;

padding: 0;

border: 0;

outline: none;

background: transparent;

font: 1em/1.2 Helvetica, Arial, sans-serif;

text-transform: none;

word-spacing: normal;

letter-spacing: normal;

direction: ltr;

text-align: left;

text-decoration: none;

text-indent: 0;

unicode-bidi: normal;

position: static;

top: auto;

right: auto;

bottom: auto;

left: auto;

clear: none;

clip: auto;

display: inline;

overflow: visible;

visibility: visible;

white-space: normal;

z-index: auto;

cursor: auto;

vertical-align: baseline;

}

html, address,

blockquote,

body, dd, div,

dl, dt, fieldset, form,

frame, frameset,

h1, h2, h3, h4,

h5, h6, noframes,

ol, p, ul, center,

dir, hr, menu, pre      { display: block; }

li                      { display: list-item; }

head                    { display: none; }

table                   { display: table; }

tr                      { display: table-row; }

thead                   { display: table-header-group; }

tbody                   { display: table-row-group; }

tfoot                   { display: table-footer-group; }

col                     { display: table-column; }

colgroup                { display: table-column-group; }

td, th                  { display: table-cell; }

caption                 { display: table-caption; }

html, body              { background: white; color: black; }

a                       { color: blue; }

th                      { font-weight: bolder; text-align: center; }

caption                 { text-align: center; }

body                    { margin: 0.5em; line-height: 1.12; overflow: scroll; }

h1                      { font-size: 2em; margin: .67em 0; }

h2                      { font-size: 1.5em; margin: .75em 0; }

h3                      { font-size: 1.17em; margin: .83em 0; }

h4                      { font-size: 1em; margin: 1.12em 0; }

h5                      { font-size: .83em; margin: 1.5em 0; }

h6                      { font-size: .75em; margin: 1.67em 0; }

p, blockquote, ul,

fieldset, form,

ol, dl, dir,

cite, q, address,

menu, pre         { margin: 1.12em 0; }

h1, h2, h3, h4,

h5, h6, b,

em, dt, strong    { font-weight: bolder; }

blockquote        { margin-left: 2.5em; margin-right: 2.5em; }

dd, blockquote,

cite, q           { text-indent: 1em; }

i, cite, em,

var, address      { font-style: italic; }

pre, tt, code,

kbd, samp         { font-family: “Courier New”, Courier, monospace; }

pre               { white-space: pre; }

button, textarea,

input, object,

select            { display: inline-block; }

big               { font-size: 1.27em; }

small, sub, sup   { font-size: .83em; }

sub               { vertical-align: sub; }

sup               { vertical-align: super; }

table             { border-collapse: collapse; border-spacing: 0.13em;

caption-side: top; empty-cells: show; table-layout: auto; }

thead, tbody,

tfoot             { vertical-align: middle; }

td, th            { vertical-align: inherit; }

s, strike, del    { text-decoration: line-through; }

hr                { border: 0.06em inset; }

ol, ul, dir,

menu, dd          { margin-left: 2.5em; }

ul, ol            { list-style-position: outside; }

ol                { list-style-type: decimal; }

ul                { list-style-type: disc; }

ol ul, ul ol,

ul ul, ol ol      { margin-top: 0; margin-bottom: 0; }

u, ins            { text-decoration: underline; }

center            { text-align: center; }

abbr, acronym     { font-variant: small-caps; letter-spacing: 0.1em; }

fieldset {

border: 0.15em gray ridge;

margin: 0.7em;

padding: 0.7em;

}

optgroup, option {

display: block;

background: white;

color: black;

}

optgroup    { font-weight: bold; }

option      { text-indent: 2em; }

textarea    { overflow: auto; }

br:before         { content: “\A”; }

:before, :after   { white-space: pre-line; }

a:link, a:link > img, a:hover,

a:hover > img, a:active, a:active > img,

a:visited, a:visited > img { cursor: pointer; border: none; }

a:link, a:visited                   { text-decoration: underline; }

a:hover                             { text-decoration: none; }

a:active, a:active > img            { outline: thin dotted invert; }

a:visited                           { color: purple; }

blockquote, cite, q                 { quotes: “\00AB” “\00BB” “\0022″ “\0022″; }

blockquote:lang(en), cite:lang(en), q:lang(en) { quotes: “\0022″ “\0022″ “\0027″ “\0027″; }

blockquote:lang(es), cite:lang(es), q:lang(es) { quotes: “\00AB” “\00BB” “\0022″ “\0022″; }

blockquote:before, cite:before, q:before { content: open-quote; }

blockquote:after, cite:after, q:after    { content: close-quote; }

BDO[DIR="ltr"]    { direction: ltr; unicode-bidi: bidi-override; }

BDO[DIR="rtl"]    { direction: rtl; unicode-bidi: bidi-override; }

*[DIR="ltr"]      { direction: ltr; unicode-bidi: embed; }

*[DIR="rtl"]      { direction: rtl; unicode-bidi: embed; }

@media print {

* {

font-family: “Times New Roman”, Times, serif;

orphans: 2;

widows: 2;

page-break-before: auto;

page-break-after: auto;

page-break-inside: auto;

}

a                 { color: black; }

h1                { page-break-before: always; }

h1, h2, h3,

h4, h5, h6        { font-family: Helvetica, Arial, sans-serif; page-break-after: avoid; }

ul, ol, dl        { page-break-before: avoid; }

}

@media aural {

* {

volume: medium;

speech-rate: medium;

voice-family: female;

pause: 0ms;

pitch: medium;

pitch-range: 50;

stress: 50;

richness: 50;

speak-punctuation: none;

speak-numeral: continuous;

speak-header: once;

}

h1, h2, h3,

h4, h5, h6              { voice-family: paul, male; stress: 20; richness: 90; }

h1                      { pitch: x-low; pitch-range: 90; }

h2                      { pitch: x-low; pitch-range: 89; }

h3                      { pitch: low; pitch-range: 70; }

h4                      { pitch: medium; pitch-range: 60; }

h5                      { pitch: medium; pitch-range: 50; }

h6                      { pitch: medium; pitch-range: 40; }

li, dt, dd              { pitch: medium; richness: 60; }

dt                      { stress: 80 }

pre, code, tt           { pitch: medium; pitch-range: 0; stress: 0; richness: 80; }

em                      { pitch: medium; pitch-range: 60; stress: 60; richness: 50; }

strong                  { pitch: medium; pitch-range: 60; stress: 90; richness: 90; }

dfn                     { pitch: high; pitch-range: 60; stress: 60; }

s, strike               { richness: 0; }

i                       { pitch: medium; pitch-range: 60; stress: 60; richness: 50; }

b                       { pitch: medium; pitch-range: 60; stress: 90; richness: 90; }

u                       { richness: 0; }

a:link                  { voice-family: harry, male; }

a:visited               { voice-family: betty, female; }

a:active                { voice-family: betty, female; pitch-range: 80; pitch: x-high; }

}

@media braille {

h1, h2, h3,

h4, h5, h6 { text-align: right; background: white; color: black; }

}

{/code}

La belleza está en los detalles

Publicado por Juanjo el 16 de Marzo, 2009  |  No hay comentarios

En relación al título del artículo de hoy…

…No, no me he vuelto poeta, ni tengo un día romántico… Sólo he dicho una verdad como una casa de grande :) Y tan cierto como si bajara ahora mismo Dios del cielo y lo dijera, lo digo yo: la belleza está en los detalles.

Y es así de cierto. Hace un tiempo me sorprendí en el escaparate de una tienda de Ikea, viendo unos pequeños peluches caninos, que se movían imitando la respiración de un perro real, me parecieron verdaderas obras de arte de la decoración, me parecieron realmente bellos. Hace más tiempo aún, vi otros peluches caninos que eran mucho más grandes y caros en una tienda de Toys’R'Us, algunos ladraban estrepitosamente, otros incluso simulaban miccionar, pero en ningún caso los consideré obra de arte a ninguno de estos últimos, tan sólo simples juguetes. Eso sí, los últimos que he descrito eran más complicados e incluían mayores tecnologías, por supuesto.

¿A qué viene todo esto? Intento demostrar algo simple: La belleza está en los detalles. Los detalles simples y sutiles… Y a la hora de diseñar páginas web en Internet, no iba a ser diferente. En este mundo muchos quieren demostrar lo buenos diseñadores que son, y hacen, por ejemplo, complicadas animaciones en Flash para sus páginas web, que pocas veces acaban mereciendo la pena ser vistas. Otros llenan la página web de Widgets inútiles que sólo sirven para hacer que una página web tarde más en cargar. Por ejemplo, con contadores de visitas, o de usuarios On-Line, cosas que a casi nadie le importan :) ¿Por qué se siguen usando?

Cuando Google comenzó su andadura, ya existía Yahoo, ya existía Terra, etc. Pero Google fue el único que quiso que su página web fuera, simplemente, un buscador. Si alguien quería otra cosa, por ejemplo, leer noticias, ya iría a otro sitio… ¿Resultado? Google machacó literalmente a la competencia. Lo simple es lo mejor.

Al poco de empezar su negocio, Google ganó millones de euros y no los gastó en hacer su página web más complicada, nada de eso. Los gastó en cuidar pequeños detalles. Sí, así es, millones de euros sólo para pulir pequeños detalles. El resultado fue un buscador bellísimo que hoy en día tiene casi toda la cuota de mercado en Internet.

Hay diseñadores que no quieren gastar 5 o 10 minutos de su valioso tiempo en crear un simple Favicon de 16×16px para su página web, -Es algo que casi  no se aprecia, algo tan minúsculo que casi nadie lo apreciará, hagamos otra cosa. -Dicen algunos-. Sin embargo, supongo que desconocen la existencia de diversos estudios actuales, que afirman el hecho evidente de que tener un simple Favicon en una web, es algo muy importante, ya que aumenta la confianza de muchos visitantes. Muchos diseñadores pensarán -¡Qué chorrada! ¿Y eso en qué se basa?

Simple, se basa en la existencia de determinado grupo de personas que acostumbran a fijarse únicamente en los detalles de una web empresarial, para comprobar así el nivel de calidad que tiene el diseño de su web, y de esa manera determinar si el negocio al que representa es de fiar o no.

La gente siempre cree que un negocio con una página web cuidada en detalles, es un negocio de mayor confianza. Hoy en día cualquiera puede montarse una página web cutrecilla y fingir ser una gran empresa, es lógico pensar que la gente empiece a observar más los detalles que tienen las páginas web, para así determinar si son de fiar o no.

-¡Aibá! ¡Lo que puede hacer un Favicon entonces! ¿No?… -Pensará más de uno ahora :)

Bueno, después del sermón que va dirigido especialmente a los diseñadores que intentan alucinar con animaciones en Flash y/o miles de utilidades inútiles que sobrecargan las páginas web, os dejo una ayudita para ir ensayando el arte de la belleza de los detalles sutiles en Internet. Espero que os sirva de guía..

Nota: Este Blog no es un ejemplo, advierto que el diseño de nuestro Blog, es un diseño provisional… xD

Ideas!

• Usa degradados monocromáticos en lugar de colores planos. Es decir, de azul oscuro a otro azul oscuro, pero no tan oscuro, recuerda que se trata de hacer detalles sutiles.
• Usa transparencias, focos, reflejos, y sombras. Imitar a la luz natural hace más atractivos y agradables a los diseños
• Si puedes decir lo mismo con la mitad de palabras, empieza a resumir todo ahora mismo.
• Usa listas, párrafos, realza lo importante, y ordena las cosas.
• Usa <abbr>, <acronym>, <dfn>, etc..
• Usa bullets, arrows, etc. Link: *Colección de Bullets*
• Usa iconos contextuales. Link: *Colección de iconos* / *Dryicons* / *Veryicon*
  
• Pon un Favicon en tu vida. Link: *Crear un Favicon On-Line*
• Cuida las tipografías. Link: *Font Tester*
• Si quieres dar una sensación amigable, redondea las esquinas de las cajas… Link: *Esquinas redondeadas con JS*
• En materia de detalles, podría seguir y seguir, pero creo que ya expliqué más o menos la idea que quería transmitir… ¿A que sí? :-)

P.D: Buena suerte, y a crear diseños bellos!

Subvencion para la modernización de pymes asturianas

Publicado por Juanjo el 10 de Marzo, 2009  |  No hay comentarios

Hace poco presentabamos ayudas para la realización de una página web a autónomos de Asturias, ahora también las pymes podrán beneficiarse de algo similar. Parece que las empresas asturianas están de suerte. Y es que la crisis económica y las ayudas para las empresas parecen ir de la mano aquí en Asturias, ya que es la tercera subvención que presentamos aquí en menos de un mes.

Ésta vez por parte de la Consejería de Industria y Empleo del Gobierno del Principado de Asturias, se abre convocatoria para: Subvenciones para la modernización del pequeño y mediano comercio

Se podrá subvencionar dos cosas:

1. Renovación de la imagen del establecimiento comercial
   
2. Incorporación de nuevas tecnologías de la información a la gestión del establecimiento comercial

• Para la renovación de la imagen habrá que invertir un mínimo de 6000€ siendo subvencionable hasta un 50% de la inversión.
• Para el segundo punto habrá que invertir un mínimo de 1200€ siendo subvencionable también hasta un 50% de la inversión.
• La subvención queda vigente hasta el día 31/05/2009

Aunque la subvención abarca muchas cosas, en lo que respecta a nosotros, Objetivo Creativo podrá realizarle trabajos subvencionables para el diseño de rotulos, vinilos, marquesinas y toldos exteriores. También podremos incorporar las nuevas tecnologías de la información a su negocio, mediante la realización de una página web.

Su página web podría salirle por 600€ en total. Si escoge realizar una página web simple y presencial, para adecuar el trabajo a la cantidad de dinero percibida, Objetivo Creativo dará un servicio de mantenimiento grauito durante los 3 años siguientes a la realización de la web con esta subvención.

Si desea aprovechar esta oportunidad, preguntar o pedirnos presupuesto, puede llamarnos al teléfono 630491868

Si desea conocer datos oficiales acuda a la siguiente página:

• Datos oficiales en la página del Principado de Asturias
  

Manual de uso – El blog de la empresa

Publicado por Juanjo el 9 de Marzo, 2009  |  No hay comentarios

Os quiero presentar un fantástico documento editorial escrito por la empresa de Alorza. Se trata del recurso de mayor calidad que he llegado a encontrar en Internet, respecto a la creación de blogs corporativos y en castellano, en mucho tiempo.

Un libro gratuito en formato .PDF liberado bajo una licencia de Creative Commons que habla de la importancia que tiene para las empresas tener un blog corporativo, por qué tenerlo, cómo hacerlo, e incluso habla de las diferentes ventajas derivadas, como la posibilidad de hacer estudios de marketing mediante la escucha de la red, etc. En definitiva, si tienes o vas a tener un blog para tu empresa, según mi opinión, es un libro de obligada lectura :)

–>> Su descarga en .PDF está disponible aquí <<–

Usabilidad – Los 10 mandamientos

Publicado por Juanjo el 7 de Marzo, 2009  |  Un comentario

Después de leer muchos libros sobre usabilidad web, seguir muchas webs que hablan sobre el tema de la usabilidad, etc. He llegado a la conclusión de que al final, todo se puede resumir a 10 simples reglas. Todo lo demás, son sólo consejos y técnicas que se basan o derivan en los principios básicos de a continuación.

He pensado que podía ser interesante reunir todo el conocimiento sobre la usabilidad web en 10 simples conceptos. Evidentemente, hay mucho más que decir sobre usabilidad, pero para quien no se quiera especializar demasiado, creo que el siguiente decálogo le será más que suficiente a la mayoría.

1. Aprovecha el tiempo.
   
2. Se claro, simple y breve
   
3. Controla los errores
4. Se organizado y ordenado
5. Usa Feedback
6. No pongas nada importante a más de un click de distancia
7. Enseña sólo lo que quieren ver
8. Diseña para el mundo como lo harías para tu abuela
9. Recuerda a tus visitantes cómo se navega, no les aprendas
10. Alegra la vista de tus visitantes, sin distraerles.

1. Aprovecha el tiempo

En Internet el tiempo es oro más que en cualquier otro sitio. Una mirada, de 3 segundos por página, debería ser suficiente para saber si lo que buscamos está ahí.

2. Se claro, simple y breve

Lo simple es más fácil de usar. Imagina constantemente que tu web es para que la use un niño de 5 años. Si la puede usar tu abuela, también vas bien :)

3. Controla los errores

Somos seres humanos y nos equivocamos, así que; Comprueba que tus visitantes han llegado a un sitio que quieren, y si no, ayúdales a salir a otro lugar que sí quieran ver.

Piensa siempre que han podido hacer clic en un lugar equivocado.

4. Se organizado y ordenado

Por ejemplo, los textos tienen que estar organizados en secciones, con sus respectivos tí­tulos, y subtítulos. Dentro de cada sección tiene que haber divisiones en párrafos, y dentro de cada párrafo, algún texto más importante resaltado. A la hora de explicar cosas, usar organización por esquemas, listas, índices, etc.

Todos los elementos del diseño han de estar perfectamente medidos y
alineados guardando un orden general.

5. Usa Feedback

En usabilidad, es el conjunto de información que se puede recabar de lo que está pasando, que ayuda a la compresión. Suele estar integrada en el diseño.

Por ejemplo, si un botón al pasar el ratón por encima se resalta, está usando un diseño Feedback para dejar claro que sí es un botón.

Otro ejemplo, en un buscador si además de poner la palabra buscar, añadimos el icono de una lupa, estamos confirmando el hecho. Eso es diseñar usando Feedback

También existe el Feedback negativo, si llegamos a una página “No Encontrada – 404″ y allí aparece una señal de aviso en color rojo. El color rojo ya es un diseño de Feedback negativo, que nos indica que algo ha ido mal.

Ya que todo el mundo sabe que el color rojo suelen ser avisos de que algo ha ido mal, usándolo, estamos añadiendo información al mensaje principal que ayuda a su comprensión.

Para entender mejor lo que es el Feedback, mira la Wikipedia:

• es.wikipedia.org/wiki/Contrarreacción
  

6. No pongas nada importante a más de un click de distancia

¿Cuántas veces un cliente deja de comprar en una empresa, por tardar más de 10 segundos de su valioso tiempo, en encontrar la información de contacto? Muchísimas, evítalo.

7. Enseña sólo lo que quieren ver

Si lo tuyo es una empresa de abogados o psicología, etc. Por favor, deja de alucinar a tus clientes con animaciones Flash.. Lo que más les gustará será el botón de saltar. Los visitantes buscan información, no pasar el rato contigo. Dales lo que buscan y el resto, quédatelo para ti y tus amigos.

8. Diseña para el mundo como lo harías para tu abuela

De las más importantes, piensa que tu diseño tiene que ser tan fácil como para que lo entienda tu abuela, o un niño de 5 años (Dentro de lo que pueda caber) Pero sin dejar de tener presente que cuando haces una web, estás haciendo algo para Internet, es decir, para el mundo. La página web tiene que ser accesible en cualquier navegador, resolución, sistema operativo, y comprensible para la mayor cantidad de público sea posible, sea cual fuere su educación, edad, procedencia, etc.

9. Recuerda a tus vistantes cómo se navega, no les aprendas

Los visitantes ya vienen con una formación adquirida… Saben que arriba suele estar el logotipo de la empresa, que si le haces click se suele ir a la página principal, que los menús de navegación suelen estar a la izquierda, derecha o en una barra superior, también saben que si un texto está en azul y subrayado, seguramente sea un enlace, etc. No te salgas del esquema que sigue todo el mundo, no reinventes la rueda, los visitantes quieren saber cómo navegar por tu sitio antes de conocerlo.

10. Alegra la vista de tus visitantes, sin distraerles

Este último punto, lo he sacado del decálogo de Google. Personalmente yo también he querido añadirlo a mi propio decálogo de usabilidad porque creo que si una página web es visualmente bonita, y agradable, gracias a detalles, que pueden ser; por ejemplo: la modificación del logotipo de Google en fechas claves, ayudará a mantener una asertividad más humana con el visitante, que a su vez, aumentará su atención, y por tanto, su capacidad de usar nuestro sitio.

Otros decálogos relacionados

• El decálogo de Google
• El decálogo de Microsoft

La eterna confusión del Width y Height

Publicado por Juanjo el 5 de Marzo, 2009  |  3 comentarios

“Creo que Heigth es ancho. Entonces Width es alto… Ok

Ah! Pues no funciona… ¿Será al revés? Width ancho, y Heigth el alto… :-)

Pues ni por una, ni por otra… Pfff!! ¿Lo abré escrito bien?“

A ver… ¡Profeee!!!

Hace algún tiempo que doy clases de HTML y CSS, y os aseguro que lo anterior es algo verídico que le ocurre a bastantes personas en sus inicios… Parece una tonteria, pero cualquiera que sea profesor me entenderá. Ya no sé qué hacer para meter algunas cosas tan simples, en las cabezas de la gente.

La eterna confusión del Width y Height