Artículos y tips sobre diseño web

Somos desarrolladores, especialistas en diseño y desarrollo web. Aquí os dejamos unos pequeños tutoriales y trucos para todos aquellos que os estés iniciando en este mundo.

Depurar la versión para imprimir de una web con el inspector de elementos
Depurar la versión para imprimir de una web con el inspector de elementos

Depurar la versión para imprimir de una web con el inspector de elementos

2022-04-18T13:18:36+01:0002/08/2017|Diseño web|

Los desarrolladores web estamos acostumbrados a utilizar el inspector de elementos del navegador para depurar nuestro código y, así, resolver problemas de diseño, identificando los elementos y modificando dinámicamente sus estilos. Estábamos creando la versión imprimible de una web, cuando nos encontramos con el problema de que queríamos depurar la regla css @media print y no sabíamos

Más información

Botón para imprimir página web con JavaScript
Botón para imprimir página web con JavaScript

Botón para imprimir página web con JavaScript

2022-04-18T13:18:55+01:0002/08/2017|Diseño web, HTML5|

Os dejamos las instrucciones de cómo incluir un botón de "IMPRIMIR" en una página web, ya sea desarrollada a medida o un WordPress (utilizando un plugin). Si se trata de una página web desarrollada a medida Aquí os dejamos el código para insertar un enlace o botón de "IMPRIMIR" en el código fuente de vuestra web:

Más información

Sombreado avanzado con CSS3
Sombreado avanzado con CSS3

Sombreado avanzado con CSS3

2020-10-28T17:18:56+01:0010/09/2016|Diseño web, HTML5|

En la entrada anterior vimos el uso de sombras en elementos HTML. Ahora vamos a ver algunos parámetros más de sombreado. Hasta ahora habíamos visto que podíamos desplazar horizontalmente la sombra, verticalmente, y desenfocarla. Pero no hay que confundir esos desplazamientos con el tamaño de la sombra. Puede parecer que cuando decimos 10px estamos diciendo que

Más información

Formularios HTML5: Date, cómo usar y detectar calendarios nativos
Formularios HTML5: Date, cómo usar y detectar calendarios nativos

Formularios HTML5: Date, cómo usar y detectar calendarios nativos

2020-10-29T13:50:20+01:0020/06/2013|Diseño web, HTML5|

Una de las novedades anunciadas en HTML5 desde el principio son los nuevos tipos de elementos para formulario. Selectores de color, numéricos, fechas, rangos o urls entre otros. El problema llega cuando pasan los años, y hay navegadores que no implementan estos elementos (ni la W3C saca una recomendación definitiva), y tenemos navegadores que los soportan

Más información

CSS Flexible Box Layout «Flexibox»: Introducción
CSS Flexible Box Layout «Flexibox»: Introducción

CSS Flexible Box Layout «Flexibox»: Introducción

2018-08-29T08:55:52+01:0004/06/2013|Diseño web, HTML5|

El Flexible box layout module, más conocido como “flexibox” es una especificación de CSS3 muy útil, que podría cambiar la forma de hacer las interfaces en la web, pero también es uno de las especificaciones que ha tenido más cambios, diferencias entre navegadores y errores de los últimos años. Básicamente nos deja elegir la

Más información

CSS Display table: maquetación como tablas y solución para IE7
CSS Display table: maquetación como tablas y solución para IE7

CSS Display table: maquetación como tablas y solución para IE7

2018-08-29T08:58:27+01:0010/05/2013|Diseño web, HTML5|

Una de las cosas que todos hemos hecho cuando empezábamos a curiosear con la maquetación web es usar tablas por todos lados, algo desaconsejado. Pero naturalmente es tan cómodo: Quiero algo a dos columnas, pues dos celdas; tengo alineación vertical del contenido; ajuste del ancho según contenido; puedo hacer que una celda ocupe varias

Más información

URLs amigables: evitar bromas con los slugs
URLs amigables: evitar bromas con los slugs

URLs amigables: evitar bromas con los slugs

2018-08-29T08:58:49+01:0007/05/2013|Diseño web, SEO|

En el mundo del SEO una de las normas de optimización de webs es poner palabras clave en las URL dinámicas, como añadido, o a ser posible con re-escritura. Es decir si tenemos un producto en la URL: tienda.es?producto=141 Se puede añadir un slug: tienda.es?producto=141&slug=rizador-de-pelo O mediante re-escritura (en Apache con el mod-rewrite): tienda.es/productos/141/rizador-de-pelo O mediante

Más información

Twitter cards: metadatos para twitter
Twitter cards: metadatos para twitter

Twitter cards: metadatos para twitter

2019-12-29T12:39:05+01:0001/04/2013|Diseño web, SEO|

En el blog ya hemos hablado de open graph y su uso para facebook. Twitter tiene algo parecido, que son las Twitter cards. En los últimos meses Twitter ha añadido una opción por la que si un tweet lleva enlazada una imagen o un vídeo podemos abrir el tweet directamente para ver la imagen o vídeo sin

Más información

Botones para compartir en Facebook y Twitter
Botones para compartir en Facebook y Twitter

Botones para compartir en Facebook y Twitter

2019-12-31T00:18:05+01:0012/03/2013|Diseño web|

Hay muchas herramientas que nos dejan incrustar en nuestra página botones de compartir para decenas de páginas. Pero si queremos hacer unos botones personalizados, vamos a mostrar una forma sencilla de hacerlo para facebook y twitter.Ejemplo sencillo: <a style="color: #e3778f;" href="http://www.facebook.com/sharer.php?u=https://www.tictacsoluciones.com&t=Blog%20de%20Tictac" target="_blank" rel="noopener">Compartir este blog en Facebook</a> <span style="color: #e3778f;"><a class="twitter-share-button" style="color: #e3778f;" href="https://twitter.com/share" data-lang="es" data-url="http://www.blog.tictacsoluciones.com" data-via="Tictac_si">Compartir este blog

Más información

Canvas HTML5: texto con fillText y strokeText
Canvas HTML5: texto con fillText y strokeText

Canvas HTML5: texto con fillText y strokeText

2022-04-18T13:21:30+01:0019/02/2013|Diseño web, HTML5|

Volvemos a hablar del elemento canvas de HTML5, al que ya hemos dedicado varias entradas. Ya hemos visto como dibujar figuras sencillas, hacer animaciones y transformaciones a estas figuras y cómo decidir la forma en que se calculan los espacios donde se junta más de un elemento de dibujo. En esta entrada vamos a hablar de

Más información

Anterior 345 Siguiente