Your SlideShare is downloading. ×
0
Edición de Páginas Web  TECNOLOGÍA DE LA INFORMACIÓN IES MARQUÉS DE LOZOYA CURSO 2007/08
Conceptos básicos <ul><li>Internet </li></ul><ul><li>H ipertexto </li></ul><ul><li>N avegadores </li></ul><ul><li>E ditore...
Internet <ul><li>Lenguaje común a un  conjunto de ordenadores , dirigido por unos  protocolos  y que ofrece una serie de  ...
Word Wide Web <ul><li>Es un servicio por el que unos ordenadores ofrecen documentos para ser vistos por otros ordenadores....
¿Cómo  funciona  la WWW? <ul><li>Mediante  PROTOCOLOS : </li></ul><ul><ul><li>Direccionamiento: URL </li></ul></ul><ul><ul...
Resumen <ul><li>Un documento escrito en HTML, referenciado por una URL y transferido vía HTTP forma parte de la Web. </li>...
Necesidades para crear una web <ul><ul><ul><ul><ul><li>Software </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Edic...
Software <ul><li>De edición y diseño de la página </li></ul><ul><ul><li>Bloc de notas, FrontPage XP y otrod </li></ul></ul...
Edición de páginas web <ul><li>Editar en lenguaje HTML (Hyper Text Markup Language) </li></ul><ul><li>Tipos de editores HT...
Estructura de un documento HTML <HTML>   (Etiqueta que indica que lo que viene a continuación es un documento HTML)     <H...
FrontPage XP <ul><li>Muy parecido al Procesador de Textos  Word (no se necesita aprender HTML): </li></ul><ul><ul><ul><li>...
Consideraciones para crear una página o un sitio web <ul><li>Elección del tema y de los contenidos </li></ul><ul><li>Diseñ...
Publicación de páginas web <ul><li>Las páginas se alojan en Servidores </li></ul><ul><ul><li>Dominios: gratuitos o de pago...
Formatos Multimedia <ul><li>Archivos de imágenes </li></ul><ul><ul><li>.GIF y .JPG </li></ul></ul><ul><li>Archivos de soni...
Formato de imágenes <ul><li>GIF o .gif </li></ul><ul><ul><li>Dibujos con hasta 256 colores </li></ul></ul><ul><ul><li>Perm...
Tamaño de la imagen <ul><li>Pixel: punto de luz </li></ul><ul><li>Resolución del monitor: </li></ul><ul><ul><li>PC’s 72 pp...
Colores primarios (I) <ul><li>Sustractivos:  los colores son percibidos por el ojo humano al reflejarse la luz sobre un ob...
Colores primarios (II) <ul><li>A ditivo s:  los colores  pasan directamente a nuestros ojos, sin ser reflejadas previament...
Color RGB Al mezclarse dos a dos, crean los colores secundarios. Al mezclarse luz verde con azul se obtiene el cián, con l...
Colores en la web: La  Rueda  del Color o Cromática Nos orienta respecto al equilibrio o armonía de color de dos maneras: ...
Upcoming SlideShare
Loading in...5
×

Editar páginas web

