unidad uno

INSTITUTO COLOMBIANO DE APRENDIZAJE INCAP

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

INTRODUCCIÓN AL DESARROLLO DE SITIOS WEB

2

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

C O N T E N I D O 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:

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‖.


3

PRESENTACIÓN 5

GUÍA METODOLÓGICA 6

UNIDAD UNO

NORMAS Y PRINCIPIOS PARA EL DESARROLLO DE UNA PÁGINA WEB

8

Principios en el desarrollo de sitios web 9

Reglas para crear sitios web exitosos 11

UNIDAD DOS

LENGUAJE DE PROGRAMACIÓN HTML 18

Conceptos básicos del lenguaje de programación HTML. 19

Características generales del lenguaje 19

Estructura de un documento HTML 20

Comandos básicos de HTML 24

Enlaces 34

Imágenes 39

Tablas 40

Frames (Marcos)

49

Formularios 52

Publicar páginas en internet 60

UNIDAD TRES

VBSCRIPT Y JAVASCRIPT 62

Conceptos básicos 63

Datos y variables 67

Entrada y salida de datos 69

Condicionales 71

Ciclos repetitivos 73

Funciones y procedimientos 76

BIBLIOGRAFÍA 84

Apreciado estudiante:


4

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


5

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.

P R E S E N T A C I Ó N P R E S E N T A C I Ó N


6

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.

G U Í A M E T O D O L Ó G I C A


7

DIAGNÓSTICO

INFORMACIÓN GENERAL Regional_____________Programa__________________Módulo____________ Estudiante_________________________Formador_______________________ EVALUACIÓN DIAGNÓSTICA Estilo de aprendizaje_______________________________________________


8

Normas y principios para el desarrollo de una página Web

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 Evidencia de

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

Unidad Uno 1


9

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


10

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.


11

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

http://techtastico.com/post/20-reglas-para-crear-sitios-web-exitosos/


12

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

http://www.devblog.de/


13

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


14

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


15

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.


16

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

http://es.wikipedia.org/wiki/Ergonom%C3%ADa

http://es.wikipedia.org/wiki/Modelo


17

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.

http://es.wikipedia.org/wiki/Ordenador

http://es.wikipedia.org/wiki/Rat%C3%B3n_de_ordenador

http://es.wikipedia.org/w/index.php?title=Paul_Fitts&action=edit&redlink=1

http://es.wikipedia.org/wiki/1954

unidad uno

Documents