Unidad Uno

INTRODUCCIÓN AL DESARROLLO DE SITIOS WEB Guía para el estudiante

Elaborado por el formador:

JESÚS ARTURO ANNEAR NARANJO

INSTITUTO COLOMBIANO DE APRENDIZAJE

INCAP Programa Técnico Laboral en Operación de Programas Informáticos y Bases de Datos

INSTITUTO COLOMBIANO DE APRENDIZAJE INCAP

INTRODUCCIÓN AL DESARROLLO DE SITIOS WEB

EL SIGUIENTE MATERIAL SE PREPARÓ CON FINES ESTRICTAMENTE ACADÉMICOS, DE ACUERDO CON EL ARTÍCULO 32 DE LA LEY 23 DE 1982, CUYO TEXTO ES EL SIGUIENTE:

CONTENIDO

ARTÍCULO 32: ―Es permitido utilizar obras literarias, artísticas o parte de ellas, a título de ilustración en obras destinadas a la enseñanza, por medio de publicaciones, emisiones o radiodifusiones, o grabaciones sonoras o visuales, dentro de los límites justificados por el fin propuesto, o comunicar con propósito de enseñanza la obra radiodifundida para fines escolares, educativos, universitarios y de formación personal sin fines de lucro, con la obligación de mencionar el nombre del autor y el título de las obras utilizadas‖.

Introducción al desarrollo de sitios web Instituto Colombiano de Aprendizaje Elaborado por: Jesús Arturo Annear Naranjo

Editado por: Instituto Colombiano de Aprendizaje INCAP Avenida Caracas No. 63-66 © Prohibida la reproducción parcial o total bajo cualquier forma (Art. 125 Ley 23 de 1982) Bogotá – Colombia Versión 01 - Enero 2010

2

INTRODUCCIÓN AL DESARROLLO DE SITIOS WEB

PRESENTACIÓN GUÍA METODOLÓGICA

5 6

UNIDAD UNO NORMAS Y PRINCIPIOS PARA EL DESARROLLO DE UNA PÁGINA 8 WEB Principios en el desarrollo de sitios web 9 Reglas para crear sitios web exitosos 11 UNIDAD DOS LENGUAJE DE PROGRAMACIÓN HTML Conceptos básicos del lenguaje de programación HTML. Características generales del lenguaje Estructura de un documento HTML Comandos básicos de HTML Enlaces Imágenes Tablas Frames (Marcos) Formularios Publicar páginas en internet

18 19 19 20 24 34 39 40 49 52 60

UNIDAD TRES VBSCRIPT Y JAVASCRIPT Conceptos básicos Datos y variables Entrada y salida de datos Condicionales Ciclos repetitivos Funciones y procedimientos

62 63 67 69 71 73 76

BIBLIOGRAFÍA

84

Apreciado estudiante:

3

INTRODUCCIÓN AL DESARROLLO DE SITIOS WEB Usted escogió al INCAP para que lo oriente en el camino de la formación profesional. La institución le proporcionará un formador, quien le ayudará a descubrir sus propios conocimientos y habilidades.

El INCAP, le ofrece además, recursos para que usted alcance sus metas, es decir, lo que se haya propuesto y para ello dispondrá de módulos guía, audiovisuales de apoyo, sistemas de evaluación, aula y espacios adecuados para trabajos individuales y de grupo. Éste módulo guía que constituye además un portafolio de evidencias de aprendizaje, está distribuido de la siguiente manera: PRESENTACIÓN: Es la información general sobre los contenidos, la metodología, los alcances la importancia y el propósito del módulo.

GUÍA METODOLÓGICA: Orienta la práctica pedagógica en el desarrollo del proceso de formación evaluación y se complementa con el documento de la didáctica para la formación por competencias de manejo del formador.

DIAGNÓSTICO DE ESTILO DE APRENDIZAJE: Que le permitirá utilizar la estrategia más adecuada para construir sus propios aprendizajes.

AUTOPRUEBA DE AVANCE: Es un cuestionario que tiene como finalidad que usted mismo descubra, qué tanto conoce los contenidos de cada unidad, y le sirve de insumo para la concertación de su formación y el reconocimiento de los aprendizajes previos por parte de su formador (talleres que se encuentran al final de cada unidad).

