Escrito por
by Jose M. Alarcon
el 10 abril 2014 12:45
Una necesidad muy común es la de numerar elementos en nuestras páginas web.
Una manera muy sencilla, pero muy poco flexible, es utilizar listas ordenadas, <ol>, que por defecto numeran usando dígitos arábicos (los más habituales) pero que se pueden cambiar por otros tipos de numeración (números romanos o letras, por ejemplo). Sería algo así:
<ol>
<li>Elemento 1
<ol>
<li>Lorem ipsum dolor sit amet.</li>
<li>Consequuntur, in facilis quae praesentium?</li>
</ol>
</li>
<li>Elemento 2
<ol>
<li>Lorem ipsum dolor sit amet.</li>
<li>Quasi illo aperiam labore aliquid!</li>
</ol>
</li>
<li>Elemento 3
<ol>
<li>Lorem ipsum dolor sit amet.</l...
[Más]
Escrito por
by Jose M. Alarcon
el 28 marzo 2014 16:35
Tenemos una página web (por ejemplo, un blog) en la cual necesitamos insertar vídeos d
[Más]
Escrito por
by Jose M. Alarcon
el 13 febrero 2014 18:36
En Google Chrome siempre ha sido muy sencillo “simular” otros navegadores cambiando la cadena de usuario (User Agent String) del navegador desde las herramientas del desarrollador (pulsando F12): Además se podía especificar unas dimensiones para la ventana y algunos otros ajustes que permitían simular otros navegadores fácilmente. En la reciente versión 31 del navegador, Google decidió retirar la posibilidad de cambiar el agente de usuario y estos otros ajustes desde las herramientas del desarrollador, por lo que si estás usando ese navegador ya no podrás hacerlo directamente. Internet Explorer permite el cambio de la cadena de agente de usuario y otros parámetros desde sus herramientas del desarrollador (con F12 también), usando para ello la pestaña inferior: que es equivalente a la que tenía Chrome. Si quieres poder cambiar a voluntad el agente de usuario desde Chrome te recomiendo que utilices alguna de las extensiones disponibles para ello, por ejemplo User Agent Switch...
[Más]
Escrito por
by Jose M. Alarcon
el 27 enero 2014 14:45
Hoy un truco rápido pero interesante. Si tienes una página HTML en la que debes incluir un marco interno que muestra recursos de otras páginas lo normal es que simplemente insertes el iframe y punto. Por ejemplo <iframe src=“/modulo/OtraPagina.aspx” style=”width:100%;height:30px;”>
Lo malo de hacer esto es que el contenido del marco lógicamente comienza a cargar más tarde que el de la propia página, y por regla general observamos durante una fracción de segundo (o puede que más si la carga es lenta) un espacio en blanco en donde va a estar situado el nuevo contenido. Si el fondo de la página principal no es blanco se notará un montón y producirá una especie de “parpadeo” que se notará, puede resultar molesto y además queda poco profesional.
Un primer intento que podemos hacer para solucionarlo es cambiar el color del fondo del marco para que coincida con el fondo de la página. Pero no funcionará porque lo que tenemos dentro del marco es un nuevo documento HTML...
[Más]
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]