DISEÑO, PUBLICACIÓN y PROMOCION en la WEB

Transcripción

Universidad Tecnológica Nacional – F.R.C
Redes de Información (RIN)
ACTIVIDAD PRACTICA Nro3:
DISEÑO, PUBLICACIÓN
y PROMOCION en la WEB
OBJETIVOS:
•
Familiarizar al alumno con el código HTML.
•
Brindar a los alumnos información sobre las distintas herramientas existentes para el
diseño de una pagina Web.
•
Brindar información sobre como publicar una página en la Web.
•
Comunicar las diferentes formas de promocionar una página Web.
MODALIDAD:
La práctica consta de 4 partes:
!"
•
Diseño de una página Web
•
Publicación de una página Web
•
Promoción de una página Web
•
Actividades (dos) , resolución y cuestionario
!"La realización de esta actividad contempla dos prácticos y un cuestionario para la clase.
CALIFICACION:
Para aprobar la práctica los alumnos deberán entregar al docente el cuestionario que
plantea la guía respondido, y la página web diseñada la que deberá ser accedida desde la
Internet.
23
Parte I
Diseño de una pagina Web
Definiciones
# HTML (Hipertext markup language): Lenguaje de marcadores de hipertexto. Es un lenguaje de
etiquetas en el que se asigna formato a las páginas Web y se distribuye información.
# Hipertexto: Significa más que texto; consiste en un texto en donde algunas palabras, párrafos o
imágenes aparecen marcada de alguna manera. Esto significa que el documento ofrece más información
que la que el usuario ve en ese momento.
Estructura de un documento HTML
Una página Web es un archivo de texto, se puede crear con cualquier editor de texto como el edit
de DOS o el bloc de notas de Windows (Para que este archivo de texto se transforme en la pagina Web
diseñada se debe guardar este archivo en extensión htm o sea “.htm”) . Todas las páginas Web tienen la
siguiente estructura:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
En la primer linea encontramos el comando <HTML>. Esto le indica al cliente (ej: Netscape) que
comienza un documento HTML. Luego viene <HEAD>, la primer parte de un documento HTML. Dentro
de HEAD puede ir el titulo <TITLE> del documento (Netscape lo muestra en la barra superior de la
ventana) y otros comandos mas como el <META HTTP-EQUIV="Keyword" CONTENT="mi primera
pagina, primera”> en este caso se define las palabras claves por las cuales los buscadores filtran las
páginas. Luego de HEAD viene <BODY>, que es donde se coloca la información que queremos mostrar.
El comando BODY acepta varios parámetros muy interesantes:
Parámetros de BODY
24
Parámetros
Descripción
Permite incluir una imágen de fondo. No poner
En la
una imágen muy 'pesada' de fondo, no mas de 15k. No última
linea
BACKGROUND="imagen.gif"
olvidar verificar que no dificulte la lectura del texto.
del código del
ejemplo esta
Cambia el color de fondo de una página. Donde
</HTML>.
va cada x va un número hexadecimal, del 0 a la F. Las Esto le indica
dos primeras xx corresponden al rojo, las 2 siguientes al al
cliente
verde y las restantes al azul. Ej: para un fondo blanco (Netscape) que
BGCOLOR="#xxxxxx" poner todos los valores al máximo: FFFFFF. Para un terminó
el
fondo rojo: FF0000. También pueden usarse los nombres
documento.
en inglés de los colores en lugar de su código. Por Noten
que:
ejemplo BGCOLOR=”BLACK”
<HEAD> tiene
su
Cambia el color del texto de toda una página. La correspondient
selección de color funciona igual para todos los casos. e llave de
TEXT="#xxxxxx"
Aquí también pueden usarse los nombres en inglés de los
cierre
colores.</HEAD>, y
<BODY> tiene
</BODY>.
Cambia el color de todas las conexónes (links) de
LINK="#xxxxxx"
Esto
es
toda una página.
fundamental
Cambia el color de todas las conexónes visitadas incluirlo en la
VLINK="#xxxxxx"
página
para
(links) de toda una página.
tener
un
documento
HTML correcto. Esta estructura de cabezal (HEAD) y cuerpo (BODY) siempre debe ser mantenida.
Envolviendo estas dos secciones va el <HTML> y </HTML>.
Si cargamos el código del primer ejemplo veremos que no aparece nada. (solo el titulo!)
Tenemos la estructura, ahora hace falta agregarle la información. Lo primero que debemos tener claro es
que al cliente Web (Netscape) no le importa los espacios, tabs, o fin de lineas que tenga un texto creado
con el edit. Como ejemplo, veamos la siguiente página:
<HTML>
<HEAD>
<TITLE> Primera página</TITLE>
</HEAD>
<BODY>
<H1>Bienvenido a mi página</H1>
Esta página se encuentra en <STRONG>Córdoba
Argentina</STRONG>,<BR>
en el <EM>servidor Web</EM> de UTN.
<HR>
Hasta luego!
</BODY>
</HTML>
25
Aquí aparecen varios comandos nuevos. <H1> es para indicar que el texto es un título. Cuando
esta página es cargada ese texto aparece en un tipo de letra más grande. <H1> es un comando
'contenedor', significa que necesita una llave de cierre que es </H1>. Esta llave indica que hasta ahi llega
el
título,
sino
toda
la
página
apareceria
con
letras
gigantes.
<STRONG> le indica al cliente que muestre 'Córdoba Argentina' más fuerte. <EM> indica que le de
énfasis. Generalmente todos los clientes muestran al texto <STRONG> como bold, y <EM> como italic.
<BR> no es un comando contenedor. Cuando colocamos un <BR>, indica un corte de linea. <HR>
tampoco es contenedor, indica incluir un separador.
Comandos basicos de formateo de texto
Comandos
Descripción
Indica que el texto en un título. El mas importante (grande) es
H1, luego H2 y asi hasta H7. Los más usados son hasta H3.
Muestra en texto seleccionado más fuerte.
<STRONG> </STRONG>
Casi todos lo muestran como bold.
Muestra en texto sellecionado con énfasis.
<EM> </EM>
Casi todos lo muestran como italic
<BR>
Indica un corte de línea.
<HR>
Inserta un separador.
Indica un comienzo de párrafo. Tiene como opciones ALIGN
<P> </P>
(center, left y right). Util para centrar o alinear a la derecha texto. Cada
comiezo de párrafo deja un espacio separador.
Para alinear párrafos y títulos; sus opciones son CENTER,
ALIGN= “opción”
LEFT, RIGHT, ...
<H1> </H1>
Incluyendo imágenes
Incluir imágenes en una página Web es muy sencillo. Primero ciertas consideraciones:
JPG vs GIF
Solo usar JPG cuando la imágen sea una foto. Cuando sea un logo, letras, o un dibujo
utilizar GIF. Existen exepciones, pero esta es una buena regla general. Lo principal es que la
imágen ocupe lo mínimo posible y que tenga una calidad aceptable. Todo vale, un GIF de 256 colores
generalmente en un desperdicio, con 64 colores casi no hay diferencia y puede ocupar bastante menos.
Una foto en GIF de 256 colores, en JPG puede quedar a menos de la mitad. No olvidar que a nadie (va, a
muy pocos) le sobra ancho de banda, y menos en nuestro país. Como regla, si una sola imagen pesa más
de 50k hay que hacerla adelgazar! Muy grande para Internet. Si quieren poner una imágen grande (hay
casos que no hay otra), no obligar a la gente a bajarla poniendola directamente en la página, primero
pongan un versión mini de digamos 150 x 100 pixels con una conexión a la grande, y avisando cuanto
ocupa la grande antes de obligar a bajarla.
26
IMG SRC
Para
incluir
una
imágen
se
utiliza
el
comando
IMG acepta una gran variedad de parámetros y es muy flexible. Veamos algunos:
<IMG>.
Parámetros de IMG
Parámetros
Descripción
SRC
Indica el nombre de archivo de la imagen a incluir.
Indica la altura de la imagen. El Netscape, si la altura no
HEIGHT
coincide con la original de la imagen, esta es estirada o achicada
para llegar a la altura especificada en este parámetro.
WIDTH
Indica el ancho de la imagen.
BORDER
Indica el tipo de borde que tiene la imagen.
Permite alinear una imagen. Acepta LEFT, RIGHT,
ALIGN
BOTTOM, TOP, MIDDLE, etc.
Indica el nombre de archivo de la versión de carga rápida de
LOWSRC
una imagen. Muy útil para agilizar el despliegue de una página
pesada.
Nota: Siempre escribir el nombre del archivo entre comillas.
Por ejemplo:
<IMG ALIGN="RIGHT" BORDER="7" SRC="SOL.JPG" WIDTH="241" HEIGHT="89">
Generando conexiones (links)
Las conexiones (en ingles links) son un elemento fundamental del HTML. Supongamos que
tenemos una lista de servicios. Lo ideal es que cuando seleccionamos un servicio, saltemos a una página
con mas detalles sobre ese servicio. Esto es el hypertexto. En toería las conexiones podrían ser infinitas,
navegando entre diferentes temas con solo seleccionarlos. Imaginen una hyperenciclopedia, donde cada
tema puede ir profundizandose y ramificandose hacia todas las áreas del conocimiento. En un documento
HTML, se especifica una conexión mediante el comando <A> (Anchor). Por ejemplo, para realizar una
conexión sería: <A HREF="index.html"> </A>. Para verlo mas claro, veamos como agregarle una
conexión a nuestra 'primer página'.
<HTML>
<HEAD>
<TITLE>primera página</TITLE>
27
</HEAD>
<BODY>
<H1>Bienvenido a mi página</H1>
Esta página se encuentra en <STRONG>Córdoba
</STRONG>,<BR>
en el <EM>servidor</EM> de <A
HREF="pagina2.htm">Compuservice.</A>
<HR>
Hasta luego!
</BODY>
</HTML>
Al seleccionar Compuservice saltamos a la página 2..
Para hacer un link a una casilla de e-mail se debe usar la siguiente sentencia:
<A HREF="mailto: [email protected]">Envíe correo de mail a:</a>
... donde mailto indica la dirección a donde se enviará el mail y “Envíe correo de mail” es
el mensaje que verá el usuario en la página. Al hacer clic sobre el link generado, se abre el cliente de
mail del usuario con el destinatario que hemos seteado en la sentencia HTML.
Listas en HTML
Las listas son simplemente eso: listas. Exactamente igual que cuando hacemos una lista de compras para
el supermercado. Las listas son muy simples. Hay diferentes tipos: listas desordenadas, ordenadas y de
definiciones. Comenzemos por las mas simples, las desordenadas.
Listas desordenadas
<UL TYPE="disc">
<LI>papas
<LI>manteca
<LI>dulce de leche
<LI>pan
</UL>
•
•
•
•
papas
manteca
dulce de leche
pan
Primero especificamos el tipo de lista, en este caso UL (unordered list) de lista desordenada.
Luego cada item de la lista se indica con LI (list item). Fácil verdad? Verán tembién que hay un
parámetro en UL, el TYPE="disc". Eso significa que el puntito que aparece a la izquierda de cada item de
la lista sea un disco. También existen CIRCLE y SQUARE.
28
<UL TYPE="square">
<LI>papas
<LI>manteca
<LI>dulce de leche
<LI TYPE=DISC>pan
</UL>
#"papas
#"manteca
#"dulce de leche
#"pan
papas
manteca
$" dulce de leche
$" pan
$"
<UL TYPE="circle">
<LI>papas
<LI>manteca
<LI>dulce de leche
<LI>pan
</UL>
$"
No todos los browsers soportan esto. Es un pequeño detalle pero no esta de mas saberlo. Ahora
pasemos a las listas ordenadas. Se definen exactamente igual a las desordenadas, salvo que se utiliza el
comando OL (ordered list). Veamos un ejemplo:
Listas ordenadas
1.
2.
3.
4.
<OL>
<LI>papas
<LI>manteca
<LI>dulce de leche
<LI>pan
papas
manteca
dulce de leche
pan
</OL>
En las listas ordenadas el puntito pasa a ser un numeral que indica el orden de cada item. Muy util
para numerar listas automaticamente, ya que no hay que ingresar en número de cada item a mano. Al
igual que en las listas desordenadas, se puede elegir mediante el parámetro TYPE el tipo. Existen A, a, I,
i, y por defecto 1. Veamos como quedan:
<OL TYPE=A>
<LI>papas
<LI>manteca
<LI>dulce de leche
<LI>pan
</OL>
A.
B.
C.
D.
29
papas
manteca
dulce de leche
pan
<OL TYPE=a>
<LI>papas
<LI>manteca
<LI>dulce de leche
<LI>pan
</OL>
a.
b.
c.
d.
papas
manteca
dulce de leche
pan
<OL TYPE=I>
<LI>papas
<LI>manteca
<LI>dulce de leche
<LI>pan
</OL>
I. papas
II. manteca
III. dulce de leche
IV. pan
<OL TYPE=i>
<LI>papas
<LI>manteca
<LI>dulce de leche
<LI>pan
</OL>
i.
ii.
iii.
iv.
papas
manteca
dulce de leche
pan
Tambien se pueden incluir listas dentro de listas.
<OL TYPE=i>
<LI>papas
<LI>manteca
<LI>dulce de leche
<OL>
<LI>conaprole
<LI>milky
<LI>lapataia
</OL>
<LI>pan
</OL>
i. papas
ii. manteca
iii. dulce de leche
1. conaprole
2. milky
3. lapataia
iv. pan
Tablas en HTML
Las tablas son uno de los elementos mas versátiles del HTML. Sirven para todo. No siempre
existieron las tablas. Cuando solo existia el HTML V1.0 no había tablas, recién con la versión 2.0
llegaron las tablas. Hoy casi todos los browsers soportan las tablas, aunque existen algunos que no lo
hacen. Si tu browser no soporta tablas, cambienlo por una que si. Verán todo mas claro ;)
30
Una tabla se define con el comando <TABLE> y debe finalizar siempre con </TABLE>. Cerrar
una tabla es muy importante, sino la página puede aparecer totalmente diferente si nos olvidamos de un
simple </TABLE>. Imaginen una hoja cuadriculada. Una tabla es eso, con sus filas (TR) y columnas
(TD). Primero veamos una tabla simple:
<TABLE>
<TR>
<TH>1996
<TH>1997
<TR>
<TD>30 millones
<TD>80 millones
1996
1997
30 millones
80 millones
</TABLE>
Esa tabla esta compuesta de la siguiente forma: Primero comienza la tabla con <TABLE<. Luego
viene <TR>, indica que comienza una nueva fila (horizontal) de la tabla. Una tabla por lo menos debe
tener una fila. Luego viene <TH>, que indica que comienza una columna. A continuación de este tag se
coloca la información. Ven que en la segunda fila usa <TD> en vez de <TH>. TH significa TABLE
HEADING, se usa cuando la información contenida es el nombre de una categoría. Simplemente lo que
hace es resaltar la información. TD significa TABLE DATA y no resalta la información. TD y TH
aceptan los siguiente parámetros:
Parámetros
HEIGHT
WIDTH
ALIGN
VALIGN
BGCOLOR
BORDER=”n°”
Descripción
Indica la altura de la celda. Para especificar el tamaño en pixels
solo ingresar la contidad, ej: HEIGHT=340 ; también se puede ingresar el
tamaño en porcentajes, ej: HEIGHT=30%
Indica el ancho de la celda.
Permite alinear el texto dentro de una celda. Acepta LEFT,
RIGHT, CENTER.
Permite alinear el texto verticalmente dentro de una celda. Acepta
TOP, BOTTOM, CENTER.
Permite especificar el color de fondo de una celda.
(solo se ve en Netscape 3.0)
Comando regulador del grosor del borde (Por defecto no
aparecen las lineas divisorias y constitutivas de la tabla, es decir,
BORDER=”0”).
31
Herramientas para el diseño de una página Web
Microsoft Word
Una página Web también puede ser diseñada con Microsoft Word, para crearla con esta
herramienta se deberá crear un documento nuevo “página Web en blanco”. Para relacionar el diseño de
una pagina Web con Microsoft Word y el código htlm se puede generar una lista de elementos con una
viñetas, guardarlo y abrirlo con un cliente Web como el Internet Explorer. Al ver el código se podrá
observar el código html que genera el Microsoft Word.
Microsoft FrontPage
A través de esta herramienta se puede obtener un diseño más profesional ya que el Microsoft
contiene herramientas propias para hacer más fácil el diseño. Por ejemplo uno escribe un texto “E-mail :
[email protected]” y lo puede generar como hipervinculo de correo electrónico. En la pestaña de
HTML el usuario podrá observar el código e ir haciendo retoques si le es necesario. En la parte de vista
previa se presenta una vista de cómo se verá la pagina y es donde se puede hacer pruebas como por
ejemplo el hipervinculo con el correo electrónico.
Herramientas Macromedia
DREAMWEAVER: Producción de Páginas y Sitios. Capacita para desarrollar sitios visualmente
atractivos , empleando plantillas para agilizar la producción de sus
distintas páginas con total facilidad.
FIREWORKS: Diseño de páginas e imágenes. Facilita y agiliza la creación de botones,
rollovers, gifs animados y la composición de páginas para un sitio
Web.
FLASH: Diseño de Animación Interactiva. Capacita en la producción de sitios con gráficos de
vectores y mapas de bits, movimiento, audio y gran interactividad.
32
Parte II
Publicación
Conceptos preliminares
Un dirección web se compone de la siguiente manera:
http://www.nombre.com.ar
Tipo de recurso
y protocolo de
transferencia
Aquí se trata de
protocolo
de
transferencia de
hipertexto
Subdominio:
computadora
de la red
interna a la
que
nos
conectamos.
Nombre: es
el
nombre
del dominio.
País:
identifica
al
país
donde está
registrado
el dominio
Tipo de dominio: designa con:
-.com: dominios comerciales
-.edu: dominios educativos
-.gov: dominios gubernamentales
-.net: dominios de administración de redes
-.....
Vale aclarar que ‘www’ no forma parte del dominio, es decir, en www.radar.com.ar el dominio es
radar.com.ar. Por su parte, en las direcciones de correo electrónico, por ejemplo en
[email protected] , el domino está dado por perez.com.ar.
Cómo conseguir un dominio
Básicamente podemos distinguir dos situaciones:
1. nuestro sitio ‘esta colgado’ de una dirección (Por ejemplo:
members.xoom.com/<nuestro sitio>)
2. nuestro sitio cuenta con una dirección propia (Por ejemplo:
www.<nuestro sitio>.com )
33
En el primer caso, la denominación del site deberá tramitarse con el propietario del sitio del cual
se dependerá. Por su parte, en casos de dominios propios, el trámite deberá realizarse ante el organismo
regulador de dominios (Nic).
Para poder usar un dominio debemos registrarlo. En Argentina debemos tramitarlo en www.nic.ar.
Si bien el trámite es largo, en NIC Argentina es gratuito.Para registrar un dominio .ar deberá darse de alta a una persona en NIC. Cada persona, a su vez,
deberá estar asignada a una entidad a la cual deberá darse de alte previamente. Una vez aceptadas la
entidad y la persona, podrá realizarse la registración de dominios.
Sintéticamente, el procedimiento consta de las siguientes etapas:
%"Registrar una entidad: en www.nic.ar hacer clic en ‘Formularios Web’ y luego en ‘Alta
de entidad’. Una vez hecho esto, se ingresan los datos solicitados. Luego de esto nos
enviarán un e-mail que tendremos que reenviar sin ningun tipo de modificaciones a la
dirección que se nos indica ( [email protected]). Cuando NIC reciba el e-mail que
reenviamos, se iniciará el trámite en cuestión. Esta iniciación se nos notificará con otro email.Dentro de unos días, recibiremos un mensaje notificándonos de
que la entidad ha sido creada y así podremos registrar la persona.%"Registrar un persona: dentro del sitio www.nic.ar dirigirse nuevamente a ‘Formularios
Web’ y allí hacer clic en ‘Alta de persona’. Ingresar cuidadosamente los datos requeridos,
teniendo en cuenta que deberemos asignar la persona que estamos creando a la entidad que
dimos de alta en la etapa anterior. Nuevamente tendremos que reenviar sin modificaciones
el e-mail que recibimos. Como en el caso anterior, recibiremos un mensaje indicativo de la
iniciación del trámite y al cabo de unos días, se nos notificará de la creación satisfactoria
de la persona. Esto nos permitirá registrar y delegar los dominios que queramos.%"Chequear que el dominio esté disponible: antes de registrar un dominio debemos
verificar si el mismo no se encuentra ya registrado. Para eso en www.nic.ar nos dirigimos
a ‘Consulta sobre nombres de dominios ya registrados’. En la página a la que llegamos,
ingresamos el nombre del dominio que queremos registrar, por ejemplo, ingresamos
homero.com.ar y presionamos ‘Buscar’. Si el dominio ya se encuentra registrado,
aparecerán los datos del registrante, caso contrario se encuentra disponible.-
%"Registrar y delegar el dominio: una vez más en www.nic.ar nos dirigimos a
‘Formularios Web’ y allí seleccionamos ‘Registro de delegación’. Posteriormente deberán
ingresarse los datos solicitados, indicando la entidad registrante y la persona (de esa
entidad) que está registrando el mentado dominio. A continuación deberán indicarse los
datos inherentes a quien brindará el hosting de nuestro sitio. Por ejemplo si elegimos a
FreeServers deberemos ingresar los siguientes datos:
34
o
o
o
o
ns3.freeservers.com
Servidor Primario:
IP del Servidor Primario: 209.210.67.153
Servidor Secundario:
ns4.freeservers.com
IP del Servidor Secundario: 209.210.67.154
Deberemos reenviar el e-mail que nos llegue, con la
diferencia que no recibiremos un mensaje de confirmación de la iniciación del trámite.
Días (o meses) más tarde nos llegará un e-mail indicándonos que el dominio que
tramitamos nos pertenece.-
%"Servicio de hosting: ya disponemos del dominio, ahora debemos crear el sitio y
transferirlo al servidor que nos brindará el hosting. Existen numerosas empresas que
brindan hosting, algunas de las cuales se detallan a continuación:
Servicio
Dirección
WebJump
www.geocities.com/
barrio/subbarrio/número
members.xoom.com/
nombre
nombre.webjump.com
Comerciales
www.nombre.com.ar
FreeServers
www.nombre.com.ar
Yahoo!Geocities
Xoom
Espacio
Extras
Publicidad
Precio
11 MB
E-mail; Comunidades
Se abre una
ventana
Gratis
100 MB
E-mail; Comunidades
Frame superior
Gratis
25 MB
Varíable
(ilimitado o
muy
grande)
E-mail
Frame
Gratis
E-mail; POP; control
absoluto; CGIs
ilimitados; ......
No
U$S 20 en
adelante
E-mail
ilimitado;CGIs;.....
Banner en cada
página
Gratis (o
U$S 5 sin
el banner)
20 MB
Parte III
Promoción
Alta en buscadores
Una vez diseñado y publicado nuestro sitio, debemos promocionarlo. Una forma de hacerlo es a
través de los buscadores. Éstos son principalmente de dos tipos: los motores de búsqueda y los
directorios.
Los motores de búsqueda posee un programa llamado spider (araña) que recorre la Web leyendo
los distintos sitios publicados y extrayendo de ellos la información necesaria para armar los índices. Un
ejemplo de motor de búsqueda es el dado por Altavista.Por su parte, los directorios, ordenan a los sitios por categorías en sus bases de datos. Un clásico
directorio es Yahoo!.
Lo ideal es figurar en todos y cada uno de los motores de búsqueda y directorios de la Web, ya
que éstos sitios reciben millones de visitas diarias y suelen ser el punto de partida de muchos internáutas.
De esta forma, podremos generar cientos de visitas a nuestro web site.
35
Claro está que es una tarea muy laboriosa dar de alta a nuestro sitio en los 3000 a 5000 motores de
búsqueda – directorios de Internet. No obstante, existen numerosas empresas a través de las cuales
podremos dar de alta nuestro sitio en miles de buscadores en solo minutos y de manera gratuita. A
continuación se presentan algunos de ellos.
Para encontrar nuestro sitio indexado en los buscadores, deberemos esperar entre siete días y un
mes, dependiendo del buscador. La mayoría de los buscadores nos enviará un e-mail de confirmación
una vez incluido nuestro sitio.
En lo que respecta a los buscadores argentinos, cabe destacar que el proceso de alta/indexación es
manual, ya que el alta automática en los mismos no está contemplada en forma gratuita.
Alta manual en buscadores argentinos
Nombre
Buscador Clarín
Caray Garay !
La Brújula
Donde
Gauchonet
RadAr
Grippo
Sabueso
Guia.com.ar
DNA
Ahijuna!
Plux
Muuú
Uol Argentina
Dirección
buscar.clarín.com.ar/cgi-bin/incluir.cgi
serv.caraygaray.com.ar/v/addsite/0/0
www.brujula.net/agregar
www.donde.com.ar/agregarurl.asp
www.gauchonet.com.ar/buscador/agrega.htm
www.radar.com.ar/sume.cgi
www.grippo.com/argentina/addurl.htm
www.sabueso.com.ar
www.guia.com.ar/search/agregue.htm
www.dna.com.ar/addurl.html
www.ahijuna.com.ar/agrsitio.htm
plux.com.ar/dir/add.cgi
www.muuu.com/cgi-bin/geo/add_easy.cgi
www.oul.com.ar
Alta automática en buscadores
Nombre
Add it !
Add me
Agrega
Web
Auto
Regístralo
Dejar
Huella
Easy
Submit
FFAbc.com
Buscadores Buscadores
hispanos Internacionales
Dirección
Idioma
www.liquidimaging.com/submit
Inglés
-
20
www.addme.com
Inglés
-
34
www.cyler.com/agregaweb
Español
14
16
www.atajos.com/autoregistralo.html
Español
34
16
www.lpis.com/huella
Español
54
17
www.dotcom.ca/easysubmit/
websubmit.htm
Inglés
-
900
www.ffabc.com/submission/form1.htm Inglés
-
2500
36
Hot Yellow
Jim Tools
www.hotyellowlinks.com
www.jimtools.com/submit.html
Inglés
-
500
Inglés
-
400
-
20
-
2700
13
6
-
290
-
40
-
400
-
1200
-
52
Mega
www.dirglobal.net/cgi-win/forma2.exe Español
Registro
My Free
www.myfreeofficelinks.com
Inglés
Office
home.registros.net/cgi-lib/
Net
Español
submit_user.cgi
Registros
Self
www.selfpromotion.com
Inglés
Promotion
Submit
www.submitexpress.com/submit.html Inglés
Express
www.submit4free.com
Submit
Inglés
Shack
Submit
www.submitxtras.com
Inglés
Xtras
Super Link
www.hassan.com/superlinkadder
Inglés
Adder
Consejos para realizar el alta en buscadores
Para que nuestro sitio sea correctamente indexado por los buscadores, deberemos utilizar los
META tags. Los META tags son porciones de código HTML que contienen información referida al sitio
pero invisible al navegador. Estos tags cumplen las siguientes funciones:
Palabras claves:
permiten que nuestro sitio sea encontrado fácilmente en función de
&"
esas palabras. Por ello, estas palabras deben dar una idea general del web site, siendo como máximo 10.
La sintaxis está dada por:
<META NAME=”keywords” CONTENT=”palabra1, palabra2, ........ ,palabra10”>
Descripción: mediante este tag podemos controlar la forma en que aparecerá nuestro sitio
&"
en los resultados de la búsqueda, es decir, la descripción del sitio que aparece a continuación del título de
la página. Esta descripción no puede superar los 255 caracteres para que los buscadores la acepten. Su
sintaxis es:
<META NAME=”description”
CONTENT=” tipear la descripción que desee”>
Los tags META deben ubicarse preferentemente en todas las páginas dentro de la cabecera, es
decir entre los tags <HEAD> y </HEAD>
37
Algunos trucos
# Un lugar donde es conveniente incluir las keywords es en el título del sitio (entre los tags
<TITLE> y </TITLE>), ya que todos los motores de búsqueda los utilizan como referencia. Cada una de
nuestras páginas deberá tener un título y dicho texto aparecerá en el lado izquierdo de la barra de títulos
de nuestro navegador. Por ejemplo, si accedemos al site de la disco ‘El Puente’ con Microsoft Internet
Explorer, en la barra de títulos de dicho aplicativo aparecerá: “El puente – Microsoft Internet
Explorer”. Queda demostrada la importancia del título en un web site.
# Otro lugar donde debemos mencionar las palabras claves es dentro de los primeros 200
caracteres del cuerpo del documento HTML (entre los tags <BODY> y </BODY>)
Otras opciones para atraer visitantes
Intercambio de banners
Este servicio sumamente sencillo y útil consiste en intercambiar banners con otros web sites. De
esta forma logramos que el banner publicitario de nuestro sitio sea visto en miles de web sites, llegando
así a muchos usuarios. Existen empresas que realizan esta actividad, algunas en forma gratuita y otras son
rentadas. Para participar de lo intercambios deberemos:
1. Armar un banner de nuestro sitio de 468 x 60 pixeles que no ocupe más de 8 KB. Puede
ser estático o animado, pero siempre muy llamativo.
2. Inscribirse en un (o varios) sistema de intercambio de banners.
3. Deberemos incluir una porción de código HTML en nuestras página que mostrará los
banners del sistema de intercambio.
4. Las prestatarias de este servicio generalmente estipulan que por cada tres carteles
publicitarios de los adheridos al sistema que mostremos en nuestro sitio, se verán dos
banners nuestros en los web sites participantes.
5. Obtendremos también estadísticas del funcionamiento del sistema de banners,
permitiendonos saber la cantidad de veces que se vio nuestro cartel, la cantidad de clicks
que tuvo, cuántos banners del sistema mostramos en otros sitios y los clicks del mismo.
Algunas prestadoras gratuitas del servicio de intercambio de banners son:
'" Clic
Latino:
Network:
'" Spanish Banner:
'" InterBanners:
'" BannerLandia
'" Te Aviso Network
'" Cambia
www.clicklatino.com
www.cambia.net
www.spanishbanner.com
www.interbanners.com.ar
www.bannerlandia.com
www.teaviso.com.ar
38
BANNERSITO
Web Rings
Los llamados web rings o anillos son agrupaciones de web sites que tratan un tema en común:
cine, deportes, filosofía, política,....... Al instalar el sistema en nuestro sitio, el visitante podrá acceder
fácilmente a los sitios que integran el web ring, de igual manera, los visitantes de los sitios adheridos
podrán fácilmente llegar al nuestro.
Algunos prestadores de web rings son:
("Spanish Ring
("Web Ring
("El Anillo Argentino
www.spanishring.com
www.webring.org
www.anillo.com.ar
Parte IV
Actividad n° 1
1. Crear un documento llamado index.htm
2. En index.htm asignar color amarillo al fondo y rojo para las letras. Escribir “UTN - FRC” como
título en la parte superior de la página con letra grande y centrarlo. El mismo texto deberá aparecer en
la barra de títulos del cliente de Web cuando se cargue la página en cuestión.
3. Ingrese
abajo
de
un
subtítulo
llamado
“Descripción”
el
siguiente
párrafo:
“
Las siglas UTN significan ‘Universidad Tecnológica Nacional’, mientras que FRC son las
abredviaturas de Facultad Regional Córdoba.Este site muestra algunos aspectos de la sede cordobesa de la mentada casa de altos estudios”.
4. Con un editor de texto crear 2 nuevos documentos html denominados laboratorio y catedras. Titular
cada pagina con el nombre del archivo físico que las representa (teniendo en cuenta que dicho título
también deberá aparecer en la barra de títulos del cliente web). La página de ‘catedras’ deberá tener
fondo verde y letras blancas, mientras que en ‘laboratorio’ deberá advertirse un fondo negro y letras
amarillas.
5. En index.htm agregar dos links (uno abajo del otro y centrados) a los archivos catedras.htm y
laboratorio.htm.
6. Agregar en cada página los links que sean necesarios a fin de poder llegar a los restantes documentos
estando en cualquiera de las páginas.
7. En rectorado.htm insertar una imagen alineada a la derecha. Cambiar el borde de dicha imagen y
setear el ancho en 240 y el alto en 90.
8. En el documento html de catedras, luego del título confeccionar una lista numerada con al menos 7
materias de la carrera Ing. en Sistemas de Información. Poner un título a la lista en negrita.
9. En laboratorio.htm agregar, luego del título de la página, una tabla de tres columnas y una fila. La
tabla contendrá información inherente al día de utilización del laboratorio de computación para el
cursado del práctico de RIN; utilizar un fondo rojo y letras amarillas para la tabla. El esquema
solicitado está dado por:
TURNO
Mañana/Tarde/Noche
DIA
HORAS
Lunes, .......... ,Viernes 1° y 2°, ..... , 5° y 6°
10. En index.htm agregue una opción que permita enviar un e-mail con sugerencias a la casilla ‘
[email protected] ’.
39
Actividad n° 2
("En Ms-Word generar una lista numerada con 5 elementos utilizando la herramienta “numeración y
viñetas” y asignar el color azul al texto de la lista. Incorporar a la página el siguiente título: “Test de
HTML en Word” en color verde. Posteriormente insertar una tabla (utilizando las herramientas de
Word) de 5 columnas y 3 filas con fondo azul. Guardar como página web bajo el nombre ‘test’.
Resolución
<HTML>
<HEAD>
<TITLE> UTN - FRC </TITLE>
</HEAD>
INDEX.HTM
<BODY TEXT="RED"
BGCOLOR="YELLOW" >
<H1 ALIGN="CENTER"> UTN - FRC </H1>
<H2 ALIGN="left"> Descripcion </H2>
<P ALIGN="CENTER" >
Las siglas UTN significan 'Universidad Tecnológica Nacional', mientras que FRC son las
abredviaturas de Facultad Regional Córdoba.Este site muestra algunos aspectos de la sede cordobesa de la mentada casa de altos estudios".
</P>
<P ALIGN="CENTER"><A HREF="catedra.htm">CATEDRA</A></P>
<P ALIGN="CENTER"><A HREF="laboratorio.htm">LABORATORIO</A></P>
<P ALIGN="LEFT"><A HREF="mailto: [email protected]"> Envienos su
sugerencia</A></P>
</BODY>
</HTML>
40
<HTML>
<HEAD>
<TITLE> CATEDRAS </TITLE>
</HEAD>
<BODY TEXT="WHITE"
CATEDRAS.HTM
BGCOLOR="GREEN" >
<H1 ALIGN="CENTER"> CATEDRAS UTN - FRC </H1>
<IMG ALIGN="RIGHT" BORDER="7" SRC="SOL.JPG" WIDTH="241" HEIGHT="89">
<H2><STRONG> Ingenieria en Sistemas de Información </STRONG></H2>
<P> <OL>
<LI>Algoritmos y estructuras de datos
<LI>Matemática discreta
<LI>Análisis Matemático I
<LI>Análisis Matemático II
<LI>Paradigmas de programación
<LI>Sistemas operativos
<LI>Redes de información
<LI>Gestión de datos
<LI>XBase: programación y desarrollo
</OL> </P>
<P ALIGN="CENTER"><A HREF="index.htm">HOME</A></P>
<P ALIGN="CENTER"><A HREF="laboratorio.htm">LABORATORIO</A></P>
</BODY>
</HTML>
41
<HTML>
LABORATORIO.HTM
<HEAD>
<TITLE>LABORATORIO</TITLE>
</HEAD>
<BODY TEXT="YELLOW"
BGCOLOR="BLACK">
<H1 ALIGN="CENTER"> LABORATORIO UTN - FRC </H1>
<TABLE BORDER="3"
BGCOLOR="RED"
ALIGN="CENTER">
<TR><STRONG>
<TH>TURNO
<TH>DIA
<TH>HORAS
</STRONG><TR>
<TD>mañana/tarde/noche
<TD>lunes, martes,...
<TD>1°-2°, 3°-4°, ...
</TABLE>
<P ALIGN="CENTER"><A HREF="index.htm">HOME</A></P>
<P ALIGN="CENTER"><A HREF="catedra.htm">CATEDRAS</A></P>
</BODY>
</HTML>
42
Cuestionario
1) Defina la estructura básica de un documento HTML.
2) ¿ Cuáles son las sentencias que se utilizan para asignar jerarquías a los títulos ?
3) ¿ Cómo se realizan los cortes de línea en los documentos HTML ?
4) Escriba la sentencia que permite insertar una imagen alineada a la izquierda que se encuentra en un
archivo llamado ‘ camion.jpg ’ sito en el mismo directorio en el cual está trabajando.
5) ¿ Con qué comando se crean los hipervínculos ?
6) ¿ Cómo se realiza un lista ordenada y una desordenada ? Realice un ejemplo para cada caso
conteniendo al menos tres elementos en cada lista.
7) Explique las sentencias HTML necesarias para la incorporación de una tabla en un documento web.
8) Nombre al menos dos herramientas disponibles en el mercado que posibiliten la creación de páginas
web.
9) ¿ Ante qué organismo deben tramitarse los permisos de utilización de nombres para dominios del tipo
‘ www.nombre.com.ar ’ en Argentina ? . Indique su portal en Internet.
10) Mencione al menos tres prestadores gratuitos del servicio de hosting.
11) Escriba las sentencias HTML necesarias para indexar un página con las siguientes palabras clave:
redireccionar, hosting, delivery, bridge, unknowed.12) ¿ En qué consiste el intercambio de banners y para qué se utiliza ?
43

DISEÑO, PUBLICACIÓN y PROMOCION en la WEB

Transcripción

Documentos relacionados

Manual Básico de html

Presentación en formato PDF de la sesión 1