Modulo 1.8

Módulos Desarrollo De Software – Primer Año.
Módulo 1.8:
“Proyecto
tecnológico de
desarrollo de páginas
web”
Ing. Carlos Humberto Cruz 115


Etapa de informarse
Contenido: Desarrollo de páginas web con HTML.

¿Cómo crear una página web en HTML?
En el fondo, crear una página web en HTML, no es muy diferente a crear cualquier otro documento con
un editor de texto. Consiste en crear un fichero con extensión .html o .htm y editarlo.
En este fichero, se creará el contenido en sí (el texto de los títulos, párrafos, crear formularios HTML,
etc.), así como las etiquetas (o “tags”) HTML (luego veremos que son) necesarias para definir la
estructura del documento HTML.
Esto se puede hacer de una manera más purista en modo texto trabajado directamente con el código
HTML, o bien, de una manera más visual y amigable con un editor HTML especializado, muy parecido a
cómo se trabaja también en un editor como Microsoft Word, por ejemplo.
Y aquí puedes ver el resultado de este código en un navegador web:

¿Qué son las etiquetas y los atributos HTML? Ejemplos de etiquetas HTML
Esta semántica se consigue mediante el uso de las etiquetas y los atributos.
Lo primero que te llamará la atención en el ejemplo de código arriba son las palabras entre corchetes.
Esto son las así llamadas etiquetas HTML.
Estas etiquetas forman una estructura jerárquica, es decir, se pueden anidar entre ellas, salvo la
etiqueta especial <!DOCTYPE HTML> en la primera línea de un documento HTML.
Siempre hay una etiqueta de apertura y otra de cierre que es la misma etiqueta, pero con una barra
delante del nombre de la etiqueta. Por ejemplo: “<title>” (etiqueta de apertura) y “</title>” (etiqueta
de cierre que delimita el final del contenido etiquetado).
En medio viene un texto u otras etiquetas anidadas que con su contenido. El conjunto de una etiqueta
y su contenido se conoce como elemento HTML.
A veces, una etiqueta no tiene contenido en texto como tal (por ejemplo, las etiquetas “meta” del
ejemplo). En ese caso, no hace falta usar una etiqueta de cierre.
Estructura básica de un documento HTML

Empecemos a hablar ahora de las diferentes partes del código de una página en HTML.
Lo primero es la estructura básica de un documento HTML. Hay variantes en cuyos matices no quiero
entrar por no dispersarnos, pero para mantener las cosas simples, te recomiendo usar siempre esta
plantilla:
Cómo usar tablas en páginas web

Las tablas son un elemento ya algo más avanzado y, por tanto, aquí me limitará a una estructura básica
de tabla:
Aquí, la etiqueta <table>, como ya te puedes imaginar, demarca la tabla.

Dentro de ella, cualquier fila de cualquier tipo se demarca con <tr> que viene de “table-row” (fila de
tabla en inglés). Dentro de esto, puede haber diferentes tipos de filas que se diferencian por el tipo de
celdas que contienen.
En este ejemplo, tenemos una primera fila con celdas con la etiqueta <th> (“table header”, cabecera
de tabla en inglés) que actúan como cabecera y luego el resto, serían celdas ordinarias con datos, <td>,
“table data”.
Insertar enlaces (links) en páginas HTML
Vamos ahora a lo que es la etiqueta por excelencia en una página web: la etiqueta de un enlace.
Esta etiqueta es “<a>”, de “anchor” (ancla en inglés) y su sintaxis básica es la siguiente:

Contenido: Utilización de JavaScript en páginas web.

QUÉ ES JAVASCRIPT
JavaScript es un lenguaje utilizado para dotar de efectos y procesos dinámicos e “inteligentes” a
documentos HTML. Un documento HTML viene siendo coloquialmente “una página web”. Así,
podemos decir que el lenguaje JavaScript sirve para ejecutar acciones rápidas y efectos animados
en páginas web.
Las acciones controladas por JavaScript pueden ser el despliegue de un menú, hacer aparecer,
desaparecer o cambiar texto e imágenes, realizar cálculos y mostrar resultados, mostrar mensajes de
aviso (por ejemplo si faltan datos en un formulario) y “efectos animados” en general.
Este lenguaje es principalmente utilizado por parte de programadores web para dar respuestas rápidas
a las acciones del usuario sin necesidad de enviar la información de lo que ha hecho el usuario al
servidor y esperar respuesta de éste (lo que haría más lento los procesos). El código JavaScript se carga
al mismo tiempo que el código HTML en el navegador, y reside en el cliente (computador en el que nos
encontramos), por lo que JavaScript sigue funcionando incluso aunque se produzca un corte en la
conexión a internet (en este caso no podremos seguir navegando hacia otras direcciones web, pero sí
podremos ejecutar procesos “locales” en nuestro computador para la página web en que nos
encontráramos).
En el siguiente esquema vemos un esquema básico de lo que supone navegar por internet desde un
computador personal.
El proceso básico es el envío de una petición (que puede llevar incorporada información como los
datos de un formulario) a un servidor, esperar respuesta por parte del servidor y recibir la respuesta en

