TALLER 1TALLER 1- UMET CUPEY
COIS – 408 – Prof. Pedro M. Moreno / Enero 2010
Introducción al HTML
COIS 408 – Prof. Pedro M. Moreno
2
Internet – es una colección de redes de computadoras que están enlazadas a millones de computadoras que son usadas por los negocios, el gobierno, instituciones educativas, organizaciones, e individuos a través de modems, líneas telefónicas, cables de televisión, y otros equipos de comunicaciones y medios.
Red – es un grupo de 2 o más computadoras que están conectadas para compartir recursos e información. Con líneas de datos se les permite mover datos de una computadora a otra.
…
COIS 408 – Prof. Pedro M. Moreno
3
“Internet backbone” – es una colección de líneas de datos de alta velocidad que conectan sistemas de computadoras grandes localizadas alrededor del mundo.
I S P – “internet service provider” – es una compañía que tiene una conexión permanente a un “internet backbone”. Utilizan líneas de datos de mediana o alta velocidad para permitir la conexión de individuos y compañías al “backbone” para el acceso a internet. Residencial – líneas de baja velocidad Comercial – líneas de alta velocidad
…
COIS 408 – Prof. Pedro M. Moreno
4
www – “world wide web” – es la parte del internet que apoya “multimedia” y consiste de una colección de documentos enlazados entre sí. Para soportar “multimedia” el web depende del HTTP (Hypertext Transfer Protocol).
http – es una colección de reglas para intercambiar texto, gráficas, sonidos, video, y otros archivos de “multimedia”.
Páginas de web – son documentos enlazados o páginas de información.
…
COIS 408 – Prof. Pedro M. Moreno
5
Sitio web (web site) – es una colección relacionada con páginas de web que son creadas y mantenidas por una persona, compañía, institución educativa, u otra organización.
Página de inicio (home page) – es la primera página que el usuario vé cuando accede al web site. La página de inicio sirve como índice o tabla de contenido para otros documentos y archivos almacenados en el web site.
…
COIS 408 – Prof. Pedro M. Moreno
6
“Web server” o “host” – es una computadora que almacena y envía páginas de web solicitadas y otros archivos. Cualquier computadora que contenga el programa para servir de servidor puede servir de “web server” . Cada “web site” es almacenado en un servidor, y corre en uno más servidores web. Un “web site” grande puede ser distribuído sobre varios servidores en distintas localizaciones geográficas.
…
COIS 408 – Prof. Pedro M. Moreno
7
Publicar (publishing) – es copiar las páginas de web y otros archivos a un web server. Una vez la página de web es publicada, cualquier usuario que tenga acceso a la internet puede acceder a las páginas, no importa donde esté localizado(s) el(los) servidor(es).
Tipos de páginas web y su propósito
COIS 408 – Prof. Pedro M. Moreno
8
Tipo Usuarios Acceso Aplicaciones
Internet
Cualquier Público Compartir información (información personal, catálogos de productos, información de una clase, etc) con el público (Ej: e-commerce)
Intranet
Empleados o miembros de una organización
Privada Compartir información (formas, manuales, agendas, itinerarios, y otros) con empleados u otros miembros
Extranet
Socios de negocios seleccionados o clientes
Privada Compartir información (actualización de invetarios, especificaciones de productos, información financiera, etc.) con los socios y/o clientes
Navegadores de páginas de web
COIS 408 – Prof. Pedro M. Moreno
9
“web browser” - es el programa que intrepreta y desplega páginas de web y hace posible que el usuario pueda ver e interactuar con las páginas web. Ej: Microsoft Internet Explorer Mozila Firefox Opera Maxthon The World
…
COIS 408 – Prof. Pedro M. Moreno
10
Características del navegador: Capacidad para localizar páginas web Permite mover las páginas web hacia atrás o hacia el
frente Crear una lista de “web sites” favoritos Permite escoger las opciones de seguridad
Para localizar una página web utilizando un “browser” el usuario tiene que usar la dirección de la página URL- “Uniform Resource Locator” – es la dirección de
un documento o de otros archivos accesibles en la internet Ej: http://www.suagm.edu – 208.95.37.10
…
COIS 408 – Prof. Pedro M. Moreno
11
El URL le indica al “browser” que utilice el “hypertext transfer protocol” (http) para localizar una página de web llamada index.htm en un fólder (html3e) en el servidor web llamado, en este caso, suamg.edu
Enlaces (“hyperlinks” o “links”) – son usados para unir una página de web a otras páginas de web. Es un elemento utilizado para conectar una página web a otra página web en el mismo o en otro servidor no importa su localización. También se puede utilizar par moverse dentro de una misma página. Los enlaces son parte esencial de la www.
Hypertext Markup Language
COIS 408 – Prof. Pedro M. Moreno
12
HTML – es el lenguaje utilizado para la creación de documentos en el www. HTML utiliza un conjunto de instrucciones especiales llamadas etiquetas (“tags” o “markup”) para definir la estructura y el “layout”de un documento web y especifica cómo las páginas son desplegadas en el navegador.
Una página web es un archivo que contiene tanto texto como etiquetas de HTML. Las etiquetas enmarcan el texto para indicar cómo se verá cuando se desplegue como página web.
COIS 408 – Prof. Pedro M. Moreno
13
Historia del HTML 1989 – Tim Berners y
Robert Calliau trabajaron en el mejoramiento del proceso del manejo de cientos de documentos de investigación. Ya para el 1991Berners desarrolló una colección de etiquetas que describen cómo debe verse un documento en un navegador de páginas web.
1994 – Berners fundó el Consorcio de la World Wide Web en un esfuerzo de fomentar la universalidad e interoperabilidad del HTML y de promover un foro abierto para discusión para desarrolladores de páginas web (W3C). La W3C es un consorcio de industrias que buscan promover estándares para la evolución y tecnología de la web.
14
COIS 408 – Prof. Pedro M. Moreno
COIS 408 – Prof. Pedro M. Moreno
15
Elementos del HTML
COIS 408 – Prof. Pedro M. Moreno
16
Elemento
Etiqueta de HTML
Propósito
Title <title>…</title>
Para indicar el título a ser desplegado en el “title bar” de la página web
Body <body>…</body>
Especifíca qué se vá a desplegar en la página web; todo el contenido se inserta dentro de las etiquetas.
Paragraph <p>…</p> Permite insertar una línea en blanco antes del texto de un párrafo
Line break
<br /> Inserta un conjunto de espacios en blanco antes del próximo elemento
Prácticas de codificación de HTML
COIS 408 – Prof. Pedro M. Moreno
17
Cuando se crea un archivo de HTML se deben seguir las siguientes prácticas: Separar las secciones de
HTML con espacios para facilitar la visualización del código
Organizar las páginas web de acuerdo a un diseño previamente creado.
…
COIS 408 – Prof. Pedro M. Moreno
18
Extensible Hypertext Markup Language (XHTML)Práctica Ejemplo
El archivo de HTML debe ser incluído en la instrucción de DOCTYPE
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http:://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html><head><title>sample Web page</title>
Todos las etiquetas y atributos deben ser escritos en letras minúsculas
<table width=“100%”>
Todos los valores de los atributos deben ser encerrados por comillas sencillas o dobles
<table width=“100%”>
…
COIS 408 – Prof. Pedro M. Moreno
19
Práctica Ejemplo
Todas las etiquetas deben ser cerradas, incluyendo las etiquetas como img, hr, br, las cuales no necesitan etiquetas para ser cerradas
<p>This is a paragraph</p><hr /><p>This is another paragraph</p>
Todos los elementos deben ser anidados propiamente
<p><strong>This is a bold paragraph</strong></p>
Herramientas para crear documentos de HTML
COIS 408 – Prof. Pedro M. Moreno
20
Notepad – WXP utilitiy Wordpad- WXP utility Text editor WYSIWYG
What you see What you get editor Microsoft FrontPage Macromedia Dreamweaver
COIS 408 – Prof. Pedro M. Moreno
21
Requisitos para las pruebas en el navegador Instalar algunos components de Windows
Control Panel/Add or Remove Programs/ Add or Remove Windows Components
Internet Information Services
Ciclo de vida del desarrollo de un sitio web
COIS 408 – Prof. Pedro M. Moreno
22
..
Fases de desarrollo y preguntas que se contestarán por faseFase Preguntas a contestarse
Planificación
¿ Cuál es el propósito del “web site”?¿ Quién usará el “web site”?¿ Cuál es el ambiente tecnológico de los usuarios?¿ Quién es el dueño y el autor de la información del web site?¿ Quién decide si la información vá o no vá en la página?
Análisis ¿ Qué tareas necesitan los usuarios llevar a cabo?¿ Qué información es significativa para los usuarios?¿ Qué consideraciones del proceso debe tenerse en cuenta?
23
…
COIS 408 – Prof. Pedro M. Moreno
24 Fase Preguntas a contestarse
Diseño y Desarrollo
¿ Cómo debe organizarse las páginas web?¿ Qué tipo de estructura de “web site” es apropiada para el contenido de la página?¿ Qué formas de multimedia contribuye positivamente al “web site”?¿ Necesitamos diseñar la página web para una audiencia internacional?¿ Qué hay si los usuarios fuesen personas con discapacidades físicas?
Pruebas ¿ Está el contenido del “web site” correcto?¿ Está trabajando correctamente la funcionalidad de la página?¿ Están los usuarios capacez de encontrar la información que necesitan y completar sus tareas deseadas?
…
COIS 408 – Prof. Pedro M. Moreno
25
Fase Preguntas a contestarse
Implementación y Mantenimiento
¿ Cómo se publicó la página web?¿ Cómo se va a actualizar el “web site”?¿ Quién será el responsable de la actualización del contenido?¿ Quién será el responsable de estructurar las actualizaciones?¿ Cómo los usuarios van a enterarse de las actualizaciones?¿ Estará monitoreada el “web site”?
Fases (en detalle)
1. Planificación 2. Análisis3. Diseño y
Desarrollo4. Pruebas5. Implementación
y Mantenimiento
26
COIS 408 – Prof. Pedro M. Moreno
3A
3B
Diseño y Desarrollo
En esta etapa se define: cómo organizar el
contenido de las páginas web
se selecciona la estructura apropiada del web site
se determina cómo utilizar multimedios
se determina utilizar conceptos de accesibilidad y diseño de páginas para una audiencia internacional.
Estándares organizacionales para páginas de web
Estructuras para una página web
27
COIS 408 – Prof. Pedro M. Moreno
ver
ver
Pruebas
COIS 408 – Prof. Pedro M. Moreno
28
Requiere que se sigan varios pasos para probar el contenido, funcionalidad y utilidad de la página: Correcciones lingüisticas y gramaticales del lenguaje Asegurarse de que los enlaces funcionen correctamente Confirmar el contenido de las gráficas y que funcionen sus
enlaces correctamente Asegurarse de la accesibilidad y de los asuntos de
internacionalización si es que se consideran en la página Probar las formas y otros elementos de páginas interactivas Probar todas las páginas para asegurar que suban correcta y
rápidamente en todos los ambientes Imprimir todas las páginas para asegurarse que queden
correctamente Revisar el código HTML para asegurarse que cumple con los
estándares de W3C.
…
COIS 408 – Prof. Pedro M. Moreno
29
Cuestionario de utilización para determinar la facilidad del usuario al utilizar la página web y la percepción de la experiencia del usuario que ha visitados las páginas
Ver cuestionario
Implementación Envuelve publicar el “web
site” al “web server” FTP – “file transfere protocol”
Probar el “web site” luego de publicado para confirmar que no existen errores, enlaces rotos o gráficas eliminadas
Mantenimiento Si los usuarios requieren
cambios en el contenido y/o actualizaciones
No comprometer la integridad ni la consistencia con los cambios
Limite el acceso para las actualizaciones: “Web Master” o “Web Developers” para asegurar el punto anterior
Monitorear el “web site” para determinar funcionalidad, utilización y versatilidad del contenido de las páginas (Log) Tipos de navegadores Velocidad de conexión Páginas más solicitadas Patrones de utilización
30
COIS 408 – Prof. Pedro M. Moreno
Implementación y Mantenimiento
LOG FILE - es un informe de estadísticas de utilización que provee una abundancia de información sobre quién visita las páginas y cómo navegan en el website.
Proyecto 1 – Rediseño de un “web site” Intrucciones:
1. Levantar un navegador de páginas web; abrir la página de Amazon.com; imprimir la página principal.
2. Navegar a través de la página de amazon.com y determinar la estructura que utiliza el “web site” y anotarlo en el “print layout”.
3. Buscar 2 librerías en línea; imprimir la página principal de cada ‘website’; navegar a través de cada ‘website’ para determinar cuál sería la estructura de diseño que sería beneficiosa para el usuario (Anote las ideas en una hoja aparte y sus comentarios al respecto).
4. Utilizar las ideas de los ‘websites’ encontrados en el paso 3 para diseñar un nuevo “WEBSITE” para amazon.com en papel.
5. Entregar todos los documentos impresos y el nuevo diseño del ‘website’ de amazon.com con la fecha de la clase.
31
COIS 408 – Prof. Pedro M. Moreno