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 1
Creación de un Blog con blogger.
Las actividades de este tema se iran
colgando en entradas de dicho blog
tituladas:
Diseño y edición de páginas : Ejercicio 2
Diseño y edición de páginas : Ejercicio 3
Diseño y edición de páginas : Ejercicio 4
Diseño y edición de páginas : Ejercicio 5
etc

3. La World Wide Web
Es uno de los sistemas que ha contribuido de forma decisiva al
acercamiento de la red Internet a un gran número de personas.Y ello por
dos razones:
 La sencillez en el uso
 La atractiva presentación de la información que se consigue con las
técnicas multimedia
La Web no fue creada con el fin de proporcionar una plataforma de fácil
acceso para personas con unos conocimientos rudimentarios de
informáticas. Se desarrolló en el centro CERN (el laboratorio europeo de
física de partículas, en Ginebra) como un medio de compartir información
entre los físicos de alta energía de todo el mundo. De ahí se difundió su
aplicación a la red Internet, y en solo unos pocos años se ha extendido
tanto que el caudal de información disponible vía Web es de tal magnitud
que 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. 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 (Uniform Resource Locator,
Localizador Uniforme de Recursos), HTTP
(HyperText Transfer Protocol, Protocolo de
Transferencia de HiperTexto) y HTML (Hyper
Text Markup Language,Lenguaje de Marcado de
HiperTexto) que son las principales tecnologías
sobre las que se basa la Web.

8. Tim Berners-Lee
Sir Timothy "Tim" John Berners-Lee OM,
KBE (TimBL o TBL) nació el 8 de junio de
1955 en Londres, Reino Unido, se licenció
en Física en 1976 en el Queen's College
de la Universidad de Oxford.
Es considerado el padre de la web.
Berners-Lee trabajó en el CERN desde
junio hasta diciembre de 1980. Durante
ese tiempo, propuso un proyecto basado
en el hipertexto para facilitar la forma de
compartir y la puesta al día de la
informació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 la
WEB:
 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ámicas
Una página es dinámica cuando se incluye
cualquier efecto especial o funcionalidad y
para ello es necesario utilizar otros lenguajes
de programación, aparte del simple HTML.
En realidad el HTML no es lenguaje de
programación sino, más bien, se trata de un
lenguaje descriptivo que tiene como objeto
dar formato al texto y las imágenes que
pretendemos 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 Explorer
Opció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
 Firefox
Opción 1. Pinchar con el botón derecho sobre la página y escoger la opción “Ver código fuente de la
página”
Opción 2. En los menús Ver » Código fuente de la página
Opción 3. Pulsar Ctrl+U
 Google Chrome
Opción 1. Pinchar con el botón derecho sobre la página y escoger la opción “Ver código fuente de la
pá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 o
cliente
 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 o
cliente
 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.

19. 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).

20. 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).

21. Ejercicio 5
 Abre el bloc de notas y escribe:
<script>window.alert("bienvenido")</script>
Guarda el archivo con la extensión .html y abrelo
con el navegador. Haz un pantallazo de los que
ocurre.

22. 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).

23. El XHTML y la Web semántica
XHTML significa eXtensible HyperText Markup Language y
es la versión modernizada del tradicional HTML4. Si ya conoces
HTML, al final del manual hay un apéndice para que sea más fácil
la migración a XHTML.
XHTML es un lenguaje semántico, lo que quiere decir que no
definimos 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 quiero
grande en letras rojas”, le indicamos al navegador que “Este es el
tí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 nuestras
páginas, pero eso es tarea de las hojas de estilo CSS, no del XHTML.

24. Editores de HTML
¿Pero para hacer webs no se usa el
FrontPage?
Sí. También puedes freír huevos con aceite para el coche.
WYSIWYG: What You See Is What You Get (en castellano, “lo
que ves es lo que obtienes”).
El Macromedia Dreamweaver es un editor WYSIWYG8 muy
extendido e idolatrado por infinidad de diseñadores. El
problema
es que nos permite hacer webs sin tocar nada de código.Sí, eso
es un problema. Genera código basura y no tenemos control
sobre lo que hacemos. Así que antes de usar Dreamweaver

25. 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.

26. 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.

27. 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 comienzo
de un elemento, después del nombre de éste. El valor puede estar
rodeado por comillas dobles o simples, aunque ciertos tipos de valores
pueden estar sin comillas en HTML (pero no en XHTML). De todas
maneras, 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

29. 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 que
aparece en la barra de control de la ventana.
BODY: hace referencia al contenido del cuerpo del documento.

30. Ejercicio 7: Atributos