CREACIÓN DE UNA PÁGINA WEB CON WEBNODE

Este es un pequeño tutorial muy sencillo que sólo pretende enseñar cómo hacer una web y algunas nociones básicas de funcionamiento. Por supuesto existen más funciones como insertar presentaciones, documentos... que si te interesan puedes preguntar. Como tarea de este tutorial puedes intentar crear tu web e insertar algunas entradas que contengan enlaces, imágenes y vídeos. Si te surgen dudas mientras lo haces, no dudes en preguntar al tutor/a y cuando lo tengas, envíalo para que te lo corrija. Si todo va bien, ya podrás empezar con tu web educativa en la que colgar las actividades para tus alumnos/as.



¿Cómo crear una web desde webnode?


Vamos a nuestro navegador ya sea Internet Explored o Mozilla Firefox y escribimos en la barra de direcciones la siguiente dirección http://www.webnode.com,nos saldrá una página como esta. Pulsaremos en Sign up now:

webnode1.png

Ahora, nos crearemos una cuenta. Lo primero es elegir el nombre de nuestro Proyecto, es importante elegirlo bien porque luego, la dirección de nuestra web y que daremos a todo el mundo será http://NOMBRE_ELEGIDO.webnode.com. El nombre lo introduciremos en Project Adress, introduciremos también una dirección de correo y una contraseña (no tiene que ser la misma del correo).
webnode2.png

Ahora deberemos ir a nuestro correo y aceptar el enlace que nos llega.
webnode3.png

Al aceptar el enlace, iremos a otra pantalla donde pulsaremos en Start here
webnode4.png

En la siguiente pantalla, pondremos un slogan que aparecerá en la cabecera de nuestra web y elegiremos también el idioma de la web. Pulsamos Next
webnode5.png

Ahora elegiremos una plantilla para la web de entre las que nos ofrece. Esta plantilla puede cambiarse más adelante si queremos.

webnode6.png

Por último, webnode, nos ofrece la posibilidad de crear por nosotros algunas páginas. La mejor opción, sin embargo, es borrar todas las páginas y luego crear sólo las que nos interesen.
webnode7.png

Pulsaremos Finish para terminar y ya tenemos nuestra web, si vamos a la dirección http://NOMBRE_ELEGIDO.webnode.com veremos nuestra primera web, vacía, eso sí.
webnode8.png


¿Cómo volver a acceder a nuestra página para modificarla?


En el navegador teclearemos la dirección de nuestra página pero terminada en /login, por ejemplo http://matematicasiesbi.webnode.com/login. Accederemos a una página en la que debemos introducir la dirección de correo y contraseña con la que nos registramos.
webnode10.png

Accederemos a una nueva pantalla en la que pulsaremos Design website
webnode11.png

Y ahora pulsaremos en Website editor
webnode12.png

Llegaremos a una pantalla en la que veremos nuestra web pero con un menú de edición que nos permitirá modificar la web a nuestro gusto
webnode13.png


¿Cómo modificar el contenido de nuestra página?


Si nos fijamos en la ventana donde aparece el texto, veremos que aparece la opción "Edit content", esa será la opción que tendremos que pulsar cada vez que queramos modificar una parte de la web.
webnode20.png

Nos aparecerá una nueva ventana con una barra de editor de textos. Podremos modificar todo el texto de la web y también el título de la ventana. Mediante la barra de edición podremos cambiar el color del texto, tamaño de la letra (style), alineación, etc

webnode21.png
Muy importante: Cuando terminemos los cambios debemos pulsar en Save and close y después en Publish
webnode22.png
webnode23.png


¿Cómo crear más páginas en nuestro sitio web?


Precisamente una de las ventajas de una web frente a un blog, es la posibilidad de que contenga varias páginas que formen una estructura de árbol, es decir, cuelguen unas de otras. Eso nos puede servir para ordenar recursos para un curso completo en nuestra web.

Para crear una nueva página pulsaremos en el botón New page del editor.
webnode30.png

Nos aparecerá una nueva ventana en la que pondremos el nombre de la página y, muy importante, cuál es la página de la que queremos que cuelgue. Las primeras páginas tendrán que colgar de la página Inicio que es la de presentación, pero las siguientes podrán ir colgando de las nuevas que vayamos creando. En nuestro ejemplo crearemos una página "Tema 1. Enteros" y otra "Tema 2. Fracciones" que colgarán de Inicio y después una nueva página "Operaciones con enteros" que colgará de la del Tema 1. Elegiremos blank page, si queremos una página en blanco. No hay que olvidar pulsar sobre Publish cada vez que hagamos un cambio.
webnode31.png

webnode33.png

Lo interesante es que se irá creando sólo un menú de todas las páginas disponibles. La posición de este menú podrá cambiar en función de la plantilla escogida.

webnode34.png

webnode35.png


¿Cómo insertar enlaces?


Si usamos la webcon fines educativos, seguramente necesitaremos colocar enlaces que dirijan a nuestros alumnos/as hacia los recursos en los que queremos que trabajen. Es muy sencillo, escribiremos la palabra sobre la que queremos que esté el enlace, la marcaremos con el ratón y pulsaremos sobre el botón de enlace del editor.
webnode40.png

Se nos abrirá una nueva ventana donde pegaremos la dirección web a la que dirijirá nuestro enlace.
webnode41.png


¿Cómo insertar imágenes en nuestras páginas?


En primer lugar hay que saber que las fotos de Internet pueden grabarse en el disco duro del ordenador, para ello sólo hay que pulsar el botón derecho del ratón sobre la imagen y pulsar sobre "Grabar imagen como" o "Save image as"

Image:Grabar_imagen1.jpg
Image:Grabar_imagen1.jpg



Ahora iremos como siempre al editor de la página mediante Edit content y pulsaremos sobre el icono de "Añadir imagen"

webnode50.png

Se nos abrirá una nueva ventana en la que pulsaremos "Upload images"
webnode51.png

Pulsando en Browse buscaremos la imagen en nuestro equipo. Podemos pulsar browse varias veces para subir más de una imagen. Una vez elegidas todas las imágenes pulsamos en Upload.
webnode52.png

Para insertar la imagen haremos clic sobre ella, pero antes conviene ajustarle el tamaño, para eso elegiremos propiedades en el menú de la imagen.
webnode54.png

En el ancho (width) elegiremos entre 500 y 600, el alto se pondrá automático. Después pulsaremos Resize y después save.
webnode55.png


Ahora ya, sí que podemos hacer clic sobre la imagen y aparecerá sobre nuestra página. No olvidar pulsar sobre Save y Publish.
webnode53.png
webnode57.png

¿Cómo insertar un vídeo de youtube en la web?

Una vez elegido el vídeo en youtube, si nos fijamos, veremos en el lado derecho de la ventana un código que pone "incrustar" o "embed", según la versión que tengamos en español o inglés. Copiaremos ese código marcándolo y pulsando Ctrl+C
tube.png
tube.png


Como siempre, iremos a nuestra ventana y pincharemos en Edit content. Después, en el menú pulsaremos sobre el icono de la televisión.
webnode61.png

Nos aparecerá una ventana en la que pegaremos el código que hemos copiado en youtube pulsando Ctrl+V.
webnode62.png

Si pulsamos en Insert, y como siempre, Save and close y Publish, veremos el vídeo en nuestra página.
webnode64.png


Otras opciones

Las páginas de webnode pueden completarse con foros, encuestas, galerías de fotos... En los siguientes vídeos podrás ver cómo incluir algunas de estas herramientas de forma muy sencilla.

Vídeo 1: Introducción de encuestas, mapas, etc
Vídeo 2: Trabajando con imágenes