Jueves, 20 Abril 2017 12:32

Consultorio web: La propiedad word-break

Propiedad word-break

Evitar quiebre de palabras con CSS3

Respondiendo a consulta "¿Cómo evitar el quiebre de palabras en HTML5 a través de CSS3?

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.

Maquetación Web: Preparando la barra de navegación

HTML5, CSS3, .js: Maquetando la barra de navegación

En la entrada anterior hicimos un repaso general sobre algunas etiquetas html y propiedades css vistas en clases con las que generamos algunos diseños preliminares para nuestra página web, usando las etiquetas header, div y footer, entre otras; toca el turno ahora de crear un barra de navegación (menu) para nuestro sitio para lo cual partiremos de los siguientes supuestos y condiciones:

Lunes, 22 Agosto 2016 11:28

Introducción a la maquetación web (ii)

Primeros contenedores en html

Diseñando una página web: Primeros estilos y contenedores

En una entrada anterior vimos las etiquetas básicas necesarias en la creación de una página web vacía; continuaremos ahora con la creación de los primeros contenedores (html) y los primeros estilos (css) para dar estructura a los primeros contenidos y elementos de navegación y diseño de nuestra página web.

Visualmente, lograremos algo similar a lo que vemos en la siguiente imagen:

Lunes, 22 Agosto 2016 09:35

Introducción a la maquetación web (i)

Cabezal art. Introducción a la maquetación web

Conceptos básicos: Códigos de una página en blanco

Antes de comenzar con la codificación necesaria para la maquetación de una página web, debemos entender cual es la estructura básica de un documento html vacío. - Lectura recomendada: Introducción al HTML y CSS (i)

Así, todo documento comienza con una declaración que indicará de qué tipo de documento se trata; para un documento HTML5, esta declaración se reduce al código correspondiente a la línea 1 del siguiente código:

HTML5Up

 HTML UP! Templates responsivos en HTML5 and CSS3

Un buen sitio del que descargar recursos para diseño web en el formato de templates responsivos, diseñados y distribuidos bajo licencia Creative Commons Attribution 3.0 por ajlkn, quien, como podemos ver en su cuenta de Twitter, distribuye plantillas de pago de muy buena calidad en esta dirección: https://pixelarity.com/

Saludos para todos!
Plácido Luna.

 

Publicado en Blog

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.

Algunos componentes de ejemplo en HTML5 y CSS3

Construyendo con HTML5 y CSS3

Esta lista de códigos de ejemplo son un complementario a los apuntes y tutoriales sobre diseño web, algunos ejemplos de maquetación de distintos componentes estructurales, visuales y de navegación utilizando HTML5 y CSS3. Bajo el entendido de que se trata de material de apoyo para estudiantes iniciales de diseño los ejemplos se irán publicando en la medida de que las consultas y el desarrollo de las clases lo vayan requiriendo.

Sábado, 28 Mayo 2016 14:33

CSS: Margin + Padding Shorthands (i)

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)

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.

Página 1 de 2