nuestro computador. Cada proceso de este tipo consume tiempo, el tiempo total podríamos verlo
desde el lado de nuestro computador como Tiempo Total Proceso = tiempo envío petición + tiempo
procesamiento petición + tiempo recepción respuesta.
El código JavaScript es interpretado directamente por el navegador web, sin necesidad de otros
programas o procesos intermedios. Un ejemplo puede ayudarnos a comprender la idea. Supongamos
que en una página web pedimos al usuario que rellene un formulario con sus datos personales, y que
entre los requisitos para enviar el formulario tenemos que es obligatorio que se incluya el nombre de
usuario y correo electrónico, siendo obligatorio que el nombre tenga más de una letra y que el correo
electrónico contenga el carácter @ (arroba).
Contenido: Desarrollo de un proyecto tecnológico.

Desarrollo web: 6 Fases para el desarrollo de un proyecto
En el desarrollo de un sitio web hay seis etapas clave.
1- Investigación
Lo primero que hay que hacer es un análisis y una revisión del contexto en el que nos movemos. Por
ejemplo: mirar sitios similares (competencia), buscar un estilo que nos identifique y que por supuesto
nos guste y con el que nos sintamos cómodos.
2- Planificación
Cuando se planifica un sitio Web, se deben considerar varios factores: la audiencia y sus necesidades,
el objetivo para el que se crea, los temas y contenidos que le gustaría cubrir, el nombre del sitio, la
disponibilidad del nombre de dominio y registrarlo, lo que otros sitios han hecho, etc.
3- Arquitectura del sitio y contenido

Pensemos qué vamos a contar y cómo vamos a contarlo. Debemos crear un mapa de la arquitectura
del sitio para demostrar visualmente cómo se organiza el contenido y la estructura del sitio.
4- Diseñar, construir y hacer pruebas
Es la etapa del diseño web: tipos de letras, colores, plantillas, imágenes, títulos, etc. En esta etapa se
empieza a probar el sitio web.
5- Operar, mantener y evaluar

En esta etapa el sitio Web se encuentra constante mantenimiento para posibles mejoras. Se procura
obtener informes sobre el rendimiento, para asegurar que el sitio Web sea un éxito.
6- Marketing
Una vez que la web se publica hay que ponerse manos a la obra y hacer marketing. Trabajar fuerte en
el SEO del portal para que éste se posicione correctamente en buscadores, difundir en redes sociales
(Facebook, Twitter, Linkedin), mimar los contenidos, actualizar a diario el portal, etc.
Estar presente en Internet es muy importante hoy en día para las empresas. Tener una página web
corporativa de calidad y actualizada es básico para posicionarse en el mercado, darse a conocer,

conseguir clientes, mejorar su reputación y, en definitiva, vender sus productos o servicios y ganar
dinero. Y es que Internet se ha convertido en parte importante de nuestras vidas y, por ello, el
crecimiento de una empresa depende enormemente de la presencia de ésta en Internet. En
Neosystems, en la última década hemos desarrollado portales web para multitud de pymes así como
portales para grandes multinacionales.
Contenido: Creació n de cortometrajes de desarrollo de pá ginas web.
El término cortometraje, que procede del vocablo francés court-métrage, hace referencia a
una película breve. No existe una definición precisa sobre su duración, aunque por lo general se acepta
que un filme que dura treinta minutos o menos es un cortometraje.
Conocidos en el lenguaje coloquial como cortos, estos materiales audiovisuales pueden desarrollar las
mismas temáticas que los mediometrajes y los largometrajes. Sin embargo, es habitual que los
cortometrajes se enfoquen en historias que no resultan tan masivas como para producir una
recaudación económica considerable.
Los cortometrajes también son elegidos por los directores nóveles y por aquellos que buscan la
mayor libertad creativa posible. En muchos casos las películas más extensas, que suelen tener como
principal objetivo la recaudación, imponen más restricciones a los cineastas que los cortometrajes.
Actualmente, gracias a que los dispositivos tecnológicos son más comunes y accesibles, muchas
personas pueden rodar sus propios cortometrajes sin tantos recursos técnicos y con una inversión muy
reducida. Con una filmadora de uso doméstico y software para editar video, es posible crear un
cortometraje de manera sencilla.
Tradicionalmente los cortometrajes se estrenan y se exhiben a través de festivales: no suele haber
salas de cine destinadas a la proyección de esta clase de películas. En los últimos años,
además, Internet se convirtió en un medio muy importante para la distribución de cortos.
“Un perro andaluz”, dirigido por Luis Buñuel y con guión de Buñuel y Salvador Dalí, está entre los
cortometrajes más populares de la historia. Se trata de un filme surrealista estrenado en 1929. The
Walt Disney Company también produjo cortometrajes muy famosos a nivel mundial.
En la actualidad, el estudio cinematográfico Pixar estrena casi todos los años un cortometraje junto con
sus películas, y su calidad es verdaderamente excepcional, tanto desde el punto de vista técnico como
de sus guiones. Esta compañía norteamericana es conocida por su enfoque en la historia por encima de
los efectos visuales, y es responsable de la creación de muchos de los considerados «nuevos clásicos»
del cine.
Consejos para hacer un cortometraje de bajo presupuesto.
Si bien las grandes compañías cinematográficas producen sus propios cortometrajes y, como se
expresa en el párrafo anterior, su calidad puede ser absolutamente comparable con la de una película,
este formato es el ideal para los estudiantes y aquellas personas que estén dando sus primeros pasos
por el mundo de la filmación, ya que permite completar un proyecto con muy poco dinero.
El primer paso para embarcarse en la creación de un cortometraje es conocer el formato a fondo,

