Desde la salida del Retina Display, se duplicó la densidad de pixeles que utilizábamos para diseñar y construir sitios webs para iPhone. Aunque si seguías utilizando los acostumbrados 480x320px de las pantallas anteriores, se nota bastante el pixel en estos nuevos teléfonos. Pero si trabajas para la nueva resolución de 960x640px, ¿qué haces con los modelos anteriores?
Suele ser común el pensamiento que 1 pixel en CSS es 1 pixel en la pantalla del dispositivo. Cuando entramos al nuevo mundo de la alta definición un pixel en CSS termina siendo múltiples en la pantalla. Un ejemplo es si defino un zoom de 2x, entonces 1 pixel de CSS termina siendo 2×2 cuadrados de pixel en el dispositivo. Y eso es lo que está sucediendo desde el iPhone 4.
Entonces, la pregunta es sencilla: ¿Cómo trabajamos con Retina sin dejar de lado las resoluciones anteriores?
La respuesta viene de la mano del potente Mobile Safari y su capacidad de responder mediante CSS3 media queries. Podemos detectar si el dispositivo duplica la densidad del pixel, y si es así modificar el estilo reemplazando las imágenes por una de doble resolución:
<link rel="stylesheet" type="text/css" href="css/normal.css"> <link rel="stylesheet" type="text/css" href="css/retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" >
El secreto está en que definas las imágenes que querrás se vean de mejor calidad en un iPhone 4+ mediante background-image de CSS, por ejemplo:
normal.css
#logo {
background-image: url('images/logo.png');
background-size: 100px 100px;
background-repeat: no-repeat;
}
retina.css
#logo {
background-image: url('images/logo_hi.png');
}
Te recomiendo apreciar el ejemplo desde tu teléfono móvil, para que realmente veas los resultados:
Como el navegador va a leer sí o sí normal.css, y por gracia del media="only screen and (-webkit-min-device-pixel-ratio: 2) sólo los dispositivos que tengan duplicados su resolución leerán retina.css y sobreescribirán los estilos definidos en esta hoja de estilos por sobre la anterior. La idea es que sólo definas las propiedades que cambien, no es necesario que reescribas todo el código.
Mediante JS
Otra manera es hacerlo mediante JavaScript, la cual encuentro innecesaria pero de todas maneras dejo la opción:
<script type="text/javascript">
if (window.devicePixelRatio >= 2) {
document.write("<link href='css/retina.css' rel='stylesheet' type='text/css' media='screen' />");
} else {
document.write("<link href='normal.css' rel='stylesheet' type='text/css' media='screen' />");
</script>
Links:
]]>- Nombres (websafe): por 17 colores en inglés : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white y yellow (actualmente los browsers modernos soportan muchos más).
- Sistema (no lo recomiendo): por colores del sistema operativo que esté utilizando el usuario del sitio: ActiveBorder, AppWorkspace, Background, ButtonFace, ButtonHighlight, ButtonShadow, ButtonText, HighlightText, InactiveBorder, InfoBackground, InfoText, Menu, MenuText, Scrollbar, Window, WindowFrame y WindowText.
- RGB Hexadecimal: quizás el más utilizado, en el cual cada color se mezcla según 16 símbolos (de 0 a 9 y de la A a la F); por ejemplo el rojo es: #FF0000.
- RGB Decimal: se indica qué cantidad de Rojo, Verde y Azul se debe mezclar en una escala de 0 a 256 tonos cada uno; en este caso el rojo seria rgb(255,0,0).
- RGB Porcentual (poco preciso): otra forma de expresar colores en RGB pero en forma porcentual; rojo es rgb(100%,0%,0%).
Pero con CSS3 existe una nueva e interesante manera:
- RGBa: al igual que en la forma RGB Decimal anterior, se agrega un valor al final: el canal alpha de opacidad, en escala de 0 a 1. Lo interesante de este método es que al contrario de opacity{}, la transparencia la verás sólo al color y no a todo el elemento, por lo tanto esta propiedad no se hereda. Su modo de uso es de la siguiente manera:
selector {
background: rgba(255,0,0,0.3);
color: rgba(200,120,60,0.6);
border: 3px solid rgba(10,250,70,0.5);
}
En el siguiente ejemplo verás la diferencia con una opacidad aplicada mediante RGBa y mediante opacity{}.
Por supuesto al ser una propiedad CSS3, en estos momentos sólo es soportada por Safari 3+ y Firefox 3, pero ya comencé a agregar funcionalidades a los sitios en que sólo son vistos si navegas con estos browsers; si usas IE no tienes tan buena experiencia visitándolos y es mi manera de convencer al usuario de que se actualice.
]]>Por todos es conocido y utilizado Clearfix; luego les comenté sobre Clearfix Ultimate (bautizado por mí) y que me ha sido de gran utilidad desde entonces. Esta vez, les traigo uno nuevo: Floatfix (nuevamente bautizado así por mí). Con este método, superas el colapso del contenedor a causa de elementos bloque flotantes dentro de él utilizando la propiedad CSS… ¡float!
¿Float para arreglar otros floats?
Así es, si tu elemento caja que contiene otros elementos que están flotando colapsa, pues simplemente flótalo y todo volverá a la normalidad.
Volveré a explicar el asunto. Miren en el siguiente ejemplo como #container contiene (valga la redundancia) a 2 elementos que están flotando. Bueno, basta con que sea 1 y ya #container estaría colapsando (no los envuelve).
#container {
margin: 40px;
}
.flout {
float: left;
}
Bueno, si utilizan .clearfix todo volvería a la normalidad; si tienen ancho fijo en el #container y agregan overflow: hidden también todo estaría normal, pero en vez de eso, sólo floten el #container a cualquier lado: left o right:
#container {
margin: 40px;
float: left;
}
.flout {
float: left;
}
Así de simple y de contradictorio. Funciona en todos mis browsers de pruebas y claro tiene sus pros y contras. Pero depende de cada uno manejar la mejor solución a sus problemas. Este es sólo uno más.
Link:
]]>Este es otro de esos trucos CSS donde uno se hace esa dolorosa pregunta: "¿Por qué no se me había ocurrido antes?". Pero bueno, para qué lamentarse si se puede disfrutar de la solución.
Al grano entonces. Si se tiene una imagen bastante grande como para que actúe como una atractiva imagen que vaya a aportar al diseño y contenido del sitio, y no mermar la usabilidad y accesibilidad de la web con su gran peso y colores distractores, podemos aplicarla de fondo. Ahora, el problema surge que queremos ponerla para que a medida que se vaya redimensionando la ventana del browser, la imagen también se escale para adaptarse al soporte. Así no perdemos ningún pixel de ella y logramos ese objetivo con el diseño, lo que grafico a continuación:
Esto se lograba con Flash con un poco de habilidad en Actionscript y Stage.scaleMode. Pero con un poco de simple CSS podemos lograr lo mismo. A continuación, la explicación.
El HTML será una imagen que será insertada como etiqueta <img /> y no con background-image como se podrían imaginas. Luego, el contenido que mediante CSS será correctamente posicionado:
<img src="fondo.jpg" class="imagen_fondo" alt="DigitalArt: Fractal Meeting" />
<h1>Fractal Meeting</h1>
Luego, la versatilidad del CSS. Posicionaremos la imagen absolutamente, indicando que el ancho sea al 100%. ¡Y eso es todo! Basta con un overflow: hidden al <body> u otro elemento contenedor que tengan para que no les forme scroll, y ya. No hay más:
body {
overflow: hidden;
}
.imagen_fondo {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.titulo {
position: absolute;
top: 50%;
left: 0;
width: 100%;
}
Muevan la ventana del browser para ver esta técnica en acción. Y para el código completo, basta con ver el código fuente del ejemplo anterior.
Links:
]]>
Ya lo mencioné de rebote en un artículo. Este método no tiene nombre conocido (por lo menos en los sitios que he leído no lo nombran de alguna manera especial). Es tan simple que dan ganas de tirarse por la ventana por no conocerlo antes.
Se trata de utilizar la propiedad CSS overflow en la caja que está colapsando. Eso es todo. Basta con incluirla en algún de los siguientes valores:
- overflow: auto;
- overflow: hidden;
- overflow: scroll;
Y la caja volverá a comportarse como debiera: envolviendo a los elementos flotantes dentro de ella. La teoría es simple: como el valor por defecto es overflow: visible, esto hace que la caja crezca para adaptarse al tamaño que tienen sus elementos (etiquetas) hijo. Con visible se asume que se han dado los valores de ancho (width) y alto (height) y por eso nada sucede; ya con los demás valores ya nombrados, obliga a la caja contenedora a re-calcular sus dimensiones, tomando en cuenta ahora a los elementos hijos que están con float. Con alguno de estos valores de overflow, le recordamos a la caja contenedora que tienen elementos hijo (flotando) y que debe conocer sus tamaños para envolverlos.
El ejemplo más clásico a continuación. El HTML:
<div id="contenedor">
<div class="flotando_izquierda">
<p>Floto hacia la izquierda</p>
</div>
<div class="flotando_derecha">
<p>Floto hacia la derecha</p>
</div>
</div>
Y el CSS:
#contenedor {
overflow: auto;
height: 1%;
}
.flotando_izquierda {
float: left;
}
.flotando_derecha {
float: right;
}
Para que IE6 reconociera este método, hubo que aplicar a la caja contenedora (en este caso #contenedor) height: 1%, haciendo que todos los browsers modernos desplieguen de igual manera este método.
El único detalle que le encontré fue al momento de utilizar dentro de #contenedor un elemento posicionado absolutamente, relativo a él, lo que hace que se muestre la barra de scroll (dado el overlow: auto;). En ese caso, lo mejor es utilizar overflow: hidden, lo que hace a la caja esconder al elemento absoluto, en el caso de éste ser más grande que la caja misma.
Este caso es bastante específico, y creo que no hace que este método deje de ser una muy buena alternativa de despeje.
Links:
]]>
En esta ocasión utilicé bastantes más capas que en el ejemplo original (6 en total… un poco exagerado ya que los PNG‘s pesan bastante), pero el HTML fue construído de igual manera:
<div id="nube">
<div id="montanas">
<div id="ciudad">
<div id="personas">
<div id="persona1">
<img src="imgs/persona1.png" width="280" height="280">
<p>Nulla facilisi. In vel sem…</p>
</div>
<div id="persona2">
<img src="imgs/persona2.png" width="280" height="280">
<p>Aliquam et nisl vel ligula…</p>
</div>
<div id="persona3">
<img src="imgs/persona3.png" width="280" height="280">
<p>Nunc auctor bibendum eros….</p>
</div>
</div>
<div id="enredadera">
<div id="hojas">
</div>
</div>
</div>
</div>
</div>
Y el CSS:
#nube, #montanas, #ciudad, #enredadera, #hojas, #personas {
position: absolute;
height: 100%;
width: 200%;
left: -150px;
}
Un detalle importante fue ampliar bastante el ancho de todas las cajas para que puedan soportar un desplazamiento horizontal contínuo (cuidando siempre que sea en porcentaje; así se conserva el efecto Parallax). Cada imagen es aplicada como background y posicionada horizontalmente en porcentaje y verticalmente de acuerdo a su ubicación (top ó bottom).
#nube {
background: url(../imgs/nube.png) 20% top repeat-x;
}
#montanas {
background: url(../imgs/montanas.png) 10% bottom repeat-x;
}
#ciudad {
background: url(../imgs/ciudad.png) 30% bottom repeat-x;
}
#enredadera {
background: url(../imgs/enredadera.png) 40% top repeat-x;
}
#hojas {
background: url(../imgs/hojas.png) 50% bottom repeat-x;
}
Si modifican el ancho de la ventana verán que se conserva el efecto Parallax, salvo la capa de personas la que pretendo que sea contenido (dado el caso que se requiera así).
Ahora, la magia se aplica a través de Mootools. El efecto de desplazamiento está dentro del .js que incluí al bajar el archivo y se llama FX.Style. Con él haremos que mediante un evento de click en cada botón, cada <div> se desplace en diferentes medidas de su margin-left. O sea, la primera capa #nubes se moverá -100px a la izquierda, luego #montanas lo harán -200px y así sucesivamente, logrando un efecto de profundidad en cada capa ya que se moverán en diferentes medidas:
$(‘btn_uno’).addEvent(‘click’, function(){
nube.start({
’margin-left’: 0
});
montanas.start({
’margin-left’: 0
});
ciudad.start({
’margin-left’: 0
});
enredadera.start({
’margin-left’: 0
});
hojas.start({
’margin-left’: 0
});
personas.start({
’margin-left’: 0
});
});
$(‘btn_dos’).addEvent(‘click’, function(){
nube.start({
’margin-left’: -100
});
montanas.start({
’margin-left’: -200
});
ciudad.start({
’margin-left’: -300
});
enredadera.start({
’margin-left’: -400
});
hojas.start({
’margin-left’: -1000
});
personas.start({
’margin-left’: -500
});
});
$(‘btn_tres’).addEvent(‘click’, function(){
nube.start({
’margin-left’: -500
});
montanas.start({
’margin-left’: -600
});
ciudad.start({
’margin-left’: -700
});
enredadera.start({
’margin-left’: -800
});
hojas.start({
’margin-left’: -1500
});
personas.start({
’margin-left’: -900
});
});
Pueden ver el código completo de cada elemento:
PD: El movimiento en Safari 3 anda perfecto, muy suave; ya en Firefox 2 y 3 se pega algunos saltos, y en Opera 9.2 anda mas cortado aún… Quizás sea mi computador, espero sus impresiones sobre esto.
]]>Esta es una técnica muy limitante, ya que se necesita mucha creatividad para encontrar un uso práctico que impacte al usuario y que principalmente no sea un estorbo en la navegación del sitio. Otro punto importante es que lo más probable necesiten hacerlo con PNG transparente, lo que hace que IE6 sea excluído (salvo utilicen algun buen filtro de PNG para él). Un par de gradiosos ejemplos lo encontramos en el sitio de Silverback y de We all hate quick books.
En este artículo les mostraré cómo se realiza, y lo más probable es que se hagan la misma pregunta que yo me hice: ¿porqué #&œ¥Ω no se me ocurrió a mí antes?
Parallax no es muy amigable, ya que a primera vista no se nota. Se necesita mover la ventana del browser para recién notar el efecto. Primero les presento el ejemplo final, para que puedan apreciar lo que haremos. Si modifican el tamaño de su ventana podrán notar de qué les estoy hablando
Primero necesitamos de las imágenes que formarán nuestras capas. Cuiden de prepararlas cosa que el final y el principio calcen perfectamente; en mi caso con 3 capas necesité montañas, árboles y unas ramas desenfocadas como se muestran en el siguiente diagrama:
Luego, el HTML. Básicamente se compone de (en mi caso) 3 div‘s, uno para cada capa (cada capa anidado en otra):
<div id="montanas">
<div id="arboles">
<div id="hojas">
</div>
</div>
</div>
El <div> #montanas será el que se despliegue más atrás; así #hojas será el que esté más adelante y el que se moverá más rápido que las otras.
El CSS es muy simple. El efecto se logra con un juego de porcentajes: mientras agregamos las imágenes de fondo de los div‘s mediante background-image, posicionamos cada capa (con background-position) con porcentajes horizontales: mientras las montañas se ubican a 30% de la izquierda, las hojas estarán a 70% lo que hará que se muevan en diferentes velocidades si la ventana se mueve. Este juego de porcentajes es toda la técnica, el resto será vil posicionamiento absoluto (para que los elementos estén a 100% alto y ancho, y se ubiquen en el extremo inferior del browser):
#montanas {
background: url(images/montanas.png) 30% bottom repeat-x;
position: absolute;
height: 100%;
width: 100%
}
#arboles {
background: url(images/arboles.png) 50% bottom repeat-x;
position: absolute;
height: 100%;
width: 100%
}
#hojas {
background: url(images/hojas.png) 70% bottom repeat-x;
position: absolute;
height: 100%;
width: 100%
}
Pero ya existe sIFR. Acrónimo de Scalable Inman Flash Replacement, es una técnica que permite que reemplaces elementos de texto con equivalentes en Flash. sIFR es una solución cross-browser ycross-platform para asuntos de tipografía en la web.
Su funcionamiento es bastante práctico. Está compuesto de una película SWF, un archivo Javascript y dos archivos CSS. Con el .swf lo que hará es incluir la tipografía que quieras utilizar en uno o varios estilos (normal, bold, italic). Con el .js se realizará la magia de reemplazar el texto que definas con la película .swf pero sin inyectar el objeto, o sea, tu código fuente generado no tendrá ningún <embed> u <object>, sino que estará el texto que tengas escrito tal y como sería un HTML. Ya los .css ayudan al .js a emplazar las películas (a través de un juego con visibility).
La idea no es reemplazar todos tus textos con tipografías en Flash, sino ser prudentes y sólo enfocarnos en títulos, bloques (blockquote) u otros elementos destacables. Lo bueno es que no pierdes la semántica y los indexadores leerán tu sitio tal y como sería un HTML, ya que realmente ES un HTML. Otra ventaja es que si utilizas la película Flash más de una vez, ésta quedará en el cache del usuario y será cargada sólo una vez, lo que no hará taaaaaaan grave el peso que ganas con esto. Ahora, veámoslo en la práctica:
No es muy complicado de implementar, pero me costó la primera vez así que lo haré didáctico para todos, detallando paso por paso.
Paso 1
Bajar el sIFR de su sitio web.
Paso 2
Crear tu película .swf con la font que desees. Para eso, debes abrir el .fla que está dentro del directorio flash y abrir el MovieClip ‘holder’, allí seleccionas el área de texto dinámico y cambias la tipografía que trae por defecto (Verdana) por la que quieras (en mi caso será Frutiger Condensed… bella).
Un detalle importante para textos no-anglos son los acentos. Por defecto se incluyen caracteres básicos, números y algunos símbolos. Debes agregar a mano los acentos para nuestro idioma que creas necesarios: á é í ó ú ñ ä ë ï ö ü.
Luego publica tu película como siempre lo haces en Flash (command+enter o control+enter en Win) dentro de esta carpeta que estás trabajando (flash). Esto es importante ya que contiene algunos .as que hacen que la magia ocurra. Ponle un nombre característico a tu .swf, quizás el nombre de la familia tipográfica que estás usando sería apropiado.
Paso 3
Ordena tus archivos. Recomiendo que los juntes dentro de un único directorio llamado /sifr. Los únicos que necesitarás de todo eso son:
- tu_tipografia.swf
- sIFR-print.css
- sIFR-screen.css
- sifr.js
Paso 4
Ahora toca configurar nuestro HTML. Lo primero es incluir el .js y los .css correspondientes:
<link rel="stylesheet" href="sifr/sIFR-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="sifr/sIFR-print.css" type="text/css" media="print" />
<script type="text/javascript" src="sifr/sifr.js"></script>
Lo segundo, agregar algunos comandos en Javascript para hacer que nuestra película funcione con los selectores que deseemos:
var tu_tipografia = {
src: ‘sifr/tu_tipografia.swf’
};
sIFR.activate(tu_tipografia);
sIFR.replace(tu_tipografia, {
selector: ‘h1′
,css: {
’.sIFR-root’: {
’color’: ‘#FF0000′,
’font-size’: 56,
’text-align’: ‘center’
}
}
,wmode: ‘transparent’
});
Claramente la variable tu_tipografia y todo lo que tenga este nombre deberá coincidir con el nombre que le has puesto a tu película SWF con la fuente que agregaste en el Paso 2.
El resto son comandos donde dicen cuál es el selector que quieres reemplazar (un H1, una class, un id… enfin) e incluso comandos CSS (no todos, principalmente para estilos de texto como color y tamaño por ejemplo).
Paso 5
Subir todo a un servidor, ya que localmente no podrás ver nada. Desde ahí la verás los resultados.
Miren el código fuente, verán lo simple que es y que funciona de maravilla.
Link
]]>
La clave: la propiedad line-height. Definiento un alto de línea fijo para el contenedor, podremos lograr que todos sus elementos queden centrados relativos a él, ya que al contrario de height, siempre sus elementos hijos quedarán centrados verticalmente. Esto funciona para cualquier etiqueta bloque: <td>, <p>, <li>, etc.
El CSS es el siguiente:
li, td, p {
line-height: 100px;
}
O sea, si el contenedor es un <li>, un <td> o un <p> (pueden ser muchos otros), defino el alto de éste mediante line-height (en vez de hacerlo mediante height) y todos sus elementos de texto y botones quedarán automáticamente centrados verticalmente.
El único problema… si… ese mismo… IE6 y las etiquetas de botones <button> e <input />. Como se darán cuenta, no lo hace del todo bien. Lo siguen IE7 y Opera. Pero hay una manera de solucionarlo mediante CSS pero sólo para IE7 y Opera: definir el alto fijo de los botones mediante height. Pero con IE6 no hay caso, no lo soluciona.. Otro detalle es que no funciona con imágenes <img />. Siento mucho si se decepcionaron leyendo estas últimas palabras… tiene sus limitaciones, pero puede salvar en algunas situaciones.
]]>Lo que se va a ver aquí, será específicamente cómo abordar la estructuración de una botonera de formularios (o de cualquier otro en realidad), y cómo lograr que se estén siempre centradas a pesar de cuántos botones tengan. El ejemplo gráfico a continuación:
He visto muchas soluciones a esto, la mayoría de ellas complicadas (mi slogan siempre es facilitar la vida en su máxima expresión). Por ejemplo, se hacen class’es para cada botón (.boton_aceptar_1, .boton_aceptar_2 etc etc etc) y se posicionan absolutamente. También se hacen class’es a cada botón y se marginan, incluso negativamente (lo que IE6 no ve con buenos ojos). Imagínense si son varias páginas de formularios y los botones se repiten (por ejemplo, el ‘Aceptar’ o el ‘Enviar’ son los más comunes) pero no siempre van de a 2, sino que a veces van solos o de a 3, 4…. enfin. Hacer class’es para cada situación no es la mejor solución, ya que llenaremos la hoja de estilos de propiedades de posicionamiento en vez de aplicar una solución global, independiente de la cantidad de botones que estén involucrados. Bueno, esa es la idea de este artículo.
Es frecuente que los temas que escribo para CSSLab se den mientras estoy en algún proyecto, y me topo con dificultades que logro solucionar, y luego las muestro y explico aquí cómo se resolvió finalmente. Este es otro de esos casos, sólo que este tema lo había resuelto hacía mucho pero se dió nuevamente a manos de otro profesional web con quien trabajo. Lo ayudé con esto y finalmente me tomo el tiempo de explicarlo aquí para todos quienes tengan la misma situación.
Vamos a lo que nos reúne. Construído el lindo formulario, con <fieldset>, <legend>, varios <label>, <input /> y <textarea> quizás, llega la hora de poner los botones de Enviar y No Enviar como en el ejemplo gráfico anterior. Mi método implica utilizar listas, ya que me gustan para contener botones como menúes (aunque puede ser un <div> si quienes, incluso un <p>. Cada uno con su gusto). El HTML de la botonera:
<ul id="botonera">
<li><input type="submit" value="Enviar" /><input type="reset" value="No Enviar" /></li>
</ul>
Como habrán notado, en vez de poner cada botón dentro de un <li></li> y flotarlos a la izquierda (como usualmente se usa para los menúes horizontales), puse todos los botones dentro de un mismo <li>, caso contrario no podrían ser centrados. Entonces, si es sólo un botón, o todos los que sean necesarios, deberán ir consecutivamente uno al lado del otro dentro de un único <li></li>.
Ahora, el CSS que hará la magia:
#botonera {
width: 400px;
margin: 20px auto;
}
#botonera li {
list-style: none;
text-align: center;
}
#botonera input {
margin-left: 10px;
}
Bastante simple. Si se han fijado, lo que hace que se centren los elementos dentro del <li> es el text-align: center; ya que como <input /> es una etiqueta lineal, se alineará tal como lo haría un texto cualquiera. Ese es todo el truco. Lo otro es darle al <input /> un margin-left de unos 10px para que se separen un poco si son 2 o más botones (he visto usar para ello… no es correcto). Saco 3 conclusiones de esta solución:
- No se usa float alguno, lo que no hace el contenedor colapsar así que nos ahorramos un clearfix. Además que no puedes centrar un float.
- Se puede usar para cualquier botón, no sólo <input />: <a> y <button> también son soportados. Así que puedes también hacer un menú horizontal centrado con esta misma técnica.
- Es soportado por todos los browsers.