El primer paso ser conseguir el programa que usaremos para estas lecciones y que se llama "Dreamweaver 3.0". Existen versiones ms modernas de este programa, pero me he inclinado por esta por las siguientes razones:

1.- Est disponible en castellano. Very Well Manuel, je je. Seguro que lo agradeceris.

2.- Tiene todo (o ms de) lo que vamos a necesitar.

3.- Es la versin que menos ocupa, cosa buena para los que os tenis que bajar el programa, no?

4.- Es muy muy similar al resto de versiones ms modernas, por lo que dominada la versin 3.0 podrs utilizar las siguientes versiones sin problemas, si es que lo deseas. Esas versiones posteriores estn ms encaminadas a bases de datos, y cosas que an se nos quedan "algo" grandes. De todos modos, no te ser dificil seguir el curso con otras versiones distintas, como la 4.0, etc.

5.- Porque me da la gana. Je je je. Bueno esto ltimo era medio en broma...

Lo Correcto sera....

Lo lgico, al estar empezando con este tema, es conseguir una versin "demo", pues sera desagradable comprarse este programa y que luego no os guste. Puedes conseguir en la red una versin demostracin de este programa. La versin demostracin solo funciona 30 das. Pasado este tiempo el programa deja de funcionar. Si no te ha dado tiempo a decidir si te gusta o no, puedes volver a instalarlo (desinstalndolo antes) y tendrs otros 30 das, y as cuantas veces quieras.

Y lo Incorrecto sera....

Hay gente que tras bajarse la versin Demo, busca por la red el Crack. Es un archivo que se copia dentro del directorio donde est instalado el Dreamweaver y elimina ese lmite de duracin. Eso no es muy legal, pero hay gente que lo hace, pues es prcticamente imposible que alguien se d cuenta de ello. All cada uno.

Hay gente an ms "mala" si cabe, que se baja el programa completo (no demo) con programas como el eMule, Kazaa, eDonkey, ect, y luego durante la instalacin, le introduce un nmero de serie que ha encontrado en internet y que a veces viene adjunto al propio programa que se bajan, funcionando el programa de maravilla. Hay que ver que gente ms malvada.... hay que ver....

Moraleja...

En la seccin Herramientas tiles que puedes encontrar en la pestaa de arriba, te dejo algunas direcciones donde puedes conseguir este fabuloso programa y algunos otros no menos interesantes junto con una breve descripcin de los mismos. Si alguno de los enlaces falla me avisas y lo arreglar de inmediato. All te explico tambin cosillas relacionadas con programas tiles para bajar software y otros asuntos relacionados.

Puedes ser bueno y bajarte la versin Demo para 30 das, o ser malo y pillar la versin completa con el crack, pero recuerda: En estas lecciones nos basaremos en el DreamWeaver 3.0 en Castellano (sea Demo o no, craqueado u original).

Ahora, consigue este programa. Cuando lo tengas, antes de instalarlo visita el apartado La Instalacin para ver las instrucciones de un modo ms detallado. Pero como seguramente tardars un ratito en bajrtelo, en la siguiente pgina haremos unos cuantos deberes para hacer tiempo. No vamos a desperdiciar ni un segundo! El tiempo es Oro!

Escoger un Servidor Para Tu Pgina Web.

A grandes rasgos, un servidor no es ms que un gran ordenador conectado las 24 horas del da de forma ininterrumpida (o al menos, eso esperamos). Este gran ordenador posee un disco duro muy muy grande, un montn de megas de Ram y una velocidad bastante alta para internet.

Cuando una persona visita cualquier web, en realidad lo que est haciendo es acceder a uno de esos grandes ordenadores, concretamente al que alberga esa web en su gran disco duro. Obviamente si ese ordenador estubiera apagado en ese momento sera imposible visitarla.

Un servidor como por ejemplo Terra,

Tripod.es" \t "_blank" Tripod, Wanadoo, etc, cuando te ofrece un espacio de, por ejemplo, X megas para tu pgina web, en realidad te est dejando X megas de su disco duro para que t metas los archivos de tu web. Para mandar esos archivos al disco duro del servidor, solemos usar un programa FTP, pero eso es otra historia que explico en otra seccin.

Aunque esta explicacin es un tanto burda, nos puede aclarar bastante las cosas a los novatillos. Je je, yo al principio, creia que eso de internet era algo etreo, que mi pgina web estaba como flotando en los cables de telefnica, je je, que burro leche, ja ja ja.

Si comprendemos bien qu es un servidor, podemos adivinar que cualquiera puede construir su propio servidor. Bueno, cualquiera que econmicamente pueda mantener un ordenador ms o menos decente conectado las 24 horas del da a Internet. De este modo el lmite de nuestra web ser el que nos marque nuestro propio disco duro, no tendremos que aguantar propaganda ajena, no necesitamos FTP, etc, etc. Pero esa es tambin otra Historia que an no controlo lo suficiente como para ensertela. Por el momento, saber que es posible. Cuando controle ms el tema te lo explicar, vale?

De esto podris deducir, entre otras cosas, que una vez que has subido con el FTP tu pgina al servidor, ocurre que:

1.- Podemos borrar los archivos de nuestra pgina que an tenemos en nuestro disco duro de casa, pues lo que los visitantes ven es lo que hay en el servidor. No obstante, es mejor tenerlas tambin en nuestro disco duro para poder realizar cambios.

2.- Si variamos nuestra pgina web de nuestro disco duro de casa, ampliamos la pgina, etc, los visitantes no vern esos cambios hasta que subamos (actualicemos) los datos que hay en nuestro servidor. Es decir, tras retocar tenemos que volver a subir todos los archivos que han variado a nuestro servidor con el FTP.

Supongo que ahora tienes la cosa algo ms clara.

Vale, Pero Qu Servidor Escoger?