algo que solamente se consigue mirando muchos otros. Dado que su estructura y sus características

son tan diferentes a las de los largometrajes, es importante tener una perspectiva clara de las
posibilidades que nos ofrece antes de comenzar a escribir el guión.
Precisamente, una vez que nos hayamos familiarizado con los rasgos del cortometraje, tanto con sus
posibilidades como con sus limitaciones, llega el momento de elaborar un guión que se ajuste a ellos.
Esto no se puede hacer por la fuerza; debe surgir de forma espontánea, debe ser el producto de
la inspiración, de una necesidad de contar una historia.
El presupuesto disponible debe ser una cuestión presente en todo momento, para evitar sorpresas que
nos obliguen a realizar cortes de último momento. No siempre son necesarios los efectos especiales ni
las escenas al aire libre: si no contamos con la cantidad de dinero suficiente para ciertos aspectos de la
producción, entonces debemos enfocarnos en los otros, o bien posponer el proyecto hasta que
podamos hacerle justicia.
Contenido: Có mo crear un sitio web con Adobe Dreamweaver CS3
Para que Dreamweaver le ayude eficazmente en la confección de un sitio web, debe seguir una serie
de pasos, como comunicarle a Dreamweaver dónde se encuentran en su ordenador los componentes
del sitio, por ejemplo, hojas de estilo CSS, imágenes o documentos HTML. Estos archivos deben estar
organizados en subcarpetas dentro de una carpeta principal. Con una estructura ordenada,
Dreamweaver podrá controlar los cambios que se produzcan en los archivos y mantendrá actualizados
los enlaces de su sitio web. Sin esta organización de datos a través de Dreamweaver, el cambio de una
sola imagen podría provocar una serie de errores en su sitio web. En este tutorial vamos a aprender a
definir en Dreamweaver un sitio web nuevo o ya existente.
1. Abra Dreamweaver
2. Para empezar, vaya a Crear nuevo > Sitio de Dreamweaver y abra la ventana Definición de sitios

Puede utilizar indistintamente las pestañas Básicas o Avanzadas, para crear su sitio. La diferencia
reside en que Avanzadas está organizada en menús, mientras que Básicas va guiándole paso a paso
durante todo el proceso y explica con más detalle las distintas propiedades.
3. Vaya a Avanzadas y pulse Datos locales, que es la base de este tutorial
4. En Nombre del sitio, escriba "Sitio Aquo". Este nombre es sólo para uso propio y no aparecerá en
el sitio web.

5. Vaya al icono Carpeta, junto a Carpeta de raíz local. Este punto es el más importante del proceso,
porque define la carpeta principal de almacenamiento de datos para el sitio web.
6. Vaya a la carpeta "Sitio _Aquo" y pulse Seleccionar. Con esto Dreamweaver ya posee la
información mínima para crear un sitio web.
7. Pulse Aceptar. Dreamweaver abre entonces la carpeta principal y muestra en el panel Archivos un
menú con todas las carpetas, imágenes y documentos contenidos en ella (figura 4).
8. Observe que en la parte superior del panel Archivos existe un menú desplegable en el que
aparece "Sitio Aquo". Aquí están los nombres de todos los sitios que están siendo creados. Si es
necesario, se puede navegar por el disco duro para buscar otras carpetas.
9. Dreamweaver no puede registrar cambios efectuados fuera de Dreamweaver. Utilice por tanto el
panel Archivo para llevar a cabo todos los cambios en la estructura de los documentos del sitio
web, y no herramientas del sistema operativo.

