CSS. HTML. Para todos los dispositivos

Hace poco se cumplieron 20 años de la web, World Wide Web, y Tim Berners-Lee criticaba los dominios .tel y .mobi. No es de extrañar ya que realmente con el mismo contenido html o xhtml podemos crear estilos para los distintos dispositivos o Media types. Echar un vistazo a las guias de las w3c sobre estos Media types

El tema es sencillo, si hemos separado bien el contenido de la apariencia, el html del css.

Dentro de <html><head> podemos definir hojas de estilo, css, para cada dispositivo cliente que pueda solicitar una url de nuestra web.

Se trata de añadir con el valor del atributo media las diferentes hojas de estilo, css, que hayamos generado, mejor que sea el diseñador gráfico si sabe que existe algo más que flash.



<!-- para monitores de ordenador, computadora -->
<link rel = "stylesheet" type = "text/css" media="screen" href="css/screen/general.css"/>

<!-- para imprimir -->
<link rel = "stylesheet" type = "text/css" media="print" href="css/print/general.css"/>

<!-- para pequeñas pantallas, como móviles, pda, ... -->
<link rel = "stylesheet" type = "text/css" media="handheld" href="css/handheld/general.css"/>

<!-- incluso para ciegos -->
<link rel = "stylesheet" type = "text/css" media="braille" href="css/braille/general.css"/>
<link rel = "stylesheet" type = "text/css" media="embossed" href="css/embossed/general.css"/>

<!-- sintetizadores de voz -->
<link rel = "stylesheet" type = "text/css" media="speech" href="css/speech/general.css"/>

<!-- Para nuestro querido terminal o consola, cuando navegamos con lynx -->
<link rel = "stylesheet" type = "text/css" media="tty" href="css/tty/general.css"/>


<!-- Los tipicos pantalla, impresión y teléfono móvil o pda
<link rel = "stylesheet" type = "text/css" media="screen" href="css/screen/menu.css"/>
<link rel = "stylesheet" type = "text/css" media="print" href="css/print/menu.css"/>
<link rel = "stylesheet" type = "text/css" media="handheld" href="css/handheld/menu.css"/>



No te olvides echar un vistazo a la w3c, hay una guía muy interesante sobre css (en español) que puede resolver muchas dudas y por su puesto los Media types en inglés.

Comentarios

Publicar un comentario

Entradas populares de este blog

PHP. módulo de un "long". Calcular dígito control de IBAN.

Calculando el DC dígito de control de un número de cuenta IBAN me he encontrado un problema con el módulo o resto. Al manejar un número que sobrepasa el integer, "no se exacta la barrera, pero supongamos que a partir de 2147483647 deja de ser nuestro integer de toda la vida", manual PHP. Enteros y al calcular el modulo de 97 de ese número long perdía la precisión y devolvía un resto incorrecto. Hay varias soluciones a esta situación, yo opté por usar bcmod function bcmod ya que en PHP hay funciones para casi todo y sino en www.phpclasses.org podremos encontrar alguna clase que nos facilite el desarrollo. Supongo que también se debe a la "anarquía" de PHP que no obliga a declarar el tipo de dato de la variable, aunque cada vez empiezo a encontrar más código en el que se hacen casting a las variables. En el mundo java un int es un int, un String es un String y un long es un long y todo el día haciendo casting pero siempre tienes claro que hay en una variable. $foo...
Leer más

HTML. CSS. input disabled - input readonly

En IExplorer hay problemas con los input disabled, pero podemos usar los input readonly. Con los input disabled en el IExplorer no coge el del color de la fuente. Lo pone a un color gris claro. Pero con los input readonly si que coge el color de la fuente. Además los input disabled no se envian ni por el POST ni por el GET. En cambio los input readonly si se envían en la petición. En Mozilla FireFox los input disabled si que cogen el estilo del color de la fuente. <input type="text" id="campo_disabled" name="campo_disabled" size="5" readonly="readonly" value="deshabilitado"/> <input type="text" id="campo_readonly" name="campo_readonly" size="5" disabled="disabled" value="solo lectura"/> input { border: #7f9db9 1px solid; padding:0 0 0 3px; font-family:Tahoma,Georgia,serif; font-weight: lighter; color:#007EF4; } input [disabled] { background-col...
Leer más