¿Qué veremos en Desarrollo web y Diseño web este 2017?

Como ya hicimos hace poco más de un año, repasamos las tendencias que encontraremos en los proyectos web que se lancen en los próximos meses y lo hacemos en dos grandes bloques muy relacionados y que no pueden ir por libre a la hora de lanzar una página web, el Desarrollo y el Diseño web. Ambas disciplinas buscarán en 2017 compaginar la eficiencia en los procesos de trabajo y un mayor rendimiento de las páginas web, con la vista siempre puesta en la mejora de la experiencia de usuario.

Leer más

Cómo utilizar el atributo overflow-wrap para romper palabras en varias líneas

El atributo overflow-wrap  sirve para definir qué hacer cuando hay palabras que, por facilidad de lectura o integración en el diseño, se rompen en varias líneas. En este artículo explicamos cómo utilizar overflow-wrap, un atributo que nos ofrece la posibilidad de decidir el comportamiento de las palabras ante estos saltos de línea.

Leer más

Los diferentes formatos de imagen con los que podemos trabajar

Al trabajar con imágenes, nos encontraremos con diferentes formatos que pueden utilizarse y que van más allá de los formatos nativos de cada programa (como el PSD de Photoshop). A continuación, explicamos las características de los principales formatos estándar y para qué podemos utilizarlos, ya que dependiendo de para qué vayamos a usar las imágenes, podremos optar por uno u otro.

Leer más

¿Qué elementos poner en la home para mejorar la conversión?

La home page o, como se le conoce normalmente, home, es la parte de una página web que más tráfico de visitas recibe, por lo que es imprescindible otorgarle la importancia que merece.  Ya que ésta es la mejor carta de presentación de un website, debe causar una buena impresión al visitante, de manera que se sienta atraído por el contenido y lo suficientemente cómodo para seguir navegando.  En este artículo, repasamos algunos  elementos clave que ayudan a mejorar una home, atrayendo al mayor número de clientes potenciales y mejorando su conversión.

Leer más

Cómo crear un bocadillo de cómic con CSS

Ahora que ya hemos hablado de adaptar los textos a las formas de una imagencrear elipses y otras formas con border-radius, vamos a dar un paso más y  ver una de las muchas técnicas que podríamos usar para crear los bocadillos de las historias de cómic, aquellos que hacen entender que los personajes están hablando o pensando y que puede resultar un recurso muy útil para cualquier página web.

Lo haremos sólo con CSS, sin apoyarnos en imágenes. Esto que optimizará el sitio web y nos permitirá reutilizarlo fácilmente, solo a partir del nombre de una clase que colocaremos a todos los elementos que tengan que representarse como el elemento balloon, el nombre por el que se conocen los bocadillos de cómic en inglés.

Leer más

Estilos CSS básicos para diseño responsive

Tras repasar Viewport y Picture en los últimos días, seguimos profundizando en los principales recursos para diseño responsive. Y no podemos olvidarnos de las Media Queries, tal vez las herramientas más representativas cuando pensamos en CSS para responsive design , ya que permiten realizar la mayor parte del efecto de adaptación a todo tipo de pantallas. De ellas, hablaremos más adelante porque es un tema que da para mucho.

De momento, nos centraremos en una lista de propiedades de estilo CSS para conocer algunas técnicas útiles que conviene tener en cuenta en la maquetación web, especialmente si estamos trabajando en sitios adaptables.

Leer más

Cómo adaptar los textos a las formas de una imagen

Más allá de las características y funcionalidades de border-radius, en más de una ocasión tendremos que maquetar los textos para que se adapten a la forma de la imagen los acompaña, algo que podremos hacer mediante técnicas de CSS, como explicamos a continuación.

Leer más

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 hace unos días 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 cualquier página web.

En este artículo, explicamos cómo sacar el máximo partido a este elemento, que nos resultará muy útil para incluir formas circulares en cualquier proyecto web y 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 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