Inline-block es un valor de la propiedad display cuya finalidad es hacer que el elemento seleccionado se comporte como un bloque y un elemento en línea. Digamos que es combinar display: inline con display: block. De esta forma nuestro elemento tendrá propiedades de bloque pero no provocará un salto de línea, siempre y cuando entre en el flujo de bloques a dibujar, no superando el ancho disponible. Si pensamos casos en los que utilizamos float, muchos de ellos se pueden hacer también con inline-block, pero por ejemplo imaginemos este…
En muchas ocasiones necesitamos colocar en una página web un triángulo, ya sea para señalar algo con una flecha, en una paginación de una galería o listado de cualquier cosa, o incluso para ponerle a una capa esquinas con cierta forma poligonal (donde obviamente no son redondeadas). Es posible que de primeras pensemos en colocar imágenes con dichas formas, pero hay que tener en cuenta el papel de los bordes en las capas HTML. Los bordes al formarse se generan en ángulo, es decir, si a una capa le ponemos anchura 0 y altura 0, y le damos…
Antes de nada debemos preguntarnos, ¿qué es un polyfill? Un polyfill es un trozo de código (un plugin) que proporciona la tecnología que el desarrollador espera obtener del navegador de forma nativa. En definitiva se trata de hacer que aquellos navegadores que no son compatibles con una característica nueva, la incorporen a través de fallbacks, es decir de código, en su mayor medida javascript, que se encargue de realizar dicha funcionalidad. Por ejemplo si queremos utilizar las nuevas etiquetas semánticas de HTML 5, debemos utilizar un…
Cómo reducir la carga del servidor reduciendo y combinando las hojas de estilo y javascripts
¿Cómo podemos mejorar la velocidad y prestaciones de nuestras páginas web? ¿Estas técnicas hacen más dificil la programación web o existen herramientas que simplifican y automatizan estas tareas de forma que podemos seguir trabajando de forma cómoda? Estas preguntas son las que trata de ayudar a aclarar este artículo.

HTML5 nos brinda la posibilidad de poder añadir más semántica a nuestras webs, pudiendo hacer distinciones entre bloques de contenido utilizando etiquetas como <ARTICLE>, <SECTION>, <HEADER>, <FOOTER>, … en lugar de poder distinguir únicamente por estructura entre elementos de bloque o elementos en línea.

A veces no resulta tan trivial conseguir que nuestros contenidos se centren verticalmente, es por ello que vamos a explicar como llevar dicha a cabo dicha tarea de una forma sencilla. Antes de nada repasemos como funciona el centrado de contenidos horizontalmente: Al elemento contenedor le ponemos la propiedad “text-align” con valor “center” y los elementos interiores se centran. Ahora bien este centrado solo funciona con elementos inline, si lo que queremos es centrar bloques, entonces debemos utilizar la propiedad “margin” con valores “0 auto”…
Vamos a ver como crear un pasador sencillo con jQuery. Para ello lo primero es crear la estructura html, donde tendremos básicamente una capa contenido con un ancho fijo y overflow oculto, y dentro de esta una capa llamada carril que contiene todos los elementos del pasador, y será la que iremos moviendo de posición para así conseguir el efecto buscado. Los enlaces para pasar de página los colocamos en una capa padre a la capa contenido, dado que la capa contenido tiene overflow oculto y de meterlos dentro no se verían. Por tanto tendremos el…
A la hora de crear páginas webs a veces nos encontramos limitados por las tipografías o fuentes tipográficas que podemos utilizar en ellas, dado que no todos los navegadores y sistemas operativos incluyen el mismo número de fuentes, y las tipografías de los sistemas operativos no serán las mismas. Por ello si queremos aplicar cualquier fuente a nuestra página podemos hacer lo siguiente: Lo primero es descargar la fuente en formato True Type, cuya extensión es ttf. Una vez tengamos la fuente en ttf, debemos convertirla también a…
En esta entrada vamos a ver como olvidarnos de las tablas para maquetar, ya que mostraremos como crear un típica web con cabecera, contenido y menu lateral, y pie utilizando solo capas y CSS.Primeramente recordemos como se hacía esto con tablas, para así poder apreciar la mayor sencillez de utilizar CSS con capas: <table> <tr> <td> <table><tr><td>Cabecera</td></tr></table> </td> </tr> <tr> <td> <table><tr> <td>Menu Lateral…