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

Ejercicio 1Creació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 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

La World Wide WebEs 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.

La Web se fundamenta en dos conceptos:

La navegación por medio de hipertexto

La posibilidad de acceder a documentos multimedia

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.

Diseño WEBDebe 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.

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.

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.

Ejercicio 2Comentario personal sobre la

creación de Internet, la WWW y su creador.

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)

Páginas estáticas y dinámicasUna 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.

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:

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 la página”Opción 2. En los menús Ver » Código fuente de la páginaOpció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

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.

Lenguajes del lado servidor o clienteEl 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).

Lenguajes del lado servidor o clienteAsí 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.

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

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

Ejercicio 5Abre 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.

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

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.

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, “lo que ves es lo que obtienes”).El Macromedia Dreamweaver es un editor WYSIWYG8 muy extendido e idolatrado por infinidad de diseñadores. El problemaes 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

HTMLHTML, 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.

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.

Los atributosHay 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

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.

Ejercicio 7: Atributos