Evitar navegación.
Principal

css

Catull, la tipografia de Google

Catull es la tipografia que se utilizó para la creación de uno de los logos más famosos del mundo "el logo de Google", la tipografia Catull fue diseñada por Gustav Jaeger en el año 1982 y desde Agosto del año 1999, Google la emplea para su logo.

El problema de esta fuente es que a pesar de poder encontrarla para descargar en algunos sitios es una fuente de pago por lo que deberías comprarla si no la encuentras para descarga en alguna página (aquí se puede descargar).


Cambiando el tamaño de fuente con botones

Se ha convertido en una funcionalidad común a un gran número de webs de noticias, pero a mi parecer es una funcionalidad más que prescindible, de hecho no sería necesario en aquellas páginas bien diseñadas y con un tamaño de letra por defecto adecuado.

Por otro lado navegadores como Firefox o Internet Explorer nos permiter modificar el tamaño de los textos de la página visitada, con estos dos navegadores abarcamos al 90% de los usuarios de Internet... vamos a ver como lo haríamos.

Internet Explorer

Si utilizas Internet Explorer y deseas cambiar el tamaño de la letra en una página realiza el siguiente procedimiento:

  1. Seleccione del meú del navegador la pestaña Ver.
  2. Luego dirígase a la opción Tamaño de texto y seleccione la presentación del texto que usted prefiera.
  3. La opción por defecto del Tamaño de texto que se encuentra seleccionada es Mediana usted puede cambiarla según sus preferencias a Grande o Mayor y así aumentar el tamaño de la letra en la página.

Mozilla / Firefox

Si utilizas Mozilla / Firefox y deseas cambiar el tamaño de la letra en la página visitada realiza el siguiente procedimiento:

  1. Seleccione del meú del navegador la pestaña Ver.
  2. Luego dirígase a la opción Tamaño de texto y seleccione la opción que prefiera.
  3. Usted puede seleccionar Incrementar para aumentar o Dismunir para reducir el tamaño de la letra en el portal.

Los colores en la web

En esta direccion podemos encontrar una lista de formulas para convertir entre los diferentes espacios de color, RGB, XYZ, HSL, etc.

Para la correcta compresión de estas fórmulas debemos tener claro cada uno de los modelos de color.

Esta lista de funciones las podemos aplicar a cualquier aplicación que precise de operaciones para el cálculo y conversión de color, todas las funciones están escritas en un "lenguaje de programación neutral" fácil de transladar a cualquier lenguaje de programación (C, Java, Basic, Pascal, PHP, Perl etc.).

Conversión de colores

RGB: (del inglés Red, Green, Blue; "rojo, verde, azul") es un modelo qye hece referencia a la composición de un color dependiendo de la intensidad de los colores primarios. Se asigna un valor a cada uno de los colores primarios frecuentemente se mide con valores que van del 0 al 255.

CMYK: (acrónimo de Cyan, Magenta, Yellow y Key) este modelo se basa en la mezcla de los colores Cian, Magenta, Amarillo y Negro es muy utilizado para la impresión a color.

Modelo de color para HTML; utiliza también los colores primarios, pero estos colores primarios , en HTML, están representados por tres pares hexadecimales del tipo 0xHH-HH-HH según el siguiente formato: #RRGGBB = #RRVVAA

Como hemos comentado antes en esta direccion dispondremos de las fórmulas necesarias para cualquier tipo de conversión de color.

Si necesitaramos integrar un selector de color en nuestra página mi recomendación es esta (Color Picker) | ver Demo.

CSS Color Generator

Mikko Koppanen publicó hace unos meses el código de una interesante utilidad (CSS Color Generator) en su blog.

Este código / utilidad será realmente interesante para aquellos que carecemos del sentido del gusto para crear hojas de estilos de la nada.

Con esta utilidad podemos crear una pequeña paleta de colores partiendo de una imagen dada (un logotipo por ejemplo sería un buen comienzo) | Código de la utilidad




Validar Flash para XHTML

A pesar de que flash es uno de los elementos más activos en las páginas webs hoy en día, la gran mayoría de los diseñadores no saben cómo corregir el extendido problema de insertar flash en un documento HTML, el concepto de estándar propagado por Macromedia es absolutamente incorrecto.

...
embed src="movie.swf" quality="high" bgcolor="#ffffff" width="550" height="400"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
...

Atributos como object son necesarios en Internet Explorer y no funcionan en otros navegadores, estos otros utilizan el elemento "embed" para el mismo propósito, pero este no está listado en las especificaciones de HTML o XHTML.

Soluciones

¿Que es lo que deseamos?

* Que funcione en la mayoria de los navegadores
* Que muestre contenido alternativo si el usuario no tiene Flash Player

