sasa eh

Convertir pixels (px) a em

A la hora de hacer una web elástica, uno de los problema con los que nos encontramos es la falta de exactitud de las medidas con las que trabajamos.
Un pixel, es 1 pixel en pantalla, pero ¿cuánto es 1em o 1ex?

(Casi) Fácil. Aquí va una pequeña tabla de equivalencia sacada de (Worldtechies)

Jon Tan lo explica mejor, indicando la fórmula para calcular la equivalencia:

1 ÷ parent font size (px) × required pixels = em equivalent

Asumiendo que, por defecto, el tamaño por defecto de la fuente en los navegadores es de 16px.

Para cálculos más complejos, podéis usar Em calculator.

Pequeñito y juguetón

Así es mi proyecto ideal: pequeñito y juguetón.

Tras años de estar trabajando en proyectos eternos, caros y fagocitadores de recursos que nunca salían a la luz, no hay nada más satisfactorio que hacer un proyecto que puedes realizar en poco tiempo y verlo en producción, funcionando y cumpliendo correctamente su limitado cometido.

Es tremendamente enriquecedor.

Diseñando mediolleno.com

Iba a poner rediseñando mediolleno.com pero, siendo sinceros, no hay mucho diseño previo, así­ que empezaremos desde el principio.

Ahora mismo, mediolleno.com es un muy buen nombre de dominio con demasiada parte vací­a. Se nota que el webmaster pasa más tiempo jugando al pádel que trabajando en la web. Aún así, podemos sacar en claro algunas cosas:

• Está claro que es una web para mostrar imágenes de los viajes que Héctor realiza.
• De vez en cuando surge algún evento especial del estilo “cachorrillos buscan dueño” y similares de los que la gente se entera por correo personalizado y en voz baja (ssshhh!)

Y esa es toda la web, tal y como la conocemos.

Mi propuesta

Espero que Héctor sepa perdonar mi atrevimiento y que le cite aquí­, donde apenas tengo entradas, no le suponga un incremento descomunal del ancho de banda.

Sólo pretendo mejorar la calidad del site y que todos disfrutemos más y mejor de sus fotos… y de los originales comentarios, por supuesto.

Como la gente que vaya a ir a mediolleno.com esta claro que quieren ver las últimas fotos, ¿por qué no darles una muestra desde el principio? Los enlaces están muy bien, pero anda que no molaría saber con lo que te vas a encontrar. Por eso, para la home, podríamos tener algo como:

Además, si quieres poner algún evento sui generis de los tuyos, lo puedes colocar en alguno de los bloques de fotos de la derecha. Ya sabes un fondo de color y luce mucho.

Por otro lado, las galerías interiores están un poco… uuuhhmmm… de aquella manera, digamos. Pero esto tiene una solución bastante sencilla y que además nos da un poco de interacción y así los colegas podemos decirle algo sobre las fotos: folderblog. Está todo hecho, no tienes que hacer (casi) nada, así que ¡por dios instálatelo ya!.

Se ve relindo con eso mi amol: un ejemplo.

En general

• Home. Según la propuesta. A mi me mola.
• Galerías de fotos. Por favor, estandariza la forma de presentarlas. Yo me quedo con folderblog
• Logo y espacio. Con ese nombre, el no poner un logo es un crimen. ¿Qué tal un vaso de txikito medio lleno de buen Rioja Alavesa?. Por otro lado, al no haber mucho contenido, la web puede tener mucho espacio y dejarlo muy espacioso y claro.

Ey. De nada.

Quiero una güeb

Quizá haya gente que piense que ya no hay nadie que entra por la puerta de tu despacho y dice algo como:

- Hola, buenos dí­as. ¿Es aquí donde hacen güebs?

- Errrr… si, supongo.

- ¿Y me podrían hacer una? ¡Pero que sea bonita, eh!

Y listo, el señor se irá con una preciosa web… o no, o yo que sé. Y le valdrá… o no, o yo que sé.

Pues ésto sigue pasando. Y el señor puede ser una multinacional, la charcuterí­a de la esquina, el departamento de marketing (véase mercadotecnia) o su santidad el Papa.