CONTENIDOS: Son el cuerpo de la unidad y están presentados así:  Unidad  Logro de competencia laboral  Indicadores de logro: Evidencias  Didáctica del método inductivo Activo para el desarrollo de las competencias: FDH: Formador Dice y Hace, FDEH: Formador Dice y Estudiante Hace, EDH: Estudiante Dice y Hace.

VALORACIÓN DE EVIDENCIAS BIBLIOGRAFÍA

4

INTRODUCCIÓN AL DESARROLLO DE SITIOS WEB

PRESENTACIÓN

PRESENTACIÓN Contar con una página web ha dejado de ser una moda para convertirse en una necesidad para las empresas y para quienes desean publicar información esencial en numerosos campos del conocimiento. De ahí la importancia para el técnico en sistemas de conocer y manejar las herramientas que permiten publicar en Internet.

El presente módulo ofrece al estudiante esas herramientas, desde los elementos conceptuales que rigen el diseño de todo espacio virtual, hasta el conocimiento del lenguaje HTML y los lenguajes VBScript y Java Script. Con ellas, el estudiante estará en capacidad de construir páginas y portales funcionales, atractivos para el navegante y útiles para la empresa que lo encarga.

De igual forma, tendrá las bases suficientes para aprovechar al máximo otras aplicaciones de diseño web, que requieren de los elementos que continuación se presentan.

5

INTRODUCCIÓN AL DESARROLLO DE SITIOS WEB

GUÍA METODOLÓGICA La estrategia metodológica del INCAP, para la formación técnica del aprendiz mediante competencias laborales, comprende dos caminos: 1. Las clases presenciales dictadas por el Formador haciendo uso del método inductivo – activo 2. El trabajo práctico de los estudiantes dirigido y evaluado por el Formador, a través de talleres, desarrollo de casos, lecturas y consultas de los temas de clase etc.

Con esto se busca fomentar en el estudiante el análisis, el uso de herramientas tecnológicas y la responsabilidad.

Los módulos guía utilizados por el INCAP, para desarrollar cada uno de los cursos, se elaboran teniendo en cuenta ésta metodología. Sus características y recomendaciones de uso son:  A cada unidad de aprendizaje le corresponde un logro de competencia laboral el cual viene definido antes de desarrollar su contenido. Seguidamente se definen los indicadores de logro o sea las evidencias de aprendizaje requeridas que evaluará el Formador.  Glosario: Definición de términos o palabras utilizadas en la unidad que son propias del tema a tratar.  Desarrollo de la unidad dividida en contenidos breves seguidos por ejercicios, referenciados así:

» FDH (El Formador Dice y Hace): Corresponde a la explicación del contenido y el desarrollo de los ejercicios por parte del Formador.

» FDEH (El Formador Dice y el Estudiante Hace): El estudiante desarrolla los ejercicios propuestos y el Formador supervisa.

» EDH (El estudiante dice y hace): Es el trabajo práctico que desarrollan los estudiantes fuera de la clase, a través de talleres, desarrollo de casos, lecturas y consultas de los temas, los cuales deben ser evaluados por el Formador.  Al final de cada unidad se puede presentar un resumen de los contenidos más relevantes y ejercicios generales.

6

INTRODUCCIÓN AL DESARROLLO DE SITIOS WEB

DIAGNÓSTICO INFORMACIÓN GENERAL Regional_____________Programa__________________Módulo____________ Estudiante_________________________Formador_______________________

EVALUACIÓN DIAGNÓSTICA Estilo de aprendizaje_______________________________________________

7

INTRODUCCIร N AL DESARROLLO DE SITIOS WEB

Unidad

Uno

1

Normas y principios para desarrollo de una pรกgina Web

el

T E M A S 1. Normas y Principios para el desarrollo Web. 2. Reglas para crear sitios Web exitosos.

3. Como mantener cautivados los visitantes de un sitio.

Logros de Competencia 1. Conocer e identificar de manera adecuada las normas y principios para el desarrollo de una pรกgina Web.

