Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sesion Nº6 Listas Comentarios Diseño Imagenes y Color en el WWW

474 views

Published on

Topicos Especiales: Sesion Nº6 Listas Comentarios Diseño Imagenes y Color en el WWW

Published in: Education
  • Be the first to comment

  • Be the first to like this

Sesion Nº6 Listas Comentarios Diseño Imagenes y Color en el WWW

  1. 1. Sesión 06: Ing. Edgar A. Cruz Huaman INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Listas, Comentarios, Diseño, Imágenes y Color en el WWW.
  2. 2. I. Práctica 1:
  3. 3. II. Listas en Html <ul><li>Numerada u ordenada. </li></ul><ul><li>No ordenada. </li></ul><ul><li>Listas de glosario o de definición. </li></ul><ul><li>Menús. </li></ul><ul><li>Listas de directorio. </li></ul>
  4. 4. II. Listas No Ordenadas (i) <ul><li>Syntaxis : <UL><li>..</UL> </li></ul><ul><li>Ejercicio: </li></ul>
  5. 5. II. Listas Ordenadas (ii) <ul><li>Syntaxis: <OL><li>…</OL> </li></ul><ul><li>Ejercicio: </li></ul>
  6. 6. II. Listas de Glosario (iii) <ul><li>Syntaxis: <DL><dt><dd>…</DL> </li></ul><ul><li>Ejercicio: </li></ul>
  7. 7. II. Listas de Menu y Directorio (iii) <ul><li>Syntaxis: </li></ul><ul><ul><li><MENU><li>…</MENU> </li></ul></ul><ul><ul><li><DIR><li>…</DIR> </li></ul></ul>
  8. 8. II. Anidamiento de Listas
  9. 9. III. Comentarios en HTML <ul><li>Syntaxis: <!-- Esto es un Comentario --> </li></ul>
  10. 10. IV. Diseño Gráfico <ul><li>Adobe Creative Suite </li></ul><ul><ul><li>Photoshop </li></ul></ul><ul><ul><li>Freehand </li></ul></ul><ul><ul><li>Illustrator </li></ul></ul><ul><ul><li>InDesign </li></ul></ul><ul><ul><li>Dreamweaver </li></ul></ul><ul><li>Otras compañías </li></ul><ul><ul><li>Corel Draw </li></ul></ul><ul><ul><li>Xara Xtreme </li></ul></ul><ul><ul><li>Inkscape </li></ul></ul><ul><ul><li>XaraLX </li></ul></ul><ul><ul><li>GIMP </li></ul></ul><ul><ul><li>Sodipodi </li></ul></ul>
  11. 11. V. Imagen (con y sin animación) <ul><li>Gráficos vectoriales (SVG, SWF, PDF, …) </li></ul><ul><li>Gráficos randerizados (BMP, JPEG, GIF, TIFF, PNG,…) </li></ul><ul><li>Parámetros de un imagen. </li></ul><ul><ul><li>Profundidad (nº bits utilizados para representar el </li></ul></ul><ul><ul><li>color). </li></ul></ul><ul><ul><li>Tamaño (píxels, cm,)  Número de bytes </li></ul></ul><ul><ul><li>Formatos </li></ul></ul><ul><ul><ul><li>Compatibilidad y migración </li></ul></ul></ul><ul><ul><li>Algoritmos de comprensión con y sin pérdida de </li></ul></ul><ul><ul><li>calidad. </li></ul></ul>
  12. 12. VI. Ejemplo de Profundidades
  13. 13. VII. Tamaño de una Imagen
  14. 14. VIII. Gráficos vectoriales: <ul><li>Gráficos bidimensionales formados por puntos, líneas y curvas generados a partir de fórmulas matemáticas. </li></ul><ul><li>Admiten escalados sin pérdida de calidad </li></ul><ul><li>Ideal para figuras, diagramas, esquemas (dibujos simples). </li></ul>
  15. 15. IX. Gráficos rasterizados: <ul><li>Imágenes formadas por una malla de puntos (pixels), con información sobre cada píxel. </li></ul><ul><li>Admiten escalados pero con pérdida de calidad </li></ul><ul><li>Comparativamente ocupan mayor tamaño que los gráficos vectoriales </li></ul><ul><li>Ideal para imágenes con gran variedad de colores (fotografías) </li></ul>
  16. 16. X. Gráfico rasterizado vs vectorial
  17. 17. XI. Usando color en el WWW.
  18. 18. XII. Cómo cambiar la apariencia de una página. <ul><li>Color de fondo: <body bgcolor=&quot;#RRGGBB&quot;> </li></ul><ul><ul><li><body bgcolor=&quot;#RRGGBB&quot;> = <body bgcolor=&quot;#0000FF&quot;> </li></ul></ul>
  19. 19. XIII. Color del texto y Links.
  20. 20. XIV. Color del texto y Links (i)
  21. 21. XV. Imágenes de fondo <ul><li><body background=&quot;fondo1.jpg&quot;> </li></ul>
  22. 22. XVI. Imágenes y Texto.
  23. 23. XVII. Alineamiento de imágenes. <ul><ul><ul><li>Align=top </li></ul></ul></ul><ul><ul><ul><li>Align=middle </li></ul></ul></ul><ul><ul><ul><li>Align=bottom </li></ul></ul></ul><ul><ul><ul><li>Align=right </li></ul></ul></ul><ul><ul><ul><li>Align =left </li></ul></ul></ul>
  24. 24. XVIII. Como terminar el texto envolvente. <ul><li>Atributo Clear de la etiqueta <BR>. </li></ul><ul><ul><li><br clear=“left&quot;> </li></ul></ul><ul><ul><li><br clear=“right&quot;> </li></ul></ul><ul><ul><li><br clear=&quot;all&quot;> </li></ul></ul>
  25. 25. XIX. Márgenes alrededor de las imágenes. <ul><li><img src=&quot;fondo.bmp&quot; align=“left&quot; vspace=35 hspace=35> </li></ul>
  26. 26. XX. Enlace a Imágenes. <ul><li>Usamos: <a href=“”></a> </li></ul>
  27. 27. XXI. Borde de las imágenes <ul><li>Atributo BORDER </li></ul>
  28. 28. XXII. Borde de las imágenes (i)
  29. 29. XXIII. Modificando el tamaño de las imágenes <ul><li>Atributos: Width & Height </li></ul>
  30. 30. XXIV. El atributo ALT
  31. 31. XXV. Pasos para crear una Página Web compleja (WebSite) <ul><li>Planificación. </li></ul><ul><li>Secciones de la página. </li></ul><ul><li>Uniformidad de las páginas. </li></ul>
  32. 32. PREGUNTAS?

×