A continuacin te explico las caractersticas que suelen ofrecer los servidores. En la seccin siguiente te indico cmo registrarte en uno de ellos. Lo cierto es que siempre es lo mismo, de modo que si prefieres algn otro servidor las instrucciones del apartado siguiente van a ser igualmente tiles.

Las cosas a tener en cuenta para decidirte por uno de ellos son:

- El espacio web que te ceden: Cantidad mxima en megas que el servidor te cede para alojar todos los archivos de tu web (pginas, imgenes, sonidos, incluso los E-Mails ocupan este espacio). No te dejes asombrar por las megas que te regalen. Llenar 10 megas con pginas web os puede llevar aos, a menos que subas vdeos, etc, que ocupan ms. Para que os hagis una idea, ComoCrearTuWeb tiene unos 900 archivos en total y apenas ocupa 6 megas. Vamos, que con 5 Megas vas sobrados por el momento O acaso pretendes ocupar ms que yo???? Ni te atrevas.... je je je je.

- Si permite gestionar los archivos por FTP: El modo ms cmodo es subir y bajar los archivos con FTP [?] (te recuerdo que el Dreamweaver tiene uno incorporado y es genial). Algunos servidores no te lo permiten, y tienes que hacerlo a travs de su portal... un rollo.

- La publicidad que os incluyen a cambio: Es el precio "a pagar" por un servicio gratuito. En algunos casos apenas molesta (wanadoo) pero en otros casos es odiosa (iespana, geocities), pues te descuajeringa (vaya palabra me ha salo...) por completo la web. Es la causa ms crtica por las que la gente se decide por uno u otro servidor. Los de pago no tienen propaganda, pero eso, son de pago... de todos modos hoy en da no son tan caros como antes (o quizs ahora tenga yo ms dinero que hace unos aos... je je), de modo que siempre puedes estudiar esa posibilidad. En el apartado Hosting y Dominos de CmoCrearTuWeb encontrars informacin al respecto.

- El tipo de direccin (tambin se llama URL, para los ms avanzados...) que te dan para tu web: En funcin del servidor escogido, la direccin que han de teclear tus visitantes puede ser algo tan cortito como http://comocreartuweb.tripod.com hasta algo tan laaaargo y feo como http://www.tripod.es/usuarios/comocreartuweb. La diferencia salta a la vista (bueno, casi salta de pgina, je je je). Os adelanto que las direcciones tipo www.tunombre.com cuestan un dinerillo. Es lo que se llama registrar un domino. No cuesta demasiado dinero eso si, pero es un dinerillo, de modo que lo dejaremos para ms adelante.

- La tasa de transferencia mensual: [?] A ver si lo consigo explicar a la primera... Una web realmente ocupa, lo que ocupan los archivos de las pginas que la forman (en Kilobytes), ms lo que ocupan las imgenes, msicas de fondo, archivos para que se bajen tus visitantes, ect. Cada vez que un visitante accede a una de tus pginas, el servidor donde la alojas le descarga todos estos Kilobytes (los de los archivos de todo lo que visite de tu web). Cuando el total de Kilobytes descargados por tooodos los visitantes durante ese mes superan un cierto valor (Tasa de Transferencia), el servidor corta el grifo y... simplemente, tu web no se v hasta el mes siguiente. Esto puede ocurrir por poner archivos de video o msica para descargar (no digamos ya si pones pelculas, je je je, no te llega ni para los anuncios..),o tambin porque el nmero de visitantes es demasiado elevado (ojala sea por esto ltimo!!). Cada servidor te ofrece una Tasa de Transferencia, que suele rondar 1 Gb (1 Giga). Los de pago te ofrecen ms, segn lo que pagues, claro.

- Lenguajes que soporta: Por supuesto, todos soportan HTML y CSS, pero algunos adems admiten PHP, ASP, extensiones de Frontpage, CGI.... y mil cosas que ahora mismo no me apetece explicar (es que es tarde y me quiero acostar ya!!! ja ja ja ja). En principio, cualquiera nos vale en este sentido, pues cuando aprendamos todas esas cosas raras que he nombrado, podremos irnos a otro servidor que nos guste ms.

En la seccin Hosting y Dominios puedes ver estos datos para cada uno de los servidores propuestos. Si conoces algn otro servidor que merezca la pena en funcin de las caractersticas citadas, no dudes en escribirme para que lo pruebe y lo incluya.

Como vers, la mayoria de ellos son gratuitos. Los de pago pueden merecer la pena si las caractersticas que os ofrecen los gratuitos se os quedan cortas. Esto suele suceder, no por espacio para las pginas, sino por superar la tasa de transferencia mensual y sobre todo, porque los de pago no insertan su propia publicidad en tu web como los gratuitos, en los que en algunos casos es tan molesta que los visitantes te dejan de visitar.

Si deseas curiosear un poco a cerca de los servidores de pago, visitad tambin la seccin

web." Hosting y Dominios. En realidad no son nada caros. No obstante, es mejor comenzar por uno gratuito para ver cmo nos va. Siempre hay tiempo de pasar a otro de pago o incluso a otro tambin gratuito que nos guste ms.

Hay que ver qu pgina ms larga me ha salo. Si es que me lio a escribir.... y pasa lo que pasa....

Cmo Registrarse en www.orange.es

Bien, empezaremos visitando su web en:

www.orange.esAl hacer clic en el enlace anterior (un enlace se suele llamar tambin "vnculo"), se abrir una pgina nueva, para que puedas seguir a la vez las indicaciones de CmoCrearTuWeb al tiempo que haces el registro en Orange.

Al abrirse la web de Orange, has de ir hasta la parte de abajo del todo, donde encontrars un enlace donde pone "Pginas Personales". Haz clic en l.