Indicador de Logro 1. Identifica y conoce las normas y los principios para el desarrollo de un sitio Web.

Evidencia de

Conocimiento

8

INTRODUCCIÓN AL DESARROLLO DE SITIOS WEB

El Formador Dice y Hace: 1. Principios en el desarrollo de sitios web Internet es un instrumento lleno de posibilidades y contenidos. La competitividad existente en la red de redes es enorme debido a la relativa pequeña inversión que requiere el crear un website o sitio Web. Una navegación lenta y complicada, muy probablemente nos llevara a perder de forma inmediata a la mayoría de nuestros posibles clientes. A demás el desarrollo

de un website se efectúa con lenguajes con una enorme

flexibilidad, entonces vemos la significativa importancia que tiene el especificar algunos principios de diseño para el desarrollo de nuestros sitios. 

La ley de Fitts: Esta es prácticamente la única regla no subjetiva

que está establecida dentro del campo del diseño de interfaces y hace referencia a las características que tienen que tener los objetos para que sea más fácil o difícil interaccionar con ellos: posición en la que se encuentren, tamaño del mismo, y una característica adicional, la ‗expresividad‘ de dichos elementos. Con este último concepto quiero dar a entender que un objeto será más ‗visible‘ (en cuanto a la interacción con el usuario) si éste da a entender o expresa su existencia como objeto de interfaz y no como simple información (ya sea dato o imagen). Un ejemplo es el cambio que sufren ciertos enlaces web al pasar por encima de ellos con el puntero del ratón (por ejemplo cambiando de color). 

Dar feedback (Retroalimentación) al usuario: Existen muchísimos

casos en los que una acción por parte del usuario implica modificaciones en la aplicación que no tienen una respuesta visual que mostrarse al usuario, y si ésta existe no se da ninguna información sobre la acción ejecutada. Dar información de retorno al usuario sobre las acciones que realiza es un punto fundamental y en demasiadas ocasiones olvidado. Afortunadamente 9

INTRODUCCIÓN AL DESARROLLO DE SITIOS WEB

en el mundo web, la principal acción que realizan los internautas es pulsar enlaces y descargar archivos, acciones ambas que tienen inmediatas consecuencias. Para las que no las tienen, dar feedback al usuario es el camino a seguir para conseguir aplicaciones consistentes y de alta usabilidad. 

Reutilización de la experiencia del usuario: Consiste en exponer

al usuario antelo conocido y no mostrarle al mismo elementos que aunque estéticamente sean vistosos, para él no sean significativos o le compliquen algo que debe ser simple y sencillo. Actualmente se exagera en el uso de ciertos elementos que dan a la web mucha flexibilidad y riqueza como es el uso de Flash. En estos nuevos aplicativos está por encima lo estético sobre la facilidad de uso, consiguiendo confundir al usuario. En el entorno web es aconsejable no crear interfaces que requieran excesivo aprendizaje ya que nos enfrentamos a miles de usuarios con diferentes grados de conocimiento y cualquier dificultad presentada al usuario suele significar una pérdida considerable de visitas a favor de nuestra competencia (no olvidemos la enorme proliferación que ha vivido y sigue viviendo la creación de Websites de todo tipo). El uso de estructuras de navegación no estándar es posiblemente el error más grave que podamos cometer. También debemos saber que existen ciertas excepciones plenamente justificadas como son la creación de Websites en los que prima la forma al contenido o en los que casi no existe competencia 

Uso

del Scroll: Es una buena idea hacer que todos los elementos

de navegación y la información importante se le muestre al usuario nada más se cargan las páginas sin necesidad de hacer scroll. 

Sentencias y párrafos: La gran mayoría de los usuarios lee lo

mínimo e imprescindible para obtener aquello que buscan de nuestro web.

Incluir sentencias largas y párrafos grandes dificulta generalmente esta actividad con lo que se pierde algo de usabilidad (y por lo tanto de visitas!!). es importante aclarar que lo anterior no aplica a lo que son documentos en formato web (html), ya sean artículos, o incluso libros.

10

