DISEÑO, PUBLICACIÓN y PROMOCION en la WEBEstructura de un documento HTML Una página Web es un...

Universidad Tecnológica Nacional – F.R.C Redes de Información (RIN)

23

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.


24

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


25

En la última linea del código del ejemplo esta

</HTML>. Esto le indica al cliente (Netscape) que terminó el

documento. Noten que: <HEAD> tiene

su correspondient

e llave de cierre

</HEAD>, y <BODY> tiene

</BODY>. Esto es

fundamental incluirlo en la página para 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>

Parámetros Descripción

BACKGROUND="imagen.gif"

Permite incluir una imágen de fondo. No poner una imágen muy 'pesada' de fondo, no mas de 15k. No olvidar verificar que no dificulte la lectura del texto.

BGCOLOR="#xxxxxx"

Cambia el color de fondo de una página. Donde va cada x va un número hexadecimal, del 0 a la F. Las dos primeras xx corresponden al rojo, las 2 siguientes al verde y las restantes al azul. Ej: para un fondo blanco poner todos los valores al máximo: FFFFFF. Para un fondo rojo: FF0000. También pueden usarse los nombres en inglés de los colores en lugar de su código. Por ejemplo BGCOLOR=”BLACK”

TEXT="#xxxxxx"

Cambia el color del texto de toda una página. La selección de color funciona igual para todos los casos. Aquí también pueden usarse los nombres en inglés de los colores.-

LINK="#xxxxxx" Cambia el color de todas las conexónes (links) de

toda una página.

VLINK="#xxxxxx" Cambia el color de todas las conexónes visitadas

(links) de toda una página.


26

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

<H1> </H1> 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.

<STRONG> </STRONG> Muestra en texto seleccionado más fuerte. Casi todos lo muestran como bold.

<EM> </EM> Muestra en texto sellecionado con énfasis. Casi todos lo muestran como italic

<BR> Indica un corte de línea. <HR> Inserta un separador.

<P> </P> Indica un comienzo de párrafo. Tiene como opciones ALIGN

(center, left y right). Util para centrar o alinear a la derecha texto. Cada comiezo de párrafo deja un espacio separador.

ALIGN= “opción” Para alinear párrafos y títulos; sus opciones son CENTER, LEFT, RIGHT, ...

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.


27

IMG SRC

Para incluir una imágen se utiliza el comando <IMG>.

IMG acepta una gran variedad de parámetros y es muy flexible. Veamos algunos:

Parámetros de IMG


SRC Indica el nombre de archivo de la imagen a incluir.

HEIGHT Indica la altura de la imagen. El Netscape, si la altura no

coincide con la original de la imagen, esta es estirada o achicadapara 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.

ALIGN Permite alinear una imagen. Acepta LEFT, RIGHT,BOTTOM, TOP, MIDDLE, etc.

LOWSRC Indica el nombre de archivo de la versión de carga rápida de

una imagen. Muy útil para agilizar el despliegue de una páginapesada.

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>


28

</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>

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.

• papas • manteca • dulce de leche • pan


29

<UL TYPE="square"> <LI>papas <LI>manteca <LI>dulce de leche <LI TYPE=DISC>pan </UL> <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 <OL> <LI>papas <LI>manteca <LI>dulce de leche <LI>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>

#"papas #"manteca #"dulce de leche #"pan

$" papas $" manteca $" dulce de leche $" pan

1. papas 2. manteca 3. dulce de leche 4. pan

A. papas B. manteca C. dulce de leche D. pan


30

<OL TYPE=a> <LI>papas <LI>manteca <LI>dulce de leche <LI>pan </OL> <OL TYPE=I> <LI>papas <LI>manteca <LI>dulce de leche <LI>pan </OL> <OL TYPE=i> <LI>papas <LI>manteca <LI>dulce de leche <LI>pan </OL>

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>

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 ;)

a. papas b. manteca c. dulce de leche d. pan

I. papas II. manteca III. dulce de leche IV. pan

i. papas ii. manteca iii. dulce de leche iv. pan

i. papas ii. manteca iii. dulce de leche

1. conaprole 2. milky 3. lapataia

iv. pan


31

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

</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:


HEIGHT

Indica la altura de la celda. Para especificar el tamaño en pixelssolo ingresar la contidad, ej: HEIGHT=340 ; también se puede ingresar eltamaño en porcentajes, ej: HEIGHT=30%

WIDTH Indica el ancho de la celda.

ALIGN Permite alinear el texto dentro de una celda. Acepta LEFT,RIGHT, CENTER.

VALIGN Permite alinear el texto verticalmente dentro de una celda. AceptaTOP, BOTTOM, CENTER.

BGCOLOR Permite especificar el color de fondo de una celda. (solo se ve en Netscape 3.0)