190

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
190
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Editar páginas web"

  1. 1. Edición de Páginas Web TECNOLOGÍA DE LA INFORMACIÓN IES MARQUÉS DE LOZOYA CURSO 2007/08
  2. 2. Conceptos básicos <ul><li>Internet </li></ul><ul><li>H ipertexto </li></ul><ul><li>N avegadores </li></ul><ul><li>E ditores </li></ul><ul><li>S ervidores </li></ul><ul><li>Protocolos: </li></ul><ul><ul><li>TCP, IP, HTTP </li></ul></ul><ul><li>Lenguajes: HTML </li></ul><ul><li>Direcciones: </li></ul><ul><ul><li>URL </li></ul></ul>
  3. 3. Internet <ul><li>Lenguaje común a un conjunto de ordenadores , dirigido por unos protocolos y que ofrece una serie de servicios . </li></ul><ul><ul><li>Conjunto de ordenadores: Red de redes </li></ul></ul><ul><ul><li>Protocolos (Idiomas): </li></ul></ul><ul><ul><ul><li>TCP (control de transmisión) e IP (direccionamiento) </li></ul></ul></ul><ul><ul><ul><li>Intercambio de información: FTP, HTTP, … </li></ul></ul></ul><ul><ul><li>Servicios: Correo y WWW </li></ul></ul><ul><ul><li>Los servicios están alojados en los SERVIDORES </li></ul></ul>
  4. 4. Word Wide Web <ul><li>Es un servicio por el que unos ordenadores ofrecen documentos para ser vistos por otros ordenadores. </li></ul><ul><ul><li>Documentos creados en HIPERTEXTO y contiene referencia a otros documentos y a elementos multimedia </li></ul></ul><ul><ul><li>Hipertexto : conjunto de información estructurada en enlaces para facilitar su acceso y orden de lectura . </li></ul></ul><ul><li>Navegadores: visualizadores de documentos. Internet Explorer, Nestcape Navigator, .. </li></ul>
  5. 5. ¿Cómo funciona la WWW? <ul><li>Mediante PROTOCOLOS : </li></ul><ul><ul><li>Direccionamiento: URL </li></ul></ul><ul><ul><li>Traducción: IP </li></ul></ul><ul><ul><li>Transferencia: HTTP </li></ul></ul><ul><ul><li>Visualización: HTML </li></ul></ul>
  6. 6. Resumen <ul><li>Un documento escrito en HTML, referenciado por una URL y transferido vía HTTP forma parte de la Web. </li></ul><ul><li>La Web es un servicio que ofrece un ordenador conectado a Internet. </li></ul><ul><li>Internet es un lenguaje común mediante el cual distintos tipos de redes de ordenadores pueden comunicarse . </li></ul>
  7. 7. Necesidades para crear una web <ul><ul><ul><ul><ul><li>Software </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Edición y Diseño </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Alojamiento </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Actualización </li></ul></ul></ul></ul></ul>
  8. 8. Software <ul><li>De edición y diseño de la página </li></ul><ul><ul><li>Bloc de notas, FrontPage XP y otrod </li></ul></ul><ul><li>De tratamiento de imágenes y elementos multimedia (gif, sonido, video, flash, banner, etc.) </li></ul><ul><ul><li>Irfanview y otros </li></ul></ul><ul><li>Para ‘subir’ la página y alojarla en el Servidor </li></ul><ul><ul><li>Programa de FTP: NICO </li></ul></ul><ul><li>Para actualizar la página </li></ul><ul><ul><li>Programa de FTP: NICO </li></ul></ul>
  9. 9. Edición de páginas web <ul><li>Editar en lenguaje HTML (Hyper Text Markup Language) </li></ul><ul><li>Tipos de editores HTML </li></ul><ul><ul><li>Texto: Bloc de Notas </li></ul></ul><ul><ul><li>Gráfico (WYSIWYG) : FrontPage Express, FrontPage 2000, Dreamweaver </li></ul></ul>
  10. 10. Estructura de un documento HTML <HTML> (Etiqueta que indica que lo que viene a continuación es un documento HTML)   <HEAD> ( Etiqueta de apertura de la cabecera). Aquí va la información sobre el título de la página, el autor, palabras clave, etc. que no se presentarán en la ventana del navegador, salvo el título que aparecerá en la barra de título de la parte superior </HEAD> (Etiqueta de cierre de la cabecera)   <BODY> ( Etiqueta de apertura del cuerpo) Aquí va el contenido de la página que será lo que se presente en pantalla . </BODY> (Etiqueta de cierre del cuerpo)   </HTML> (Etiqueta de cierre del documento)
  11. 11. FrontPage XP <ul><li>Muy parecido al Procesador de Textos Word (no se necesita aprender HTML): </li></ul><ul><ul><ul><li>Formato de caracteres y párrafos </li></ul></ul></ul><ul><ul><ul><li>Insertar marquesinas, imágenes, sonido y vídeo </li></ul></ul></ul><ul><ul><ul><li>Tablas </li></ul></ul></ul><ul><ul><ul><li>Enlaces </li></ul></ul></ul><ul><ul><ul><li>Marcadores </li></ul></ul></ul><ul><ul><ul><li>Formularios, Marcos, etc. </li></ul></ul></ul><ul><li>Ser muy cuidadosos con la organización de archivos y carpetas </li></ul>
  12. 12. Consideraciones para crear una página o un sitio web <ul><li>Elección del tema y de los contenidos </li></ul><ul><li>Diseño sobre papel, organizando los contenidos </li></ul><ul><li>Recopilar texto y elementos multimedia: imágenes, sonidos, ... </li></ul><ul><li>Guardar los elementos en carpetas con un máximo de OCHO caracteres y en minúsculas </li></ul><ul><li>Cuidar los enlaces diseñando un buen sistema de navegación </li></ul><ul><li>DISEÑO: familias de caracteres, colores, MOVIMIENTO , sonido, peso de las imágenes, .. </li></ul>
  13. 13. Publicación de páginas web <ul><li>Las páginas se alojan en Servidores </li></ul><ul><ul><li>Dominios: gratuitos o de pago </li></ul></ul><ul><li>Programa de transferencia de archivos: subir y actualizar la página </li></ul><ul><ul><li>Software de FTP </li></ul></ul>
  14. 14. Formatos Multimedia <ul><li>Archivos de imágenes </li></ul><ul><ul><li>.GIF y .JPG </li></ul></ul><ul><li>Archivos de sonido </li></ul><ul><ul><li>.WAV, .MID y .RA </li></ul></ul><ul><li>Archivos de vídeo: </li></ul><ul><ul><li>.MPG, .AVI y .QT </li></ul></ul>
  15. 15. Formato de imágenes <ul><li>GIF o .gif </li></ul><ul><ul><li>Dibujos con hasta 256 colores </li></ul></ul><ul><ul><li>Permite movimiento y un color transparente </li></ul></ul><ul><li>JPEG o .jpg </li></ul><ul><ul><li>Hasta 16 millones de colores </li></ul></ul><ul><ul><li>Fotografías normales </li></ul></ul><ul><ul><li>Formato por defecto de cámaras digitales. </li></ul></ul>
  16. 16. Tamaño de la imagen <ul><li>Pixel: punto de luz </li></ul><ul><li>Resolución del monitor: </li></ul><ul><ul><li>PC’s 72 ppp; MAC 96 ppp </li></ul></ul><ul><li>Tamaño de la imagen </li></ul><ul><ul><li>En el monitor: nº pixels horizontales POR nº pixels verticales </li></ul></ul><ul><ul><li>Impresora: nº de pixels Horizontales POR nº pix. vert. + densidad de puntos </li></ul></ul><ul><li>Tamaño de archivos: nº de pixeles y profundidad de color </li></ul>
  17. 17. Colores primarios (I) <ul><li>Sustractivos: los colores son percibidos por el ojo humano al reflejarse la luz sobre un objeto . </li></ul><ul><li>Artes gráficas e impresoras </li></ul><ul><ul><li>Am arillo, magenta y cyan . </li></ul></ul><ul><ul><li>Si mezclamos los 3 colores sustractivos primarios nos darán un sucio marrón que tiende a negro; por esto se les llama sustractivos, porque tienden a sustraer el color blanco de la luz. </li></ul></ul>
  18. 18. Colores primarios (II) <ul><li>A ditivo s: los colores pasan directamente a nuestros ojos, sin ser reflejadas previamente por ni n gún cuerpo . </li></ul><ul><li>U n a bombilla, una pantalla de televisión o el monitor de un ordenador . </li></ul><ul><ul><li>Rojo, Verde y Azul . </li></ul></ul><ul><ul><li>La suma de los 3 da el blanco, y la ausencia de los 3 el negro. Sistema usa do en el diseño web, y por eso el sistema de representación del color que usaremos será el RGB (Red, Green, Blue), que va a definir la cantidad relativa de cada uno de los colores primarios presente un color determinado </li></ul></ul>
  19. 19. Color RGB Al mezclarse dos a dos, crean los colores secundarios. Al mezclarse luz verde con azul se obtiene el cián, con la luz roja y azul se logra el magenta y usando luz roja y verde observaremos un llamativo amarillo. Si la mezcla es en diferentes proporciones de estos colores básicos se van originando los diferentes tonos de la gama del espectro hasta 16,7 millones de colores
  20. 20. Colores en la web: La Rueda del Color o Cromática Nos orienta respecto al equilibrio o armonía de color de dos maneras: Rangos de color Contraste
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×