|
Construcción de Páginas
WEB Las páginas web son unos documentos de textos que tienen una serie de códigos para que la página aparezca editada con tipos de letras, imágenes, tablas, hiperenlaces, formularios, adornos, etc. Estos códigos, marcas o tag van entre < y > . Generalmente un código tiene un comienzo y un final como: <CENTER> Esto está centrado </CENTER> Hay diversos programas para realizar páginas web como el FRONTPAGE, HOTDOT, HOMESITE etc,... incluso podemos crear una página con imagenes con un procesador de textos como el WORD y luego Guardarla como htm. De esta forma construimos una página web sin saber nada de los códigos. Aquí pretendemos realizar una página, pero conociendo los códigos, porque de esta manera podemos entrar en ella con un editor de textos y retocarla con más exactitud. Por ejemplo insertar códigos de VBScript o de JavaScript. Para ello vamos a utilizar un programa sencillo llamado FLEXED. Más tarde cuando conozcamos la forma de realizar la página y sus códigos elementales podemos utilizar otro programa como el DREAMWEAVER para crear una página de más entidad. La estructura de una página web es la siguiente: <HTML> <BODY> también pueden ir códigos VBS y JavaS </BODY> Vamos a ver algunos códigos que estarían en el BODY: <CENTER>Esto estaría centrado</CENTER> <H1>Letras grandes</H1> <H4>Letras más pequeñas</H4> <B>Letras negritas</B> <I>Letras itálicas</I> <BR> Cambio de linea <HR> Línea horizontal Lista ordenada <IMG SRC="dibujo.gif" WIDTH=106 HEIGHT=41> Una imagen <A HREF="http://www.intel.com">Ve a Intel</A> Un hiperenlace. <A NAME="arriba">Inicio</A> Una etiqueta. <FONT SIZE=5 COLOR=#FF0000>Tipo, color y tamaño de letra</FONT> <!- comentario dentro de la página -> Tabla Las tablas son muy importantes, porque en las páginas web es difícil colocar los elementos que lo componen textos, imágenes, formularios, ..... para solventarlo se utilizan las tablas. Aunque podemos realizar páginas web desde cualquier procesador de textos, recomendamos utilizar el Flexed17, que está en Documentos Web, para empezar. Ésta es una versión antigua de éste programa, las hay más recientes que puedes bajarla de su sitio web. Además, recordamos que hay infinidad de programas para hacer páginas web desde el FRONTPAGE hasta el HOTDOG. Se está utilizando mucho el DREAMWEAVER de Macromedia, http://www.macromedia.com, ésta página está realizada con éste último programa.
|
Documentos de Páginas WEB 1.- Ejemplo de página web. Pagina.htm 2.- Documento sobre la construcción de una página web con el programa Flexed. construirweb.doc 3.- Documento sobre un sencillo ejemplo de frames frames.doc 3.- Flexed17.exe es un programa antiguo pero sencillo para aprender a realizar páginas web. 4.- Aquí te presento un manual de HTM en Español, está comprimido y autoejecutable. manualHTM.exe Cuando le des a Unzip te creará una carpeta en C:\ManualHTM y se descomprimirá. Ve a esa carpeta y pulsa index.htm. Ocupa 415K 5.- Donde puedes alojar tu página. 22alojar.htm |
|
Macromedia es una marca registrada que presenta una serie de herramientas multimedia como el DIRECTOR, FLASH, FIREWORKS, FREEHAND, DREAMWEAVER. Éste último se utiliza para realizar sitios web. Nociones sobre DREAMWEAVER: Vamos a crear un Sitio: Site/New Site
En Window/Properties obtendrás una ventana con la que poder controlar los elementos que vas insertando. En Window/Launcher obtendrás una ventana que te llevará fácilmente al sitio que estás realizando y un icono para poder ver el código fuente que estás construyendo.(Pulsa F5 y F10) En Edit/Preferences/Preview in Browser/Edit podemos poner el navegador con el que podemos ver la página (pulsando F12) durante su desarrollo. En Insert/Rollover Image podemos insertar una imagen que cuando pongamos el ratón sobre ella, cambie. En Insert/Navigation Bar, una barra de navegación, es un conjunto de Rollover. En Insert/Layer, que significa capas, podemos utilizar algo muy interesante, poner capas una sobre otra. Fijate estos dos dibujos están puestos en capas, uno sobre otro. 
En Modify/Page Properties podemos poner el titulo de la página, color o imagen de fondo, márgenes, .... En las páginas web es difícil situar los gráficos, letras, formularios ... que lo componen, para solucionarlo se utilizan las tablas, con Dreamweaver tenemos un buen control con las tablas. Trabaja un poco con las tablas, inserta columnas, agrupa filas,... Mediante las frames (cuadros) podemos ver varias páginas a la vez, aunque da la sensación que sólo vemos una. En la página actual hay tres frames, una a la izquierda donde están los menús, con los botones azules; otro frame arriba donde está en menú con textos y el reloj y otra frame está en este lugar donde está situada la página que estás leyendo. En los Documetos WEB hay uno que te enseña un ejemplo sencillo. Otra cosa a tener en cuenta: los carácteres especiales; vamos a suponer que nuestra página tiene palabras que contiene la letra ñ: España, Peña, Núñez estas palabras se ven bien en los ordenadores hispanos porque tienen configurado el lenguaje Español, pero un ordenador de otro pais, Francia, Portugal, Estados Unidos... verían estás palabras con errores, para que cualquier ordenador pueda ver la letra ñ, en vez de escribirla así en el código fuente de la página web, deberíamos escribir ñ sin embargo el DREAMWEAVER lo hace automáticamente, al igual que los acentos, que también son caracteres especiales. Otra herramienta interesante está en Commands/Start Recording esto lo que hace en grabar los movimientos que hacemos con el ratón y el teclado. Le damos a Stop. Y cuando queremos volver a realizar los mismos movimientos le damos a Play (o bien Ctrl + P) También podrás realizar efectos como éste
(Layer y Timeline), pulsa sobre "la
mosca" hasta estrujarla:
En Text/Css Styles se presenta una utilidad para cambiar el estilo de la página, o sea, los textos. Es interesante y recomendamos que le dediques un poco de tiempo a ver si eres capaz de controlarlo. Actualmente se utiliza mucho. CSS CSS significa Cascading Style Sheets, Hojas de Estilo en Cascada. <FONT face="Arial" size="4" color="red"> Hola a todos </FONT> CSS hace casi lo mismo y aún más. Supongamos que hemos realizado muchas páginas donde hemos puesto varios tipos de letras, colores, tamaños, etc ... y resulta que ahora queremos cambiar los tipos de letras. Tendremos que ir a todas las páginas y cambiarlas. Con CSS sólo tenemos que cambiar un archivo. Las CSS utilizan varios comandos que se llaman formatos: FONT, TEXT, COLOR, BACKGROUND, BOX, ... No vamos a comentar ninguno de ellos pues podemos realizar una CSS automáticamente mediante el DREAMWEAVER, vamos a Text/CSS Styles/Edit Styles Sheet..../New/Make Custom Style(class)/Name=.juanan (comienza por punto) OK Ponemos: Esto creará entre <HEAD>
y </HEAD> un estilo llamado .juanan
que contendrá esos parámetros como se indica aquí
abajo. <style type="text/css"> De manera que cuando en un párrafo llamemos al estilo .juanan su formato de fuente, color, fondo, etc ... cambiará. <p class="juanan">CSS tiene futuro. ¡Apréndelo!> Estamos diciendo: escribe "CSS tiene futuro ¡Apréndelo!"
con el estilo ".juanan" CSS tiene futuro. ¡Apréndelo! |
También podemos crear un estilo, como lo hemos realizado anteriormente
(.juanan)y guardarlo con extensión .css (File/Save
as../miestilo.css)
Una vez que lo tengamos lo podemos llamar desde cualquier página
htm escribiendo dentro de HEAD la etiqueta LINK como se muestra:
<link href="miestilo.css" rel="stylesheet"
type="text/css">
Luego dentro del documento llamaremos a ese estilo en los párrafos
que queramos ponerlo.
<p class="juanan">CSS tiene futuro. ¡Apréndelo!>
Algo parecido a CSS son los Template. Esto es hacer una página en donde habrá zona comunes y zonas modificables. De tal manera que basado en ese patrón podemos construir otras páginas en donde solo podemos editar las zonas modificables. Y al cambiar la página patrón cambiará todas la páginas basadas en ella.
|
Formularios Los formularios se suelen utilizar para mandar información a un servidor de páginas web, éste procesará la información mediante cgi o mejor mediante ASP o PHP. Ésta tecnología (ASP) se verá más adelante, pero sería interesante que estudiara la forma de realizar un formulario como el del ejemplo, estudia su código fuente. Este sería su código fuente: <form action="22paginaweb.htm" method=get> |
Fíjate en este otro formulario, vamos a suponer
que desde una página Web, le pidas a alguien que te envie un archivo
de su disco, el formulario lo harías de la manera que indico abajo.
En este caso no funciona totalmente porque hace falta otra página
con ASP que recoja la petición y la
procese. En vez de poner 22paginaweb.htm, se debería de poner una
llamada a paginaweb.asp o a paginaweb.php.
Cuando veas ASP, tal vez le puedas sacar partido a este ejemplo.
Pulsa Examinar:
Aquí te pongo el código fuente:
< form ENCTYPE="multipart/form-data" action="22paginaweb.htm" METHOD=POST>
Fichero:< input name="fichero" type="file" input type="submit" value="Enviar">
< /form>
También podemos insertar un buscador en nuestra página, cópia el siguiente código para el Altavista :
<form action="http://www.altavista.com/sites/search/web"
name=mfrm>
<input type=text name=q size=28 maxlength=800>
<input type="submit" name=search value="Buscar">
</form>
Para poner el buscador Google escribimos este código :
<form method=GET action="http://www.google.com/search"><input type=text name=q size=28 maxlength=255 value="">
<input type="submit" name=btnG value="Buscar">
</form>
La página de inicio de un sitio web, se suele llamar index.htm, desde ésta página podemos hacer enlaces a otras páginas nuestras o de otros.
En tu página puedes poner efectos multimedia,
gráficos y sonidos, pero ten en cuenta que los archivos
de gráficos y sonidos ocupan mucha memoria,
con lo cuál la bajada completa de la página será
más lenta, de tal manera que puede cansar al usuario que está
intentando verla y cancelarla. Debe haber un consenso entre el aspecto
artístico de la página y su tamaño.
También debes tener en cuenta que los servidores de páginas web distinguen entre mayúsculas y minúsculas, así que no es lo mismo pagina.htm que Pagina.htm. Se aconseja el uso de minúsculas, sin acentos ni ñ.
Si quieres ser un buen programador de páginas web, debes aprender el Dreamweaver, Flash, ASP, Bases de datos, SQL, JavaScript (nociones básicas y saber copiarlos) y Visual Basic Script.
Una vez que tengo la página htm en mi ordenador, ¿Cómo
la puedo poner en Internet?. En 22alojar.htm,
puedes encontrar información sobre algunos servidores en donde
puedes alojar tu página.
Hay muchos servidores de páginas web gratuitos en donde podemos
alojar nuestra página. Debemos de registrarnos, dar nuestro nombre
y una clave, luego ingresar (join). Las páginas las podemos subir
mediante un pequeño navegador, de tal manera que tenemos que indicar
una a una las páginas que queremos enviar, siendo ésto muy
incómodo cuando queremos subir muchos archivos. Para solventarlo
existe el protocolo de trasferencia de archivos FTP que de forma muy sencila
nos presenta dos paneles, como el Explorador de Windows, en uno visualizamos
la carpeta donde se encuentran nuestros archivos en nuestro disco duro
y en otro la carpeta del servidor. Sólo tenemos que arrastrar los
archivos de un panel a otro. Un programa FTP muy utilizado es el CuteFTP.
Ver 33ftp.htm
Está tu página entre la 100.000 más visitadas de Internet (creo que no), pero ve a ésta dirección para comprobarlo:
http://www.alexa.com/site/ds/top_500?p=DestTrLearn_W_g_40_T1