Escrito por
by Jose M. Alarcon
el 11 enero 2014 00:09
Este post viene a raíz de una pregunta que recibí hace unos días. La cuesti&oac
[Más]
Escrito por
by Jose M. Alarcon
el 23 noviembre 2013 00:33
Cuando diseñamos una interfaz de usuario o una página web, es muy complicado saber de antemano si un determinado texto va a caber dentro de un elemento o no, sobre todo teniendo en cuenta que los diseños fluidos actuales varían constantemente su tamaño para adecuarse al espacio disponible. Para ver a qué me refiero imagina por ejemplo, el título de un artículo que quieres que entre en una sola línea para que no se desplace hacia abajo, rompiendo el diseño, cuando es muy largo. O por ejemplo que quieres crear algunos “tiles” del estilo de los que tiene Windows 8, con textos variables en longitud, y que aunque sean textos muy largos no quieres que puedan ocupar más espacio horizontal del disponible. Por ejemplo, consideremos este código sencillo de una página: 1: <!doctype html>
2: <html lang="en">
3: <head>
4: <meta charset="UTF-8">
5: <title>Texto truncado</title&g...
[Más]
Escrito por
by Jose M. Alarcon
el 20 noviembre 2013 15:38
Una característica muy interesante introducida en CSS3 es la posibilidad de asignar valores a propiedades CSS utilizando cálculos, de forma que en lugar de utilizar valores constantes coo siempre, se utilicen valores dinámicos que varíen en función de ciertas condiciones. Para ello se ha diseñado la función calc de CSS3. Es una función específica para trabajar con valores numéricos (generalmente dimensiones) y que nos permite realizar operaciones matemáticas muy sencillas. Los operadores que permite utilizar son solamente la suma (+), la resta (-), la multiplicación (*) y la división (/). Su principal característica, y para lo que vamos a usarlo realmente la mayor parte de las veces, es que gracias a calc podemos mezclar unidades de medida, incluso relativas y absolutas, en los valores de las propiedades CSS. Por ejemplo: ¿cómo centrarías un elemento dentro de otro de modo que el centro de ambos quede superpuesto? (es decir, un centrado perfecto). Si tenemos estos dos elementos: ...
[Más]
Escrito por
by Jose M. Alarcon
el 22 junio 2013 00:39
Si eres programador avanzado de lado cliente, con HTML5, CSS3 y JavaScript seguramente agradecerás toda la ayuda que puedas obtener a la hora de depurar y afinar tus aplicaciones. Las herramientas de desarrollo que vienen integradas con Google Chrome son una gran ayuda. En mi libro de JavaScript tengo un capítulo entero dedicado a ellas. Además de las herramientas incorporadas de serie, si quieres poder sacar partido a herramientas más avanzadas que de momento Google no tiene terminadas (están en fase experimental) puedes hacerlo de forma sencilla y sin necesidad de descargar o instalar nada. Para ello puedes seguir los siguientes pasos sencillos: 1.- Abre una nueva pestaña de Chrome y escribe chrome://flags Esto abrirá los ajustes avanzados del navegador, que nos permiten ajustar infinidad de parámetros avanzados de funcionamiento del mismo: 2.- Dentro de los ajustes disponibles busca "Enable Developer Tools Experiments" (puedes usar CTRL+F para hacerlo). Para que fu...
[Más]
Escrito por
by Jose M. Alarcon
el 13 junio 2013 01:51
En mi anterior post contaba cómo podíamos utilizar efectos CSS3 para conseguir una mejora sustancial en el aspecto de fotografías (sobre todo de personas), convirtiéndolas en círculos y utilizando efectos auxiliares como bordes y sombras para darles un toque estético adicional. En esta ocasión voy a seguir en la misma línea y mostraré algunos efectos CSS3 adicionales que nos permitirán obtener un aspecto muy diferente: Efecto "Polaroid". Las cámaras de foto instantáneas de tipo "Land" (en honor a su inventor) se empezaron a producir a partir de 1948, pero fue en los años '70 y hasta mediados de los '80 cuando su popularidad alcanzó el máximo apogeo. Históricamente se han producido cientos de modelos diferentes, pero sin duda la empresa que las popularizó fue Polaroid, hasta tal punto que el nombre de esta marca se ha convertido en un genérico para denominar a este tipo de fotografía (como Kleenex para los pañuelos de papel). En la actualidad Polaroid todavía sigue...
[Más]
Escrito por
by Jose M. Alarcon
el 7 junio 2013 23:57
Últimamente está muy de moda ofrecer imágenes mejoradas con algún efecto a la hora de presentarlas en las páginas Web. Por ejemplo, si visitas mi página de Google+ verás que mi foto aparece en forma de círculo, aunque en realidad es cuadrada: La verdad es que queda mucho mejor. Pero, si la foto que yo subí originalmente es cuadrada, esta con forma circular ¿se genera automáticamente a partir de la original? ¿Cómo se consigue ese efecto? La respuesta viene de la mano de CSS y el uso inteligente de los bordes. Bordes redondeados Vamos a partir de una fotografía cuadrada como la que muestra a continuación: Se trata de un paso elevado entre dos edificios en Bellevue (WA). Para conseguir que se visualice recortada en círculo, lo que tenemos que hacer es sacar partido a la propiedad border-radius de CSS 3. Esta propiedad nos permite definir la curvatura en pixeles u otras unidades que va a tener cada uno de los cuatro bordes de un elemento HTML. Así, por ejemplo, si queremos qu...
[Más]
Escrito por
by Jose M. Alarcon
el 18 abril 2013 01:52
Los selectores CSS nos permiten definir con mucha precisión el aspecto (¡y comportamiento!) que van a tener los elementos HTML en nuestras páginas. Así, utilizamos: estilos embebidos, identificadores, clases, pseudo-clases, etiquetas y atributos para definir exactamente cómo ha de funcionar cada elemento. Las hojas de estilo .css suelen tener decenas o cientos de estilos que el navegador debe aplicar a cada elemento. Muchos de estos estilos entran en conflicto, por lo que ¿cómo decide el navegador qué estilo o estilos concretos debe aplicar a un determinado elemento de la página? Pongamos un ejemplo sencillo y consideremos el siguiente fragmento de HTML: 1: <ul id="menu">
2: <li>Menu 001</li>
3: <li class="destacado">Menu 002</li>
4: <li>Menu 003</li>
5: </ul>
Al cual se le aplican los siguientes dos estilos:
1: ul#menu li {
...
[Más]
Escrito por
by Jose M. Alarcon
el 11 junio 2012 01:17
Las hojas de estilo en cascada o CSS son indispensables en cualquier aplicación Web no trivial. Nos permiten definir el estilo visual (e incluso el comportamiento) que mostrarán los diferentes elementos de contenido de una página o aplicación Web. Sin ellas serían imposibles la separación entre contenido y visualización o la adaptación de un mismo diseño de página a diferentes dispositivos.
Todos estamos acostumbrados a escribir CSS con sus diversas combinaciones de selectores, y cuando adquieren su verdadera potencia es, precisamente, al combinar las definiciones de selectores para poder asignar estilos con mucha exactitud.
Por ejemplo, imaginemos que tenemos una página con multitud de listas no ordenadas (por ejemplo colecciones de recursos en Internet) y queremos darle un estilo particular a los elementos de determinadas de estas listas. Podríamos especificar un selector como este:
1: .recurs...
[Más]