Taller 1 - UMET cupey

1. Taller 1- UMET cupey COIS – 408 – Prof. Pedro M. Moreno / Enero 2010

2. Introducción al HTML • Internet – esunacolección de redes de computadorasqueestánenlazadas a millones de computadorasque son usadaspor los negocios, el gobierno, institucioneseducativas, organizaciones, e individuos a través de modems, líneastelefónicas, cables de televisión, y otrosequipos de comunicaciones y medios. • Red – es un grupo de 2 o máscomputadorasqueestánconectadasparacompartirrecursos e información. Con líneas de datos se les permite mover datos de unacomputadora a otra. COIS 408 – Prof. Pedro M. Moreno

3. … • “Internet backbone” – esunacolección de líneas de datos de altavelocidadqueconectansistemas de computadorasgrandeslocalizadasalrededor del mundo. • I S P – “internet service provider” – esunacompañíaquetieneunaconexiónpermanente a un “internet backbone”. Utilizanlíneas de datos de mediana o altavelocidadparapermitir la conexión de individuos y compañías al “backbone” para el acceso a internet. • Residencial – líneas de bajavelocidad • Comercial – líneas de altavelocidad COIS 408 – Prof. Pedro M. Moreno

4. … • www – “world wide web” – es la parte del internet queapoya “multimedia” y consiste de unacolección de documentosenlazados entre sí. Para soportar “multimedia” el web depende del HTTP (Hypertext Transfer Protocol). • http – esunacolección de reglasparaintercambiartexto, gráficas, sonidos, video, y otrosarchivos de “multimedia”. • Páginas de web – son documentosenlazados o páginas de información. COIS 408 – Prof. Pedro M. Moreno

5. … • Sitio web (web site) – esunacolecciónrelacionada con páginas de web que son creadas y mantenidasporuna persona, compañía, institucióneducativa, u otraorganización. • Página de inicio (home page) – es la primerapáginaque el usuariovécuando accede al web site. La página de iniciosirvecomoíndice o tabla de contenidoparaotrosdocumentos y archivosalmacenados en el web site. COIS 408 – Prof. Pedro M. Moreno

6. … • “Web server” o “host” – esunacomputadoraquealmacena y envíapáginas de web solicitadas y otrosarchivos. Cualquiercomputadoraquecontenga el programaparaservir de servidorpuedeservir de “web server” . Cada “web site” esalmacenado en un servidor, y corre en unomásservidores web. Un “web site” grandepuede ser distribuídosobrevariosservidores en distintaslocalizacionesgeográ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). COIS 408 – Prof. Pedro M. Moreno

8. Tipos de páginas web y supropósito COIS 408 – Prof. Pedro M. Moreno

9. Navegadores de páginas de web • “web browser” - es el programaqueintrepreta y desplegapáginas de web y haceposibleque el usuariopuedaver e interactuar con laspáginas web. • Ej: Microsoft Internet Explorer • Mozila Firefox • Opera • Maxthon • The World COIS 408 – Prof. Pedro M. Moreno

10. … • Características del navegador: • Capacidadparalocalizarpáginas web • Permite mover laspáginas web haciaatrás o hacia el frente • Crearunalista de “web sites” favoritos • Permiteescogerlasopciones de seguridad • Para localizarunapágina web utilizando un “browser” el usuariotienequeusar la dirección de la página • URL- “Uniform Resource Locator” – es la dirección de un documento o de otrosarchivosaccesibles 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” queutilice el “hypertext transfer protocol” (http) paralocalizarunapágina de web llamada index.htm en un fólder (html3e) en el servidor web llamado, en estecaso, suamg.edu • Enlaces (“hyperlinks” o “links”) – son usadosparaunirunapágina de web a otraspáginas de web. Es un elementoutilizadoparaconectarunapágina web a otrapágina web en el mismo o en otroservidor no importasulocalización. También se puedeutilizar par moversedentro de unamismapágina. Los enlaces son parte esencial de la www. COIS 408 – Prof. Pedro M. Moreno

12. Hypertext Markup Language • HTML – es el lenguajeutilizadopara la creación de documentos en el www. HTML utiliza un conjunto de instruccionesespecialesllamadasetiquetas (“tags” o “markup”) paradefinir la estructura y el “layout”de un documento web y especificacómolaspáginas son desplegadas en el navegador. • Unapágina web es un archivoquecontienetantotextocomoetiquetas de HTML. Las etiquetasenmarcan el textoparaindicarcómo se verácuando se despleguecomopágina web. COIS 408 – Prof. Pedro M. Moreno

13. COIS 408 – Prof. Pedro M. Moreno

14. Historia del HTML • 1989 – Tim Berners y Robert Calliautrabajaron en el mejoramiento del proceso del manejo de cientos de documentos de investigación. Yapara el 1991Berners desarrollóunacolección de etiquetasquedescribencómodebe verse un documento en un navegador de páginas web. • 1994 – Bernersfundó el Consorcio de la World Wide Web en un esfuerzo de fomentar la universalidad e interoperabilidad del HTML y de promover un foroabiertoparadiscusiónparadesarrolladores de páginas web (W3C). La W3C es un consorcio de industriasquebuscanpromoverestándarespara la evolución y tecnología de la web. COIS 408 – Prof. Pedro M. Moreno

15. COIS 408 – Prof. Pedro M. Moreno

16. Elementos del HTML COIS 408 – Prof. Pedro M. Moreno

17. Prácticas de codificación de HTML • Cuando se crea un archivo de HTML se debenseguirlassiguientesprácticas: • Separarlassecciones de HTML con espaciosparafacilitar la visualización del código • Organizarlaspáginas web de acuerdo a un diseñopreviamentecreado. COIS 408 – Prof. Pedro M. Moreno

18. … • Extensible Hypertext Markup Language (XHTML) COIS 408 – Prof. Pedro M. Moreno

19. … COIS 408 – Prof. Pedro M. Moreno

20. Herramientasparacreardocumentos de HTML • 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 COIS 408 – Prof. Pedro M. Moreno

22. Ciclo de vida del desarrollo de un sitio web COIS 408 – Prof. Pedro M. Moreno

23. .. • Fases de desarrollo y preguntas que se contestarán por fase

24. … COIS 408 – Prof. Pedro M. Moreno

25. … COIS 408 – Prof. Pedro M. Moreno

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

27. Diseño y Desarrollo ver • 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 ver COIS 408 – Prof. Pedro M. Moreno

28. Pruebas • 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 COIS 408 – Prof. Pedro M. Moreno

30. Implementación y Mantenimiento • 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 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. COIS 408 – Prof. Pedro M. Moreno

31. Proyecto 1 – Rediseño de un “web site” • Intrucciones: • Levantar un navegador de páginas web; abrir la página de Amazon.com; imprimir la página principal. • 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”. • 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). • Utilizar las ideas de los ‘websites’ encontrados en el paso 3 para diseñar un nuevo “WEBSITE” para amazon.com en papel. • Entregar todos los documentos impresos y el nuevo diseño del ‘website’ de amazon.com con la fecha de la clase. COIS 408 – Prof. Pedro M. Moreno