Etapa del desarrollo de un Sitio Web.
Está compuesto por una serie de información que puede contener una página Web textos, sonido, video e incluso mundos 3D y la animación.
La mayor innovación de la página Web se traduce en una sola palabra: interactividad. Una página Web puede contener elementos que permiten una comunicación activa entre el usuario y la información, la página responderá a sus acciones
El desarrollo de un proyecto de Sitio Web puede dividirse en tres etapas fundamentales: 1. Prediseño
2. Diseño
3. Instalación y Prueba
Para un buen diseño de la Web es importante la estructura del mismo diseño. Hacer más fácil la navegación a través de los iconos, menús, mapas, u otros elementos evita que el visitante se pierda dentro de la Web y se necesita además poner especial cuidado en el uso de imágenes en el diseño.
Las páginas Web son el principal recurso de INTERNET que no es más que la interconexión de redes informáticas que permite a los ordenadores o computadoras conectadas comunicarse directamente, es decir, cada ordenador de la red puede conectarse a cualquier otro ordenador de la red. El término suele referirse a una interconexión en particular, de carácter planetario y abierto al público, que conecta redes informáticas de organismos oficiales, educativos y empresariales.
También INTRANET utiliza como recurso este formato. Se llama INTRANET a las redes tipo Internet pero que son de uso interno, por ejemplo, la red corporativa de una empresa que utilizara protocolo TCP/IP y servicios similares como WWW.
El HTML, acrónimo de Hyper Text Markup Language, (lenguaje de marcas de hipertexto) es en informática el formato estándar de los documentos que circulan en la World Wide Web (WWW); se utiliza desde 1989. Los documentos HTML contienen dos tipos de información: la que se muestra en la pantalla (texto, imágenes...) y los códigos (tags o etiquetas), transparentes al usuario, que indican cómo se debe mostrar esa
información. Para crear un documento HTML, basta con disponer de un editor de código ASCII y teclear el texto y las etiquetas que sean precisas. También se pueden utilizar editores específicos que insertan automáticamente las etiquetas correspondientes al formato del texto que se escriba o a las imágenes que se inserten; actualmente casi todos los procesadores de texto incluyen esta posibilidad.
El lenguaje HTML es un subconjunto de SGML, acrónimo de Standard Generalized Markup Language, (lenguaje estándar de marcado de documentos), que es un estándar de descripción de página independiente del dispositivo, lo que permite adaptar la visión del documento al tamaño de la pantalla en la que se muestra.
En un documento HTML hay etiquetas que indican los atributos del texto (negrita, centrado...). Otras indican al sistema cómo debe responder a eventos que genere el usuario, por ejemplo, que después de que el usuario señale con el mouse un icono que representa una película, se ejecute el programa que reproduce vídeo en formato digital. La etiqueta más importante es la que indica un vínculo (link), que puede contener como destinatario otro lugar del mismo documento o el URL de otro documento; este último puede residir en el mismo lugar de la Web que el documento actual o en cualquier otro ordenador de WWW. El usuario navega de documento en documento seleccionando estos vínculos con el mouse.
A medida que se ha ido avanzando, se han estandarizado distintas versiones del lenguaje HTML. Cada una de ellas amplía el número de etiquetas, lo que permite nuevas posibilidades para los documentos; así, se le ha dotado de marcas para rellenar formularios (forms) de manera interactiva, que permiten al usuario enviar la información necesaria para realizar consultas en bases de datos, comprar o solicitar un servicio. Otras marcas permiten mejorar la presentación de los documentos, por ejemplo: añadiendo fondos, tablas de contenido o textos intermitentes. La versión HTML 4.0 se utiliza en combinación con el XML 1.0, otro subconjunto de SGML que permite al desarrollador definir sus propias etiquetas; el resultado es un nuevo formato denominado XHTML, que se espera que constituya un nuevo estándar de formato para páginas Web. Su principal ventaja estriba en que va a permitir desarrollar páginas Web
con diferentes conjuntos de datos, que se podrían descargar en dispositivos de mano, con pantallas de tamaño reducido.
El software que permite al usuario consultar documentos en World Wide Web (WWW) se denomina explorador o navegador; los más conocidos son Netscape Navigator y Microsoft Internet Explorer. Se encarga de interpretar las etiquetas y de mostrar el documento en la pantalla. La evolución de las distintas versiones del lenguaje HTML ha estado determinada por un desarrollo paralelo de los navegadores, que permitiese interpretar las nuevas etiquetas. El avance de unos y otros ha contribuido al crecimiento exponencial que ha experimentado WWW.
El proceso de planificación para diseñar un Sitio Web, involucra principalmente dos aspectos; identificar cuáles son las necesidades del tipo de usuario que utilizará el sitio y establecer una serie de requerimientos que el sitio debe satisfacer para solventar dichas necesidades.
La identificación de necesidades, busca comprender lo más posible acerca de los usuarios, su trabajo y el contexto de este trabajo. Con base en estas necesidades se definen con claridad los requerimientos que guiarán el diseño del sitio.
La ausencia de objetivos y requerimientos claros son una causa frecuente de fallo en proyectos relacionados con las tecnologías de la información y la comunicación.
Un enfoque de diseño centrado en el usuario hace más fácil satisfacer las necesidades y expectativas del usuario, quien es en definitiva, la razón principal de todo el trabajo y esfuerzo.
Como se describió con anterioridad la segunda fase de la investigación consistió en la elaboración de un Sitio Web que tuviese diversidad de hipertextos y demás recursos hipermediales a través de los cuales se pueda navegar y satisfacer necesidades e intereses de los escolares.
Se tomaron en cuenta conceptos, ventajas, así como las etapas del diseño Web: 1. Delimitación del tema.
2. Recolección de datos. 3. Estructuración.
4. Diseño y estilo gráfico. 5. Metáfora.
6. Ensamble final. 7. Validación.
Sitio Web es un conjunto de páginas Web interrelacionadas, que ofrecen contenidos en forma de texto, imágenes o sonidos sobre algún tema en particular. Se orientan al suministro de contenidos y servicios de información sobre una organización o un servicio de una organización específica, o contenidos y servicios de varias organizaciones.
Página Web es un documento que permite mostrar en pantalla textos y gráficos en el formato deseado. Contiene además referencias y enlaces que permiten acceder a otras páginas con información sobre el tema u otro tipo de temas, es posible interactuar con ellas y puede hacer que el resultado de esta interacción quede plasmado en la misma.
Ventajas principales de la utilización de la Web en el marco educativo:
• Está al alcance de cualquier escolar que disponga del equipo adecuado y el llegar a él depende sólo del propio escolar.
• Estamos ante la educación interactiva. Por primera vez el alumno decide hasta dónde quiere ser el receptor de un mensaje educativo.
• El proceso es del todo flexible, pues se adapta a las características personales del escolar, su madurez, intereses intelectuales y motivaciones. Beneficiando tanto al escolar más aventajado como al más lento.
• Dada la flexibilidad del proceso, se produce una total integración de los conocimientos, que se ve favorecida por la concreción de los contenidos estudiados, evitando así distracciones.
• El proceso de enseñanza aprendizaje, es posible aún en las condiciones más extremas de aislamiento o imposibilidad.
• Escolares y maestros de escuelas distantes entre sí utilizan la Web como medio de comunicación para realizar proyectos en común, intercambiar datos sobre diferentes aspectos de su medio social o estudiar las diferencias y semejanzas culturales entre comunidades de diferentes localidades e incluso países.
Este sitio Web tiene un enfoque pedagógico, pues posibilita a los escolares del sexto grado la ineludible necesidad de fortalecer los valores con el propósito de contribuir a hacer seres más dignos, patriotas, humanos, solidarios, responsables, laboriosos, honrados, honestos y justos; para así lograr el éxito de los objetivos propuestos con el mismo.
Descripción del escenario de la aplicación utilizada para el desarrollo del sitio. Recursos
Para desarrollar el Sitio Web se utilizó:
Macromedia Dreamweaver® MX: en este editor de páginas Web se diseñó e implementó el Sitio Web, es decir, se utilizó para la confección de los archivos HTML.
En el entorno de trabajoDreamweaver® MX en Windows, todas las ventanas y paneles están integradas en una única ventana de aplicaciones de mayor tamaño.
Se utilizó el programa Macromedia Dreamweaver MX, para diseñar una plantilla básica que permitió dar formatos a todas las páginas del sitio.
Macromedia Dreamweaver MX es un editor HTML profesional para diseñar, codificar y desarrollar sitios, páginas y aplicaciones Web. Tanto si desea controlar manualmente el código HTML como si prefiere trabajar en un entorno de edición visual, Dreamweaver proporciona útiles herramientas para mejorar los diseños Web.
Las funciones de edición visual de Dreamweaver permiten crear páginas de forma rápida, sin escribir una sola línea de código. Puede ver todos los elementos o activos del sitio y arrastrarlos desde un panel fácil de usar directamente hasta un documento. Puede agilizar el flujo de trabajo de desarrollo mediante la creación y edición de imágenes en Macromedia Fireworks y su posterior importación directa a Dreamweaver.
Macromedia Fireworks® MX: se utilizó para confeccionar la plantilla, editar y optimizar imágenes. Puede utilizarse para crear, editar y animar gráficos Web, añadir interactividad avanzada, entre otras.
Macromedia Fireworks MX es la solución perfecta para diseñar y producir elementos gráficos para la web. Se trata del primer entorno de producción que afronta con éxito los grandes retos de los diseñadores y desarrolladores de gráficos web.
En Fireworks es posible crear y modificar imágenes vectoriales y de mapa de bits en una sola aplicación. Todo es modificable en todo momento. Y el flujo de trabajo puede automatizarse para satisfacer las necesidades de cambio y actualización que de otra forma exigirían una enorme dedicación.
Las herramientas antes mencionadas se utilizaron para editar textos de los contenidos del sitio, ya que es muy fácil su realización mediante el mismo, además es compatible con todas las computadoras que se encuentran en los laboratorios de las escuelas.
2.2.3 Caracterización del Sitio Web.
El Presente Sitio Web se desarrolló a partir de las consideraciones y las percepciones recopiladas y la experiencia del autor, incluyó diseño educativo computacional y de comunicación quedando como resultado final lo mostrado a continuación.
La página principal (index principal.htm) muestra la portada del sitio dividida en cinco sesiones principales, un video ubicado a la izquierda, cuatro botones de control en la parte superior al igual que en la parte inferior con enlaces del mismo orden. Cada sesión contiene varios submenú que contienen los temas que aborda cada temática, a través de los enlaces con los contenidos referidos.
Botones de control
A través de este botón, se accede a la página principal desde cualquiera otra página.
Esta sesión aborda los temas relacionados con el trabajo la Organización de Pioneros José Martí desde la escuela.
Este tema aborda todo lo relacionado con la historia de la escuela desde su fundación hasta la actualidad.
En esta temática se visualiza una galería de imágenes variadas relacionadas con la vida de la escuela.
Sesiones de la página principal. Escuela
Presenta cinco submenú que caracterizan el colectivo pioneril.
c
Historia.c
Ubicación.c
Batalla de Ideas.c
Alumnos.c
Profesores. ______________________________________________________________________ Historia y personalidadesEste tema contiene tres botones con hipervínculos a los diferentes temas:
©
Historia local ___ Caracterización del poblado donde está ubicada la escuela.©
Efemérides ____ Describe los principales hechos o sucesos ocurrido a través de la historia.©
Personalidades ____ Muestra fotos de los héroes y mártires de la Patria.______________________________________________________________________
Símbolos de nuestra Patria
Esta sesión describe la importancia de los símbolos patrios, sus características, y el significado de sus partes.
• La bandera de la... • El escudo de... • El himno de...
Organización de pioneros José Martí
Esta sesión aborda los temas relacionados con el trabajo la Organización de Pioneros José Martí desde la escuela distribuidos en seis submenú.
• Deberes y derecho de los pioneros • Movimiento de Pioneros Exploradores. • Símbolos y atributos.
• Escuela como palacio. • FAPI.
• Paquito González Cueto El oro de tu naturaleza
Muestra la definición de los valores y modos de actuación asociados a ellos con referencias e imágenes.
•
Dignidad•
Patriotismo•
Humanismo•
Solidaridad•
Responsabilidad•
Laboriosidad•
Honradez•
Honestidad•
Justicia ______________________________________________________________________Capítulo II Modelación teórico práctica de la propuesta
Todas las páginas fueron diseñadas utilizando la plantilla (template.dwt) en la
Macromedia Fireworks® MX primeramente, y posteriormente en la Macromedia Dreamweaver® MX.
Los textos presentados en este sitio fueron copiados de un documento previamente elaborado en Microsoft Word.
Aspectos que se tuvieron en cuenta a la hora del diseño del Sitio Web:
Se garantizó que las páginas creadas fueran legibles para el usuario ya que se utilizaron fondos con color y contraste adecuados permitiendo la lectura cómoda de textos y gráficos.
Se mantuvo la uniformidad en todas las páginas, se utilizó el tipo de fuente Arial , tamaño 12 , y colores blanco, negro y amarillo y justificado.
Ya que el sitio fue diseñado para una muestra infantil se emplearon efectos visuales para motivar su atención, (animación, sonidos, imágenes, combinación de colores) Cada sesión cuenta con una página de introducción que muestra una breve explicación del contenido y las temáticas que abordará el mismo.
Se garantizó consistencia tanto en forma como en función de la organización y la navegación de sus páginas.
La estructura de la información se diseñó de modo que el usuario estuviera a un mínimo de clic de cualquier contenido, de esta manera la información quedó agrupada de forma jerárquica.
Las imágenes se optimizaron para contribuir a que las páginas puedan ser cargadas lo más rápido posible.
En la medida de lo posible, se diseñó el sitio para ofrecer la máxima compatibilidad con navegadores teniendo en cuenta otras limitaciones de diseño, (Internet Explorer y Mozilla Firefox).
Se proporcionaron múltiples versiones de la página principal del sitio; unas con marcos y otra sin ellos.
Capítulo II Modelación teórico práctica de la propuesta
A continuación el mapa del sitio y el árbol de carpetas y sus principales páginas
Inicio
Inicio OPJM Histori al
Galería
Historia y personalidades
Historia local Efemérides Efemérides
Historial Ubicación Batalla de Ideas Alumnos Trabajadores Símbolos y atributos
La Bandera ... El Escudo ... El Himno...
Organización de Pioneros José Martí
Emblema Deberes y Derechos
Paquito Pioneros Exploradores
Símbolos y Atributos
Escuela como Palacio FAPI
El Oro de tu Naturaleza
Dignidad Patriotismo Humanismo Solidaridad Responsabilidad
Capítulo II Modelación teórico práctica de la propuesta
Árbol de carpetas
A continuación se ofrece una ilustración del mecanismo de interacción de las páginas en el navegador.
Capítulo II Modelación teórico práctica de la propuesta