Blog de Notas sobre Temas Introductorios al Desarrollo Web: HTML y CSS

El diseño líquido permite crear diseños que se adaptan correctamente a diferentes dispositivos , pero en situaciones extremas (pantallas muy pequeñas o muy grandes) presenta algunos problemas , además no permite transformaciones profundas en el diseño de la página. En la actualidad, esto es muy importante porque una página web se debe de visualizar correctamente en diferentes dispositivos.   En este tipo de diseño, los elementos de una página web se comportan como el agua: se extienden por la superficie de la página web como el agua sobre una superficie, y se adaptan al recipiente que los contiene.   En el diseño líquido el ancho de la página no es fijo, el tamaño de la página y sus elementos está declarado en relación con el ancho de la ventana , que se suele especificar en porcentaje. S e usa un  porcentaje para definir el tamaño de cada bloque . Con el uso de porcentajes logramos que las diferentes columnas de la página se adapten correctamente a la ...

Diseño elástico es el que permite crear diseños que se adaptan a distintos dispositivos . Este diseño se basa en el tamaño del texto y sus posibilidades son limitadas. En el diseño elástico el ancho de la página no es fijo. El tamaño de la página y sus elementos  está declarado en relación con el tamaño del texto, que se suele especificar en em. La principal  ventaja de este diseño es que cuando se aumenta el tamaño del texto, este se reajusta  perfectamente a la estructura, sin desbordamientos. ¿Cómo se realiza un diseño elástico? Para el body, es decir para toda la página, se define un ancho fijo, y luego se define un ancho para cada una de las columnas que componen la página. La suma del ancho de las columnas es igual al ancho total. Para que esto sea verdad es muy importante poner a cero el margen de la página y de las columnas. La anchura de los distintos bloques de la página tendrás que definirlas con la unidad de medid...

La usabilidad se compone de: diseño, sentido común y simplicidad . Por definición la usabilidad es una cualidad de un servicio o producto que mide la facilidad de uso del mismo. La usabilidad web tiene como objetivo diseñar un sitio web de forma que sus usuarios lo puedan utilizar de la forma más fácil : con el mínimo de estrés, con el mínimo número de errores y con el máximo de eficiencia. La usabilidad web forma parte de una disciplina muy amplia llamada experiencia de usuario ( user experience ). La experiencia de usuario estudia las percepciones y sensaciones que experimenta un usuario durante el uso de un sitio web. Usabilidad: principios básicos Conoce al usuario : debes conocer los conocimientos y destrezas de tus usuarios, debes conocer los condicionantes del ambiente de uso, debes conocer las razones por las que el usuario utiliza tu sistema y debes conocer las expectativas que el usuario tiene al usar tu sistema. Minimiza la memorizac...

La etiqueta  <section>  y su correspondiente etiqueta de cierre  </section>   se utilizan para encerrar el código correspondiente a una sección genérica dentro de un documento o aplicación . Normalmente, un bloque de texto al que perfectamente le podríamos colocar un título o encabezado. Además, todo el contenido que engloba ha de guardar cierta relación entre sí. Dentro de una página web por tanto, pueden existir varios section, cómo no  Es más, dentro de un section pueden haber otros section secundarios y así sucesivamente .  Si una sección es algo que podría tener un título, es lógico pensar además que lo primero que encontraremos dentro es un título   <h1>   y después una etiqueta   <p>   con el contenido de la sección. Una ayuda para decidir si una parte de una página web es o no un section, es tener en cuenta que los section suelen ser temáticos. Suelen englobar contenido que trata de un mismo tema....

