El sitio web de píxeles perfectos

Como profesionales independientes siempre estamos en contacto con sitios webs independientes. Y por lo menos una vez al día alguien quiere un sitio web de “píxeles perfectos”. Estoy seguro de que ustedes tíos y tías que trabajan con diseñadores han escuchado en los meses pasados: “Mira, he instalado el plugin “Píxel Perfecto” para Mozilla y el sitio web que diseñé y el sitio que codificaste no son idénticos”.

Qué quieres?

Me estoy preguntando qué quiere la gente. Es un error pensar que lo que nosotros queremos es lo que todo los demás quieren. Las necesidades del usuario no son las del diseñador (que piensa en el look de la página) o la necesidad del desarrollador (que cargue rápidamente y sea funcional). Qué quiere la gente con la IDEA y el dinero para construir un sitio web de la compañía que lo hará? Saben ellos lo que necesitan?

Por qué la idea del píxel perfecto surgió? Si alguien quiere un sitio web de píxel perfecto, lo quiere perfecto para Mozilla, Internet Explorer, Opera, Chrome o Safari? Para Windows, OSX o Linux? Lo quiere en todos quizás? Las fuentes deben ser renderizadas como las de Adobe Photoshop? Cómo debe lucir la página en dispositivos móviles?

Qué necesitas?

Olvídate de los desarrolladores y diseñadores y de la gente que creen ser ambos. Qué necesita el usuario? Acaso le importa que alguien pase 2 o 3 horas extra solo para hacer de su sitio uno de “píxel perfecto”? Les importa que esas horas extras signifiquen dinero extra invertido en esto? Acaso lo vale?

Y si no, por qué continúo viendo a la gente pedir sitios web de píxeles perfectos? Por qué importa que el alto de la linea no sea perfecto o que la fuente no se vea idéntica en IE y Mozilla? Es ESTO lo que mas importa? Que brille? Le importa a alguien la funcionalidad, la velocidad de carga o la calidad del contenido del sitio web?

Acaso le importa a los usuarios?

La mayoría de ellos escanean rápidamente el sitio web sin notar los detalles, buscan algo en particular que generalmente esta relacionado con el contenido y luego se marchan. Su frustración puede venir desde otras direcciones: la falta de usabilidad o accesibilidad del sitio web, que no cargue lo suficientemente rápido, que el contenido no este relacionado con las necesidades del usuario, que el sitio no este listo para dispositivos móviles, etc.

Así que, a quién le importan los píxeles perdidos?

Tutorial de Fuentes de Google

Google vino con una nueva idea en su lista de juguetes para la web.  Un directorio de fuentes que te permite como desarrollador web incluir algunas fuentes “elegantes” en tus páginas sin esfuerzo.

De qué se trata el Directorio de Fuentes de Google? 

Todas las fuentes en el Directorio de Fuentes de Google están bajo licencia de código abierto, las cuales, te permite usarlas en cualquier sitio web, desde un blog privado hasta un gran sitio comercial. La idea parece ser buena y viene a completar el API de librerías AJAX de Google.

Por ahora sólo hay algunas pocas fuentes disponibles, pero con el tiempo, creo que la lista crecerá.

Hay dos maneras de usar esto en tu sitio. 

La primera es simple y sólo requiere de un fichero CSS obtenido de los servidores de Google como se muestra debajo:

<link rel="stylesheet" type="text/css" 
          href="http://fonts.googleapis.com/css?family=Tangerine">
 
    <style>
      body {
        font-family: 'Tangerine';
        font-size: 48px;
      }
    </style>

Necesitas especificar la familia de la fuente y si contiene espacios debes reemplazarlos con un signo “+”.

<link rel="stylesheet" type="text/css" 
          href="http://fonts.googleapis.com/css?family=Droid+Sans">

Puede cargar múltiples fuentes en una llamada simple.   Esto disminuirá el tiempo de carga porque solo utilizará una petición http.  Las fuentes múltiples serán separadas por un signo “|”  (carácter de túnel).

<link rel="stylesheet" type="text/css" 
          href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans">

Normalmente, las fuentes son cargadas usando la versión regular, pero tendrás mas control sobre las fuentes cargadas si usas algún selector para el estilo y peso usando un signo “:” (dos puntos), y si son mas de un valor, se separan por una “,” (coma)

<link rel="stylesheet" type="text/css" 
          href="http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic">

El estilo y peso de la fuente pueden ser especificados usando un nombre completo, una abreviación o un valor numérico (para el peso)

bold:b
bold:700
italic:i
bolditalic:bi
<link rel="stylesheet" type="text/css" 
          href="http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700">

Ten en cuenta que no todas las fuentes tienen los estilos que puedas necesitar, así que en primer lugar, verifica en el directorio de fuentes si lo tiene.

La segunda opción

