Una cuestión que seguro que has visto implementada muchas veces por toda la Internet son las típicas flechas cuadradas que aparecen generalmente como parte de algún elemento mayor del que forman parte. Me estoy refiriendo a flechas como las que puedes ver en Facebook por ejemplo: o esta otra más pequeña de la misma red social: ¿Cómo podemos crear este tipo de flechas (y algunas otras) usando únicamente CSS y sin necesidad de emplear gráficos? La respuesta es a través del uso inteligente de los bordes en el modelo de cajas de CSS. Para verlo mejor consideremos cómo se pintan los bordes de un elemento HTML, para lo cual vamos a visualizar un simple div como este: <div id="mostrarBordes"></div> con sus cuatro bordes en colores diferentes, con esta regla CSS: #mostrarBordes { width:200px; height:200px; border-style: solid; border-width: 50px; border-color: blue red gr... [Más]

Nota: He estado un poco “missing” desde hace un tiempo, casi un mes, entre otras muchas cosas por que he estado muy involucrado en el lanzamiento de nuestra zona de recursos para programadores en campusMVP.es. En ella encontrarás muchas cosas interesantes para programadores, sobre todo los que se inician, y podrás encontrar trucos, conceptos de base, vídeos prácticos, noticias, y mucho más. Añádelo a favoritos :-) Ahora, para compensar, un artículo bastante a fondo sobre un tema muy interesante... ;-) De toda la vida estamos acostumbrados a que, cuando visualizamos un vídeo, tengamos la opción de verlo a pantalla completa, para poder apreciar todos los detalles y verlo en alta definición. En lo que no se fijaba casi nadie es en que, hasta hace relativamente poco, todos esos visores de vídeo estaban basados en Flash y en menor medida en Silverlight, y esa capacidad de verse a toda pantalla... [Más]

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]

Tenemos una página web (por ejemplo, un blog) en la cual necesitamos insertar vídeos d [Más]

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]

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]

Este post viene a raíz de una pregunta que recibí hace unos días. La cuesti&oac [Más]

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]

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]

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]