Las media queries y el diseño responsivo

Citando brevemente esta entrada de Wikipedia sobre "Media Query" tenemos que:

En desarrollo web, Media Queries es un módulo CSS3 que permite adaptar la representación del contenido a características del dispositivo como la resolución de pantalla...

En una nota del mismo sitio, esta vez sobre Diseño Web adaptable leemos que:

El diseño web adaptable se hace posible gracias a la introducción de las media queries en las propiedades de los estilos CSS en su versión número 3. Las media queries son una serie de órdenes que se incluyen en la hoja de estilos que indica al documento HTML cómo debe comportarse en diferentes resoluciones de pantalla.

Experimentando con static, relative, absolute, fixed

En esta entrada exploraremos, de manera no formal, el comportamiento de tres divs (etiquetas de bloque) al someterlos a cambios de posicionamientos usando estilos CSS.

Algunas pasos a considerar durante el desarrollo de un sitio web

Varios de los problemas con los que muchas veces se encuentran, tanto estudiantes como jóvenes profesionales del diseño, al momento de proyectar un sitio web comienzan desde el momento de conceptualizar el diseño; conceptualización que, en muchos casos ni siquiera existe, o se limita a procesos tales como la búsqueda de ejemplos y plantillas, sin siquiera evaluar cuáles serán los objetivos, el contenido, público objetivo, frecuencias de actualización de los contenidos, etc.

Pensada como un material de apoyo en clases para mis cursos de diseño web, esta entrada intenta mostrar gráfica y textualmente algunos pasos básicos vitales al momento de diseñar un sitio web, sin llegar, ni aproximarse, a lo que sería el desarrollo de un brief de diseño (para esto te invitamos a leer las siguientes entradas: "Consideraciones para el desarrollo de un brief creativo" y "Bases para redactar el brief de una campaña gráfica" en este mismo sitio).

HTML y CSS: Notas preliminares

HTML

HTML es un pseudolenguaje que permite crear documentos web; sus siglas corresponden a HyperText Markup Language, que en español podría traducirse como lenguaje de marcado de hipertexto, múltiples páginas web, vinculadas entre sí, y en su conjunto pueden configurar un sitio web.

HTML ha tenido una evolución en el tiempo, llegando a la versión actual HTML5, cuya referencia oficial la tenemos en la siguiente dirección: https://www.w3.org/TR/html5/, página del W3C, organización internacional dedicada a la estandarización de las tecnologías asociadas a la Web.

Diseñando una interfaz de usuario (web)

El diseñador web debe entender las reglas básicas sobre cómo diseñar un interfaz de usuario (UI); principalmente, saber que las necesidades de éste deben ser las impulsoras de todas las decisiones del diseño, de forma que le permitan cumplir la tarea con eficiencia, y disfrutar de la experiencia (UX).

Dirigido a estudiantes que toman primer contacto con el diseño de interfaces gráficas, este artículo tiene como objetivo servir de guía básica al momento de crear o modificar una interfaz de usuario, especialmente, interfaces gráficas para sitios web, para lo cual debemos recordar siempre que, para que una interfaz de gráfica cumpla con sus funciones eficiente y consistentemente, debe responder rápida e intuitivamente a las exigencias de sus usuarios, sin olvidar con esto los aspectos gráficos de la misma.

Veamos entonces los siguientes puntos:

Material de apoyo para los cursos introductores de diseño web en HTML y CSS.

Hojas de estilo CSS

Selectores Básicos

El Selector universal (*)

Aplica las propiedades en él definidas a todos los elementos definidos en la página web a la que se asocie este estilo.

Ejemplo:

* {margin: 0;
    padding: 0; }

asignará márgenes y rellenos con valor cero para todas aquellos elementos html a los que no se les asocie otro estilo.