Media Queries: screen

Los media queries son sentencias que escribimos en los CSS dónde indicamos que ciertos estilos se apliquen si se cumple unos requisitos determinados. En las CSS los usamos principalmente para aplicar unos estilos según la resolución de la pantalla:

Aplicar sólo en resoluciones de pantalla menores que X píxeles de ancho:

@media screen and (max-width:Xpx) { /*estilos */ }
Anuncios

Media Queries: Incompatibilidad con IE

Los media queries son bastante útiles a la hora de conseguir ajustar diseños según la resolución de pantalla, sin embargo puede suponer un problema en Internet Explorer.

Para ello los desarrolladores nos han creado una librería js para contrarestar ese comportamiento.
Sólamente hay que descargarla: css3-mediaqueries-js, pinchamos en el enlace que nos dan en la web, nos dará error, vamos a la dirección del navegador y quitamos el *:
URL en barra de navegación

CSS3: box-sizing: border-box;

Una de las novedades que nos trajo CSS3 es esta propiedad “box-sizing” dándole el valor de “border-box” conseguimos que la suma de padding y border no aumenten el ancho del elemento.

 .estiloCSS3a{    	   -webkit-box-sizing: border-box;        -moz-box-sizing: border-box; 		box-sizing: border-box;   width: 300px;   margin: 10px auto;   border: 5px solid green;   padding: 5px;    } .estiloCSS3b {   width: 300px;   margin: 10px auto;   border: 5px solid green;   padding: 5px; }

Shorthand

Las propiedades shorthand es una bonita terminología cuando establecemos varios valores de diferentes propiedades en un mismo apunte.
Hay una cosa que me gusta y a veces ha sido criticado, es escribir el css en línea, y no es más que la obsesión por simplificar css y es debido a que un portal web profesional, acustumbra a tener varias hojas de estilo que pesan y suman cada renglón, debe entenderlo el navegador lo más rápidamente posible. Así que si reducimos líneas, mejor, y si anotamos los valores de varias propiedades relacionadas en el mismo apunte, más que nos quitamos.
Los shorthand ayudan a simplificar al máximo, lo hemos usado mucho, estas son algunos ejemplos:

Grid: Preparativos

En la maquetación de una página comenzamos por la declaración del tipo de documento, en nuestro caso, para el diseño de rejillas, tenemos que usar HTML5, por lo que empezamos nuestra página con:

 <!DOCTYPE html> <html lang="es">    ...    </html>

Open Graph y Twitter Card Tags

Este término, Open Graph (El protocolo Open Graph), aparece para que podamos tener un mayor control sobre cómo compartimos en las redes sociales, en concreto en Facebook. He leído muchas cosas sobre ella y a veces creo que todo es para enrevesar. En resumen diré, que son unas etiquetas que ponemos en la cabecera de nuestra web (metatag social), que van a indicar a Facebook y otras redes que las usan, como Google+ y LinkedIn, cómo y qué están publicando. Aprovecharemos y hablaremos de las Twitter Card Tags, que es lo mismo, sólo que para twitter.

Estructura básica de una web

Una de las grandes dificultades de éste trabajo y a la vez, lo bonito, es lo rápido que cambia el modo en que se hacen las cosas. De ello te das cuenta cuando haces un parón, aparentemente breve, y cuando vuelves a establecer contacto con tu gremio, a través de colaboraciones, grupos, etc.,