Apuntes Paginas WEB

Elaboracion de Pginas
Docentes: LSC. ELVIA MICAELA URBINA VISCENCIO. LSC. MA. EUGENIA ACUA R. AGOSTO 2010/ENERO 2011
MANUAL
ALUMNO:_______________________________ GRUPO:_____________
ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________
ELABORACION DE PGINAS WEB.

1. ANALIZAR LOS ELEMENTOS FUNDAMENTALES DEL DISEO
1.1. ANALIZAR LAS TEORIAS DEL DISEO 1.2. IDENTIFICAR EL IMPACTO Y EL ENFOQUE EN DISEOS EXISTENTES. 1.3. DISEAR FORMATOS CONSIDERANDO LAS ZONAS AUREAS, DIRECCION SENTIDO Y EQUILIBRIO. 1.4. APLICAR LA TEORIA DEL COLOR CONSIDERANDO EL CIRCULO CROMATICO, CONSTRASTES, EL RGB Y CMY.
2. MANEJAR LOS ELEMENTOS BASICOS DE UN LENGUAJE USADO EN LA CREACION DE PGINAS WEB.

2.1. DEFINIR OBJETIVOS Y CONTENIDOS DE LA PGINA WEB. 2.2. ESQUEMATIZAR LA ESTRUCTURA GENERAL DE UNA PAGINA WEB. 2.3. UTILIZAR ETIQUETAS EN UNA PAGINA WEB. 2.4. ESTABLECER VINCULOS E HIPERVINCULOS. 2.5. MANIPULAR OBJETOS Y FORMULARIOS EN UNA PAGINA WEB. 2.6. MANIPULAR TABLAS EN UNA PAGINA WEB. 2.7. MANIPULAR IMGENES Y ANIMACIONES EN UNA PAGINA WEB. 2.8. DEFINIR SECCIONES DE MAPEO DE IMGENES EN UNA PAGINA WEB. 2.9. INSERTAR SONIDO Y VIDEO EN UNA PAGINA WEB. 2.10. IMPLEMENTAR SERVICIOS DE CORREO EN UNA PAGINA WEB.
3. DISEAR UNA PAGINA WEB CON UN SOFTWARE DE APLICACIN.

3.1. DEFINIR OBJETIVOS Y CONDENIDOS DE LA PGINA WEB. 3.2. ESTABLECER ETIQUETAS EN LA PGINA WEB. 3.3. ESTABLECER LINKS DENTRO DE LA PGINA WEB, ENTRE PGINAS WEB Y ENTRE SERVIDORES. 3.4. MANIPULAR IMGENES DENTRO DE LA PGINA WEB. 3.5. ESTRUCTURAR TABLAS EN UNA PAGINA WEB. 3.6. INSERTAR SONIDO Y VIDEO EN UNA PAGINA WEB. 3.7. ALMACENAR PGINAS WEB EN UN SERVIDOR DEDICADO O GRATUITO.
4. PUBLICAR PAGINAS WEB EN LOS SERVIDORES DE INTERNET

4.1. IDENTIFICAR LOS SERVIDORES DE INTERNET DISPONIBLES PARA PUBLICACION DE INFORMACION. 4.2. SELECCIONAR UN SERVIDOR DE INTERNET CONSIDERANDO LAS CARACTERISTICAS DE LA PGINA WEB. 4.3. UTILIZAR LA PGINA DEL SERVIDOR DE INTERNET PARA ALOJAR UNA PAGINA WEB. 4.4. VERIFICAR EL FUNCIONAMIENTO DE LA PGINA WEB DENTRO DEL SERVIDOR SELECCIONADO.
INFORMATICA
TERCER SEMESTRE
5. ANALIZAR LOS ELEMENTOS FUNDAMENTALES DEL DISEO

Qu es el diseo? Proceso de creacin visual con un propsito, el cual cumple con exigencias practicas. Un buen diseo es la mejor expresin visual de la esencia de `algo` cuya creacin no debe ser solo esttica sino tambin funcional.
ELEMENTOS DEL DISEO

