Se está descargando su SlideShare. ×
Programación Web                                       Curso                   Programación WebModelo Paracurricular – Des...
Programación WebBienvenidaAhora que ya conoces la programación orientada a objetos, tienes la capacidad dedesarrollar dive...
Programación WebEste módulo tiene dos enfoques de desarrollo, De acuerdo a tus intereses y alfinalizar el capítulo 2, podr...
Programación WebMetodologíaEn el curso de POO utilizaremos distintas técnicas de aprendizaje para cubrir loscontenidos. A ...
Programación WebMÉTODO DE CASOSEl método de casos es diferente a otros sistemas de enseñanza porque adiferencia de los sis...
Programación WebLos pasos a seguir en el método de casos se muestran en el siguiente diagrama:COMPROBACIONES DE LECTURALa ...
Programación Web    •   Tutorial de ASP.NET        http://samples.gotdotnet.com/quickstart/aspplus/doc/default.aspxReglas ...
Programación WebContenidoBIENVENIDA..........................................................................................
Programación Web1. Arquitectura1.1. ARQUITECTURA (Como funciona el Internet y servicios que     proporciona)1. Lea detalla...
Programación Web3. Una vez que tengan el visto bueno del profesor sobre sus preguntas, lleva acabo una investigación indiv...
Programación Web¿Como funciona el Internet?¿Que requerimientos de software se necesitan para usar el Internet?¿Qué req uer...
Programación Webpocos días tuvo varios problemas el correo a veces funcionaba y a veces no, losclientes se quejaban de que...
Programación WebEl contenido del reporte debe cumplir con la siguiente rúbrica Resumen equipoRúbrica para evaluar el repor...
Programación WebRúbrica para evaluar el reporte final de ABP (en equipo) por parte del tutor.Máximo 9 puntos.             ...
Programación WebEntender el como funciona un red y sus principales servicios4. Escenario:Escenario Arquitectura (TCP/IP)A ...
Programación Web¿Qué es el tcp/ip?7. Preguntas esperadas en el análisis del problema:¿Qué es el tcp/ip?, ¿Cuál es la red e...
Programación WebEn el servidor se guarda la información y es ahí donde se realizan las operacionesde base de datos.El clie...
Programación WebEn base a las ligas de "llamado de una página Web" realiza un diagrama queexplique el proceso, que sucede ...
Programación WebEvaluaciónSe evaluará el trabajo en equipo de acuerdo a la siguiente rúbrica.                     Excelent...
Programación Web2. Diseño de Páginas2.1. Lenguaje de Marcas2.1.1. HTMLObjetivosAl terminar este tema tendrás tu primera pá...
Programación Web    2. Precursores de la computación       Solo coloca su principal aportación a la computación e incluye ...
Programación WebMaterial de ApoyoConsulta el material de apoyo y realiza todas las actividades que se indican.En la siguie...
Programación WebCOMENTARIOSCon la finalidad de documentar tu página puedes insertar algunos comentarios enlos que especifi...
Programación Web    •   <BIG> Texto grande, como su nombre lo indica el texto es mostrado en el        tamaño máximo de fu...
Programación Web<TR><TH>Lunes</TH><TH>Martes</TH><TH>Miercoles</TH><TH>Jueves</TH><TH BGCOLOR=blue>Viernes</TH></TR><TR><T...
Programación WebDeberás colocar la siguiente línea de código dentro del cuerpo de tu documentohtml.<IMG SRC=“paraiso.jpg">...
Programación WebSONIDODentro de una página Web se pueden incorporar diversos sonidos con la opciónde poder ser activada po...
Programación Web    •   Los valores para ambos pue den ser absolutos en píxeles, porcentajes, o        bien valores de esc...
Programación Web<HTML><HEAD><TITLE>Ejemlo de frames combinados</TITLE><FRAMESET COLS =“100%”, ROWS=“33%, 33%,*”>     <FRAM...
Programación Web2.1.2. XMLObjetivosEn este tema identificarás los elementos básicos de un documento XML y suinterpretación...
Programación WebEditores de XMLLos editores son aquellos programas que nos permiten escribir los documentosXML. Dentro de ...
Programación WebTodo documento XML se compone de elementos. Cada elemento está delimitadopor una etiqueta de comienzo y ot...
Programación WebCumple la regla denominada "document".Respeta todas las restricciones de buena formaciónCada una de las en...
Programación Webstandalone: Indica si el documento va acompañado de un DTD ("no"), o no lonecesita ("yes"); en principio n...
Programación WebUna declaración XML para el analizador, con la versión, juego de caracteresutilizado, y una indicación de ...
Programación Web<body> <paragraph>See <link xlink:type="simple" xlink:href="new.xml">whats     new</link>!</paragraph>  <p...
Programación Web2.2. Elementos Multimedia2.2.1. Imágenes, Video y SonidoObjetivosDurante este tema identificarás los forma...
Programación WebEntre las aplicaciones informáticas multimedia más comunes podemos mencionarjuegos, programas de aprendiza...
Programación WebLas barras de desplazamiento, que suelen estar situadas en un lado de la pantalla,permiten al usuario move...
Programación WebLlena la Tabla siguiente con la información de las imágenes en sus diferentesformatos:                    ...
Programación WebPasos a seguir:    1. Una vez que haz entrado a Flash, crea un nuevo documento con el color de       fondo...
Programación WebENTORNO DE TRABAJO DE FLASHPara crear y editar películas, normalmente se trabaja con las siguientes funcio...
Programación WebPANELESLos paneles permiten ver, organizar y modificar los elementos de una película deFlash.    •   Utili...
Programación WebConsta de cuatro secciones:    •   La sección Herramientas contiene las herramientas de dibujo, pintura y ...
Programación Web3. Formularios Web3.1. IntroducciónObjetivosAl finalizar este tema tendrás la capacidad de crear aplicacio...
Programación WebProductos esperados / EvaluacionesEste tema se evaluará con el documento que entregarás, tu respuesta debe...
Programación WebMateriales de apoyoAquí encontrarás los materiales de apoyo para este capítulo    •   Da click aquí para v...
Programación Web                  Cliente                                             PC/Mac/Unix/...                     ...
Programación Web                    Herramientas de                       desarrollo                            Clientes  ...
Programación Web          Visual          C++             C#            Perl       Python       …          Basic          ...
Programación Web         Window                                M FC/ATL                                .NET            s  ...
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Programacion web se
Próxima SlideShare
Cargando en...5
×

Programacion web se

1,227

Published on

Published in: Educación
1 Comment
0 Me gusta
Estadísticas
Notas
  • Be the first to like this

Sin descargas
reproducciones
reproducciones totales
1,227
En SlideShare
0
De insertados
0
Número de insertados
0
Acciones
Compartido
0
Descargas
49
Comentarios
1
Me gusta
0
Insertados 0
No embeds

No notes for slide

