Your SlideShare is downloading. ×
Diseño y edición de páginas web 1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Diseño y edición de páginas web 1

1,157
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,157
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Diseño y Edición de páginas web “La ciencia es aquello que entendemos lo suficiente como para explicárselo a un ordenador. El arte es todo lo demás.” Prólogo de A=B. Donald Knuth, científico de la computación
  • 2. Ejercicio 1Creación de un Blog con blogger.Las actividades de este tema se irancolgando en entradas de dicho blogtituladas:Diseño y edición de páginas : Ejercicio 2Diseño y edición de páginas : Ejercicio 3Diseño y edición de páginas : Ejercicio 4Diseño y edición de páginas : Ejercicio 5etc
  • 3. La World Wide WebEs uno de los sistemas que ha contribuido de forma decisiva alacercamiento de la red Internet a un gran número de personas.Y ello pordos razones: La sencillez en el uso La atractiva presentación de la información que se consigue con las técnicas multimediaLa Web no fue creada con el fin de proporcionar una plataforma de fácilacceso para personas con unos conocimientos rudimentarios deinformáticas. Se desarrolló en el centro CERN (el laboratorio europeo defísica de partículas, en Ginebra) como un medio de compartir informaciónentre los físicos de alta energía de todo el mundo. De ahí se difundió suaplicación a la red Internet, y en solo unos pocos años se ha extendidotanto que el caudal de información disponible vía Web es de tal magnitudque resulta prácticamente inabarcable.
  • 4. La Web se fundamenta en dos conceptos: La navegación por medio de hipertexto La posibilidad de acceder a documentos multimedia
  • 5. Diseño WEB Es una actividad que consiste en la planificación, diseño e implementación de sitios web. No es simplemente una aplicación del diseño convencional, ya que requiere tener en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen, enlaces y vídeo. Se lo considera dentro del diseño multimedia.
  • 6. Diseño WEB Debe seguir unos requerimientos mínimos de accesibilidad web que haga que sus sitios web o aplicaciones puedan ser visitados por el mayor número de personas. Para conseguir estos objetivos de accesibilidad se han desarrollado pautas como las del W3C: Pautas de accesibilidad al contenido Web 1.0 WCAG.
  • 7. W3CEl World Wide Web Consortium, abreviadoW3C, es un consorcio internacional queproduce recomendaciones para la World WideWeb.Está dirigida por Tim Berners-Lee, el creadororiginal de URL (Uniform Resource Locator,Localizador Uniforme de Recursos), HTTP(HyperText Transfer Protocol, Protocolo deTransferencia de HiperTexto) y HTML (HyperText Markup Language,Lenguaje de Marcado deHiperTexto) que son las principales tecnologíassobre las que se basa la Web.
  • 8. Tim Berners-LeeSir Timothy "Tim" John Berners-Lee OM,KBE (TimBL o TBL) nació el 8 de junio de1955 en Londres, Reino Unido, se licencióen Física en 1976 en el Queens Collegede la Universidad de Oxford.Es considerado el padre de la web.Berners-Lee trabajó en el CERN desdejunio hasta diciembre de 1980. Duranteese tiempo, propuso un proyecto basadoen el hipertexto para facilitar la forma decompartir y la puesta al día de lainformación entre investigadores.
  • 9. Ejercicio 2 Comentario personal sobre la creación de Internet, la WWW y su creador.
  • 10. Tecnologías en las que se basa laWEB: URL (Uniform Resource Locator, Localizador Uniforme de Recursos).El URL es la cadena de caracteres con la cual se asigna una dirección única a cada uno de los recursos de información disponibles en la Internet. Existe un URL único para cada página de cada uno de los documentos de la World Wide Web HTTP (HyperText Transfer Protocol, Protocolo de Transferencia de HiperTexto) es el protocolo usado en cada transacción de la World Wide Web. HTTP define la sintaxis y la semántica que utilizan los elementos de software de la arquitectura web (clientes, servidores, proxies) para comunicarse. HTML (Hyper Text Markup Language,Lenguaje de Marcado de HiperTexto)
  • 11. Páginas estáticas y dinámicasUna página es dinámica cuando se incluyecualquier efecto especial o funcionalidad ypara ello es necesario utilizar otros lenguajesde programación, aparte del simple HTML.En realidad el HTML no es lenguaje deprogramación sino, más bien, se trata de unlenguaje descriptivo que tiene como objetodar formato al texto y las imágenes quepretendemos visualizar en el navegador.
  • 12. Ejercicio 3 1. Diseño Web » Como ver el código fuente de una página El código fuente de una página es el código HTML que la conforma y que permite que se vean las imágenes, textos, párrafos, separadores,… Viendo el código fuente de la página podemos descubrir como el diseñador de la misma ha estructurado el contenido.Para poder ver el código fuente de la página tenemos varias formas. La principal y que ya empieza a estar soportada por algunos navegadores, es poner en la barra de direcciones: view-source:URL_de_la_pagina Por ejemplo, si queremos ver el código fuente de Ayuda en la Web, tendríamos que poner lo siguiente view-source:http://www.ayudaenlaweb.com Luego, dependiendo del navegador, tenemos diferentes formas de ver el código fuente de una página.Veámoslo por navegador:
  • 13. Ejercicio 3 Internet ExplorerOpción 1. Pinchar con el botón derecho sobre la página y escoger la opción “Ver código fuente”Opción 2. En los menús Ver »; Código fuente FirefoxOpción 1. Pinchar con el botón derecho sobre la página y escoger la opción “Ver código fuente de lapágina”Opción 2. En los menús Ver » Código fuente de la páginaOpción 3. Pulsar Ctrl+U Google ChromeOpción 1. Pinchar con el botón derecho sobre la página y escoger la opción “Ver código fuente de lapágina” Visualiza el código HTML de la siguiente página web: (pantallazo) y de otras 3 paginas web que elijas. http://ejer-dreamweaver.webcindario.com/01_sencilla.html
  • 14. Ejercicio 4 Accede al sitio: http://galeon.hispavista.com/ Es una web que proporciona alojamiento web gratuito. Crea una cuenta para crear tu pagina web gratuita y copia tu dirección.
  • 15. Lenguajes del lado servidor ocliente El navegador es una especie de aplicación capaz de interpretar las órdenes recibidas en forma de código HTML fundamentalmente y convertirlas en las páginas que son el resultado de dicha orden. Cuando nosotros pinchamos sobre un enlace hipertexto, en realidad lo que pasa es que establecemos una petición de un archivo HTML residente en el servidor (un ordenador que se encuentra continuamente conectado a la red) el cual es enviado e interpretado por nuestro navegador (el cliente).
  • 16. Lenguajes del lado servidor ocliente Así pues, podemos hablar de lenguajes de lado servidor que son aquellos lenguajes que son reconocidos, ejecutados e interpretados por el propio servidor y que se envían al cliente en un formato comprensible para él. Por otro lado, los lenguajes de lado cliente (entre los cuales no sólo se encuentra el HTML sino también el Java y el JavaScript los cuales son simplemente incluidos en el código HTML) son aquellos que pueden ser directamente "digeridos" por el navegador y no necesitan un pretratamiento.
  • 17. Lenguajes del lado del cliente:Javascript Este es un lenguaje interpretado, no requiere compilación. Fue creado por Brendan Eich en la empresa Netscape Communications. Utilizado principalmente en páginas web. Es similar a Java, aunque no es un lenguaje orientado a objetos, el mismo no dispone de herencias. La mayoría de los navegadores en sus últimas versiones interpretan código Javascript. El código Javascript puede ser integrado dentro de nuestras páginas web. Para evitar incompatibilidades el World Wide Web Consortium (W3C) diseño un estándar denominado DOM (en inglés Document Object Model, en su traducción al español Modelo de Objetos del Documento).
  • 18. Lenguajes del lado del cliente:Javascript Este es un lenguaje interpretado, no requiere compilación. Fue creado por Brendan Eich en la empresa Netscape Communications. Utilizado principalmente en páginas web. Es similar a Java, aunque no es un lenguaje orientado a objetos, el mismo no dispone de herencias. La mayoría de los navegadores en sus últimas versiones interpretan código Javascript. El código Javascript puede ser integrado dentro de nuestras páginas web. Para evitar incompatibilidades el World Wide Web Consortium (W3C) diseño un estándar denominado DOM (en inglés Document Object Model, en su traducción al español Modelo de Objetos del Documento).
  • 19. Ejercicio 5 Abre el bloc de notas y escribe:<script>window.alert("bienvenido")</script>Guarda el archivo con la extensión .html y abrelocon el navegador. Haz un pantallazo de los queocurre.
  • 20. Lenguaje de lado del servidor: PHP Es un lenguaje de programación utilizado para la creación de sitio web. PHP es un acrónimo recursivo que significa “PHP Hypertext Pre-processor”, (inicialmente se llamó Personal Home Page). Surgió en 1995, desarrollado por PHP Group. PHP es un lenguaje de script interpretado en el lado del servidor utilizado para la generación de páginas web dinámicas, embebidas en páginas HTML y ejecutadas en el servidor. PHP no necesita ser compilado para ejecutarse. Para su funcionamiento necesita tener instalado Apache o IIS con las librerías de PHP. La mayor parte de su sintaxis ha sido tomada de C, Java y Perl con algunas características específicas. Los archivos cuentan con la extensión (php).
  • 21. El XHTML y la Web semánticaXHTML significa eXtensible HyperText Markup Language yes la versión modernizada del tradicional HTML4. Si ya conocesHTML, al final del manual hay un apéndice para que sea más fácilla migración a XHTML.XHTML es un lenguaje semántico, lo que quiere decir que nodefinimos el aspecto de las cosas, sino lo que significan. Por ejemplo,si tenemos el título de nuestra página, en lugar de decir “Lo quierogrande en letras rojas”, le indicamos al navegador que “Este es eltítulo principal de la página. Haz algo para que destaque”.Y ese“algo” lo dejamos a decisión del navegador.Obviamente, podemos controlar el aspecto que tienen nuestraspáginas, pero eso es tarea de las hojas de estilo CSS, no del XHTML.
  • 22. Editores de HTML¿Pero para hacer webs no se usa elFrontPage?Sí. También puedes freír huevos con aceite para el coche.WYSIWYG: What You See Is What You Get (en castellano, “loque ves es lo que obtienes”).El Macromedia Dreamweaver es un editor WYSIWYG8 muyextendido e idolatrado por infinidad de diseñadores. Elproblemaes que nos permite hacer webs sin tocar nada de código.Sí, esoes un problema. Genera código basura y no tenemos controlsobre lo que hacemos. Así que antes de usar Dreamweaver
  • 23. HTML HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), hace referencia al lenguaje de marcado predominante para la elaboración de páginas web que se utiliza para describir y traducir la estructura y la información en forma de texto, así como para complementar el texto con objetos tales como imágenes.
  • 24. Las Etiquetas XHTML es un lenguaje basado en etiquetas (tags). Una etiqueta tiene la siguiente forma: <etiqueta >Algo aquí dentro </ etiqueta > Volviendo al ejemplo anterior de nuestro título: la etiqueta para poner el título principal en la página es <h1>. Entonces nos quedaría: <h1 >What is the Matrix ?</h1 > Como ves, <h1> marca el inicio de la etiqueta, mientras que </h1> se encarga de cerrarla. Hay etiquetas que funcionan con una sola parte, y son así: <etiqueta /> Observa el espacio en blanco que hay entre el nombre de la etiqueta y la barra /. Es muy importante para que los navegadores antiguos no se vuelvan locos.
  • 25. Los atributos Hay etiquetas que pueden modificarse con atributos. <etiqueta atributo =" valor ">La mayoría de los atributos de un elemento son pares nombre-valor,separados por un signo de igual «=» y escritos en la etiqueta de comienzode un elemento, después del nombre de éste. El valor puede estarrodeado por comillas dobles o simples, aunque ciertos tipos de valorespueden estar sin comillas en HTML (pero no en XHTML). De todasmaneras, dejar los valores sin comillas es considerado poco seguro Por último, queda comentar un par de reglas que siguen las etiquetas: siempre en minúsculas y los atributos entre comillas
  • 26. Ejercicio 6 Todo archivo HTML presenta una estructura similar a la mostrada a continuación: <HTML> <HEAD> <TITLE> EJEMPLO DE CÓDIGO HTML </TITLE> </HEAD> <BODY> Aquí irá el contenido de la página Web </BODY> </HTML>HEAD: especifica la información relativa al título de la página Web queaparece en la barra de control de la ventana.BODY: hace referencia al contenido del cuerpo del documento.
  • 27. Ejercicio 7: Atributos