Download Unidad 2 - Paginas Prodigy

Apuntes del Módulo II, Submódulo III COLEGIO DE ESTUDIOS CIENTÍFICOS Y
TECNOLÓGICOS
DEL ESTADO DE SONORA
0
Cuaderno de Trabajo
Módulo II. Creación de productos multimedia a través de
software de diseño
Submódulo III. Elaboración de Páginas Web.
SONORA, SEPTIEMBRE 2010
M.I. BERTHA EVELIA TORRES TORRES Apuntes del Módulo II, Submódulo III 1
MANEJAR LOS ELEMENTOS BÁSICOS DE UN LENGUAJE UTILIZABLE EN
LA CREACIÓN DE PÁGINAS WEB (HTML, DHTML, ASP, JAVA SCRIPT, CSS)
2.1.
2.2.
2.3.
2.4.
2.5.
2.6.
2.7.
2.1.
Definir los contenidos de la página Web
Esquematizar la estructura general de una página Web
Utilizar etiquetas en una página Web
Establecer vínculos e hipervínculos
Manipular formularios en una página Web
Manipulación de tablas en una página Web
Manipular objetos en una página Web
Definir los contenidos de la página Web
2.1.1. Conceptos generales
a) Internet
Internet es una red global de equipos informáticos que se comunican mediante un
lenguaje común. Al conectarse a este sitio Web se ha conectado a Internet. Es
similar al sistema de teléfonos internacional: nadie posee ni controla todo el
conjunto, pero está conectado de forma que funcione
como una gran red. Hoy en día, entre treinta y cuarenta
millones de personas tienen acceso a Internet. Esto le
incluye a usted.
El Web permite saltar mediante un "hipervínculo" de una
página a otra. Imagine que el Web es una gran
biblioteca. Los sitios Web son los libros y las "páginas" de Web páginas concretas
de los libros. Las páginas pueden contener noticias, imágenes, películas, sonidos,
gráficos en tres dimensiones, casi cualquier cosa. Estas páginas pueden estar
situadas en sistemas en cualquier lugar del mundo. Al conectarse al Web, tiene
igual acceso a información en cualquier lugar del mundo; sin restricciones o costos
de larga distancia.
Las direcciones electrónicas son la forma de ubicar unívocamente a cada persona
y computadora en la Red. Son únicas: no puede haber dos iguales en el mundo,
porque los mensajes se perderían. Existen tres tipos: las de computadoras
(llamadas dominios), las de personas (casillas de E-mail) y las de recursos (por
M.I. BERTHA EVELIA TORRES TORRES Apuntes del Módulo II, Submódulo III ejemplo, una página de la Web). Su estructura se basa en partes fijas y partes
opcionales.
¿Cómo funcionan realmente?
Las direcciones electrónicas que se conocen y utilizan a diario han sido diseñadas
para el uso de los humanos: su formato intenta adecuarse al hecho de que es más
fácil recordar palabras que números. En realidad, cada computadora conectada a
Internet posee un número único llamado IP (Internet Protocol) que corresponde a
cada dirección electrónica humana. El número IP se compone de cuatro grupos de
números separados por puntos, donde cada uno puede tomar cualquier valor entre
0 y 255, por ejemplo 200.56.1.224.
La información que circula por Internet se basa en la dirección IP de cada
computadora de destino. Cuando una dirección electrónica ingresa en la máquina,
comienza a trabajar un DNS (Servidor de Dominio o Domain Name Server),
computadora especial que convierte o transforma los nombres de la dirección en
una dirección IP; o esta en una dirección electrónica, de modo que el mensaje
pueda ir y venir por la Red. Los proveedores de servicios en Internet o servidores
de páginas Web tienen sus propios servidores de Dominio, sin los cuales sería
imposible comunicarse adecuadamente con las personas y computadoras de
Internet.
Direcciones de Computadoras
Todo recurso de Internet está alojado en una computadora servidor (server o host)
que tiene asignada una o varias direcciones electrónicas. Cada computadora o
persona que se conecta a Internet tiene asignada una dirección electrónica única.
El nombre electrónico de un grupo de computadoras relacionadas (por ejemplo, de
todas las computadoras pertenecientes a una misma empresa, en Internet se
llama Dominio (Domain). Cuando se trata de una computadora, la estructura de
dirección se compone de cuatro partes, cada una de las cuales brinda distinto tipo
de información. Las partes están separadas por un punto (sin espacios
intermedios) y pueden estar presentes o no.
El esquema básico sería, Dominio=computadora.organización.tipo.país. Ejemplo:
www.arrakis.es
Tipo
Es una clasificación que existe para identificar la actividad de la organización. Los
tipos se clasifican en:
Clasificación
.com (en algunos países, .co)
.edu (en algunos países, .ac)
Significado
Ejemplo
Es una compañía u 9 Ford.com
organización comercial.
9 Bancomer.com
Es una institución de 9 mit.edu
M.I. BERTHA EVELIA TORRES TORRES 2
Apuntes del Módulo II, Submódulo III Clasificación
.gob (en algunos países .gov)
.mil
.net
.org
Significado
educación, universidades,
colegios,
institutos
o
centros de investigación.
Se trata de organizaciones
del gobierno.
Es una institución militar.
9
9
9
9
9
9
9
9
Se trata de algún nodo 9
administrativo
o
de 9
conexión de un proveedor
de servicios, o de alguna
entidad de servicios.
Se
utiliza
para 9
organizaciones que no 9
entren en ninguna de las 9
categorías anteriores, por 9
ejemplo organizaciones sin 9
fines de lucro.
9
Ejemplo
harvard.edu
cecytes.edu
Itson.edu
sonora.gob
presidencia.gob
armada.mil.co
defenselink.mil
army.mil
internic.net
Prodigy.net
Ife.org.mx
educar.org
vidahumana.org
cndh.org.mx
greenpeace.org
conevyt.org.mx
Existen otras nuevas jerarquías recientemente creadas y aún no implementadas:
.firm para empresas o corporaciones
.store para empresas que ofrecen negocios de venta online
.web para entidades que se dediquen a actividades relacionadas con la Web.
.arts
para instituciones que desarrollen actividades culturales o de
entretenimiento.
.rec Entidades que se dediquen a actividades relacionada con la recreación y los
juegos.
.info para entidades que brinden reportes o información.
.nom para personas físicas que deseen su propio dominio.
País
Identifica el país al cual pertenece el dominio. Esta parte de la dirección no
siempre está presente. Se ha creado una codificación normada de códigos de
países . Ejemplos: au Australia, ca Canadá, ie Irlanda , it Italia, jp Japón,
uk Reino Unido, co Colombia, etc.
Las Direcciones de Dominio
• Son únicas en el mundo, no puede haber dos iguales.
• Se escriben siempre en minúscula.
• Nunca llevan espacios entre palabras.
• Se componen de caracteres comunes: letras, números, guiones.
• Nunca debe usarse la ñ ni letras acentuadas, ni $, ni #, ni otro carácter de
ese tipo.
M.I. BERTHA EVELIA TORRES TORRES 3
Apuntes del Módulo II, Submódulo III •
•
•
Cada parte se separa por puntos.
No hay un máximo de caracteres de longitud.
Sin embargo, siempre se trata de hacerlas lo más cortas posibles.
b) WWW (WORLD WIDE WEB)
Lo que ha dado el punto de salida al extraordinario impulso de los accesos a
Internet ha sido la creación de un sistema que facilita y agiliza la localización y el
transporte de informaciones a través de la red. Esto ha sucedido a partir de 1990
con la creación de la World Wide Web a manos de Tim Berners-Lee del centro
europeo de investigación del CERN de Ginebra, en Suiza.
¿De qué se trata? Como dice su nombre es una tela de araña, grande como el
mundo, de informaciones conectadas entre sí. Este modo de utilizar la red ha
permitido crear algo similar a una única y gran biblioteca virtual. En esta biblioteca
los volúmenes contenidos se organizan de forma hipertextual y son reclamados en
el momento en el cual el usuario los solicita para consultar.
Físicamente las informaciones son depositadas en ordenadores esparcidos por el
mundo (los llamados sitios). La red funciona como sistema de transporte y lleva
las informaciones hacia quien las solicita. Una auténtica tela de araña de recursos
se vuelve así accesible a todos, aunque se encuentre a miles de kilómetros de
distancia del lugar donde están contenidos.
Está claro que se trata de un sistema muy simple de consultar, porque no necesita
el uso de ningún comando o menú en particular, sino que basta un clic del ratón.
No hay que hacer nada más que leer el texto reclamado, llamado página
hipertextual, y si se desea, seguir los enlaces hacia nuevas páginas.
Además, existe la posibilidad de importar de la red las noticias reclamadas,
conservándolas en nuestro ordenador o imprimiéndolas. Para los que tengan en
mente la lectura secuencial de un libro, página tras página, el poder saltar de un
vídeo a otro siguiendo caminos diferentes, representa una agradable sensación de
libertad. Se comprende bien entonces que cada usuario gracias a la Web pueda
crearse un itinerario personal en el interior de un océano de informaciones
esparcidas en todo el globo.
World Wide Web (el Web o WWW) proporciona una interfaz gráfica por la que es
fácil desplazarse para buscar documentos en Internet. Estos documentos, así
como los vínculos entre ellos, componen una red de información.
Funcionamiento de la www
En el mundo existen un cierto número de ordenadores, llamados servidores
WWW, en los cuales se graban las informaciones.
Cada servidor alberga un cierto número de páginas. La red Internet conecta los
servidores entre ellos y con los ordenadores de los usuarios que se llaman cliente.
M.I. BERTHA EVELIA TORRES TORRES 4
Apuntes del Módulo II, Submódulo III Para visualizar una determinada página, el usuario debe pedirle una copia al
servidor que la alberga. Esto se hace de modo transparente con un programa
adecuado, llamado navegador, instalado en su ordenador.
La red hace pues de canal de comunicación entre servidor y cliente, y por este
motivo se la llama autopista de la información.
5
Las informaciones que transitan en la red son fragmentadas a la salida en
pequeñas unidades llamadas paquetes, que se recomponen automáticamente a
su llegada.
En realidad, la red no es una autopista lineal y rectilínea, sino que conoce
obstáculos de diversos tipos. Pueden verificarse, por ejemplo, ralentizaciones
debidas a un excesivo tráfico, o se pueden encontrar trayectos interrumpidos.
Algunos vehículos (paquetes) son más pequeños y veloces, otros más lentos, pero
capaces de llevar mayor cantidad de noticias. Las prestaciones ofrecidas por la
red, pues, pueden variar enormemente.
Un aspecto interesante del mundo WWW es que la mayor parte de las
informaciones actualmente disponibles son accesibles gratuitamente. Para utilizar
un eslogan: es como tener el mundo en casa.
En los últimos tiempos, no obstante, una serie de informaciones, ligadas al mundo
científico y técnico, están accesibles sólo tras una forma cualquiera de pago. Por
ejemplo, para consultar algunas bases de datos, es necesario obtener de los
gestores del servicio la autorización, bajo forma de contraseña. De todos modos,
esto sólo atañe a un número limitado de servicios online.
c) Correo electrónico
El correo electrónico es el intercambio de mensajes almacenados en computadora
por medio de las telecomunicaciones, es decir dos personas que tenga acceso a
una cuenta de correo puede enviarse cartas. Sin embargo, se pueden también
enviar archivos en otros formatos. El correo electrónico representa una de las
primeras aplicaciones del Internet y sigue siendo la de mayor uso.
El correo electrónico (“E-Mail” o “Electronic Mail” en inglés) es el segundo servicio
más usado de la Red Internet (el primero es la navegación por la World Wide
Web). Dos personas que tengan acceso a una cuenta de correo en Internet puede
enviarse mensajes escritos desde cualquier parte del mundo a una gran velocidad.
Lo normal es que un mensaje tarde entre unos pocos segundos o minutos,
dependiendo de la cantidad de texto que se envíe.
El Correo Electrónico nos permite enviar cartas escritas con el ordenador a otras
personas que tengan acceso a la Red. Las cartas quedan acumuladas en Internet
hasta el momento en que se piden. Es entonces cuando son enviadas al
ordenador del destinatario para que pueda leerlas. El correo electrónico es casi
M.I. BERTHA EVELIA TORRES TORRES Apuntes del Módulo II, Submódulo III instantáneo, a diferencia del correo normal, y además muy barato. Podemos
cartearnos con cualquier persona del Mundo que disponga de conexión a Internet.
Algunas ventajas sobre el uso del correo tradicional como son:
• Su costo es bajo, si se desea enviar mensajes a otro país.
• Un mismo mensaje se puede enviar a varios destinatarios al mismo tiempo.
• Es posible adjuntar al mensaje diversos tipos de archivos.
• El texto de un mensaje puede ser copiado para editarse o imprimirse.
• Los mensajes son enviados y recibidos casi al mismo tiempo.
Algunas páginas que nos permiten construir correo electrónico son:
Hotmail
www.hotmail.com
Yahoo
www.yahoo.com.mx
Mixmail
www.mixmail.com
Latinmail
www.latinmail.com
Gmail
www.gmail.com
d) Navegadores
La navegación en la Web es posible gracias a los navegadores. En el curso de
los años se han fabricado diversos tipos de navegadores
cada vez más potentes y fáciles de usar. Dada la naturaleza
no comercial de los años iniciales de la red, los primeros
instrumentos de navegación se desarrollaron en el interior de
las universidades y de los centros de investigación y se
pusieron a disposición gratuita de todos los usuarios.
En esta primera fase de desarrollo se puso mayor énfasis en
la posible utilización de ordenadores de distintos tipos con
requisitos mínimos: las interfaces, por ejemplo, eran
puramente textuales.
Al difundirse las interfaces gráficas se desarrolló Mosaic, uno de los navegadores
más utilizados en el pasado reciente, convertido en el antecesor de los
navegadores actuales.
La abertura de la red a los servicios comerciales y el descubrimiento de la Web
como vehículo de publicación de informaciones a bajo coste ha creado una serie
de exigencias: por un lado, es importante presentar las páginas de modo
gráficamente adecuado, enriquecido con elementos multimedia, como sonidos y
filmaciones; por otro lado, para simplificar el uso de la red por parte de los
inexpertos, se han integrado funcionalidades diferentes de acceso a Internet,
como el correo electrónico y la transferencia de archivos.
M.I. BERTHA EVELIA TORRES TORRES 6
Apuntes del Módulo II, Submódulo III Los navegadores mayormente utilizados hoy en día son Netscape Communicator,
Microsoft Internet Explorer y Mozilla.
e) Buscadores
La cantidad de páginas electrónicas es enorme y encontrar
alguna sobre un tema determinado, si no se conoce la
dirección o URL, puede ser muy difícil. Para encontrar
direcciones con temas específicos se emplean los
buscadores.
Los buscadores permiten rastrear en la Web las páginas que contengan la
información deseada. Los buscadores de Internet, también denominados motores
de búsqueda (Search Engines). Se trata de sitios especiales mediante las cuales
puede rastrear en la Web las páginas que contengan la información deseada.
Presentamos a continuación una lista de los buscadores más populares:
AltaVista
http://www.altavista.com
Yahoo!
http://www.yahoo.com.mx
Lycos
http://www.lycos.com
Infoseek
http://infoseek.go.com
Google
http://google.com
Excite
http://www.excite.com
Open Text
http://www.opentext.com
Planet Search
http://www.planetsearch.com
f) Servidor Web
Es un programa que implementa el protocolo HTTP (hypertext transfer protocol).
Este protocolo está diseñado para transferir lo que llamamos hipertextos, páginas
Web o páginas HTML (hypertext markup language): textos complejos con enlaces,
figuras, formularios, botones y objetos incrustados como animaciones o
reproductores de sonidos.
Sin embargo, el hecho de que HTTP y HTML estén
íntimamente ligados no debe dar lugar a confundir ambos
términos. HTML es un formato de archivo y HTTP es un
protocolo.
Cabe destacar el hecho de que la palabra servidor
identifica tanto al programa como a la máquina en la que
dicho programa se ejecuta. Existe, por tanto, cierta
M.I. BERTHA EVELIA TORRES TORRES 7
Apuntes del Módulo II, Submódulo III ambigüedad en el término, aunque no será difícil diferenciar a cuál de los dos nos
referimos en cada caso.
Un servidor Web se encarga de mantenerse a la espera de peticiones HTTP
llevada a cabo por un cliente HTTP que solemos conocer como navegador. El
navegador realiza una petición al servidor y éste le responde con el contenido que
el cliente solicita. A modo de ejemplo, al teclear www.wikipedia.org en nuestro
navegador, éste realiza una petición HTTP al servidor de dicha dirección. El
servidor responde al cliente enviando el código HTML de la página; el cliente, una
vez recibido el código, lo interpreta y lo muestra en pantalla. Como vemos con
este ejemplo, el cliente es el encargado de interpretar el código HTML, es decir, de
mostrar las fuentes, los colores y la disposición de los textos y objetos de la
página; el servidor tan sólo se limita a transferir el código de la página sin llevar a
cabo ninguna interpretación de la misma.
Sobre el servicio Web clásico podemos disponer de aplicaciones Web. Éstas son
fragmentos de código que se ejecutan cuando se realizan ciertas peticiones o
respuestas HTTP. Hay que distinguir entre:
•
•
•
Aplicaciones en el lado del cliente: el cliente Web es el encargado de
ejecutarlas en la máquina del usuario. Son las aplicaciones tipo Java o
Javascript: el servidor proporciona el código de las aplicaciones al cliente y
éste, mediante el navegador, las ejecuta. Es necesario, por tanto, que el
cliente disponga de un navegador con capacidad para ejecutar aplicaciones
(también llamadas scripts). Normalmente, los navegadores permiten
ejecutar aplicaciones escritas en lenguaje javascript y java, aunque pueden
añadirse mas lenguajes mediante el uso de plugins
Aplicaciones en el lado del servidor: el servidor Web ejecuta la aplicación;
ésta, una vez ejecutada, genera cierto código HTML; el servidor toma este
código recién creado y lo envía al cliente por medio del protocolo HTTP.
Las aplicaciones de servidor suelen ser la opción por la que se opta en la
mayoría de las ocasiones para realizar aplicaciones Web. La razón es que,
al ejecutarse ésta en el servidor y no en la máquina del cliente, éste no
necesita ninguna capacidad adicional, como sí ocurre en el caso de querer
ejecutar aplicaciones javascript o java. Así pues, cualquier cliente dotado de
un navegador Web básico puede utilizar este tipo de aplicaciones.
Algunos servidores Web importantes son:
• Apache
• IIS
• Cherokee
Otros servidores, más simples pero más rápidos, son:
• lighttpd
• thttpd
M.I. BERTHA EVELIA TORRES TORRES 8
Apuntes del Módulo II, Submódulo III g) Página Web
Una página de Internet o página Web es un documento electrónico que contiene
información específica de un tema en particular y que es almacenado en algún
sistema de cómputo que se encuentre conectado a la red mundial de información
denominada Internet, de tal forma que este documento pueda ser consultado por
cualesquier persona que se conecte a esta red mundial de comunicaciones y que
cuente con los permisos apropiados para hacerlo. Una página Web es la unidad
básica del World Wide Web.
Una página Web tiene la característica peculiar de que el texto se combina con
imágenes para hacer que el documento sea dinámico y permita que se puedan
ejecutar diferentes acciones, una tras otra, a través de la selección de texto
remarcado o de las imágenes, acción que nos puede conducir a otra sección
dentro del documento, abrir otra página Web, iniciar un mensaje de correo
electrónico o transportarnos a otro Sitio Web totalmente distinto a través de sus
hipervínculos.
Estos documentos pueden ser elaborados por los gobiernos, instituciones
educativas, instituciones públicas o privadas, empresas o cualquier otro tipo de
asociación, y por las propias personas en lo individual.
h) Sitios Web
Es un conjunto de archivos electrónicos y páginas Web referentes a un tema en
particular, que incluye una página inicial de bienvenida, generalmente denominada
home page, con un nombre de dominio y dirección en Internet específicos.
Un sitio Web (en inglés: Website) es un conjunto de páginas Web, típicamente
comunes a un dominio de Internet o subdominio en la World Wide Web en
Internet. Todos los sitios Web públicamente accesibles constituyen una gigantesca
"World Wide Web" de información.
A las páginas de un sitio Web se accede desde un URL raíz común llamado
portada, que normalmente reside en el mismo servidor físico. Los URL organizan
las páginas en una jerarquía, aunque los hiperenlaces entre ellas controlan cómo
el lector percibe la estructura general y cómo el tráfico Web fluye entre las
diferentes partes de los sitios.
Algunos sitios Web requieren una subscripción para acceder a algunos o todos
sus contenidos. Ejemplos de sitios con subscripción incluyen muchos sitios de
pornografía en Internet, parte de muchos sitios de noticias, sitios de juegos, foros,
M.I. BERTHA EVELIA TORRES TORRES 9
Apuntes del Módulo II, Submódulo III servicios de correo electrónico basados en Web y sitios que proporcionan datos de
bolsa en tiempo real.
Tipos de sitios Web
Existen muchas variedades de sitios Web, cada uno especializándose en un tipo
particular de contenido o uso, y puede ser arbitrariamente clasificados de muchas
maneras. Unas pocas clasificaciones pueden incluir:
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Sitio archivo: usado para preservar contenido electrónico valioso
amenazado con extinción. Un ejemplo es: Internet Archive, el cual desde
1996 ha preservado billones de antiguas (y nuevas) páginas Web.
Sitio weblog (o blog): sitio usado para registrar lecturas online o para
exponer diarios en línea; puede incluir foros de discusión. Ejemplos:
Blogger, Xanga. LiveJournal, WordPress, www.x0101.com.
Sitio de empresa: usado para promocionar una empresa o servicio.
Sitio de comercio electrónico: para comprar bienes, como Amazon.com.
Sitio de comunidad virtual: un sitio donde las personas con intereses
similares se comunican con otros, normalmente por chat o foros. Por
ejemplo: MySpace, Facebook, Hi5, Multiply, Orkut.
Sitio de Base de datos: un sitio donde el uso principal es la búsqueda y
muestra de un contenido específica de la base de datos como la Internet
Movie Database.
Sitio de desarrollo: un sitio el propósito del cual es proporcionar información
y recursos relacionados con el desarrollo de software, diseño Web, etc.
Sitio directorio: un sitio que contiene contenidos variados que están
divididos en categorías y subcategorías, como el directorio de Yahoo!, el
directorio de Google y el Open Directory Project.
Sitio de descargas: estrictamente usado para descargar contenido
electrónico, como software, demos de juegos o fondos de escritorio:
Download, Tucows, Softonic, Baulsoft.
Sitio de noticias: Similar a un sitio de información, pero dedicada a mostrar
noticias y comentarios.
Sitio buscador: un sitio que proporciona información general y está pensado
como entrada o búsqueda para otros sitios. Un ejemplo puro es Google, y el
tipo de buscador más conocido es Yahoo!.
Sitio de subastas: subastas de artículos por internet, como eBay.
Sitio portal: un sitio Web que proporciona un punto de inicio, entrada o
portal a otros recursos en Internet o una intranet.
Sitios Educativos promueven cursos presenciales y a distancia, información
a profesores y estudiantes, permiten ver o descargar contenidos de
asignaturas o temas.
Diferencia entre sitio Web y página Web
M.I. BERTHA EVELIA TORRES TORRES 10
Apuntes del Módulo II, Submódulo III A veces se utiliza erróneamente el término página Web para referirse a sitio Web.
Una página Web es parte de un sitio Web y es un único archivo con un nombre de
archivo asignado, mientras que un sitio Web es un conjunto de archivos llamados
páginas Web.
11
M.I. BERTHA EVELIA TORRES TORRES Apuntes del Módulo II, Submódulo III 2.1.2. Definir objetivos de la página Web
Es importante analizar las principales motivaciones que tenemos para crear una
página Web y sobretodo las estrategias que debemos llevar a cabo para hacerlas
rentables.
12
Al iniciar una pagina Web, debemos tener muy clara la estrategia que vamos a
seguir y el ¿por qué? y ¿para que? queremos tener esa Web.
Los objetivos de una página Web son:
El primer objetivo es que la navegación sea rápida y sencilla. Es decir, que la
página que tarde más de 5 segundos en cargar pierde solo por este capítulo
entre un 20 y un 30% de los visitantes. Rápida también se refiere a que es
necesario eliminar esas odiosas páginas iniciales de presentación que tardan
una eternidad en cargar y que solo sirven para lucimiento del diseñador y
alejamiento del negocio, o esas otras de selección de idioma. Que sea sencilla
significa que los menús deben estar bien visibles en la parte izquierda o
superior de la página, lugares a los que se dirige la vista por defecto. La
información no debe estar a más de tres clicks de ratón desde la página
principal y la presentación de la misma debe ser lo más amplia posible.
El segundo objetivo de una Web debe ser que te localicen o encuentren
fácilmente. De nada sirve tener un sitio maravilloso si los usuarios no llegan a
él. Por mucho que se indique http://miempresa.com en las facturas, tarjetas de
visita y la publicidad pocas personas teclearán el nombre de la empresa o el de
la Web directamente en la barra de direcciones del navegador. Muchas de
ellas usarán el buscador preferido (Google, Yahoo, MSN) para localizarla o
llegarán a ella a través de un link publicado en otra Web en la que se hable de
la empresa.
El tercer objetivo y el más difícil de lograr es crear una comunidad dinámica en
torno a la Web. Convertir la Web en un punto de encuentro, hacerla
participativa y usar herramientas tan sencillas como los boletines para
mantener a los usuarios/clientes informados de novedades de interés. Muchas
webs no llegarán a este punto, pero que sepan que si ocupan su esfuerzo en
lograrlo su presencia en Internet será dinámica y no estática y generará
muchas y nuevas oportunidades de negocio, convirtiéndose en un canal de
venta más.
M.I. BERTHA EVELIA TORRES TORRES Apuntes del Módulo II, Submódulo III 2.1.3. Definición de contenidos para la página Web
Cuerpo de Página: El contenido de una página Web, constituida por
encabezados, texto y vínculos conforman el cuerpo de la página. Cada uno de
estos 3 elementos influyen sobre la posición que se alcanza en los motores de
búsqueda. Primero se redacta el texto, dividido en tres y hasta seis secciones,
encabezadas con subtítulo, cuyas oraciones y párrafos ilustran diferentes
aspectos que atañen al tema principal.
Extensión de Texto en Página Web: En condiciones ideales y en términos
generales una buena página Web incluye 420 vocablos entre los cuales las
palabras y frases claves (keywords), ocupan un tres por ciento del total del
número de palabras incluyendo las que aparecen en los encabezados,
vínculos, etiquetas de imagen y etiquetas de vínculos.
Densidad de un Genérico y Frase Clave: En una página de 420 vocablos, las
palabras (genéricos) y frases clave aparecerán un máximo de 12 veces. Si en
el texto existe una frase o palabra con mayor presencia que ellas, se hace
necesario disminuir el número de veces que aparece. Continuamente sucede
que la frase que uno desea destacar no es la de mayor densidad.
Peso del Contenido: Algunos expertos sostienen que si el contenido de la
página Web es de poca extensión será indexada con facilidad y en buena
posición. Sin embargo, con el correr del tiempo, estas páginas resultan
vulnerables a perder su posición, ya que pueden ser reemplazadas por otras
que presentan mayor claridad en la ilustración del tema.
Página valiosa: Debe de exhibir texto inédito y es consecuente con el propósito
de enriquecer el conocimiento del lector. Por esta razón se recomienda evitar
aseveraciones propias del juicio ajeno, que en forma unilateral expresan cosas
difíciles de comprobar. La consistencia de un texto se manifiesta mediante la
claridad con que su lenguaje escueto es capaz de verbalizar conceptos, ideas
o sentimientos. La buena sintaxis y semántica son impulso básico para que
una página se ubique entre las top 10.
Fuerza del Texto Principal: Es relevante cuando se quiere alcanzar posiciones
convenientes en buscadores, desarrollar el tema principal y darle fuerza al
texto utilizando una síntesis amigable estilo Web semántico.
La meta es darse a entender con claridad: Para ello, el texto subyacente a
cada subtítulo debe desarrollar en forma directa el tema que ese subtítulo
postula y que, a su vez, se relaciona con el tema central de la página.
M.I. BERTHA EVELIA TORRES TORRES 13
Apuntes del Módulo II, Submódulo III 2.1.4. Lenguajes utilizables en la creación de página Web
El servicio de diseño de páginas Web, es de acuerdo a las necesidades y gustos
de los clientes, ya que se brindan propuestas con las tendencias que el sitio Web
pudiera adoptar, los clientes deciden como quiere que sea su página Web,
tomando en cuenta la forma mas idónea y efectiva de presentar su empresa y sus
productos en la red de Internet para una mayor penetración en el mercado.
Existen diferentes tecnologías involucradas en desarrollo de páginas Web, en los
distintos niveles de la estructura de la aplicación. Un punto importante son los
lenguajes de programación que se utilizarán en las paginas Web, ya que de estos
lenguajes se deriva el desempeño, rapidez y lógica que las paginas Web tendrán
en la ejecución.
¿Cual es el mejor lenguaje de programación Web?, en realidad no se puede hacer
una comparación de que lenguaje de programación es el mejor, lo que si se puede
decir, es que haciendo una integración adecuada de diferentes lenguajes, se
puede crear una página o aplicación Web de excelente calidad y con buenas
características.
a) HTML
HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite
describir hipertexto, es decir, texto presentado de forma estructurada y agradable,
con enlaces (hyperlinks) que conducen a otros documentos o fuentes de
información relacionadas, y con inserciones multimedia (gráficos, sonido, etc.) La
descripción se basa en especificar en el texto la estructura lógica del contenido
(títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc) así como
los diferentes efectos que se quieren dar (especificar los lugares del documento
donde se debe poner cursiva, negrita, o un gráfico determinado) y dejar que luego
la presentación final de dicho hipertexto se realice por un programa especializado
(como Mosaic, Netscape, Internet Explorer, etc.).
b) DHTML
HTML Dinámico es cualquier página Web en la que los scripts en el lado del
cliente cambian el HTML del documento, después de que éste haya cargado
completamente, lo cual afecta a la apariencia y las funciones de los objetos de la
página.
DHTML no es precisamente un lenguaje de programación. Más bien se trata de
una nueva capacidad de la que disponen los navegadores modernos, por la cual
se puede tener un mayor control sobre la página que antes.
Cualquier página que responde a las actividades del usuario y realiza efectos y
funcionalidades se puede englobar dentro del DHTML, pero en este caso nos
referimos más a efectos en el navegador por los cuales se pueden mostrar y
M.I. BERTHA EVELIA TORRES TORRES 14
Apuntes del Módulo II, Submódulo III ocultar elementos de la página, se puede modificar su posición, dimensiones,
color, etc.
DHTML nos da más control sobre la página, gracias a que los navegadores
modernos incluyen una nueva estructura para visualizar en páginas Web
denominada capa. Las capas se pueden ocultar, mostrar, desplazar, etc.
c) ASP
Active Server Pages (ASP) es un lenguaje que se ejecuta del lado servidor de
Microsoft para el desarrollo de páginas Web generadas dinámicamente, se ha
comercializado como un anexo a Internet Information Services (IIS)
Descripción: La tecnología ASP está estrechamente relacionada con el modelo
tecnológico de su fabricante. Intenta ser solución para un modelo de programación
rápida ya que programar en ASP es como programar en Visual Basic, por
supuesto con muchas limitaciones.
Se facilita la programación de sitios Web mediante varios objetos integrados,
como por ejemplo un objeto de sesión basada en cookies, que mantiene las
variables mientras se pasa de página a página.
d) JAVA SCRIPT
JavaScript es un lenguaje de programación interpretado, es decir, que no requiere
compilación, utilizado principalmente en páginas Web, con una sintaxis semejante
a la del lenguaje Java y el lenguaje C.
Al igual que Java, JavaScript es un lenguaje orientado a objetos propiamente
dicho, ya que dispone de Herencia, si bien ésta se realiza siguiendo el paradigma
de programación basada en prototipos, ya que las nuevas clases se generan
clonando las clases base (prototipos) y extendiendo su funcionalidad.
Todos los navegadores modernos interpretan el código JavaScript integrado
dentro de las páginas Web.
El lenguaje fue inventado por Brendan Eich en la empresa Netscape
Communications, que es la que desarrolló los primeros navegadores Web
comerciales.
Tradicionalmente, se venía utilizando en páginas Web HTML, para realizar tareas
y operaciones en el marco de la aplicación únicamente cliente, sin acceso a
funciones del servidor. JavaScript se ejecuta en el agente de usuario al mismo
tiempo que las sentencias van descargándose junto con el código HTML.
M.I. BERTHA EVELIA TORRES TORRES 15
Apuntes del Módulo II, Submódulo III e) CSS
Las hojas de Estilo en cascada (Cascading Style Sheets), CSS es un lenguaje
usado para definir la presentación de un documento estructurado escrito en HTML
o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el
encargado de formular la especificación de las hojas de estilo que servirán de
estándar para los agentes de usuario o navegadores.
La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de
un documento de su presentación.
La información de estilo puede ser adjuntada tanto como un documento separado
o en el mismo documento HTML. En este último caso podrían definirse estilos
generales en la cabecera del documento o en cada etiqueta particular mediante el
atributo "style".
Páginas estáticas y dinámicas
Las páginas estáticas, se construyen con el lenguaje HTML, que no permite
grandes florituras para crear efectos ni funcionalidades más allá de los enlaces.
Estas páginas son muy sencillas de crear, aunque ofrecen pocas ventajas tanto a
los desarrolladores como a los visitantes, ya que sólo se pueden presentar textos
planos acompañados de imágenes y a lo sumo contenidos multimedia como
pueden ser videos o sonidos.
Las páginas dinámicas es cuando se incluye cualquier efecto especial o
funcionalidad y para ello es necesario utilizar otros lenguajes de programación,
aparte del simple HTML.
Mientras que las páginas estáticas todo el mundo se las puede imaginar y no
merecen más explicaciones, las páginas dinámicas son más complejas y
versátiles.
2.2.
Esquematizar la estructura general de una página Web
El diseño de una página o sitio Web se puede construir de varias formas, algunas
veces es por medio de lenguajes o software. Algunos de los lenguajes a utilizar se
encuentran el HTML, DHTML, ASP, JAVA SCRIPT, CSS, etc. En el caso de los
softwares se tienen el FrontPage, Dreamweaver, etc.
2.2.1. Plantillas para diseñar páginas Web
Las plantillas Web son páginas Web funcionales es decir Web pre-fabricadas que
incluye todo el código e imágenes ya listos, que pueden ser personalizadas a
gusto del usuario para adaptarlas a sus necesidades:
M.I. BERTHA EVELIA TORRES TORRES 16
Apuntes del Módulo II, Submódulo III •
•
•
•
•
Añadiendo textos e información
Modificando los colores
Sustituyendo o añadiendo imágenes
Adaptando el logotipo
Agregando enlaces
Para editar las plantillas Web puede usar cualquier programa editor: desde el
notepad hasta Dreamweaver, GoLive, etc.
Las plantillas Web se entregan en formato zip e incluyen todo el HTML y los
archivos fuentes originales. La mayoría de ellas contienen llamativos efectos que
llevan en los enlaces. Se pueden añadir efectos a medida.
Las plantillas Web son el punto de partida ideal para diseñar sitios webs complejos
sin invertir grandes cantidades de dinero y tiempo.
Las plantillas Web son usadas para: crear webs personales o sitios corporativos,
añadir plantillas genéricas a software de código abierto (mambo, oscommerce,
php-nuke, foros phpbb, etc.) o presentaciones de eventos que necesitan de un
diseño ya construido, listo para añadir el contenido de su página Web.
Los pasos para crear una página o sitio Web a partir de plantillas:
1.
2.
3.
4.
5.
Eligir un diseño de un catálogo
Rellenar el formulario para adquirir la plantilla
Descargar al instante la plantilla adquirida
Editar las páginas de la plantilla Web con tu editor HTML preferido
Subir la Web modificada por el usuario a un servidor
2.2.2. Estructura general de una página Web
El HTML es un lenguaje que permite describir hipertexto, es decir, texto
presentado de forma estructurada y agradable, con enlaces (hyperlinks) que
conducen a otros documentos o fuentes de información relacionadas, y con
inserciones multimedia (gráficos, sonido, etc.).
¿Con qué programa puedo escribir código en HTML?.
Con cualquier editor de texto. Cuanto más sencillo mejor. Valen el Editor del DOS,
el bloc de notas de WIN, o el Notepad de WIN95, solamente que se tiene que
grabar con la extensión HTML.
M.I. BERTHA EVELIA TORRES TORRES 17
Apuntes del Módulo II, Submódulo III La estructura es:
La descripción se basa en especificar en el texto la estructura lógica del contenido
(títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc.) así
como los diferentes efectos que se quieren dar (especificar los lugares del
documento donde se debe poner cursiva, negrita, o un grafico determinado). Los
códigos de formato que se incorporan al texto son posteriormente interpretados
por un programa especializado, que se conoce como navegador. Entre los
programas navegadores destacan como más conocidos, Internet Explorer o
Netscape y entre otros.
Un fichero HTML es un fichero de texto con extensión HTM o HTML. En el, se
incluye la información que queremos presentar, pero debemos respetar una
estructura interna que interpretara nuestro navegador.
Un documento HTML, siempre comienza con la etiqueta <html>, y siempre termina
con </html>.
Dentro del documento (entre las etiquetas de principio y fin de html), hay dos
zonas bien diferenciadas: el encabezamiento y el cuerpo.
9
El encabezamiento, viene delimitado por las etiquetas <head>y </head>, que
sirve para definir diversos valores validos en todo el documento.
9 El cuerpo, viene delimitado por <body> y </body>, y en él reside la información
del documento.
La única utilidad del encabezamiento en la que nos detendremos es la directiva
<title>, que permite especificar el título de un documento HTML. Este título no
forma parte del documento en sí, no aparece, por ejemplo, al principio del
documento una vez que este se presenta con un programa adecuado, sino que
suele servir como título de la ventana del programa que nos la muestra.
El lenguaje consta de etiquetas que tienen esta forma <B> o <P>. Cada etiqueta
significa una cosa, por ejemplo <B> significa que se escriba en negrita (bold) o
<P> significa un párrafo, <A> es un enlace, etc. Casi todas las etiquetas tienen su
correspondiente etiqueta de cierre, que indica que a partir de ese punto no debe
de afectar la etiqueta. Por ejemplo </B> se utiliza para indicar que se deje de
escribir en negrita. Así que el HTML no es más que una serie de etiquetas que se
utilizan para definir la forma o estilo que queremos aplicar a nuestro documento.
El cuerpo de un documento HTML contiene el texto que, con la presentación y los
efectos que se decidan, se presentará ante el hiperlector. Dentro del cuerpo son
aplicables todos los efectos que se van a mencionar en el resto de esta guía.
Dichos efectos se especifican exclusivamente a través de directivas. Esto quiere
decir que los espacios, tabulaciones y retornos de carro que se introduzcan en el
M.I. BERTHA EVELIA TORRES TORRES 18
Apuntes del Módulo II, Submódulo III fichero fuente no tienen ningún efecto a la hora de la presentación final del
documento.
En resumen, la estructura básica de un documento HTML queda de la forma
siguiente:
19
<html>
<title>Título</title>
<head>
</head>
<body>
Texto del documento, gráficos, enlaces, etc.
</body>
</html>
2.3.
Inicio de página
Título de un documento HTML
Cabecera
Final de cabecera
Cuerpo de página
Final del cuerpo de página
Final de página
Utilizar etiquetas en una página Web
El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de
texto destacado de una forma especial que permiten la definición de las distintas
instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas
estructuras del lenguaje. A estas marcas las denominaremos etiquetas y serán la
base principal del lenguaje HTML. En documento HTML será un fichero de texto
con etiquetas que variarán la forma de su presentación.
Una etiqueta será un texto incluido entre los símbolos menor que “<” y mayor
que “>”. El texto incluido dentro de los símbolos será explicativo de la utilidad de
la etiqueta.
Algunos códigos utilizados son:
<HTML> </HTML>
Identifica el contenido del documento con el
código Hyper Text Markup Language
<TITLE> </TITLE>
Contiene el título de la página, la cual se
observa en la barra de título.
Alberga información de cabecera del
documento.
Establece el alcance del cuerpo del
documento.
Coloca en el centro de la página (alineación
horizontal).
Incluye el color del fondo de la página web.
Visualiza el texto como cabecera con tamaños
crecientes y saltos de línea.
Especifica un elemento de una lista (tipo
viñeta).
<HEAD> </HEAD>
<BODY> </BODY>
<CENTER> </CENTER>
<BODY BGCOLOR=COLOR>
<HN> <H1> <H2> </H1> </H2>
<LI> </LI>
M.I. BERTHA EVELIA TORRES TORRES Apuntes del Módulo II, Submódulo III <P> </P>
<BR> </BR>
<FONT COLOR=COLOR>
<B> </B>
<I> </I>
<U> </U>
<HR> <SIZE=n WIDTH=m> </HR>
Definición de un párrafo.
Inserta un salto de línea.
Incluye el color de la letra.
Pone en negrita el texto.
Pone en cursiva o itálica el texto.
Visualiza el texto subrayado.
Dibuja una línea horizontal con grosor n y
ancho (largo) m
Coloca el párrafo con una alineación
justificada.
</P Coloca el párrafo con una alineación hacia la
izquierda.
Coloca el párrafo con una alineación hacia la
derecha.
<P ALIGN=JUSTIFY>
</P ALIGN=JUSTIFY>
<P
ALIGN=LEFT>
ALIGN=LEFT>
<P ALIGN=RIGHT>
</P ALIGN=RIGHT>
2.4.
Establecer vínculos e hipervínculos
Una de las principales características del HTML, es la posibilidad de enlazar con
documentos que pueden estar en cualquier punto de la red. Esto se realiza a
través de los hiperenlaces.
2.4.1. Definición
Un hipervínculo (también llamado enlace, vínculo, o hiperenlace) es un
elemento de un documento electrónico que hace referencia a otro recurso, por
ejemplo, otro documento o un punto específico del mismo o de otro documento.
Combinado con una red de datos y un protocolo de acceso, un hiperenlace
permite acceder al recurso referenciado en diferentes formas, como visitarlo con
un agente de navegación, mostrarlo como parte del documento referenciador o
guardarlo localmente.
2.4.2. Tipos de hipervínculos
Hay varios tipos de enlaces los cuales son: Página a página, Página a documento,
Dentro de la misma página y a correo electrónico.
Enlace de página a página:
La etiqueta que se usa para designar un hiperenlace es:
<a href="dirección"> texto </a>
<A HREF=”URL”>
</A>
En ella se escribe, entre comillas, la dirección de la página con la que queremos
enlazar y, entre las etiquetas, el texto sobre el que se da clic para acceder al
M.I. BERTHA EVELIA TORRES TORRES 20
Apuntes del Módulo II, Submódulo III enlace. Este texto aparecerá con un color especial, que podremos definir nosotros,
y subrayado.
Ejemplo:
<a href="http://www.altavista.com/">Conceptos</a></p>
21
Enlace de página a documento:
La etiqueta que se utiliza para realizar en hiperenlace es:
<a href="nombre.extensión">texto</a>
Se emplea para aplicar un hipervínculo con un archivo de cualquier tipo, es decir,
puede ser un documento elaborado en PowerPoint, Word, Excel, flash, etc.
Ejemplo:
<a href=”clase.ppt”>datos</a>
Enlace dentro de la misma página:
Puede ser interesante establecer hiperenlaces entre partes de una misma página,
ya sea porque ésta sea muy extensa o para facilitar el movimiento dentro de la
página.
En este tipo de enlaces internos, la "dirección" que declararemos en HREF irá
precedida por el signo #. En lugar de una dirección, lo que escribiremos será una
marca, a modo de recordatorio del sitio de la página donde irá el enlace. Por
ejemplo, si queremos hacer un enlace interno que nos lleve al final de la página,
podemos hacer:
<a href="#final">Ir al final</a>
Hemos decidido poner como marca la palabra "final", para que nos recuerde a
dónde va el enlace y un texto suficientemente explicativo.
Otra forma de realizarlo es por ejemplo:
<a name="Hola">Hola</a>
<a href="#Hola">Hola</a>
Enlace a correo electrónico:
Se emplea para realizar un hiperenlace con un correo electrónico, el código es:
<a href=mailto:correo>texto</a>
Ejemplo:
<a href="mailto:[email protected]">Conceptos</a>
M.I. BERTHA EVELIA TORRES TORRES Apuntes del Módulo II, Submódulo III 2.5.
Manipular formularios en una página Web
La mayoría de las páginas Web que desean incluir una interactividad con los
usuarios adicionan formularios.
22
2.5.1. Definición de formularios
Un formulario HTML es una sección de un documento que incluye contenido
normal, código, elementos especiales llamados controles (cuadros de texto,
casillas de verificación (checkboxes), botones de acción (radio buttons), menúes,
etc.), y rótulos (labels) en esos controles.
Los usuarios normalmente "completan" un
formulario modificando sus controles
(introduciendo
texto,
seleccionando
objetos de un menú, etc.), antes de enviar
el formulario a un agente para que lo
procese como un servidor Web o un
servidor de correo, etc.
2.5.2. Controles de un formulario
Los usuarios interaccionan con los formularios a través de los llamados controles.
El "nombre de control" de un control viene dado por su atributo name. El "campo
de acción" o alcance del atributo name de un control contenido en un elemento
FORM es el elemento FORM.
Cada control tiene tanto un valor inicial como un valor actual, que son ambos
cadenas de caracteres. En general, el "valor inicial" de un control puede
especificarse con el atributo value del elemento de control. Sin embargo, el valor
inicial de un elemento TEXTAREA viene dado por sus contenidos, y el valor inicial
de un elemento OBJECT de un formulario está determinado por la implementación
del objeto (es decir, se sale fuera del alcance de esta especificación).
El "valor actual" del control se hace en primer lugar igual al valor inicial. A partir de
ese momento, el valor actual del control puede ser modificado a través de la
interacción con el usuario y mediante scripts.
El valor inicial de un control no cambia. Así, cuando se reinicializa el formulario, el
valor actual de cada control se reinicializa a su valor inicial. Si el control no tiene
un valor inicial, el efecto de una reinicialización del formulario sobre ese control es
indefinido.
Cuando se envía un formulario para su procesamiento, para algunos controles se
empareja su nombre con su valor actual, y estas parejas se envían con el
formulario. Aquellos controles cuyas parejas nombre/valor se envían se llaman
controles con éxito.
M.I. BERTHA EVELIA TORRES TORRES Apuntes del Módulo II, Submódulo III HTML define los siguientes tipos de controles:
Cuadro de texto: Los autores pueden crear dos tipos de controles que permiten
a los usuarios introducir textos. El elemento INPUT crea un control de entrada
de una sola línea, y el elemento TEXTAREA crea un control de entrada de
varias líneas. En ambos casos, el texto introducido se convierte en el valor
actual del control.
Botones: Los autores crean botones con el elemento “button” o el elemento
input. Se pueden crear tres tipos de botones:
9 botones de envío (submit buttons): Cuando se activa, un botón de envío
envía un formulario. Un formulario puede contener más de un botón de
envío.
9 botones de reinicialización (reset buttons): Cuando se activa, un botón
de reinicialización reinicializa todos los controles a sus valores iniciales.
9 botones pulsadores (push buttons): Los botones pulsadores no tienen
un comportamiento por defecto. Cada botón pulsador puede tener
asociados scripts en el lado del cliente a través del atributo event del
elemento. Cuando ocurre un evento (p.ej., el usuario aprieta el botón, lo
suelta, etc.), se acciona el script asociado.
9 Los autores deberían especificar el lenguaje de programación del script
de un botón pulsador a través de una declaración de scripts por defecto.
Casillas de verificación (checkboxes): Son interruptores de encendido/apagado
que pueden ser conmutados por el usuario. Una casilla de verificación está
"marcada" cuando se establece el atributo checked del elemento de control.
Cuando se envía un formulario, solamente pueden tener éxito los controles de
casillas de verificación que estén marcadas.
Botones de opción (radio buttons): Los radiobotones son como las casillas de
verificación, excepto en que cuando varios comparten el mismo nombre de
control, son mutuamente exclusivos: cuando uno está "encendido", todos los
demás con el mismo nombre se "apagan". Para crear un control de radiobotón
se usa el elemento INPUT.
Cuadro desplegable: Los menúes ofrecen al usuario opciones entre las cuales
elegir. El elemento SELECT crea un menú, en combinación con otros
elementos.
Selección de ficheros (file select): Este tipo de control permite al usuario elegir
ficheros de modo que sus contenidos puedan ser enviados con un formulario.
Se usa el elemento INPUT para crear un control de selección de ficheros.
M.I. BERTHA EVELIA TORRES TORRES 23
Apuntes del Módulo II, Submódulo III 2.6.
Manipulación de tablas en una página Web
Una tabla en un conjunto de celdas organizadas dentro de las cuales podemos
alojar distintos contenidos.
En un principio nos podría parecer que las tablas son raramente útiles y que
pueden ser utilizadas principalmente para listar datos como agendas, resultados y
otros datos de una forma organizada.
Una tabla nos permite organizar y distribuir los espacios de la manera más optima.
Nos puede ayudar a generar texto en columnas, prefijar los tamaños ocupados por
distintas secciones de la página o poner de una manera sencilla un pie de foto a
una imagen.
Las tablas son definidas por las etiquetas <table> y </table>.
Dentro de estas dos etiquetas colocaremos todas las otras etiquetas, textos e
imágenes que darán forma y contenido a la tabla.
Las tablas son descritas por líneas de izquierda a derecha. Cada una de estas
líneas es definida por otra etiqueta y su cierre: <tr> y </tr>
Asimismo, dentro de cada línea, habrá diferentes celdas. Cada una de estas
celdas será definida por otro par de etiquetas: <td> y </td>. Dentro de estas
etiquetas será donde coloquemos nuestro contenido.
La estructura de tabla se muestra en el siguiente ejemplo:
<table>
<tr>
<td>Celda 1, linea 1</td>
<td> Celda 2, linea 1</td>
</tr>
<tr>
<td> Celda 1, linea 2</td>
<td> Celda 2, linea 2</td>
</tr>
</table>
El resultado:
Celda 1, linea 1 Celda 2, linea 1
Celda 1, linea 2 Celda 2, linea 2
M.I. BERTHA EVELIA TORRES TORRES 24
Apuntes del Módulo II, Submódulo III Ejemplo:
Código HTML correcto que permite la construcción de una tabla:
<HTML>
<TABLE BORDER=10>
<TR>
<TD>Número de lista <TD> Nombre <TD> Materia </TH>
<TR>
<TD> 10 <TD> María López <TD> Submódulo 3
<TR>
<TD> 12 <TD> Juan Ruíz <TD> Submódulo 2 </TD>
</TABLA>
</HTML>
El resultado:
2.7.
Manipulación de objetos en una página Web
Sin duda uno de los aspectos más vistosos y atractivos de las páginas Web es la
colocación de objetos. La introducción en nuestro texto de imágenes,
animaciones, sonidos, video, etc. puede ayudarnos a explicar más fácilmente
nuestra información y ser algo más estético. El abuso no obstante puede
conducirnos a una sobrecarga que se traduce en una distracción para el
navegante, quien tendrá más dificultad en encontrar la información necesaria.
El uso de objetos también tiene que ser realizado con cuidado porque aumentan el
tiempo de carga de la página, lo que puede ser de un efecto nefasto si nuestro
visitante no tiene una buena conexión o si es un poco impaciente. Por ello es
recomendable siempre optimizar las imágenes para Internet, haciendo que su
tamaño en bytes sea lo mínimo posible, para facilitar la descarga, pero sin que ello
comprometa mucho su calidad.
2.7.1. Formatos de imágenes
JPEG: El comité JPEG (Joint Photographic Experts Group = Grupo de
Unión de Expertos en Fotografía) se utiliza en Internet por la extraordinaria
compresión que consigue (como se puede ajustar el nivel de compresión,
al crear el archivo se puede ajustar la relación tamaño/calidad de la
imagen). Además admite también entrelazado (una imagen entrelazada se
M.I. BERTHA EVELIA TORRES TORRES 25
Apuntes del Módulo II, Submódulo III ve en el navegador desde que empieza a descargarse, primero con poca
calidad, pero cada vez con más detalle a medida que va llegando). El
único inconveniente es que se trata de un formato de compresión con
pérdida, por lo que nunca se puede recuperar la información original, y si
una imagen se edita varias veces, la calidad se va degradando cada vez
más.
GIF: El Graphics Interchange Format = Formato de Intercambio de
Gráficos, es una imagen que sólo puede tener 256 colores distintos, lo que
no la hace recomendable para las fotografías, pero sí para dibujos.
Además, el tamaño de los archivos es pequeño, el éxito del formato GIF
fue inmediato y su uso se extendió por Internet.
PNG: Portable Network Graphics = Gráficos de Red Portátiles, las
ventajas del formato PNG sobre el formato GIF son muchas: se trata de
un formato libre, sin pérdida, que consigue mayor compresión que GIF
(alrededor de un 20%), con transparencia alfa (cada pixel puede tener su
propio nivel de transparencia), canal gamma (para ajustar el brillo) y
entrelazado.
MNG: Multiple-image Network Graphics = Gráficos de Red con Múltiples
imágenes, fue creado por algunos de los autores de PNG y tuvo muy poco
éxito
APNG: El Animated PNG se desarrollo como alternativa a MNG, aunque
el formato PNG rechazó la propuesta de formato APNG, en la actualidad
se intenta impulsar el uso de este formato.
Sintaxis para agregar imágenes es:
<IMG SRC=URL>
URL= C:/CECYTES.JPG
2.7.2. Tipos de animaciones
La animación es un proceso utilizado para dar la sensación de movimiento a
imágenes o dibujos. Para realizar animación existen numerosas técnicas que van
más allá de los familiares dibujos animados. Los cuadros se pueden generar
dibujando, pintando, o fotografiando los minúsculos cambios hechos
repetidamente a un modelo de la realidad o a un modelo tridimensional virtual;
también es posible animar objetos de la realidad y actores.
Se puede adicionar animaciones de diferentes tipos como los dibujos animados,
stop motion, pixelación, rotoscopía, animación de recortes, movimientos de texto,
animaciones en flash, etc. A continuación se especificarán los dos últimos tipos de
animaciones.
M.I. BERTHA EVELIA TORRES TORRES 26
Apuntes del Módulo II, Submódulo III Animar una imagen o hacer texto con movimiento: las personas que
trabajan tan sólo con HTML al hacer páginas web y que quieren incorporar
un tipo simple de animación en sus sitios. Una solución fácil para hacer una
animación con HTML es hacer uso de Marquee. Dicho código es una de
esas etiquetas no estándar de HTML, que soportan los navegadores más
comunes, pero que no están comprendidas dentro de las especificaciones
de HTML. Sirve para animar elementos dentro de la página. En concreto
permite que el contenido que pongamos dentro de la etiqueta, ya sea texto,
fotografías, o ambos se desplace horizontalmente por la página.
Sintaxis para adicionar de texto e imagen:
<marquee>texto que se mueve</marquee>
Insertar una animación Flash: Las animaciones flash (swf) son archivos
multimedia que cada vez están más extendidas en la Red debido a su
vistosidad. Este tipo de animaciones se utilizan muy menudo ya que
permiten realizar contenidos más llamativos y pueden aportar numerosas
posibilidades interactiva.
Se utiliza el código <object> para insertar dichas animaciones aunque
también se puede emplear para diferentes objetos dentro de la página,
como pueden ser archivos de audio, archivos de vídeo, imágenes, etc.
Las animaciones Flash se insertan del mismo modo que los archivos de
audio y de vídeo, a través de la etiqueta <embed>, pero debido a que tiene
más posibilidades de que se produzcan incompatibilidades entre los
distintos navegadores, necesita también de la etiqueta <object>.
Sintaxis para adicionar animaciones en flash:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swf
lash.cab#version=6,0,40,0" width="200" height="100">
<param name="movie" value="ejemplo.swf">
<param name="quality" value="high">
<embed src="ejemplo.swf" width="200" height="100" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"></embed>
</object>
M.I. BERTHA EVELIA TORRES TORRES 27
Apuntes del Módulo II, Submódulo III 2.7.3. Tipos de archivos de sonido
a) Los archivos de sonido con pérdida
Son aquellos que usan un algoritmo de compresión con pérdida, es decir un tipo
de compresión que representa la información (por ejemplo una canción), pero
intentando utilizar para ello una cantidad menor de información. Esto hace que sea
imposible reconstruir exactamente la información original del archivo.
Archivos de sonido con pérdida:
MP3 o MPEG-1 Audio Layer 3: Es un formato de audio digital estándar
comprimido con pérdida, la pérdida de información del formato mp3 no es
audible por el oído humano, por tanto no distinguiremos la diferencia entre
un archivo de audio sin compresión y un archivo mp3.
ACC o Advanced Audio Coding: Es un formato de audio digital estándar
como extensión de MPEG-2 comprimido con pérdida, y ofrece más calidad
que mp3 y es más estable para un mismo número de Kbps y un mismo
tamaño.
Ogg: Es un formato de audio digital comprimido con pérdida. Normalmente
los archivos Ogg están comprimidos con el códec Vorbis, que es un códec
de audio libre que permite una máxima flexibilidad a la hora de elegir entre
la amplia gama de bitrates según la complejidad de la transmisión de audio,
en la relación calidad-bitrate, se encuentra parejo con MPEG-2 y en la
mayoría de los bitrates es comparable al formato ACC.
Real Audio o RM: Es un formato de archivo pensado para las transmisiones
por internet en tiempo real, por ejemplo las radios que emiten online o
cuando un servidor tiene un archivo de sonido almacenado y nosotros lo
escuchamos sin que el archivo se cargue por completo ni se almacene en
nuestro ordenador, esto es posible gracias al proceso de Buffering que
básicamente es recibir un paquete de sonido en nuestro reproductor en
este caso (Real Player) mientras el siguiente se almacena en la carpeta de
temporales hasta que sea requerido por el reproductor. Con este sistema
los archivos no pueden ser copiados.
WMA o Windows Media Audio: Es un formato de compresión de audio con
pérdida aunque también existe este formato con compresión sin pérdida. Y
está desarrollado básicamente con fines comerciales para el reproductor
integrado en Windows, Windows Media Player. Está por debajo del nivel de
los anteriores formatos.
b) Los archivos de sonido sin pérdida
Son aquellos que usando o no métodos de compresión, representan la
información sin intentar utilizar menor cantidad de la información original. Hacen
posible una reconstrucción exacta de la información original.
M.I. BERTHA EVELIA TORRES TORRES 28
Apuntes del Módulo II, Submódulo III Archivos de sonido con pérdida:
AIFF o Audio Interchange File Format: significa Formato de Archivo de
Intercambio de Audio, es un estándar de formato de archivo de audio para
vender datos de sonido para ordenadores, usado internacionalmente por los
ordenadores Amiga y actualmente muy utilizado en los ordenadores Apple.
FLAC o Free Lossless Audio Codec: es otro códec de compresión sin
pérdida, y consigue reducir el tamaño de un archivo de sonido original de
entre la mitad hasta tres cuartos del tamaño inicial.
WAV o wave: Waveform Audio Format es un formato de audio digital sin
compresión que se emplea para almacenar sonidos en el ordenadores con
windows, es una formato parecido al AIFF pero tomando en cuenta
peculiaridades de intel.
MIDI: Interface Digital para Instrumentos Musicales, es considerado el
estándar para industria de la música electrónica. es muy útil para trabajar
con dispositivos como sintetizadores musicales ó tarjetas de Sonido.
Su extensión es .midi o .mid.
Sintaxis para adicionar archivos de sonido:
<bgsound src="ruta del archivo.extensión” loop="-1">
2.7.4. Tipos de archivos de video
El objeto de video es una de las herramientas que permiten a los diseñadores de
página Web construir sitios atractivos para sus clientes, además de que en ciertas
ocasiones se requieren para complementar la información o para mejorar el
aprendizaje.
Algunos tipos de archivos de video que se pueden colocar en la página Web son
los siguientes:
WMV (Windows Media Video): es un nombre genérico que se da al conjunto de
algoritmos de compresión ubicados en el set propietario de tecnologías de
vídeo desarrolladas por Microsoft, que forma parte del framework Windows
Media.
MPG (Moving Pictures Group): es un tipo de archivo contenedor, dentro del
cual podemos colocar pistas de video, audio e incluso subtítulos en ciertos
casos. Tanto el video como el audio pueden hallarse en un formato
determinado y con unas características determinadas (resolución, framerate,
etc), y según esas características diremos que nuestro MPG está en un
formato u otro.
3GP: es un contenedor multimedia o formato de archivos usado por teléfonos
móviles para almacenar información de medios múltiples(audio y video). Este
M.I. BERTHA EVELIA TORRES TORRES 29
Apuntes del Módulo II, Submódulo III formato de archivo, creado por 3GPP (3rd Generation Partnership Project), es
una versión simplificada del "ISO 14496-1 Media Format", que es similar al
formato de Quicktime. 3GP guarda video como MPEG-4 o H.263.
AVI (Audio Video Interleave): permite almacenar simultáneamente un flujo de
datos de video y varios flujos de audio. El formato concreto de estos flujos no
es objeto del formato AVI y es interpretado por un programa externo
denominado códec.
Sintaxis para adicionar animaciones en flash:
<EMBED type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
SRC="direccion_de_tu_video.wmv"
name="MediaPlayer1"
width="352"
height="288"
AutoStart="0"
showcontrols="1"
showpositioncontrols="1"
showaudiocontrols="1" showtracker="1" showdisplay="0" showstatusbar="0"
autosize="0"
showgotobar="0"
showcaptioning="0"
autorewind="0"
animationatstart="1"
transparentatstart="0"
allowscan="0"
enablecontextmenu="1"
clicktoplay="1"
invokeurls="0"
defaultframe="datawindow">
</EMBED>
Otra forma:
<embed type=application/x-mplayer2 src=c:/guerra.avi width=300 height=300>
</embed>
M.I. BERTHA EVELIA TORRES TORRES 30
Apuntes del Módulo II, Submódulo III CÓDIGOS HTML
<HTML> </HTML>
<TITLE> </TITLE>
<HEAD> </HEAD>
<BODY> </BODY>
<CENTER> </CENTER>
<BODY BGCOLOR=COLOR>
<Hn> <H1> <H2> </H1> </H2>
<LI> </LI>
<P> </P>
<BR> </BR>
<FONT COLOR=COLOR>
<B> </B>
<I> </I>
<U> </U>
<HR> <SIZE=n WIDTH=m> </HR>
<P ALIGN=JUSTIFY>
</P ALIGN=JUSTIFY>
<P ALIGN=LEFT> </P ALIGN=LEFT>
Identifica el contenido del documento con el
código Hyper Text Markup Language
Contiene el título de la página, la cual se observa
en la barra de título.
Alberga información de cabecera del documento.
Establece el alcance del cuerpo del documento.
Coloca en el centro de la página (alineación
horizontal).
Incluye el color del fondo de la página web.
Visualiza el texto como cabecera con tamaños
crecientes y saltos de línea.
Especifica un elemento de una lista (tipo viñeta).
Definición de un párrafo.
Inserta un salto de línea.
Incluye el color de la letra.
Pone en negrita el texto.
Pone en cursiva o itálica el texto.
Visualiza el texto subrayado.
Dibuja una línea horizontal con grosor n y ancho
(largo) m
Coloca el párrafo con una alineación justificada.
Coloca el párrafo con una alineación hacia la
izquierda.
<P ALIGN=RIGHT>
Coloca el párrafo con una alineación hacia la
</P ALIGN=RIGHT>
derecha.
<IMG
SRC=C:/CECYTES.JPG Inserta una imagen
WIDTH=250 HEIGHT=300>
<TABLE BORDER=10>
<TR>
<TH>Número de lista <TH> Nombre <TH> Materia </TH>
Insertar tabla
<TR>
<TD> 12 <TD> Juan Ruíz <TD> Submódulo 2 </TD>
</TABLA>
<marquee>texto que se mueve</marquee>
Texto con movimiento
<bgsound src=c:/atodo.mid loop=-1>
Agregar sonido
<embed
type=application/x-mplayer2
width=300 height=300>
</embed>
src=c:/guerra.avi
<object
classid=clsid:D27CDB6E-AE6D-11CF-96B8444553540000 width=300 height=300>
<param name=movie value=c:/animacion.swf>
</object>
M.I. BERTHA EVELIA TORRES TORRES Adicionar video
Pelicula de flash
31
Apuntes del Módulo II, Submódulo III Vínculos e Hipervínculos
9 Enlace de página a página
<a href="dirección"> texto </a>
<A HREF=http://es.wikipedia.org/wiki/Colores_HTML> Referencia </A>
9 Enlace de página a documento
<a href="nombre.extensión">texto</a>
<a href=”clase.ppt”>datos</a>
9 Enlace dentro de la misma página
<a name=”final”> </a>
<A NAME="INICIO"> </A>
32
<a href="#final">Ir al final</a>
<A HREF="#Inicio"> Ir a inicio </a>
9 Enlace a correo electrónico
<a href=mailto:correo>texto</a>
<a href="mailto:[email protected]">Conceptos</a>
Formularios
9 Construir un formulario
<form
action="mailto:[email protected]"
enctype="text/plain"> </form>
method="post"
9 Cuadro de texto
Nombre <input type="text" name="nombre" size="40" maxlength="100">
Email <input type="text" name="email" size="25" maxlength="100"
value="@hotmail.com">
9 Texto largo
<textarea name="comentario" rows="10" cols="40">Anotar … </textarea>
9 Listas de opciones
<select name="Estación">
<option value="1"> Primavera </option>
<option value="2"> Verano </option>
</select>
9 Botones de radio
<input type="radio" name="estación" value="1">Primavera
<input type="radio" name="estación" value="2" checked>Verano
9 Cajas de validación
<input type="checkbox" name="recibir" checked> Deseo recibir publicidad
9 Botones de envío
<input type="submit" value="Enviar">
9 Botones de borrado
<input type="reset" value="Borrar">
M.I. BERTHA EVELIA TORRES TORRES