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

La cascada Que prevalezcan unos selectores sobre otros en la cascada depende de tres factores (en orden de importancia — los primeros prevalecen sobre los últimos): Importancia Especificidad Orden del código Para el cálculo del valor de una propiedad en cascada se aplican tres fuentes de información: los estilos por defecto que tiene definido el agente de usuario, es decir, el navegador web del usuario .   A continuación, los estilos especificados por el usuario que está leyendo el documento . los estilos definidos por el autor de la página web .   Este es el orden de aplicación de los estilos, de menor prioridad a mayor prioridad. Todos estos estilos definen el estilo final que tiene un elemento en una página web. Los estilos del agente de usuario son los estilos que incorpora cada navegador de fábrica . Lo lógico es esperar que todos los navegadores utilicen el mismo estilo por defecto, pero desgraciadamente no es así y existen algunas difer...

Cascada y herencia son dos mecanismos de CSS que definen las reglas que se aplican para decidir el valor final que toma una propiedad de un elemento concreto de una página web . En el cálculo se tiene que tener en cuenta: el valor especificado el valor calculado el valor usado   el valor real Fuente: Fuentes: Activate, Google España

El  diseño web adaptable  (también  diseño web adaptativo  o  responsivo ; este último  calco  del inglés  responsive web design ), es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las  páginas web  al dispositivo que se esté utilizando para visitarlas . Hoy día las páginas web se ven en multitud de dispositivos como  tabletas ,  teléfonos inteligentes ,  libros electrónicos ,  portátiles ,  PC , etcétera. Además, aún dentro de cada tipo, cada dispositivo tiene sus características concretas: tamaño de pantalla,  resolución , potencia de  CPU , sistema operativo o capacidad de  memoria  entre otras. Esta tecnología pretende que con un único diseño web, todo se vea correctamente en cualquier dispositivo. El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en  A List Apart ,​ una publicac...

El concepto de  One Web  hace referencia a la idea de construir una Web para Todos  ( Web for All ) y accesible desde cualquier tipo de dispositivo ( Web on Everything ). Una web única significa que todo el contenido que publiques debe estar alojado bajo una misma ubicación ( URI ), sin importar la herramienta de acceso (navegadores por ejemplo). Un contenido, una ubicación, en eso se resume la web única. La idea y el propósito del diseño web adaptable fueron previamente discutidos y descritos por el  World Wide Web Consortium  (W3C) en  julio de 2008  en su recomendación  Mobile Web Best Practices  bajo el subtítulo «One Web». Dicha recomendación, redactada específicamente para dispositivos móviles, puntualiza que está hecha en el contexto de   One Web , y que por lo tanto engloba no solo la experiencia de navegación en dispositivos móviles sino también en dispositivos de mayor resolución de pantalla como dispositivos de...

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