Apuntes sobre diseño Web
Miércoles, 22 Febrero 2017 22:01

Media Queries: Enlaces recomendados

Valora este artículo
(2 votos)

Cabezal entrada sobre Media Queries

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.

Valora este artículo
(1 Voto)

Cabezal posicionamientos html css

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.

Valora este artículo
(3 votos)

Diseño Web: Algunas etapas a considerar

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).

Valora este artículo
(1 Voto)

Mobirise

Diseño web (casi) sin códigos

Hace ya un tiempo descubrí Mobirise, una aplicación de escritorio gratuita, desarrollada para Windows y Mac, que permite crear sitios web páginas web responsivas de forma visual, generando de forma automática los códigos necesarios.

Sábado, 28 Mayo 2016 14:33

CSS: Margin + Padding Shorthands (i)

Valora este artículo
(1 Voto)

Cabezal sobre métodos abreviados en margin y padding css

CSS: Abreviando la escritura de valores en margin y padding

Como material de apoyo a los cursos de diseño web publico esta entrada con algunas ayudas gráficas sobre la forma de codificar en forma abreviada los valores para márgenes y rellenos con CSS; teniendo en cuenta que la escritura, en ambos casos, se puede escribir de forma corta siguiendo el mismo método.

Como veremos más abajo, la escitura de códigos usando shorthands expresa valores comenzando por el lado superior de la caja, luego se expresan los valores para el lado derecho, inferior e izquierdo. Siguiendo el sentido de las agujas del reloj, serían las direcciones que toman el indicador horario de un reloj a las 12, a las 3, 6 y 9 horas.

Veamos entonces cuáles los cuatro modos posibles:

Miércoles, 27 Abril 2016 09:35

Introducción al HTML y CSS (i)

Valora este artículo
(1 Voto)

Cabezal artículo HTML y CSS: Notas preliminares

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.

Miércoles, 11 Noviembre 2015 00:00

Diseño de Interfaces Web: Algunas pautas básicas

Valora este artículo
(3 votos)

Cabezal artículo diseño de interfaces 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:

Valora este artículo
(3 votos)

Seis servicios de hosting gratuitos - Banner

Seis sitios en los cuales obtener hosting web gratuito

La siguiente entrada contiene cinco enlaces hacia sitios que ofrecen servicios de hospedaje gratuito (hosting gratuito) donde almacenar los archivos de nuestros sitios web, lo cuales, normalmente quedarán registrados como subdominio de éstos; al momento de publicar este artículo, cada uno de ellos contaba con el protocolo de transferencia de archivos (FTP), de modo de poder permitir a los estudiantes configurar y utilizar correctamente algún cliente para dicho protocolo (Filezilla, Dreamweaver, etc.).

Es importante leer las condiciones del contrato antes de registrar la cuenta, ya que, como suele suceder en muchos de estos casos, los proveedores del servicio se financian con la publicidad que publican bajo nuestras cuentas (generalmente a modo de banners), y si el sitio no cuenta con actividad es probable que la misma corra el riesgo de ser borrada luego de cierto, igualmente los seis proveedores siguientes cumplen con el propósito arriba mencionado.

Comencemos con la lista; los dos primeros son los que generalmente recomiendo entre los estudiantes que necesitan o quieren tener una cuenta para trabajar o practicar, y no disponen de los recursos para contratar un servicio de hosting y el registro de un dominio primario:

Martes, 21 Octubre 2014 00:00

CSS: Selectores Básicos

Valora este artículo
(8 votos)

Selectores CSS - Cabezal del artículo

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.