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?

Miércoles, 22 Febrero 2017 22:01

Media Queries: Enlaces recomendados

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.

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:

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.

Cabezal artículo Menú desplegable en HTML y CSS

Creando un menú desplegable con HTML5 y CSS3 (primera parte)

Esta entrada responde a una necesidad generalmente básica para el desarrollo de un sitio web: La creación de una barra de navegación (menú) usando HTML y CSS; en nuestro caso HTML5 y CSS3 serán las versiones usadas en este tutorial.

Así, nuestra página al comienzo de nuestro trabajo, tendrá la siguiente estructura:

  <!doctype html>
  <html><head>
    <meta charset="utf-8">
    <title>Creando un menu con HTML y CSS</title>
  </head>
  <body>
  </body>
  </html>

En nuestro caso, supondremos que deseamos una barra de navegación horizontal, para lo cual en los pasos siguientes estaremos abocados a generar los códigos necesarios para lograr este objetivo; así, comenzaremos a colocar, por razones semánticas, dentro de la etiqueta nav [W3C] [esp], una lista sin ordenar (ul), cuyos ítems (li) mostrarán las opciones principales de nuestra barra de menú, con lo que ahora nuestro código será el siguiente:

Martes, 21 Octubre 2014 00:00

CSS: Selectores Básicos

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.