Tipos de posicionamiento con el atributo position



position: static

Es el valor predeterminado del atributo y el posicionamiento normal de los elementos en la página. Quiere decir que los elementos se colocarán según el flujo normal del HTML, es decir, según estén escritos en el propio código HTML. Por decirlo de otra manera, static no provoca ningún posicionamiento especial de los elementos y por tanto, los atributos top, left, right y bottom no se tendrán en cuenta.





position: absolute

El valor absolute en el atributo position permite posicionar elementos de manera absoluta, esto es de manera definida por valores de los atributos top, left, bottom y right, que indican la distancia con respecto a un punto. Las capas o elementos con posicionamiento absoluto quedan aparte del flujo normal del HTML, quiere decir esto que no se afectan por el lugar donde aparezcan en el código HTML y tampoco afectan ellas a otros elementos que sí que formen parte del flujo normal del HTML.




position: relative

El valor relative en el atributo position indica que la capa sí forma parte del flujo normal de elementos de la página, por lo que su posición dependerá del lugar donde esté en el código y el flujo HTML. Además, las capas con posicionamiento relative, admiten los valores top y left para definir la distancia a la que se colocan con respecto al punto donde esté en ese momento el flujo normal del HTML. Como afectan al mencionado flujo del HTML, los elementos colocados después de las capas relative, tendrán en cuenta sus dimensiones para continuar el flujo y saber dónde colocarse. Sin embargo, no se tendrá en cuenta los top y left configurados.




position: fixed

Este atributo sirve para posicionar una capa con posicionamiento absoluto, pero su posición final será siempre fija, es decir, aunque se desplace el documento con las barras de desplazamiento del navegador, siempre aparecerá en la misma posición.


El lugar donde se "anclará" la capa siempre es relativo al cuerpo (el espacio disponible del navegador para la página). Si utilizamos top y left, estaremos marcando su posición con respecto a la esquina superior izquierda y si utilizamos bottom y right su posición será relativa a la esquina inferior derecha.




position: inherit

El valor inherit indica que el valor de position tiene que heredarse del elemento padre. No funciona en Explorer, al menos hasta la versión 8. Tiene en verdad poca utilidad y además, como no funciona en el navegador más utilizado en la actualidad, tiene aun menos sentido usarlo. Por ello, no ponemos ejemplos.
Conclusión sobre el atributo position de CSS

Esperemos que con las anteriores explicaciones y ejemplos se hayan podido entender bien las distintas posibilidades del atributo position, que es sin duda clave para el posicionamiento CSS. Lo más común para la maquetación web es utilizar el posicionamiento static, pero el posicionamiento absoluto, junto con el posicionamiento fixed, e incluso relative, pueden ser muy útiles para diseños más complejos, donde se requiera una mayor precisión en la colocación de los distintos elementos o las capas.

< meta charset ="uft-8">

UTF-8

UTF-8 (8-bit Unicode Transformation Format) es un formato de codificación de caracteres Unicode e ISO 10646 utilizando símbolos de longitud variable. UTF-8 fue creado porRobert C. Pike y Kenneth L. Thompson. Está definido como estándar por la RFC 3629 de la Internet Engineering Task Force (IETF). Actualmente es una de las tres posibilidades de codificación reconocidas por Unicode y lenguajes web, o cuatro en ISO 10646.

Sus características principales son:

• Es capaz de representar cualquier carácter Unicode.
• Usa símbolos de longitud variable (de 1 a 4 bytes por carácter Unicode).
• Incluye la especificación US-ASCII de 7 bits, por lo que cualquier mensaje ASCII se representa sin cambios.
• Incluye sincronía. Es posible determinar el inicio de cada símbolo sin reiniciar la lectura desde el principio de la comunicación.
• No superposición. Los conjuntos de valores que puede tomar cada byte de un carácter multibyte, son disjuntos, por lo que no es posible confundirlos entre sí.

Estas características lo hacen atractivo en la codificación de correos electrónicos y páginas web. El IETF requiere que todos los protocolos de Internet indiquen quécodificación utilizan para los textos y que UTF-8 sea una de las codificaciones contempladas. El Internet Mail Consortium (IMC) recomienda que todos los programas de correo electrónico sean capaces de crear y mostrar mensajes codificados utilizando UTF-8.

el ejemplo de su aplicacion es el siguiente:

Mi Primer Plantilla

<!Doctype html>
<html>