Se abre entonces una nueva pgina de Orange. Puedes cerrar la anterior sin problemas. En esa nueva pgina, en la parte superior izquierda, encontrars algo como lo siguiente:

Haz Clic en "Regstrate", sin necesidad de escribir nada en los huecos de al lado. Aparece entonces el siguiente formulario que has de rellenar con tus datos. Los campos (huecos) marcados con asterisco (*) son los obligatorios. El resto no tienes que rellenarlo si no quieres.

Una vez hecho esto, pulsa ms abajo, activando la opcin siguiente:

Y despus en el botn de Aceptar.

En la siguiente ventana, si no ha pasado nada malo, aparecer un mensaje de enhorabuena y las opciones de visitar vuestro nuevo correo y activar la nueva web. Pulsa sobre "Clica y Actvala" y seguimos en la pgina siguiente.

Date cuenta que tu E-Milio es tunombre@orangemail.es Esto va de maravilla!

Principio del formulario

HTMLCONTROL Forms.HTML:Text.1

HTMLCONTROL Forms.HTML:Submitbutton.1

Web

ComoCrearTuWeb

HTMLCONTROL Forms.HTML:Hidden.1

HTMLCONTROL Forms.HTML:Hidden.1

HTMLCONTROL Forms.HTML:Hidden.1

HTMLCONTROL Forms.HTML:Hidden.1

HTMLCONTROL Forms.HTML:Hidden.1

Final del formulario

Si deseas usar otro servidor, te dejo instrucciones de algunos: Instrucciones para Registrarte en iEspana.esAlta de nuestra nueva Web en Orange.

Hasta ahora, tenemos hecho el registro en Orange, y la pgina est dada de alta, pero nos falta activarla. Para ello simplemente pulsa sobre "Clica y Actvala", en la ltima ventana que se abri.

Si por error (o por las prisas....) la has cerrado, no te preocupes, simplemente ve a www.orange.es y vuelve a hacer clic en "Pginas Personales", casi al final de la pgina. Si recuerdas, es el mismo enlace que pulsaste el comienzo del registro.

Ahora se abre de nuevo la pgina inicial, y tendremos que escribir el nombre de usuario y contrasea para acceder a nuestro panel de control.

Recuerda, escoge @orangemail.es, no @orange.es ! ! ! Tras escribir los datos, pulsa en el botn de OK. Aparece entonces otra ventana con este cuadro ms o menos por el centro de la pgina:

Haz clic ahora donde pone "EL ASISTENTE" para activar tu nueva pgina. Se abre el siguiente cuadro, donde tendrs que escoger la categora de tu web y escribir un ttulo y una descripcin de la misma. (Quizs te pida tu nombre de usuario y contrasea antes de que aparezca esta ventana de abajo. En ese caso, donde pone elige dominio escoge orangemail.es).

Adems, escribe las palabras clave. Estas palabras clave son aquellas (de tu eleccin) que mejor describan tu pgina. Separalas con comas. Si por ejemplo una de ellas es "fotografa", cuando un visitante escriba esta palabra en el buscador de Orange, habr ms posibilidades de que tu web salga entre los resultados, todo, por haber escogido esa palabra en este cuadro. No pongas ms de 8 o 10, pues demasiadas palabras no mejoran los resultados, de modo que, escoje bien.

Tras rellenar todo esto y pulsa en "Enviar" y aparece otra ventana. Entra y cotillea un poco, pero la web ya est activa, que es lo que queramos. Mi consejo es.. una vez aparezca esa ventana, cierrala y volvemos a las explicaciones de ComoCrearTuWeb. Siempre puedes registrarte de nuevo con otro nombre para hacer experimentos con esas plantillas que ofrece Orange, pero por mi parte, cierra esa ventana y seguimos a nuestro rollo.

En Resumen

