How to… Hacer una Web

22 10 2008

Muchos de vosotros, los que asistís diariamente a “Narrativa de la lengua Inglesa”, sabéis que nos piden hacer una pequeña web en la cual deberemos entregar los trabajos de dicha asignatura.

Veo que entre la gente hay muchas dudas, miedos y desconfianza a como hacerlo, ya que ni el Word es un editor web (tiene funciones, pero NO es un editor web, repito) ni la gente tiene conceptos suficientes como para hacer una web cuando nunca han visto ni una línea de lenguaje HTM (NOTA: NO es correcto decir lenguaje HTML ya que la L significa Language), por lo que he decidido hacer un mini tutorial para que los alumnos usen un editor gratuito como “N|vu” (no como el Word de Microsoft.. el cual yo no se vosotros, pero yo no puedo pagar casi 600€ de licencia) para facilitaros la faena en la medida de lo posible. Clicar en “Read the rest of this entry” para el tutorial 😉

Primero comenzaremos con la instalación del programa.

INSTALACIÓN

Primero, deberemos descargar e instalar dicho programa. Deberemos descargarlo de aquí…

http://www.raulgullon.com/Downloads/nvu-1.0.es-ES.win32.installer.exe

(Descarga 100% Sin Virus)

Una vez descargado, proceder a la instalación. El primer paso, “Siguiente”. En el segundo, aceptamos la licencia (si no no nos dejará instalar… obvio). Elegimos la ruta de instalación (es decir, “Siguiente” ). Nos dirá de crear atajos en el menú “Programas”… dejamos como está y “Siguiente”. En el siguiente paso, elegimos si queremos o no accesos directos en escritorio y/o barra de inicio rápido, eso ya a gusto de cada uno (apretamos “Siguiente”). Nos dará un resumen de la instalación y apretamos “Instalar” o “Siguiente” y procederá a instalarse. Momentos después el programa queda instalado en nuestro PC y nos sale la pantalla de si queremos ejecutarlo, con lo que damos a “Terminar” y nos abrirá el programa.

N|vu y creación del site

Una vez ejecutado el programa, nos saldrá el siguiente diálogo…

No tengáis miedo, puesto que sólo esta pidiendo si puede enviar con vuestro PC un PING (“llamada”) a el computador de N|vu para aumentar un contador de los usuarios que usan N|vu. Eso a gusto de cada uno, pero yo prefiero darle a cancelar… cosas mías.

Al desaparecer, nos aparecerán los consejos del día. Desmarcamos el Checkbox de “Mostrar al Inicio” y nos saldrá la interfaz del N|vu ya en perfecto castellano. (click para agrandar)

GUI

Vemos que en recuadro grande podemos escribir lo que nos apetezca como si de un editor de texto se tratase. Ahora escribiremos lo relativo a nuestro First Paper. Después de maquetarlo cada uno al gusto, quedará algo parecido a lo siguiente…

INDEX

Ahora, es evidente que, al no tener nada que hacer link, no podemos hacerlos, pero todo a su tiempo. Ahora guardaremos como primer paso esta web. Para guardar, vamos a “Archivo” —-> “Guardar Como” y nos saldrá un dialogo pidiéndonos el título de la web, que cada uno pondrá el que le apetezca (y que a ser posible, tenga algo que ver con la asignatura ^_^U ). Aceptamos y nos saldrá el archiconocido dialogo de “Guardar Como…” que todo programa tiene. Ahora en “Mis Documentos” o en “Escritorio” o dónde cada uno guarde sus cosas en su ordenador, deberemos crear una carpeta nueva (que llamareis como queráis) para guardar TODO ahí. Para crear una carpeta desde aquí (en Windows XP) se hace así…

Save As

Nos saldrá una carpeta nueva llamada “Nueva Carpeta” (como es lógico) y ahora la llamaremos como queramos… por ejemplo, “NarrativaSite”. Le damos a Intro para confirmar el nombre, y ahora entramos dentro de dicha carpeta y guardamos como INDEX.html o INDEX.htm (indistinto, pero TODO EN MINÚSCULA)

Ahora, debemos ir con nuestro explorador de archivos a la carpeta recién creada y dentro, crear una carpeta que se llame “images” (ponedle ese nombre mejor y así no nos liamos, y en minúscula). En dicha carpeta guardaremos las imágenes que nos interesarán para nuestra web, como el fondo o las distintas que queramos vincular al index o a nuestros Papers. Como ejemplo, deberemos ir a la web de Forés y guardar el fondo (eso se da con botón derecho y guardar fondo). Deberemos guardar dicho fondo en nuestra carpeta “images”, con lo que se nos quedará así…

Fondo Win

Ahora, en N|vu pondremos el fondo al Index. Vamos a “Formato” —-> “Colores y Fondo de la página”. Se nos abrirá una ventana…

FondoColores

… en la que vemos que nos pide una imagen de fondo abajo. Le damos a elegir archivo y procedemos a buscar el fondo de UVPress de nuestra carpeta “images”. Una vez seleccionado, se nos quedará así…

Fondo Colores 2