Etapa de planificar.
La fase de planificación se caracteriza por la elaboración del plan de trabajo, la estructuración
del procedimiento metodológico y la planificación de los instrumentos y medios de trabajo.
Contenido de esta etapa desarrollado por alumno sobre la planificación del proyecto asignado:
Nombre del proyecto:
1- Descripción de su proyecto.
2- Desarrollar un plan de trabajo para su proyecto que incluya las actividades a realizar
para completar su proyecto.
N Actividad Descripción Tiempo
Actividad: que actividad realizara para completar su proyecto.

Descripción: que hará dentro de esa actividad para poder desarrollarla.
Tiempo: Cuanto tiempo le llevara desarrollar esa actividad.

Etapa de decidir.
La forma adecuada de proceder, sobre la base del análisis asistido por el facilitador de la información y
de la planificación. El facilitador, si procede, asigna tareas y distribuye material a los participantes.
Contenido de esta etapa desarrollado por alumno:
1- Analizar el tiempo asignado a las actividades
N Actividad Tiempo Porque este tiempo

1
2
3
4
5
6
7
2- Recursos requeridos para completar las actividades
N Actividad Recursos (económicos, técnicos, equipo etc.)

1
2
3
4
5
6
7
3- Programación de las actividades.
N Actividad Fechas para desarrollo de sus actividades.

1
2
3
4
5
6
7

Etapa de ejecutar.
En esta etapa se desarrolla el proyecto asignado para trabajar
1- Se toman fotos al software desarrollado y se pegan en el cuaderno
2- Se documenta como se creó el software
Contenido de esta etapa desarrollado por alumno para entregar:
1- Desarrollar un documento en pdf que contenga las fotos de su cuaderno de cómo desarrollo cada etapa.
2- El nombre del documento pdf debe ser su nombre completo.
Etapa de controlar.
Cada equipo de trabajo, con apoyo del facilitador o facilitadora, da seguimiento a cada actividad realizada, a
través de la verificación de avances en el cronograma de actividades, resultados logrados y conocimientos
adquiridos, para realizar ajustes y/o fortalecer el aprendizaje adquirido.
En esta etapa se revisa el proyecto para ver en que se corrige o se mejora para su entrega final.
Etapa de valorar
En esta etapa se valorara el trabajo realizado por el alumno para poder signar una calificación
Calificación de modulo

Modulo 1.8

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Modulo 1.8

Cargado por

Copyright:

Formatos disponibles

Módulos Desarrollo De Software – Primer Año.

Ing. Carlos Humberto Cruz 115

Ing. Carlos Humberto Cruz 116

Contenido: Desarrollo de páginas web con HTML.

Y aquí puedes ver el resultado de este código en un navegador web:

Ing. Carlos Humberto Cruz 117

Estructura básica de un documento HTML

Ing. Carlos Humberto Cruz 118

Cómo usar tablas en páginas web

Aquí, la etiqueta <table>, como ya te puedes imaginar, demarca la tabla.

Ing. Carlos Humberto Cruz 119

Contenido: Utilización de JavaScript en páginas web.

Ing. Carlos Humberto Cruz 120

Contenido: Desarrollo de un proyecto tecnológico.

3- Arquitectura del sitio y contenido

5- Operar, mantener y evaluar

Ing. Carlos Humberto Cruz 121

Contenido: Creació n de cortometrajes de desarrollo de pá ginas web.

El primer paso para embarcarse en la creación de un cortometraje es conocer el formato a fondo,

Ing. Carlos Humberto Cruz 122

Contenido: Có mo crear un sitio web con Adobe Dreamweaver CS3

Ing. Carlos Humberto Cruz 123

3. Vaya a Avanzadas y pulse Datos locales, que es la base de este tutorial

Ing. Carlos Humberto Cruz 124

Ing. Carlos Humberto Cruz 125

Nombre del proyecto:

N Actividad Descripción Tiempo

Actividad: que actividad realizara para completar su proyecto.

Ing. Carlos Humberto Cruz 126

Contenido de esta etapa desarrollado por alumno:

1- Analizar el tiempo asignado a las actividades

N Actividad Tiempo Porque este tiempo

2- Recursos requeridos para completar las actividades

N Actividad Recursos (económicos, técnicos, equipo etc.)

3- Programación de las actividades.

N Actividad Fechas para desarrollo de sus actividades.

Ing. Carlos Humberto Cruz 127

Contenido de esta etapa desarrollado por alumno para entregar:

Ing. Carlos Humberto Cruz 128

También podría gustarte