INTRODUCCIÓN AL DESARROLLO DE SITIOS WEB



Imágenes: Debido a los adelantos en la tecnología que en nuestro

país no son los mejores el ancho de banda que aún no es el mejor impide que carguemos excesivamente nuestras páginas de imágenes, y si se requiere una técnica muy interesante consiste en crear thumbnails (imágenes de muy reducido tamaño que al pulsarse abren otra ventana en la que se carga la imagen original). Por lo general en los thumbnails se muestra la suficiente información para que un usuario decida si le es útil obtener la imagen original o no. 

Ancho de Banda: El universo web ofrece muchísimas posibilidades

interactivas y de multimedia y es por esto que debemos ser conscientes que aún existen usuarios que disponen de un ancho de banda reducido y que por lo tanto pueden necesitar bastante segundos (o incluso minutos) en cargar nuestras páginas. Debido a lo anterior debemos analizar de manera responsable el mercado que queremos cautivar con nuestros sitios y de esta manera determinar que tatos recursos multimediales debemos utilizar en ellos.

El Formador Dice y el estudiante Hace: 2. Reglas para crear sitios web exitosos Los siguientes consejos fueron extraídos de la siguiente página Web http://techtastico.com/post/20-reglas-para-crear-sitios-web-exitosos/

Y

pretenden extender el conocimiento y experiencia de expertos en la construcción de Websites y los resultados obtenidos por ellos. Aunque para nuestro entorno la mayoría de los enlaces no son procedentes, se editaron o eliminaron para facilitar la comprensión del documento; la intención de este apartado es que el estudiante mediante su análisis crítico determine lo fundamental e importante para aplicar en sus desarrollos; además, que sirva de abrebocas, si en un futuro decide como camino laboral, dedicarse al desarrollo profesional de sitios Web. Tenga en cuenta que la preparación 11

INTRODUCCIÓN AL DESARROLLO DE SITIOS WEB

académica que está recibiendo es técnica más no profesional y que para llegar a estas instancias falta mucho camino que recorrer y mucho que aprender, más aun siguiendo estos consejos útiles es posible desarrollar Websites de calidad y con características técnicas adecuadas.

1.

Ten en consideración a tus visitantes: No intentes obligar a tus

visitas a leer el contenido de tus páginas web. Debes dejarles decidir qué es lo que quieren leer. Si tienes algo que decir, ya encontrarás a tus oyentes. Francamente, tú eres tan bueno como cualquier otro. ¿Cuál sería tu reacción en un sitio con docenas de pop-ups y un excesivo número de bloques publicitarios? Pues eso.

2.

Los malos anuncios son malvados. La publicidad molesta pueden

mejorar tus ingresos por un tiempo, pero a la larga no ayudarán para que tu sitio sea exitoso. La verdad es que tú no ganaras el respeto ni obtendrás el potencial que tú y tus proyectos deberían poseer. Sin embargo, los anuncios perfectamente combinados con el contenido principal y bien colocados en la estructura del sitio (por ejemplo devblog.de, Denny Carl de Devblog.de ha colocado su publicidad de Google Adsense en la columna de la derecha. No te percatas de ello en un primer vistazo y está correctamente ajustada a la estructura del sitio).

3.

Informa e instruye a tus visitas. Comparte tus pensamientos,

ideas, experiencia y conocimiento con todos aquellos que puedan necesitarlo o quizá puedan querer tu consejo. Dado que tú tienes información, tienes un instrumento poderoso para atraer la atención del público hacía tus trabajos, intereses y servicios. Además si compartes tu valioso conocimiento con otros usuarios serás respetado y tenido en consideración como una persona que sabe de qué está hablando.

4.

Desarrolla tu propio estilo. Crea tus propias ideas. Déjate inspirar

pero no copies. Es mucho más interesante de encontrar de qué eres capaz que no lo que otras personas pueden hacer. Explora tu imaginación y 12

INTRODUCCIÓN AL DESARROLLO DE SITIOS WEB

curiosidad. Las ideas frescas y nuevas o las antiguas pero mejoradas probablemente atraerán más a los usuarios que las copiadas.

5.

