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

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

Los elementos HTML se dividen en dos grandes tipos: elementos block   (o de bloque)que tienden a ocupar el espacio disponible a todo lo ancho y en caso de existir varios se sitúan unos debajo de otros y elementos inline (en línea) que ocupan el espacio necesario dentro de una línea y en caso de existir varios se sitúan uno junto a otro en la misma línea (siempre que haya espacio).   Los principales elementos HTML tipo block son: a) Divisores : div b) Párrafos : p c) Formularios : form d) Títulos : h1, h2, h3, h4, h5, h6. e) Listas : ul, ol f) Elementos de listas : li g) Tablas : table h) Otros : center, pre, tbody, td, th, tr… Los principales elementos HTML tipo inline son: a) Links : a b) Divisores : span c) Imágenes : img (aunque este elemento tiene características especiales) d) Controles de formulario : input, label e) Otros : strong, u, select… Queda fuera de la clasificación el elemento body, que engloba todo el espacio disponible en el...

El diseño con rejilla o retícula es una técnica empleada en el diseño tradicional que ofrece múltiples beneficios (correcta colocación, crea una estructura ordenada y proporciona claridad y continuidad en el diseño). Su función es dividir la página en campos e intervalos , dentro del espacio definido por los márgenes. Su o bjetivo es mantener una colocación correcta de los elemento dentro de la página , dando una sensación de estructura ordenada y proporcionando claridad y continuidad en el diseño.   ¿Cómo se hace un diseño con rejilla en una página web? Puede serte útil un framework de CSS llamado 960 grid system. Este es un framework q ue lo único que ofrece es una rejilla. Como indica su nombre se basa en una rejilla de 960 píxeles de ancho. Se puede definir el ancho de la columna, el número de columnas y el gutter, que es el espacio que se quiere dejar entre dos columnas. Esta herramienta permite una previsualización de la...