En ese proceso de educación del cliente, la gente de FuelledOnCoffee.com (bonito nombre) ha hecho una bonita guí­a para tratar de asegurarse que el cliente obtiene algo útil y encima salga satisfecho.

Algunas de las preguntas que hay que plantear al cliente, según ellos:

1. ¿Por qué necesitas un sitio web?
2. ¿Cuál va a ser el propósito del sitio?
3. ¿A quién va a ir dirigida la web?
4. ¿Quién va a dotarla de contenido?
5. ¿Cada cuánto se va a actualizar?
6. ¿Voy a necesitar mucho ‘ancho de banda’?
7. ¿Tengo ya un ‘nombre de dominio?
8. ¿Tengo ya hosting, un lugar donde alojar la web?
9. ¿Entiendo por qué la ‘usabilidad’ es importante? ¿Y la ‘accesibilidad’?

La guí­a:
I want a website but I don’t know wehere to start

Múltiples IE en tu PC

Con la llegada del infame Internet Explorer 7, ya tenemos otra vez la liada habitual: a ver que se ha roto…

Lo de tener que diseñar para 3 o 4 navegadores con sus distintas versiones, en las diferentes plataformas, sabiendo que ninguno cumple las estándares al 100% es la tí­pica labor que podría hacer cualquier otra persona.

El bueno de Carlos, ha encontrado una pequeña aplicación para poder tener las distintas versiones del Internet Explorer (¡desde IE3!) funcionando en tu ordenador y así ir probando como se comportan tus páginas.

En Install multiple versions of IE on your PC

A ver cuando encontramos algo así­ para Safari…

Escribir para la web

Cada vez que tengo que redactar algún contenido para la web, y son unas cuantas veces, me maravillo de la capacidad de la gente para mantener el contenido de sus sitios webs.

Un redactor web no es un periodista, ni un copy, ni un novelista. Hay que tener muy claro una serie de cosas:

• El estilo del sitio web en el que estás trabajando. No creo que exista una guÃía de estilo tipo “El Paí­s”, pero seguro que sabe implícita o explí­citamente, el estilo de redacción que hay que usar.
• Los usuarios a los que va dirigida esa web. Si quieres llegar a ellos, claro.
• El medio. Hay que tener siempre presente que se trata de web, que existen ciertas convenciones y que tienes muchos más recursos que en texto plano: enlaces, negritas, alts,… Gestionarlos correctamente es complicado, hay que conocer las herramientas de las que disponemos.

Y ahora unos consejos útiles a la hora de redactar textos.

1. El usuario no lee, escanea, así­ que escribe textos cortos, claros y concisos.
2. En web, el usuario elige el orden, que ve y que deja de ver, y es impaciente. No malgastes las palabras si quieres que se quede en tu web. Proporciona información útil y evita publicidad dentro del texto.
3. Escribe en un lenguaje cercano a la lengua hablada. Seguro que te explicas más y te entienden mejor.
4. Usa verbos expresivos, en activa y dirí­gete directamente al lector.
5. Usa los recursos del HTML para facilitar el escaneo que hace el lector: negritas para destacar las ideas principales (sin abusar, obviamente), listas, subtí­tulos, … Evita las cursivas y las MAYÚSCULAS, dificultan la lectura.
6. Organiza el contenido de mayor a menor interés. Si el usuario abandona, que se lleve consigo la idea principal.
7. Usa un hiperenlace con sentido. No abuses. Un enlace llama la atención durante el escaneo, así­ que hay que usarlo con conocimiento. Y recuerda, el texto del enlace debe identificar a dónde se dirige. A no ser que seas del partido Haz clic aquí­.
8. Revisa, revisa, revisa. Consulta a la RAE las dudas que tengas, no hay nada peor que una página o mail con faltas ortográficas y si otra persona puede revisar la versión final del texto mejor. Corrige frases, elimina párrafos innecesarios, re-formatea párrafos, …

Como 8 no es un número muy redondo, le voy a añadir un par de conclusiones.

Todo lo podrí­amos resumir en un Keep It Simple + Occam’s Razor salpimentado con sentido común y conocimiento de los recursos que el HTML proporciona.