En el Manual de Responsive hemos conocido muchas características deseables de los sitios de Internet de hoy en general y de los sitios adaptables en particular. Ahora vamos a comenzar con una aproximación al flujo de trabajo que se podría realizar para la creación de un «layout responsive». Claro que hay muchas técnicas que deberemos conocer para poder producirlos, ya en código, pero no nos vamos a meter todavía con explicaciones demasiado técnicas, sino a estudiar los posibles procesos de diseño. Con el término «proceso de diseño» de momento nos referimos al…

Leer más

En líneas generales todo lo que vamos a comentar sirve también para el diseño web en general. Pues bien, cuando diseñamos una web, queremos que sea fácilmente usable y consumible y por ello debemos optimizarla en varios sentidos. El objetivo es el de siempre, que las personas aprovechen la página, tengan una experiencia de usuario grata y accedan a los contenidos que nosotros queremos. Diseño responsive no es solamente hacer que una web se adapte tanto a las pantallas de ordenadores como a las de los móviles, que también lo…

Leer más

Responsive Web Design es la técnica que nos permite crear sitios adaptables a las condiciones del ordenador o dispositivo desde donde se van a acceder, sobre todo en lo que tiene relación con la pantalla del sistema donde se están visualizando. Aunque el término es suficientemente general como para poder referirse a una adaptabilidad en torno a cualquier condición. En este artículo vamos a intentar aclarar el término para que los lectores sepan bien a qué nos referimos. Antes de pensar en la web, podemos entender el término «responsive» en…

Leer más

Los elementos se pueden hacer flotar a la derecha o a la izquierda usando la propiedad float. Es decir, que la caja con su contenido flota bien a la derecha o la izquierda de un documento (o de la caja contenedora) [véase la lección 9 que describe el modelo de caja]. La siguiente imagen muestra este principio: Por ejemplo, si quisiéramos texto con ajuste de línea alrededor de una imagen, el resultado sería el siguiente: ¿Cómo se hace? El código HTML del ejemplo anterior es el siguiente: <div id=»picture»> <img src=»bill.jpg» alt=»Bill Gates»>…

Leer más

Ya puedes aplicar lo que aprendiste en las lecciones anteriores a los enlaces (es decir, cambiar colores, fuentes, subrayado, etc.). La novedad respecto a los enlaces es que CSS te permite definir estas propiedades de forma diferente dependiendo del estado del mismo, es decir, si el enlace se ha visitado, no se ha visitado, si es el enlace activo o si el cursor está sobre dicho enlace. Esto permite añadir efectos divertidos y útiles a tu sitio web. Para controlar estos efectos se usan lo que se ha denominado como…

Leer más

En esta lección aprenderás nociones sobre fuentes y cómo se aplican usando CSS. También veremos cómo solucionar el tema de que las fuentes específicas elegidas para un sitio web sólo se pueden ver si están instaladas en el PC desde el que se accede a dicho sitio web. Se describirán las siguientes propiedades CSS: font-family font-style font-variant font-weight font-size font Familia de fuentes [font-family] La propiedad font-family se usa para establecer una lista ordenada de fuentes que se usarán para mostrar un elemento determinado o una página web. Si la primera fuente…

Leer más

En esta lección aprenderás a aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo. Se explicarán las siguientes propiedades CSS: color background-color background-image background-repeat background-attachment background-position background Color de primer plano: la propiedad ‘color’ La propiedad color describe el color de primer plano de un elemento. Por ejemplo, imagina que queremos que todos los títulos de un documento aparezcan con color rojo oscuro. Todos los títulos están marcados con el elemento <h1>. El código siguiente establece el color de los elementos <h1> como…

Leer más

En esta lección aprenderás a crear tu primera hoja de estilo; conocerás el modelo básico de CSS y qué código es necesario para usar CSS en un documento HTML. Muchas de las propiedades que se usan en las hojas de estilo en cascada (CSS) son parecidas a las de HTML. Así pues, si estás acostumbrado a usar HTML para cuestiones de presentación, lo más probable es que reconozcas gran parte del código usado. Examinemos un ejemplo concreto. La sintaxis básica de CSS Digamos que queremos un bonito color rojo como…

Leer más

Se expone en esta página una tabla con todos los atributos de HTML y a su lado el elemento al que corresponde con un enlace a la página específica del mismo. La columna «Des» con una letra «D» nos indica que el atributo está desaprobado. La columna «DTD» con la letra «L» se refiere a atributos de los elementos que no aparecen en documentos con marcos o frames. La letra «F» se refiere a atributos de los elementos incluidos en documentos con marcos. La última columna nos da una pequeña…

Leer más

Probablemente estés viendo texto negro sobre un fondo blando, pero esto depende de cómo esté tu navegador configurado. Para que la página tenga algo más de encanto podemos añadir algunos colores. (Deja el navegador abierto, lo utilizaremos más tarde). Comenzaremos con una hoja de estilo interna en el archivo HTML. Más adelante, pondremos el HTML y el CSS en archivos diferentes. La separación de estos archivos es recomendable ya que facilita la utilización de la misma hoja de estilo para diferentes archivos HTML: sólo tienes que escribir la hoja de…

Leer más