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

Presentación del tema: "TALLER 1 TALLER 1 - UMET CUPEY COIS – 408 – Prof. Pedro M. Moreno / Enero 2010."— Transcripción de la presentación:

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

2 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 … 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

4 … 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.

5 … 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.

6 … 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.

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

8 Tipos de páginas web y su propósito COIS 408 – Prof. Pedro M. Moreno 8 TipoUsuariosAccesoAplicaciones InternetCualquierPúblicoCompartir información (información personal, catálogos de productos, información de una clase, etc) con el público (Ej: e-commerce) IntranetEmpleados o miembros de una organización PrivadaCompartir información (formas, manuales, agendas, itinerarios, y otros) con empleados u otros miembros ExtranetSocios de negocios seleccionados o clientes PrivadaCompartir información (actualización de invetarios, especificaciones de productos, información financiera, etc.) con los socios y/o clientes

9 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

10 … 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.10http://www.suagm.edu

11 … 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.

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

13 COIS 408 – Prof. Pedro M. Moreno 13

14 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

15 15

16 Elementos del HTML COIS 408 – Prof. Pedro M. Moreno 16 ElementoEtiqueta de HTMLPropósito Title … Para indicar el título a ser desplegado en el “title bar” de la página web 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

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

18 … COIS 408 – Prof. Pedro M. Moreno 18  Extensible Hypertext Markup Language (XHTML) PrácticaEjemplo 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”> sample Web page Todos las etiquetas y atributos deben ser escritos en letras minúsculas Todos los valores de los atributos deben ser encerrados por comillas sencillas o dobles

19 … COIS 408 – Prof. Pedro M. Moreno 19 PrácticaEjemplo 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 This is another paragraph Todos los elementos deben ser anidados propiamente This is a bold paragraph

20 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

21 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

22 Ciclo de vida del desarrollo de un sitio web COIS 408 – Prof. Pedro M. Moreno 22 PlanificaciónAnálisis Diseño y Desarrollo Pruebas Implementació n y Mantenimiento

23 ..  Fases de desarrollo y preguntas que se contestarán por fase FasePreguntas 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 … COIS 408 – Prof. Pedro M. Moreno 24 FasePreguntas 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 … COIS 408 – Prof. Pedro M. Moreno 25 FasePreguntas 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”?

26 Fases (en detalle) 1. Planificación 2. Análisis 3. Diseño y Desarrollo 4. Pruebas 5. Implementación y Mantenimiento 26 COIS 408 – Prof. Pedro M. Moreno 3A 3B

27 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

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

29 … 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

30  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.

31 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