BORDER=”n°” Comando regulador del grosor del borde (Por defecto no

aparecen las lineas divisorias y constitutivas de la tabla, es decir,BORDER=”0”).

1996 1997

30 millones 80 millones


32

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.


33

Parte II

Publicación Conceptos preliminares

Un dirección web se compone de la siguiente manera:

http://www.nombre.com.ar

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 )

Subdominio: computadora de la redinterna a laque nosconectamos.

Nombre: esel nombre del dominio.

País: identifica al paísdonde 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 -.....

Tipo de recurso y protocolo de transferencia Aquí se trata de protocolo de transferencia de hipertexto


34

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 e-mail.- 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:


35

o Servidor Primario: ns3.freeservers.com o IP del Servidor Primario: 209.210.67.153 o Servidor Secundario: ns4.freeservers.com o 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 Espacio Extras Publicidad Precio Yahoo!Geocities www.geocities.com/

barrio/subbarrio/número 11 MB E-mail; Comunidades Se abre una ventana Gratis

Xoom members.xoom.com/ nombre 100 MB E-mail; Comunidades Frame superior Gratis

WebJump nombre.webjump.com 25 MB E-mail Frame Gratis

Comerciales www.nombre.com.ar

Varíable (ilimitado o

muy grande)

E-mail; POP; control absoluto; CGIs ilimitados; ......

No U$S 20 en adelante

FreeServers www.nombre.com.ar 20 MB E-mail ilimitado;CGIs;.....

Banner en cada página

Gratis (o U$S 5 sin el banner)

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.


36

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 Dirección Buscador Clarín buscar.clarín.com.ar/cgi-bin/incluir.cgi Caray Garay ! serv.caraygaray.com.ar/v/addsite/0/0 La Brújula www.brujula.net/agregar Donde www.donde.com.ar/agregarurl.asp Gauchonet www.gauchonet.com.ar/buscador/agrega.htm RadAr www.radar.com.ar/sume.cgi Grippo www.grippo.com/argentina/addurl.htm Sabueso www.sabueso.com.ar Guia.com.ar www.guia.com.ar/search/agregue.htm DNA www.dna.com.ar/addurl.html Ahijuna! www.ahijuna.com.ar/agrsitio.htm Plux plux.com.ar/dir/add.cgi Muuú www.muuu.com/cgi-bin/geo/add_easy.cgi Uol Argentina www.oul.com.ar

Alta automática en buscadores

Nombre Dirección Idioma Buscadores hispanos

Buscadores Internacionales

Add it ! www.liquidimaging.com/submit Inglés - 20

Add me www.addme.com Inglés - 34

Agrega Web www.cyler.com/agregaweb Español 14 16

Auto Regístralo www.atajos.com/autoregistralo.html Español 34 16

Dejar Huella www.lpis.com/huella Español 54 17

Easy Submit

www.dotcom.ca/easysubmit/ websubmit.htm Inglés - 900

FFAbc.com www.ffabc.com/submission/form1.htm Inglés - 2500


37

Hot Yellow www.hotyellowlinks.com Inglés - 500

Jim Tools www.jimtools.com/submit.html Inglés - 400

Mega Registro www.dirglobal.net/cgi-win/forma2.exe Español - 20

My Free Office www.myfreeofficelinks.com Inglés - 2700

Net Registros

home.registros.net/cgi-lib/ submit_user.cgi Español 13 6

Self Promotion www.selfpromotion.com Inglés - 290

Submit Express www.submitexpress.com/submit.html Inglés - 40

Submit Shack

www.submit4free.com Inglés - 400

Submit Xtras www.submitxtras.com Inglés - 1200

Super Link Adder www.hassan.com/superlinkadder Inglés - 52

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>


38

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: www.clicklatino.com '"Cambia Network: www.cambia.net '"Spanish Banner: www.spanishbanner.com '"InterBanners: www.interbanners.com.ar '"BannerLandia www.bannerlandia.com '"Te Aviso Network www.teaviso.com.ar

BANNERSITO


39

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 www.spanishring.com ("Web Ring www.webring.org ("El Anillo Argentino 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 DIA HORAS

Mañana/Tarde/Noche 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] ’.


40

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

INDEX.HTM


41

<HTML> <HEAD> <TITLE> CATEDRAS </TITLE> </HEAD> <BODY TEXT="WHITE" 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>

CATEDRAS.HTM


42

<HTML> <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>

LABORATORIO.HTM


43

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 ?

Cuestionario

DISEÑO, PUBLICACIÓN y PROMOCION en la WEBEstructura de un documento HTML Una página Web es un...

Documents

Transcript of DISEÑO, PUBLICACIÓN y PROMOCION en la WEBEstructura de un documento HTML Una página Web es un...