Resumiendo, ya tenemos la pgina web lista. Vacia, si, pero lista y visible en internet. Ya sabes la direccin, (http://www.perso.gratisweb.com/tunombredelogin) pues vena en el cuadro anterior, al igual que tu nuevo correo electrnico. Vers que ha sido rpido, no? y bien explicado... je je je. Ah! y ten en cuenta que si la visitas ahora saldr una pgina web totalmente en blanco, pues no hemos escrito an nada en ella. Eso si, no aparece ningn cdigo de error ni nada, simplemente todo blanco. Si te encuentras la pgina as, es que todo ha salido correctamente, como no? je je.

La Instalacin del Dreamweaver.

La instalacin del Dreamweaver 3.0 en espaol (las otras versiones se instalan de la misma manera) es bastante facilita. El programa una vez instalado ocupa unas 16 megas en vuestro disco duro, (segn versin). Poca cosa para tu monstruo de PC, je je.

Para realizar la instalacin haz lo siguiente:

1.- Doble clic en el archivo de instalacin.

2.- Tras una ventana de presentacin pulsa en "Siguiente"

3.- Te pregunta si aceptas las condiciones de uso. Pulsa en "Si".

4.- Si el programa est completo, te pedir el nmero de serie. Si el programa es tuyo lo tendrs en la caja del programa. Si no es as, sera ilegal que incluyers el nmero de serie de otra persona, pero all cada uno con su conciencia.

5.- Una vez introducido el nmero de serie te pregunta dnde querieres instalarlo. Puedes dejar lo que viene por defecto y luego pulsar en "Siguiente". En la Versin Demo, no te pedir nmero de serie.

6.- Te pregunta con que nombre quieres que aparezca en el menu de programas. Pinchad en "Siguiente".

7.- Resumen de lo que has elegido. De nuevo, clic en "Siguiente".

8.- Tras unos segundos el programa queda instalado y te pregunta si quieres leer el archivo de ayuda. Puedes pasar de l quitando la seleccin y pulsar en finalizar.

9.- Aparece una ventana en el escritorio. Arrastra el icono verde y negro hasta el escritorio para hacer un Acceso Directo al Dreamweaver y cerrar esa ventana.

10.- Haz clic en ese acceso directo y tes saldr una ventana preguntando si te queris registrar. Si le das a no volver a mostrar, no saldr ms.

11.- Ahora te dars un susto, pues se abren unas cuantas ventanas que desconocemos por el momento. Cierra todas menos la ms grandota con fondo blanco. A esta ventana la llamaremos de ahora en adelante "Ventana Diseo" recuerdalo. Te enseo como es:

12.- Esa ventana que queda ser nuestra mesa de trabajo en estas lecciones. Cotillea un poco las opciones que ofrece antes de continuar con estas lecciones para que te sea ms familiar. Date cuenta que las ventanas que hemos cerrado ahora mismo podis abrirlas y cerrarlas haciendo clic en los botones que aparecen abajo de esa ventana principal, a la derecha, con dibujos de un cuaderno, una flecha, etc, ms o menos como estos:

Mantn en Orden desde el Principio.

Los que ya me conocis, sabris cuanto me gusta el orden de los archivos, de modo que no os sorprender nada lo que os dir a continuacin. Al resto solo les puedo decir que confien en m y hagan lo que les indico. Aunque puede resultar un poco rollo, pronto me daris la razn.

Pues bien. Vamos a crear una carpeta en nuestro disco duro llamada "Mis Webs" (por ejemplo). Dentro de ella crearemos otras carpetas, una para cada una de nuestras webs. Si si, ya se que por ahora os bastara con tener una, pero nunca se sabe. Quizs os guste registrar otra web ms, donde hacer experimentos... no?. Por ahora, que solo tenis una, dentro de la carpeta "Mis Webs" cread otra carpeta y ponedle el nombre de la nueva web que vais a crear. En mi caso se llamara "ComoCrearTuWeb", en el ejemplo que seguiremos, la llamar "miejemplo". Si, ya se que soy muy original, ya.

La carpeta debera quedar como en la foto:

En la carpeta "miejemplo" es donde iremos haciendo la pgina que explicamos en estas lecciones. Pero, repito, podis crear otra carpeta, por ejemplo llamada "WebPrueba" donde vosotros mismos podris experimentar cosas nuevas. As no mezclaremos cosas.

De este modo, conforme vayamos aprendiendo cosas, las podris ir aplicando a vuestra propia web sin mezclar nada de nada. Asimismo, si queris probar cosas por vuestra cuenta, antes de hacerlo directamente en vuestra web (por si no os gusta luego o no funciona) lo probis en la carpeta "WebPrueba". Creo que pillais la idea, no?

A continuacin definiremos el "sitio" en el Dreamweaver.

Cmo Configurar tu Sitio en el Dreamweaver.

Como ya sabemos, el servidor donde vamos a alojar nuestra web nos ofrece un espacio de algunas megas. El conjunto de pginas, imagenes, sonidos, etc, que vamos a subir es lo que podramos definir como nuestro "Sitio" y todo eso junto podr ocupar como mximo, el espacio que tengamos en el servidor (wanadoo en el caso del ejemplo de este curso).

El Dreamweaver nos permite definir las caractersticas de nuestro sitio, es decir, podemos indicarle cul es nuestro Nick y Password (o contrasea), adems de la direccin FTP [?] que nos ofrece nuestro servidor para subir nuestra web, y de este modo, el mismo programa se encargar, cuando nosotros se lo mandemos, de actualizarlo all en el servidor. Tambin nos podr revisar toda la web antes de subirla para comprobar que los vnculos (enlaces) estan definidos correctamente. Otra ventaja de este programa es que nos permite cambiar de nombre o de lugar (de carpeta) algunas de las pginas de nuestra web sin que por ello tengamos que retocar las rutas. De eso se encarga ya el Dreamweaver. Para poder hacer esto, lo primero que necesitamos es Definir Nuestro Sitio. (Ya os explicar que son las "rutas" esas).

Dreamweaver adems nos permite definir varios sitios, no uno solo. Esto es muy til si tenemos varias Webs. Esta caracterstica nos vendr muy bien, pues el procedimiento de definir sitios lo podemos hacer varias veces, una para cada una de las carpetas creadas anteriormente (VuestraWeb, miejemplo, experimentos....). Para ello, haced lo siguiente:

Creando el Sitio "miejemplo"

Antes de nada, supondo que habrs creado las carpetas que te dije antes, no? Vale, vale. Entonces abre el Dreamweaver y:

1.- Pulsa sobre "Sitio" + "Definir Sitios". Aparecer una ventanita como esta: (sin nada dentro)

2.- Pulsa sobre "Nuevo" para definir un nuevo Sitio. Ahora sale otra ventana:

3.- Donde pone "Nombre del Sitio" escribe el nombre de tu nueva web, en mi caso "miejemplo".

4.- En "Carpeta raiz local", pulsa sobre la carpeta amarilla y escoge la carpeta antes creada y llamada "miejemplo", dentro de la carpeta "Mis Webs". Una vez seleccionada pulsa sobre "Abrir" y luego sobre "Guardar".

5.- Activa las casillas de "Actualizar lista..." y "Cach" para mejorar la rapidez del programa.

6.- Pulsa sobre "Diseo del mapa del sitio", a la izquierda de esa ventana (donde el fondo es blanco).

7.- Aparecen otras opciones. Donde pone "Pgina principal" escribe "index.htm" y pulsa en "Aceptar". Entonces te dira que el archivo no existe y que si quieres crearlo. Dile que si, es decir, pulsa en "Aceptar".

8.- Activa la opcin "Mostrar archivos marcados como ocultos", para evitar subir archivos sin saberlo. Todo ha de estar bajo control!

9.- A continuacin haz clic en "Datos del servidor Web", tambin en la parte izquierda de esa ventana. Aparece entonces esta otra ventanilla:

10.- Dentro de "Acceso al servidor" haz clic y al abrirse escoge "FTP". Los datos que has de poner dependen del servidor en el que te has registrado:

En Orange :: A continuacin, escribe "ftp.orange.es" (sin las comillas) en el apartado "Servidor FTP". Esta es la direccin del FTP de Orange, comn a todas sus pginas personales. Bueno, si te registraste con OrangeMail y no con Orange, el FTP es ftp.orangemail.es. El campo (hueco) donde pone "Directorio del Servidor" dejalo en blanco. En "Conectar" escribes el E-Mail que te han dado al registrar la web en Orange, en mi caso "ejemplomio@orangemail.es", y ten en cuenta que una letra mayscula y una minscula no son lo mismo para el servidor. Escribelo entonces tal y como lo escribiste al registrarte. Por ltimo, coloca tu contrasea y dejando el resto como est, pulsa en "Aceptar"

En iEspana :: A continuacin, escribe "tu-nombre-de-registro.iespana.es" (sin las comillas) en el apartado "Servicio FTP". El campo (hueco) donde pone "Directorio del Servidor" dejalo en blanco. En "Conectar" escribes el nombre con el que has registrado la web en iEspana seguido de guin bajo y el nmero 5, es decir, si te registraste con el nombre "miejemplo" entonces en "conectar" has de poner "miejemplo_5", y ten en cuenta que una letra mayscula y una minscula no son lo mismo para el servidor. Escribelo entonces tal y como lo escribiste al registrarte. Por ltimo, coloca tu contrasea y dejando el resto como est, pulsa en "Aceptar"

11.- Ahora en la ventana del principio aparecer el nuevo sitio creado. As de fcil. Pulsa en "Listo" y seguimos hablando.

Creando Otro Sitio Distinto

9.- Sigue los pasos anteriores si deseas crear otro "sitio" (si has registrado alguna otra web en wanadoo o tienes otro espacio en tu propio servidor). Se hace igual pero cambiando el nombre y la carpeta. Ten en cuenta que si tu servidor no es Orange, el procedimiento es igual, pero cambia la direccin del FTP. Para Orange hemos visto que podia ser ftp.orangemail.es o ftp.orange.es pero para otro distinto, llamado por ejemplo xxxxx, seguramente la direccin sea ftp.xxxxx.es o ftp.xxxxx.com

Creando una Pgina Simple de Prueba.

El siguiente paso es crear una pagina principal. Como ya sabris cada servidor os pide un nombre determinado para esa pagina principal. Puede ser index.htm home.htm etc. Para el ejemplo que nos ocupa, (alojados en el servidor Wanadoo) se ha de llamar index.htm

Para crearla volved a la ventana "SITIO" y pulsad en "Abrir Sitio" + "miejemplo". Se abre entonces el Sitio de nuestro ejemplo y aparece dentro la pgina "index.htm" que es la pgina principal. Si recordais, la hemos creado al configurar el sitio.

Si pinchais dos veces sobre index.htm, se abre esta ventana, que de ahora en adelante denominaremos "Ventana de Diseo":

(En principio os saldr completamente en blanco)

Para empezar, vamos a escribir en ella algo as como "Esta es mi pgina principal". Haced clic una vez en esa ventana, en la parte de dentro, y escribid esa frase o algo similar.

A continuacin, vamos a guardarla. Para guardar esa pgina pulsad (en esa misma venana) en "Archivo" y luego en "Guardar".

Como podis comprobar, en la ventana "SITIO" se os indica el nombre de cada archivo, su tamao, el tipo y la fecha de su ltima actualizacin. La ventana de la pgina principal (la index.htm) podis cerrarla ya. Para volver a abrirla solo tenis que hacer doble clic en la ventana "SITIO", donde aparece su nombre.

Esto no es tan dificil, verdad? Ya os dije que confiarais en m. Vamos a seguir con otras cosillas, vale?

Ms Navegadores para la Vista Previa

Voy a explicaros un poco mejor eso de las Vistas Previas en el DreamWeaver. Como sabris ya a estas alturas, los programas de diseo web nos muestran como se vera nuestra pgina si estubiera ya en la red. Esto es lo que llamamos Vista Previa.

El Dreamweaver nos permite hacer las Vistas Previas con todos los Navegadores que tengamos instalados en nuestro ordenador. Y para qu quiero yo ver mi web con ms de un Navegador? Pues es bien sencillo. Desgraciadamente las webs no se ven igual con el Internet Explorer que con el Netscape, Opera u otros Navegadores. En algunos casos las diferencias son mnimas, pero en otros (y esto es lo ms normal) el resultado es desastroso. Por eso, conviene que hagamos las webs de modo que se vean ms o menos bien en todos los Navegadores (nosotros aprenderemos a hacerlo as).

Hay personas que prefieren olvidarse de ciertos Navegadores para ahorrarse trabajo, alegando que hay muy poca gente que use el Opera o el Netscape. Esto es un gran fallo, pues aunque solo un 5 o 6% de los Navegantes utilizasen esos Navegadores, es una cifra muy respetable.

Pues bien. Para poder comprobar qu tal se ve nuestra pgina web no hay ms remedio que tener instalados algunos de estos Navegadores. Al final de esta pgina os recomiendo los ms utilizados y os dejo una direccin de donde descargarlos de forma gratuita.

Una vez instalados en nuestro disco duro, hay que decirle al Dreamweaver cuales son los Navegadores que tenemos para poder hacer la vista previa con cada uno de ellos.

Para ello, bien en la ventana "SITIO" o en la ventana de Diseo, pinchad en "Archivo" + "Vista Previa en el Explorador..." + "Editar Lista de Exploradores".

Se abre entonces una ventanita. En el recuadro con fondo blanco de la parte central aparecern los ya definidos (si es que tenemos alguno definido por defecto).

Para incluir cualquier otro Navegador, pulsad en el signo "" y se abrir otra ventana en la que pondremos el nombre del nuevo Navegador que queremos aadir y luego pulsamos en "Examinar" para buscar el archivo ejecutable (es decir, con extensin .exe) de dicho Navegador.

Si no sabis donde encontrar ese archivo, os ayudo un poco. Todos los programas que instalais (por defecto) se suelen almacenar en la carpeta "Archivos de Programa", de modo que para encontrar por ejemplo el archivo del Opera, tras pulsar en "Examinar" os vais a "Mi Pc", buscais "C:" + "Archivos de Programa" y dentro de esta, la carpeta "Opera" o "Netscape" o "Internet Explorer" segn el caso. Dentro de esas carpetas aparecer un archivo con extensin .exe con el nombre del Navegador en cuestin, usualmente con un dibujo en su icono. Elegidlo y luego pulsais en "Abrir" y luego en "Aceptar".

Entonces, habremos aadido otro Navegador. Haced esto con cada uno de los que tengis instalados.

En esa misma ventana podis escoger un como Navegador Principal y otro como secundario. Esto es para hacer ms rpida y fcil la vista previa, pues pulsando F12 se ver la Vista Previa con el Navegador Principal escogido y pulsando "Control" + "F12" lo mismo con el Navegador Secundario. Si tenis ms de dos Navegadores instalados, el resto se escogern pulsando sobre "Archivo" + "Vista Previa en el Explorador.." y eligiendo cualquiera de ellos.

Como adelanto os dir que para conseguir que las pginas se vean idnticas con cualquier Navegador es imprescindible el uso de Los Estilos, de los que encontraris suficiente informacin en el Curso de Estilo CSS.

No obstante, los ejemplos que vamos a hacer en esta seccin, intentaremos que sigan las normas de estilo para que se vean correctamente en todos los Navegadores. Para ello os ir indicando como utilizarlos conforme nos hagan falta.

Principio del formulario

Final del formulario

Si deseas conocer ms navegadores.... (enlaces externos)

Descrgate gratis estos otros: Mozilla Firefox, Netscape Navigator, Opera 8.50 en espaol.Un "Peln" de HTML... vamos.. casi nada.. de verdad.

Vamos a ver ms cosillas. Si tenis abierta la ventana de la pgina principal (la podis abrir haciendo doble clic en ella desde la ventana "SITIO") podis ver que abajo a la derecha hay un icono parecido a esto "". Si pulsais en l veris una nueva ventana donde os presenta el cdigo HTML que corresponde a la pgina creada. Pulsa en ese icono y veris ese cdigo.

En un principio pensaba dejar las explicaciones HTML aparte, por si a alguno no le interesaba, pero cada da recibo ms y ms preguntas vuestras cuya nica solucin pasa por meter mano a ese cdigo, por lo tanto, lo siento, pero tendris que tragaros tambin las explicaciones de HTML. Venga, no quejaros miedicas, que eso no es n, je je je je. Veris como me lo agradecis el da de maana cuando queris meter un contador, o un banner, o publicidad, o un enlace, o lo que sea. Hace falta para todo, bueno, a menos que no te importe tener fallos en la pgina, que no lo creo, verdad? Je je. pues adelante mis valientes.

Al pulsar en ese icono que os deca veris el cdigo HTML. En la pgina recien creada, el cdigo, ms o menos es el siguiente:

Untitled Document

Esta es mi pgina principal.

Os explico lo que significa. Toda pgina HTML comienza con un y termina con . A su vez, todas las webs tienen dos partes, Cabecera (tambin llamada Head) y Cuerpo (llamado Body). En estas dos partes, tambin se indica su comienzo y final, de modo que una pgina completamente en blanco sera:

(esto indica el comienzo de la pgina)

(esto otro, indica que empieza la cabecera)

(esto indica el final de la cabecera)

(esto el principio del cuerpo, o body de la pgina)

(esto el final del cuerpo)

(y esto, el final de la pgina)

Pero como vis, en el cdigo de nuestra pgina principal hay mas cosillas. Os explico cada una de ellas:

- Esto indica el ttulo de esa pgina.

Untitled DocumentNo confundis el ttulo de la pgina con el nombre de su archivo. El ttulo es lo que sale en la barra superior del navegador (la barra azul) cuando se visita esa pgina. Si abrs la pgina index.htm que habis creado y haceis vista previa (Arhivo+Vista previa+Navegador) veris que arriba aparece "Untitled Document ....". Eso queda muy feo, no? Mejor es ponerle un ttulo a nuestro gusto. Para poner ttulo, solo tenis que escribirlo entre los commandos y . Por ejemplo, para que los visitantes vean en esa barra lo siguiente, "Bienvenidos a mi nueva pgina" el cdigo debe quedar como:

Bienvenidos a mi nueva pginaetc..etc..Creo que ha sido fcil quejicas, je je je, no? En realidad, al escribir el ttulo hemos cometido un pequeo gran fallo. Se trata del tema de los acentos, pero eso lo explicar algo ms adelante. Por ahora lo dejamos as.

Otra forma de acceder al ttulo de la pgina para cambiarlo es la siguiente:

1.- Desde la ventana del dreamweaver abierta con esa pgina cuyo ttulo queremos cambiar, pulsamos en "Ver" + "Contenido del Head".

2.- Aparecen en la parte superior un par de iconos. Si hacemos doble clic en el primero aparece otra nueva ventana donde podremos escribir el ttulo deseado en lugar de "Untitled Document". Una vez hecho, podemos cerrarla.

Esto es ms fcil que lo de HTML, pero as no os habriais enterado de la estructura HTML de una web, verdad?

- El resto de lneas que aparezcen en la seccin HEAD (en la cabecera de las pginas) son las funciones Metas (Metatags) que son lneas que se aaden para que los buscadores puedan localizar las pginas y mostrarlas a la gente. Si deseas saber ms cosillas sobre las Metatags (o como ser encontrado por los buscadores) visita la seccin Las Metatags en el apartado La Promocin.

- Despus viene la seccin "BODY" (o Cuerpo). Aqu es donde va definido el contenido de la pgina, es decir, las letras, imagenes, enlaces, sonidos, ... todo.

En nuestro caso solo encontramos una lnea que corresponde al texto escrito.

etc, etc...

esta es mi pgina principal.

etc, etc...Como vis el Cuerpo (o Body) empieza con y termina con

Junto a phpbb2"

3.- Conecta tu FTP y sube esa carpeta al servidor. Si todo ha ido bien, ahora tendrs una nueva carpeta en tu web llamada "phpbb2" con todos los archivos que descomprimiste en tu ordenador.

4.- Abre el navegador y ve a http://dominio-de-tu-web/phpBB2/install/install.php. Aparecer la pantalla de instalacin, que te preguntar una serie de opciones de configuracin. Las 3 primeras son el idioma (en este momento slo se puede elegir Ingls), la base de datos (en nuestro caso MySQL) y si ests instalando o slo actualizando (nosotros estamos instalando). Para las siguientes 4 opciones necesitars la informacin que te haya dado tu proveedor de hosting.

Cmo Configurar el foro PhpBB2 de tu pgina web

Abre el navegador y ve a http://dominio-de-tu-web/phpBB2/install/install.php. Aparecer la pantalla de instalacin, que te preguntar una serie de opciones de configuracin. Las 3 primeras son el idioma (en este momento slo se puede elegir Ingls), la base de datos (en nuestro caso MySQL) y si ests instalando o slo actualizando (nosotros estamos instalando). Para las siguientes 4 opciones necesitars la informacin que te haya dado tu proveedor de hosting.

Database configuration: (Configuracin de la base de datos)

1.- Database Server Hostname / DSN: Es el nombre del servidor de la base de datos, este nombre tiene que drtelo tu proveedor de hosting, suele ser localhost o una IP.

2.- Your Database Name: El nombre de la base datos, tambin ha de drtelo tu proveedor.

3.- Database Username: Tu nombre de usuario en la base de datos (puede ser distinto al del registro en el servidor).

4.- Database Password: Contrasea de la base datos (puede ser distinta al del registro en el servidor).

5.- Prefix for tables in database: prefijo de las tablas en la base de datos. La base de datos de phpbb implica varias tablas (users, topics, posts, etc) poniendo este prefijo se llamaran phpbb_users, phpbb_topics, esto te permitir instalar un segundo foro en la misma base de datos simplemente cambiando este prefijo.

Admin Configuration (Configuracin del Administrador)

Ahora veremos como configurar tu cuenta de administrador del foro, necesaria para la puesta en marcha del mismo.

1.- Admin Email Address: Cuenta de correo del administrador, es la que utilizar el foro para mandar los mensajes a los usuarios.

2.- Domain Name: Dominio en el que est el foro, en mi caso es www.comocreartuweb.com

3.- Server Port: Puerto del servidor, a menos que tu proveedor te indique otra cosa, dejal como est.

4.- Script path: Directorio en el que est el foro, si has colgado la carpeta phpBB2 del riz ser /phpBB2/, pero supongamos has metido la carpeta phpBB2 dentro de una carpeta que se llama foros, en este caso sera /foros/phpBB2/.

5.- Administrator Username: Nombre de usuario del administrador.

6.- Administrator password: Contrasea del administrador.

7.- Administrator Password [ Confirm ]: Confirmacin de la contrasea del administrador.

Una vez rellenados todos estos campos, pulsamos sobre "start install".

AVISO: Si no le has dado permisos de escritura a config.php recibirs un mensaje diciendo que no puede escibir en el fichero de configuracin, as que pulsamos sobre el botn "Download Config" y guardamos el archivo en nuestra carpeta de phpbb2 sobreescribiendo el archivo de configuracin que tenamos previamente.

6.- Ahora, cuando te salga el mensaje: "Please ensure both the install/ and contrib/ directories are deleted", borra las carpetas "install" y "contrib" abriendo el ftp y eliminndolos del servidor. Esto es para evitar que alguien pueda entrar, leerlos y ver all tus datos para hacerse con el control del foro. Si los eliminas del servidor no ocurrir esto.

Instalar el lenguaje "espaol" en el Foro PhpBB2

Primero tienes que descargarte el "pack en espaol" que est en la pgina de phpbb http://www.phpbb.com/downloads.php. Casi abajo del todo, busca "spanish" y bjate el archivo. Descomprmelo en tu carpeta, ya existente phpbb2>languages.

AVISO: Tienen que quedar dentro de phpbb2>languages las dos carpetas.

Aseguraos que dentro de lang_spanish estn directamente los archivos de lenguaje.

Ahora sube la carpeta lang_spanish al directorio "languages" dentro de phpbb, en tu servidor.

Configurar el lenguaje Espaol

1.- Vamos a nuestro recin extrenado foro www.tudominio.com/phpBB2/

2.- Pulsamos sobre login y nos autentificamos con el nombre y la contrasea de administrador que pusimos al instalar el foro.

3.- Al pi de los foros aparece un enlace al panel de administracin, plsalo.

4.- Dentro del panel de administracin, en la seccin "general admin" pulsa en "configuration".

5.- Busca "Default Language" y de la lista desplegable escoge "spanish".

6.- Guarda con en el botn que hay a pi de la pgina.

7.- Ahora v de nuevo al ndice del foro, a tu perfil y en la opcin language, elige spanish.

Si nada de esto funciona an queda una opcin, algo chapucera, pero funciona. Se trata de copiar todo el contenido de la carpeta de lenguaje espaol en la carpeta del lenguaje ingles, sustituyendolo todo. As, no har falta seleccionar el idioma espaol en la pgina de configuracin que te dije antes. Simplemente copia el contenido espaol y lo pegas en la carpeta del idioma ingls y listo, todo quedar en espaol.

En teora, con esto ya tienes tu foro en tu pgina web. Ahora solo te queda ir creando las secciones que desees y algunas cosillas ms para personalizar el nuevo foro. Te echar una mano para todo esto en la siguiente seccin. oki?

Por cierto, no olvides poner un enlace a tu nuevo foro php desde las pginas de tu web, sino, nadie sabr llegar a l!

Cmo Personalizar el foro tipo PhpBB2 de una pgina web

Son muchas las opciones que tenemos para personalizar el foro Php que acabamos de instalar, aunque siempre respetando que aparezcan los enlaces hacia phpbb.com, naturalmente, que para eso nos ofrece este fantstico foro.

Algunas de estas personalizaciones posibles son, colocar un logotipo propio, o un enlace hacia tu pgina web, cambiar los iconos, o el estilo del foro (color de fondo, fuente del texto....). Incluso te pudes descargar algunas mejoras desde la misma web de la que te bajaste los archivos del foro, como colocar un mdulo de mensajes rpidos, mejorar la indexacin de las pginas del foro en los buscadores... etc, etc.

Cmo Personalizar el foro tipo PhpBB2 de una pgina web: El Banner o Logotipo.

El foro, tal y como nos lo dan, es genial, pero te quedar mejor si lo personalizas un poco. Si no, todos los de este tipo parecern demasiado similares y tenemos que destacar de algn modo, no? Una de las cosas que podemos hacer es cambiar el logotipo de la parte superior izquierda. Primero haz tu propio logo o banner y una vez lo tengas puedes seguir con esta pgina donde te enseo cmo insertarlo en el foro. Si necesitas ayuda para crear tu logo acude al foro y/o visita esta otra seccin de ComoCrearTuWeb (versin antigua).

Bien, una vez tienes tu banner vamos a colocarlo en el foro. Tenemos dos opciones, una muy fcil y otra solamente fcil.

Opcin Muy Fcil Para Insertar un Banner en el Foro phpBB2

Cuando se accede a tu foro, el explorador busca los objetos del mismo. Uno de ellos es el logotipo o banner del foro, que es el dibujo ese donde se lee "phpBB2" en la parte superior izquierda.

Por tanto, si simplemente sustituimos el archivo de esa imagen por el archivo de nuestro logo, poniendo el mismo nombre a nuestro logo que el que tiene el logo de phpBB2, cuando lo busque lo que aparecer ser el nuestro, no? Pues si.

El archivo en cuestin se llama logo_phpBB.gif y se encuentra en la siguiente ruta:

/phpBB2/templates/subSilver/images/logo_phpBB.gifEs decir, dentro de la carpeta de vuestra web, en la carpeta phpBB2, templates, subSilver, images. Si no lo encuentras en esa carpeta (puede que cambie de lugar segn la versin que uses) puedes usar la funcin BUSCAR de windows. Escribes el nombre de ese archivo y aparecer donde est. Por lo tanto basta con crear tu banner, guardarlo dentro de esa carpeta (images) con el nombre logo_phpBB.gif y despus solamente te queda subir el archivo del logo al servidor. Si te preguntara si quieres sobreescribirlo, dile que si.

Listo, no es fcil? Procura eso si, que las dimensiones de tu banner sean similares a las del banner de php para evitar que la cosa se descomponga. De todas formas, sera cuestin de ver como queda.

Opcin Solamente Fcil Para Insertar un Banner en el Foro phpBB2

La segunda opcin, que solo es fcil, es guardar el archivo con el nombre que te de la gana (siempre evitando usar maysculas, guiones medios "-". acentos, espacios y smbolos raros) en la carpeta que tambin te de la gana y luego acceder al archivo del foro donde se indica el nombre de ese archivo y su ruta y cambiarlo a mano. Luego solo tienes que subir al servidor tu logotipo y tambin ese archivo donde se indican las rutas y.... ual! Listo.

El archivo en cuestin, donde se indica la ruta es es siguiente:

/phpBB2/templates/subSilver/overall_header.tplIgual que antes, si no lo encuentras all, usa la funcin BUSCAR de windows. Este archivo lo puedes abrir con el notepad o bloc de notas de windows para hacer el cambio siguiente.

1.- Abre el archivo con el notepad.

2.- Pulsa sobre edicin>buscar

3.- Escribe en el cuadro que se abre el nombre del archivo del logotipo de phpBB (logo_phpBB.gif) y cambialo poniendo el nombre del archivo que t has creado para tu banner.

4.- Si no has guardado en esa misma carpeta tu logo, sino en otra, tienes que cambiar adems la ruta, para que sea la correcta y apunte al lugar donde lo guardas. Si no lo vas a guardar dentro de la carpeta de archivos de phpBB2, te recomiendo que pongas la ruta completa (no la relativa), es decir, en lugar de esto:

debes poner esto otro:

Una vez lo has cambiado, guarda y sube al servidor ese archivo overall_header.tpl y el de tu logotipo y listo. Veras que no ha sido muy fcil, pero si al menos solamente fcil, verdad?

_1332776881.unknown

_1332776883.unknown

_1332776884.unknown

_1332776882.unknown

_1332776879.unknown

_1332776880.unknown

_1332776877.unknown

_1332776878.unknown

_1332776875.unknown

_1332776876.unknown

_1332776874.unknown