La segunda opción para cargar las fuentes es usar el cargador web (Script de Java) que Google ofrece para eso.  Este script puede ser llamado directamente (lo que es mas rápido) usando las funciones API de AJAX.  La principal ventaja de este método es que puedes cargar fuentes proveídas por TypeKit y Google o desde cualquier otro proveedor de fuentes al mismo tiempo desde la misma librería.

WebFont.load({
 
    google: {
      families: [ 'Tangerine', 'Cantarell' ]
    },
 
    typekit: 'myKitId',
 
    custom: { 
       families: ['OneFont', 'AnotherFont'],
       urls: [ 'http://myotherwebfontprovider.com/stylesheet1.css',
       'http://yetanotherwebfontprovider.com/stylesheet2.css' ] 
   }
});

La desventaja de este método es el incremento en el tiempo de carga en comparación con el método simple.

Otros aspectos que considerar. 

Cargar fuentes externas es lento, por lo menos la primera vez, hasta que la fuente se encuentre en caché en el ordenador del visitante.  No lo sobre utilices.

Necesitas especificar una versión de reserva de la fuente en caso de que tu navegador no lo soporte. Aquí el navegador usa una fuente “serif” en caso de que no sea capaz de descargar la “Tangerine”.

  body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }

El asunto de la navegación cruzada

Caga navegador se comporta de una manera diferente, por supuesto, siendo IE el peor. Para lograr un comportamiento consistente a través de todos los navegadores soportados debería usar el cargador web.  Esto le brinda la oportunidad de mostrar elementos con estilo con una fuente inicial hasta que la fuente requerida sea cargada, y cuando esto ocurra, cambiarla.

    .wf-inactive p { // Show paragraphs in serif font until fonts have loaded.
    font-family: serif
  }
  .wf-active p { // Show paragraphs in Tangerine when the fonts have loaded.
    font-family: 'Tangerine', serif
  }

Si el numero de fuentes incrementase, entonces el Directorio de Fuentes de Google sería una buena alternativa en comparación con otros proveedores de fuentes para web que ofrecen esto como un servicio pago.  Pero aún puede divertirse con el, estoy seguro que Google continuará mejorando este servicio.

Mira la demostración

Una página de demostración puede ser vista aquí. Es interesante ver como se comporta IE 🙂

Más recursos

Directorio de Fuentes de Google
API del Directorio de Fuentes de Google

y por supuesto

Typekit

Porqué “Binevenida” es tan importante?

Últimamente veo muchos sitios web que abren sus páginas principales con un gran titulo de “Bienvenida”. Lo bello de este título es que usualmente alguien decide que es tan importante que se merece un encabezado H1.

Desde la perspectiva de la chica de mercadeo – o el chico de relaciones públicas, si se quiere – probablemente dar la bienvenida a los visitantes con tan bonito y educado encabezado es algo bien hecho. Y cuando un programador como yo decide que darle la bienvenida no vale el H1 y reduce su importancia a H3 (porque no se me permite borrarlo completamente) entonces la guerra en la compañía está a punto de comenzar.

Cuando no tienes nada más que decir

Algunas personas piensan que lo más importante en tu sitio eres . El nombre de tu compañía, el eslogan, descubrimientos, noticias… Algunas veces el logo también es H1 – Chicago, otras veces no. Y aquí es donde te detienes. No todos están de acuerdo, pero todos concuerdan en que tú tienes que tener un H1.

La siguiente línea es un H2. Puedes usarla de cualquier manera que quieras, pero debes tener en cuenta que Google está escuchando y este H2 significará mucho para la el motor de búsqueda. Y ahora volvamos a la “Bienvenida”.

Que está aprendiendo Google de ti cuando el mensaje mas importante en tu página es “Bienvenido”.?

Olvídate de Google, que hay de la información?

Desde el punto de vista de la Arquitectura de la Información, el hecho de SAMSUNG que abras tu sitio web con un mensaje de “Bienvenida” significa que no tienes nada mejor que decir. wholesale jerseys

Cuando lo veo pienso que esta compañía no tiene nada interesante que escribir en la página de inicio. Los encabezados me ayudan a comprender que hace la compañía y cómo puede ayudarme (porque es por eso que estoy aquí, no estoy Hacked navegando en la red para perder el tiempo), así que la página de inicio es la página mas importante wholesale nfl jerseys en todo el sitio web.

La manera en que está diseñado, el contenido y sobre todo los encabezados deben hacerme entender el usando propósito y actividades de la compañía y convencerme de no marcharme del sitio de inmediato.

Nadie lee, todos escanean

Por qué son tan importantes los encabezados?, Además de la carrera para ganar el corazón de Google, se trata de dinero!, cuando tienes una página de inicio aburrida By con encabezados aburridos y contenido insípido, el gigantesco Flash en medio de la página no ayudará a que dejes de perder visitantes. Si los visitantes vienen, se aburren/asustan/o son indiferentes, entonces se irán a otra parte y se llevarán su billetera con ellos.