Vemos que se nos a generado una vista previa ya con el fondo. ¡¡MUY IMPORTANTE!! Dejar marcado el checkbox de “La URL es relativa a la dirección de la página” si no el fondo no funcionará (y nos pasará lo mismo que con Word). Aceptamos y ¡voilá! ¡¡Tenemos el fondo!!.

Index

Procedamos a crear el first paper (el second se creará igual…).

Creación del First Paper

Para comenzar a crear nuestro primer Paper, le debemos dar al botón de “Nuevo” que hay en la parte superior izquierda y nos creará una web como antes, es decir, como en el principio: vacía. Ahora deberemos ir a la web dónde el profesor nos puso el qué copiar del first paper. Pues en efecto, copiamos todo el texto y lo pegamos dentro de nuestro nuevo documento en blanco. Nos quedará algo así…

Sin Maquetar

Veremos que no está maquetado, no tiene el estilo de la web original. Ahora deberemos cambiarle el diseño, centrar el First Paper y todo como está en el original. Una vez echo eso, pondremos el fondo como explicamos antes. El estilo se cambia con los botones siguientes…

Botonera

La primera A, hace la letra mas pequeña, la segunda A es para hacerla mas grande. B es para negrita, I para cursiva y la U para subrayado. Los otros cuatro botones son para alinear texto según la forma del dibujito. Con esto y lo que hemos aprendido anteriormente (lo del fondo, vamos) podremos dejar el texto tal cual lo vimos en la web…

First Paper Completo

Guardamos la web en el mismo lugar del index. Como antes ahora nos pedirá un título (First Paper) y la guardamos como firstpaper.htm o firstpaper.html (en minúscula, recordad).

CREACIÓN DE LINKS

Ahora, nos faltará simplemente hacer que la primera página (index) tenga un link a el First Paper (y una vez sepamos, ¿por que no poner un link de Index en el First Paper?). La abrimos (la primera pagina, por supuesto) y seleccionamos el texto FIRST PAPER y hacemos click en el botón señalado…

Linkar 1

Nos saldrá la siguiente ventana…

Prop Enlace

Le damos a “Elegir Archivo” y seleccionamos “firstpaper”. Aceptamos de nuevo y nos saldrá ya de la siguiente manera…

LINKADO

Ya tenemos el link puesto y listo para funcionar.

INSERCIÓN DE IMÁGENES

Ahora, insertaremos una imagen que o bien es nuestra, o bien hemos visto por ahí. Por ejemplo, esta imagen. Deberemos guardarla en nuestra carpeta “images” creada anteriormente, para evitar complicaciones. Una vez la tenemos en la carpeta, procederemos a insertarla haciendo CLICK dónde indica la imagen…

img1

… damos click y nos sale otra ventana…

Propima

Ahora, le damos a “Elegir Archivo y cargamos la imagen guardada”… aceptamos y nos saldrá la ventana otra vez con la ubicación así…

IMG2

Será mejor que marquemos la opción de “No usar texto alternativo”, y aceptamos (también dejar el resto de pestañas como están…) . Nos saldrá la imagen ya puesta en el documento (en el lugar que hayamos puesto el cursor)…

ConIMG

Ahora, presionamos al botón guardar y ya tenemos la web lista para subir a nuestro “mural”. Tendremos entonces 2 archivos htm/html y una carpeta con dos imágenes (Sólo para éste ejemplo… vuestra web ya podrá tener todo lo que queráis…)

PUBLICACIÓN DE LA WEB

Ahora debemos loguearnos en la web http://correo.uv.es y darle a “Explorador de Ficheros”. Si no está activado deberéis activarlo tal y como se explicó en clase (o leyendo un poco…). Ahora, el explorador web saldrá así…

web1

Clicamos en WEB y nos aparecerá un index.htm/index.html el cual podremos borrar (si y sólo si es nuestra primera publicación.. si no deberemos arreglar cada uno ese problema… yo ahí no entro). Ahora en web, pulsaremos en Examinar, seleccionamos el “index” y le damos a cargar. Nos aparecerá ya en la pantalla. Ahora, haremos lo mismo con el “firspaper”. Ahora ya tenemos los dos archivos subidos.

web2

Necesitamos subir las imágenes… para ello crearemos una carpeta en nuestro espacio con lo que os señalo a continuación…

Diálogo 1

… y ponemos EL MISMO NOMBRE EXÁCTO de la carpeta que creamos en nuestro disco duro, es decir “images” (por supuesto, sin comillas)… y le damos a “Crear”. Acto seguido ya nos aparecerá la carpeta “images” creada. Hacemos clic en ella y entraremos a una carpeta vacía dónde deberán ir nuestras imagenes. Para ello las subimos de la misma manera que hemos subido los otros documentos.

¡¡YA TENEMOS LA WEB LISTA PARA QUE TODO EL MUNDO DISFRUTE DE ELLA!!

Os dejo el ejemplo que hice para este tutorial. Por favor, si leeis el tutorial dejad un comentario.. y si teneis dudas, también 😉 Pero espero que no, puesto que lo expliqué lo mejor posible 😉

http://mural.uv.es/gullon/tutorial/

© Raül M. Gullón (2008)


Actions

Information



Leave a comment

You must be logged in to post a comment