Respeta los estándares, piensa en la gente. Cuando tomas en

consideración los estándares de la web estarás ahorrándote un montón de trabajo en el futuro. No pasará mucho para que los estándares web se conviertan en un estándar en la web: y como tú creas páginas web para la gente, es razonable perder algún tiempo extra en comprobar el código para que respete los estándares – en el caso de que el código no los cumpla.

Una vez hecho, no deberás preocuparte de las nuevas versiones de navegadores. Básicamente por qué tú ya has hecho bien el trabajo.

Facilidad de lectura, accesibilidad y usabilidad. Respetando estos puntos, estás respetando a tus visitantes.

6.

Sé claro. Usa un lenguaje claro. No temas decir lo que quieres

decir. Ser ambiguo crea una distancia innecesaria entre tú y tu visitante. Sé preciso con lo que quieres discutir o presentar para empezar un dialogo activo con tus lectores. Además, si específicas de lo que estás hablando es más probable que recibas retroalimentación (feedback) o una respuesta al tema que propones.

7.

Cuida de tu contenido. Desarrolla páginas web, intenta hacerlas

informativas, y que tengan buena presencia. No te olvides que tus visitantes lo recuerdan todo. Si ofreces a un visitante un enlace a una página inadecuada sin la descripción apropiada de qué se esconde detrás de ese enlace, no volverás a verlo otra vez.

8.

No te preocupes por los web-crawlers y de la optimización SEO.

No pienses en palabras clave, es más importante qué puede ofrecer tu página. Afinar la posición en que apareces en los motores de búsqueda te llevará mucho más tiempo que escribir un artículo útil en tu bitácora.

Además si te consideras un experto en SEO tú debes saber qué debes optimizar tu página continuamente para obtener mejores resultados en los

13

INTRODUCCIÓN AL DESARROLLO DE SITIOS WEB

motores de búsqueda. Por otro lado, si publicas un artículo estará (ojalá) disponible mientras el sitio exista. Así, sólo debes escribirlo una vez.

9.

Evita métodos de SEO o de PR perjudiciales. Optimizar para los

motores de búsqueda incorrectamente (por ejemplo intercambiando enlaces con todos los sitios posibles, colocando tú enlace en granjas de enlaces, etc.) solo servirá para que tarde o temprano tu sitio sea expulsado de la mayoría de buscadores. Los algoritmos de los motores de búsqueda están siendo mejorados constantemente, por lo que al final tus esfuerzos no serán de ninguna utilidad si te arriesgas a encontrarte con un PageRank 0 en cualquier posible resultado en que te hayas disputado. Y aparte de esto, una vez que tu reputación sea baja, será extremadamente difícil de conseguir una buena posición en la cumbre de la comunidad del desarrollo web.

10.

Contacta pero no spamees. Deja que aquellos que puedan estar

interesados en tu contenido, sean conscientes de los mismos. Primero perfila tu clientela potencial. Entonces céntrate en aquellos que pueden estar interesados en tus servicios. Piensa acerca de los sitios que es probable que visiten. Contacta únicamente con los autores de estos sitios, ofreciéndoles una descripción de tus servicios. No obstante ten en cuenta que no estás escribiendo para un robot (web spider), pero sí a un humano qué puede decidir — o no — compartirte con sus lectores o — más apreciablemente — visitar tu sitio. Sé descriptivo, no envíes un enlace, en su lugar envía una invitación con la descripción apropiada de qué hace diferente tu sitio de proyectos similares. Asegúrate de que la persona a la que escribes es quien puede ser útil para los visitantes de tu(s) sitios. Pero una vez más: recuerda que lo que has creado no es para obtener tu dinero, es para la gente. No envíes spam, ni te anuncies, ofrece contenido útil.

11.

Escribe, publica, siéntete libre de preguntar. Ahí fuera siempre

abundan los desarrolladores de webs que estarán haciéndose la misma pregunta que estás haciéndote ahora mismo. No dudes en preguntar ni 14

INTRODUCCIÓN AL DESARROLLO DE SITIOS WEB

dudes en buscar su respuesta. Cuanto más inteligente sea la pregunta más posibilidades tienes de que sea contestada, de manera que más gente encontrará tu sitio a través de los buscadores.