En caso de que no te importe una… flor la opinión de un especialista web acerca de tu sitio web, entonces el siguiente argumento debería ganar. Los analíticos fueron inventados con un propósito. El saber cuantos visitantes wholesale nba jerseys vienen y van, cuento tiempo pasan en tu sitio web y por qué se marchan luego de 30 segundos se supone que te debe hacer ganar o por lo menos dejar de perder dinero. Si eres mas insensible que eso, piensa en ellos como billeteras. Los visitantes se van = el dinero se va.

Te hace esto estar más interesado en la opinión del Arquitecto web?

Como crear filas personalizadas para TableViews usando Titanium Móvil

En este post trataré de explicar wholesale NFL jerseys cómo Supply//Demand crear de filas personalizadas para TableViews usando Titanium Appcelerator.

Si usted no sabe acerca de wholesale NFL jerseys Titanium mire aquí.  Yo supongo que ya sabe cómo configurar e iniciar un proyecto en Titanium, así que sólo le mostraré como crear una fila personalizada.

De manera predeterminada, un TableView le permitirá crear una fila que puede tener: una imagen a la izquierda, un titulo y el conjunto decorador del tipo de la fila.  El siguiente código es un ejemplo de los datos estándar que necesitan ser pasados al TableView.

var RegData = [
{ leftImage:'es.png', title:"Spain", hasChild:true },
{ leftImage:'gb.png', title:"United Kingdom", hasChild:true },
{ leftImage:'us.png', title:"United States", hasChild:true },
{ leftImage:'fr.png', title:"France", hasChild:true }
];

var TheTable = Titanium.UI.createTableView({
data:RegData
});

Y el resultado en Iphone es éste:

wholesale Cleveland Browns jerseys

Bien, nos gustaría añadir mas datos a una fila, quizás algo como esto:

Esto requerirá construir la fila “a mano”. Así que necesitamos añadir 2 imageViews, la bandera y la tendencia, y labelViews para el país y el porcentaje. Además necesitamos cambiar el arreglo Miami Dolphins Jerseys de datos desde luego.

var CustomData = [
{ flag:'es.png', country:"Spain", trend:'up.png', percent:'28%' ,hasChild:true },
{ flag:'gb.png', country:"United Kingdom", trend:'down.png', percent:'-3%', hasChild:true },
{ flag:'us.png', country:"United States", trend:'up.png', percent:'8%', hasChild:true },
{ flag:'fr.png', country:"France", trend:'down.png', percent:'-40%', hasChild:true }
];

Creamos una variable “data” como un arreglo que mantendrá los objetos de la fila generada.

var data=[];

entonces recorremos el arreglo “CustomData”, creamos una nueva fila, las vistas de imagen (imageViews) y etiquetas y las añadimos a la fila.

for (var i = CustomData.length - 1; i >= 0;    i--) {
var row = Titanium.UI.createTableViewRow();

var flag =  Titanium.UI.createImageView({
url:CustomData[i].flag,
width:32,
height:32,
left:4,
top:2
});

var country = Titanium.UI.createLabel({
text:CustomData[i].country,
font:{fontSize:16,fontWeight:'bold'},
width:'auto',
textAlign:'left',
top:2,
left:40,
height:16
});

var percent =  Titanium.UI.createLabel({
text:CustomData[i].percent,
font:{fontSize:12,fontWeight:'bold'},
width:'auto',
textAlign:'left',
bottom:0,
left:60,
height:12
});

var trend =  Titanium.UI.createImageView({
url:CustomData[i].trend,
width:16,
height:16,
right:10
});

row.add(flag);
row.add(country);
row.add(percent);
row.add(trend);
row.hasChild=CustomData[i].hasChild; 

row.className = 'coutry_row'; 
data.push(row);
};

Como puede ver, first además, añadimos un nombre de clase (className) a la fila para mejorar el rendimiento del renderizado, ya que el iPhone reusará la plantilla de la fila con cada nuevo dato cuando renderice la tabla.

El resultado obtenido es:

Puede bajar el proyecto Titanium desde aquí. Tendrá que cheap jerseys crear un nuevo proyecto en Titanium y reemplazar la carpeta de recursos con el que se encuentra en el fichero.

Déjeme saber que piensas.

Menús Css – navegación

La navegación es un elemento importante de los sitios web. 2010 Hecha apropiadamente AM la navegación ayudará a los usuarios a encontrar lo wholesale jerseys que necesiten en tus páginas. Algunos recursos para la navegación se encuentran cheap jerseys a continuación:

Puertas deslizantes en CSS Puertas deslizantes en CSS, Parte II

Pestañas de Puertas Deslizantes Invertidas

Pestañas CSS 2.0

Pestañas CSS con Submenus

<a wholesale nfl jerseys href=”http://www.simplebits.com/bits/minitab_shapes.html” title=”Formas Link de Mini-Pestañas

Menús de Navegación CSS

Nifty Navigation usando CSS

List-O-Matic