Source: https://www.scribd.com/document/72132238/Curso-de-diseno-de-paginas-web
Timestamp: 2016-08-25 06:55:27+00:00

Document:
BrowseUploadSign inJoinBooksAudiobooksComicsSheet MusicWelcome to Scribd! Start your free trial and access books, documents and more.Find out moreCurso de Diseño de Páginas WebCurso de Diseño y Creación de páginas web
El lenguaje HTML Partes de las que se compone una página web Elementos básicos Herramientas para su creación Los distintos Navegadores
Diseño web, ajustes en pantalla y colores Imágenes y animaciones. El fondo de la página Añadir música de fondo
áginas, archivos y links
Links E-mail como links Cómo distribuir a nuestros visitantes archivos
Comprobaciones finales Colocar nuestra página en internet: FTP
ar vida a nuestra página
Java, JavaScript y VBScript Insertar código Script dentro de nuestra página HTML Cookies JavaScript y los problemas con los navegadores
Curso de Diseño y Creación de páginas web: El Lenguaje HTML
Para empezar, empezaremos con una nota importante: NO ES NECESARIO SABER ABSOLUTAMENTE NADA DE LENGUAJE HTML PARA CREAR UNA PÁGINA WEB
Simplemente aquí se dan unas nociones elementales sobre qué es realmente una página web y en qué consiste dicho lenguaje. Una página web no dista mucho de cualquier programa que podamos tener en nuestro ordenador, es decir, una página web es un conjunto de órdenes o instrucciones que le dicen a nuestro ordenador qué es lo que tiene que hacer o mostrar, pero estas órdenes las traduce el navegador de internet. Como hoy en día un ordenador es incapaz de entender el lenguaje humano, se tuvo que buscar un lenguaje sencillo y potente para la creación de páginas web, este lenguaje es el HTML (HiperText Mark-up Language) o lenguaje de etiquetas. En el lenguaje HTML existen una serie de convenciones que definen los aspectos generales de una página web, así como sus partes. La idea es muy sencilla: cualquier cosa que se represente en una página web (texto, imágenes, ...) debe ir entre 2 "etiquetas" o "tags", la primera indica que empieza el elemento y la segunda indica que dicho elemento ha terminado, por ejemplo: TEXTO Hola, este es el texto FINTEXTO Pero como puede observarse las "etiquetas" pueden llegar a confundirse (no por el ordenador, sino por nosotros), con lo que las etiquetas se representan de una manera especial: entre 2 símbolos ( < >). Y para denotar la segunda etiqueta </>. De esta manera el ejemplo quedaría: <TEXTO> Hola </TEXTO> Pero el nombre de las etiquetas nos lo hemos inventado. Cada etiqueta posee un nombre, este nombre suele ser el nombre del elemento en inglés. Por ejemplo, una tabla se representa con
<TABLE></TABLE>. Por lo tanto, las páginas web son un fichero de texto en el que se incluyen una serie de etiquetas que definen zonas, formatos y características de los elementos que contienen y que, posteriormente, el navegador se encarga de traducir a un formato gráfico, que es lo que finalmente vemos en pantalla. A continuación presentamos un fragmento de código HTML de una página web.
Como se puede observar, aparecen algunas palabras extrañas. Es la representación de las tildes, que se realiza mediante el símbolo "&" seguido de la letra que queremos acentuar (a, e, i, o, u) y seguido de "acute;". Por ejemplo, si queremos acentuar la "a" se realizaría de la siguiente manera: &aacute; Es importante que no olvidemos poner el punto y coma al final; con Internet Explorer no es necesario, pero con Netscape Navigator sí. Pese a que las últimas versiones de los navegadores admiten poner las tildes directamente, su representación se realiza así debido a que las primeras versiones de los navegadores no las admitían. Otra representación extraña es &nbsp; que indica que no hay nada, pero que ha de representarse en pantalla. Esto es útil cuando se quiere mostrar una celda vacía dentro de una tabla, una línea en blanco, ... También se aprecia que las etiquetas se pueden combinar. Por ejemplo, si queremos escribir un texto en negrita y cursiva, tendremos que poner las etiquetas correspondientes a una línea de texto (<P></P>, P de párrafo), la etiqueta de negrita (<B></B>, B de bold, que significa negrita en inglés) y la etiqueta de cursiva (<I></I>, I de italic, que significa cursiva en inglés), lo que resultaría: <P><B><I>Hola, bienvenidos al curso</I></B></P>
¿cómo indico que el texto sea de un determinado tamaño?.Pero esta representación mediante etiquetas del HTML presenta algunos "huecos".. la pantalla aparecerá en blanco. . éstas son: <HTML></HTML>. estas partes se verán más adelante. aqui va el texto</P> Al igual que el resto de los elementos. Lo único que tendremos que hacer es diseñar nuestra página tal y como se verá en pantalla y la herramienta hará el resto. Pero una página web no son sólo los elementos que vemos. también existen otros elementos que no apreciamos.. a modo de ilustración. el tipo de letra.. ya que las herramientas de creación de páginas web pondrán el HTML por nosotros. como pueden ser el título. el autor. no es necesario saber HTML.. Pero como hemos mencionado anteriormente. la página web se representa entre 2 etiquetas. <P size=1 align=left face=Arial>Hola. por tanto si el código de nuestra página web no incluye estas 2 etiquetas. Pues bien. el color. En el caso del texto sus propiedades son el tamaño.
. la alineación. su contenido. . las distintas propiedades que tenga el elemento también van dentro de la primera etiqueta.
principalmente utilizaremos el título y el autor. es decir. que indican al navegador que el documento que se está recibiendo se tiene que visualizar como un documento de internet.COM Web Independiente"> <meta name="Author" content="Sergio Cuéllar"> En el cuerpo de la página.universidad. compuesta por las etiquetas <HEAD></HEAD> que se colocan a continuación de la etiqueta <HTML>. palabras clave. se definen todos los elementos que contiene la página web. una página web la forman 2 partes: cabecera y cuerpo. se definen todas las características relacionadas con la página. su autor.soto.
El resto de las características se suelen representar mediante las etiquetas <META ----->. que los navegadores lo incorporan al título de la ventana.segovia. toda página web debe estar encerrada entre las etiquetas <HTML></HTML>. En la cabecera.programacion. Estas características son: su título. . encerrado por las etiquetas <BODY></BODY> y situado inmediatamente después de la cabecera. como muestran las imágenes. aquí insertaremos el código HTML de todos los objetos que aparecen (o no) en pantalla.informatica. Como ejemplo. excepto el título. aquí teneis unos ejemplos: <meta http-equiv="Content-Type" content="text/html"> <meta name="keywords" content="eitig.Curso de Diseño y Creación de páginas web: Partes de una página
Como ya hemos visto. una página web tipo sería: <HTML> <HEAD> <TITLE>Título de la página</TITLE> <META NAME="Author" CONTENT="Sergio Cuéllar"> </HEAD> <BODY> Este mensaje está dentro del cuerpo del documento. </BODY> </HTML> Observandose en pantalla lo siguiente:
..facultad" > <meta name="description" content="EITIG..domingo. Básicamente. Pero la mayoría de estas características no se representan en pantalla. el contenido.
el color o imagen fondo. el navegador conmuta automáticamente la forma del puntero de una flecha mano . indentación. Tablas.. La imagen puede ser estática (una simple foto) o una animación (casi siempre un archivo en formato GIF). También poseen una propiedad llamada alt: al poner el cursor encima de la imagen. son más bien propios de cualquier aplicación Windows. que incluyen más o menos los mismos elementos. Estos objetos son botones.
. negrita.Curso de Diseño y Creación de páginas web: Elementos básicos
En las imagenes podemos ver las barras de herramientas del FrontPage Express y del Netscape Composer. Sus propiedades son: el nombre del archivo donde está contenida la imagen. Estos objetos no son tan corrientes como los anteriores. Consiste básicamente en que al hacer click con el ratón sobre el objeto que posee esta propiedad. Hipervínculos o enlaces o links. Es una propiedad especial que se aplica al texto o a las imágenes. justificación. la alineación del contenido de una celda. Las propiedades son: el número de filas y de columnas. casillas de verificación. a una
Objetos de formularios. la anchura del borde y la forma en que se alineará el texto con relación a la imagen. tipo de letra. listas desplegables. y que se consideran los elementos más básicos e imprescindibles que incluye una página web. . cursiva. su anchura. saldrá un recuadro de color amarillo con el texto que hayamos escrito. cuadros de texto. tamaño. entramos automáticamente en la dirección web que le hayamos indicado previamente.. Imágenes. la anchura del borde. Para distinguirse mejor. su justificación. subrayado.
Estos elementos son básicamente: Texto y todas sus propiedades: color... su altura. . su justificación.
. la más completa: minimiza el código HTML que inserta en la página. . Además. . Éste es el aspecto que presenta su editor.). Las más destacadas son: Dreamweaver (de Macromedia) Sin duda es la mejor de todas... Su apariencia es prácticamente igual a la de cualquier editor de textos. Lo único que debemos hacer es escribir en pantalla. sin lugar a dudas. la apariencia del texto. Las herramientas constituyen la mejor manera de desarrollar una página web ya que nos evitan tener que codificar en HTML. Está pensada para profesionales y muchas de las opciones que incorpora nos vendrán grandes al principio (como comprobación automática de links. dentro de unos meses se añadirán cursos prácticos sobre las distintas herramientas que aquí se describen. fueron concebidas con el propósito de evitar al desarrollador un conocimiento exhaustivo del lenguaje HTML y una ayuda para el diseño de nuestra web. dibujar tablas. insertar imágenes. el color. mapa de nuestra página. También incorpora de serie unos efectos visuales en JavaScript bastante útiles (entre los que se incluyen las imágenes que cambian al pasar el ratón por encima y los llamados Timelines).. Pero es. guardar los cambios y ya tenemos lista nuestra página web.Curso de Diseño y Creación de páginas web: Herramientas
Ante la avalancha de e-mails recibidos. pero eso no significa que no podamos usarla. mientras estamos desarrollando. y mediante un intuitivo interface gráfico iremos construyendo nuestra web sin escribir ni una sola línea de código. maneja a la perfección las capas y controla todos y cada uno de los parámetros y opciones de cada elemento (incluyendo CSS). ya que su apariencia se desmarca del estándar Windows. Las herramientas de creación de páginas web o editores de páginas web. tendremos una visualización prácticamente igual a la visualización final en un navegador de internet. aunque a primera vista puede parecer algo complicada. elegir el tamaño.
FrontPage 2000 (de Microsoft) El FrontPage 2000 se incluye junto al paquete Microsoft Office 2000.Puedes descargarte una versión de prueba en www. era la herramienta preferida por los desarrolladores.macromedia. pudiendo repetirse por toda la pantalla. Hot Metal Pro (de SoftQuad) Hot Metal Pro es el rey destronado. o que no se repita (además de poder definir las coordenadas iniciales y finales). con lo que seguramente ya lo tengamos instalado en nuestro ordenador. pasado este tiempo. bien en vertical.com (sólo funciona durante 30 días. Complicada en un principio por la gran cantidad de opciones que posee. Una de las opciones que más nos llamó la atención y que ninguna otra herramienta que conozcamos posee. Antes de la llegada al mercado de Dreamweaver. Su calidad es muy alta pero incorpora menos opciones que el Dreamweaver. es que permite controlar la repetición de la imagen del fondo de la página. pero muy familiar gracias a la apariencia estándar de cualquier aplicación Windows. factor que determinó su caída del puesto de honor. Es bastante sencillo de usar: combina 3 pestañas en su parte inferior que 8
. En la imagen puede observarse su editor. bien en horizontal. se desactivan algunas de sus opciones).
Ambos no funcionan muy bien en otra cosa que no sea Internet Explorer 5. Ésta es su apariencia.
FrontPage Express y Netscape Composer (de Microsoft y Netscape) FrontPage Express y Netscape Composer. Son muy útiles y recomendables para principiantes por su sencillez y por incluir las opciones justas. Hay que destacar que tiene la mala costumbre de insertar mucho "código basura" en nuestra página. pero se quedará corto en muchos aspectos cuando queramos desarrollar un sitio más elegante. Se trata de 2 herramientas sin grandes pretensiones pero que representan el primer paso en el aprendizaje.
. HTML y dentro del navegador de internet). además de que muchos componentes que incorpora están implementados con etiquetas <META ----> (como las transiciones de página) y otros son los llamados componentes WebBot. Lo ideal es empezar diseñando con alguna de las dos y. son dos herramientas que vienen incluidas con los respectivos navegadores de internet. pasar a desarrollar con otras herramientas más potentes. Útil para nuestros comienzos.permiten conmutar la visión de nuestra página (desarrollo.0. una vez aprendida la mecánica.
pero es inevitable mencionar el 5% restante. como ya hemos visto.
Generalmente. Por tanto es importante que conozcamos algo más sobre los navegadores.Curso de Diseño y Creación de páginas web: Navegadores
Nuestra página web. Este porcentaje lo representan navegadores como Mosaic u Opera entre otros (sin olvidarnos del navegador exclusivo de Austin Powers). Hoy en día el mercado de navegadores de Internet está dominado principalmente por 2 aplicaciones :
Estos 2 aplicativos abarcan el 95% del mercado. está compuesta únicamente por código HTML que posteriormente un navegador de internet traduce a formato gráfico. los usuarios que utilizan este tipo de navegadores tienen también instalado el Explorer o el Navigator con lo que la cuota de mercado de estos
incluso el mismo elemento puede representarse de forma distinta (por ejemplo el "colspan" de una tabla en IE o NS). centrémonos en los dos más conocidos. con el lanzamiento del Navigator 6. Sus ventajas (respecto a su más directo competidor) son:
Es más flexible y amigable a la hora de modificar o escribir el código (Script o HTML) Soporta una mayor cantidad de componentes.
Está disponible para todas las versiones Windows (3.1. Para ello. por ejemplo las hojas de estilo (CSS) que NS ignora o incluso borra de pantalla (esto es hasta la fecha. NT y 2000). ofreciendo/soportando un determinado conjunto de elementos.. no obstante. 95. 98. . y quereis quitar el molesto titulito.0 esta situación parece que va a cambiar) Hace un uso más inteligente de los archivos temporales de internet a la hora de volver a mostrar una imagen o ejecutar un subprograma Java Los applets funcionan más rápido.últimos es casi del 100%.. Dicho esto.5 TRUCO: Si vuestro explorer es uno de esos "proporcionado por XXXXX" o algo por el estilo. y parece que ha dado resultado porque es el navegador más usado hoy en día. Y esto es algo importante al desarrollar cualquier tipo de aplicación orientada a Internet. lo único que teneis que hacer es modificar esa línea en el registro de Windows (utilizando el programa "C:\WINDOWS\RegEdit.
Una de las causas de su gran expansión (sin entrar en la polémica de si es legal o no) es que se incluye de serie con el sistema operativo de la casa. ya que cada navegador es un mundo distinto. Macintosh y algunos UNIX (Sun Solaris y HP-UX).exe"). está disponible la versión 5. buscar la cadena "proporcionado" (pulsar la tecla F3 dentro del programa RegEdit) y una vez localizada cambiarla por lo que
Unix. tiene cachés separadas para cada usuario. razón de peso para no despreciarlo.
No es sólo un navegador de internet. OS2-Warp. el programa de correo sólo recoge los mensajes del usuario correspondiente. sino que viene integrado con un programa de correo (Netscape Messenger) y un programa de creación de páginas web (Netscape Composer) La descarga de archivos es mucho más rápida. ya que no todo es Windows. Linux) y en el mundo de UNIX es utilizado por casi la totalidad de los usuarios. Es un programa que no es de Microsoft
. También podeis personalizar la animación que aparece justo debajo de los botones de la ventana (minimizar. lo que permite que las páginas web se visualicen más rápido y que los archivos que nos bajemos tarden menos tiempo en guardarse Posee más efectos para el texto (como el parpadeo de las letras) Está pensado para que sea utilizado por varios usuarios en el mismo ordenador.
Este navegador tiene versiones para casi todas las plataformas informáticas existentes (Windows.más o guste. cerrar) cambiando el archivo de imagen que contiene la animación (que se especifica dentro del registro en la línea anterior a la del título del programa). maximizar.. lo que permite que cada usuario disponga de sus propios "marcadores" (en IE se llaman "favoritos").. .
de manera que todo cuadre a la perfección en pantalla. por ejemplo yo suelo poner las imágenes entre varias líneas de texto o combinadas con el texto en el margen izquierdo de pantalla. contenidos. aprovechemoslo. Es bueno que las imágenes tengan el mayor colorido y resolución posible (pero ojo con el tamaño del archivo). es decir. texto o nada si es preciso. nada de tener cada página de un color distinto. A la hora de diseñar os topareis con unos problemillas bastante habituales y de fácil solución:
Ajustar el contenido en pantalla Mostrar varias imágenes en la misma línea .
Ni todo es texto. poner las letras en distintos tamaños. ajustes y colores
Una vez elegido el tema. los contenidos colocados en un lugar diferente cada vez..
La solución es la utilización de tablas. imaginación al poder. . los contenidos y los detalles de nuestra página web llega la hora de la verdad: el diseño de nuestra web.. ni todo son imágenes. . muy recomendable es que todas nuestras páginas (si que es nuestra web está compuesta de varias páginas) tengan una apariencia más o menos similar. ... negrita. que una grande cuyo tiempo de carga es muy. ejemplos. Y también es mejor tener muchas páginas pequeñas con un buen índice.Curso de Diseño y Creación de páginas web: Diseño web. títulos. Y ya que los navegadores y los sistemas operativos ponen a nuestro servicio gráficos con millones de colores y alta resolución. Conviene mezclar un poco.
.. y en cada celda colocaremos la imágen. distinto tipo de letra.. combinar los colores del texto dependiendo si son encabezamientos. Algo muy. Dichas tablas las dividiremos a nuestro gusto.. ya sabeis. muy superior y que además perdemos tiempo en cargar cosas que tal vez no le interesen a nuestros visitantes..
com Pero no debemos olvidar que existen varias resoluciones de pantalla. pero por si acaso definiremos los tamaños de las tablas. Aquí vemos unos ejemplos: Archivo JPEG
. la más común es 800 x 600.
. filas y columnas en porcentaje y no en pixeles.
Curso de Diseño y Creación de páginas web: Imágenes y animaciones
Imágenes y animaciones Como ya hemos visto.. Los navegadores admiten practicamente cualquier formato de archivo de imágenes. pero en la práctica los diseñadores utilizan sólo dos: JPEG y GIF. uno de los elementos que podemos incluir en nuestra página web son archivos de imágen.
Compresores Gráficos).Animación GIF
¿Por qué?.php (por cortesía de Fermín Alejo). Podeis encontrarlas en:
www. el formato GIF no pierde calidad. por el tamaño de los archivos. Ambos formatos comprimen la imágen para así reducir su tamaño. .ellimite.
Para insertar imágenes en nuestra página debemos utilizar las etiqueta <img
. Pero sólo tiene una profundidad de 256 colores (paleta de 8 bits) y los archivos tamaño mediano o grande ocuparán más que en formato JPEG. www. muy recomendable su visita.softonic. Las imágenes en formato JPEG tienen una profundidad de color de 16 millones de colores (RGB de 24 bits) pero reduce el tamaño de la imágen sacrificando calidad (en luces.Multimedia y Diseño Imágenes y Gráficos . las imágenes JPEG se verán peor a medida que aumentemos el porcentaje de compresión. Existen herramientas que permiten reducir el tamaño de las imágenes sin sacrificar o sacrificando una mínima parte de la calidad. reflejos y transiciones de colores principalmente). página de la compañía creadora de varias herramientas de compresión. entre ellas Image Optimizer 3. conseguir que el tiempo de carga de la página web sea inferior.com. Estos programas permiten visualizar al mismo tiempo la imagen originaria y la optimizada.com Image Optimizer. Por el contrario. buscador que posee una sección dedicada a compresores de imágen (Windows 95/98/Me .com.01 que recomiendo encarecidamente que utiliceis. Podemos descargarnos de manera gratuita algunas.xat.. y de este modo. Resumiendo. entre ellas están xat. aunque esta página suele dar algunos problemillas de carga. También es capaz de almacenar máscaras (muy útil para definir determinadas zonas de la imágen de color transparente) y es capaz de reproducir animaciones. aquí podreis encontrar herramientas varias para el diseño gráfico www.com/downloads/diseno.. Advanced GIF Optimizer. JPEG Optimizer. mostrando el tamaño de cada una y el porcentaje de compresión obtenido.
. por lo que habrá que llegar al punto medio en lo referente a imágenes y tiempo de carga.. Como imagen de fondo se utilizó la imagen siguiente:
Para insertar una imágen de fondo debemos modificar la etiqueta <BODY> y poner en su lugar: <body background="archivo_de_imagen">
Favoritos Al añadir una página web a "favoritos". la imágen se repetirá a modo de mosaico hasta llenar todo fondo (aunque este efecto se puede desactivar). Dentro de una imágen también podemos definir mapas o hot spot." alt=".." >..
El fondo de la página En el fondo de nuestra página podemos colocar una imágen o animación.. Esto no es más que una determinada zona poligonal que posee un hipervínculo." align="... Pero no olvidemos que en internet "una imagen tarda más en cargar que mil palabras". Aquí teneis un ejemplo (la imágen posee 2 mapas):
No creo que existan muchas páginas web modernas sin imágenes... el único parámetro que es obligatorio es src. Si la imágen es más pequeña que el fondo.src="." width=".. Las imágenes (bien elegidas y bien colocadas) proporcionan un colorido visual impresionante.. además. el navegador automáticamente asigna un 16
." height=". que indica el archivo de imágen a insertar.. Dicho efecto puede observarse en cualquiera de las páginas de esta sección. "una imágen vale más que mil palabras"." border=".
y no todos los navegadores soportan su uso.icono por defecto dicha página.tecnopolis.. . buscar en la sección de internet gratis cantidad de imágenes.com. www. y
. página con GIFs de temas varios. .ico"> Una vez añadida la página a "favoritos". que contiene el icono a mostrar. ya que además de la tarjeta de sonido.ciudadfutura. O también se puede añadir la siguiente línea dentro de las etiquetas <head></head>: <link rel="SHORTCUT ICON" href="XXXXXXXX. fondos.com..gifmania. también podrás encontrar muchos recursos gratuitos como por ejemplo contadores. iconos.com. imágenes y animaciones para tu página.. www. libros de firmas. www.com. Pero no es muy aconsejable añadir música de fondo.
Curso de Diseño y Creación de páginas web: Añadir música de fondo
Otro elemento multimedia que podemos incluir en nuestra página es el sonido.animfactory. en esta página no sólo hay imágenes. www. son archivos en formato MIDI (en realidad puede reproducirse cualquier archivo de sonido. Pero este tipo de archivos sólo contienen música instrumental.
www. pero se opta por este tipo debido a su reducido tamaño). también se cambiará el icono por defecto que aparece en la barra de direcciones por nuestro icono. la inclusión de música ralentiza en exceso la carga de nuestra página. Además.com.ico".. un buscador poco conocido pero que posee una buenísima sección dedicada a las imágenes. se necesita el uso de software externo al navegador para poder escucharla.todo-gratis. La música que se reproduce.
Para que el navegador asigne a nuestra página un icono diferente. esto se puede apreciar en la figura siguiente. debemos tener un archivo llamado "favicon. estadísticas.
.. Internet Explorer reproduce la música sin mayores dificultades. utiliza Java para ello. se debe utilizar la siguiente sintaxis HTML (justo después de la etiqueta <BODY>): <BGSOUND SRC="archivo MIDI" LOOP="nº de veces"> En la propiedad SRC pondremos el nombre del archivo MIDI (*. . 2.. pero su competidor. Esta técnica es bastante lenta y no funciona muy bien (otra razón más para no incluir sonido en nuestra página). 3. el Netscape.la cantidad y calidad de los instrumentos que escuchemos depende en exclusiva de nuestra tarjeta de sonido.mid) a reproducir. y en LOOP el número de veces a reproducirlo (1.) para reproducción contínua deberemos poner "infinite". Para insertar música en nuestra página.
pero cuando se coloque en nuestro dominio de internet se llamará "http://www.html". con lo que omitiendo las rutas de los directorios iniciales. \archivos. en local se llama "C:\PAG_WEB\index...htm". Si dentro del subdirectorio "C:\PAG_WEB\FOTOS\" tenemos otro subdirectorio llamado "C:\PAG_WEB\FOTOS\ANIMACIONES\" para referenciarlo sería "\FOTOS\ANIMACIONES\". \scripts.Curso de Diseño y Creación de páginas web: Links
A una página web de nuestro dominio A una parte concreta de nuestra página A otra página web de otro dominio
Links a una página web de nuestro mismo dominio
Se deben utilizar las etiquetas: <a href="destino"> Texto o imágen que posee el hipervículo </a> En donde el atributo href apunta al destino del hipervínculo. Lo mejor es crearse un directorio donde estén todas nuestras páginas web. "bienvenida.. la idea es muy sencilla.jpg".eitig. pero a la hora de poner el destino debemos tener en cuenta las rutas y los directorios. .. Todos los links a cualquier archivo que se encuentre en nuestro mismo dominio NUNCA incluirán la ruta del directorio inicial en donde está dicho archivo. -Ir a la parte superior de la página>
. "foto1. Esto se debe a que si nuestra página se llama "index. se pondrá por defecto la ruta inicial del lugar donde se encuentre.) con lo que conseguiremos una buena organización. como en local para realizar las pruebas. cuando queramos referenciar a un archivo dentro del directorio "C:\PAG_WEB\FOTOS\". \sonidos. Si por el contrario tenemos en el directorio inicial "C:\PAG_WEB\" algunos archivos y dentro de un subdirectorio del inicial llamado "C:\PAG_WEB\FOTOS\" otros archivos.htm". si todos nuestros archivos se encuentran en el mismo directorio inicial llamado "C:\PAG_WEB\".htm". y dentro de este directorio crear subdirectorios (\fotos.com/index. los links serán simplemente el nombre del archivo. \estilos. simplemente tenemos que poner "\FOTOS\". Por ejemplo. Con esto conseguiremos que nuestra página se pueda visitar de igual manera en internet. . por ejemplo "index.htm".
. <a href="http://destino"> Texto o imágen que posee el hipervículo </a>
.Links a una parte concreta de nuestra página
Para poder implementar los links a una parte concreta de una página web se utiliza un elemento llamado anchor o link interno. -Ir a la parte superior de la página>
Links a páginas de otros dominios
Para implementar los links a otras página web que no pertenezcan a nuestro dominio se utiliza la misma sintaxis HTML de un link a una página de nuestro dominio. La sintaxis HTML es muy parecida a la de un link normal: <a name="nombre de la marca"> Aquí puede ir (o no) texto o una imágen </a> Y para invocarla desde un link ha de utilizarse: #nombre de la marca Aquí teneis un ejemplo: en la parte superior de la página (antes de "Curso de Diseño y . siempre empieza por "http://".") hay una marca llamada "Superior". Pero se diferencian en que ahora el destino incluye la ruta completa. que no olvidemos. y desde el link que se encuentra justo debajo se la invoca utilizando <a href="#Superior">.. No es más que una marca que realizamos en nuestra página web y que desde un link normal y corriente invocamos.
Para ello. dejar las críticas. está el comando HTML <a href="mailto:destinatario"> (donde pone destinatario por supuesto tendremos que poner una dirección de correo válida). y como segunda opción. Dicho mensaje ya tiene escrita la dirección del destinatario (que es la que nosotros pusimos despues de "mailto:"). y con esto conseguiremos que cuando se pulse sobre el enlace.
. el comando HTML no es más que un link normal y corriente en el que la dirección de destino no es más que una dirección de correo electrónico.)
Curso de Diseño y Creación de páginas web: Distribución de archivos
Básicamente hay 2 formas de distribuir archivos a nuestros visitantes: mediante HTTP o mediante FTP. fijaos en la parte inferior de esta página.
Que nuestros visitantes puedan comunicarse con nosotros puede ser bastante útil (cada cuál decida para qué). Una posible opción sería poner nuestra dirección de correo al final de la página y que la gente que quisiera comunicarse con nosotros la escribiera en su programa de correo. .. Esta orden abre el programa de correo predeterminado (Outlook. este comando se usa de igual manera que un link normal y corriente (lo podemos poner en una foto. se guarde el archivo en la máquina local de nuestro visitante.Curso de Diseño y Creación de páginas web: E-mail como links
Supongo que en muchas ocasiones habreis visto páginas web en las que se puede mandar e-mail´s a sus autores o al webmaster para colaborar. La forma más sencilla de ponernos en contacto con ellos es mediante e-mail.zip". o cualquier cosa. pero esto no es demasiado cómodo y puede que alguien escriba mal nuestra dirección y que nunca nos llegue su comentario. El protocolo FTP es algo más complicado para nuestros propósitos. Como se puede observar. Por tanto. Mediante HTTP es bastante sencillo. Si no lo habeis visto nunca. En una parte del texto o en una imágen añadiremos un link a nuestro archivo.. texto. Messenger o que el sea) por la pantalla que sirve para escribir un nuevo mensaje. La mecánica es la misma que con cualquier link a una página web normal y corriente.
En las imágenes observamos lo que ocurre al distribuir un archivo llamado "dblist. por lo que lo descartaremos.
hecho esto nos preguntará el directorio en donde guardarlo y listo. porque podemos provocar un repentino llamamiento a nuestras familias por parte de nuestros visitantes e incluso tener problemas legales. debemos elegir la opción "Guardar en disco".
NOTA: comprobar antes que todos los archivos que van a distribuirse NO TIENEN VIRUS.Esta es la ventana que muestra el Internet Explorer:
Una vez abierta la ventana.
Archivos: Debemos asegurarnos que todos los archivos a los que referenciamos desde nuestra página existen (otras páginas. "\fotos\logo.j. lo único que debemos hacer es comprobar si hemos escrito bien la dirección de la página. Tenemos que comprobar que hemos eliminado todas las rutas de los directorios iniciales. Con esto crearemos una página web practicamente sin fallos. o en subdirectorios del mismo. Antes de dar ese paso debemos hacer las últimas comprobaciones para tener la certeza de que todo funcionará correctamente. archivos con los Script. Con esto evitaremos situaciones tan corrientes como estas: No se encuentra la imagen:
Enlaces o links locales: Como ya se ha dicho.Curso de Diseño y Creación de páginas web: Comprobaciones finales
Que nuestra página esté terminada no significa que esté lista para colocarse en internet. hojas de estilo. con lo que nuestros visitantes (lo más seguro) volverán a visitarnos. lo mejor es tener las páginas y todos los archivos que se utilicen dentro del mismo directorio. . y que las referencias a los subdirectorios empiezan por "\" (e.). imágenes...jpg").
Links a páginas web: Este tipo de links SIEMPRE deben empezar por "http://".
entre nuestro PC y el servidor de internet. y lo más importante. nuestra dirección de internet.
Otra opción es comprar nuestro propio dominio..com. el nombre del servidor (Host Name). Esto hoy en día eso ya no es un problema.downloads. recomiendo la utilización de un programa de FTP). que se pueden descargar de manera gratuita en www.es") sólo se puede adquirir un nombre de dominio si dicho nombre se corresponde con el nombre de una empresa. es algo más complicado pero es posible. Esto no siempre es posible. xoom... ni siquiera se pueden adquirir dominios que coincidan con el nombre del producto que queremos publicitar. CuteFTP
. lo único que nos falta es colocar nuestra página en internet. .com Una vez elegido servidor y concedido el espacio. en españa (". Para ello utilizaremos el protocolo FTP (File Transfer Protocol).). Lo siguiente que necesitamos es un programa FTP (FTP client) para realizar la transferencia de archivos (aunque la transferencia de archivos también la puedemos hacer con nuestros navegadores de internet. Las diferencias entre unos y otros son el espacio que nos ofrecen.. Para más información o para consultar disponibilidad de dominios puede consultar www. todo-gratis. podemos realizar una oferta a su propietario. Los programas más conocidos son CuteFTP y WS_FTP LE. Por ejemplo. telepolis. Lo primero es buscar un servidor de internet que nos permita colocar nuestras páginas (recomendable de manera gratuita aunque no es obligatorio). También debemos tener en cuenta la legislación del país al que pertenece dicho dominio. se nos dará el nombre de usuario (User ID). inlanders. Sus aspectos som muy similares al explorador de archivos de Windows 9x. en este caso. el password. la velocidad de descarga.Curso de Diseño y Creación de páginas web: FTP
Nuestra página ya está terminada y hemos realizado las últimas comprobaciones.com" suelen estar en posesión de algún particular o empresa. por lo que. El FTP es un protocolo que nos permite transferir archivos entre ordenadores.. como puede observarse en las imágenes. ya que la mayoría de los dominios ". yahoo.register. la propaganda que incorporan a nuestras páginas. aunque si realmente estamos interesados. network solutions. porque cualquier portal de internet nos ofrece más o menos 5 MB de espacio gratis para nuestras páginas web (entre ellos terra.
es mucho más gráfico y amigable. ..htm". copiar archivos. haremos lo que queramos con nuestros archivos y con nuestro espacio en el servidor (crear directorios. Cada cuál que elija el que más le guste. NOTA: la dirección que nos suelen proporcionar hace publicidad al portal. Para comprobar si hemos hecho todo correctamente. Dentro de nuestro programa de FTP pondremos los datos y este se conectará con el servidor (si los datos son correctos). Cada servidor suele variar algo su política. Pero WS_FTP LE de IPSwitch. además de poseer asistentes y la típica ventana inicial con los trucos del día. pero lo normal es que la primera página que se va a abrir es la página llamada "index. Una vez conectados. los dos hacen lo mismo. borrar archivos. consume menos recursos máquina. la mecánica es la misma que con nuestro disco duro.). por lo que si nuestra página inicial se llama "principal. teclearemos la dirección que nos dijeron y daremos una vuelta a ver que pasa.WS_FTP LE
Cute FTP de la compañía GlobalScape.htm" o algo por el estilo.
Llegado a este punto se nos plantea una pregunta: ¿cuál es la primera página que se va a ver un usuario al teclear nuestra dirección?. además de ser bastante larga y
. deberemos cambiarla el nombre (y corregir todos los links que la apunten).. porque al final.
com/mi_pagina..terra.
.es/mi_pagina).gratix. .complicada (usuarios.pagina.com.). siempre que no esté elegido por otro usuario (www. . algo que os recomiendo encarecidamente y que vuestros visitantes agradecerán.de/mi_pagina) y desde ahí llevará a nuestros visitantes a la dirección que nosostros digamos (usuarios. www. members..terra..es/mi_pagina. Este servicio no sólo lo realiza www. existe el servicio de redireccionamiento automático como por ejemplo: www. Y se plantea otro problema: el nombre que queremos dar a nuestra página no siempre está libre (hay que tener en cuenta que no somos los únicos con página en internet).de.to/remember..xoom.pagina. Para evitar esto.de que nos permite dar el nombre que queramos.easy.pagina. existen más como: www.
Y uno inferior donde se muestran los temas pertenecientes al contenido seleccionado (este marco posee barra de scroll). y a esa tabla la dividimos en filas y columnas. el logotipo.
Lo que hacemos es dividir la pantalla como si se tratase de una tabla. A cada celda le decimos (mediante la propiedad src) que página tiene que mostrar. Este sería más o menos el código HTML que incluiría dicha página: <frameset rows="80. podemos crear las combinaciones que queramos..Curso de Diseño y Creación de páginas web: Frames
Los Frames nos permiten presentar en una página múltiples documentos en diferentes vistas. . Esto se puede ver en el ejemplo:
La página principal de EITIG posee dos marcos:
Uno superior donde van colocados los contenidos y el buscador. mientras que en la otra mostramos el contenido seleccionado.htm" > <frame name="mainFrame" src="Indice.htm). En realidad.htm"> </frameset> Y las 2 páginas que se van a mostrar en el marco superior e inferior (Contenidos. no es más que un pequeño fragmento en HTML que carga una página web en cada una de las vistas que hayamos definido.. Estas vistas nos permitirán.
Para conseguir esta visualización necesitamos 3 páginas HTML:
Una para definir los marcos que vamos a tener en pantalla. Estas suelen ser las combinaciones más usuales. pero no
Pero no hay límite.htm e Indice. una página web con frames. por ejemplo. fijar en una de ellas el índice.*"> <frame name="topFrame" scrolling="NO" src="Contenidos.
Esta agrupación nos permite tratar a todos los elementos como si fueran un todo. os recomiendo visitar:
Otra sección de EITIG. y gracias a eso. 29
. lo más web La página principal de esta sección www. La tercera dimensión (la coordena Z o zindex).
Si quereis contemplar las posibilidades que ofrecen las capas con vuestros propios ojos. un elemento que agrupa a otros elementos. define la superposición de las capas.
El posicionamiento absoluto tiene un inconveniente: la resolución de la pantalla. su color o imagen de fondo.. cambiar su posición en pantalla.debemos olvidar que en cada vista se carga una página y excesivas vistas pueden ralentizar sobremanera el sistema. es decir.com. es decir mediante coordenadas X. Z. este portal tarda un poco en cargar. Y.. largo y ancho.ciudadfutura.
Curso de Diseño y Creación de páginas web: Capas (Draw Layer)
Una capa no es más que un contenedor HTML. pero posee unos menus con transiciones a la hora de abrirse y cerrarse francamente buenos
Las capas se posicionan en la pantalla de manera absoluta. podemos crear unos efectos visuales muy interesantes utilizando poco código: como ocultar/mostrar una capa (que ocultaría a todos los elementos contenidos en esa capa). . Una capa de orden superior ocultará a otra de orden inferior.
pero las capas que utilizan las etiquetas LAYER e ILAYER sólo las soportan las versiones superiores. si la resolución con la que se visualiza la página es más pequeña que la resolución con la que la diseñamos (por ejemplo 640 x 480) puede quedarse fuera del ángulo de visión. Las capas se definen normalmente mediante las etiquetas DIV o SPAN (pero existen otras formas como las capas CSS y las capas de Netscape utilizando LAYER e ILAYER). Internet Explorer 4. una capa es un contenedor. plug-in´s.0 y Netscape 4. Al alejarse el ratón del texto "Mostrar" se vuelve a ocultar la segunda capa. la segunda capa no es visible. Una capa puede contener cualquier cosa. ocultando por su situación en el eje Z a la primera capa.0 soportan a la perfección las capas creadas con DIV y SPAN. Como se ha dicho. pero al pasar el ratón sobre el texto "Mostrar" se muestra.
. pero no hay limitaciones respecto al contenido. los navegadores automáticamente activan el scroll de pantalla. applets e incluso otra capa.Una capa colocada en unas determinadas coordenadas. por ejemplo texto. Aquí teneis un ejemplo de utilización de capas: tenemos 2 capas (Layer1 y Layer2) ambas situadas en las mismas coordenadas pero con distinto z-index. Para evitarlo. imágenes.
FONT-SIZE=7. Si no se especifica el estilo. se redefinen los estilos para cada etiqueta. FONT-SIZE=7. Para evitar este problema. debemos cambiarlo etiqueta a etiqueta por toda la página. con un tamaño de 7 y con tipo de letra Arial. FONTCOLOR="#CCCCCC" } </STYLE> En el caso en que tuvieramos varias páginas y en cada página definieramos el estilo. que en el caso del Explorer y del Navigator son distintos.css"> Y dentro del archivo "archivo. FONT-COLOR="#CCCCCC" } --!>
. se visualizará con el estilo que nosotros hemos definido y no con el estilo por defecto.css" tendríamos: <!-P { FONT-FAMILY=Arial.Curso de Diseño y Creación de páginas web: CSS (Cascade Style Sheet))
Los estilos constituyen la forma de definir el aspecto de una etiqueta HTML dentro de una página web. Cuando quisieramos modificar el estilo de todas. Así cada vez que se encuentre esa etiqueta dentro de la página. Para cargar el archivo de estilos debemos poner: <link rel="stylesheet" href="archivo. Una práctica muy usual consiste en definir los estilos en un archivo aparte y cargar los estilos de ese archivo en cada página (a estos archivos se les denomina Hojas de Estilo en Cascada). como puede verse a continuación:
Aquí va el encabezamiento
Pero el problema que presenta es que si queremos cambiar alguno de los parámetros. <STYLE> P { FONT-FAMILY=Arial. el navegador pondrá uno por defecto. Los estilos pueden definirse o modificarse poniendo los parámetros en la etiqueta: <p><font size="7" face="Arial" color="#CCCCCC"> Aquí va el encabezamiento </font></p> El texto anterior se visualizaría en color #CCCCCC. nos pasaría lo mismo que cuando los definíamos etiqueta a etiqueta en una misma página.
el gran inconveniente de Java es su lentitud. por ejemplo la orientación del papel de la impresora.. la hoja de estilo es la siguiente: <!-a :link { text-decoration: none } a :hover { text-decoration: underline } --!>
Curso de Diseño y Creación de páginas web: Java. y lo más importante. que
. y por tanto.Pero las CSS nos permiten definir mucho más. el espacio de pantalla para representarlo.. script en JavaScript o en VBScript. Personalmente no recomiendo la insercción de applets dentro de una página web porque mientras se está cargando/interpretando el applet. alguien antes que nosotros se dio cuenta de este problema. Para poder insertar el applet dentro de nuestra página ha de estar comprendido entre 2 etiquetas: <APPLET></APPLET>. Además.. JavaScript y VBScript
Una vez que hayamos creado nuestra página web. las demás páginas web que estén abiertas en ese momento se quedarán temporalmente colgadas. Dentro de este lenguaje disponemos de una clase especial llamada "applet" que implementando sus métodos conseguimos realizar un subprograma Java que nuestro navegador entiende. . Pues bien. Existen mayoritariamente 3 formas o 3 lenguajes para crear algo de interactividad en nuestra página: applets (en Java). . que se solucionó de una forma muy simple: programando. las animaciones y los gráficos (que dan más o menos vistosidad). el navegador no responde. ejecuta. Un efecto muy vistoso consiste en redefinir el aspecto de los hipervínculos para que al pasar el ratón por encima se subrayen y al quitar el ratón desaparezca el subrayado (como se hace en esta página). A modo de nota mencionaré también un programa llamado Flash de la compañía Macromedia que empieza a convertirse en una seria alternativa a los lenguajes Script. las propiedades de las celdas de una tabla.. nos daremos cuenta. Java: Java es un lenguaje de programación orientado a objetos de propósito general creado por la compañía Sun Microsystems. y como es típico del HTML acompañado de parámetros tales como el nombre de la clase. nuestra página es totalmente estática. que a pesar del colorido.
Aquí teneis una de función muy útil. . NO ES JAVA. otra de mis páginas personales. validar los datos.. Pero hoy en día está integrado en casi la totalidad de navegadores de internet del mercado (la implementación de Microsoft en el IE se llama JScript y difiere ligeramente de JavaScript). entre ellos:
lo más web. su navegador (Netscape Navigator) era el único que lo reconocía. os remito a la sección de Programación Orientada a Objetos que posee eitig. Se utiliza sobre todo para cambiar las imágenes al pasar el ratón encima. JavaScript fue desarrollado por Netscape para añadir interactividad a las páginas web con su navegador de internet.. No hay que compilarlo ni linkarlo. Existen infinidad de links interesantes. el código se embebe dentro del código HTML de las páginas web.com. Como fue desarrollado por Netscape. dispone de código DHTML y Scripts gratuitos. que se pase por www. Muy
. lista para usar: <script language=JavaScript> // Esta función muestra en la barra de la ventana el texto introducido como parámetro function mensaje(texto){ status = texto } </script> Adjunto un MANUAL para quien quiera aprender este lenguaje. JavaScript al ser un lenguaje de Script. Es aconsejable utilizar JavaScript (que es más rápido) y para tareas que no se puedan implementar en JavaScript utilizar Java. Y para aprender más sobre Java. Merece la pena ver la intro. sino que el mismo navegador de internet se encarga de interpretarlo. No necesitamos ninguna herramienta especial para programar en JavaScript.com.se compensa por su portabilidad. .spygots. aunque es recomendable utilizar alguna herramienta que nos ayude sobre todo a la hora de depurar errores (como puede ser la que se ofrece con Microsoft FrontPage). www. moverlas.. pero no nos hayamos dado cuenta. simplemente con el mismo block de notas de Windows podemos escribir código Script.bratta. Hay que decir que es el lenguaje más utilizado en internet para añadir interactividad a las páginas web. JavaScript: No hay que confundir JavaScript con Java. Pese a que JavaScript posee una sintaxis muy similar a Java. POO. implementar un reloj. Puede que al navegar por alguna página web lo hayamos visto.. escribir mensajes en la barra de estado. Si alguien quiere ver los applets en acción.
com/tips/javascript. techzone.netscape. página con las últimas novedades sobre las tecnologías de internet 34
.com.com/java/library.gamelan. página repleta de Scripts gratuitos.net/indice_cf.chami. msdn.netscape.. webreference. www. Como nota hay que decir que fue el lenguaje utilizado para programar el famoso virus "I love you".com/programming/javascript.htm. documentación oficial y tutorial de Microsoft. pero ahora creo que Netscape 6. Links:
www. incluye muchos trucos para diversos lenguajes.solutionsiq. www. www.com/home-default.costasol. página para los desarrolladores en JavaScript. es distinta.jsworld.com/javascript.0 también lo soporta.javascripts. aunque existe un plug in que se puede conseguir en www. sección de Microsoft dedicada a la tecnología Script.recomendable
developer. ww.com/vbscript/us/vbstutor/vbstutor.com.com/vbscript. esta página contiene cantidad de enlaces y recursos del lenguaje. apodado el apostol de JavaScript. pasó un poco como al principio con JavaScript.microsoft.dannyg. la página de Guille. cantidad de código listo para usar.com/scripting. tanega. .htm. código y links.com.html. Aquí se podran encontrar manuales de todas las versiones disponibles del lenguaje y también de HTML y DHTML de Netscape. página de la compañía sobre el lenguaje VBScript. pero su sintaxis por fuerza. sólo lo reconocía el Internet Explorer.htm.microsoft. guille.html. trucos de JavaScript www. Al ser de Microsoft. www. Se tomó la sintaxis del programa de la casa: el Visual Basic.microsoft. esta es la página personal de un famoso programador en JavaScript.. aquí hay gran cantidad de código listo para utilizar. además de unos manuales con bastante ejemplos. explicaciones del código. Su propósito es el mismo que el de JavaScript.com para que el Navigator soporte su uso.com
VBScript: El lenguaje VBScript es el intento por parte de Microsoft de adentrarse en el negocio de los lenguajes de Script.
js" > </SCRIPT> Y dentro del archivo rutinas. sección de Microsoft dedicada a la tecnología Script.js.com/scripting. pero además debemos indicar en qué lenguaje está escrito para facilitar la labor de interpretación (aunque por defecto se toma JavaScript). Lo que se suele hacer en colocarlo entre el final de la cabecera y el cuerpo. contiene ejemplos y documentación.js) y desde la página HTML llamarlo.net/infohelp/htms/vbscript. Por ejemplo. Con lo que a la hora de codificar un Script.infodial. se utilizan las etiquetas HTML que indican que es un comentario (<!--. tendríamos la siguiente plantilla: <SCRIPT LANGUAGE="JavaScript"> <!-Aquí insertaríamos nuestro código JavaScript //--> </SCRIPT> La verdad es que no existe un convenio claro sobre en qué parte de la página web hay que colocar el Script. el ejemplo quedaría de la siguiente manera: <SCRIPT LANGUAGE="JavaScript" src="rutinas. Esto se realiza mediante las etiquetas <SCRIPT></SCRIPT>. o dentro de la cabecera. Con esto conseguiremos que si el código se trata como HTML no salga en pantalla. debemos indicar al navegador que el texto que está recibiendo es una rutina en Script que debe interpretarse y no texto a mostrar en pantalla. si nuestro archivo se llama rutinas.• •
msdn. esto se hace: <SCRIPT LANGUAGE="JavaScript"></SCRIPT> Para evitar que los navegadores que no soporten JavaScript o tengan desactivada esa opción muestren el código en pantalla como si se tratase de texto normal y corriente. //-->).
Curso de Diseño y Creación de páginas web: Insertar código Script
Como JavaScript se embebe dentro de código HTML.js: <!-Aquí insertaríamos nuestro código JavaScript
. Otra práctica bastante extendida es colocar nuestras funciones en un archivo de texto (pero con extensión . www.htm.microsoft.
o las funciones de mostrar/ocultar capas. Pero no sólo sirven para personalizar. Simplemente son archivos de texto normales y corrientes que se guardan en la máquina cliente y que almacenan fragmentos de información.//--> Con esta práctica conseguiremos reutilizar de una manera más sencilla rutinas tan comunes como la de escribir mensajes en la barra de estado del navegador. como por ejemplo Telepolis.. empresas favoritas. almacenando la lista de la compra.. manda una página inicial para que nos registremos. nuestro horóscopo y la cotización de nuestras empresas en bolsa. Veamos el ejemplo de Telepolis. Uno de los usos más extendidos es el de personalizar portales.. . La siguiente vez que visitemos el portal nos sorprenderemos al darnos cuenta que pone: "Bienvenido XXXXX". Las Cookies o "galletitas" se crearon con el propósito de solucionar este problema. Nuestro navegador (en el caso de que soporte el uso de Cookies). en el caso que no exista una Cookie en el cliente.. se guarda una Cookie con información sobre nuestra ciudad. Este portal. . .
© Copyright eitig. nuestro signo del zodiaco.. Cuando nos registramos.. la lista de deseos.com
Curso de Diseño y Creación de páginas web: Cookies
Uno de los problemas que presenta el protocolo HTTP (HyperText Transfer Protocol) es que no posee estado o memoria. ni tampoco recolectar información sobre las operaciones que realizó el mismo (la problemática es similar a la de los autómatas de Moore y Mealy).com 1999-2000 Resolución recomendada: 800 x 600 webmaster@eitig. además de la información meteorológica de nuestra ciudad. manda al servidor esta información con cada petición que le solicitemos. y el servidor con esta información realiza las acciones correspondientes. también sirven para recoger el número de veces que hemos visitado la página. y también se utilizan en páginas de comercio electrónico. la hora de nuestro ordenador.
. no se pueden guardar ningún tipo de dato en la máquina cliente. y por tanto.
las Cookies se clasifican en 2 tipos: Temporales y Semipermanentes. los navegadores permiten configurar el equipo para que no utilice Cookies. además. Lo normal es que las Cookies utilizadas para personalizar páginas web sean semi-permanentes y que nunca caduquen. una vez superada la fecha. Según la fecha de caducidad. Semi-permanentes son aquellas que sí tienen especificada la fecha de expiración. // Esta función guarda un valor en una Cookie y pone la fecha de expiración // Para crear Cookies temporales dejar caducidad sin valor // El parámetro caducidad se expresa en milisegundos. NOTA: Si se copia al portapapeles el código directamente del explorador. puede que de problemas la tabulación. pasados X días o en una fecha concreta. Aunque las más utilizadas son valor y fecha de expiración. para que pueda ser reenviada a su página de procedencia la siguiente vez que entremos en ella. El problema que presenta el uso de Cookies es que no todos los navegadores las soportan (depende del navegador y de la versión). dominio. borrar todos los blancos y volved a poner la tabulación. Las Cookies se guardan junto con un número único de sesión (esto lo hace automáticamente el sistema) para que no se sobreescriban al entrar en una página distinta y también.
Dependiendo del modo en que se defina esta fecha. En ese caso. la Cookie desaparecerá. esta Cookie no se almacenará en disco. path y secure. fecha de expiración. Para expresarlo en días: 1000 * 60 * 60 * 24 * nº de días.
Temporales son aquellas Cookies que no poseen fecha de expiración. la Cookie expirará al terminar la sesión.Las Cookies poseen varias propiedades: valor. caducidad) { 37
. function guardarCookie ( nombre. valor.
Aquí teneis código en JavaScript de manejo de Cookies (descargar un ejemplo de utilización de Cookies). ya que se sustituye por espacios en blanco.
} // Devuelve el valor de "nombre" almacenado en la Cookie // Si "nombre" no existe.cookie.cookie = nombre + "=NULL. posFin = document.". pos ) + 1. Página con mucha información y links sobre Cookies. valor = document.com. expires=Friday. La sección dedicada a Cookies de Yahoo. www.". pos ) .1.length. posFin es el final de la Cookie if (posFin == -2) posFin = document.cookie.cookie.getTime() + caducidad). merece la pena visitarla.if ( caducidad ) { caducidadAux = new Date().cookie = nombre + "=" + valor + ". posFin ). document. caducidadAux.".cookie. // compruebo que exista la Cookie if ( document.cookie = nombre + "=" + valor + ".toGMTString() + ". } Para más información:
dir. devuelve la cadena vacía function recuperarCookie ( nombre ) { valor = "".indexOf( nombre ).setTime (caducidadAux. } } // Elimina la Cookie asignándola una fecha atrasada function eliminarCookie ( nombre ) { document.
.cookie.yahoo.cookiecentral.indexOf( "=". } } return valor.com/Computers_and_Internet/Internet/World_Wide_Web/Cookies. } else { document. 2-May-80 00:00:00 GMT".cookie ) { // compruebo que "nombre" tiene asignado algún valor pos = document.substring( posIni. if ( pos != -1 ) { // recupero el valor de "nombre" y lo guardo en "valor" posIni = document.indexOf( ". expires=" + caducidadAux. // si "nombre" es la ultima variable.
El JavaScript originario.5 JScript 5.5.2 Navigator 4.0 JScript 5 Explorer 5.0 Navigator 3. en la actualidad se encuentra por la versión 5.6 JavaScript 1.0 JavaScript 1. desarrollado por Netscape.5 Explorer 3.5
Navegador Versión Navigator 2.3 Navigator 6.com 1999-2000 Resolución recomendada: 800 x 600 webmaster@eitig. Las implementaciones son:
JScript.0 JavaScript 1.0 JavaScript 1. es que no existe una única implementación de este lenguaje.5. sino que existen diferentes implementaciones y diferentes versiones de cada implementación. que es el lenguaje de Script que desarrolló Microsoft para su Internet Explorer.1 Navigator 4.© Copyright eitig.0 JavaScript 1.0 JScript 1 Explorer 4.com
Curso de Diseño y Creación de páginas web: Problemas con los navegadores
El principal problema que nos encontraremos a la hora de desarrollar rutinas en JavaScript. que se encuentra por la versión 1.0 JScript 3 Explorer 5.
y utilizar en función del mismo. Algunas de las características de JScript son:
Es totalmente compatible con el estándar ECMAScript (estándar de unificación en torno al los lenguajes de Script) No es Case Sensitive Permite el uso de la tecnología ActiveX Ofrece más información sobre el navegador que está visualizando la página web
Resumiendo. totalmente estáticas. funcionará sin problemas en una versión más reciente.visibility='hidden' } }
© Copyright eitig. A continuación llegó el CGI (Common Gateway Interface).style. una sintaxis u otra. por la naturaleza de este lenguaje.com 1999-2000 Resolución recomendada: 800 x 600 webmaster@eitig. el código que funcionaba con una versión anterior del lenguaje. que eran aplicaciones 40
.all != null) { capa. es decir.Cada versión mantiene perfectamente la compatibilidad con las versiones anteriores (al menos eso aseguran las respectivas compañías).visibility='hide' } else if (document.layers != null) { capa.com
Curso de Diseño y Creación de páginas web: ASP (Active Server Pages)
Hagamos un poco de memoria: en un principio sólo existían páginas web escritas en HTML. Como ejemplo esta función para ocultar capas de un documento: // Esta función oculta la capa introducida como parámetro function ocultar(capa){ if (ns && document. es practicamente imposible generar código 100% compatible con ambas implementaciones. Lo que se suele hacer es introducir dentro del código Script un "IF" que chequea el navegador que se está utilizando.
La principal ventaja que aporta la programación ASP es la sencillez y la comodidad. y esta aplicación nos devuelve como resultado una nueva página web que incluye los resultados de dicha consulta. Ventajas respecto a la programación CGI: La programación CGI se realizaba en lenguajes como C++ o Perl. nuestra aplicación CGI devolvía una página distinta en función del usuario que la estuviera consultando. . nuestra misión únicamente consiste en escribir rutinas en Script. foros.. no sería viable su puesta en marcha. es decir. la página HTML final que le llega al usuario es totalmente estática (a menos que insertemos JavaScript. una página ASP es un archivo dentro de nuestro servidor de internet. Pero no nos confundamos.. se van a efectuar SIEMPRE en el servidor y NUNCA en la máquina cliente. que en la mayoría de los casos.externas que se ejecutaban en el servidor. su funcionamiento es totalmente transparente para el programador. a la hora de programar en ASP no hay que olvidar que todas las operaciones que se van a realizar. Presentando además la dificultad añadida de aprender dichos lenguajes. Con esto se lograba que las páginas de internet dejaran de ser estáticas para convertirse en dinámicas. La funcionalidad que podemos dar a nuestras páginas es impresionante... y no siempre estaban bien resueltos problemas como el 41
. El lenguaje VBScript para servidor o ASP actúa de manera parecida a una aplicación CGI. disponemos de unas rutinas en el servidor que permiten realizar páginas dinámicas en función de los parámetros que le hayamos introducido a la rutina. el día. Es decir. introducir propaganda que cambie cada vez que se visite la página.. ahora es el servidor quien se ocupa del trabajo. applets o VBScript). sino un sencillo código Script que nos va a permitir controlar todo lo que ocurre en el servidor y construir páginas dinámicas. Esta aplicación recibía peticiones como si se tratase de una página HTML normal.. había que compilar y linkar. Estos Scripts procesarán los datos provenientes del cliente y generará una página HMTL como resultado que posteriormente se enviará a dicho cliente. compuesto por una mezcla de HTML y Scripts (que se ejecutarán en el servidor). y esta devuelve una página web normal y corriente. el concepto de buscador jamás existiría. devolvía como resultado una página HTML. . Sin este tipo de tecnología. Por lo tanto. Un ejemplo típico de este tipo de tecnologías lo representan los buscadores de internet. pero la mejora que introduce radica en que la aplicación ya no es un programa ejecutable. y en función de los parámetros que tenía previamente establecidos y los valores que se le hubiesen suministrado la máquina cliente. . pero aunque sige existiendo un programa. o por lo menos. sino cosas más sencillas. Simplemente constan de una aplicación que se conecta a una base de datos para realizar la consulta que le hayamos solicitado. En resumen. no sólo por el simple hecho de poder implementar nuevas funciones como buscadores. que es la que recibe el usuario. como por ejemplo cambiar los hipervínculos de una página si en nuestra empresa tenemos en varios servidores nuestras páginas web (algo típico en servidores de intranet). la hora.
com/vbscript. el control del sistema.0.. página con las últimas novedades sobre las tecnologías de internet. .com
. El aprendizaje de este lenguaje es bastante simple (muy similar a Visual Basic).com/home-default. código y links.com 1999-2000 Resolución recomendada: 800 x 600 webmaster@eitig. documentación oficial y tutorial de Microsoft.solutionsiq. se interpreta (con lo que se ahorra el tiempo de compilación y linkado.microsoft. pero se pierde a la hora de ejecutarlo). ofrece un control muy bueno sobre el sistema y el acceso a bases de datos es compatible con ADO y ODBC (garantizándonos así el acceso a bases de datos como Oracle.com/vbscript/us/vbstutor/vbstutor. la corrección de los errores es más simple. Requisitos: Estos requerimientos son muy distintos a los del usuario final.
© Copyright eitig. www.microsoft. Access). techzone..acceso a bases de datos. ASP soluciona estos problemas.htm. Se necesita el sistema operativo Windows NT 4. orientada para la realización de pruebas con un servidor distinto al de internet.0 o Windows 2000 server con el servidor de internet Microsoft Internet IIS 3.htm. NOTA: Existe una versión de desarrollo (Personal Web Server 4) para Windows 9X y para Windows NT Workstation. página de la compañía sobre el lenguaje ASP. SQL Server.
4_Matematicas 4º ESO - Solucionario Libro del Profesor Editorial Anaya.pdf49660417-Guia-Instalacion-Pladur.pdf[Free-scores.com]_lacalle-joseph-amapola-19481.pdf49660417-Guia-Instalacion-Pladur.pdfacordeon - partituras boleros accordion fisarmonica.pdfBobby Vinton - Sealed With A Kiss.pdf1167-Ennio_Morricone-Cinema_Paradiso.pdfMoonlight.pdf965-Deep Purple-Smoke on the Water189-pare1121 Elvis Presley Jailhouse Rock2725-Gerardo Matos Rodriguez-La Cumparsita2484-Richard Clayderman-Balada Para AdelinaSimulación de Un Motor Stirling Por El Método LHAEtude thermodynamique d´un moteur stirling a faible difference de temperatureClavelitos.orquesta e Instrumentos.solfeo y Cifra.letra_.Arreglo JNO RS y JCDThe GodFatherLove StorymaniseroDejame Los SecretosCharles Fox--killing Me Softly With His SongCava TinaAlcalaDeHenaresVois Sur Ton Chemin (SA & Piano) Partitura - Bruno Coulais189-pare
Curso de diseño de paginas web by eccma143 viewsEmbedDownloadRead on Scribd mobile: iPhone, iPad and Android.Copyright: Attribution Non-Commercial (BY-NC)List price: $0.00Download as PDF, TXT or read online from ScribdFlag for inappropriate contentMore informationShow less
RelatedCONFIGURACION SITIO WEBby Angel Avz28242580 IngenierIa Webby Savior Da SilvaSITIO WEBby Martha CaizaGestion2011 Webby wilmerjatManual Web Servicesby Eduardo Cadenas SarabiaWeb Services Con Phpby akronikusNetmedia Web Productosby javiercepsoPlanificacion Sitio Webby Mauricio JaraLos robots Páginas Webby Ramirez Hugo ArmandoProyecto Webby Kevin Sheyner Quiroz FloresServicios Webby finderfingerWeb 2.0 Para Empresariosby Fabricio Zabala AlvaradoSimilar to Curso de diseño de paginas webCONFIGURACION SITIO WEB28242580 IngenierIa WebSITIO WEBGestion2011 WebManual Web ServicesWeb Services Con PhpNetmedia Web ProductosPlanificacion Sitio WebLos robots Páginas WebProyecto WebServicios WebWeb 2.0 Para EmpresariosAdwords madrid - Analitica web y campañas de publicidad de pago_junio 2010

References: resolución 
 resolución 
 resolución 
 resolución 
 Resolución 
 Resolución 
 Resolución 
 Resolución