apuntes paginas web

Upload: maruacuna

Post on 29-May-2018

214 views

Category:

Documents


0 download

TRANSCRIPT

  • 8/9/2019 Apuntes Paginas WEB

    1/42

    Elaboracion dePginas

    Docentes:LSC. ELVIA MICAELA URBINAVISCENCIO.LSC. MA. EUGENIA ACUA R.AGOSTO 2010/ENERO 2011

    MANUALALUMNO:_______________________________ GRUPO:_____________

  • 8/9/2019 Apuntes Paginas WEB

    2/42

    ELABORACION DE PAGINAS WEB MODULO II_________________________________________________________________________________________________

    ELABORACION DE PGINAS WEB.

    1. ANALIZAR LOS ELEMENTOS FUNDAMENTALES DEL DISEO1.1. ANALIZAR LAS TEORIAS DEL DISEO1.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 LENGUAJEUSADO 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 DEAPLICACIN.

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

  • 8/9/2019 Apuntes Paginas WEB

    3/42

    ELABORACION DE PAGINAS WEB MODULO II_________________________________________________________________________________________________

    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 nodebe 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 conlongitud y direccin, creada mediante unpunto que se mueve a lo largo de unasuperficie. Una lnea puede variar enlongitud, ancho, direccin, curvatura ycolor. La lnea puede ser de dosdimensiones (una lnea de lpiz sobrepapel), o tres dimensiones implcitas.

    Forma

    Una figura plana o una forma es creadacuando lneas actuales o implcitas seencuentran alrededor de un espacio. Uncambio en el color o el sombreado puededefinir una forma. Las formas pueden serclasificadas en varios tipos: geomtricas(cuadrado, tringulo, crculo) y orgnicas(irregulares en contorno).

    Tamao

    INFORMATICA TERCER SEMESTRE

  • 8/9/2019 Apuntes Paginas WEB

    4/42

    ELABORACION DE PAGINAS WEB MODULO II_________________________________________________________________________________________________

    Este se refiere a las variaciones de lasproporciones de los objetos, lneas oformas. Hay una variacin de tamaoen objetos ya sean reales oimaginarios.

    Espacio

    Espacio es el rea vaca o abierta entre,alrededor, arriba, debajo o entre objetos.Figuras y formas son realizadas en elespacio alrededor y entre l. El espaciotambin es llamado bidimensional otridimensional. El espacio positivo es

    rellenado con formas o figuras. El espacionegativo rodea una forma o figura.

    Color

    El Color es el carcter percibido de una superficiede acuerdo con la longitud de onda o la luzreflejada desde esta. El Color posee tresdimensiones: 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 conpalabras como spero, sedoso o rugoso.

    Valores

    El Valor es que tan oscuro o claro se ve algo.Podemos alcanzar cambios de valores en el colorpor medio de la adicin de blanco o negro a dichocolor. Claroscuro usa valores en los dibujomediante contrastes de claros y oscuros en unacomposicin.

    Principios de Diseo

    Los principios emplean elementos del diseo para crear composiciones.

    INFORMATICA TERCER SEMESTRE

  • 8/9/2019 Apuntes Paginas WEB

    5/42

    ELABORACION DE PAGINAS WEB MODULO II_________________________________________________________________________________________________

    Balance

    El Balance es el sentido de equidad visualen una forma, figura, valor, color, etc. ElBalance se puede hacer simtrica ouniformemente en objetos, valores,

    colores, texturas, formas, etc.,

    Contraste

    El contraste es layuxtaposicin (fusin) de loselementos opuestos.

    nfasis

    El nfasis es usado para crear ciertaspartes de sus trabajos artsticos atravs de llamado atencin demanera especial. El centro de interso punto foco es el lugar del dibujoque le invita a enfocar su mirada.

    Proporcin

    La Proporcin describe el tamao,

    ubicacin o el monto de una cosacomparada con otra.

    Patrones

    INFORMATICA TERCER SEMESTRE

  • 8/9/2019 Apuntes Paginas WEB

    6/42

    ELABORACION DE PAGINAS WEB MODULO II_________________________________________________________________________________________________

    Los Patrones son creados mediante larepeticin de un elemento (lnea, forma ocolor) una y otra vez.

    Gradacin

    La Gradacin es el tamao y direccinproducidos por una perspectiva lineal. LaGradacin del color es desde gamascalidas a fras y por su parte los tonososcuros a claros producen una perspectivaarea. La Gradacin puede agregar inters

    y movimiento a una forma

    Composicin

    La combinacin de distintoselementos 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, ala importancia de los medios de comunicacin de masas, frente al fenmeno de lo comercial y deun arte que se basaba en la apariencia, el minimalismo utiliz conceptos diametralmenteopuestos. El sentido de la individualidad de la obra de arte, la privacidad, una conversacinconceptual 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.e. Da gran importancia al espacio y a los materiales ecolgicosf. El resultado que define este estilo en un concepto es la palabra limpieza.

    INFORMATICA TERCER SEMESTRE

  • 8/9/2019 Apuntes Paginas WEB

    7/42

    ELABORACION DE PAGINAS WEB MODULO II_________________________________________________________________________________________________

    Hay muchas variantes del minimalismo, con un toque ms o menos oriental, o ms o menosescandinavo. Actualmente tiene gran difusin en Europa, entre los ms jvenes, sumado a todauna corriente de muebles de diseo dans contemporneo.

    La decoracin minimalista, se nutre de las formaspuras, simples, y juega con sus volmenes, suiluminacin y sus superficies.

    Los creadores minimalistas reducen al mximo loselementos propios del arte, los volmenes y formas

    en escultura. De forma anloga proceden en laarquitectura o en la pintura. Intentan condensar enescasos elementos sus principios artsticos yreflexiones.

    CONCEPTUALISMO.

    El movimiento artstico surgido a finales de los aos sesenta, cuyos exponentes rechazan el artecomo artculo de lujo, permanente, porttil y vendible, proponiendo un tipo de arte en el quecuenta primordialmente la idea o el concepto que respalda sus realizaciones

    Los artistas conceptuales utilizaron con frecuencia fotos, recortes de peridicos como parte de sucreacin, para documentar o para expresar ideas, como por ejemplo:

    Juan Camilo Uribe

    Alicia Barney

    LydiaAzout

    INFORMATICA TERCER SEMESTRE

    http://www.colarte.arts.co/ConsPintores.asp?Carpeta=UribeJuanCamilo&NOMARTISTA=UribeJuanCamilo&IDARTISTA=550&subdir=ohttp://www.colarte.arts.co/ConsPintores.asp?Carpeta=BarneyAlicia&NOMARTISTA=BarneyAlicia&IDARTISTA=1236&subdir=ohttp://www.colarte.arts.co/ConsPintores.asp?Carpeta=AzoutLydia&NOMARTISTA=AzoutLydia&IDARTISTA=1213&subdir=ohttp://www.colarte.arts.co/ConsPintores.asp?Carpeta=BarneyAlicia&NOMARTISTA=BarneyAlicia&IDARTISTA=1236&subdir=ohttp://www.colarte.arts.co/ConsPintores.asp?Carpeta=AzoutLydia&NOMARTISTA=AzoutLydia&IDARTISTA=1213&subdir=ohttp://www.colarte.arts.co/ConsPintores.asp?Carpeta=UribeJuanCamilo&NOMARTISTA=UribeJuanCamilo&IDARTISTA=550&subdir=o
  • 8/9/2019 Apuntes Paginas WEB

    8/42

    ELABORACION DE PAGINAS WEB MODULO II_________________________________________________________________________________________________

    Antonio Caro (1950- )

    Bernardo Salcedo

    Becky Mayer

    Alicia Barney

    Rosemberg Sandoval

    Inginio Caro

    Adolfo Bernal

    INFORMATICA TERCER SEMESTRE

    http://www.colarte.arts.co/ConsPintores.asp?Carpeta=CaroAntonioJose&NOMARTISTA=CaroAntonioJose&IDARTISTA=187&subdir=ohttp://www.colarte.arts.co/ConsPintores.asp?Carpeta=SalcedoBernardo&NOMARTISTA=SalcedoBernardo&IDARTISTA=414&subdir=ohttp://www.colarte.arts.co/ConsPintores.asp?Carpeta=MayerBecky&NOMARTISTA=MayerBecky&IDARTISTA=558&subdir=ohttp://www.colarte.arts.co/ConsPintores.asp?Carpeta=BarneyAlicia&NOMARTISTA=BarneyAlicia&IDARTISTA=1236&subdir=ohttp://www.colarte.arts.co/ConsPintores.asp?Carpeta=SandovalRosemberg&NOMARTISTA=SandovalRosemberg&IDARTISTA=5350&subdir=ohttp://www.colarte.arts.co/ConsPintores.asp?Carpeta=CaroInginio&NOMARTISTA=CaroInginio&IDARTISTA=1268&subdir=ohttp://www.colarte.arts.co/ConsPintores.asp?Carpeta=BernalAdolfo&NOMARTISTA=BernalAdolfo&IDARTISTA=552&subdir=ohttp://www.colarte.arts.co/ConsPintores.asp?Carpeta=CaroAntonioJose&NOMARTISTA=CaroAntonioJose&IDARTISTA=187&subdir=ohttp://www.colarte.arts.co/ConsPintores.asp?Carpeta=SalcedoBernardo&NOMARTISTA=SalcedoBernardo&IDARTISTA=414&subdir=ohttp://www.colarte.arts.co/ConsPintores.asp?Carpeta=MayerBecky&NOMARTISTA=MayerBecky&IDARTISTA=558&subdir=ohttp://www.colarte.arts.co/ConsPintores.asp?Carpeta=BarneyAlicia&NOMARTISTA=BarneyAlicia&IDARTISTA=1236&subdir=ohttp://www.colarte.arts.co/ConsPintores.asp?Carpeta=SandovalRosemberg&NOMARTISTA=SandovalRosemberg&IDARTISTA=5350&subdir=ohttp://www.colarte.arts.co/ConsPintores.asp?Carpeta=CaroInginio&NOMARTISTA=CaroInginio&IDARTISTA=1268&subdir=ohttp://www.colarte.arts.co/ConsPintores.asp?Carpeta=BernalAdolfo&NOMARTISTA=BernalAdolfo&IDARTISTA=552&subdir=o
  • 8/9/2019 Apuntes Paginas WEB

    9/42

    ELABORACION DE PAGINAS WEB MODULO II_________________________________________________________________________________________________

    1.2. IDENTIFICAR EL IMPACTO Y EL ENFOQUE EN DISEOS EXISTENTES.

    Si bien las definiciones no pueden ser tajantes ni excluyentes, resulta necesario asumir quecreatividad e innovacin, arte y diseo se parecern en la medida que las busquemos en mbitoscuyos modos de hacer mantengan alguna identidad y dejarn de parecerse en tanto nos alejemosde esos puntos en los que coinciden. El arte cuando se convierte en industria comercial va atender a parecerse ms al diseo que al arte callejero, del mismo modo que la creatividadempresarial puede conducir a la innovacin de la misma forma que la innovacin tecnolgicapuede inducir cierto estilo de creatividad, ejemplo claro de esto fue en los 80s y 90s laincorporacin de los software digitales al proceso de diseo.

    Queda agregar que hay descripciones definitivas en los mbitos del diseo para evitar quecomencemos a confrontar y asumir que nuestro radio de accin es permeable y sensible asinnmero de circunstancias. Que algunas de ellas no agotan la complejidad de la produccin enserie, que unas pocas se han vuelto ajenas a las urgencias del mercado, que otras muchas se hanconvertido en iconos de algunos productos o servicios y que unas cuantas han aceptado jugar eljuego mundial de la creacin de valor, la identidad corporativa, los medios y los productos deconsumo.

    El sector de servicios est creciendo, tanto en nmero de empleados como en su importancia enla economa, mientras el sector manufacturero decae. Sin embargo, as como los sectoresmanufactureros, los servicios deben ser diseados y su diseo debe ser gestionado.

    El diseo de servicios puede ser tangible como intangible. Puede involucrar artefactos y otrascosas incluyendo comunicacin, ambientes y conductas. Cualquier forma que adopte debe serconsistente, fcil de usar y ser aplicado estratgicamente.

    Slo recientemente los gerentes involucrados en el sector de servicios se handado cuenta que un esfuerzo conciente por aplicar tcnicas de diseo a losservicios puede resultar en un incremento en la satisfaccin de clientes, mayorcontrol sobre sus ofertas y mayores ganancias.

    1.3. DISEAR FORMATOS CONSIDERANDO LAS ZONAS AUREAS, DIRECCION,SENTIDO Y EQUILIBRIO.

    Toda obra de comunicacin visual nace de la necesidad de transmitir un mensaje especfico. Undiseador grfico no es un creador de formas, sino un creador de comunicaciones, un profesionalque mediante un mtodo especfico (diseo) construye mensajes (comunicacin) con mediosvisuales (grafismos). No es el creador del mensaje, sino su intrprete.

    El principal componente de toda composicin grfica es pues el mensaje a interpretar, lainformacin que se desea hacer llegar al destinatario a travs del grafismo. Esta informacin se

    INFORMATICA TERCER SEMESTRE

  • 8/9/2019 Apuntes Paginas WEB

    10/42

    ELABORACION DE PAGINAS WEB MODULO II_________________________________________________________________________________________________

    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 mensajestextuales. 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 dela divisin pictrica, para seccionar los espacios en partes iguales y as conseguir una mejorcomposicin. Se basa en el principio general de contemplar un espacio rectangular dividido, agrandes 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 colocamosjunto al objeto visual o el marco en el que est colocado. La medicin universal es la propiamedida del hombre, el tamao medio de las proporciones humanas.

    La pregunta que hacen todos los diseadores es: cmo podemos distribuir el espacio de diseode una forma acertada? Pues bien, no hay una norma que nos indique la divisin perfecta, peroexiste una frmula muy conocida en el mundo del diseo, que permite dividir el espacio en partesiguales, para lograr un efecto esttico agradable y que puede llegar a ser muy eficaz. Esta teorase 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 psicolgicade 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 loselementos en funcin de una estructura interna que tenga una significacin, gua o intencincoincidente con el mensaje que se quiera transmitir. Esta estructura ser la responsable de laeleccin cromtica y su intencionalidad expresiva, de la eleccin de las imgenes o de ladisposicin de los bloques de texto.

    Algunos factores psicolgicos que debemos conocer son:

    INFORMATICA TERCER SEMESTRE

  • 8/9/2019 Apuntes Paginas WEB

    11/42

    ELABORACION DE PAGINAS WEB MODULO II_________________________________________________________________________________________________

    a. El equilibrio: El receptor tiene necesidad de buscar el equilibrio de la composicin y losejes en los cuales descansa. El desequilibrio crea provocacin e inestabilidad. Tendremosque analizar que es lo que queremos transmitir al receptor y con respecto a esto crear unacomposicin determinada.

    b. La referencia horizontal: Necesitamos ver que los objetos o partes que componenuna 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 motivadopropiciado que la atencin se centre ms en la parte izquierda y en concreto en la inferiorizquierda.

    d. Relajamiento-tensin: psicolgicamente cuando tenemos una composicinequilibrada, simtrica o predecible; sin embargo generaremos tensin en el receptor si noes 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 clavesvisuales 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 pesosde los elementos deben estar compensados. La manera de medir el peso de las formas y lneasdel 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 cuandoencontramos igualdad de peso y tono en ambos lados de nuestra composicin, y el equilibrioasimtrico se produce cuando no existe las mismas dimensiones (ya sea de tamao, color...) enambos 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 elatractivo visual de un objeto. Sin embargo, el atractivo de la simetra tiene lmites; un toque deasimetra puede hacer que resulte an ms atractivo, aadiendo un toque de individualidad ysingularidad. La simetra, en cierta manera, da sensacin de orden y alivia la tensin; la asimetrahace lo contrario, crea agitacin y tensin, pero puede conseguir que una imagen no seamontona.

    Podemos hacer otra divisin de equilibrio:

    El equilibrio formal. Y el equilibrio informal.

    INFORMATICA TERCER SEMESTRE

  • 8/9/2019 Apuntes Paginas WEB

    12/42

    ELABORACION DE PAGINAS WEB MODULO II_________________________________________________________________________________________________

    El equilibrio formal se basa en la bisimetra. Se busca un centro ptico dentro del diseo, queno tiene por qu coincidir con el centro geomtrico de la composicin. Una composicin que sigaeste esquema compositivo reflejar estabilidad, calma y estatismo, pero no supone unacomposicin 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 msbien una apreciacin subjetiva nuestra. Por tanto, podemos definirlo como, una sensacin que seproduce en respuesta a la estimulacin del ojo y de sus mecanismos nerviosos, por la energaluminosa 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 blancareflejada en una hoja de papel. Estas ondas visibles son aquellas cuya longitud de onda estcomprendida entre los 400 y los 700 nanmetros; ms all de estos lmites siguen existiendoradiaciones, pero ya no son percibidos por nuestra vista.

    En las artes grficas tenemos dos grandes categoras con respecto al color, imagen en color eimagen en blanco y negro, en stas ltimas podemos diferenciar: - imgenes a pluma. -imgenes tramadas: mediante diferentes tipos de gris. Asimismo, las imgenes en color sepueden 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 lafidelidad reproducida. A pesar de que, sin el color la forma permanece, con frecuencia el Mensajeses, 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 laidentidad, las empresas pueden hacer que el color sea el principal elemento de su identidadutilizando un nico color o una paleta de colores como parte de su identidad visual. Si el color seemplea uniformemente en una serie de elementos de la identidad, se termina convirtiendo en larbrica de la empresa.

    d. CIRCULO CROMATICO.

    INFORMATICA TERCER SEMESTRE

  • 8/9/2019 Apuntes Paginas WEB

    13/42

    ELABORACION DE PAGINAS WEB MODULO II_________________________________________________________________________________________________

    El ojo humano puede distinguir entre 10.000 colores. Se pueden adems emplear tres dimensionesfsicas del color para relacionar experiencias de percepcin con propiedades materiales: saturacin,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 vemosest 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)

    INFORMATICA TERCER SEMESTRE

  • 8/9/2019 Apuntes Paginas WEB

    14/42

    ELABORACION DE PAGINAS WEB MODULO II_________________________________________________________________________________________________

    Los tonos secundarios se obtienen al mezclar partes iguales de dos primarios; los tonos terciariosse consiguen al mezclar partes iguales de un tono primario y de un secundario adyacente. Losprimarios son colores que se consideran absolutos y que no pueden crearse mediante la mezclade otros colores. Sin embargo, mezclar los primarios en diversas combinaciones crea un nmeroinfinito de colores. Dependiendo de qu mbito, podemos encontrar tres juegos de coloresprimarios:

    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 primariosaditivos. Son los primarios de la luz y se utilizan en el campo de la ciencia o en laformacin de imgenes de monitores. Si se mezclan en distintos tantos por ciento, formanotros 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 primariossustractivos y son los empleados por los impresores. En imprenta, la separacin decolores se realiza utilizando filtros para restar luz de los primarios aditivos, con lo que seobtienen los colores de impresin por proceso sustractivo.

    f. CONTRASTES.

    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 ynegro. Est relacionado con la longitud de onda de su radiacin. Segn su tonalidad se puededecir 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, elfuego...

    y tonos fros (azul y verde). Los colores fros son aquellos que asociamos con el agua, laluz de la luna ...

    Los trminos "clido" y "fro" se utilizan para calificar a aquellos tonos que connotan dichascualidades; stos trminos se designan por lo que denominamos "temperatura de color". Lasdiferencias entre los colores clidos y los fros pueden ser muy sutiles. Por ejemplo, el papelblanco puede parecer ms clido o ms fro por una leve presencia de rojo o azul. Lo mismoocurre 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. Laluminosidad puede variar aadiendo negro o blanco a un tono.

    En general, con los tonos puros que tienen un valor ms luminoso (amarillo, naranja, verde) seconsiguen 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.

    INFORMATICA TERCER SEMESTRE

  • 8/9/2019 Apuntes Paginas WEB

    15/42

    ELABORACION DE PAGINAS WEB MODULO II_________________________________________________________________________________________________

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

    Para crear una pgina web requerimos de un lenguaje especial de programacin, el cual es unprograma 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, otan 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 tipoExplorer o Netscape, el HTML se ha convertido en uno de los formatos ms populares que existenpara la construccin de documentos.

    DHTML.

    El HTML Dinmico o DHTML (del ingls Dynamic HTML) designa el conjunto de tcnicas quepermiten crear sitios web interactivos utilizando una combinacin de lenguaje HTML esttico, unlenguaje interpretado en el lado del cliente (como JavaScript) y el lenguaje de Hojas de estilo encascada (CSS).

    ASP.

    Active Server Pages (ASP), es una tecnologa propietaria de Microsoft. Se trata bsicamente deun 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 (InternetInformation Server y Personal Web Server). Los scripts ASP se ejecutan, por lo tanto, en elservidor y puede utilizarse conjuntamente con HTML y Javascript para realizar tareas interactivasy en tiempo real con el cliente.

    Con ASP se pueden realizar fcilmente pginas de consulta de bases de datos, funciones sencillascomo 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, sibien 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 pginasweb. Para interactuar con una pgina web se provee al lenguaje JavaScript de unaimplementacin del DOM (Document Object Model, podra ser Modelo en Objetos para larepresentacin de Documentos), abreviado DOM, es esencialmente un modelo computacionala travs del cual los programas y scripts pueden acceder y modificar dinmicamente el contenido,estructura y estilo de los documentos HTML y XML.

    INFORMATICA TERCER SEMESTRE

    http://es.wikipedia.org/wiki/Navegadorhttp://es.wikipedia.org/wiki/DOMhttp://es.wikipedia.org/wiki/Navegadorhttp://es.wikipedia.org/wiki/DOM
  • 8/9/2019 Apuntes Paginas WEB

    16/42

    ELABORACION DE PAGINAS WEB MODULO II_________________________________________________________________________________________________

    2.1. DEFINIR OBJETIVOS Y CONTENIDOS DE LA PGINA WEB.

    Es importante tomar una decisin para elegir qu objetivos consideramos primordiales antes deldesarrollo de la pgina web. La eleccin, condiciona de manera clave la concepcin y el diseo delproyecto, 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 seinformen y comparen sin presionesImpactar 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 queadems 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 lasexpectativas del negocio.

    Piensa que la definicin de objetivos te ahorrar sorpresas como disear una web pensando enlos clientes, para despus descubrir que slo te visitan "extraos" ... O un diseo de web muyespectacular e innovador, cuando lo nico que se pretende es que la persona deje sus datos deemail para enviarle ofertas concretas, etc.

    Un mismo sitio web puede perfectamente intentar cumplir varios objetivos simultneamenteaunque te recomiendo que lo abordes por fases. Empieza por 2 o 3 de ellos, y a medida quevayas viendo su evolucin y aprendiendo de los errores y aciertos, puedes ir planificando nuevosobjetivos.

    Para ilustrar estas ideas, los objetivos podemos agruparlos en:

    a) Buscar leads o contactos. Ya sea para comprar, distribuir, vender, anunciarse, conseguir unavisita 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, transferenciade 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 implicacionespara la organizacin, buscando diferenciarse de la competencia, marcar objetivos a medio y largoplazo, etc. Es escribir con letras bien grandes LO QUE QUIERES. Otra tarea ser decidir lasestrategias a emprender para cumplir los objetivos.

    INFORMATICA TERCER SEMESTRE

  • 8/9/2019 Apuntes Paginas WEB

    17/42

    ELABORACION DE PAGINAS WEB MODULO II_________________________________________________________________________________________________

    2.2. ESQUEMATIZAR LA ESTRUCTURA GENERAL DE UNA PAGINA WEB.

    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 laestructura de dichas pginas, es conveniente hacer un esquema, para la mayora de los casos unahoja de papel y un lapicero bastar, pero si el emplazamiento va a albergar un gran nmero depginas es recomendable usar algn tipo de programa que permita manejar estructuras de tipografo.

    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 seadapta bastante bien a una estructura lineal como jerrquica. Mientras que un sitio donde seexpone 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 nivelsuperior a otros inferiores.

    Se debe listar la informacin que se desea incluir en la Web. Esta informacin debe sersignificativa y til para el pblico. Teniendo en cuenta lo que a ellos les interesa, no lo que anosotros nos gustara que nos interese.

    En el caso de que existan otras formas de acceso a informacin disponible para esas mismaspersonas, 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 asta, sin preocuparnos demasiado por los detalles, ya que solo es un boceto. Es importanterecordar que los visitantes de una web no lo van a leer completamente, sino que lo que desean esencontrar rpidamente lo que les interesa, por lo que habr de establecer una estructuraadecuada de enlaces entre las pginas. El movimiento de un lado a otro de la web debe ser loms intuitivo posible para facilitar el trabajo del visitante. Un sitio web en el que sea difcilencontrar lo que buscamos es abandonado rpidamente.

    Cuando un internauta ingresa a una pgina web, quiere encontrar entre otras cosas trescaractersticas: velocidad, simplicidad y claridad. Por su parte, el sitio web visitado pretende quela persona o personas que ingresen en sus pginas se queden el mayor tiempo posible; enlenguaje comercial buscan atraer clientes. Pero, cmo lograr las dos cosas?, es decir, ofrecer unproducto agradable a la vista y con buenos contenidos.

    Este es un ejemplo con el debemos empezar a crear nuestra pgina, en el cual debemos tenerclaro los niveles que tendr.

    INFORMATICA TERCER SEMESTRE

  • 8/9/2019 Apuntes Paginas WEB

    18/42

    ELABORACION DE PAGINAS WEB MODULO II_________________________________________________________________________________________________

    ESTRUCTURA SUGERIDA DE UNA WEB

    MATERIA : ELABORAR PAGINAS WEB

    NIVEL 1 NIVEL 2 NIVEL 3PRINCIPAL BIENVENIDA

    UBICACIN CURRICULARFUNDAMENTACION

    A QUIEN VA DIRIGIDO

    INFORMACION INTRODUCCION

    OBJETIVO

    CONTENIDO

    METODOLOGIA

    EVALUACION

    CALENDARIO

    MATERIALES UNIDAD I CONTENIDO

    RESUMEN

    RECURSOS

    UNIDAD II CONTENIDORESUMEN

    RECURSOS

    UNIDAD III CONTENIDO

    RESUMEN

    RECURSOS

    ACTIVIDADESPORTAFOLIO DE APREDIZAJE PARA CADAUNIDAD RESUMEN

    RECURSOS

    FOROS 2 FOROS EL INICIAL

    FORO FINAL

    REFERENCIAS BIBLIOGRAFIA

    LECTURAS COMPLEMENTARIAS POR TEMALIGAS DE INTERES

    GLOSARIO

    CREADOR 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 y . Dentro de estedocumento, podemos asimismo distinguir dos partes principales:

    El encabezado, delimitado por y donde colocaremos etiquetas de ndoleinformativo como por ejemplo el titulo de nuestra pgina.

    El cuerpo, flanqueado por las etiquetas y , que ser donde colocaremosnuestro texto e imgenes delimitados a su vez por otras etiquetas como las que hemos visto.

    INFORMATICA TERCER SEMESTRE

  • 8/9/2019 Apuntes Paginas WEB

    19/42

    ELABORACION DE PAGINAS WEB MODULO II_________________________________________________________________________________________________

    El resultado es un documento con la siguiente estructura:

    Etiquetas y contenidos del encabezadoDatos que no aparecen en nuestra pgina pero que son importantes para catalogarla: Titulo,palabras clave,...

    Etiquetas y contenidos del cuerpoParte del documento que ser mostrada por el navegador: Texto e imgenes

    Con todo lo que conocemos ya sobre HTML podemos construir una pgina web que ya tiene

    bastante sentido. Vemos un ejemplo a continuacin.

    Elaboracin de Paginas Web

    Bienvenido,

    Ests en la pgina Elaboracin de Pginas Web de Tercer Semestre.

    Aqu aprenders de manera personal a realizar tu pagina web.

    Cmo ya hemos dicho el HTML es un lenguaje de marcas ( etiquetas). As todo nuestro textoestar encerrado entre etiquetas: Una etiqueta de inicio y una etiqueta de fin.

    Funcionan de la siguiente manera:

    inicio de una 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.

    Los elementos que no llevan etiqueta de cierre, se cierran en la misma etiqueta deapertura, por ejemplo:

    Las etiquetas deben de ir siempre en minsculas. Encontrars muchas pginas WEB en las quelas etiquetas estn en maysculas, hasta el HTML 4.0 era indiferente la utilizacin de minsculaso maysculas y muchos autores utilizaban las maysculas por claridad.

    Todo lo que vaya entre dos etiquetas HTML se ver afectado por stas, por ejemplo

    INFORMATICA TERCER SEMESTRE

  • 8/9/2019 Apuntes Paginas WEB

    20/42

    ELABORACION DE PAGINAS WEB MODULO II_________________________________________________________________________________________________

    Esto es un encabezado

    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 < bodytext="">establece el color de letra en la pagina< h1>establece un encabezado en la pagina< /h1>< hr>agrega una lnea separadora

    Etiquetas de texto< b>pone el texto en negrita< i>pone el texto en cursiva< /i>< font color="">cambia el color de texto< font size="">cambia el tamao del texto< font face=""> cambia el tipo de letra < font color=""size=""face=""> cambia el color eltamao y el tipo de letra< /font>

    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 < imgsrc=""align="middle">alinea el titulo de la imagen en la parte de en medio < imgsrc=""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 estoes slo un ejemplo, que un ttulo sea tambin un enlace, veamos cmo lo haramos (utilizamospseudo cdigo puesto que todava no hemos visto el cdigo html).

    loquesea.com

    En cambio el siguiente cdigo sera incorrecto

    loquesea.com

    Las etiquetas pueden a veces llevar atributos que nos permiten especificar ms las etiquetas queutilizamos. Los atributos son como los adjetivos. Por ejemplo supongamos que tenemos unaetiqueta 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 nos quedara .

    Veamos la etiqueta nos dice que se trata de un documento html, pero podemos utilizarel atributo lang para especificar el idioma del contenido del documento, as nos quedara . 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 siemprese aaden en la etiqueta de inicio y los valores de un atributo siempre deben estar entre comillas.

    Etiquetas de prrafo

    INFORMATICA TERCER SEMESTRE

  • 8/9/2019 Apuntes Paginas WEB

    21/42

  • 8/9/2019 Apuntes Paginas WEB

    22/42

    ELABORACION DE PAGINAS WEB MODULO II_________________________________________________________________________________________________

    link="#nmero" Para el color de los enlaces. vlink="#nmero" El color con que aparecern los enlaces ya visitados. alink="#nmero" Color del enlace cuando lo pulsamos.

    Por lo tanto la etiqueta puede quedar del siguiente modo:

    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 .

    Ejemplo:

    Las listas pueden ser: Lista desordenada, (Unordered List).

    Lista ordenada, (Ordered List).

    Ejemplos de diferentes tipos de listas:

    Lista con nmeros romanos:ManzanaZanahoriaLechugaTomateI ManzanaII ZanahoriaIII Lechuga

    IV Tomate

    Lista numerada:ManzanaZanahoriaLechugaTomate1 Manzana2 Zanahoria3 Lechuga4 Tomate

    INFORMATICA TERCER SEMESTRE

  • 8/9/2019 Apuntes Paginas WEB

    23/42

    ELABORACION DE PAGINAS WEB MODULO II TEMAS 1_________________________________________________________________________________________________

    Una de las formas de crear listas conDreamweaver es activar la barra Texto,para ello pulsaremos, tal como vemosen la imagen inferior, en el botn

    Comn

    Y en el panel que se despliega seleccionremosla opcin Texto.

    Pulsaremos el botn ul. Con este botnactivamos la opcin Listas simples o noordenadas

    Si seleccionamos la lista simple, la lneadonde tengamos activo el cursor de textoser el comienzo de una lista. Cuandopulsemos la tecla enter, Dreamweaverconvertir el texto introducido en esa lneaen una entrada de la lista y prepara lasiguiente lnea como otro elemento de lalista.

    Para terminar de introducir elementos en la lista slo tenemos que pulsar la tecla enter dos vecesseguidas 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 encuentrandentro de ciertos documentos, generalmente en pginas web, y que permiten acceder a otrosdocumentos. Estos enlaces establecen conexiones con otras pginas en Internet para que el

    INFORMATICA TERCER SEMESTRE 35Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acua Reyes

  • 8/9/2019 Apuntes Paginas WEB

    24/42

    ELABORACION DE PAGINAS WEB MODULO II TEMAS 1_________________________________________________________________________________________________

    navegador pueda visualizarlas. Cuando se hace click sobre un enlace, el navegador abrirautomticamente la pgina de informacin a la que hace referencia.

    Para definir un enlace es necesario marcar con la etiqueta el objeto del cual va a partir dichoenlace. Dicha directiva debe incluir el parmetro href="url" para especificar el destino del enlace.Es decir, que antes del objeto elegido debemos abrir con , y despus cerrar con

    . 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:Pulse aqu para visitar a la NASA

    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:Foto entonces al hacer clic en el texto Foto nos abrir laimagen.gif.

    Tambin se puede ir a otro enlace por medio de una imagen. Lo nico que se debe hacer escambiar el texto por una imagen:

    Si se quiere hacer un link para que nos manden un E-Mail se debe hacer de la siguiente manera:Mandame un Email

    Entonces cuando se haga clic sobre esta palabra Mandame un Email se abrir (por defecto) elMicrosoft 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 unpedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibirpreguntas, 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 unprograma que recibir los datos y har el tratamiento correspondiente (una base de datos porejemplo).

    Aqu vamos a ver cmo crear el formulario bsico, (insertar campos y botones en el formulario yvalidarlos), pero no la parte de tratamiento de los datos, ya que para ello se necesitan nocionesde 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, mensdesplegables, y botones.

    Elementos de formulario

    Los elementos de formulario pueden insertarse en una pgina a travs del men Insertar, opcinObjetos de formulario. A travs de esta opcin se puede acceder a la lista de todos los objetos deformulario que pueden ser insertados en la pgina. Vamos a ver uno por uno algunos de losdistintos elementos que pueden formar parte de un formulario, as como algunas de suspropiedades.

    INFORMATICA TERCER SEMESTRE 36Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acua Reyes

  • 8/9/2019 Apuntes Paginas WEB

    25/42

    ELABORACION DE PAGINAS WEB MODULO II TEMAS 1_________________________________________________________________________________________________

    Campo de texto y rea de texto: Permiten aadir un cuadro de texto. El Campo de texto solopermite escribir una lnea al usuario, mientras que el rea de texto permite escribir varias. Sepuede pasar de Campo de texto a rea de texto a travs del inspector de propiedades. Tambines posible definirlo como Contrasea. A continuacin tienes un ejemplo de cada uno de estos trestipos.

    A travs del inspector de propiedades es posible asignar tambin el ancho del cuadro de texto, elnmero mximo de lneas o caracteres, y el valor inicial del cuadro.

    Botn: Es el botn tradicional. El botn puede tener asignadas tres opciones: Enviarformulario, 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 elestado inicial como Activado o como Desactivado.

    Botn de opcin: Es un pequeo botn redondo que puede activarse o desactivarse. Si hayvarios 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 unelemento de formulario que llevaasociada una lista de opciones. Loselementos se aaden a travs de botnValores de lista del inspector depropiedades. Cuando se trata de unmen, solo es posible elegir uno de los

    elementos, pero si se trata de una lista, a travs de Selecciones puede permitirse que seseleccionen 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 unformulario, este aparecer en la ventana de Dreamweaver como un recuadro formado por lneasrojas discontinuas, similar al de la imagen de siguiente.

    INFORMATICA TERCER SEMESTRE 37Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acua Reyes

  • 8/9/2019 Apuntes Paginas WEB

    26/42

    ELABORACION DE PAGINAS WEB MODULO II TEMAS 1_________________________________________________________________________________________________

    Dentro de dicho formulario se podrn insertar los elementos de formulario, que como ya sabespuedes insertarlos a travs del men Insertar, opcin Objetos de formulario.

    Es muy recomendable utilizar tablas para organizar los elementos de los formularios. Utilizandotablas se consigue una mejor distribucin de los elementos del formulario, lo que facilita sucomprensin y mejora su apariencia.

    Validar formularios

    La validacin de formularios sirve para hacer que Javascript valide el formulario antes de que seenve 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 puedeabrir a travs del men Ventana, opcin Comportamientos, o pulsando Mays+F3.

    En el este panel hay que desplegar el botnpulsando sobre l, y en Mostrar eventospara elegir una versin de las actuales deentre la lista de navegadores. Por ejemplo,puedes elegir el navegador IE 6.0. Despusde esto, hay que volver a desplegar elbotn, y pulsar sobre la opcin Validarformulario.

    Entonces se mostrar una

    ventana como la siguiente,donde aparecen todos loselementos del formulario.

    Puede seleccionarse uno poruno cada elemento delformulario, pudiendo

    INFORMATICA TERCER SEMESTRE 38Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acua Reyes

  • 8/9/2019 Apuntes Paginas WEB

    27/42

    ELABORACION DE PAGINAS WEB MODULO II TEMAS 1_________________________________________________________________________________________________

    especificar los requisitos que ha de cumplir. Puede establecerse como campo a rellenarobligatoriamente, 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, enlas que se puede insertar texto y grficos. Las tablas son una buena herramienta para organizarlos datos en una pgina web, adems nos permiten estructurar las pginas de nuestro sitioseparando la cabecera, el men, el contenido...

    La organizacin del texto en una pgina es posible gracias a las tablas. Muchas pginas web soncomo pginas de revistas, y la forma ms simple de emular las funciones de maquetacin son lastablas. Se pueden utilizar y personalizar las tablas de varias formas diferentes con el fin dehacerlas 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 laanchura, el color o imagen de fondo, etc.

    Ejemplo:

    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, esnecesario definir cuntas columnas de tabla se desean utilizar. Para ello se deben utilizar lasinstrucciones , las cuales indican los encabezados de tabla.

    Ejemplo:Columna 1Columna 2Columna 3

    Este segmento de cdigo le indica al explorador que usaremos una tabla de tres columnas. Cadaidentificador 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 nospreguntar cuntas filas y cuantas columnastendr nuestra tabla, qu ancho tendr y sitendr borde.

    INFORMATICA TERCER SEMESTRE 39Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acua Reyes

  • 8/9/2019 Apuntes Paginas WEB

    28/42

    ELABORACION DE PAGINAS WEB MODULO II TEMAS 1_________________________________________________________________________________________________

    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 estosformatos 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 calidadque las imgenes BMP, son ms recomendables debido a que ocupan menos memoria. Vamos aver un poco ms sobre estos formatos:

    Formato GIF:Utilizan un mximo de 256 colores, y son recomendables para imgenes con grandes reas deun mismo color o de tonos no continuos. Suelen utilizarse con gran frecuencia, ya que permitencontener transparencias y animacin.

    Formato JPG:Las imgenes son de mayor calidad que las GIF, al poder contener millones de colores, pero eltamao de la imagen es mayor y tarda ms en descargarse.

    Puedes incluir imgenes en otros formatos a travs de Dreamweaver, que podrn servisualizadas 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. Laimagen solo se mostrar correctamente en el navegador.

    Puedes cambiar el formato de las imgenes mediante la utilizacin de algn programa detratamiento 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 lasimgenes y cambiar los colores, puedes utilizar incluso el programa Paint de Windows.

    Para insertar una imagen, debe utilizar la siguiente sintaxis:

    En sta instruccin se da por defecto que la imagen que se inserta tiene la extensin JPG. Parainsertar otro tipo de imagen slo deber especificar la extensin correspondiente. Las imgenespueden ser adquiridas de la galera de imgenes de Microsoft, o de cualquier otra imagendigitalizada. Incluso se pueden crear iconos animados desde algn programa de animacin, yusarlos 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 formatoadecuado para cada tipo de imagen, vamos a intentar guiarle en la seleccin de cada formato.

    Imgenes fotogrficas

    INFORMATICA TERCER SEMESTRE 40Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acua Reyes

  • 8/9/2019 Apuntes Paginas WEB

    29/42

    ELABORACION DE PAGINAS WEB MODULO II TEMAS 1_________________________________________________________________________________________________

    Imgenes obtenidas a travs de fotografas de personas o lugares. Para este tipo de imgenes elformato ms recomendado es el JPEG porque consigue una gran compresin con una mnimaperdida de calidad.

    JPEG GIF PNG

    6.565 bytes24 bits 25.522 bytes256 cols 52.361 bytes24 bits

    Imgenes renderizadas

    Este tipo de imgenes son las obtenidas por un programa de generacin de imgenes sintticasmediante algn proceso de trazado de rayos o similar. Se caracterizan por degradados suaves ylneas muy bien definidas.

    Para este tipo de imgenes es recomendable usar el formato PNG. Tenga presente que el formatoPNG es el ms reciente y puede no estar soportado en todos los navegadores.

    JPEG GIF PNG

    Imgenes sencillas

    INFORMATICA TERCER SEMESTRE 41Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acua Reyes

  • 8/9/2019 Apuntes Paginas WEB

    30/42

    ELABORACION DE PAGINAS WEB MODULO II TEMAS 1_________________________________________________________________________________________________

    Para las imgenes sencillas con pocos colores y con formas muy delimitadas, el formato msrecomendado es el GIF, ya que se puede adaptar al nmero de colores de una imagen. Con elpaso 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 2.394 bytes 1.613 bytes

    Realice pruebas

    Las recomendaciones dadas anteriormente no son indiscutibles, son recomendaciones basadas enla experiencia. Puede que para segn que casos, no sean del todo acertadas, as que lerecomendamos que pruebe a grabar las imgenes en distintos formatos y seleccione el que leparezca ms adecuado.

    Formato Imgenes

    JPEG24Bits

    Baja compresin6028 bytes

    Media compresin2761 bytes

    Alta compresin1815 bytes

    GIF

    256 Colores12230 bytes 16 Colores4304 bytes 255 Col. + Trans.8703 bytes

    PNG

    INFORMATICA TERCER SEMESTRE 42Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acua Reyes

  • 8/9/2019 Apuntes Paginas WEB

    31/42

    ELABORACION DE PAGINAS WEB MODULO II TEMAS 1_________________________________________________________________________________________________

    24 Bits29070 bytes

    256 Colores11640 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 lainstruccin de insercin de imgenes.

    La siguiente lnea de cdigo muestra el ejemplo de insercin de imgenes como hipervnculos.

    La primera instruccin indica el nombre de la pgina a la que se desee acceder cuando se hagaclic 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 meninsertar, de la barra men, y buscar en l la opcin imagen.

    En la ventana de dilogo que Dreamweavernos abrir, podremos buscar la imagen quequeramos insertar en nuestra pgina,simplemente tenemos que seleccionarla ypulsar el botn aceptar de la ventanadilogo.

    Observa que imagen se ha insertado en la posicin que ocupaba el cursor en el momento deaadir la imagen, tambin podemos escribir texto en la misma lnea que insertamos la imagen.

    Podemos combinar en la misma lneatexto e imgenes, sin importar el orden.Podemos escribir una lnea de texto y encualquier punto de ella insertar laimagen, o podemos insertar primero laimagen y despus escribir un comentarioa su lado.

    INFORMATICA TERCER SEMESTRE 43Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acua Reyes

  • 8/9/2019 Apuntes Paginas WEB

    32/42

    ELABORACION DE PAGINAS WEB MODULO II TEMAS 1_________________________________________________________________________________________________

    Dreamweaver nos permite insertar imgenes devarias maneras, ya hemos visto como hacerlo

    desde la barra de men. Ahora vamos a aprendera insertar imgenes desde el panel insertar, conla barra comn activada. Podemos pulsar en labarra comn en el icono imagen.

    Dreamweaver nos muestra la misma ventana de dilogo de antes, podemos seleccionar el archivocomo ya sabemos o podemos escribir el nombre directamente en la casilla nombre, y despuspulsamos 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 mapasobre 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, debeincluir en la etiqueta de imagen correspondiente a la imagen a mapear el atributousemap="#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 seadmiten 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 mstiempo. 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 documentotienes que dirigirte al men Insertar, Meda,opcin Plug-in. A la derecha tienes un ejemplo deun archivo de sonido, para el que se muestran loscontroles de audio.

    INFORMATICA TERCER SEMESTRE 44Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acua Reyes

  • 8/9/2019 Apuntes Paginas WEB

    33/42

    ELABORACION DE PAGINAS WEB MODULO II TEMAS 1_________________________________________________________________________________________________

    En Dreamweaver no se mostrarn los controles de audio. Todos los archivos que soninsertados 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 semostrarn 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 debenvaler cero.

    Los sonidos se reproducen automticamente al cargarse la pgina, y se reproducen solamenteuna vez. Estos valores no pueden cambiarse a travs del inspector de propiedades, pero s atravs del cdigo.

    Por ejemplo, el archivo anterior apareca en el cdigo como:

    . Pero para que no se reprodujeraautomticamente se ha aadido autostart="false", y para que se reprodujera continuamentese ha aadido loop="true".

    La lnea de cdigo del archivo de audio a quedado del siguiente modo:

    Para poder hacer que el audio pueda activarse y desactivarse cuando no se muestran loscontroles, 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.

    Insrtalo despus de la etiqueta Con el parmetro loop puedes decidir cuantas vecesquieres 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 encuenta que los vdeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de muchotiempo para descargarse.

    Los formatos de vdeo que suelen utilizarseen Internet son el AVI, el MPEG y el MOV.

    Para insertar un archivo de vdeo en undocumento tienes que dirigirte al menInsertar, Meda, opcin Plug-in.

    A la derecha tienes un ejemplo de un archivo devideo, para el que se muestran los controlesde video.

    El inspector de propiedades para losarchivos de audio insertados de estaforma es el mismo que el de losarchivos de audio, ya que ambos seinsertan como Plug-in.

    INFORMATICA TERCER SEMESTRE 45Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acua Reyes

  • 8/9/2019 Apuntes Paginas WEB

    34/42

    ELABORACION DE PAGINAS WEB MODULO II TEMAS 1_________________________________________________________________________________________________

    Los videos tambin se reproducen automticamente al cargarse la pgina, y se reproducensolamente una vez. Estos valores pueden cambiarse a travs del cdigo, del mismo modo queen 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 instaladoun 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 dereproducirse.

    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 losusuarios enviar y recibir mensajes rpidamente (tambin denominados mensajes electrnicoso cartas electrnicas) mediante sistemas de comunicacin electrnicos. Principalmente se usaeste nombre para denominar al sistema que provee este servicio en Internet, mediante elprotocolo SMTP, aunque por extensin tambin puede verse aplicado a sistemas anlogos queusen otras tecnologas. Por medio de mensajes de correo electrnico se puede enviar, nosolamente texto, sino todo tipo de documentos digitales. Su eficiencia, conveniencia y bajo costoestn logrando que el correo electrnico desplace al correo ordinario para muchos usoshabituales.

    Para poder usar enviar y recibir correo electrnico, generalmente hay que estar registrado enalguna empresa que ofrezca este servicio (gratuita o de pago). El registro permite tener unadireccin de correo personal nica y duradera, a la que se puede acceder mediante un nombre deusuario y una Contrasea.

    Hay varios tipos de proveedores de correo, que se diferencian sobre todo por la calidad delservicio que ofrecen. Bsicamente, se pueden dividir en dos tipos: los correos gratuitos y los depago.

    Una direccin de correo electrnico es un conjunto de palabras que identifican a una personaque puede enviar y recibir correo. Cada direccin es nica y pertenece siempre a la mismapersona.

    Un ejemplo es [email protected], 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: elnombre de usuario (a la izquierda de la arroba; en este caso, persona), y el dominio en el queest (lo de la derecha de la arroba; en este caso, servicio.com). La arroba tambin se puedeleer "en", ya que [email protected] identifica al usuario persona que est en el servidorservicio.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 quehttp://www.servicio.com/puede ser una pgina web en donde hay informacin (como en unlibro),[email protected] 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.

    INFORMATICA TERCER SEMESTRE 46Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acua Reyes

  • 8/9/2019 Apuntes Paginas WEB

    35/42

    ELABORACION DE PAGINAS WEB MODULO II TEMAS 1_________________________________________________________________________________________________

    3. PUBLICAR PAGINAS WEB EN LOS SERVIDORES DE INTERNET

    Que es publicar una pagina web y como hacerlo? Despus de hacernos nuestra pgina en nuestracomputadora (incluyendo textos, imgenes, videos y otros archivos) sta solamente la vemosnosotros 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 quesiempre esta conectada). El servidor, hosting (lugar donde subiremos nuestra pgina)normalmente todos los proveedores de acceso a Internet ofrecen hosting. (Al que pagamos porconectarnos a internet). El Hosting es un espacio (Ofrecido en Megabites) para almacenar nuestraweb en su servidor. Existen infinidad de proveedores de hosting gratuitos, que con solorellenando un formulario desde su web podemos conseguir de manera rpida y gratuitamenteespacio para nuestra web.

    Cuando solicitamos los servicios de una conexin a internet (el servidor) al que pagamos lafactura por navegar, ofrecen una serie de recursos gratuitos por utilizar sus redes y servicioscomo pueden ser: Cuentas de correo, discos duros virtuales donde alojar tus archivos yun sinfn de promociones, pero tambin un ESPACIO WEB, o cuenta FTP.

    3.1. IDENTIFICAR LOS SERVIDORES DE INTERNET DISPONIBLES PARAPUBLICACION DE INFORMACION.

    Publicacin de la pgina web.

    Tendremos que elegir un servidor y claro esta registrarnos, por lo general nos notificarn va e-mail nuestra altaen su espacio web. Para subir la pgina web. Existen varias formas: desde la propia web de proveedor, omediante 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 lospasos 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 (preguntasfrecuentes) que suelen tener estos sitios. Desde un programa para enviar por FTP. Que es una manera detransmitir archivos por la red, tanto para mandar como para descargar, existen en internet montones deprogramas (gratuitos y de pago) para poder enviar archivos a un servidor. Estos son algunos de los masconocidos, Cuteftp , ws_ftp , NicoFTP .

    Otro estupendo FTP

    WS_FTP 95 El inmejorable cliente detransmisin de archivos. Descrgalo junto conel parche para ponerlo en espaol. Podrsmandar tus paginas web a tu servidor, borrar,cambiar, descargar desde sitios FTP, etc. Y esgratuito totalmente.

    INFORMATICA TERCER SEMESTRE 47Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acua Reyes

  • 8/9/2019 Apuntes Paginas WEB

    36/42

    ELABORACION DE PAGINAS WEB MODULO II TEMAS 1_________________________________________________________________________________________________

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

    Despus de lo anterior presiona Aceptar y aparecer la siguiente ventana:

    Como puedes ver en un lado tucomputadora y en otro el servidor,simplemente tenemos que irseleccionando y mandarlo o bienpresionando dos veces sobre el archivo,pgina, imagen o una vez seleccionadoy presionando en la flecha entre las dosventanas, podemos a su vez hacerselecciones mltiples si mantenemos

    pulsado Alt Gr en nuestro teclado,mientras vamos eligiendo lo quequeremos subir y luego la flecha assubimos de una vez varios contenidos,el documento, las imgenes,RECORDAR que por lo general tuprimera pgina tienes que denominarla

    index.html y las dems son las que irn enlazadas a esta.

    INFORMATICA TERCER SEMESTRE 48Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acua Reyes

  • 8/9/2019 Apuntes Paginas WEB

    37/42

    ELABORACION DE PAGINAS WEB MODULO II TEMAS 1_________________________________________________________________________________________________

    Recuerda tener tu web bien estructurada

    Dentro de Windows tenemos el asistente para la publicacin en web. Lo primero es conocerestos 3 datos necesarios: el login (o nombre de usuario), el password (tu contrasea) y ladireccin 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 danes: ftp.iespana.es, el de tripod: ftp.tripod.es, etc. Comencemos, abrimos el programa y veremosque habr una seccin donde podamos poner todos nuestros datos (el login, password y direccinFTP) Rellenamos nuestros datos y le damos a conectar.

    Una vez conectados se nos abrirotra ventana la cual estardividida en 2 partes. El lado de laizquierda nuestra computadora yel de la derecha el del servidor. El

    de la derecha es nuestro "discoduro virtual" es decir nuestroespacio web en el servidor. En ellado izquierdo, ah tenemos quebuscar la carpeta donde tenemosguardada nuestra pgina web contodas sus pginas, imgenes yarchivos utilizados. Seleccionamostodos los componentes y le damosa " enviar " normalmente es unaflechita hacia la derecha. Versuna barra de progreso segn vaya

    el envo de datos al servidor.Cuando finalice el envo denuestra pagina web, en el lado

    derecho veras los archivos enviados. (En nuestra computadora, continuar estando nuestrapgina web). Recuerda siempre desconectar tras finalizar tu sesin. Importante: Recuerdasiempre llamar a tu pgina principal index.

    3.2. ALMACENAR PGINAS WEB EN UN SERVIDOR DEDICADO O GRATUITO.

    INFORMATICA TERCER SEMESTRE 49Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acua Reyes

  • 8/9/2019 Apuntes Paginas WEB

    38/42

    ELABORACION DE PAGINAS WEB MODULO II TEMAS 1_________________________________________________________________________________________________

    Qu es el servicio de hospedaje de pginas?

    El hospedaje de pginas es ofrecer espacio dentro de un servidor para que publique su propiapgina, con opciones especficas de almacenamiento en disco y caractersticas adaptables a susnecesidades 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 unacuartilla de texto y una imagen. Puedes dejarla como tu pgina principal, corregirlacon las herramientas que se proporcionan o sustituirla con las pginas que tdisees y subas al servidor.

    Estadsticas. Desde esta seccin puedes conocer un reporte detallado de losvisitantes que recibes cada mes y cada da. Reportes especficos como: Hits, vistaspor da y por hora, pgina de procedencia de tus visitantes, pginas msconsultadas, pginas de entrada y de salida, trminos buscados en los principalesbuscadores, IPs, dominios, etc.Panel de Control Personal. Desde este panel, los usuarios autorizados del sitiopueden administrar las configuraciones de la cuenta personal: Pueden cambiar laclave de acceso, redireccionar su correo a otra cuenta, respaldar y restaurar susarchivos personales y conocer el espacio que ocupan en su servidor

    Webmail. Tienen acceso al correo a travs del explorador web, con un sistemacomo el de hotmail. Desde tu correo web puedes: Enviar y recibir correo html,exportar o importar tu libreta de direcciones, filtrar correo no deseado, correctorde ortografa (ingles) crear carpetas, recibir correo desde otras cuentas de correoPOP3 (como prodigy), y administrar tu propia agenda de actividades.Administrador de Archivos. Desde este sistema puedes administrar fcilmentetodos 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 lasfunciones del servidor para controlar tu pgina. Puedes configurar a tus usuariosautorizados (empleados de tu empresa, amigos, clientes, etc) y sus correoselectrnicos, respaldar y restaurar toda su informacin, conocer el uso de tuservidor (espacio disponible, web, correo, ftp), crear listas de correo, etc.

    El Servicio de Hospedaje Dedicado brinda un servidor exclusivo para el sitio Web o lasaplicaciones de la empresa. Las ventajas de contar con un servidor dedicado es que permiteinstalar las aplicaciones de software que se requiera, hospedar el nmero de sitios Web deacuerdo 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 energaelctrica, monitoreo del servidor y mantenimiento preventivo de toda la infraestructura 24 x 7 (24horas al da los y das de la semana), los planes de Hospedaje Dedicado incluyen servicios degran valor para las empresas como el almacenamiento de alto desempeo, respaldo diario de lainformacin y cuentas de Correo Negocios con el nombre de su empresa:

    El servicio de correo electrnico que le brinda:

    Direcciones de correo con el nombre del negocio.

    INFORMATICA TERCER SEMESTRE 50Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acua Reyes

  • 8/9/2019 Apuntes Paginas WEB

    39/42

    ELABORACION DE PAGINAS WEB MODULO II TEMAS 1_________________________________________________________________________________________________

    Puede enviar documentos adjuntos de hasta 25

    MB.

    Enviar y recibir mensajes de correo de formarpida y segura.

    Hospedaje Gratis.

    Hay compaas que ofrecen hospedaje gratis. A cambio de que en tu pgina aparezcan anunciosde esa compaa y de algunas otras. El hospedaje gratuito es una buena idea, si tu pgina espersonal, 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 deotras empresas en tu sitio da mala imagen. El visitante podra pensar "esta empresa no tienepara comprar su propio hospedaje". Otra desventaja es que el hospedaje gratis no es seguro. Siesa 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 porGoogle, 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 deldominio principal muchas veces dan una sensacin aparente de poca seriedad.

    Falta de Flexibilidad: No poder hacer modificaciones de nuestra plantilla al 100%, laimposibilidad de instalar plugins y cosas de ese estilo en un principio pueden no molestar pero encuento pasan los meses empieza a pesar este aspecto.

    Una dependencia peligrosa: En un principio olvidarnos de los gastos de alojamiento esatractivo, 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 aotro sitio es bastante engorroso. Actualmente no todos los servicios nos permiten hacer unaredireccin por lo tanto tambin estaremos perdiendo todo el posicionamiento y antigedad quelogramos.

    INFORMATICA TERCER SEMESTRE 51Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acua Reyes

  • 8/9/2019 Apuntes Paginas WEB

    40/42

    ELABORACION DE PAGINAS WEB MODULO II TEMAS 1_________________________________________________________________________________________________

    3.3. SELECCIONAR UN SERVIDOR DE INTERNET CONSIDERANDO LASCARACTERISTICAS DE LA PGINA WEB.

    Antes de decidir donde alojaremos nuestra pgina, es necesario conocer los tipos de servidores y de servicios que

    proporcionan cada uno de ellos:

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

    Servidor de impresiones: controla y maneja una o ms impresoras y acepta trabajos deimpresin de otros clientes de la red, poniendo en cola los trabajos de impresin (Aunquetambin puede cambiar la prioridad de las diferentes impresiones), y realizando la mayora otodas las otras funciones que un sitio de trabajo se realizara para lograr una tarea de impresinsi la impresora fue conectada directamente con el puerto de impresora del sitio de trabajo.

    Servidor de correo: almacenan, envan, reciben, enrutan, y realizan otras operacionesrelacionadas con e-mail para otros clientes en la red.

    Servidor de fax: almacenan, envan, reciben, enrutan, y realizan otras funciones necesariaspara la transmisin, la recepcin, y la distribucin apropiadas de los fax.

    Servidor de la telefona: realiza funciones relacionadas con la telefona, tales como contestadorautomtico, 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 elInternet (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 paraaumentar el funcionamiento de ciertas operaciones (Ej., prefetching y depositar documentos uotros datos que se soliciten muy frecuentemente), tambin sirve seguridad, esto es, tiene unFirewall. Permite administrar el acceso a internet en una Red de computadoras permitiendo onegando el acceso a diferentes Web sites.

    Servidor del acceso remoto (RAS): controla las lneas de mdem de los monitores u otroscanales de comunicacin de la red para que las peticiones conecten con la red de una posicinremota, respuestas la llamada telefnica entrante o reconocen la peticin de la red, y realizan loschequeos necesarios de la seguridad y otros procedimientos necesarios para registrar a unusuario sobre la red.Servidor del uso: realiza la parte de la lgica de la informtica o del negocio de un uso delcliente, aceptando las instrucciones para que las operaciones se realicen de un sitio de trabajo ysirviendo los resultados de nuevo al sitio de trabajo, mientras que el sitio de trabajo realiza elinterfaz operador o la porcin del GUI del proceso (es decir, la lgica de la presentacin) que serequiere para trabajar correctamente.

    Servidor web: almacena documentos HTML, imgenes, archivos de texto, escrituras, y demsmaterial Web compuesto por datos (conocidos colectivamente como contenido), y distribuye estecontenido a clientes que la piden en la red.

    INFORMATICA TERCER SEMESTRE 52Docentes: L.S.C. Elvia Micaela Urbina Viscencio / L.S.C. Ma. Eugenia Acua Reyes

  • 8/9/2019 Apuntes Paginas WEB

    41/42

  • 8/9/2019 Apuntes Paginas WEB

    42/42

    ELABORACION DE PAGINAS WEB MODULO II TEMAS 1_________________________________________________________________________________________________

    3.5. VERIFICAR EL FUNCIONAMIENTO DE LA PGINA WEB DENTRO DEL SERVIDORSELECCIONADO.

    Para verificar la presentacin

    Para revisar cmo se vera su pgina en distintos tipos de navegador y tamaos de pantalla esmuy til el "Screen Size Tester".

    Para revisar cmo se ver la pgina segn la versin de html soportada por los navegadores eincluyendo Webtv: Web Site Viewer

    Para verificar cmo vern nuestras pginas las personas con distintos tipos de deficiencias depercepcin del color, una muy til herramienta de revisin en lnea es: Servicio Newman deevaluacin del diseo.

    Para verificar la sintaxis

    El Servicio de verificacin del W3C, inspecciona los documentos para revisar suconformidad con las recomendaciones de HTML Y XHTML.

    El Servicio de Verificacin de CSS facilita revisar la correccin de los estilos encascada 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

    http://www.anybrowser.com/ScreenSizeTest.htmlhttp://www.anybrowser.com/siteviewer.htmlhttp://newmanservices.com/colorblind/default.asphttp://newmanservices.com/colorblind/default.asphttp://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/http://validator.w3.org/http://www.anybrowser.com/ScreenSizeTest.htmlhttp://www.anybrowser.com/siteviewer.htmlhttp://newmanservices.com/colorblind/default.asphttp://newmanservices.com/colorblind/default.asphttp://jigsaw.w3.org/css-validator/