Los siguientes elementos son las bases que construyen el Diseo. Lnea Una lnea es definida como una marca con longitud y direccin, creada mediante un punto que se mueve a lo largo de una superficie. Una lnea puede variar en longitud, ancho, direccin, curvatura y color. La lnea puede ser de dos dimensiones (una lnea de lpiz sobre papel), o tres dimensiones implcitas. Forma Una figura plana o una forma es creada cuando lneas actuales o implcitas se encuentran alrededor de un espacio. Un cambio en el color o el sombreado puede definir una forma. Las formas pueden ser clasificadas en varios tipos: geomtricas (cuadrado, tringulo, crculo) y orgnicas (irregulares en contorno). Tamao
INFORMATICA
TERCER SEMESTRE
Este se refiere a las variaciones de las proporciones de los objetos, lneas o formas. Hay una variacin de tamao en objetos ya sean reales o imaginarios.
Espacio Espacio es el rea vaca o abierta entre, alrededor, arriba, debajo o entre objetos. Figuras y formas son realizadas en el espacio alrededor y entre l. El espacio tambin es llamado bidimensional o tridimensional. El espacio positivo es rellenado con formas o figuras. El espacio negativo rodea una forma o figura.
Color El Color es el carcter percibido de una superficie de acuerdo con la longitud de onda o la luz reflejada desde esta. El Color posee tres dimensiones: TINTE (otra palabra para color, indicada por su nombre as como rojo o amarillo), VALOR (su luminosidad o oscuridad), INTENSIDAD (su brillo u opacidad). Textura La Textura es la forma como se siente la superficie (textura actual) o como puede ser observada (textura implcita). Las Texturas son descritas con palabras como spero, sedoso o rugoso. Valores El Valor es que tan oscuro o claro se ve algo. Podemos alcanzar cambios de valores en el color por medio de la adicin de blanco o negro a dicho color. Claroscuro usa valores en los dibujo mediante contrastes de claros y oscuros en una composicin.
Principios de Diseo
INFORMATICA
TERCER SEMESTRE
Los principios emplean elementos del diseo para crear composiciones. Balance El Balance es el sentido de equidad visual en una forma, figura, valor, color, etc. El Balance se puede hacer simtrica o uniformemente en objetos, valores, colores, texturas, formas, etc.,
Contraste
El contraste es yuxtaposicin (fusin) los elementos opuestos.
la de
nfasis El nfasis es usado para crear ciertas partes de sus trabajos artsticos a travs de llamado atencin de manera especial. El centro de inters o punto foco es el lugar del dibujo que le invita a enfocar su mirada.
Proporcin
La Proporcin describe el tamao, ubicacin o el monto de una cosa comparada con otra.
INFORMATICA
TERCER SEMESTRE
Patrones Los Patrones son creados mediante la repeticin de un elemento (lnea, forma o color) una y otra vez.
Gradacin
La Gradacin es el tamao y direccin producidos por una perspectiva lineal. La Gradacin del color es desde gamas calidas a fras y por su parte los tonos oscuros a claros producen una perspectiva area. La Gradacin puede agregar inters y movimiento a una forma Composicin
La combinacin de distintos elementos para formar un todo.
1.1.
ANALIZAR LAS TEORIAS DEL DISEO.
MINIMALISMO. El minimalismo es una corriente esttica derivada de la reaccin al pop art. Frente al colorismo, a la importancia de los medios de comunicacin de masas, frente al fenmeno de lo comercial y de un arte que se basaba en la apariencia, el minimalismo utiliz conceptos diametralmente opuestos. El sentido de la individualidad de la obra de arte, la privacidad, una conversacin conceptual entre el artista, el espacio circundante y el espectador. As como la importancia del entorno como algo esencial para la comprensin y la vida de la obra. Los preceptos bsicos del minimalismo son: a. Utilizar colores puros, b. Asignarle importancia al todo sobre las partes, c. Utilizar formas simples y geomtricas realizadas con precisin mecnica, d. Trabajar con materiales industriales de la manera ms neutral posible y disear sobre superficies inmaculadas.
INFORMATICA TERCER SEMESTRE
e. Da gran importancia al espacio y a los materiales ecolgicos f. El resultado que define este estilo en un concepto es la palabra limpieza. Hay muchas variantes del minimalismo, con un toque ms o menos oriental, o ms o menos escandinavo. Actualmente tiene gran difusin en Europa, entre los ms jvenes, sumado a toda una corriente de muebles de diseo dans contemporneo.
La decoracin minimalista, se nutre de las formas puras, simples, y juega con sus volmenes, su iluminacin y sus superficies.
Los creadores minimalistas reducen al mximo los elementos propios del arte, los volmenes y formas en escultura. De forma anloga proceden en la arquitectura o en la pintura. Intentan condensar en escasos elementos sus principios artsticos y reflexiones.
CONCEPTUALISMO. El movimiento artstico surgido a finales de los aos sesenta, cuyos exponentes rechazan el arte como artculo de lujo, permanente, porttil y vendible, proponiendo un tipo de arte en el que cuenta primordialmente la idea o el concepto que respalda sus realizaciones Los artistas conceptuales utilizaron con frecuencia fotos, recortes de peridicos como parte de su creacin, para documentar o para expresar ideas, como por ejemplo:
Juan Camilo Uribe
Alicia Barney
INFORMATICA
TERCER SEMESTRE
LydiaAzout
Antonio Caro (1950-
Bernardo Salcedo
Becky Mayer
Alicia Barney
Rosemberg Sandoval
Inginio Caro
Adolfo Bernal
INFORMATICA
TERCER SEMESTRE
1.2.
IDENTIFICAR EL IMPACTO Y EL ENFOQUE EN DISEOS EXISTENTES.
Si bien las definiciones no pueden ser tajantes ni excluyentes, resulta necesario asumir que creatividad e innovacin, arte y diseo se parecern en la medida que las busquemos en mbitos cuyos modos de hacer mantengan alguna identidad y dejarn de parecerse en tanto nos alejemos de esos puntos en los que coinciden. El arte cuando se convierte en industria comercial va a tender a parecerse ms al diseo que al arte callejero, del mismo modo que la creatividad empresarial puede conducir a la innovacin de la misma forma que la innovacin tecnolgica puede inducir cierto estilo de creatividad, ejemplo claro de esto fue en los 80s y 90s la incorporacin de los software digitales al proceso de diseo. Queda agregar que hay descripciones definitivas en los mbitos del diseo para evitar que comencemos a confrontar y asumir que nuestro radio de accin es permeable y sensible a sinnmero de circunstancias. Que algunas de ellas no agotan la complejidad de la produccin en serie, que unas pocas se han vuelto ajenas a las urgencias del mercado, que otras muchas se han convertido en iconos de algunos productos o servicios y que unas cuantas han aceptado jugar el juego mundial de la creacin de valor, la identidad corporativa, los medios y los productos de consumo. El sector de servicios est creciendo, tanto en nmero de empleados como en su importancia en la economa, mientras el sector manufacturero decae. Sin embargo, as como los sectores manufactureros, los servicios deben ser diseados y su diseo debe ser gestionado. El diseo de servicios puede ser tangible como intangible. Puede involucrar artefactos y otras cosas incluyendo comunicacin, ambientes y conductas. Cualquier forma que adopte debe ser consistente, fcil de usar y ser aplicado estratgicamente. Slo recientemente los gerentes involucrados en el sector de servicios se han dado cuenta que un esfuerzo conciente por aplicar tcnicas de diseo a los servicios puede resultar en un incremento en la satisfaccin de clientes, mayor control sobre sus ofertas y mayores ganancias. 1.3. DISEAR FORMATOS CONSIDERANDO LAS ZONAS AUREAS, DIRECCION, SENTIDO Y EQUILIBRIO.
INFORMATICA
TERCER SEMESTRE
Toda obra de comunicacin visual nace de la necesidad de transmitir un mensaje especfico. Un diseador grfico no es un creador de formas, sino un creador de comunicaciones, un profesional que mediante un mtodo especfico (diseo) construye mensajes (comunicacin) con medios visuales (grafismos). No es el creador del mensaje, sino su intrprete. El principal componente de toda composicin grfica es pues el mensaje a interpretar, la informacin que se desea hacer llegar al destinatario a travs del grafismo. Esta informacin se debe representar por medio de diferentes elementos grficos, que pueden ser muchos y variados, aunque los ms comunes son: Elementos grficos simples: puntos y lneas de todo tipo (libres, rectas, quebradas curvas, etc.) Elementos geomtricos, con contorno o sin l: polgonos, crculos, elipses, valos, etc. Tipos: letras de diferentes formas y estructura, utilizadas para presentar mensajes textuales. Grficos varios: logotipos, iconos, etc. Ilustraciones Fotografas Cualquier otro elemento visual apto para comunicar un mensaje.
a. ZONAS AUREAS. La cre Vitruvio, la autoridad romana en arquitectura. Ide un sistema de clculo matemtico de la divisin pictrica, para seccionar los espacios en partes iguales y as conseguir una mejor composicin. Se basa en el principio general de contemplar un espacio rectangular dividido, a grandes rasgos, en terceras partes, tanto vertical como horizontalmente.
La escala se utiliza en planos y mapas para la representacin de una medicin proporcional real. La medicin nos permite adecuarnos a la realidad, pero ms importante es lo que colocamos junto al objeto visual o el marco en el que est colocado. La medicin universal es la propia medida del hombre, el tamao medio de las proporciones humanas. La pregunta que hacen todos los diseadores es: cmo podemos distribuir el espacio de diseo de una forma acertada? Pues bien, no hay una norma que nos indique la divisin perfecta, pero existe una frmula muy conocida en el mundo del diseo, que permite dividir el espacio en partes iguales, para lograr un efecto esttico agradable y que puede llegar a ser muy eficaz. Esta teora se denomina "La regla urea", tambin conocida como "seccin urea". b. DIRECCION Y SENTIDO. En la comunicacin visual el diseador tendr que tener en cuenta tanto la vertiente psicolgica de la percepcin humana como las significaciones culturales que pueden tener ciertos elementos.
El diseador grfico es una especie de arquitecto del espacio grfico y debe distribuir los elementos en funcin de una estructura interna que tenga una significacin, gua o intencin coincidente con el mensaje que se quiera transmitir. Esta estructura ser la responsable de la eleccin cromtica y su intencionalidad expresiva, de la eleccin de las imgenes o de la disposicin de los bloques de texto. Algunos factores psicolgicos que debemos conocer son: a. El equilibrio: El receptor tiene necesidad de buscar el equilibrio de la composicin y los ejes en los cuales descansa. El desequilibrio crea provocacin e inestabilidad. Tendremos que analizar que es lo que queremos transmitir al receptor y con respecto a esto crear una composicin determinada. b. La referencia horizontal: Necesitamos ver que los objetos o partes que componen una composicin estn de alguna forma apoyados. La parte inferior se ver mejor que la superior, ya que ser donde se constituya la base. c. Angulo inferior izquierdo: Los hbitos de lectura occidentales han motivado propiciado que la atencin se centre ms en la parte izquierda y en concreto en la inferior izquierda. d. Relajamiento-tensin: psicolgicamente cuando tenemos una composicin equilibrada, simtrica o predecible; sin embargo generaremos tensin en el receptor si no es capaz de encontrar una lgica visual en la composicin que le presentamos.
c. EQUILIBRIO. La utilizacin ms eficaz de los mecanismos de la percepcin visual consiste en identificar claves visuales en un sentido u en otro, en equilibrio o en desequilibrio, fuertes o dbiles. Podemos conseguir en nuestra composicin ese equilibrio de formas y lneas, es decir, los pesos de los elementos deben estar compensados. La manera de medir el peso de las formas y lneas del diseo es, analizando la importancia visual de estos dentro de nuestra composicin. Existen dos tipos de equilibrio: El equilibrio simtrico. El equilibrio asimtrico.
Si dividimos la composicin en dos extremos, el equilibrio simtrico se produce cuando encontramos igualdad de peso y tono en ambos lados de nuestra composicin, y el equilibrio asimtrico se produce cuando no existe las mismas dimensiones (ya sea de tamao, color...) en ambos lados, pero an as existe equilibrio entre los elementos.
El equilibrio que crea la simetra es un factor importante de la forma en que evaluamos el atractivo visual de un objeto. Sin embargo, el atractivo de la simetra tiene lmites; un toque de asimetra puede hacer que resulte an ms atractivo, aadiendo un toque de individualidad y
singularidad. La simetra, en cierta manera, da sensacin de orden y alivia la tensin; la asimetra hace lo contrario, crea agitacin y tensin, pero puede conseguir que una imagen no sea montona. Podemos hacer otra divisin de equilibrio: El equilibrio formal. Y el equilibrio informal.
El equilibrio formal se basa en la bisimetra. Se busca un centro ptico dentro del diseo, que no tiene por qu coincidir con el centro geomtrico de la composicin. Una composicin que siga este esquema compositivo reflejar estabilidad, calma y estatismo, pero no supone una composicin muy audaz.
1.4. APLICAR LA TEORIA DEL COLOR CONSIDERANDO EL CIRCULO CROMATICO, CONTRASTES, EL RGB Y CMY. Empezaremos diciendo que el color en s no existe, no es una caracterstica del objeto, es ms bien una apreciacin subjetiva nuestra. Por tanto, podemos definirlo como, una sensacin que se produce en respuesta a la estimulacin del ojo y de sus mecanismos nerviosos, por la energa luminosa de ciertas longitudes de onda. El color es pues un hecho de la visin que resulta de las diferencias de percepciones del ojo a distintas longitudes de onda que componen lo que se denomina el "espectro" de luz blanca reflejada en una hoja de papel. Estas ondas visibles son aquellas cuya longitud de onda est comprendida entre los 400 y los 700 nanmetros; ms all de estos lmites siguen existiendo radiaciones, pero ya no son percibidos por nuestra vista. En las artes grficas tenemos dos grandes categoras con respecto al color, imagen en color e imagen en blanco y negro, en stas ltimas podemos diferenciar: - imgenes a pluma. imgenes tramadas: mediante diferentes tipos de gris. Asimismo, las imgenes en color se pueden dividir en dos categoras: - colores planos: manchas uniformes de color. - degradados, tambin tramadas. El color es un elemento bsico a la hora de elaborar un mensaje visual. Muchas veces, el color no es un simple atributo que recubre la forma de las cosas en busca de la fidelidad reproducida. A pesar de que, sin el color la forma permanece, con frecuencia el Mensajes es, precisamente, el Color, o lo que slo puede expresarse por el Color. El color est presente en todos los aspectos de la identidad empresarial y de marca. En la identidad, las empresas pueden hacer que el color sea el principal elemento de su identidad utilizando un nico color o una paleta de colores como parte de su identidad visual. Si el color se emplea uniformemente en una serie de elementos de la identidad, se termina convirtiendo en la rbrica de la empresa.
d. CIRCULO CROMATICO. El ojo humano puede distinguir entre 10.000 colores. Se pueden adems emplear tres dimensiones fsicas del color para relacionar experiencias de percepcin con propiedades materiales: saturacin,
INFORMATICA
TERCER SEMESTRE
brillantez y tono. El crculo cromtico nos sirve para observar la organizacin bsica y la interrelacin de los colores. Tambin lo podemos emplear como forma para hacer la seleccin de color que nos parezca adecuada a nuestro diseo. Podemos encontrar diversos crculos de color, pero el que aqu vemos est compuesto de 12 colores bsicos.
Dentro encontramos el negro, que se produce gracias a la mezcla de todos ellos. En este crculo cromtico podemos encontrar: los colores primarios: rojo, azul y amarillo; los secundarios: verde, violeta y naranja; y los terciarios: rojo violceo, rojo anaranjado, amarillo anaranjado, amarillo verdoso, azul verdoso y azul violceo.
e. RGB (RED, GREEN, BUE) y CMY (CYAN, MAGENTA, YELLOW) Los tonos secundarios se obtienen al mezclar partes iguales de dos primarios; los tonos terciarios se consiguen al mezclar partes iguales de un tono primario y de un secundario adyacente. Los
primarios son colores que se consideran absolutos y que no pueden crearse mediante la mezcla de otros colores. Sin embargo, mezclar los primarios en diversas combinaciones crea un nmero infinito de colores. Dependiendo de qu mbito, podemos encontrar tres juegos de colores primarios: Los artistas y diseadores parten de un juego formado por el rojo, el amarillo y el azul. Mezclando pigmentos de stos colores pueden obtenerse todos los dems tonos. El segundo juego de primarios es el del rojo, verde y el azul, conocidos como primarios aditivos. Son los primarios de la luz y se utilizan en el campo de la ciencia o en la formacin de imgenes de monitores. Si se mezclan en distintos tantos por ciento, forman otros colores y si lo hacen en cantidades iguales producen la luz blanca. El tercer juego se compone de magenta, amarillo y cyan. Se tratan de los primarios sustractivos y son los empleados por los impresores. En imprenta, la separacin de colores se realiza utilizando filtros para restar luz de los primarios aditivos, con lo que se obtienen los colores de impresin por proceso sustractivo. CONTRASTES.
f.
El tono: Es el matiz del color, es decir el color en s mismo, supone su cualidad cromtica, es simplemente- un sinnimo de color. Es la cualidad que define la mezcla de un color con blanco y negro. Est relacionado con la longitud de onda de su radiacin. Segn su tonalidad se puede decir que un color es rojo, amarillo, verde... Aqu podemos hacer una divisin entre: tonos clidos (rojo, amarillo y anaranjados). Aquellos que asociamos con la luz solar, el fuego... y tonos fros (azul y verde). Los colores fros son aquellos que asociamos con el agua, la luz de la luna ...
Los trminos "clido" y "fro" se utilizan para calificar a aquellos tonos que connotan dichas cualidades; stos trminos se designan por lo que denominamos "temperatura de color". Las diferencias entre los colores clidos y los fros pueden ser muy sutiles. Por ejemplo, el papel blanco puede parecer ms clido o ms fro por una leve presencia de rojo o azul. Lo mismo ocurre con el gris y el negro. La brillantez: Tiene que ver con la intensidad o el nivel de energa. Es la luminosidad de un color (la capacidad de reflejar el blanco), es decir, el brillo. Alude a la claridad u oscuridad de un tono. Es una condicin variable, que puede alterar fundamentalmente la apariencia de un color. La luminosidad puede variar aadiendo negro o blanco a un tono. En general, con los tonos puros que tienen un valor ms luminoso (amarillo, naranja, verde) se consiguen las mejores variantes claras, mientras que los tonos puros que tienen normalmente un valor normalmente menos luminoso (rojo, azul, violeta) ofrecen las mejores variantes oscuras. La saturacin: Est relacionada con la pureza cromtica o falta de dilucin con el blanco. Constituye la pureza del color respecto al gris, y depende de la cantidad de blanco presente. Cuanto ms saturado est un color, ms puro es y menos mezcla de gris posee.
6.
MANEJAR LOS ELEMENTOS BASICOS DE UN LENGUAJE USADO EN LA CREACION DE PGINAS WEB.

TERCER SEMESTRE
INFORMATICA
Para crear una pgina web requerimos de un lenguaje especial de programacin, el cual es un programa con un conjunto de instrucciones detalladas que le dirn a la computadora que hacer exactamente, paso a paso. Un programa puede ser tan corto como de una sola lnea de cdigo, o tan largo como de varios millones de lneas de cdigo. Estos son algunos de ellos: HTML. El HTML, acrnimo ingls de Hyper Text Markup Language (lenguaje de marcacin de hipertexto), es un lenguaje de marcas diseado para estructurar textos y presentarlos en forma de hipertexto, que es el formato estndar de las pginas web. Gracias a Internet y a los navegadores del tipo Explorer o Netscape, el HTML se ha convertido en uno de los formatos ms populares que existen para la construccin de documentos. DHTML. El HTML Dinmico o DHTML (del ingls Dynamic HTML) designa el conjunto de tcnicas que permiten crear sitios web interactivos utilizando una combinacin de lenguaje HTML esttico, un lenguaje interpretado en el lado del cliente (como JavaScript) y el lenguaje de Hojas de estilo en cascada (CSS). ASP. Active Server Pages (ASP), es una tecnologa propietaria de Microsoft. Se trata bsicamente de un lenguaje de tratamiento de textos (scripts), basado en Basic, y que se denomina VBScript (Visual Basic Script). Se utiliza casi exclusivamente en los servidores Web de Microsoft (Internet Information Server y Personal Web Server). Los scripts ASP se ejecutan, por lo tanto, en el servidor y puede utilizarse conjuntamente con HTML y Javascript para realizar tareas interactivas y en tiempo real con el cliente. Con ASP se pueden realizar fcilmente pginas de consulta de bases de datos, funciones sencillas como obtener la fecha y la hora actual del sistema servidor, clculos matemticos simples, etc. JAVA SCRIPT. JavaScript es un lenguaje orientado a objetos propiamente dicho, ya que dispone de Herencia, si bien esta se realiza siguiendo el paradigma de programacin 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 cdigo JavaScript integrado dentro de las pginas web. Para interactuar con una pgina web se provee al lenguaje JavaScript de una implementacin del DOM (Document Object Model, podra ser Modelo en Objetos para la representacin de Documentos), abreviado DOM, es esencialmente un modelo computacional a travs del cual los programas y scripts pueden acceder y modificar dinmicamente el contenido, estructura y estilo de los documentos HTML y XML. 2.1. DEFINIR OBJETIVOS Y CONTENIDOS DE LA PGINA WEB.
INFORMATICA
TERCER SEMESTRE
Es importante tomar una decisin para elegir qu objetivos consideramos primordiales antes del desarrollo de la pgina web. La eleccin, condiciona de manera clave la concepcin y el diseo del proyecto, el cual debe ser coherente con los objetivos de la empresa. Por ejemplo: Conseguir 250 contactos comerciales en 1 ao. Ofrecer a los clientes una herramienta de seleccin del producto ms adecuado para que se informen y comparen sin presiones Impactar al visitante con una web espectacular que refuerce la imagen de marca. Vender software directamente desde Internet buscando el ahorro de costos de distribucin. Tu web puede ser algo ms. Ya que habla por ti, por tus productos, por tus servicios, por lo que adems puede: Ofrecer al visitante ocasional una motivacin para contactar, Una razn para recordarte o quizs una utilidad que le ahorra tiempo, Encontrar una informacin que estaba buscando. Facilitar y agilizar el trabajo de colaboradores y de empleados. Apoya la imagen de marca. Vende y completa el proceso de venta. Ofrece asistencia y soporte tcnico. Facilita una comunicacin gil y fluida con tus clientes y proveedores. Cada empresa o persona debe elegir aquellos que mejor encajen con sus objetivos y las expectativas del negocio. Piensa que la definicin de objetivos te ahorrar sorpresas como disear una web pensando en los clientes, para despus descubrir que slo te visitan "extraos" ... O un diseo de web muy espectacular e innovador, cuando lo nico que se pretende es que la persona deje sus datos de email para enviarle ofertas concretas, etc. Un mismo sitio web puede perfectamente intentar cumplir varios objetivos simultneamente aunque te recomiendo que lo abordes por fases. Empieza por 2 o 3 de ellos, y a medida que vayas viendo su evolucin y aprendiendo de los errores y aciertos, puedes ir planificando nuevos objetivos. Para ilustrar estas ideas, los objetivos podemos agruparlos en: a) Buscar leads o contactos. Ya sea para comprar, distribuir, vender, anunciarse, conseguir una visita comercial, una demostracin de producto, etc ... b) Fidelizacin de clientes y apoyo a la venta. Branding, amplia informacin, soporte tcnico, ayuda on-line, actualizaciones de producto, demostraciones interactivas, promociones, juegos, utilidades, foros, etc. c) Ahorro de tiempo y dinero. Aplicaciones y utilidades para agilizar y facilitar tareas rutinarias: ventas on-line, introduccin de ofertas de trabajo, actualizaciones de producto, transferencia de archivos, buzn de sugerencias, quejas, trmites y gestiones on line, etc. Cada uno lo puede definir como quiera, ms o menos detallado, pensando en las implicaciones para la organizacin, buscando diferenciarse de la competencia, marcar objetivos a medio y largo plazo, etc. Es escribir con letras bien grandes LO QUE QUIERES. Otra tarea ser decidir las estrategias a emprender para cumplir los objetivos. 2.2. ESQUEMATIZAR LA ESTRUCTURA GENERAL DE UNA PAGINA WEB.
INFORMATICA
TERCER SEMESTRE
PLANIFIQUE LA ESTRUCTURA ANTES DE EMPEZAR
Antes de crear un conjunto de pginas web uno ha de tener una idea clara de cmo va a ser la estructura de dichas pginas, es conveniente hacer un esquema, para la mayora de los casos una hoja de papel y un lapicero bastar, pero si el emplazamiento va a albergar un gran nmero de pginas es recomendable usar algn tipo de programa que permita manejar estructuras de tipo grafo. LA ESTRUCTURA DEPENDE DEL CONTENIDO
No es lo mismo crear una estructura de navegacin para un sitio que desea publicar informacin al estilo de un libro cuya estructura estar formada por captulos, este tipo de informacin se adapta bastante bien a una estructura lineal como jerrquica. Mientras que un sitio donde se expone un tutorial o un tour es ms apropiada una estructura de tipo lineal. Para visualizar la estructura de directorios es recomendable dibujar una especie de organigrama, en el que vamos a ir colocando los directorios en funcin de su importancia, desde el nivel superior a otros inferiores.
Se debe listar la informacin que se desea incluir en la Web. Esta informacin debe ser significativa y til para el pblico. Teniendo en cuenta lo que a ellos les interesa, no lo que a nosotros nos gustara que nos interese.
En el caso de que existan otras formas de acceso a informacin disponible para esas mismas personas, el contenido de la Web deber ser superador de esos otros materiales. Es el momento de hacer un boceto de la pgina principal y de cada pgina que est enlazada a sta, sin preocuparnos demasiado por los detalles, ya que solo es un boceto. Es importante recordar que los visitantes de una web no lo van a leer completamente, sino que lo que desean es encontrar rpidamente lo que les interesa, por lo que habr de establecer una estructura adecuada de enlaces entre las pginas. El movimiento de un lado a otro de la web debe ser lo ms intuitivo posible para facilitar el trabajo del visitante. Un sitio web en el que sea difcil encontrar lo que buscamos es abandonado rpidamente. Cuando un internauta ingresa a una pgina web, quiere encontrar entre otras cosas tres caractersticas: velocidad, simplicidad y claridad. Por su parte, el sitio web visitado pretende que la persona o personas que ingresen en sus pginas se queden el mayor tiempo posible; en lenguaje comercial buscan atraer clientes. Pero, cmo lograr las dos cosas?, es decir, ofrecer un producto agradable a la vista y con buenos contenidos. Este es un ejemplo con el debemos empezar a crear nuestra pgina, en el cual debemos tener claro los niveles que tendr.
ESTRUCTURA SUGERIDA DE UNA WEB MATERIA : ELABORAR PAGINAS WEB
INFORMATICA
TERCER SEMESTRE
NIVEL 1 PRINCIPAL
NIVEL 2 BIENVENIDA UBICACIN CURRICULAR FUNDAMENTACION A QUIEN VA DIRIGIDO INTRODUCCION OBJETIVO CONTENIDO METODOLOGIA EVALUACION CALENDARIO UNIDAD I
NIVEL 3
INFORMACION
MATERIALES
UNIDAD II
UNIDAD III
CONTENIDO RESUMEN RECURSOS CONTENIDO RESUMEN RECURSOS CONTENIDO RESUMEN RECURSOS RESUMEN RECURSOS 2 FOROS EL INICIAL FORO FINAL POR TEMA
ACTIVIDADES FOROS REFERENCIAS
PORTAFOLIO DE APREDIZAJE PARA CADA UNIDAD
CREADOR
BIBLIOGRAFIA LECTURAS COMPLEMENTARIAS LIGAS DE INTERES GLOSARIO DATOS PERSONALES NIVEL ACADEMICO EXPERIENCIA LABORAL FOTOGRAFIA
2.3. UTILIZAR ETIQUETAS EN UNA PAGINA WEB. Un documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales: El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de ndole informativo como por ejemplo el titulo de nuestra pgina. El cuerpo, flanqueado por las etiquetas <body> y </body>, que ser donde colocaremos nuestro texto e imgenes delimitados a su vez por otras etiquetas como las que hemos visto. El resultado es un documento con la siguiente estructura:
<html> <head> Etiquetas y contenidos del encabezado Datos que no aparecen en nuestra pgina pero que son importantes para catalogarla: Titulo, palabras clave,... </head> <body> Etiquetas y contenidos del cuerpo Parte del documento que ser mostrada por el navegador: Texto e imgenes </body> </html> Con todo lo que conocemos ya sobre HTML podemos construir una pgina web que ya tiene bastante sentido. Vemos un ejemplo a continuacin. <html> <head> <title>Elaboracin de Paginas Web</title> </head> <body> Bienvenido, Ests en la pgina Elaboracin de Pginas Web de Tercer Semestre. Aqu aprenders de manera personal a realizar tu pagina web. </body> </html> Cmo ya hemos dicho el HTML es un lenguaje de marcas ( etiquetas). As todo nuestro texto estar encerrado entre etiquetas: Una etiqueta de inicio y una etiqueta de fin. Funcionan de la siguiente manera: <etiqueta> inicio de una etiqueta </etiqueta> el cierre de una etiqueta. Algunas etiquetas, que iremos viendo a lo largo del manual, no llevan etiqueta de cierre, en ese caso se cierra, dentro de la propia etiqueta, tal y cmo vemos a continuacin. <etiqueta /> Los elementos que no llevan etiqueta de cierre, se cierran en la misma etiqueta de apertura, por ejemplo: Las etiquetas deben de ir siempre en minsculas. Encontrars muchas pginas WEB en las que las etiquetas estn en maysculas, hasta el HTML 4.0 era indiferente la utilizacin de minsculas o maysculas y muchos autores utilizaban las maysculas por claridad. Todo lo que vaya entre dos etiquetas HTML se ver afectado por stas, por ejemplo <h1>Esto es un encabezado</h1> Pero esto no, esto es un prrafo
Estas son algunas de las etiquetas ms utilizadas: < html>marcan el inicio y el final de una pagina web< /html> < title>establece un titulo para la pagina< /title> < body bgcolor="">establece un color de fondo para la pagina < body background="">establece una imagen de fondo para la pagina < text="">establece el color de letra en la pagina < h1>establece un encabezado en la pagina< /h1> < hr>agrega una lnea separadora
body
Etiquetas de texto pone el texto en negrita pone el texto en cursiva cambia el color de texto cambia el tamao del texto cambia el tipo de letra cambia el color el tamao y el tipo de letra Etiquetas de enlace < aref0"">texto< /a>aade un enlace utilizado la palabra texto < ahref="">< img src="">< /a>aade un enlace utilizando una imagen Etiquetas de imagen < img src="">permite aadir una imagen ala pagina < img src=""align0"top">alinea el titulo de la imagen en la parte superior < img src=""align="middle">alinea el titulo de la imagen en la parte de en medio < img src=""align"bottom"> alinea el titulo de la imagen en la parte inferior Etiquetas secundarias. Algunas veces, necesitaremos aadir dos etiquetas a un texto, por ejemplo, supongamos y esto es slo un ejemplo, que un ttulo sea tambin un enlace, veamos cmo lo haramos (utilizamos pseudo cdigo puesto que todava no hemos visto el cdigo html). <ttulo><enlace> loquesea.com</enlace></ttulo> En cambio el siguiente cdigo sera incorrecto <ttulo><enlace> loquesea.com</titulo></enlace> Las etiquetas pueden a veces llevar atributos que nos permiten especificar ms las etiquetas que utilizamos. Los atributos son como los adjetivos. Por ejemplo supongamos que tenemos una etiqueta <hombre> y queremos especificar que es guapo. As que utilizaremos el atributo "apariencia" a este atributo le daremos el valor de "guapo". Nos quedara apariencia ="guapo". As nuestro <hombre> nos quedara <hombre apariencia="guapo">. Veamos la etiqueta <html> nos dice que se trata de un documento html, pero podemos utilizar el atributo lang para especificar el idioma del contenido del documento, as nos quedara <html lang="es">. Los atributos se especifican indicando el nombre del atributo (lang) y su valor (es). En castellano estaramos diciendo: esto es un documento html en espaol. Los atributos siempre se aaden en la etiqueta de inicio y los valores de un atributo siempre deben estar entre comillas. Etiquetas de prrafo
INFORMATICA
TERCER SEMESTRE
Para esto se utiliza la etiqueta y . Este comando es muy til debido a que si uno escribe algo (en el editor que se este utilizando) por mucho espacio que uno le de siempre al texto, siempre va a aparecer en la misma lnea. Para alinear un prrafo se utiliza el comando <align> y </align>, utilizado dentro de la etiqueta . Se puede alinear de tres formas diferentes: Prrafo... Alinea a la izquierda. Prrafo... Realiza un centrado. Prrafo... Alinea a la derecha. indica el inicio de un prrafo nuevo cambia el texto a otra lnea < pre>aade un texto preformateado < /pre> < li>sirve para listar objetos < ul>aade numeracin a los objetos listados < ul>aade vietas a los objetos listados< /ul> < blockquote>resalta una lnea ubicada en un prrafo < /blockquote> indica el inicio de una definicin Cuando nosotros queremos que lo que escribimos aparezca en otra lnea utilizamos el comando . Al terminar de escribir un prrafo es conveniente y esttico utilizar el comando para separar un prrafo de otro que es Etiquetas para darle formato al texto: Para el tamao y tipo de letra se usa la etiqueta y , que posee tres atributos: tamao (size), Tipo de letra o fuente (face) y color Formato: y Sirve para colocar un texto en Negrita. y sirve para subrayar un texto <strike> y </strike> sirve para tachar un texto. y cumple la misma funcin que y para colocar un texto en cursiva. texto con nfasis texto con nfasis <cite>citacin</cite> citacin <dfn>definicin</dfn> definicin <kbd>teclado</kbd> teclado <samp>ejemplo</samp> ejemplo size: regula el tamao de los caracteres. Ejemplo: texto... . face: es la fuente que se quiere usar, arial, times new roman, etc. Para elegir nosotros mismos el color que queremos que tengan los links o enlaces e incluso el texto, las etiquetas que se utilizan para hacer esto son las siguientes: text="#nmero" Para el color del texto. link="#nmero" Para el color de los enlaces.
TERCER SEMESTRE
INFORMATICA
vlink="#nmero" El color con que aparecern los enlaces ya visitados. alink="#nmero" Color del enlace cuando lo pulsamos.
Por lo tanto la etiqueta <body> puede quedar del siguiente modo: <body bgcolor="#num" text="#num" link="#num" vlink="#num" alink="#num"> Ahora veremos como poner una imagen de fondo. Es muy sencillo, basta con usar la etiqueta: background="localizacin de la imagen" Esta etiqueta va dentro de la etiqueta <body>. Ejemplo: <body background="/documentos/html/gifs/dragonball.gif"> Las listas pueden ser: Lista desordenada, <ul> (Unordered List). Lista ordenada, <ol> (Ordered List). Ejemplos de diferentes tipos de listas: Lista con nmeros romanos: <ol> <li type=I>Manzana <li type=I>Zanahoria <li type=I>Lechuga <li type=I>Tomate </ol> I Manzana II Zanahoria III Lechuga IV Tomate Lista numerada: <ol> <li>Manzana <li>Zanahoria <li>Lechuga <li>Tomate </ol> 1 Manzana 2 Zanahoria 3 Lechuga 4 Tomate
INFORMATICA
TERCER SEMESTRE
ELABORACION DE PAGINAS WEB MODULO II TEMAS 1 _________________________________________________________________________________________________
Una de las formas de crear listas con Dreamweaver es activar la barra Texto, para ello pulsaremos, tal como vemos en la imagen inferior, en el botn Comn
Y en el panel que se despliega seleccionremos la opcin Texto.
Pulsaremos el botn ul. Con este botn activamos la opcin Listas simples o no ordenadas
Si seleccionamos la lista simple, la lnea donde tengamos activo el cursor de texto ser el comienzo de una lista. Cuando pulsemos la tecla enter, Dreamweaver convertir el texto introducido en esa lnea en una entrada de la lista y prepara la siguiente lnea como otro elemento de la lista.
Para terminar de introducir elementos en la lista slo tenemos que pulsar la tecla enter dos veces seguidas y ya podremos continuar escribiendo normalmente 2.4. ESTABLECER VINCULOS E HIPERVINCULOS. Normalmente se les llama enlaces.- Consisten en lneas de texto o imgenes que se encuentran dentro de ciertos documentos, generalmente en pginas web, y que permiten acceder a otros documentos. Estos enlaces establecen conexiones con otras pginas en Internet para que el
INFORMATICA TERCER SEMESTRE Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acua Reyes
35
navegador pueda visualizarlas. Cuando se hace click sobre un enlace, el navegador abrir automticamente la pgina de informacin a la que hace referencia. Para definir un enlace es necesario marcar con la etiqueta <a> el objeto del cual va a partir dicho enlace. Dicha directiva debe incluir el parmetro href="url" para especificar el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con <a href="url">, y despus cerrar con </a>. Por ejemplo, si queremos que el texto "pulse aqu para visitar la NASA" nos conduzca a la "home page" de la NASA, debemos escribir en nuestro texto HTML: <a href="http://www.nasa.gov/">Pulse aqu para visitar a la NASA</a> Que se vera de esta forma: Pulse aqu para visitar a la NASA Si queremos que el texto "Foto" nos lleve a una imagen tenemos que escribir: <a href="imagen.gif">Foto</a> entonces al hacer clic en el texto Foto nos abrir la imagen.gif. Tambin se puede ir a otro enlace por medio de una imagen. Lo nico que se debe hacer es cambiar el texto por una imagen: <a href="http://www.altavista.com"><img src="Logo.jpg"></a> Si se quiere hacer un link para que nos manden un E-Mail se debe hacer de la siguiente manera: <a href="mailto:pfravioli@fibertel.com.ar">Mandame un Email</a> Entonces cuando se haga clic sobre esta palabra Mandame un Email se abrir (por defecto) el Microsoft Outlook Express con la direccin del destinatario ya escrita. 2.5. MANIPULAR OBJETOS Y FORMULARIOS EN UNA PAGINA WEB. Los formularios se utilizan para recoger datos de los usuarios, nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, hacer suscripciones a un boletn o revista que editemos, etc. Una vez el usuario rellena los datos y pulsa el botn para enviar el formulario se arrancar un programa que recibir los datos y har el tratamiento correspondiente (una base de datos por ejemplo). Aqu vamos a ver cmo crear el formulario bsico, (insertar campos y botones en el formulario y validarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan nociones de programacin, ya sea en SQL, en JavaScript o en otro lenguaje de programacin. Un formulario est formado, entre otras cosas, por etiquetas, campos de texto, mens desplegables, y botones. Elementos de formulario Los elementos de formulario pueden insertarse en una pgina a travs del men Insertar, opcin Objetos de formulario. A travs de esta opcin se puede acceder a la lista de todos los objetos de formulario que pueden ser insertados en la pgina. Vamos a ver uno por uno algunos de los distintos elementos que pueden formar parte de un formulario, as como algunas de sus propiedades.
36
Campo de texto y rea de texto: Permiten aadir un cuadro de texto. El Campo de texto solo permite escribir una lnea al usuario, mientras que el rea de texto permite escribir varias. Se puede pasar de Campo de texto a rea de texto a travs del inspector de propiedades. Tambin es posible definirlo como Contrasea. A continuacin tienes un ejemplo de cada uno de estos tres tipos.
A travs del inspector de propiedades es posible asignar tambin el ancho del cuadro de texto, el nmero mximo de lneas o caracteres, y el valor inicial del cuadro. Botn: Es el botn tradicional. El botn puede tener asignadas tres opciones: Enviar formulario, Restablecer formulario (borrar todos los campos del formulario), o Ninguna (para poder asignarle un comportamiento diferente de los dos anteriores). Tambin es posible cambiar el texto del botn, a travs del campo Etiqueta del inspector de propiedades. Casilla de verificacin: Es un cuadrito que se puede activar o desactivar. Puede asignrsele el estado inicial como Activado o como Desactivado. Botn de opcin: Es un pequeo botn redondo que puede activarse o desactivarse. Si hay varios del mismo formulario, solo puede haber uno activado. Cuando se activa uno, automticamente se desactivan los dems. Cul es ms inteligente? El nio El joven Lista/Men: Una lista o men es un elemento de formulario que lleva asociada una lista de opciones. Los elementos se aaden a travs de botn Valores de lista del inspector de propiedades. Cuando se trata de un men, solo es posible elegir uno de los elementos, pero si se trata de una lista, a travs de Selecciones puede permitirse que se seleccionen varios simultneamente. Etiqueta: Se utiliza para ponerle nombres al resto de elementos de formulario, para que el usuario pueda saber qu datos ha de introducir en cada uno de ellos. Crear formularios Puedes crear formularios a travs del men Insertar, opcin Formulario. Una vez creado un formulario, este aparecer en la ventana de Dreamweaver como un recuadro formado por lneas rojas discontinuas, similar al de la imagen de siguiente.
37
Dentro de dicho formulario se podrn insertar los elementos de formulario, que como ya sabes puedes insertarlos a travs del men Insertar, opcin Objetos de formulario. Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizando tablas se consigue una mejor distribucin de los elementos del formulario, lo que facilita su comprensin y mejora su apariencia. Validar formularios La validacin de formularios sirve para hacer que Javascript valide el formulario antes de que se enve el formulario, para que en el caso de que haya campos del formulario que sean obligatorios, tengan que rellenarse antes de poder enviarse.
Para validar un formulario hay que abrir el panel de Comportamientos. Este panel se puede abrir a travs del men Ventana, opcin Comportamientos, o pulsando Mays+F3. En el este panel hay que desplegar el botn pulsando sobre l, y en Mostrar eventos para elegir una versin de las actuales de entre la lista de navegadores. Por ejemplo, puedes elegir el navegador IE 6.0. Despus de esto, hay que volver a desplegar el botn, y pulsar sobre la opcin Validar formulario.
Entonces se mostrar una ventana como la siguiente, donde aparecen todos los elementos del formulario.
Puede seleccionarse uno por uno cada elemento del

INFORMATICA TERCER SEMESTRE Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acua Reyes 38
formulario, pudiendo especificar los requisitos que ha de cumplir. Puede establecerse como campo a rellenar obligatoriamente, y si su contenido ha de ser numrico, una direccin de correo electrnico, etc. 2.6. MANIPULAR TABLAS EN UNA PAGINA WEB.
Una tabla est formada por filas y columnas y a la interseccin de estas le llamamos celdas, en las que se puede insertar texto y grficos. Las tablas son una buena herramienta para organizar los datos en una pgina web, adems nos permiten estructurar las pginas de nuestro sitio separando la cabecera, el men, el contenido... La organizacin del texto en una pgina es posible gracias a las tablas. Muchas pginas web son como pginas de revistas, y la forma ms simple de emular las funciones de maquetacin son las tablas. Se pueden utilizar y personalizar las tablas de varias formas diferentes con el fin de hacerlas ms atractivas y fciles de leer. Se debe utilizar una tabla para presentar la informacin en formato de cuadrcula, por ejemplo horarios, informacin acerca de productos, tarifas, calificaciones de alumnos, etc. Creacin de una tabla Para crear una tabla se debe usar la instruccin Table, seguida de parmetros que indican la anchura, el color o imagen de fondo, etc. Ejemplo: <table> </table> Estas dos instrucciones indican al explorador de Internet que en este lugar de la pgina se va a crear una tabla. Uso de encabezados de tabla Despus de que se haya indicado al explorador de Internet que se va a crear una tabla, es necesario definir cuntas columnas de tabla se desean utilizar. Para ello se deben utilizar las instrucciones <TH>, las cuales indican los encabezados de tabla. Ejemplo: <Table> <TH>Columna 1</th><TH>Columna 2<TH>Columna 3</TH> </table> Este segmento de cdigo le indica al explorador que usaremos una tabla de tres columnas. Cada identificador TH que utilice indica una columna de dato que desee representar en la tabla. Para crear una tabla debemos hacer clic sobre el botn Insertar tabla de la paleta de Objetos. Se abrir un cuadro de dilogo que nos preguntar cuntas filas y cuantas columnas
39
tendr nuestra tabla, qu ancho tendr y si tendr borde.
2.7. MANIPULAR IMGENES Y ANIMACIONES EN UNA PAGINA WEB. Las imgenes pueden ser de muchos formatos diferentes: bmp, gif, jpg, etc. Pero no todos estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores. Los formatos ms utilizados son el GIF y el JPG, que a pesar de ser imgenes de menor calidad que las imgenes BMP, son ms recomendables debido a que ocupan menos memoria. Vamos a ver un poco ms sobre estos formatos: Formato GIF: Utilizan un mximo de 256 colores, y son recomendables para imgenes con grandes reas de un mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permiten contener transparencias y animacin. Formato JPG: Las imgenes son de mayor calidad que las GIF, al poder contener millones de colores, pero el tamao de la imagen es mayor y tarda ms en descargarse. Puedes incluir imgenes en otros formatos a travs de Dreamweaver, que podrn ser visualizadas en algunos navegadores. Este es el caso de las imgenes BMP y PNG. Si introduces una imagen BMP en Dreamweaver, te aparecer un cuadrado gris en su lugar. La imagen solo se mostrar correctamente en el navegador. Puedes cambiar el formato de las imgenes mediante la utilizacin de algn programa de tratamiento de imgenes, como pueden ser Fireworks, Photoshop, Corel Draw, etc. Dependiendo del programa utilizado existir una mayor o menor cantidad de opciones a la hora de modificar las imgenes. Para realizar modificaciones sencillas, como la de recortar las imgenes y cambiar los colores, puedes utilizar incluso el programa Paint de Windows. Para insertar una imagen, debe utilizar la siguiente sintaxis: <img src="imagen.jpg"> En sta instruccin se da por defecto que la imagen que se inserta tiene la extensin JPG. Para insertar otro tipo de imagen slo deber especificar la extensin correspondiente. Las imgenes pueden ser adquiridas de la galera de imgenes de Microsoft, o de cualquier otra imagen digitalizada. Incluso se pueden crear iconos animados desde algn programa de animacin, y usarlos en una pgina Web. Seleccin del formato Uno de los grandes dilemas a la hora de incluir grficos en sus pginas Web es elegir el formato adecuado para cada tipo de imagen, vamos a intentar guiarle en la seleccin de cada formato. Imgenes fotogrficas
Imgenes obtenidas a travs de fotografas de personas o lugares. Para este tipo de imgenes el formato ms recomendado es el JPEG porque consigue una gran compresin con una mnima perdida de calidad. JPEG GIF PNG
6.565 bytes 24 bits
25.522 bytes 256 cols
52.361 bytes 24 bits
Imgenes renderizadas Este tipo de imgenes son las obtenidas por un programa de generacin de imgenes sintticas mediante algn proceso de trazado de rayos o similar. Se caracterizan por degradados suaves y lneas muy bien definidas. Para este tipo de imgenes es recomendable usar el formato PNG. Tenga presente que el formato PNG es el ms reciente y puede no estar soportado en todos los navegadores. JPEG GIF PNG
Imgenes sencillas
Para las imgenes sencillas con pocos colores y con formas muy delimitadas, el formato ms recomendado es el GIF, ya que se puede adaptar al nmero de colores de una imagen. Con el paso del tiempo puede que el formato PNG desbanque al GIF ya que el primero es ms avanzado, pero como su uso todava no est muy extendido recomendamos el formato GIF. JPEG GIF PNG
4.974 bytes Realice pruebas
2.394 bytes
1.613 bytes
Las recomendaciones dadas anteriormente no son indiscutibles, son recomendaciones basadas en la experiencia. Puede que para segn que casos, no sean del todo acertadas, as que le recomendamos que pruebe a grabar las imgenes en distintos formatos y seleccione el que le parezca ms adecuado. Formato Imgenes
JPEG 24Bits Baja compresin 6028 bytes Media compresin 2761 bytes Alta compresin 1815 bytes
GIF 256 Colores 12230 bytes 16 Colores 4304 bytes 255 Col. + Trans. 8703 bytes
PNG
42
24 Bits 29070 bytes
256 Colores 11640 bytes
255 Col. + Trans. 8795 bytes
Para utilizar imgenes como hipervnculos, se debe usar la misma instruccin que para los hipervnculos de texto, a excepcin de que a continuacin de la instruccin se debe incluir la instruccin de insercin de imgenes. La siguiente lnea de cdigo muestra el ejemplo de insercin de imgenes como hipervnculos. <a href="carrera.htm"><img border=0 src="carrera.jpg" ></A> La primera instruccin indica el nombre de la pgina a la que se desee acceder cuando se haga clic en el hipervnculo. La segunda instruccin inserta la imagen en la pgina Web. La manera ms sencilla de aadir una imagen a nuestra pgina es desplegando al men insertar, de la barra men, y buscar en l la opcin imagen.
En la ventana de dilogo que Dreamweaver nos abrir, podremos buscar la imagen que queramos insertar en nuestra pgina, simplemente tenemos que seleccionarla y pulsar el botn aceptar de la ventana dilogo.
Observa que imagen se ha insertado en la posicin que ocupaba el cursor en el momento de aadir la imagen, tambin podemos escribir texto en la misma lnea que insertamos la imagen. Podemos combinar en la misma lnea texto e imgenes, sin importar el orden. Podemos escribir una lnea de texto y en cualquier punto de ella insertar la imagen, o podemos insertar primero la
43
imagen y despus escribir un comentario a su lado.
Dreamweaver nos permite insertar imgenes de varias maneras, ya hemos visto como hacerlo desde la barra de men. Ahora vamos a aprender a insertar imgenes desde el panel insertar, con la barra comn activada. Podemos pulsar en la barra comn en el icono imagen. Dreamweaver nos muestra la misma ventana de dilogo de antes, podemos seleccionar el archivo como ya sabemos o podemos escribir el nombre directamente en la casilla nombre, y despus pulsamos aceptar.
2.8. DEFINIR SECCIONES DE MAPEO DE IMGENES EN UNA PAGINA WEB. Puede hacer que parte de la imagen sea un enlace a otra pgina, es decir, puede hacer un mapa sobre la imagen de manera que secciones de la imagen sean enlaces. Debe saber que para que una imagen sea tratada como un mapa, adems de el cdigo, debe incluir en la etiqueta de imagen correspondiente a la imagen a mapear el atributo usemap="#nombre del mapa". 2.9. INSERTAR SONIDO Y VIDEO EN UNA PAGINA WEB. La insercin de sonido y video funciona de una forma muy parecida. Los archivos de video que se admiten en las web tienen las extensiones .avi las que son de Microsoft Vdeo para Windows y .mov o .qt los de Apple. Los archivos de sonido son de muchas ms clases porque se han utilizado desde hace mucho ms tiempo. Los ms habituales son los siguientes: .wav de Microsoft. .snd y .mac de sonido Macintosh. .au de audio de Sun. .mid o . midi que slo se utilizan para msica. SONIDO Para insertar un archivo de audio en un documento tienes que dirigirte al men Insertar, Meda, opcin Plug-in. A la derecha tienes un ejemplo de
un archivo de sonido, para el que se muestran los controles de audio. En Dreamweaver no se mostrarn los controles de audio. Todos los archivos que son insertados como plug-in aparecen representadas dentro de Dreamweaver por una imagen como la de la izquierda. En el inspector de propiedades pueden establecerse la altura y la anchura con la que se mostrarn los controles de audio, mediante Al y An. Si lo que se desea es que se escuche el sonido en la pgina, pero que no se muestren los controles de audio, los campos Al y An deben valer cero. Los sonidos se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez. Estos valores no pueden cambiarse a travs del inspector de propiedades, pero s a travs del cdigo. Por ejemplo, el archivo anterior apareca en el cdigo como: <embed src="varios/audio.MID"></embed>. Pero para que no se reprodujera automticamente se ha aadido autostart="false", y para que se reprodujera continuamente se ha aadido loop="true". La lnea de cdigo del archivo de audio a quedado del siguiente modo: <embed src="varios/audio.MID" autostart="false" loop="true"></embed> Para poder hacer que el audio pueda activarse y desactivarse cuando no se muestran los controles, es necesario insertar una serie de comportamientos que se encarguen de esa tarea. Si quieres poner msica de fondo en una pgina web, sin que aparezcan los controles de audio, puedes escribir este cdigo directamente en la vista Cdigo. <bgsound src="cancion1.wav" loop="-1"> Insrtalo despus de la etiqueta </title> Con el parmetro loop puedes decidir cuantas veces quieres que se reproduzca, 1, 2, 3 ... (con -1 se reproduce de modo continuo). VIDEO En ocasiones puede interesar incluir algn vdeo en una pgina web, pero hay que tener en cuenta que los vdeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse. Los formatos de vdeo que suelen en Internet son el AVI, el MPEG y el Para insertar un archivo de vdeo en documento tienes que dirigirte al Insertar, Meda, opcin Plug-in. A la derecha tienes un ejemplo de de video, para el que se muestran controles de video. un utilizarse MOV. un men
archivo los
El inspector de propiedades para los archivos de audio insertados de esta forma es el mismo que el de los archivos de audio, ya que ambos se insertan como Plug-in.
Los videos tambin se reproducen automticamente al cargarse la pgina, y se reproducen solamente una vez. Estos valores pueden cambiarse a travs del cdigo, del mismo modo que en el caso de los archivos de audio, aadiendo autostart="false" y loop="true". Todos los objetos insertados a travs de la opcin Plug-in precisan que el usuario tenga instalado un reproductor o un plug-in apropiado para reproducirlos. En el campo Origen del inspector de propiedades se establece el archivo vinculado (el archivo de audio o de vdeo) que ha de reproducirse. 2.10. IMPLEMENTAR SERVICIOS DE CORREO EN UNA PAGINA WEB. Correo electrnico, o en ingls e-mail (electronic mail), es un servicio de red que permite a los usuarios enviar y recibir mensajes rpidamente (tambin denominados mensajes electrnicos o cartas electrnicas) mediante sistemas de comunicacin electrnicos. Principalmente se usa este nombre para denominar al sistema que provee este servicio en Internet, mediante el protocolo SMTP, aunque por extensin tambin puede verse aplicado a sistemas anlogos que usen otras tecnologas. Por medio de mensajes de correo electrnico se puede enviar, no solamente texto, sino todo tipo de documentos digitales. Su eficiencia, conveniencia y bajo costo estn logrando que el correo electrnico desplace al correo ordinario para muchos usos habituales. Para poder usar enviar y recibir correo electrnico, generalmente hay que estar registrado en alguna empresa que ofrezca este servicio (gratuita o de pago). El registro permite tener una direccin de correo personal nica y duradera, a la que se puede acceder mediante un nombre de usuario y una Contrasea. Hay varios tipos de proveedores de correo, que se diferencian sobre todo por la calidad del servicio que ofrecen. Bsicamente, se pueden dividir en dos tipos: los correos gratuitos y los de pago. Una direccin de correo electrnico es un conjunto de palabras que identifican a una persona que puede enviar y recibir correo. Cada direccin es nica y pertenece siempre a la misma persona. Un ejemplo es persona@servicio.com, que se lee persona arroba servicio punto com. El signo @ (llamado arroba) siempre est en cada direccin de correo, y la divide en dos partes: el nombre de usuario (a la izquierda de la arroba; en este caso, persona), y el dominio en el que est (lo de la derecha de la arroba; en este caso, servicio.com). La arroba tambin se puede leer "en", ya que persona@servicio.com identifica al usuario persona que est en el servidor servicio.com (indica una relacin de pertenencia). Una direccin de correo se reconoce fcilmente porque siempre tiene la @, donde la @ significa "pertenece a..."; en cambio, una direccin de pgina web no. Por ejemplo, mientras que http://www.servicio.com/ puede ser una pgina web en donde hay informacin (como en un libro), persona@servicio.com es la direccin de un correo: un buzn a donde se puede escribir. Pulsa sobre el enlace y se abre una ventana para "escribir mensaje" con lo siguientes campos: subject: El asunto del mensaje. cc: Enviar una copia del mensaje a la direccin indicada. body: El texto del mensaje.
3. PUBLICAR PAGINAS WEB EN LOS SERVIDORES DE INTERNET Que es publicar una pagina web y como hacerlo? Despus de hacernos nuestra pgina en nuestra computadora (incluyendo textos, imgenes, videos y otros archivos) sta solamente la vemos nosotros ya que esta almacenada en nuestra maquina. Para que todo el mundo pueda verla la tenemos que publicar (subir) a un servidor. (Que no es ms que una computadora central que siempre esta conectada). El servidor, hosting (lugar donde subiremos nuestra pgina) normalmente todos los proveedores de acceso a Internet ofrecen hosting. (Al que pagamos por conectarnos a internet). El Hosting es un espacio (Ofrecido en Megabites) para almacenar nuestra web en su servidor. Existen infinidad de proveedores de hosting gratuitos, que con solo rellenando un formulario desde su web podemos conseguir de manera rpida y gratuitamente espacio para nuestra web. Cuando solicitamos los servicios de una conexin a internet (el servidor) al que pagamos la factura por navegar, ofrecen una serie de recursos gratuitos por utilizar sus redes y servicios como pueden ser: Cuentas de correo, discos duros virtuales donde alojar tus archivos y un sinfn de promociones, pero tambin un ESPACIO WEB, o cuenta FTP. 3.1. IDENTIFICAR LOS SERVIDORES PUBLICACION DE INFORMACION. DE INTERNET DISPONIBLES PARA
Publicacin de la pgina web. Tendremos que elegir un servidor y claro esta registrarnos, por lo general nos notificarn va e-mail nuestra alta en su espacio web. Para subir la pgina web. Existen varias formas: desde la propia web de proveedor, o mediante programas de envo FTP. Desde la propia web del servidor. Despus de obtener nuestra cuenta y confirmarnos todos los datos, nuestro login, password, nombre de usuario, etc. con estos datos entra en la pgina web de tu proveedor e identifcate. Por lo general tienen formularios y otras herramientas para poder subir tus archivos indicndote los pasos a seguir. Recuerda que adems de subir tu pgina tambin tienes que subir las imgenes, videos, archivos, etc. que utilizaste en tu pgina. Te recomiendo que leas los apartados de ayuda, y faqs (preguntas frecuentes) que suelen tener estos sitios. Desde un programa para enviar por FTP. Que es una manera de transmitir archivos por la red, tanto para mandar como para descargar, existen en internet montones de programas (gratuitos y de pago) para poder enviar archivos a un servidor. Estos son algunos de los mas conocidos, Cuteftp , ws_ftp , NicoFTP . Otro estupendo FTP WS_FTP 95 El inmejorable cliente de transmisin de archivos. Descrgalo junto con el parche para ponerlo en espaol. Podrs mandar tus paginas web a tu servidor, borrar, cambiar, descargar desde sitios FTP, etc. Y es gratuito totalmente.
47
Lo dems djalo como esta, esta seria la ventana antes de conectar con tu servidor FTP. Esta seria la configuracin normal del programa para subir tus paginas Nombre o perfil, (es el nombre que quieras ponerte) Nombre direccin, es la direccin de tu servidor FTP. (si por ejemplo fuese iespana seria : ftp.iespana.es) Tipo host (no cambiar) ID Usuario (tu identificacin como usuario del servicio, este dato te lo facilitar tu servidor) Contrasea (la contrasea que te permitir entrar en tu servidor, tambin te la facilitaran ellos). Por lo general una vez dado de alta en algn servicio te suelen mandar un e-mail con todos tus datos. Despus de lo anterior presiona Aceptar y aparecer la siguiente ventana:
Como puedes ver en un lado tu computadora y en otro el servidor, simplemente tenemos que ir seleccionando y mandarlo o bien presionando dos veces sobre el archivo, pgina, imagen o una vez seleccionado y presionando en la flecha entre las dos ventanas, podemos a su vez hacer selecciones mltiples si mantenemos pulsado Alt Gr en nuestro teclado, mientras vamos eligiendo lo que queremos subir y luego la flecha as subimos de una vez varios contenidos, el documento, las imgenes, RECORDAR que por lo general tu primera pgina tienes que denominarla index.html y las dems son las que irn enlazadas a esta.
48
Recuerda tener tu web bien estructurada
Dentro de Windows tenemos el asistente para la publicacin en web. Lo primero es conocer estos 3 datos necesarios: el login (o nombre de usuario), el password (tu contrasea) y la direccin TFP (nuestro servidor) Todos estos datos siempre nos los proporcionan ellos mismos, donde hemos abierto la cuenta. Por ejemplo el ftp de www.iespana.es el que nos dan es: ftp.iespana.es, el de tripod: ftp.tripod.es, etc. Comencemos, abrimos el programa y veremos que habr una seccin donde podamos poner todos nuestros datos (el login, password y direccin FTP) Rellenamos nuestros datos y le damos a conectar. Una vez conectados se nos abrir otra ventana la cual estar dividida en 2 partes. El lado de la izquierda nuestra computadora y el de la derecha el del servidor. El de la derecha es nuestro "disco duro virtual" es decir nuestro espacio web en el servidor. En el lado izquierdo, ah tenemos que buscar la carpeta donde tenemos guardada nuestra pgina web con todas sus pginas, imgenes y archivos utilizados. Seleccionamos todos los componentes y le damos a " enviar " normalmente es una flechita hacia la derecha. Vers una barra de progreso segn vaya el envo de datos al servidor. Cuando finalice el envo de nuestra pagina web, en el lado derecho veras los archivos enviados. (En nuestra computadora, continuar estando nuestra pgina web). Recuerda siempre desconectar tras finalizar tu sesin. Importante: Recuerda siempre llamar a tu pgina principal index.
3.2.
ALMACENAR PGINAS WEB EN UN SERVIDOR DEDICADO O GRATUITO.

49
Qu es el servicio de hospedaje de pginas? El hospedaje de pginas es ofrecer espacio dentro de un servidor para que publique su propia pgina, con opciones especficas de almacenamiento en disco y caractersticas adaptables a sus necesidades sin tener que comprar costosos servidores; slo paga lo que necesita. Estas son imgenes de algunas de las herramientas y servicios incluidos en el servidor. Pgina Principal. Publicacin de la pgina principal del sitio, una pgina con una cuartilla de texto y una imagen. Puedes dejarla como tu pgina principal, corregirla con las herramientas que se proporcionan o sustituirla con las pginas que t disees y subas al servidor. Estadsticas. Desde esta seccin puedes conocer un reporte detallado de los visitantes que recibes cada mes y cada da. Reportes especficos como: Hits, vistas por da y por hora, pgina de procedencia de tus visitantes, pginas ms consultadas, pginas de entrada y de salida, trminos buscados en los principales buscadores, IPs, dominios, etc. Panel de Control Personal. Desde este panel, los usuarios autorizados del sitio pueden administrar las configuraciones de la cuenta personal: Pueden cambiar la clave de acceso, redireccionar su correo a otra cuenta, respaldar y restaurar sus archivos personales y conocer el espacio que ocupan en su servidor Webmail. Tienen acceso al correo a travs del explorador web, con un sistema como el de hotmail. Desde tu correo web puedes: Enviar y recibir correo html, exportar o importar tu libreta de direcciones, filtrar correo no deseado, corrector de ortografa (ingles) crear carpetas, recibir correo desde otras cuentas de correo POP3 (como prodigy), y administrar tu propia agenda de actividades. Administrador de Archivos. Desde este sistema puedes administrar fcilmente todos los archivos del sitio. Puedes realizar funciones bsicas como: editar, copiar, eliminar, mover archivos: o funciones avanzadas de Telnet y FTP como: perl, chmode, cd, find, etc. Incluye su propio editor HTML como el de FrontPage. Panel de Control. Desde esta seccin del sitio, puedes administrar todas las funciones del servidor para controlar tu pgina. Puedes configurar a tus usuarios autorizados (empleados de tu empresa, amigos, clientes, etc) y sus correos electrnicos, respaldar y restaurar toda su informacin, conocer el uso de tu servidor (espacio disponible, web, correo, ftp), crear listas de correo, etc. El Servicio de Hospedaje Dedicado brinda un servidor exclusivo para el sitio Web o las aplicaciones de la empresa. Las ventajas de contar con un servidor dedicado es que permite instalar las aplicaciones de software que se requiera, hospedar el nmero de sitios Web de acuerdo a la capacidad de almacenamiento y configurar el servidor de acuerdo a sus necesidades. Adems de contar con un acceso dedicado a Internet, suministro ininterrumpido de energa elctrica, monitoreo del servidor y mantenimiento preventivo de toda la infraestructura 24 x 7 (24 horas al da los y das de la semana), los planes de Hospedaje Dedicado incluyen servicios de gran valor para las empresas como el almacenamiento de alto desempeo, respaldo diario de la informacin y cuentas de Correo Negocios con el nombre de su empresa:
El servicio de correo electrnico que le brinda:
50
Direcciones de correo con el nombre del negocio. Puede enviar documentos adjuntos de hasta 25 MB. Enviar y recibir mensajes de correo de forma rpida y segura.
Hospedaje Gratis. Hay compaas que ofrecen hospedaje gratis. A cambio de que en tu pgina aparezcan anuncios de esa compaa y de algunas otras. El hospedaje gratuito es una buena idea, si tu pgina es personal, por ejemplo, una pgina dedicada a tus pasatiempo, amigos, a tu mascota, a tus viajes, etc. Para los sitios de internet de empresas, negocios, compaas, asociaciones, etc, tener anuncios de otras empresas en tu sitio da mala imagen. El visitante podra pensar "esta empresa no tiene para comprar su propio hospedaje". Otra desventaja es que el hospedaje gratis no es seguro. Si esa compaa de repente se sale del negocio, tu pgina se quedara sin hospedaje. Ventajas: Gasto cero: No pagamos ni la transferencia, ni el registro de dominio, es todo gratis. Respaldo: Por ejemplo si estamos en blogger todo el sistema se encuentra respaldado por Google, en este caso muy difcilmente tendremos problemas de backups, servers cados, etc. Desventajas: Poca identidad: Los dominios que utilizan estos sistemas que realmente son subdominios del dominio principal muchas veces dan una sensacin aparente de poca seriedad. Falta de Flexibilidad: No poder hacer modificaciones de nuestra plantilla al 100%, la imposibilidad de instalar plugins y cosas de ese estilo en un principio pueden no molestar pero en cuento pasan los meses empieza a pesar este aspecto. Una dependencia peligrosa: En un principio olvidarnos de los gastos de alojamiento es atractivo, pero a la vez es un poco peligroso, ya que puede desaparecer el sitio y los clientes quedan en el aire. Problemas para migrar: Si empezamos nuestro blog en blogger y luego queremos pasarnos a otro sitio es bastante engorroso. Actualmente no todos los servicios nos permiten hacer una redireccin por lo tanto tambin estaremos perdiendo todo el posicionamiento y antigedad que logramos.
3.3.
SELECCIONAR UN SERVIDOR DE CARACTERISTICAS DE LA PGINA WEB.
INTERNET
CONSIDERANDO
LAS
Antes de decidir donde alojaremos nuestra pgina, es necesario conocer los tipos de servidores y de servicios que proporcionan cada uno de ellos:
51
Tipos de servidores En las siguientes listas, hay algunos tipos comunes de servidores y de su propsito. Servidor de archivo: almacena varios tipos de archivos y los distribuye a otros clientes en la red. Servidor de impresiones: controla y maneja una o ms impresoras y acepta trabajos de impresin de otros clientes de la red, poniendo en cola los trabajos de impresin (Aunque tambin puede cambiar la prioridad de las diferentes impresiones), y realizando la mayora o todas las otras funciones que un sitio de trabajo se realizara para lograr una tarea de impresin si la impresora fue conectada directamente con el puerto de impresora del sitio de trabajo. Servidor de correo: almacenan, envan, reciben, enrutan, y realizan otras operaciones relacionadas con e-mail para otros clientes en la red. Servidor de fax: almacenan, envan, reciben, enrutan, y realizan otras funciones necesarias para la transmisin, la recepcin, y la distribucin apropiadas de los fax. Servidor de la telefona: realiza funciones relacionadas con la telefona, tales como contestador automtico, realizando las funciones de un sistema interactivo de la respuesta de la voz, almacenando los mensajes de voz, encaminando las llamadas, tambin controla la red o el Internet (Ej. entrada excesiva del IP de la voz (VoIP)), etc. Proxy server: realiza un cierto tipo de funcin a nombre de otros clientes en la red para aumentar el funcionamiento de ciertas operaciones (Ej., prefetching y depositar documentos u otros datos que se soliciten muy frecuentemente), tambin sirve seguridad, esto es, tiene un Firewall. Permite administrar el acceso a internet en una Red de computadoras permitiendo o negando el acceso a diferentes Web sites. Servidor del acceso remoto (RAS): controla las lneas de mdem de los monitores u otros canales de comunicacin de la red para que las peticiones conecten con la red de una posicin remota, respuestas la llamada telefnica entrante o reconocen la peticin de la red, y realizan los chequeos necesarios de la seguridad y otros procedimientos necesarios para registrar a un usuario sobre la red. Servidor del uso: realiza la parte de la lgica de la informtica o del negocio de un uso del cliente, aceptando las instrucciones para que las operaciones se realicen de un sitio de trabajo y sirviendo los resultados de nuevo al sitio de trabajo, mientras que el sitio de trabajo realiza el interfaz operador o la porcin del GUI del proceso (es decir, la lgica de la presentacin) que se requiere para trabajar correctamente. Servidor web: almacena documentos HTML, imgenes, archivos de texto, escrituras, y dems material Web compuesto por datos (conocidos colectivamente como contenido), y distribuye este contenido a clientes que la piden en la red. Servidor de reserva: tiene el software de reserva de la red instalado y tiene cantidades grandes de almacenamiento de la red en discos duros u otras formas del almacenamiento (cinta, etc.) disponibles para que se utilice con el fin de asegurarse de que la prdida de un servidor principal no afecte a la red. Esta tcnica tambin es denominada clustering.
52
3.4.
UTILIZAR LA PGINA DEL SERVIDOR DE INTERNET PARA ALOJAR UNA PAGINA WEB.
Depende del tipo de sitio web vayas a tener. Por ejemplo, si solo quieres anunciar tu empresa, poner fotos, videos, un catlogo y que te manden correos, necesitas un hospedaje bsico, que te permita guardar tus archivos y recibir decenas o cientos de visitas diarias. Para la mayora de las pequeas empresas que inician en Internet, el hospedaje bsico es suficiente. Si tu empresa es Transnacional con franquicias en varios pases, y quieres aceptar tarjetas de crdito y realizar envos a todo el mundo, adems planeas recibir miles de visitas diarias, procesar compras con total seguridad y guardar grandes archivos en la memoria, entonces necesitars un hospedaje mayor y ms especializado.
Recuerda que los vendedores siempre tratan de venderte ms y ms cosas que no necesitas. Lo mismo ocurre con el hospedaje. Las compaas de hospedaje van a tratar de venderte muchsima memoria y ancho de banda y muchas caractersticas que no necesitars. Es recomendable a la mayora de quienes inician en Internet el Hospedaje bsico. Si despus necesitas mayor capacidad, solo aumentas tu cuenta. Qu incluye un servicio de hospedaje en Internet? La mayora de los servicios de hospedaje te incluyen los siguientes servicios: Un Panel de Control para configurar el Hospedaje. Memoria para almacenar tus archivos, como fotos, videos, msica, pginas web, animaciones flash, etc. Creacin de cuentas de correo de tu pgina web. Estadsticas detalladas de la actividad y visitas a tu sitio en internet. Programas listos para instalar como chats, galeras de fotos, contadores de visitas, etc. Varios Gigas de trfico, para recibir desde una hasta miles de visitas diarias. Programas FTP para cargar archivos de manera ms rpida
3.5.
VERIFICAR EL FUNCIONAMIENTO DE LA PGINA WEB DENTRO DEL SERVIDOR SELECCIONADO.
Para verificar la presentacin
53
Para revisar cmo se vera su pgina en distintos tipos de navegador y tamaos de pantalla es muy til el "Screen Size Tester". Para revisar cmo se ver la pgina segn la versin de html soportada por los navegadores e incluyendo Webtv: Web Site Viewer Para verificar cmo vern nuestras pginas las personas con distintos tipos de deficiencias de percepcin del color, una muy til herramienta de revisin en lnea es: Servicio Newman de evaluacin del diseo. Para verificar la sintaxis
El Servicio de verificacin del W3C, inspecciona los documentos para revisar su conformidad con las recomendaciones de HTML Y XHTML. El Servicio de Verificacin de CSS facilita revisar la correccin de los estilos en cascada utilizados. Puede descargarse un programa o utilizarse a travs de la Web en: http://jigsaw.w3.org/css-validator/
BIBLIOGRAFIA
- http://cevug.ugr.es/downloads/public/curso_DreamWeaver04.pdf 30 de julio de 2007 - http://eyd142009pc13.tripod.com/adm_titulares.htm - http://www.colarte.com/clasificacion/Textos/Conceptualismo.htm 20 de Junio de 2007 - http://www.monografias.com/trabajos11/disegraf/disegraf.shtml 20 de Junio de 2007 - http://www.monografias.com/trabajos13/hisdisgr/hisdisgr.shtml#PRINCIP 20 de Junio de 2007 - http://www.newsartesvisuales.com/funda/color3.htm 25 de junio de 2007 - http://www.villegaseditores.com/loslibros/9589084060/10-3.html 20 de junio de 2007 - Maldonado Daniel (2001), Diseo & Comunicacin Visual, Ediciones, Buenos Aires. www.adecorar.com/estilos/moderno/index.cfm?pagina=estilos_moderno_009_009 20 de junio de 2007 - www.decoesfera.com/categoria/minimalismo 20 de junio de 2007 - www.terra.com/casa/articulo/html/cas123.htm 20 de junio de 2007 - Kettel, Jennifer A.- Manual de Referencias Dreamweaver 4.- McGraw-Hill.- Espaa.- 2001 - Pascual, Francisco.- Navegar en Internet, Macromedia, Dreamweaver 3.- AlfaOmega.Mxico.- 2000
54

Apuntes Paginas WEB

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Apuntes Paginas WEB

Hochgeladen von

Copyright:

Verfügbare Formate

Elaboracion de Pginas

ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________

ELABORACION DE PGINAS WEB.

2. MANEJAR LOS ELEMENTOS BASICOS DE UN LENGUAJE USADO EN LA CREACION DE PGINAS WEB.

3. DISEAR UNA PAGINA WEB CON UN SOFTWARE DE APLICACIN.

4. PUBLICAR PAGINAS WEB EN LOS SERVIDORES DE INTERNET

ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________

5. ANALIZAR LOS ELEMENTOS FUNDAMENTALES DEL DISEO

ELEMENTOS DEL DISEO

ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________

ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________

El contraste es yuxtaposicin (fusin) los elementos opuestos.

ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________

La combinacin de distintos elementos para formar un todo.

ANALIZAR LAS TEORIAS DEL DISEO.

ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________

Juan Camilo Uribe

ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________

Antonio Caro (1950-

ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________

IDENTIFICAR EL IMPACTO Y EL ENFOQUE EN DISEOS EXISTENTES.

ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________

ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________

ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________

ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________

ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________

MANEJAR LOS ELEMENTOS BASICOS DE UN LENGUAJE USADO EN LA CREACION DE PGINAS WEB.

ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________

ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________

ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________

PLANIFIQUE LA ESTRUCTURA ANTES DE EMPEZAR

ESTRUCTURA SUGERIDA DE UNA WEB MATERIA : ELABORAR PAGINAS WEB

ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________

ACTIVIDADES FOROS REFERENCIAS

PORTAFOLIO DE APREDIZAJE PARA CADA UNIDAD

ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________

ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________

ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________

ELABORACION DE PAGINAS WEB MODULO II _________________________________________________________________________________________________

ELABORACION DE PAGINAS WEB MODULO II TEMAS 1 _________________________________________________________________________________________________

Y en el panel que se despliega seleccionremos la opcin Texto.

ELABORACION DE PAGINAS WEB MODULO II TEMAS 1 _________________________________________________________________________________________________

ELABORACION DE PAGINAS WEB MODULO II TEMAS 1 _________________________________________________________________________________________________

ELABORACION DE PAGINAS WEB MODULO II TEMAS 1 _________________________________________________________________________________________________

Puede seleccionarse uno por uno cada elemento del

ELABORACION DE PAGINAS WEB MODULO II TEMAS 1 _________________________________________________________________________________________________

ELABORACION DE PAGINAS WEB MODULO II TEMAS 1 _________________________________________________________________________________________________

tendr nuestra tabla, qu ancho tendr y si tendr borde.

ELABORACION DE PAGINAS WEB MODULO II TEMAS 1 _________________________________________________________________________________________________

6.565 bytes 24 bits

25.522 bytes 256 cols

52.361 bytes 24 bits

ELABORACION DE PAGINAS WEB MODULO II TEMAS 1 _________________________________________________________________________________________________

4.974 bytes Realice pruebas

ELABORACION DE PAGINAS WEB MODULO II TEMAS 1 _________________________________________________________________________________________________

24 Bits 29070 bytes

256 Colores 11640 bytes

255 Col. + Trans. 8795 bytes

ELABORACION DE PAGINAS WEB MODULO II TEMAS 1 _________________________________________________________________________________________________

imagen y despus escribir un comentario a su lado.

ELABORACION DE PAGINAS WEB MODULO II TEMAS 1 _________________________________________________________________________________________________

ELABORACION DE PAGINAS WEB MODULO II TEMAS 1 _________________________________________________________________________________________________

ELABORACION DE PAGINAS WEB MODULO II TEMAS 1 _________________________________________________________________________________________________