Entradas

CSS: Márgenes

Imagen
Los   márgenes en   CSS  se utilizan para generar el espacio alrededor de los elementos ( propiedad denominada Margin en CSS) . Determinan el tamaño del espacio en blanco fuera del borde . Son completamente transparentes y no puede tener un color de fondo. Existen propiedades CSS para establecer el  margin  de cada lado de un elemento (arriba, derecha, abajo, e izquierda). margin-top margin-right margin-bottom margin-left Todos los  margin  propiedades pueden tener los siguientes valores : auto   - el navegador calcula el  margin longitud  - especifica un  margin  en  px, pt, cm  , etc. %   - Especifica un  margin  en% de la anchura del elemento que contiene herencia : especifica que el  margin  debe ser heredado de elemento padre También se utilizan valores negativos para  margins   para solapar contenido . Para acortar el código, es posi...

¿Qué es un código permisivo?

Imagen
¿Qué se pretende decir cuando hablamos de código permisivo ? G eneralmente cuando haces algo mal en el código, hay dos tipos principales de error que podrías encontrar: Errores de sintaxis  : estos son errores de ortografía en su código que realmente hacen que el programa no se ejecute.  Por lo general, son fáciles de corregir siempre que esté familiarizado con la sintaxis del idioma y sepa qué significan los mensajes de error. Errores de lógica  : estos son errores en los que la sintaxis es realmente correcta, pero el código no es el que se pretendía que fuera, lo que significa que el programa se ejecuta incorrectamente.  A menudo son más difíciles de corregir que los errores de sintaxis, ya que no hay un mensaje de error que lo dirija al origen del error. HTML y CSS no sufren de errores de sintaxis porque los navegadores los analizan de forma permisiva , lo que significa que la página aún se muestra aunque haya errores de sintaxis .  Los navegadores ...

CSS: Cascada

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

CSS: cascada y herencia

Imagen
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

Diseño web adaptable, adaptativo o responsivo

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

One Web

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

¿Qué es el diseño líquido?

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

¿Qué es el diseño elástico?

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

Usabilidad web

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

Etiqueta section HTML5

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