Imágenes responsive con la etiqueta Picture

En muchas ocasiones, el diseño responsive se complica al utilizar las imágenes. Más allá de utilizar la etiqueta Viewport, que vimos hace unos días, o de asignar a las imágenes una anchura relativa con CSS, necesitamos un  método que nos permita seleccionar la imagen más adecuada para cada pantalla en cuanto a su tamaño y resolución. Para eso, tenemos la etiqueta Picture, cuyas principales características explicamos en este artículo.

Leer más

Cómo crear formas avanzadas con border-radius

Si anteriormente nos aproximábamos a las funcionalidades de border-radius para crear bordes redondeados, ahora profundizamos un poco más. Con esta propiedad de CSS3, la imaginación es el límite a la hora de crear diferentes formas, añadir sombras o realizar incluso animaciones en cualquier página web. En este artículo, te queremos detallar cómo sacarle el máximo partido a este elemento, que nos resultará muy útil para incluir formas circulares en cualquier proyecto web directamente desde el código.

Leer más

Viewport, una etiqueta imprescindible para el diseño responsive

Viewport es  la etiqueta que mejor representa la web en movilidad, ya que nos permite indicar cómo se verá un proyecto web en los dispositivos móviles. Apple la creó para decirle al iPhone como debería renderizar el documento, convirtiéndose desde entonces en un estándar que ya está soportado por la mayoría de dispositivos.

Como definición rápida, diremos que viewport podría traducirse como vista o ventana y nos sirve para definir qué área de pantalla está disponible al renderizar un documento, nivel de escalado y el zoom que debe mostrar inicialmente. Todo ello, con parámetros que le damos a la propia etiqueta META.
Leer más

Bordes redondeados con CSS3

Seguimos profundizando en las características del HTML5 y lo hacemos repasando una de las funcionalidades más útiles de CSS3 para diseño web: crear bordes redondeados. Esto lo podemos hacer directamente con el atributo border-radius, que define qué curva tiene que tener el borde del elemento al que se le aplica. Para ello, CSS3 añade novedades en el control de los bordes de los elementos, permitiendo esquinas redondeadas, bordes con imágenes, sombras, etc.
Leer más

¿Qué es y cómo funciona Google AMP?

Google AMP, cuyas siglas en inglés se corresponden con Accelerated Mobile Pages  y que podría traducirse como páginas móviles aceleradas, es una iniciativa que pretende agilizar el tiempo de carga de las páginas web en dispositivos móviles. Desde el punto de vista más técnico, AMP no deja de ser un framework construido con tecnologías ya existentes como HTML o CSS, pero sus novedades y funcionamiento van un poco más allá, como explicamos en este artículo.

Leer más

Básicos de HTML5 – Etiquetas y API

Aunque ya hemos hablando en más de una ocasión de HTML5, siempre conviene recordar que HTML5 no se trata sólo una nueva versión del conocido HTML. Es un estándar que ha mejorado la web, la experiencia de usuario y la experiencia de desarrollo de sitios en Internet. Además de disponer de nuevas etiquetas para el lenguaje de marcación (y aparcar otras), en HTML5 también se engloban nuevas versiones de CSS y API de desarrollo Javascript. Leer más

Cómo instalar el paquete LAMP en un Servidor Cloud

LAMP es un acrónimo de Linux, Apache, MySQL y PHP, un conjunto de tecnologías que sirven como motor para numerosas aplicaciones web. LAMP es el stack de tecnologías más usado en la actualidad, todas ellas de código abierto, con un porcentaje de penetración que supera de largo el 50% de los sitios web. Por eso, es normal que la mayoría de los profesionales de Internet hayan oído hablar de él y que sea otro de los entornos que podemos instalar en sólo unos clics en los Servidores Cloud de Arsys.

Leer más

Personaliza tu WordPress para… Crear páginas web de empresa

Si estás pensando crear tu web de empresa con el gestor de contenidos WordPress, deberás saber que hay numerosos temas y plugins que se pueden adaptar a las necesidades de una página web corporativa e incluyen diferentes funcionalidades que nos resultarán muy útiles. Por ejemplo, es indiscutible que los temas que elijamos deberán tener un diseño que se adapte a dispositivos móviles y, en cuanto a plugins, no puede faltar uno que nos ofrezca optimización SEO, si el tema no lo incluye.

Leer más

Polymer, la librería para agilizar el desarrollo con Web Components

Nos encontramos en un momento en el que no paran de aparecer nuevas propuestas de tecnologías, frameworks y librerías para el desarrollo front-end. Una de las últimas y más versátiles alternativas que se ha sumado a esta corriente es Polymer,  “un nuevo tipo de librería Javascript”, tal y como se define a sí misma.

Su principal diferencia frente a otras librerías y frameworks, es que Polymer está basada en el estándar de los Web Components, una tecnología que está revolucionando el desarrollo web. Ya hemos hablado anteriormente del estándar de los Web Components, tanto desde el punto de vista teórico como desde el punto de vista más práctico, así que hoy toca centramos en esta librería, que nos facilita mucho la vida de cara al trabajo con Web Components.

Leer más