<head>
  < meta charset ="uft-8"> 
    <title> Designed by me </title>
  </head>


  <BODY> 

    <header>
        <h1>  i AM AT STARBUCKS</h1>
        <h2> fuck it </h2>

      </header>
    <section> 
           <p>  all the pictures will be here</p>
    </section>
    <footer> 
    <p>&copy; youssef 2014 </>
    </footer>

</BODY>

</html>

USABILIDAD.

¿Qué es la Usabilidad?

La Usabilidad es la medida de la calidad de la experiencia que tiene un usuario cuando interactúa con un producto o sistema. Esto se mide a través del estudio de la relación que se produce entre las herramientas (entendidas en un Sitio Web el conjunto integrado por el sistema de navegación, las funcionalidades y los contenidos ofrecidos) y quienes las utilizan, para determinar la eficiencia en el uso de los diferentes elementos ofrecidos en las pantallas y la efectividad en el cumplimiento de las tareas que se pueden llevar a cabo a través de ellas.

Cabe indicar, finalmente, que la norma internacional ISO 9241-11: Guidance on Usability (1998) hace referencia a la Usabilidad y ofrece una definición de su contenido y alcance:

[La Usabilidad se refiere al] grado en que un producto puede ser usado por usuarios específicos para conseguir metas específicas con efectividad, eficiencia y satisfacción dado un contexto específico de uso.

Es importante indicar que la Usabilidad es una disciplina que nace en Estados Unidos y florece gracias al desarrollo computacional, consolidándose como una práctica habitual con la aparición de los Sitios Web en la década de los 90s.

Adicionalmente se debe anotar que la palabra Usabilidad deriva del inglés Usability, cuya traducción más acertada es "facilidad y simplicidad de uso de un artículo u objeto". Se ha considerado adecuado utilizar la palabra usabilidad con dicha traducción debido a que en idioma español no existen palabras que describan con tanta precisión este concepto. En este sentido, lo más cercano sería Utilidad, palabra que de acuerdo al Diccionario de la Real Academia Espaola, significa "que trae o produce provecho, comodidad, fruto o interés". Sin embargo, debido a que dicho término no engloba la idea de facilidad o simplicidad en el uso de un objeto o espacio por parte de quien lo emplea, se ha preferido utilizar la derivación de la palabra originalmente en idioma inglés.

Características Principales de la Usabilidad

Dadas las definiciones anteriores es claro que abordar la Usabilidad implica también revisar una serie de aspectos relacionados con el uso y la manera en que las personas se relacionan con los sistemas que se les ofrecen.

Por lo mismo, se ha hecho necesario hacer una serie de comprobaciones de estos aspectos, mediante la revisión completa de la forma en que el espacio digital apoya a los usuarios en cumplir sus tareas en la mejor forma posible. Dicha revisión debe ser hecha a través de diferentes factores, entre los que se cuentan los siguientes:

• Facilidad de aprendizaje: define en cuánto tiempo un usuario, que nunca ha visto una interfaz, puede aprender a usarla bien y realizar operaciones básicas.
• Facilidad y Eficiencia de uso: determina la rapidez con que se pueden desarrollar las tareas, una vez que se ha aprendido a usar el sistema.
• Facilidad de recordar cómo funciona: se refiere a la capacidad de recordar las caractersticas y forma de uso de un sistema para volver a utilizarlo a futuro.
• Frecuencia y gravedad de errores: plantea la ayuda que se le entrega a los usuarios para apoyarlos cuando deban enfrentar los errores que cometen al usar el sistema.
• Satisfacción subjetiva: indica lo satisfechos que quedan los usuarios cuando han empleado el sistema, gracias a la facilidad y simplicidad de uso de sus pantallas.

Áreas teóricas relacionadas

En torno a la Usabilidad se ha creado una comunidad que ha ido expandiendo sus capacidades y herramientas, abarcando reas como la "Experiencia de usuario" y la medición de la calidad de la misma, porque se entiende que mientras mayor sea la usabilidad de un sitio, mayor ser el impacto del Sitio Web en quienes lo visitan y utilizan.

Adicionalmente, es útil entender el contexto en el que se desenvuelve esta forma de trabajo utilizando para ello la perspectiva que ofrece Peter Morville, autor ya reseñado en la sección Encontrabilidad de esta Guía, cuando él sitúa la Usabilidad en función de otras variables que permiten medir la calidad de un Sitio Web desde diferentes perspectivas. En ese sentido, señala que un Sitio Web puede ser mejorado desde diferentes acercamientos, quedando la Usabilidad como uno más de ellos, permitiendo la aparición de otros con similar importancia que deben ser tenidos en cuenta al momento de hacer el rediseño de un Sitio Web.

A estos acercamientos simultáneos al de la Usabilidad el autor los denomina las Facetas de la Experiencia del Usuario, y corresponden a los siguientes:

• Útil: es necesario preguntarnos si nuestros productos y sistemas son útiles, y aplicar nuestro conocimiento para definir soluciones innovadoras que apoyan la utilidad.
• Usable: corresponde a la facilidad de uso o Usabilidad sigue siendo un aspecto fundamental, necesario pero no suficiente, por lo que se debe complementar con las demás facetas.
• Deseable: si bien los sitios deben ser eficientes, en particular con el uso de medios ms complejos (imágenes, sonidos, animaciones), esto se debe equilibrar con los demás valores del diseño emocional.
• Encontrable: los Sitios Web deben ser navegables y permitir que los usuarios puedan encontrar lo que necesitan.
• Accesible: los sitios Web deben ser accesibles a las personas con discapacidades (más de 10% de la población). Para los Sitios Web de Gobierno ya es un requisito normativo.
• Creíble: la credibilidad es uno de los factores más importantes de tener en cuenta y por ello se deben revisar los elementos de diseño que afectan la confianza que nos tienen los usuarios.
• Valioso: las facetas ayudan a determinar los aspectos que llevan a que nuestros sitios ofrezcan valor para nuestros usuarios.

[D] Figura 1. El "Panal de Morville" muestra las diferentes facetas de la experiencia del usuario.

Principales Autores

Además de Morville, los autores que han trabajado ms directamente en el tema de la Usabilidad han sido Jakob Nielsen y Steve Krug. Ambos han presentado libros en los cuales debaten esta forma de trabajo y han definido sus características y formas de abordarlas en el desarrollo de Sitios Web.

Jakob Nielsen es un doctor en ingeniera que centró su carrera en el desarrollo de interfaces de software, desde lo cual evolucion hacia el tema de la usabilidad. Es el autor y consultor más relacionado con el tema, al punto que le llam el "gurú mundial de la usabilidad", apareciendo como tal en medios de prensa en todo el planeta.

Su libro "Designing Web Usability: The Practice of Simplicity" (Diseñando Usabilidad Web - 1999) fijó las pautas de la disciplina y entregó las herramientas necesarias para los desarrolladores de Sitios Web, quienes a partir de entonces comenzaron a incorporar las prácticas de la Usabilidad en su trabajo habitual.

Entre otros aspectos, sus consejos principales para mejorar la usabilidad de un Sitio Web son:

• Aclarar el propsito del sitio: se refiere a que desde la primera mirada, el usuario tenga claro quién hace el sitio y cuál es el alcance del mismo.
• Ayudar a los usuarios a encontrar lo que buscan: ofrecer una buena organización de información con énfasis en los mensajes principales y sistemas de búsqueda adecuados.
• Mostrar el contenido del sitio: consiste en mostrar los contenidos de manera clara para evitar clicks innecesarios, mostrando temas anteriores que hayan sido destacados.
• Diseño para mejorar Interacción, no para definirla: tener como meta que el diseño coopere con la información, más que competir con ella.

Un segundo autor de importancia es Steve Krug consultor en Usabilidad cuyo libro "Don't make me think" ("No me hagas pensar" - 2000) marcó un hito al poner en el centro de la discusión el hecho de que los Sitios Web deben ser creados para que el usuario llegue a sus páginas y actúe en forma inmediata, sin que tenga que detenerse a entender cómo está hecho u organizado. Además, planteó la necesidad de probar con los propios usuarios la interacción que se ofrece en los espacios digitales, con el fin de asegurar que la oferta que se realiza, es comprendida por quienes las estarán utilizando.

Entre otros, sus principales consejos para ayudar a la usabilidad de un Sitio Web son:

• Diseñar un sitio es siempre un acto de balance: priorizar el uso del espacio ayuda a la audiencia y a quien publica, a alcanzar sus metas;
• Balancear el diseño y el formato, para que las cosas tengan un énfasis adecuado en cuanto a uso y espacio.
• Siempre se deben optimizar muchas variables al mismo tiempo, mostrando suficiente de una sin ocupar mucho con otra.
• No hay reglas universales porque la solución que funciona en un caso, no funciona en otro contexto.
• Adicionalmente se debe diseñar pensando que los usuarios no leen los textos sino que van saltando por el contenido; que los contenidos serán accedidos de mejor forma si se crean jerarquías visuales; que la navegación debe utilizar signos visibles y métodos convencionales para que sea entendida en todos los contextos, entre otros aspectos.

Fuentes:  

• Research-Based Web Design & Usability Guidelines (inglés)
  http://www.usability.gov/pdfs/guidelines.html
• Usabilidad definida en Wikipedia
  http://es.wikipedia.org/wiki/Usabilidad
• Herramientas para la usabilidad en la Fundación Sidar (España)
  http://www.sidar.org/recur/desdi/traduc/es/visitable/Herramientas.htm

W3c:

El World Wide Web Consortium, abreviado W3C, es un consorcio internacional que produce recomendaciones para la World Wide Web. Está dirigida por Tim Berners-Lee, el creador original de URL, HTTP y HTML que son las principales tecnologías sobre las que se basa la Web.

Administracion de contenidos:

más conocido por sus siglas CMS, es un programa informático que permite crear una estructura de soporte (framework) para la creación y administración de contenidos, principalmente en páginas web, por parte de los administradores, editores, participantes y demás usuarios.

Blog:

Página web, generalmente de carácter personal, con una estructura cronológica que se actualiza regularmente y que se suele dedicar a tratar un tema concreto

Gadget:

Un gadget o dispositivo electrónico es un dispositivo que tiene un propósito y una función específica, generalmente de pequeñas proporciones, práctico y a la vez novedoso

www:

Sigla de la expresión inglesa World Wide Web, 'red informática mundial', sistema lógico de acceso y búsqueda de la información disponible en Internet, cuyas unidades informativas son las páginas web.

URL:

Un localizador de recursos uniforme, más comúnmente denominado URL, es una secuencia de caracteres, de acuerdo a un formato modélico y estándar, que se usa para nombrar recursos en Internet para su localización o identificación, como por ejemplo documentos textuales, imágenes y vídeos.

HTML:

siglas de HyperText Markup Language, hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que, en sus diferentes versiones, define una estructura básica y un código para la definición de contenido de una página web, como texto, imágenes, etc.

Css:

Las hojas de estilo en cascada o hacen referencia a un lenguaje de hojas de estilos usado para describir la presentación semántica de un documento escrito en lenguaje de marcas.

JavaScript:

es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico.

Mapa de navegacion:

proporcionan una representación esquemática de la estructura del hipertexto, indicando los principales conceptos incluidos en el espacio de la información y las interrelaciones que existen entre ellos.

Mapa de un sitio:

es una lista de las páginas de un sitio web accesibles por parte de los buscadores y los usuarios.

Maquetacion:

también llamada a veces diagramación, es un oficio del diseño editorial que se encarga de organizar en un espacio, contenidos escritos, visuales y en algunos casos audiovisuales (multimedia) en medios impresos y electrónicos, como libros, diarios y revistas.

Internet:

Red informática de nivel mundial que utiliza la línea telefónica para transmitir la información.

Extranet:

es una red privada que utiliza protocolos de Internet, protocolos de comunicación y probablemente infraestructura pública de comunicación para compartir de forma segura parte de la información u operación propia de una organización con proveedores, compradores, socios y clientes.

Intranet:

Red informática interna de una empresa u organismo, basada en los estándares de Internet, en la que las computadoras están conectadas a uno o varios servidores web.

Programacion en el cliente:

aplicación informática o un ordenador que consume un servicio remoto en otro ordenador conocido comoservidor, normalmente a través de una red de telecomunicaciones.

Programacion en el servidor:

es una tecnología que consiste en el procesamiento de una petición de un usuario mediante la interpretación de un script en el servidor web para generar páginas HTML dinámicamente como respuesta.

Sitios web:

es una colección de páginas de internet relacionadas y comunes a un dominio de Internet o subdominio en la World Wide Web en Internet2 Una página web es un documento HTML/XHTML que es accesible generalmente mediante el protocolo HTTP de Internet.

Servidor de aplicaciones:

es un servidor en una red de computadores que ejecuta ciertas aplicaciones.

Pagina estatica:

Páginas HTML preparadas antes de recibir la petición y enviadas al cliente cuando las solicita. Esta página no requiere ninguna acción especial cuando se solicita.

Pagina dinamica:

Una página Web creada automáticamente basándose en la información proporcionada por el usuario.