12.

Contesta inmediatamente tu correspondencia. Establece lo más

rápido que puedes entrar en contacto con tus potenciales clientes, no permitas que un email descanse en tu carpeta entrante por más de 12 horas. No envíes respuestas automáticas. La persona que te ha escrito sabe que te ha escrito a ti. Por ello no malgastes el tiempo de otras personas de la misma manera que no te gusta malgastar el tuyo. En su lugar intenta crear una buena impresión a la persona que ha contactado contigo. Contesta seguro, de forma profesional, amigable y con un estilo de escritura abierto, no hagas promesas pero – de nuevo – siéntete libre de contestar.

13.

Crea conexiones. Los desarrolladores creativos siempre son

soportados por escaparates de CSS (‖CSS Showcases‖), galerías y bitácoras de otros desarrolladores de webs.

14.

Piensa en términos globales. El contenido de tus páginas web

puede no atraer al público de tú región, pero las barreras de la web son imprecisas y difíciles de ver (si es que existen después de todo), así que ¿por qué no enviar tu mensaje al mundo?, no existe la necesidad de buscar un nuevo nicho cercano a ti si tienes oportunidades ilimitadas alrededor de todo el mundo.

15.

Nunca comprometas tus principios. Discute la manera en que un

sitio debe ser presentado o desarrollado, respeta a tus clientes y su punto de vista. Pero mantén presente que realmente eres tú el que desarrolla el sitio. No hagas exactamente lo que te han pedido. Corrige los errores si te das cuenta que el cliente está equivocado. Sé profesional – al final tu objetivo al crear el sitio es para los usuarios, no para el cliente.

15

INTRODUCCIÓN AL DESARROLLO DE SITIOS WEB

16.

Permanece activo. Mantente informado acerca de qué está pasando

en la red. La web se desarrolla rápidamente y las nuevas ideas son compartidas al instante. La mejor manera de permanecer activo es – por supuesto – usando los canales RSS de las más populares bitácoras de desarrollo web. No obstante las revistas relacionadas al diseño gráfico y el desarrollo web son lecturas que merecen la pena.

17.

Aprende a dominar la creatividad. Buscar una nueva idea que

explotar, intentar buscar a través de foros de desarrollo web concentrando tu atención en que está buscando la gente.

18.

Crea tu web bonita. Usar CSS, ser claro, un diseño inteligente y

legible es bello. Así haces la vida más fácil a otros desarrolladores mostrando tu estilo y tu experiencia.

19.

Sé consciente del poder de la web. Tú estás creando la Web, por

lo tanto tienes algo que decir. Apoya los proyectos qué parecen importantes para ti y debe ser apoyados porque sus objetivos son algo por lo que vale la pena luchar.

El Estudiante Dice y Hace: 1. Después de leer y comprender las reglas enunciadas, el estudiante realizar un ensayo sobre el documento el cual no excederá las tres páginas, y en el expondrá o extraerá con sus propias palabras lo más importante a tener en cuenta al momento de diseñar y desarrollar una página Web.

2. El estudiante creara un glosario con las palabras y términos nuevos; por ejemplo:

a.

ley de Fitts: En ergonomía, la ley de Fitts es un modelo del

movimiento humano, que predice el tiempo necesario para moverse rápidamente desde una posición inicial hasta una zona destino final como una función de la distancia hasta el objetivo y el tamaño de éste. La ley de Fitts se usa para modelar el acto de apuntar, tanto en 16

INTRODUCCIÓN AL DESARROLLO DE SITIOS WEB

el mundo real, por ejemplo con una mano o dedo, como en los ordenadores, por ejemplo con un ratón. Fue publicada por Paul Fitts en 1954.

El estudiante encontrará en las lecturas una serie de palabras o frases subrayadas con doble línea que deberán adjuntar al glosario. Él estudiante consultara por medio de internet algunos parámetros para mantener cautivados a los visitantes o usuarios de nuestras páginas o sitios Web. Esta consulta se socializara con sus compañeros de clase en una actividad dirigida por el formador.

17