TALLER 1 TALLER 1 - UMET CUPEY COIS – 408 – Prof. Pedro M. Moreno / Enero 2010.

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.

…


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

…


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.

…


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.

…


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.

…


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


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


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

…


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

…


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


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.


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



15

Elementos del HTML


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 … Permite insertar una línea en blanco antes del texto de un párrafo

Line break

 Inserta un conjunto de espacios en blanco antes del próximo elemento

Prácticas de codificación de HTML


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.

…


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%”>

…


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

This is a paragraph<hr />This is another paragraph

Todos los elementos deben ser anidados propiamente

This is a bold paragraph

Herramientas para crear documentos de HTML


20

Notepad – WXP utilitiy Wordpad- WXP utility Text editor WYSIWYG

What you see What you get editor Microsoft FrontPage Macromedia Dreamweaver


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


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

…


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?

…


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


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


ver

ver

Pruebas


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.

…


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


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


TALLER 1 TALLER 1 - UMET CUPEY COIS – 408 – Prof. Pedro M. Moreno / Enero 2010.

Documents

Transcript of TALLER 1 TALLER 1 - UMET CUPEY COIS – 408 – Prof. Pedro M. Moreno / Enero 2010.