Solución 1

Se han probado distintas soluciones en las cuales siempre uno de los dos grandes navegadores sale perdiendo (Mozilla o IE), pero hay una solución en la que mediante distintas condiciones podemos combinar ambos scripts para que funcione de manera correcta en la mayoría de los navegadores, haciendo especial hincapié en los más populares (Mozilla,IE).

Esta es la solución.

Quizás no sea la más elegante pero es funcional.

* Valida
* Es funcional en todos los navegadores que conozco
* Muestra contenido alternativo si Flash Player no esta instalado
* No requiere el uso de Javascript

Solución 2

Se trata de no validarlo. Es decir, si el único problema en la página es el código para flash, y no hay ningún estándar, entonces lo que hay que hacer es sacar ese código de la página y validarla, pero manteniendo el funcionamiento de la página.

Este proceso es sencillo y práctico, y depende de Javascript. Ya sé que si Javascript es deshabilitado entonces simplemente no se desplegará nada, pero esta opción es valida porque:

* Valida
* Es funcional en todos los navegadores
* Muestra contenido alternativo si Flash Player no esta instalado
* En el caso extremo de que Javascript esté deshabilitado, la animación no se muestra, pero simple código HTML puede hacer la función de soporte, explicando qué había ahí.


CSS Color Generator

Mikko Koppanen ha publicado el código de una interesante utilidad (CSS Color Generator) en su blog.

Este código / utilidad será realmente interesante para aquellos que carecemos del sentido del gusto para crear hojas de estilos de la nada.

Con esta utilidad podemos crear una pequeña paleta de colores partiendo de una imagen dada (un logotipo por ejemplo sería un buen comienzo) | Código de la utilidad


Conversor Online de JPG a HTML (IMG2HTML)

Esta es una interesante e inútil web en la cual podemos convertir cualquier imagen a código HTML.

La verdad es que hay que estar aburrido para hacer una aplicación que convierta imágenes a código HTML, el funcionamiento es sencillo se cre una tabla de 1x1 píxeles por cada pixel de una imagen asignando a la tabla el color del pixel convertido.

Obviamente se trata de algo curioso pero nada útil... si tenemos en cuenta que una imagen de un tamaño de 3KB al convertirla a HTML nos quedará en 274KB.

Prueba IMG2HTML, este es el resultado por ejemplo del logo de TuFunción en HTML (Ver Código Fuente).

Genial este video que veo en Microsiervos:



Cambiando el tamaño de fuente con botones

Se ha convertido en una funcionalidad común a un gran número de webs de noticias, pero a mi parecer es una funcionalidad más que prescindible, de hecho no sería necesario en aquellas páginas bien diseñadas y con un tamaño de letra por defecto adecuado.

Por otro lado navegadores como Firefox o Internet Explorer nos permiter modificar el tamaño de los textos de la página visitada, con estos dos navegadores abarcamos al 90% de los usuarios de Internet... vamos a ver como lo haríamos.

Internet Explorer

Si utilizas Internet Explorer y deseas cambiar el tamaño de la letra en una página realiza el siguiente procedimiento:

  1. Seleccione del meú del navegador la pestaña Ver.
  2. Luego dirígase a la opción Tamaño de texto y seleccione la presentación del texto que usted prefiera.
  3. La opción por defecto del Tamaño de texto que se encuentra seleccionada es Mediana usted puede cambiarla según sus preferencias a Grande o Mayor y así aumentar el tamaño de la letra en la página.

Mozilla / Firefox

Si utilizas Mozilla / Firefox y deseas cambiar el tamaño de la letra en la página visitada realiza el siguiente procedimiento:

  1. Seleccione del meú del navegador la pestaña Ver.
  2. Luego dirígase a la opción Tamaño de texto y seleccione la opción que prefiera.
  3. Usted puede seleccionar Incrementar para aumentar o Dismunir para reducir el tamaño de la letra en el portal.

Buenas herramientas web de diseño

La parte más complicada del diseño de un interfaz de usuario es conseguir un interfaz que se atractivo y útil para la gran mayoria de los usuarios, lo más importante es llegar a conectar con el usuario y la mejor manera es ofrecerle una interfaz con una combinación de colores adecuadas que se integre en nuestra interfaz y utilizar gráficos que no desentonen con la combinacion de colores escogida.

Debemos tener en cuenta que el usuario lo primero que percibirá serán los colores antes que la tipografía, botones o fotografías que estén en nuestra página, por eso debemos ser especialmente cuidadosos con la elección de la paleta de colores que será la base de todos los elementos de nuestra página.

Por eso para hacer una buena elección de color podemos utilizar esta web en la que disponemos de un gran número de paletas de colores para usar.