Evitar navegación.
Principal

html

Rotando letras con Javascript

Un curioso y divertido truco para rotar letras visto en este foro, se trata de una función Javascript que sustituye las letras dadas por los caracteres que más se le parecen al rotar las letras del texto 180º.

Girar Texto

Tras esta breve presentación de Unicode pasemos a ver el truco Javascript para rotar las letras de un texto. Para probarlo introduce una cadena de texto en el campo "Original" y pulsa el botón "Girar Texto".

Original:



Texto rotado180º:





En la gran mayoria de los caracteres se utilizan caracteres unicode pero tambien hay algunos caso en los que para representar una letra del alfabeto invertida se utiliza otra letra del alfabeto para representarla:

b -> q
d -> p
g -> b
l -> 1
n -> u
o -> o
p -> d
s -> s
q -> b
x -> x
z -> z


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



Términos y condiciones de uso

Es posiblemente uno de los elementos más repetidos en los formularios de alta para servicios web, el apartado protagonista para esta entrada es el de los términos y condiciones de uso esencial para manifestar la conformidad del usuario. A menudo son aceptadas de forma automática por los usuarios que en la gran mayoria de las ocasiones no se detienen a leerlas.

Hay diferentes maneras en las que podemos encontrar este apartado, la manera de integrarlo en nuestra página dependerá en gran medida de si queremos que el usuario conozca o no lo que está aceptando.

Esto podemos llegar a hacerlo por dos motivos:

  • Para cubrirnos las espaldas y cumplir una normativa legal que obligue mostrar la politica de privacidad o los términos y condiciones de uso.
  • Para que el usuario sea realmente consciente de las condiciones que está aceptando.

El principal problema de estos textos es que muy pocas personas tienen el tiempo suficiente para leer el acuerdo y las que se animan a leerlo se encuentran con un lenguaje complicado que a menudo desanima al usuario para posteriores lecturas en procesos similares, particularmente nunca he llegado a leerme completamente ninguno de estos textos.



Listado de provincias y municipios de España

Bueno despues de buscar durante un tiempo y con unos pequeños scripts con los que he podido parsear contenido de alguna página que otra he conseguido una lista decente de provincias y municipios de España.

Es increíble ver lo difícil que es encontrar este tipo de información en Internet con un formato apropiado para crear las listas (xls, csv o en BBDD).

Aquí os dejo un pequeño combo dinámico bastante simple y con un código Javascript un tanto rústico, estoy seguro que más de uno lo agradecerá.

Ver / Descargar código fuente
Ver ejemplo

Esta lista como comento no es muy completa, si lo que necesitas es un listado con un mayor número de ciudades podemos encontrarlos en esta entrada de la Wikipedia (Lista de Provincias de España), es un poco difícil de parsear pero con un poco de esfuerzo se puede conseguir y es sin duda la más completas de las que se pueden encontrar por Internet.


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í.


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:



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.


El futuro de Internet, X/HTML 5 vs XHTML 2

El desarollo de Hypertext Markup Language (HTML) 4 paró en 1999 con la HTML 4.01, en ese momento la World Wide Web Consortium (W3C) centró sus esfuerzos en otros estándares (SGML, XML, SVG, XForms, RSS, CSS), pero durante estos 8 años HTML ha aguantado firmemente.

El hecho de que HTML haya aguantado estos 8 años ha hecho recapacitar a la W3C acerca del camino que deben tomar aduciendo como principal argumento que hay mucha gente que aprovecha y disfruta los "sistemas bien formados" (refiriéndose a HTML). Hay que recordar que XHTML se concibió como sucesor de HTML y debía de considerarse como la “versión actual” del HTML, esta decisión extraña ahora que tanto se hablaba de XHTML.

La postura de la W3C es un poco rara puesto que se ha centrado en los últimos años en la especificación de XHTML (publicando su versión 1.0 en el 2000) y ahora se estaba trabajando en la versión XHTML 2.0 (aún en fase borrador), a todo esto hay que sumarle que la última actualización importante de HTML data de 1997, año en que salió la versión 4.0. En 1999 con la publicación de las recomendaciones HTML 4.0.1 se añadieron algunos retoques.

De este modo nos encontramos que actualmente se está trabajando en paralelo con (HTML 5 y XHTML 2).

Por un lado tenemos a HTML 5 (también conocida como Web Applications 1.0) siendo desarollado por WHATWG (comunidad abierta fundada por Mozilla, Opera y Apple) y por el otro lado está XHTML 2.0 que está siendo preparada por la W3C (organismo oficial que define los estándares de la Web).