Transcript of "Programacion web se"

  1. 1. Programación Web Curso Programación WebModelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. I
  2. 2. Programación WebBienvenidaAhora que ya conoces la programación orientada a objetos, tienes la capacidad dedesarrollar diversas aplicaciones.En este módulo tendrás la oportunidad mostrar que eres una persona exitosa,capaz de enfrentar retos que requieren iniciativa y creatividad en el desarrollo deprogramación Web y de utilizar nuevas herramientas con las que podrás crearaplicaciones cliente-servidor. Agradecimiento y ReconocimientoDespués de una ardua tarea de investigación se ha logrado la creación de unaobra vasta en conocimiento en el desarrollo de las Tecnologías de la Información yComunicación.La presente obra no hubiera sido posible sin la valiosa aportación de destacadosautores y especialistas en la materia. Es por ello que a manera de reconocimientoqueremos agradecer su participación: PROGRAMACIÓN WEB Mtro. Pedro Bello López Benemérita Universidad Autónoma de Puebla Ing. Yalú Galicia Hernández Benemérita Universidad Autónoma de PueblaIntroducciónEn el mundo están sucediendo grandes cambios que hacen que las personas seadentren más en la tecnología. Es por eso que el curso de Programación Webestá desarrollado para que seas impulsor de este cambio.Como primer paso veremos los elementos de la arquitectura de Internet, despuésla forma en que se desarrollan los sitios Web, considerando los aspectos deprogramación, así como las aplicaciones en la vida moderna, tomando en cuentasiempre a las personas que las utilizan.Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. II
  3. 3. Programación WebEste módulo tiene dos enfoques de desarrollo, De acuerdo a tus intereses y alfinalizar el capítulo 2, podrás elegir el enfoque que prefieras para trabajar duranteel curso (cada enfoque abarca 3 capítulos). Al finalizar estos, concluiremos con elcapítulo 6, en donde podrás aplicar cualquiera de los dos enfoques enaplicaciones reales.Esperamos que muestres la iniciativa y responsabilidad que en otros cursos paraque aproveches tus habilidades de la mejor forma posible en este curso.Recuerda que tu tutor tiene un compromiso de honestidad, responsabilidad ylealtad contigo, al igual con las personas con las que interactúas.Intenciones EducativasEn este curso se pretende que obtengas las habilidades y los conocimientosnecesarios para proponer soluciones Web originales, basadas en elautoaprendizaje y la reflexión, asumiendo actitudes de honestidad,responsabilidad y confidencialidad.Además, el curso de programación Web está encaminado a desarrollar tucreatividad para obtener productos de software que proporcionen un servicio decalidad.ObjetivosGENERALESAl finalizar el curso serás capaz de aplicar las diferentes herramientas y lenguajesde programación en Internet para el desarrollo de aplicaciones Web.ESPECIFICOSConocerás la arquitectura de desarrollo en Internet.Podrás desarrollar aplicaciones Web en la plataforma que elijasAplicarás las herramientas para crear páginas Web estáticas, dinámicas y activas.Vincularás bases de datos dentro de las aplicaciones Web.Aplicarás los conocimientos adquiridos en el desarrollo de un sitio Web.Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. III
  4. 4. Programación WebMetodologíaEn el curso de POO utilizaremos distintas técnicas de aprendizaje para cubrir loscontenidos. A continuación encontrarás una breve descripción de dichas técnicas.Adicionalmente, en las actividades de aprendizaje podrás encontrar lasindicaciones específicas en relación con la técnica utilizada en cada una de ellas.APRENDIZAJE BASADO EN PROBLEMAS (ABP)La técnica de Aprendizaje Basado en Problemas (ABP, ó del inglés “PBL-ProblemBased Learning”) es una técnica didáctica constructivista. La cual consta de lossiguientes pasos:1. El docente formará grupos de alumnos que trabajarán en equipo para resolverel problema del escenario propuesto. Se nombrará un secretario por equipo, elcual organizará el funcionamiento del mismo y se encargará de enviar losresultados de las actividades realizadas al profesor.2. El docente presentará el material del escenario, asignará roles y unificarácriterios.3. Los estudiantes elaborarán una serie de preguntas respecto al escenario;posteriormente, procurarán resumir el problema del escenario planteándolo (de serposible) en forma de una sola pregunta. El docente verificará que tal pregunta seala apropiada.4. Una vez establecida la pregunta principal y las preguntas particulare s, losestudiantes analizarán y seleccionarán en equipo las preguntas más relevantes ainvestigar.5. Como primer entregable, cada estudiante entregará un reporte individualcorrespondiente a una investigación hecha por él mismo.6. Posteriormente, ya en equipo, lo integrantes discutirán en equipo los resultadosde su investigación para establecer en común las respuestas a las preguntasplanteadas.3. Finalmente, como segundo y último entregable, cada integrante entregará un reporte individual, más sin embargo, este deberá reflejar los aspectos puestos en común en la discusión en grupo. Adicionalmente, en algunos casos de programación, se solicitarán la entrega de programas.Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. IV
  5. 5. Programación WebMÉTODO DE CASOSEl método de casos es diferente a otros sistemas de enseñanza porque adiferencia de los sistemas tradicionales exige que se tome parte activa en elanálisis de los problemas y en la determinación de alternativas o cursos de acciónen situaciones reales muy específicas.El método de casos te pondrá en roles que implican toma de decisiones. Un puntomuy importante del método es el análisis del caso ya que permite aprender, através de la experiencia de otros casos similares para tú toma de decisiones. Entremás casos se resuelvan, mayor será tu habilidad para identificar los problemas yformular soluciones de la vida real, lo cual es de vital importancia, ya que no sonsituaciones inventadas.En el método de casos, las decisiones que se tomen y el proceso que se siga paratomar decisiones es la clave, desarrollando habilidades para la toma dedecisiones, y que pueda sustentar mediante un análisis adecuado, aprendiendo enel proceso a comunicar tus criterios, a defender los hechos y opiniones endebates.Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. V
  6. 6. Programación WebLos pasos a seguir en el método de casos se muestran en el siguiente diagrama:COMPROBACIONES DE LECTURALa técnica de comprobación de lectura tiene como finalidad fomentar en el alumnola habilidad de leer, analizar y comprender. La comprensión que realices, sereflejará al final de cada lección, ya que se presenta una evaluación por medio depreguntas muy puntuales acerca de la lectura.Fuentes de InformaciónAquí podrás encontrar algunas ligas a Internet que te apoyarán en tu aprendizajede los diferentes temas que forman este cursoArquitectura de Internet • Tutorial TCP/IP http://ditec.um.es/laso/docs/tut-tcpip/3376fm.html • Otro Tutorial sobre TCP/IP http://www.saulo.net/pub/tcpip/ • Algunos conceptos de Cliente -Servidor http://www4.uji,es/%7Eal019803/tcpip/index.htm • Modelo Cliente-Servidor http://www.juntadeandalucia.es/averroes/recursos_informaticos/curso_inter net/curso/interne4.htmASP.NET • Universidad .NET http://www.microsoft.com/spanish/msdn/comunidad/uni.net/Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. VI
  7. 7. Programación Web • Tutorial de ASP.NET http://samples.gotdotnet.com/quickstart/aspplus/doc/default.aspxReglas del Juego y Sistema de EvaluaciónCada capítulo incluye diferentes actividades planeadas para reforzar tuaprendizaje. Estas actividades podrán ser: * Resolver cuestionarios * Realizar alguna investigación * Elaborar el diseño de alguna interface * Escribir programas o hasta una aplicación completa.Siempre y cuando la actividad se entregue en el tiempo y forma descrito en lamisma actividad, podrá obtener el 100% del porcentaje total asignado e indicadoen la forma de evaluación de la actividad.La suma de los porcentajes de las diferentes actividades suma el 100%, quecorresponde al 100 en el curso.Los trabajos (investigaciones, programas, proyectos, etc) que serán enviados altutor deberán seguir el formato que se indica a continuación:Investigaciones:invN_matricula.docDonde N indica el número de investigaciónProgramas progN_matricula.extDonde N indica el número de programa y ext la extensión del archivo (.aspx,.aspx.cs, etc.)Proyectos (en archivo Zip) proyN_matricula.zipDonde N indica el número de proyectoModelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. VII
  8. 8. Programación WebContenidoBIENVENIDA.....................................................................................................................................................................IIINTRODUCCIÓN .............................................................................................................................................................IIINTENCIONES EDUCATIVAS .................................................................................................................................IIIOBJETIVOS......................................................................................................................................................................IIIMETODOLOGÍA ............................................................................................................................................................ IVFUENTES DE INFORMACIÓN.................................................................................................................................VIREGLAS DEL JUEGO Y SISTEMA DE EVALUACIÓN................................................................................VII1. ARQUITECTURA............................................................................................................................................... 1 1.1. ARQUITECTURA (COMO FUNCIONA EL INTERNET Y SERVICIOS QUE PROPORCIONA).......................1 1.2. A RQUITECTURA CLIENTE -SERVIDOR .............................................................................................................82. DISEÑO DE PÁGINAS................................................................................................................................ 12 2.1. LENGUAJE DE MARCAS..................................................................................................................................12 2.1.1. HTML ........................................................................................................................................................ 12 2.1.2. XML ........................................................................................................................................................... 22 2.2. ELEMENTOS M ULTIMEDIA ............................................................................................................................29 2.2.1. Imágenes, Video y Sonido..................................................................................................................... 29 2.2.2. Animaciones ............................................................................................................................................. 323. FORMULARIOS WEB ..................................................................................................................................37 3.1. INTRODUCCIÓN ...............................................................................................................................................37 3.2. CONTROLES DE SERVIDOR ............................................................................................................................53 3.3. CONTROLES DE USUARIO ..............................................................................................................................78 3.4. A CCESO A DATOS ...........................................................................................................................................85 3.5. TRABAJO CON OBJETOS..............................................................................................................................1494. SERVICIOS WEB .........................................................................................................................................158 4.1. INTRODUCCIÓN ............................................................................................................................................158 4.2. ESCRITURA DE SERVICIOS WEB ................................................................................................................182 4.3. UTILIZACIÓN DE DATOS EN SERVICIOS WEB...........................................................................................1845. OPTIMIZACIÓN DE APLICACIONES WEB ...............................................................................185 5.1. ESTADO DE LA APLICACI ÓN .......................................................................................................................185 5.2. SERVICIOS DE CACHÉ..................................................................................................................................198 5.2.1. Usando el objeto caché........................................................................................................................198 5.2.2. Almacenamiento en caché de los resultados de página..................................................................198 5.2.3. Almacenamiento en caché de fragmentos de página ......................................................................199 5.3. CONFIGURACIÓN..........................................................................................................................................207 5.3.1. Formato del archivo de configuración..............................................................................................207 5.3.2. Recuperar la configuración .................................................................................................................207 5.4. SEGURIDAD...................................................................................................................................................215 5.4.1. Autenticación y Autorización..............................................................................................................215 5.4.2. Autenticación basada en Windows.....................................................................................................216 5.4.3. Autenticación basada en formularios................................................................................................2166. APLICACIONES DE SITIOS WEB ....................................................................................................231Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. VIII
  9. 9. Programación Web1. Arquitectura1.1. ARQUITECTURA (Como funciona el Internet y servicios que proporciona)1. Lea detalladamente el siguiente escenario:Escenario Arquitectura (que es Internet)Silvia una empresaria de mucho éxito en la venta de servicios de recursoshumanos en los años 80’s y principios de los 90’s después de darle de beber lechea su linda gatita partió a su oficina, en donde también labora su hijo Bebo, el cualtiene mucho interés en que la empresa de su madre continué con el éxito que hatenido ya que a últimas fechas la cartera de clientes se ha mantenido y vadisminuyendo la demanda de sus servicios en lugar de aumentar, su madre esuna persona emprendedora pero por su edad no es tan fácil convencerla del usode la tecnología ya que siempre ha pensado que el trato personal en el área derecursos humanos es lo que cuenta, por tal motivo Bebo ha decidido que tiene queconvencer a su madre de ofrecer algún servicio innovador dentro del área derecursos humanos a fin de poder mantener he incrementar su cartera de clientespara poder lograrlo, piensa que lo primero que debe hacer es convencer a Silviade ¿Cómo funciona el Internet y los servicios que puede proporcionar? por talmotivo decido tomarse un tiempo de 4 hrs.En la que mostró las bondades del Internet a Silvia ya que entro a sitios deInternet donde consulto información, compro un producto, contesto su mail, bajoinformación de productos que quería comprar y cada operación y/o consulta quehacia le explicaba ampliamente a Silvia. Al terminar su sesión demostrativa Silviacontinuo con su trabajo cotidiano y camino a casa recordó lo sucedido con su hijoy pensaba que ella debería conocer un poco mas del tema y así reconsideraría lapetición de Bebo de darle la oportunidad de realizar una aplicación en el área deR.H.Después de cenar y antes de conciliar el sueño por su mente solo pensaba comofunciona eso de Internet, que se requiere para que funcione y que puedo hacercon el Internet….2. Con base en el escenario, y trabajando en equipo, elabora una serie depreguntas sobre como ayudar a Silvia para que pueda disipar sus dudas. Elijan las10 que consideren más relevantes y el secretario del equipo deberá colocarlastareas Preguntas Arquitectura "metas de aprendizaje". 1.1Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 1
  10. 10. Programación Web3. Una vez que tengan el visto bueno del profesor sobre sus preguntas, lleva acabo una investigación individual, que deberás colocar en tareas: Resumenindividual Arquitectura 1.1 y te será calificado con la rúbrica de Resumenindividual5. Una vez que tengan la aprobación del profesor deberán elaborar una propuestade solución a la pregunta de su definición del problema, así como su reporte elcual colocarás en Resumen por equipo Arquitectura 1.1, en donde se incluirádicha propuesta y una síntesis de las respuestas a sus preguntas relevantesfinales hechas en Preguntas Arquitectura "metas de aprendizaje". 1.1El contenido del reporte debe cumplir con la siguiente rúbrica Resumen equipoGuía Tutorial, Arquitectura-cliente servidor1. Materia: Programación Web2. Tema: Arquitectura-Como funciona Internet y servicios que proporciona3. Objetivos de aprendizaje: Poder describir la tecnología del Web4. Escenario:Escenario Arquitectura (que es Internet)Silvia un empresaria de mucho éxito en la venta de servicios de recursos humanosen los años 80’s y principios de los 90’s después de darle de beber leche a sulinda gatita partió a su oficina, en donde también labora su hijo Bebo, el cual tienemucho interés en que la empresa de su madre continué con el éxito que ha tenidoya que a últimas fechas la cartera de clientes se ha mantenido y va disminuyendola demanda de sus servicios en lugar de aumentar, su madre es una personaemprendedora pero por su edad no es tan fácil convencerla del uso de latecnología ya que siempre ha pensado que el trato personal en el área derecursos humanos es lo que cuenta, por tal motivo Bebo ha decidido que tiene queconvencer a su madre de ofrecer algún servicio innovador dentro del área derecursos humanos a fin de poder mantener he incrementar su cartera de clientespara poder lograrlo, piensa que lo primero que debe hacer es convencer a Silviade ¿Cómo funciona el Internet y los servicios que puede proporcionar?Después de cenar y antes de conciliar el sueño por su mente solo pensaba comofunciona eso de Internet, que se requiere para que funcione y que puedo hacercon el Internet….5. Posibles términos q ue deban clarificarse:6. Definición del problema esperada:¿Como funciona el Internet?7. Preguntas esperadas en el análisis del problema:Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 2
  11. 11. Programación Web¿Como funciona el Internet?¿Que requerimientos de software se necesitan para usar el Internet?¿Qué req uerimientos de hardware se necesitan para hacer un sitio de Internet?¿Qué servicios proporciona el Internet?¿Qué es un servicio?¿Qué es el correo electrónico?¿Qué es la mensajeria?¿Hay seguridad al trabajar en la Web?¿Qué tan factible es construir aplicaciones Web?¿Cuánto cuesta construir esto?8. Metas de aprendizaje:¿Como funciona el Internet?¿Que requerimientos de software se necesitan para usar el Internet?¿Qué requerimientos de hardware se necesitan para hacer un sitio de Internet?¿Qué servicios proporciona el Internet?Rúbrica para evaluar el reporte de investigación individual Máximo 9 puntos.Ver rubrica resumen investigación personalRúbrica para evaluar el reporte final de ABP (en equipo) por parte del tutor.Máximo 9 puntosVer rubrica resumen investigación equipo1.1 Arquitectura- TCP/IP y SERVICIOS1. Lea detalladamente el escenario:Escenario Arquitectura (TCP/IP)A la semana siguiente Silvia estaba preocupa por la noticia que acaba de recibiruno de sus exclusivos y principales clientes sin saberlo ella, desde hace tiempo loestaba compartiendo con un competidor eso significaba que empezaba a perderservicios con sus mejores clientes, aunque preocupada, estaba segura de que unanueva puerta llamada Internet se habría a su paso, así que mando llamar a Bebo yle pidió que tomara las acciones necesarias en la elaboración de productos derecursos humanos apoyados en la tecnología de Internet, luego recordó, que porsu preocupación no había alimentado a su gata esa mañana.Fue así como Bebo decidió como primer paso hacer la compra de equipo decomputo, la instalación de la red interna así como hacer una pequeña página Webque anunciará su empresa y decidió comprar 20 computadoras actuales, 1 switchpara comunicar los 2 pisos de oficinas que tenia en el edificio (piso 20 con 12equipos y el piso 15 con 8 equipos y un servidor) se instaló el servidor de correo ycoloco algunos documentos que podrían bajar los clientes vía FTP (según elproveedor le había dicho). Y así pudo estrenar su flamante instalación y muycontento de poner a Silvia Consultores RH en la vanguardia de tecnología, pero aModelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 3
  12. 12. Programación Webpocos días tuvo varios problemas el correo a veces funcionaba y a veces no, losclientes se quejaban de que no siempre podían bajar bien los documentos y que lapágina no siempre estaba disponible que recibían un error que empezaba con algode http... y 2 máquinas mostraban al iniciarse un mensaje que decía IP duplicada yya no podían hacer uso de los servicios de red.Bebo consulto a varios asesores, pero no entendía bien lo que le decían algunoscomentaron debes tener un servidor DHCP otros decían que bastaba con colocaruna adecuada administración de direcciones IP otros comentaban que el switch nofuncionaba y que solo con los concentradores bastaba mientras que los demásdecían que le faltaba un dominio de Internet y una dirección fija, eso erademasiado para Bebo así que no sabía en que proveedor confiar el trabajo de losajustes y la afinación del equipo recién adquirido.Así que pensó que estaba en esta indecisión por su carencia de conocimientos deltema.2. Con base en el escenario, y trabajando en equipo, elaboren una serie depreguntas que ayuden a Bebo Elijan las 10 que consideren más relevantes y elsecretario del equipo deberá colocarlas tareas Preguntas Arquitectura "metas deaprendizaje". 1.23. Una vez que tengan el visto bueno del profesor sobre sus preguntas, lleva acabo una investigación individual, que deberás colocar en tareas: Resumenindividual Arquitectura 1.2 y te será calificado con la rubrica de Resumenindividual5. Una vez que tengan la aprobación del profesor deberán elaborar una propuestade solución a la pregunta de su definición del problema, así como su reporte elcual colocarás en Resumen por equipo Arquitectura 1.2, en donde se incluirádicha propuesta y una síntesis de las respuestas a sus preguntas relevantesfinales hechas en Preguntas Arquitectura "metas de aprendizaje". 1.2Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 4
  13. 13. Programación WebEl contenido del reporte debe cumplir con la siguiente rúbrica Resumen equipoRúbrica para evaluar el reporte de investigación individual Máximo 9 puntos. Contenido del Excelente Bien Regular Mal Total reporte 3 2 1 0 Las incluye, pero Las incluye, pero Las incluye y Metas de difieren en algunos no coinciden con coinciden con el No las incluye aprendizaje puntos de las del las del resto del resto del equipo. resto del equipo equipo Responde con Les da una cierto detalle, pero No respondeRespuestas a las respuesta clara y no fundamenta Incluye de manera metas de fundamentada en todas sus diagrama(s) completa todas aprendizaje la bibliografía respuestas. explicativo(s) las metas de consultada aprendizaje Las incluye de Incluye mas de 3 Las incluye de Referencias manera completa, referencia s manera completa y No las incluye bibliográficas pero no con el adicionales a las correcta. formato solicitado publicadas TOTALModelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 5
  14. 14. Programación WebRúbrica para evaluar el reporte final de ABP (en equipo) por parte del tutor.Máximo 9 puntos. Excelente Bien Regular MalContenido del reporte Total 3 2 1 0 Dan una Dan una solución/explica El equipo no solución/explicaci ción detallada al Incluye proporciona una Solución o explicación ón detallada al problema, pero diagrama(s) solución/explica al problema problema y con no la explicativo(s). ción al fundamentos fundamentan de problema. sólidos. manera completa. Únicamente Sintetizan de Presentan un presentan listas Síntesis de la manera lógica y resumen lógico de datos y/o copiainformación con la cual coherente la de la de lo que cada No la incluyen. fundamentan la información información solución/explicación quien investigó, investigada por recopilada por sin darle todos. todos. coherencia. Las incluy e de manera Incluye mas de 3 Las incluye de Referencias completa, pero referencia s bibliográficas manera completa No las incluye no con el adicionales a las y correcta. formato publicadas solicitado TOTALGuía Tutorial Arquitectura-TCP/IP y Servicios1. Materia: Programación Web2. Tema: Arquitectura-TCP/IP3. Objetivos de aprendizaje:Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 6
  15. 15. Programación WebEntender el como funciona un red y sus principales servicios4. Escenario:Escenario Arquitectura (TCP/IP)A la semana siguiente Silvia estaba preocupa por la noticia que acaba de recibiruno de sus principales y exclus ivos clientes sin saberlo ella desde hace tiempo loestaba compartiendo con un competidor eso significaba que iba a empezar aperder servicios con algunos de sus clientes importantes, aunque preocupada,estaba segura de que una nueva puerta llamada Internet se habría a su paso, asíque mando llamar a Bebo y le pidió que tomaras las acciones necesarias en laelaboración de productos de recursos humanos apoyados en la tecnología deInternet, luego recordó que por su preocupación no había alimentado a su gataesa mañana.Fue así como Bebo decidió como primer paso hacer la compra de equipo dehardware y en la instalación de la red interna así como hacer una pequeña páginaWeb que anunciara a su empresa y así decidió comprar 20 computadorasactuales, 1 switch para comunicar los 2 pisos de oficinas que tenia en el edificio(piso 20 con 12 equipos y el piso 15 con 8 equipos y un servidor) así como instalarla red y el servidor de correo y coloco algunos documentos que podrían bajar losclientes vía FTP (según el proveedor le había dicho). Y así pudo estrenar suflamante instalación y muy contento de poner a Silvia Consultores RH en lavanguardia de tecnología, pero a pocos días tuvo varios problemas el correo aveces funcionaba y a veces no, los clientes se quejaba n de que no siempre podíanbajar bien los documentos y que la página no siempre estaba disponible querecibían un error que empezaba con algo de http y 2 máquinas mostraban aliniciarse un mensaje que decía IP duplicada y ya no podían hacer uso de losservicios de red.Bebo consulto a varios asesores pero no entendía bien lo que le decían algunoscomentaron debes tener un servidor DHCP otros decían que bastaba con colocaruna adecuada administración de direcciones IP otros comentaban que el switch nofuncionaba y que solo con los concentradores bastaba mientras que los demásdecían que le faltaba un dominio de Internet y una dirección fija, eso erademasiado para Bebo así que no sabía a que proveedor decidir para darle eltrabajo de los ajustes y afinación del equipo acabado de comprar.Así que pensó que estaba en esta indecisión por su carencia de conocimientos deltema.5. Posibles términos que deban clarificarse:6. Definición del problema esperada:Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 7
  16. 16. Programación Web¿Qué es el tcp/ip?7. Preguntas esperadas en el análisis del problema:¿Qué es el tcp/ip?, ¿Cuál es la red en que se basa el Internet? Estas 2 preguntasson similares¿Cómo trasmite información el tcp/ip?¿Qué es el servicio de eMail?¿Qué es el servicio FTP?¿Qué otros servicios hay?¿Cómo funcionan los servios de Internet FTP, HTTP, SMTP, SHTP?¿Qué son los dominios?¿Cómo elegir un consultor?¿Cuánto cuesta los servicios de consultoría?Las amarillas son preguntas que podrían surgir pero que no son tratadas comoparte del tema8. Metas de aprendizaje:¿Qué es el tcp/ip?¿Cómo funcionan los servios de Internet FTP, HTTP, SMTP, SHTP?¿Cómo trasmite información el tcp/ip?¿Qué son los dominios?Rúbrica para evaluar el reporte de investigación individual Máximo 12 puntos.Ver rubrica resumen investigación personalRúbrica para evaluar el reporte final de ABP (en equipo) por parte del tutor.Máximo 9 puntos.1.2. Arquitectura cliente-servidorIntroducciónCada día se incrementan los sitios Web con aplicaciones que demandanfuncionalidad adicional de algún tipo de procesamiento y/o almacenamiento dedatos por parte del servidor (no basta con de simplemente ver información depáginas estáticas), nos es relativamente fácil encontrar sitios Web que permitenregistrar datos y posteriormente nos envían información de venta, también hayservicios de búsqueda de empleo sin olvidar los 2 servicios mas conocidos queson el Messenger y el e-mail, estos sistemas en su gran mayoría siguen elsiguiente comportamiento.Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 8
  17. 17. Programación WebEn el servidor se guarda la información y es ahí donde se realizan las operacionesde base de datos.El cliente (usuario) desde su navegador (browser) activa el proceso de dar de altasus datos, de hacer modificaciones o de consultar alguna información yposteriormente ver el resultado de cada operación en su pantalla.Este Web Quest tiene como finalidad comprender el modelo de programación queaplica en el Internet para poder construir aplicaciones que demanden algunafuncionalidad adicional de proceso en el servidor.La TareaTu eres miembro de la empresa de consultoría que llevará a cabo la asistenciatécnica a la empresa Silvia Consultores RH, tu contacto principal será Bebo (ellíder de proyecto por parte de la empresa Silvia Consultores RH) él te hasolicitado como primer paso que le expliques detalladamente y con ayuda dealgunos diagramas el funcionamiento del modelo de programación de InternetTu trabajo consiste en realizar un informe en Word y lo colocarás en el foro que seencuentra a continuación.Debes incluir diagramas y explicaciones concisas de como funciona el modelo deprogramación y los elementos de software y hardware mínimos que se requierenpara su funcionamiento.El ProcesoPara llevar a cabo la tarea debes utilizar el mismo equipo con el que has venidotrabajando y realizar las siguientes acciones:Consulta las ligas de "cliente servidor" en la sección de recursos y determinacuales son los roles que desempeñan los clientes y cual el de los servidores.En base a las ligas de "cliente servidor" indica como se realiza la comunicaciónentre un cliente y un servidor y realiza un diagrama.En base a las ligas de "cliente servidor" menciona que componentes mínimos dehardware se requiere para que exista una comunicación de arquitectura cliente-servidor e indique que función realiza cada uno de ellos.En base a las ligas de "cliente servidor" indica que componentes mínimos desoftware se requiere para que exista una comunicación de arquitectura cliente-servidor e indique que función realiza cada uno de e llos.Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 9
  18. 18. Programación WebEn base a las ligas de "llamado de una página Web" realiza un diagrama queexplique el proceso, que sucede cuando un usuario teclea una dirección deInternet y al cabo de un Tiempo él puede ver la página Web que solicitó (anexe unpárrafo de al meno s 120 palabras que explique el diagrama)RecursosPara cliente servidor, componentes de software y hardware utiliza los siguientesenlaces:http://www.inei.gob.pe/biblioineipub/bancopub/inf/lib5038/carac.HTMhttp://www.inei.gob.pe/biblioineipub/bancopub/inf/lib5038/indice.HTMhttp://docs.hp.com/es/5990-8174/ch02s01.html#chcbdiachttp://www.monografias.com/trabajos24/arquitectura-cliente -servidor/arquitectura-cliente -servidor.shtmlhttp://www.htmlweb.net/manual/basico/internet_2.htmlhttp://www.geocities.com/aula_web/inter03.htmlhttp://agamenon.uniandes.edu.co/~revista/articulos/cliser.htmlPara comprender como se procesa el llamado de una página Web consulta lossiguientes enlaces:http://es.wikipedia.org/wiki/HTTPhttp://www.brujula.net/wiki/Capa_de_aplicaci%C3%B3nhttp://eia.udg.es/~ramon/ib/t3/tema3.htm#punto32http://cdec.unican.es/libro/HTTP.htmModelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 10
  19. 19. Programación WebEvaluaciónSe evaluará el trabajo en equipo de acuerdo a la siguiente rúbrica. Excelente Bien Medio Incompleto 3 2 1 0 Contenido Explicaciones Explicaciones de Explicaciones El equipo no completas de todos todos los puntos incompletas ,faltan presenta alguna los puntos y fundamentos explicación del proporciona problema información adicional Orden y Trabajo bien Buen orden y que Problemas con el orden No existe unorganización ordenando y las explicaciones y/o clasificación de las orden en las redacciones precisas concuerden con explicaciones y ideas y estás no que coincidan con los diagramas presenta problemas de coinciden con los diagramas concordancia con los los diagramas diagramas propuestos Diagramas Los diagramas y/o Contiene Los diagramas y/o Ausencia de gráficos y dibujos son claros y bastantes gráficos dibujos son algo diagramas o no tablas ayudan al y diagramas difíciles de entender. se pueden entendimiento de la entender arquitectura cliente servidorConclusiónAl completar esta actividad habrás entendido como funciona el modelo deprogramación de Internet conocido como cliente servidor, cuales son loscomponentes genéricos de software y hardware que se requieren y el proceso quesucede desde que escribes una dirección URL en un navegador (browser) y elservidor te devuelve la página html que solicitaste.Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 11
  20. 20. Programación Web2. Diseño de Páginas2.1. Lenguaje de Marcas2.1.1. HTMLObjetivosAl terminar este tema tendrás tu primera página HTML la cual será base paraañadirle más componentes en los siguientes temas.Instrucciones • Consulta la demostración que se encuentra ubicada en los materiales de apoyo del curso. • Prueba los ejemplos que se te proporcionan. • Investiga el uso de las etiquetas que no son completamente explicadas dentro del material del curso. • Resuelve los ejercicios propuestos ubicados en la sección de evaluación. Material del curso. • Mejora los ejercicios propuestos según tu creatividad y sube tu página a un servidor (p.e. yahoo) y envíale la dirección a tu tutor para tu evaluación.TIP: Copia los ejemplos proporcionados para ver su resultado y después v equitando pequeñas partes de código para entender mejor su uso.Productos esperados / EvaluacionesConstruye una página Web que contenga como mínimo los siguientes puntos: 1. Historia de la computación. Por generaciones, realizando un cuadro comparativo en el cual especificas las características más importantes dentro de cada una, este lo puedes realizar mediante el uso de tablas.Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 12
  21. 21. Programación Web 2. Precursores de la computación Solo coloca su principal aportación a la computación e incluye imágenes de ambos. 3. Tendencias en el desarrollo de la computación. Estas deben ser de hardware y software. 4. Dentro de las tendencias que haz encontrado elige la que más te haya interesado y desarróllalo.Tu documento deberá elaborarse con frames y tener el siguiente formato:El titulo deberá tener un tamaño lo suficientemente grande para llamar la atención,pero sin descuidar los tips que se te proporciona n posteriormente para un buendiseño. Además de contener una imagen o bien, un logotipo.El índice, contendrá las ligas a los temas preestablecidos de manera tal que sucontenido se visualice en el frame de información.Si lo consideras pertinente puedes añadir más información con la finalidad dehacer más completa tu página.Este tema se evaluará con la página enviada a tu tutor y contará el 2.5% de lacalificación final, siempre y cuando lo entregues en la fecha y forma acordada.Esta actividad se considerará como exitosa si el resultado de la evaluaciónrealizada por tu tutor es arriba de 70/100.Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 13
  22. 22. Programación WebMaterial de ApoyoConsulta el material de apoyo y realiza todas las actividades que se indican.En la siguiente presentación podrás conocer las bases para elaborar undocumento HTML.GUÍA BÁSICA DE HTMLESTRUCTURA DE UN DOCUMENTO HTML • La estructura básica de un documento HTML se compone de una etiqueta de inicio <HTML> y una de fin </HTML>. • Otros componentes esenciales de este tipo de documento son la cabecera la cual contiene información sobre el documento, y se indica por las etiquetas <HEAD> y </HEAD>; dentro de la cabecera se recomienda el uso de la etiqueta <TITLE>, la cual se encarga de indicar el título del documento, generalmente lo puedes ver en la parte superior del navegador. • El cuerpo es indicado por las etiquetas <BODY> y </BODY>.Un ejemplo básico de un documento HTML es el siguiente:<HTML><HEAD><TITLE>Mi primera página web </TITLE></HEAD><BODY> MI PRIMERA PÁGINA WEB</BODY></HTML>En tu página puedes establecer un fondo, ya sea que lo predefinas de un color obien mediante una imagen, esto se realiza con el atributo BACKGROUND de laetiqueta BODY<body background="nieve.jpg"><body background color: #F00 >Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 14
  23. 23. Programación WebCOMENTARIOSCon la finalidad de documentar tu página puedes insertar algunos comentarios enlos que especificas donde comienza la página o bien quien es el autor de lamisma, por ejemplo<!—Este es un comentario-->Esta parte del código no se vera en el documento.FUENTESLa etiqueta <FONT> controla casi en su totalidad el estilo del texto a utilizar. Tienetres atributos <SIZE> mediante el cual se establece el tamaño de la fuente,<FACE> esta se encarga de establecer la fuente, <COLOR> establece color altexto.La etiqueta <FONT> requiere de un delimitador, por ejemplo si utilizas <FONTSIZE> deberás cerrar con </FONT>.Los tamaños del texto van del 1 al 7, y los colores deben ser especificados eningles.P.e. <FONT COLOR = "blue">ESTRUCTURA DEL TEXTOPÁRRAFOS Y SALTOS DE LÍNEADentro de un documento HTML cualquier salto de línea o tabulación y demásseparadores son ignorados por el navegador de tal manera que si deseas separartu texto en párrafos deberás colocar la etiqueta <P> y su respectivo delimitador</P>. Otra etiqueta que se encarga de separar el texto es la del salto de línea<BR>, la cual funciona como retorno de carro.ESTILOS DE TEXTOA continuación se presentan los estilos de texto usados frecuentemente: • <B> Se utiliza para mostrar el texto en negrita. • <U> Se utiliza para subrayar el texto. • <I> Se utiliza para mostrar el texto en cursiva. • <SMALL> Texto pequeño, esto es, se muestra el texto en el menor tamaño de fuente.Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 15
  24. 24. Programación Web • <BIG> Texto grande, como su nombre lo indica el texto es mostrado en el tamaño máximo de fuente. • <CENTER> Centra el texto en la pantalla.A continuación se proporciona un ejemplo que abarca todo lo visto conanterioridad:<HTML><HEAD> <TITLE> Mi primera página WEB </TITLE></HEAD><BODY><FONT SIZE="5" FACE="Arial" COLOR="green"><B>Este texto esta en verde,con fuente arial, en negrita y tamaño 5. </B></FONT><BR><P><FONT SIZE="3" FACE="Arial" COLOR="blue“><CENTER>Este es un párrafocentrado.</CENTER></P></FONT></BODY></HTML>TABLASESTRUCTURA DE UNA TABLA EN HTMLPara definir una tabla dentro de una página Web creada con lenguaje HTML,utilizaremos las etiquetas <TABLE> y </TABLE> y dentro de ellas definiremos elinicio y fin de cada una de sus celdas haciendo uso de la etiqueta <TD> y </TD>,además usaremos a las etiquetas <TR> y </TR> para indicar el inicio y fin de unafila dentro de una tabla.Dentro de la etiqueta TABLE también podemos utilizar los atributos WIDTH yHEIGHT para indicar la anchura y la altura de la tabla respectivamente, también esposible agregar color de fondo mediante el atributo BGCOLOR.También podemos variar la separación entre celdas mediante el atributoCELLSPACING de la etiqueta TABLE.A continuación te presentamos un ejemplo:<HTML><HEAD> <TITLE> EJEMPLO DE USO DE TABLAS </TITLE></HEAD><BODY><TABLE BORDER=3 CELLSPACING=5 CELLPADDING=10 WIDTH=500ALIGN="CENTER" VALIGN="CENTER" GCOLOR=yellow><CAPTION ALIGN=bottom>Horario de servicio social </CAPTION>Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 16
  25. 25. Programación Web<TR><TH>Lunes</TH><TH>Martes</TH><TH>Miercoles</TH><TH>Jueves</TH><TH BGCOLOR=blue>Viernes</TH></TR><TR><TD BGCOLOR=gray>4</TD><TDBGCOLOR=green>2</TD><TD>6</TD><TD>2</TD><TD>2</TD></TR><TR><TD BGCOLOR= red>6</TD><TDBGCOLOR=orange>6</TD><TD>4</TD><TD>4</TD><TD>4</TD></TR></TABLE></BODY></HTML>ENLACESESTRUCTURA DE ENLACEUn enlace está conformado por la etiqueta <A> seguida por diferentes atributosque indican el tipo de enlace que se desea hacer.Existen dos tipos de enlaces: • Enlace a un punto de la misma página: Usando el atributo NAME, podemos indicar a qué parte del documento queremos ir, p.e. inicio de la página y final de la página. • Enlace a otra página: Usando el atributo HREF podemos hacer ligas a otra página del mismo sitio. • Enlace a otros sitios: Usando el atributo HREF también podemos hacer enlaces a otros sitios Web o direcciones de correo.Esta línea se coloca al principio del cuerpo del documento.<A HREF="#finaldocumento">Da click aquí para ir al final de esta página </A>Esta línea va al final<A HREF="#iniciodocumento">Da click aquí para ir al inicio de esta página </A>Estas líneas van donde tú lo desees<A HREF="http://www.google.com">Google.com</A><A HREF="mailto: carlos-puebla@yahoo.com">carlos-puebla@yahoo.com</A>IMÁGENE SComo se ha mencionado anteriormente dentro de un documento html es común eluso de etiquetas. Para incluir una imagen en una página Web emplearemos laetiqueta <IMG> junto con un atributo fundamental SCR.Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 17
  26. 26. Programación WebDeberás colocar la siguiente línea de código dentro del cuerpo de tu documentohtml.<IMG SRC=“paraiso.jpg"> donde nombre de imagen como su nombre lo indica esel nombre de la imagen que deseas incluir en la página.MARQUESINASMediante HTML se pueden crear marquesinas con el uso de la etiqueta<MARQUEE> y su delimitador </MARQUEE>; dentro de ellas se pone el texto quese desea, en el formato que se quiere, por ejemplo:<MARQUEE><br><FONT FACE="COMIC SANS MS" SIZE="5"COLOR="blue">ESTA ES UNA MARQUESINA</FONT></MARQUEE>Esta etiqueta tiene varios atributos, te mostramos los más usados: • BEHAVIOR=ALTERNATE: la marquesina "rebotará" de un lado a otro de la pantalla. • SCROLLDELAY = X: Indica el tiempo que transcurrirá entre cada salto del texto, expresado en milisegundos. • LOOP = Indica el número de veces que se repetirá la acción de la marquesina, por default es infinita.LISTASEn una página Web puedes elaborar listas, mediante la etiqueta <OL> y con elatributo <type>, este último permite establecer el tipo de lista a crear. Por ejemplosi deseas crear una lista enumerada deberás colocar el siguiente código:<OL TYPE=1><OL><li>Presentaci&oacute;n.<li><A HREF="introduccion1.html">Introducci&oacute;n a los sistemasoperativos.</A><li>Casos de Estudio.<OL TYPE=1><li><A HREF="http://www.cs.buap.mx/~fulo">Linux.</A></ol><li><A HREF="Glosario.html">Glosario.</A></ol>Checa que en cada renglón se establece la etiqueta <li>, la cual indica que esparte de la lista numerada.Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 18
  27. 27. Programación WebSONIDODentro de una página Web se pueden incorporar diversos sonidos con la opciónde poder ser activada por el usuario o bien ser ejecutada de manera automática alcargar la página.Para este fin se utiliza la etiqueta <BGSOUND> asociada al atributo SRC (source).Los archivos a reproducir pueden ser de los siguientes formatos: *.wav, *.au, *.midEl atributo que acompaña a esta etiqueta es LOOP, el cual se encarga deespecificar cuántas veces se debe ejecutar el archivo de sonido y puede tener unvalor numérico o valor infinite que reproducirá el archivo en un ciclo cerrado. Porejemplo: <BGSOUND SRC=“musica.wav” LOOP=infinite>FRAMESUn frame es un marco que divide la pantalla en filas y columnas como lodeseemos.El atributo que debemos conocer para la realización de los frames es TARGET, elcual determina la zona de la pantalla en donde se mostraran los elementos.Ya que el atributo TARGET determina el lugar de destino del contenido, hay queseñalar los valores especiales de este atributo. 1. TARGET = _blank. El enlace se carga en una nueva ventana. 2. TARGET = _self. El enlace se carga en la misma ventana en que se encuentra. 3. TARGET = _parent. El enlace se carga en el FRAMESET inmediatamente superior al documento. 4. TARGET = _top. El enlace se carga en la totalidad de la ventana.Estructura básicaDebemos resaltar que el código principal de una página con frames no presentalas etiquetas <BODY> y </BODY>, sino que el código deberá ser incluido en lasetiquetas <HEAD> y </HEAD>La etiqueta a utilizar es la de <FRAMESET>, esta última se encarga de dividir lapantalla en ventanas, verticales u horizontales. Y los atributos que determinan elaspecto de estas ventanas son ROWS y COLS.El atributo ROWS define el número de divisiones verticales, así mismo con COLSpero la hace de manera horizontal.Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 19
  28. 28. Programación Web • Los valores para ambos pue den ser absolutos en píxeles, porcentajes, o bien valores de escala relativos, y se basan en los siguientes formatos. • n. Cuando se introduce un valor determinado se indica la altura o anchura de la ventana en píxeles. • %. Indica que la altura o anchura e s un valor porcentaje relativo al tamaño de la ventana que lo contiene. • *. Indica que debe asignarse ala ventana todo el espacio disponible; suponiendo que haya varias ventana es espacio libre se divide entre ellas, si existe un valor delante del asterisco, la ventana que lo tenga asignado tomará más espacio relativo, por ejemplo “2*,*” daría 2/3 del espacio de la primera ventana.La etiqueta <FRAME> y <NOFRAME>La etiqueta <FRAME> es la encargada de revisar cuantos frames se deberándibujar dentro de la pantalla, por lo que puede tener hasta seis atributos distintos,como por ejemplo: • SCR = “url” toma el valor URL del documento que se debe mostrar en la pantalla, sino la ventana se quedará vacía. • NAME =“nombre de la ventana” como se indica con este atributo nombramos a una ventana, de manera que puede ser el destino de cualquier enlace. • MARGINWIDTH = “valor” Se emplea para precisar el número de píxeles entre los bordes izquierdo y derecho de la ventana. • MARGINHEIGTH = “valor” Lo mismo que el anterior pero respecto a los bordes superior e inferior. • SCROLLING = “yes|no|auto” Despliega barras de desplazamiento o no. Yes: muestra las barras, No: nunca muestra las barras; auto: hace que el navegador decida si son necesarias o no en función del contenido de la misma. • NORESIZE = Indica al navegador que la ventana no puede ser redimensionada por el usuario.Veamos un ejemplo:Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 20
  29. 29. Programación Web<HTML><HEAD><TITLE>Ejemlo de frames combinados</TITLE><FRAMESET COLS =“100%”, ROWS=“33%, 33%,*”> <FRAMESET COLS=“20%,20%,20%,20%,*”> <FRAME NAME=“Frame 1” SRC=“ejemplo.html”> <FRAME NAME=“Frame 2” SRC=“ejemplo.html”> <FRAME NAME=“Frame 3” SRC=“ejemplo.html”> <FRAME NAME=“Frame 4” SRC=“ejemplo.html”> </FRAMESET> <FRAMESET COLS=“50%,*”> <FRAME NAME=“Frame 5” SRC=“ejemplo.html”> <FRAME NAME=“Frame 6” SRC=“ejemplo.html”> </FRAMESET></FRAMESET></HEAD></HTML>A continuación se presentan los ejemplos vistos dentro de la presentación: • Ejemplos • Ejemplo de una página sencilla. • Tutorial de HTMLTIPS 1. El uso de muchas fuentes dificulta la lectura de la página, te recomendamos no usar más de tres fuentes. 2. No hagas demasiado extenso el contenido de las páginas, ya que tardaría demasiado en cargarse. 3. No utilices textos intermitentes (la etiqueta blink), ya que además de hacer molesta la lectura distrae la atención del lector. 4. No abuses de los iconos animados, pues harás más lenta la carga de tu página. 5. Utiliza solo las imágenes necesarias. 6. Utiliza fondos con colores claros para textos con colores obscuros y viceversa, para no afectar la legibilidad del documento. 7. El titulo de la página debe ser lo más descriptivo posible. Puedes utilizar marquesinas. 8. Se recomienda hacer enlaces a otras páginas con contenido similar al de la tuya. Y revisa frecuentemente s se encuentran vigentes de lo contrario i retirarlas.Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 21
  30. 30. Programación Web2.1.2. XMLObjetivosEn este tema identificarás los elementos básicos de un documento XML y suinterpretación, además de su diferencia con HTML y la importancia actual deaplicaciones utilizando XML.Instrucciones1. Revisa la presentación de XML que se encuentra ubicada en la sección demateriales de apoyo.2. Una vez que hayas estudiado este tema, comprobarás tus conocimientoscontestando el cuestionario X M L que se encuentra en la entrada principal deeste capítulo. Sigue las instrucciones que ahí se te dan.Productos esperados / EvaluacionesEste tema se evaluará con el cuestionario mencionado en las instrucciones ycontará el 2.5% de la calificación final, siempre y cuando lo entregues en la fechay forma acordada.Esta actividad se considerará como exitosa si el resultado de la evaluación de tucuestionario es arriba de 70/100.Material de ApoyoXMLXML, lenguaje extensible de etiquetas (eXtensible Markup Lenguage), no es unlenguaje de marcado como el lenguaje HTML. XML es un meta-lenguaje que nospermite definir lenguajes de marcado adecuado a usos determinados.Al ser XML un metalenguaje es un lenguaje para definir lenguajes. Los elementosque lo componen pueden dar información sobre lo que contienen, nonecesariamente sobre su estructura física o presentación, como ocurre en HTML.XML no ha nacido sólo para su aplicación en Internet, sino que se propone comolenguaje de bajo nivel (a nivel de aplicación, no de programación) para intercambiode información estructurada entre diferentes plataformas. Se puede usar en basesde datos, editores de texto, hojas de cálculo, y casi cualquier cosa que podamospensar.Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 22
  31. 31. Programación WebEditores de XMLLos editores son aquellos programas que nos permiten escribir los documentosXML. Dentro de estos nos podemos encontrar los básicos como el Notepad, oalgunos más complejos, que nos permiten saber si el documento XML queescribimos está bien formado e incluso si es válido. Es decir, realizan el parseoautomáticamente. Estos editores pueden soportar también XSL, DTDs,SCHEMAS, HTML, XHTML, ect.Un editor que recomendamos es el XML Spy v3.0, soporta xml, html, xsl, dtd, rdf,schemas W3C,.... Podemos encontrar un número considerable de estos editoresen: Editores XML.Cuales son los mejores Navegadores XMLSon las herramientas mediante las cuales podemos visualizar los documentosXML.La última versión de los navegadores más utilizados nos permite visualizar ytrabajar con documentos XML.Las versiones 5 y 6 del Explorer nos permiten visualizar XML utilizando XSLT yCSS y manipularlo utilizando DOM y JavaScript.Las versiones 6.x de Netscape o las versiones más recientes de Mozilla, permitentambién visualizar XML utilizando CSS y DOM.Pero además existen múltiples browsers que nos permiten visualizar algunosvocabularios XML concretos.El navegador CML JUMBO, que nos permite visualizar documentos CML. Este esun lenguaje XML mediante el cual se pueden describir fórmulas moleculares yquímicas.El Amaya Browser, mediante el cual, entre otros, podemos visualizar y creardocumentos Mathml, que es un vocabulario XML para la descripción de fórmulasmatemáticas.Un móvil con tecnología WAP incorpora un browser capaz de mostrar páginasWML, que no es más que un vocabulario XML desarrollado para escribir páginaspara móviles.CREACIÓN DE DOCUMENTOS XMLReglas básicasHay dos tipos de construcciones: el marcado (entre <...> ó &...;) y los datos decarácter (todo lo demás).Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 23
  32. 32. Programación WebTodo documento XML se compone de elementos. Cada elemento está delimitadopor una etiqueta de comienzo y otra de fin, a no ser que sea vacío. Los elementosvacíos constan de una única etiqueta. Los nombres de las etiquetas son arbitrariosy no pueden contener espacios.Siempre hay un elemento raíz, cuya etiqueta de inicio ha de ser la primera detodas y la de cierre la última de todas.Cada elemento puede contener datos de carácter, elementos, ambas cosas a lavez o puede estar vacío.No se puede mezclar la anidación de las etiquetas: los elementos deben abrirse ycerrarse por orden.Los elementos pueden tener atributos (propiedades) que nos ofrecen informaciónsobre ellos. Los valores de los atributos deben ir entrecomillados. Tanto atributoscomo valores son arbitrarios.Mayúsculas y minúsculas no son intercambiables.El espacio en blanco es libre, se puede utilizar para leer mejor el documento.Estructura de un documento XMLUn documento XML tiene dos estructuras, una lógica y otra física.A) Físicamente, el documento está compuesto por unidades llamadas entidades.Una entidad puede hacer referencia a otra entidad, causando que esta se incluyaen el documento. Cada documento comienza con una entidad documento,también llamada raíz.B) Lógicamente, el documento está compuesto de declaraciones, elementos,comentarios, referencias a caracteres e instrucciones de procesamiento, todos loscuales están indicados por una marca explícita. Las estructuras lógica y físicadeben encajar de manera adecuada:Los documentos XML se dividen en dos grupos, documentos bien formados ydocumentos válidos.Bien formados: Son todos los que cumplen las especificaciones del lenguajerespecto a las reglas sintácticas sin estar sujetos a unos elementos fijados en unDTD. De hecho los documentos XML deben tener una estructura jerárquica muyestricta y los documentos bien formados deben cumplirla.Un objeto de texto es un documento XML bien formado si:Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 24
  33. 33. Programación WebCumple la regla denominada "document".Respeta todas las restricciones de buena formaciónCada una de las entidades analizadas que se referencia directa o indirectamenteen el documento está bien formada.LA REGLA “DOCUMENT”1. Contiene uno o más elementos.2. Hay exactamente un elemento, llamado raíz, o elemento documento, del cualninguna parte aparece en el contenido de ningún otro elemento.3. Para el resto de elementos, si la etiqueta de comienzo está en el contenido dealgún otro elemento, la etiqueta de fin está en el contenido del mismo elemento.Es decir, los elementos delimitados por etique tas de principio y final se anidanadecuadamente mutuamente.Válidos: Además de estar bien formados, siguen una estructura y una semánticadeterminada por un DTD: sus elementos y sobre todo la estructura jerárquica quedefine el DTD, además de los atributos, deben ajustarse a lo que el DTD dicte.Aquí podemos ver un ejemplo muy sencillo:<?xml version=" 1.0 " encoding=" UTF-8 " standalone= " yes "?><ficha><nombre> Angel </nombre><apellido> Barbero </apellido><direccion> c/Ulises, 36 </direccion></ficha>Lo primero que tenemos que observar es la primera línea. Con ella debenempezar todos los documentos XML, ya que es la que indica que lo que la siguees XML. Aunque es opcional, es recomendable incluirla.Puede tener varios atributos, algunos obligatorios y otros no:versión: Indica la versión de XML usada en el documento. Es obligatorio ponerlo, ano ser que sea un documento externo a otro que ya lo incluía.encoding: La forma en que se ha codificado el documento. Se puede ponercualquiera, y depende del parser el entender o no la codificación. Por defecto esUTF-8, aunque podrían ponerse otras, como UTF -16, US-ASCII, ISO-8859-1, etc.No es obligatorio salvo que sea un documento externo a otro principal.Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 25
  34. 34. Programación Webstandalone: Indica si el documento va acompañado de un DTD ("no"), o no lonecesita ("yes"); en principio no hay porqué ponerlo, porque luego se indica elDTD si se necesita.La "declaración de tipo de documento" define qué tipo de documento estamoscreando para ser procesado correctamente. Es decir, definimos que declaraciónde tipo de documento (DTD) valida y define los datos que contiene nuestrodocumento XML.En ella se define el tipo de documento, y dónde encontrar la información sobre suDefinición de Tipo de Documento, mediante:Un identificador público (PUBLIC): que hace referencia a dicha DTD.Identificador universal de recursos (URI): precedido de la palabra SYSTEM.Ejemplos:<!DOCTYPE MESAJE SYSTEM "mesaje.dtd"><!DOCTYPE HTML PUBLIC "-/ /W3C/ /DTD HTML 3.2 Final/ /EN"><!DOCTYPE LABEL SYSTEM "http://www.ulpgc.es/dtds/label.dtd">Espacios de nombresLos espacios de nombres sirven para evitar las colisiones entre elementos delmismo nombre, y en general, para distinguir los distintos grupos de elementos enun mismo documento.Cada espacio de nombres se asocia con una URL, que sólo sirve comoidentificador único y no tiene por qué ser válida.TerminologíaCuando un documento cumple con las reglas sintácticas que hemos descrito, se ledenomina documento bien formado.Un documento válido, además de ser bien formado, cumple las restricciones quele imponen una DTD o un esquema XML.CabeceraLa cabecera, que es opcional aunque recomendable, da información sobre cómomanejar el documento a los analizadores y otras aplicaciones. Puede contener:Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 26
  35. 35. Programación WebUna declaración XML para el analizador, con la versión, juego de caracteresutilizado, y una indicación de si el documento es o no autónomo (si requiere o nootros documentos).Instrucciones de proceso para otras aplicaciones.Una declaración DOCTYPE, que referencia a la DTD que restringe el documento.Que son los XLink y los Xpointer?Quienes han utilizado la Web alguna vez, saben hasta qué punto es importante elhiperenlaces. Sin embargo, no todo el mundo sabe que las nociones sobrehiperenlaces de la Web son bastantes reducidas comparadas con los sistemas dehipertexto comerciales y académicos. XML por si solo no puede corregir esto, peroexisten dos normas asociadas: XLINk y Xpointer que dan un paso de gigante en laconsecución de un entorno de hipertexto más avanzado.En HTML colocamos un enlace utilizando la etiqueta... y podemos enlazar a unúnico documento o al interior de este siempre y cuando este marcado con laetiqueta: ..La especificación XLinkSe especifica como permitir el enlace entre documentos XML.Todavía esta en desarrollo, pero mediante esta especificación, cuando losnavegadores la implementen, se podrá: • Utilizar cualquier elemento del XML como origen de enlace. • Enlazar a más de un documento. • Crear enlaces fuera del documento. • Definir el comportamiento del enlace, etc.La especificación XPointerSe define la sintaxis que nos permitirá enlazar al interior de un documento XML.Con esta nueva norma los enlaces ya no sólo serán a elementos ya marcadossino que se permitirán enlaces del tipo:"Enlaza a la primera aparición de la palabra Internet".Taller de ejercicios Resueltos<?xml version="1.0"?><doc xml:base="http://example.org/today/"xmlns:xlink="http://www.w3.org/1999/xlink"> <head> <title>Virtual Library</title></head>Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 27
  36. 36. Programación Web<body> <paragraph>See <link xlink:type="simple" xlink:href="new.xml">whats new</link>!</paragraph> <paragraph>Check out the hot picks of the day!</paragraph><olist xml:base="/hotpicks/"> <item> <link xlink:type="simple"xlink:href="pick1.xml">Hot Pick #1</link> </item><item> <link xlink:type="simple" xlink:href="pick2.xml">Hot Pick #2</link> </item><item> <link xlink:type="simple" xlink:href="pick3.xml">Hot Pick #3</link></item></olist></body></doc>Los URIs en este ejemplo son transformados en URIs completos como se indica:"whats new" lleva al URI "http://example.org/today/new.xml""Hot Pick #1" lleva al URI "http://example.org/hotpicks/pick1.xml""Hot Pick #2" lleva al URI "http://e xample.org/hotpicks/pick2.xml""Hot Pick #3" lleva al URI http://example.org/hotpicks/pick3.xmlCuestionarioElabora el siguiente cuestionario en una presentación PowerPoint, contéstalo yadjúntalo e n tu página realizada en el capitulo de HTML.¿Qué es un meta-lenguaje?¿Qué significan las siglas XML?¿Cuáles son las aplicaciones de XML?¿Qué es DTD?Menciona 2 reglas básicas de la estructura sintáctica de un documento XML.¿Cuáles son las dos estructuras de un documento XML?¿Cuáles son los principales componentes de un documento XML?Menciona algunos editores de XML.Define con tus propias palabras respecto a las etiquetas, como trabaja XML.¿Crees que es mejor XML sobre HTML? ¿Explica por que?Determina las ventajas y desventajas de trabajar con cada uno.Explica las diferencias entre ambos. (Elabora un cuadro comparativo)En XML ¿cuáles son los tipos de documentos?, explícalos.Investiga un poco más acerca de la regla DOCUMENT y explícala.¿Qué es un XLINK y un XPOINTER?Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 28
  37. 37. Programación Web2.2. Elementos Multimedia2.2.1. Imágenes, Video y SonidoObjetivosDurante este tema identificarás los formatos más comunes para elementosmultimedia y experimentarás con ellos para ser utilizados en tu página HTML.Instrucciones 1. Revisa la presentación introducción a multimedia que se encuentra ubicada en la sección de material de apoyo del curso. 2. Realiza un trabajo de investigación de los formatos más comunes para imágenes utilizados en Internet. 3. Cambia el formato de las 2 imágenes que se encuentran en la sección de material de apoyo para llenar la tabla mencionada en el punto 4. 4. Una vez que hayas realizado el punto anterior, comprobarás tus conocimientos contestando la tabla que se encuentra en la sección de Material de Apoyo. Sigue las instrucciones que ahí se te dan. 5. Dentro de la página HTML que creaste en la sección anterior pon a prueba tu creatividad incrustando una imagen, un video y un sonido como fondo de tu página. Envía tu página comprimida a tu tutor para que sea evaluada.Productos esperados / EvaluacionesEste tema se evaluará con la tabla y la página mencionada en las instrucciones ycontará el 5% de la calificación final, siempre y cuando lo entregues en la fecha yforma acordada. Esta actividad se considerará como exitosa si el resultado de la evaluaciónrealizada por tu tutor es arriba de 70/100.Material de ApoyoAquí encontrarás el material de apoyo necesario para este tema indicado en lasinstrucciones.El término Multimedia en el mundo de la computación es la forma de presentarinformación que emplea una combinación de texto, sonido, imágenes, vídeo yanimación.Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 29
  38. 38. Programación WebEntre las aplicaciones informáticas multimedia más comunes podemos mencionarjuegos, programas de aprendizaje y material de referencia.La mayoría de las aplicaciones multimedia incluyen asociaciones predefinidasconocidas como hipervínculos o enlaces, que permiten a los usuarios moverse porla información de modo intuitivo.La conectividad que proporcionan los hipertextos hace que los programasmultimedia no sean presentaciones estáticas con imágenes y sonido, sino unaexperiencia interactiva infinitamente variada e informativa.Las aplicaciones multimedia son programas informáticos, que suelen estaralmacenados en CD-ROMs y claro que pueden residir en páginas de Web.Elementos visualesCuanto mayor y más nítida sea una imagen, más difícil es de presentar ymanipular en la pantalla de una computadora.Las fotografías, dibujos, gráficos y otras imágenes estáticas deben pasarse a unformato que el ordenador pueda manipular y presentar. Entre esos formatos estánlos gráficos de mapas de bits y los gráficos vectoriales.Los gráficos de mapas de bits almacenan, manipulan y representan las imágenescomo filas y columnas de pequeños puntos. En un gráfico de mapa de bits, cadapunto tiene un lugar preciso definido por su fila y su columna.Los gráficos vectoriales emplean fórmulas matemáticas para recrear la imagenoriginal.En un gráfico vectorial, los puntos no están definidos por una dirección de fila ycolumna, sino por la relación espacial que tienen entre sí.Elementos de audioEl sonido, igual que los elementos visuales, tiene que ser grabado y formateadode forma que la computadora pueda manipularlo y usarlo en presentaciones.Elementos de organizaciónLos elementos multimedia incluidos en una presentación necesitan un entorno queempuje al usuario a aprender e interactuar con la información.Entre los elementos interactivos están los menús desplegables, pequeñasventanas que aparecen en la pantalla del ordenador con una lista de instruccioneso elementos multimedia para que el usuario elija.Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 30
  39. 39. Programación WebLas barras de desplazamiento, que suelen estar situadas en un lado de la pantalla,permiten al usuario moverse a lo largo de un documento o imagen extensa.Los hipervínculos o enlaces conectan creativamente los diferentes elementos deuna presentación multimedia a través de texto coloreado o subrayado o por mediode iconos, que el usuario señala con el cursor y activa pulsándolos con el mouse.Utiliza estas imágenes para cambiarlas en los diferentes formatos que hasinvestigadoImagen 1:Imagen 2:Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 31
  40. 40. Programación WebLlena la Tabla siguiente con la información de las imágenes en sus diferentesformatos: GIF JPG PCX BMP TIF Tamaño en Bytes Porcentaje de deformación Porcentaje de pérdida de resolución Porcentaje de nitidezToma en cuenta que deberás elaborar dos tablas, una para la imagen 1 y otrapara la imagen 22.2.2. AnimacionesObjetivosEn esta sección aprenderás a crear animaciones básicas útiles para la buenapresentación de tus páginas HTML.InstruccionesRevisa la presentación introducción a flash que se encuentra ubicada en lasección de ma terial de apoyo del curso.Realiza la actividad que se encuentra en la sección de Evaluaciones para realizaruna película sencilla y agrégala a tu página Web.Productos esperados / EvaluacionesElabora una película sencilla en Flash, por ejemplo, donde muestres una pelotarebotando.Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 32
  41. 41. Programación WebPasos a seguir: 1. Una vez que haz entrado a Flash, crea un nuevo documento con el color de fondo que más te agrade. 2. Ahora selecciona la herramienta: dibujar ovalo 3. Coloca la figura dentro del escenario, y elige el color de relleno de tu agrado. 4. Inserta una nueva escena, en la cual debes poner nuevamente la figura, pero en otra posición, estableciendo la secuencia de rebote. 5. Repite el paso 4 cuantas veces sea necesario. 6. Una vez terminada la película, guarda el archivo y pruébalo usando el menú Control---TestMovie. 7. Crea una nueva liga en la página que realizaste en la sección anterior, y anexa tu animación. 8. Dentro del Material de Apoyo podrás ver un ejemplo similar.Para evaluar este tema:Deberás enviar a tu tutor tu p ágina HMTL en la que incluirás las animacionesrealizadas aquí. Este trabajo representa el 7.5% de la calificación final, siempre ycuando lo entregues en la fecha y forma acordada. Esta actividad se considerará como exitosa si el resultado de la evaluación de tupágina es arriba de 70/100.Material de ApoyoAquí encontrarás el material necesario para elaborar una sencilla animaciónusando Flash. Sigue las instrucciones que se te dan en la presentación y al finalde ella tendrás una película que deberás incluir en tu página.INTRODUCCION A FLASHCONOCIENDO FLASH Se te recomienda que antes de empezar a elaborar tu propia película, veas unaya terminada que podrás encontrar dentro de la carpeta de Flash 5-- Tutorial ---Terminado, para darte una idea de lo que puedes hacer.Puedes seguir la siguiente ruta: C:Archivos de programaMacromediaFlash5 TutorialFinishedModelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 33
  42. 42. Programación WebENTORNO DE TRABAJO DE FLASHPara crear y editar películas, normalmente se trabaja con las siguientes funciones: • Escenario, área rectangular en la que se reproduce la película. • Línea de tiempo, donde se animan los gráficos respecto al tiempo • Símbolos, componentes de los medios reutilizables de la película. • La ventana Biblioteca, donde se organizan los símbolos • El Explorador de películas, que ofrece una descripción general de una película y su estructura. • Paneles acoplables y flotantes, que permiten modificar los distintos elementos de la película y configurar el entorno de creación de Flash para adaptarlo a sus necesidades concretas.ESCENARIOAl igual que en un largometraje, las películas de Flash dividen el tiempo enfotogramas.En el Escenario se compone el contenido de los fotogramas individuales de lapelícula, dibujándolos directamente o bien organizando ilustraciones importadas.LINEA DE TIEMPOEn la Línea de tiempo se coordina el tiempo de la animación y se ensambla lailustración en distintas capas. La Línea de tiempo muestra todos los fotogramas dela película.Las capas actúan como una serie de hojas de acetato transparente superpuesta,manteniendo las diferentes ilustraciones por separado, de forma que puedancombinarse distintos elementos en una imagen visual cohesionada.SIMBOLOSLos símbolos son elementos reutilizables que se usan en una película. Pueden sergráficos, botones, clips de película, archivos de sonido o fuentes.Al crear un símbolo, éste se almacena en la Biblioteca. Al colocar un símbolo en elEscenario, se está creando una instancia del símbolo.VENTANA BIBLIOTECAAquí se guardan y organizan los símbolos creados en Flash, además de archivostales como archivos de sonido, imágenes de mapa de bits,etc.En la ventana Biblioteca puedes organizar en carpetas los elementos debiblioteca, ver con qué frecuencia se utilizan en una película y ordenarlos por tipo.Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 34
  43. 43. Programación WebPANELESLos paneles permiten ver, organizar y modificar los elementos de una película deFlash. • Utilizando estos paneles es posible modificar símbolos, instancias, colores, tipo, fotogramas y otros elementos. • También son usados para personalizar la interfaz de Flash, manteniendo visibles los paneles necesarios para una determinada tarea y ocultando los demás.CREACIÓN DE UNA PELÍCULAEjecuta los siguientes pasos: • Selecciona Archivo > Nuevo. • Elige Modificar > Película: Aparecerá el cuadro de diálogo Propiedades de película. • En la opción Velocidad de fotogramas, introduzca el número de fotogramas de animación que deben por segundo. La mayoría de las animaciones no necesitan una velocidad mayor de 8 a 12 fps (fotogramas por segundo). • En la opción Dimensiones, elija una de estas opciones: • Introduzca valores en los campos Anchura y Altura para especificar el tamaño del Escenario en píxeles. • Da click en Coincidir contenido para establecer el tamaño del Escenario de forma que el espacio que rodea el contenido sea igual en todos los lados. • Elige un color en la muestra de colores de fondo, para establecer el color de fondo de la película. • Da clic en Aceptar.ESCENASPara la realización de una película, son comúnmente usadas las escenas, ya queéstas en conjunto conforman a la película.Inserción de una escena:Supongamos que deseas realizar una película que consta de varias escenas, pordefault se abre una escena al crear un documento Flash, por lo que si deseascrear una secuencia de escenas, deberás colocar los objetos necesarios en tuprimera escena, posteriormente inserta otra escena utilizando el menú Insertar-----Escena.Una vez realizado lo anterior, coloca los objetos que deseas en tu escenasiguiente, que deberán estar situados en una posición distinta a la anterior.BARRA DE HERRAMIENTASModelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 35
  44. 44. Programación WebConsta de cuatro secciones: • La sección Herramientas contiene las herramientas de dibujo, pintura y selección. • La sección Ver contiene herramientas para ampliar y reducir, así como para realizar recorridos de la ventana de la aplicación. • La sección Colores contiene modificadores de los colores de trazo y relleno. • La sección Opciones muestra los modificadores de la herramienta seleccionada, que afectan a las operaciones de pintura o edición de dicha herramienta. Figura Barra de Herramientas.Para seleccionar una herramienta, de clic en la herramienta que desea utilizar ouse el método abreviado del teclado para la herramienta.Una vez seleccionada la herramienta que desea, podrá elegir uno de un conjuntode modificadores específicos que se muestran en la parte de debajo de la barra.Documentos flashUn documento Flash se guarda con extensión fla (*.fla), mientras que la películase genera tras ejecutar el documento, por lo que automáticamente se guardarácon extensión swf (*.swf)Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 36
  45. 45. Programación Web3. Formularios Web3.1. IntroducciónObjetivosAl finalizar este tema tendrás la capacidad de crear aplicaciones ASP.Web usandola tecnología .NET. Además, conocerás los principales elemento que se presenta na un usuario a través de su navegados, esto es, una página Web o FormularioWeb.Actividad 1Nombre de la Actividad: Acercando la tienda al clienteObjetivo: Al finalizar esta actividad podrás comprender el impacto que puedecausar que un negocio esté en línea.Escenario: Imaginemos a una empresa pequeña, Seven Cycles, dedicada a laproducción y venta de bicicletas, que busca una forma de venta altamente efectivapara introducir sus productos al mercado, sin la necesidad de un intermediario queaumente sus costos, y reduzca sus ganancias. Para tal propósito, se requiere laintegración de una base de información (hojas de datos, fotografías, etc.)Instrucciones:Ejecuta el video clip “SevenCycle”, incluido en la sección de materiales de apoyopara esta sección, y analízalo con atención.Imagina que eres el/la encargad@ de desarrollar aplicaciones Web en lacompañía Seven Cycles, y se te pide desarrollar el sitio de la empresa para laventa de la nueva bicicleta.Deberás entregar por escrito los requerimientos técnicos (herramientas a utilizar) yde información, que requieras para desarrollar a la brevedad posible este sitio.Coloca tu documento de especificación de requerimientos en la sección de tareascorrespondientes a esta sección.El nombre de tu documento debe seguir el formato especificado en las reglas delJuego.La fecha límite de entrega es el día: ___________ a las __________ horasModelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 37
  46. 46. Programación WebProductos esperados / EvaluacionesEste tema se evaluará con el documento que entregarás, tu respuesta deben serdetallada y justificada, se tomará en cuenta tu creatividad, originalidad y que cubracon los elementos especificados. Este trabajo contará el ¿?% de la calificaciónfinal, siempre y cuando lo entregues en la fecha y forma acordada.Guía para el profesor 1. Verificar que se encuentra el video clip “SevenCycle” en la sección de materiales del curso. 2. Revisar el documento que el alumno ha obtenido un panorama bien definido de la importancia de una aplicación Web.Actividad 2Nombre de la Actividad: Conociendo ASP.NETObjetivo: Al finalizar esta actividad serás capaz de identificar los principalescomponentes del framework de .NET, explicarás el modelo de ejecución deASP.NET y el proceso de desarrollo de una aplicación Web ASP.NETInstrucciones: 1. Estudia con atención la presentación Introducción ASP.NET que se encuentra ubicada en los materiales de apoyo del curso. 2. Visita el FORO para la actividad 2 que se encuentra en la página principal del curso (Moodle)!!!!!! Y agrega tu aportación a lo siguiente: ¿Por qué crees que ASP.NET sea una buena opción para desarrollo de aplicaciones Web? justifica tu respuestaProductos esperados / EvaluacionesEste tema se evaluará con la aportación que realices a la pregunta incluida en elforo, tus respuestas deben ser detalladas y justificadas, se tomará en cuenta tucreatividad y originalidad. Este trabajo contará el ¿?% de la calificación final,siempre y cuando lo entregues en la fecha y forma acordada.Guía para el profesorVerificar que la liga a la presentación se encuentra disponible y activo en lasección de materiales de apoyo para este temaModelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 38
  47. 47. Programación WebMateriales de apoyoAquí encontrarás los materiales de apoyo para este capítulo • Da click aquí para ver el video clip "Seven Cycles", indicado en la actividad 1 de esta sección. • Da click aquí para iniciar la presentación de introducción a ASP.NET, indicada en la actividad 2 de esta sección.Introducción al Framework de Microsoft .NET y a ASP.NETAgenda • Pre-requisitos • Fundamentos Arquitectura Web • Introducción al Framework de .NET • Bosquejo de ASP.NET • Repaso de Visual Studio .NET • Creando el proyecto de una aplicación Web ASP.NETPre-requisitosEste modulo asume que: • Entiendes los fundamentos de Programación C# • Tiendes familiaridad con el ambiente de desarrollo integrado (IDE) Visual Studio .NETNo es indispensable que cuentes con conocimientos previos en desarrollos Web(HTML, JavaScript, DHTML, CGI, Active Server Pages); sin embargo te serían deayuda.Fundamentos Arquitectura WebModelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 39
  48. 48. Programación Web Cliente PC/Mac/Unix/... + Navegador Solicitud: http://www.digimon.com/default.asp HTTP, TCP/IP Red Respuesta: <html>….</html> Servidor Servidor WebFundamentos tecnologías de desarrollo WebTecnologías del lado del Cliente • HTML, DHTML, JavaScriptTecnologías del lado del Servidor • ASP (Active Server Pages)ASP.NET es la siguiente generación de ASPLección: Introducción al Framework de .NET • Qué es el Framework de .NET? • Qúe problemas soluciona .NET? • Los componentes del Framework de .NET • Beneficios al usar el Framework de .NET • Visual Studio .NET: La herramienta para desarrollar .NET¿Qué es el Framework de .NET?Modelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 40
  49. 49. Programación Web Herramientas de desarrollo Clientes Aplicaciones Web ASP.NET Bases de Datos Servicios Web Framework XML .NET Experiencias del usuario¿Qué problemas soluciona .NET? • Aún con Internet, la mayoría de las aplicaciones y dispositivos tienen problemas al comunicarse unos con otros • Los programadores terminan escribiendo infraestructura en lugar de aplicaciones • Los programadores tienen que limitar sus alcances o continuamente aprender nuevos lenguajesLos Componentes del Framework .NETModelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 41
  50. 50. Programación Web Visual C++ C# Perl Python … Basic XML We b S e rvic es User Int erf ace ASP.NET ADO.NET and XML .NET F ram ework Class Lib rary Co mmon La ng uag e Runti me (CLR) Message COM+ IIS WMI Queui ng (Transa cti ons, P arti ti ons, Obj ect P ool i ng) Win3 2Beneficios al usar el Framework de .NET • Estar basado en estándares y prácticas Web • La funcionalidad de las clases de .NET está universalmente disponible • El código está organizado dentro de namespaces (espacios con nombre) jerárquicos y clases • Independiente del lenguajeModelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 42
  51. 51. Programación Web Window M FC/ATL .NET s Framework API Visual Basic ASP 1980’s 1990’s 2000’sVisual Studio .NET: La herramienta de desarrollo .NET Herramientas para Herramientas para Formularios Web Formularios Windows Multiples Visual Studio .NET Manejo de Lenguajes Errores Herramientas para Web Acceso a Services Datos Diseño Desarrollo Pruebas InstalaciónModelo Paracurricular – Desarrollador de Software – 2004 – V.1.0.0. 43

×