Las etiquetas  <header>  y su cierre  </header>   s e encargan de indicar a los navegadores que lo que contienen es la cabecera de la página y que dentro seguramente llevarán lo típico, es decir, algún logotipo, el título de la página, quizás una descripción de la misma y poco más. La norma define a la cabecera como un grupo de ayudas a la navegación. No es una etiqueta obligatoria , aunque debemos usarla si realmente nuestras páginas tienen algún bloque de código que se pueda entender como "cabecera". Además de los elementos citados, un header podría contener un menú de ayuda a la navegación, una tabla de contenidos, un formulario de búsqueda, etc. Su contenido no es tan estricto. Al tratarse de etiquetas semánticas, da igual la posición que ocupen dentro de nuestra página. Quizás hayas diseñado una web en la que el título y la descripción de la web junto con algunos enlaces o ayudas a la navegación los tengas situados en una barra lateral....

La maquetación de una página web consiste en definir la estructura, diseño o composición (en inglés layout o mockup ) de la página. Según el diccionario de la lengua de la Real Academia Española la maqueta es un: “ Boceto previo de la composición de un texto que se va a publicar, usado para determinar sus características definitivas ”. Al maquetar se trabaja mediante bloques. Con estos bloques se puede jugar para definir varias maquetas y tomar una decisión de la publicación final. A la hora de maquetar se tienen que tener en cuenta consideraciones gráficas del diseño, como la claridad , la legibilidad , el correcto uso de los espacios en blanco , la distribución balanceada del contenido y muchas otras consideraciones. En la maquetación de una página web se suelen aplicar los mismos principios y técnicas que se han aplicado tradicionalmente en los medios impresos. Pero hay una diferencia muy importante.           En un medio impreso...

  La presentación visual de una lista se puede cambiar . Por ejemplo, en el caso de una lista no ordenada , en vez de un círculo relleno, un disco, se puede cambiar el estilo del marcador para que sea el contorno de un círculo o un rectángulo . Esto se puede lograr con la utilización de la propiedad de CSS list-style-type . Esta propiedad toma distintos valores según sea una lista no ordenada o una lista ordenada. Ten en cuenta que el estilo de una lista ordenada o numerada se puede cambiar directamente en la lista con el atributo type de HTML . En el caso de las listas ordenadas ,  utilizando el atributo  list-style-type   éste  permite modificar el formato de numeración de los elementos de la lista. Se puede modificar para que se empleen números romanos, letras o simplemente números . list-stype-position , permite modificar la posición del marcador que define cada elemento en una lista. Esta propiedad de CSS puede tomar dos valores , ...

En el artículo “Multi-Device Layout Patterns”, se explican varios patrones de diseño "adaptativo": perteneciente o relativo a la adaptación o a la capacidad de adaptación, tal como indica el Diccionario académico, pues es precisamente lo que persigue este modo de diseñar: que las webs tengan capacidad automática de adaptación al soporte. “ Casi fluido ”, quizás el diseño más popular, y consiste en modificar la anchura de los componentes de la página hasta cierto límite hasta llegar a un diseño de una sola columna. “ Caída de columna ”, es muy parecido, al anterior, en este caso se van situando las columnas una debajo de otra hasta llegar a un diseño en una sola columna. " Cambio de la estructura ”, es quizás el más potente, y consiste en utilizar un diseño distinto para cada situación contemplada. " Pequeños cambios ”, se puede aplicar en diseños sencillos, basados en una sola columna, que sólo necesitan pequeños ajustes en algunos elem...

Los elementos HTML se pueden agrupan según su estructura dividiéndolos en tres grupos: básicos, de cabecera y de cuerpo . Los elementos básicos : Son los elementos que conforman la columna vertebral de un documento HTML: Para un documento normal html head body para uno de marcos html head frameset frame De cabecera : Contienen la información necesaria para el correcto funcionamiento del documento. Elementos de cabecera son   El obligatorio: title Los opcionales: base meta link Los mixtos: style script object y el transicional: isindex . Estos elementos pueden actuar como elementos de cabecera y de cuerpo. De cuerpo : Son los que estructuran el contenido del documento, pueden clasificarse en dos o tres grupos, los que forman parte del flujo del documento, estos son los elementos en bloque y los elementos en línea; y los que no forman parte directa del flujo. En bloque : Elementos en bloque son   p dl div address hr blockquote f...