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

Tim Berners Lee , inventor de la World Wide Web, alerta de la concentración de poder en unas pocas plataformas tecnológicas y de la dificultad de acceso a la Red en países pobres. Desde su Fundación lucha centrándose en ciertas consideraciones y declara que es necesario : Cerrar la brecha digital Conseguir que la web funcione en beneficio de las personas Incorporar más voces al debate sobre el futuro de la web Fuente: El País

El 5 de julio de 2018, el pleno del Parlamento Europeo votará si proceder con una propuesta de directiva sobre los derechos de autor . Esta, si se aprobase, dañaría significativamente la Internet abierta que hoy conocemos .  En lugar de actualizar las leyes de derechos de autor en Europa y promover la participación de toda la ciudadanía en la sociedad de la información, la directiva amenazaría la libertad en línea e impondría nuevos filtros, barreras y restricciones para acceder a la Web . Si la propuesta se aprobase en su versión actual, acciones como el compartir una noticia en las redes sociales o el acceder a ella a través de un motor de búsqueda se harían más complicadas en Internet.  Hasta ahora se han opuesto firmemente a esta propuesta decenas de personas relevantes en el ámbito de las tecnologías de la información —entre ellas, el creador de la World Wide Web, Tim Berners-Lee, y el pionero de Internet, Vinton Cerf — t; la misma Wikipedia estaría en riesgo ...

Los Hacks de CSS son trucos para conseguir que una misma declaración de estilos CSS actúe de manera diferente en distintos navegadores. Bajo el concepto  Hack  se incluyen diversas técnicas para lidiar con las distintas interpretaciones de CSS que tienen los distintos navegadores y conseguir que las páginas web se visualicen igual .  Los desarrolladores y diseñadores gráficos necesitan que sus páginas que se muestren igual en todos los navegadores, tienen que utilizar códigos y trucos complejos para conseguir que la página se visualice de la misma forma en distintos navegadores, para ello utilizan los hacks. Fuente: Desarrollo Web

Referencias para principiantes: CSS (Cascading Style Sheets) son trozos de código que influyen en la presentación o apariencia del código HTML de su página. En WordPress, los estilos CSS generalmente se encuentran en un archivo llamado style.css en la carpeta específica del Tema que está usted usando. El código HTML y las referencias de CSS que sostienen la estructura de su página generalmente se encuentran en el archivo index.php en la carpeta de su Tema. Los selectores CSS (nombres) están generalmente agrupados en tres referencias específicas: ID , CLASS , y etiquetas HTML . El ID El ID es una referencia a un área específica única sobre su página web. Generalmente se ve representado en su página web HTML como un bloque DIV (división) adjunto: <div id="header">Título de la Página</div> En la hoja de estilo (CSS) el selector ID está referenciado como #header y podría parecerse a esto: #header { position: relative; margin:0; padding:0;       ...

Cuatro técnicas "on page" para mejorar el posicionamiento (SEO) de una página web: Crear títulos de página únicos y precisos. Utilizar el meta "description" . Mejora la estructura de las URL. Facilita la navegación en tu sitio. Fuente: Metadescription

Los principales estilos de diseño que existen en la maquetación de una página web son: Sin diseño : es como se hacían las páginas web cuando nació la Web en 1990. Diseño fijo : se realiza cuando se trabaja con un ancho fijo. Este estilo de diseño tiene un problema importante : Cuando la resolución de pantalla es menor que el ancho definido para la página, aparece una barra de desplazamiento horizontal . Cuando la resolución de pantalla es mucho mayor que el ancho definido, se desaprovecha la pantalla de visualización. Hay varias formas de lograr una maquetación mediante un diseño fijo. La más antigua se realizaba sin la ayuda de CSS, se empleaba una tabla que permitía dividir la página web como si fuera una cuadrícula. Con el atributo width se definía el ancho de la tabla y de las celdas. El diseño fijo con tablas quedó obsoleto hace ya muchos años,  ya que el diseño con tablas presenta muchos problemas: mezcla el contenido con la presentación, el cód...

La especificidad de las reglas  explica la forma de calcular el valor de una propiedad de CSS cuando existe un conflicto porque hay varias reglas que se pueden aplicar de forma simultánea al mismo elemento. La especificidad es un peso ( importancia o valor ) que se le asigna a una declaración CSS dada, determinada por el número correspondiente de cada  tipo de selector . Cuando varias declaraciones tienen una igual especificidad, se aplicará al elemento la última declaración encontrada en el CSS. Se aplica cuando el mismo elemento es objetivo de múltiples declaraciones . Según las reglas de CSS, en caso de que un elemento sea objeto de una  declaración directa , esta siempre tendrá preferencia sobre las reglas heredadas de su ancestro. Aplicando dicha regla los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, en consiguiente, serán aplicados. La especificidad está basada en las reglas de coincidencia que están c...

Los selectores de atributo permiten seleccionar elementos en función de los atributos que contienen . Por ejemplo,  se puede seleccionar todos los elementos  <img>  con un atributo  alt  mediante el siguiente selector: img[alt] {   border: 1px solid #008100; } Usando este selector podría decidir colocar un borde verde alrededor de las imágenes que tienen un atributo alt. Ten en cuenta los corchetes que contienen al atributo alt. Fuente: www.w3.org

User Interface  ( UI ) hace referencia a todo lo que tiene que ver con la estética del site y aquello que interactúa con el usuario, mientras que  User Experience  ( UX )  es el conjunto de emociones y experiencias que se apoderan del usuario cuando este conecta con el sistema. Fuentes: http://www.dimo.cat/blog/ui_ux_dos_siglas_de_moda_diseno/ http://www.luisan.net/blog/diseno-grafico/diferencias-entre-ui-user-interface-y-ux-user-experience https://es.wikipedia.org/wiki/Dise%C3%B1o_de_interfaz_de_usuario

El objetivo de la accesibilidad web es  lograr que las páginas web no presenten barreras que dificulten su uso a los usuarios con algún tipo de discapacidad . Algunos términos asociados a la accesibilidad: Diseño inclusivo                         Diseño universal                                Diseño para todos Fuentes: Activate, Google España http://accesibilidadenlaweb.blogspot.com/

La maquetación de una página web se realiza a varios niveles.   Maquetar a nivel  macro  es tener en cuenta la composición general de un sitio web , en el cual todas las secciones o bloques de contenido son de importancia de la composición (un pie de página o una cabecera, por ejemplo).  También se puede analizar la composición de elementos más pequeños que conforman la composición mayor ( maquetación a nivel micro ).   Hablamos entonces del micro-espacio y macro-espacio. Micro-espacio se refiere a una composición pequeña de una sección que conforma una composición mayor. Macro-espacio hace referencia a la composición general. El micro-espacio y macro-espacio se encuentran relacionados y se afectan mutuamente. Sin embargo, también ayudan a crear relaciones entre los diversos elementos o secciones. Dependiendo de la cantidad de espacios en blanco que se empleen un grupo de elementos se puede convertir en un grupo. En u...

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

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