Logotipo de Xitrus.
sígueme en facebook

Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.

Blog

Si quieres aprender algo nuevo sobre diseño o desarrollo web puedes hacer propuestas en mi Twitter o Facebook e intentare responder a vuestras preguntas en el blog.
04
6

Utiliza media queries en JavaScript con matchMedia

El Responsive Design es una técnica de diseño que ha revolucionado la forma en que vemos las páginas webs, permitiéndonos disponer de una correcta visualización de una misma página en distintos dispositivos.

Las @media queries es el mecanismo más simple de usar detectar las condiciones de visualización del dispositivo (como tamaño de pantalla, orientación...) y ahora con matchMedia disponemos de estas consultas en JavaScript, ejecutando diferente código según el dispositivo o los cambios en su visualización (como girar un movil 90º).

Media queries en JavaScript con matchMedia

La pequeña API matchMedia nos permite hacer básicamente dos cosas: comprobar si se cumple esa @media query y ejecutar una función cuando cambia de estado esta @media query.
De esta forma podremos emular de forma nativa y eficiente los cambios que produce el CSS con las @media queries pero con JavaScript, que como es lógico, nos permite interactuar de una forma más amplia con el diseño y el contenido de la página, como veremos a continuación.


14
5

Atributos personalizados en HTML5 con data-*

HTML5 ha introducido pocos cambios al lenguaje de etiquetas HTML, los más destacados ha sido el de la inserción de nuevas etiquetas, inclusión de microdatos y el tema que vengo a explicar: los atributos personalizados.

Estos atributos personalizados nos permiten añadir información extra a los elementos de nuestro HTML, simplemente añadiendo un nuevo atributo que comience por data- y seguido del nombre mediante el cual accedemos a esta información complementaria. Podemos usar esta información desde JavaScript y CSS de forma muy cómoda.

  1. <li data-edad="21" data-pais="ES">Juan Alonso</li>
  2. <li data-edad="37" data-pais="IT">Manuel Alonso</li>
  3. <li data-edad="34" data-pais="MX">Raúl Alonso</li>
  4. <li data-edad="19" data-pais="FR">Luis Alonso</li>
  5. <li data-edad="24" data-pais="IT">Pablo Alonso</li>
  6. <li data-edad="23" data-pais="ES">Pepe Alonso</li>
  7. <li data-edad="21" data-pais="ES">Javier Alonso</li>
Ejemplo del uso de atributos personalziados.

Aunque hay muchos modos de enviar datos a una web, y puede que este sea uno de los menos usados, este método nos permite generar páginas HTML con toda la información necesaria, sin necesidad de acudir a llamadas mediante AJAX o a añadir información directamente con JavaScript (mediante arrays o JSON).
Vamos a analizar como manipular y usar estos datos, que pueden ser usados con CSS para diferenciar elementos a la hora de aplicar estilos y para añadirlo como texto en pseudo-elementos :after y :before, además de poder ser usados en JavaScript.


01
12

SVG es perfecto para el Responsive Design

SVG (Gráfico Vectorial Escalable) es un nuevo formato que soporta HTML5 y nos ofrece imágenes vectoriales que pueden redimensionarse hasta el infinito y no perder calidad.

Vamos a ver cómo usar archivos SVG nos ayudarán a reducir el tamaño de nuestra web con este ligero formato y como siempre se mantendrá una muy buena calidad en estas imágenes, ya sea en un móvil pequeño o en un monitor de alta resolución.

SVG es una de las mejores opciones para el Responsive Design

Una de las grandes ventajas que tiene SVG es que está basado en XML y se puede comprimir fácilmente en las transmisiones, lo que ayuda a reducir el tamaño de cara a un móvil.
Los archivos SVG se pueden usar de varias formas: como si fuese un elemento más en la página HTML (copiando tal cual el SVG), añadiendo un objeto SVG y añadiendo una imagen con formato SVG.


18
11

Funciones avanzadas de Console de JavaScript

Depurar JavaScript cada vez es más simple, ya que están aumentado cada vez más las facilidades para los programadores. Recientemente los grandes navegadores han añadido el soporte para crear tablas en la consola a partir de objetos.

La API Console nos permite lanzar mensajes (de log, alerta o error), pero gracias a las nuevas tablas podemos hacer cosas tan interesantes como comprobar fácilmente los contenidos que nos envía un servidor.

Depurando JavaScript con Console.

Esta API es compatible con los principales navegadores, por lo que no tenemos que tener miedo de usarla, nos ayudará a analizar mejor nuestro código.
Anteriromente si se quería depurar un código se tenía que crear una pseudo-consola o lanzar alertas, que son molestas para cualquier usuario, por eso es tan cómodo este avance.


12
11

Usa la unidad perfecta para Responsive Design

CSS tiene una serie de unidades de medida distintas, que tienen distintos usos y su función específica. Muchas de estas unidades están presentes desde hace muchos años, antes de la era informática y otras están pensadas para aprovechar las posibilidades digitales.

Vamos a ver los distintos tipos de unidades y cuales usar mejor en un diseño adaptable o Responsive Design, ya sea para dar tamaños a textos o estructuras.

Distintas unidades de medida para Responsive Design.

En el diseño web tenemos dos tipos de unidades: las absolutas (que hacen referencia a medidas reales, como son los centímetros o pulgadas) y las relativas (que varían según otra medida, como son los píxeles o medidas como em o rem).


Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Hosting

Xitrus está alojado en:

Xitrus está alojado en Cyberneticos.
Cerrar sesión
Usuario: Contraseña: