Formateando contenido en la web

858 views
776 views

Published on

Material de introducción a la charla sobre diagramación de contenido web.

Published in: Self Improvement
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
858
On SlideShare
0
From Embeds
0
Number of Embeds
96
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Formateando contenido en la web

  1. 1. Fuentes, Formato, Alineación e Imágenes Formateando contenido en la Web Ivan Dario Guerra @ivadguerra www.ivadguerra.com
  2. 2. Principales Tipos de Fuente Usados en Internet <ul><li>Arial </li></ul><ul><li>Verdana </li></ul><ul><li>Courier New </li></ul><ul><li>MS Serif </li></ul><ul><li>Times New Roman </li></ul><ul><li>Trebuchet MS </li></ul><ul><li>Comic Sans </li></ul><ul><li>Tahoma </li></ul>No hay limitación en lo que se refiere al uso de fuentes en la web, pero se debe tener en cuenta que no todos los usuarios tienen instaladas las mismas fuentes.
  3. 3. Efectos de Texto <ul><li>Normal (Regular) </li></ul><ul><li>Negrita (Bold) </li></ul><ul><li>Itálica (Italic) </li></ul><ul><li>Subrayado ( Underline ) </li></ul>
  4. 4. Efectos de Texto <ul><li>Normal (Regular): Se usa por defecto en la mayoría del texto que no tiene ninguna connotación especial. </li></ul><ul><li>Negrita (Bold) </li></ul><ul><li>Itálica (Italic) </li></ul><ul><li>Subrayado ( Underline ) </li></ul>
  5. 5. Efectos de Texto <ul><li>Normal (Regular) </li></ul><ul><li>Negrita (Bold): Generalmente se usa para denotar títulos, subtitulos y encabezados importantes, pero en la web su uso es un poco más extenso ya que se usa para indicarle al buscador cuales son los términos clave del artículo. </li></ul><ul><li>“ No se debe abusar de su uso” </li></ul><ul><li>Itálica (Italic) </li></ul><ul><li>Subrayado ( Underline ) </li></ul>
  6. 6. Efectos de Texto <ul><li>Normal (Regular) </li></ul><ul><li>Negrita (Bold) </li></ul><ul><li>Itálica (Italic): Al igual que en la escritura normal la itálica se usa para destacar nombres propios, obras literarias y detalles en los que es necesarios hacer énfasis. </li></ul><ul><li>Subrayado ( Underline ) </li></ul>
  7. 7. Efectos de Texto <ul><li>Normal (Regular) </li></ul><ul><li>Negrita (Bold) </li></ul><ul><li>Itálica (Italic) </li></ul><ul><li>Subrayado ( Underline ) Su principal uso es el de indicar la posición de los hipervínculos, pero además, al igual que la itálica el subrayado se usa para hacer énfasis en términos importantes. </li></ul>
  8. 8. Efectos de Texto <ul><li>Normal (Regular) </li></ul><ul><li>Negrita (Bold) </li></ul><ul><li>Itálica (Italic) </li></ul><ul><li>Subrayado ( Underline ) </li></ul><ul><li>No hay una norma estricta de la manera en que se deben usar y combinar los efectos de texto, todo depende de los objetivos que se pretenden alcanzar. </li></ul>
  9. 9. Alineación Puede que la alineación sea un factor estético, pero contribuyen a crear una agradable sensación en la visita del usuario.
  10. 10. Formatos de Imagen Pixel: Mínima unidad de luz emitida por una pantalla. .jpg : Formato de imagen de alta calidad (no admite transparencias). .png : Formato de imagen de alta calidad que admite transparencias. .gif : Formato de imagen de baja - intermedia calidad que admite transparencias .bmp : Formato de imagen de alta calidad, que no admite transparencias y es de un peso muy elevado.
  11. 11. Mezclando Imagen y Alineación Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis enim eu felis lacinia dignissim. Quisque condimentum quam id enim laoreet faucibus. Etiam eget augue eget leo congue scelerisque. Duis cursus nisl ut nulla pellentesque nec rhoncus leo malesuada. Nulla eget leo neque, non venenatis lacus. Phasellus quis sem turpis. Sed sit amet nisi odio, a consectetur arcu. Vestibulum ligula quam, malesuada sollicitudin aliquet nec, ultrices sed lectus. Cras lectus justo, consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis enim eu felis lacinia dignissim. Quisque condimentum quam id enim laoreet faucibus. Etiam eget augue eget leo congue scelerisque. Duis cursus nisl ut nulla pellentesque nec rhoncus leo malesuada. Nulla eget leo neque, non venenatis lacus. Phasellus quis sem turpis. Sed sit amet nisi odio, a consectetur arcu. Vestibulum ligula quam, malesuada sollicitudin aliquet nec, ultrices sed lectus. Cras lectus justo, consequat.
  12. 12. Mezclando Imagen y Alineación Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis enim eu felis lacinia dignissim. Quisque condimentum quam id enim laoreet faucibus. Etiam eget augue eget leo congue scelerisque. Duis cursus nisl ut nulla pellentesque nec rhoncus leo malesuada. Nulla eget leo neque, non venenatis lacus. Phasellus quis sem turpis. Sed sit amet nisi odio, a consectetur arcu. Vestibulum ligula quam, malesuada sollicitudin aliquet nec, ultrices sed lectus. Cras lectus justo, consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis enim eu felis lacinia dignissim. Quisque condimentum quam id enim laoreet faucibus. Etiam eget augue eget leo congue scelerisque. Duis cursus nisl ut nulla pellentesque nec rhoncus leo malesuada. Nulla eget leo neque, non venenatis lacus. Phasellus quis sem turpis. Sed sit amet nisi odio, a consectetur arcu. Vestibulum ligula quam, malesuada sollicitudin aliquet nec, ultrices sed lectus. Cras lectus justo, consequat.
  13. 13. Mezclando Imagen y Alineación Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis enim eu felis lacinia dignissim. Quisque condimentum quam id enim laoreet faucibus. Etiam eget augue eget leo congue scelerisque. Duis cursus nisl ut nulla pellentesque nec rhoncus leo malesuada. Nulla eget leo neque, non venenatis lacus. Phasellus quis sem turpis. Sed sit amet nisi odio, a consectetur arcu. Vestibulum ligula quam, malesuada sollicitudin aliquet nec, ultrices sed lectus. Cras lectus justo, consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis enim eu felis lacinia dignissim. Quisque condimentum quam id enim laoreet faucibus. Etiam eget augue eget leo congue scelerisque. Duis cursus nisl ut nulla pellentesque nec rhoncus leo malesuada. Nulla eget leo neque, non venenatis lacus. Phasellus quis sem turpis. Sed sit amet nisi odio, a consectetur arcu. Vestibulum ligula quam, malesuada sollicitudin aliquet nec, ultrices sed lectus. Cras lectus justo, consequat.

×