1. Instalación y preparación de los ficheros 1.1. Copiar el fichero con

Taller de matemática / informática 2014-2015
Introducción a las programación web
1. Instalación y preparación de los ficheros
1.1.
Copiar el fichero con los programas
copiar el fichero "Taller UB5" desde z:\alumnes\tallerUB\tallerUB5.zip" a "D:\"
1.2.
Extraer el fichero "Taller UB5" con Winzip
Extraer el fichero "TallerUB5" en el repertorio clicando el fichero con el boton derecho y elegir extraer
en "d:/Taller UB5"
luego borrar el fichero tallerUB5.zip
1.3.
Instalar WebPlus Starter Edition
Instalar el fichero WLX5-WebPlus-SE-Installer-EN, y registrarlo.
http://www.serif.com/web-design-software/
2. Intefaz
El programa WebPlus se presenta con la siguiente interfaz:
3. Insertar una imagen
Seleccionar el icono "Image" desde la barra de las herramientas.
Seleccionamos una imagen desde el repertorio "d:\TallerUB5\Media\logoUB.jpg "
Como resultado hemos insertado una imagen en una página web que de momento de llama "Home".
Visualizamos ahora el resultado en nuestro navegador
4. Visualizar el sitio web
Desde el menú superior seleccionar
File->Publish Site->Publish to disk folder
en la zona de texto Output Folder indicar "D:\tallerUB5\"
IMPORTANTE!!! seleccionar "publish all pages" , luego seleccionar ok, y esperar algunos
segundos. una vez terminado aparece una ventana Web Site Publishing
Si clicamos "View website in web browser" aparecerá nuestro sitio web en el navegador Firefox.
Si clicamos "View files in Windows Explorer" aparecerán los ficheros gravados en nuestro disco.
5. Creación de otras páginas del sitio web
Queremos ahora rellenar nuestro sitio web con mas informaciones.
Por ejemplo podemos realizar un sitio web que contenga las páginas de nuestros cantantes favoritos.
clicando en el menú superior
Tools->Site structure
Aparecerá una nueva ventana para gestionar el sitio web
clicando "Insert Page" aparecerá la ventana "page properties"
En esta ventana indicaremos como "Page name", "Mis grupos musicales", con OK la nueva página será
añadida al sitio web
Al interior de la categoría "Mis grupos musicales" queremos crear dos páginas: una dedicada a la
cantante Shakira y la otra al grupo Manel.
IMPORTANTE!!!!, asegurarse que Shakira y Manel sean paginas "hijas" de
la pagina Mis Grupos
musicales".
Para conseguir este objetivo, como primer paso marcamos la casilla "as a child", y luego clicamos
"insert Page".
Es IMPORTANTE que en la parte baja de la ventana, en "Placement" seleccionamos "Mis grupos
musicales" es decir la pagina que hemos creado anteriormente.
La primera vez que añadimos una nueva página indicaremos como "Page Name", "Shakira".
La segunda vez que añadimos una nueva página indicaremos como "Page Name", "Manel".
y este será el resultado:
Clicando "Close" la pestaña de creación del sitio se cerrará.
Si necesario
Si necesario podemos desplazar las paginas bajo otras utilizando los botones que se encuentran abajo
de la ventana
Para navegar entre las paginas, será suficiente hacer doble click en la zona derecha del programa.
6. Rellenar el contenido de las paginas
Seleccionamos como primer paso la pagina de Shakira
Añadiremos una imagen con el icono
"D:\tallerUB5\Media\Shakira.jpg"
seleccionando la imagen
El resultado será el siguiente
Seleccionamos ahora la pagina de Manel haciendo doble click en la parte izquierda del programa
Webplus
Añadimos la imagen "/Media/Manel.jpg"
7. Pagina Master
Seleccionamos en el "Menú de navegación y pagina web" en la zona derecha de la pagina y clicamos en
"Master Pages".
El "Master page" define todas las características comunes a las otras páginas del sitio web.
Por ejemplo usando el icono
podemos definir el texto "MI PAGINA WEB" en la parte alta
de la pagina. Podemos cambiar fácilmente el tamaño de la pagina clicando en el FONT en el menú
superior.
Cuando cambiamos de pagina (por ejemplo seleccionando la página de Shakira) clicando el navegador
de páginas a la derecha, veremos que el texto se ha duplicado en cualquier otra página.
8. Menú Navegación
Volvemos a la "Master page"
Ahora seleccionamos en la barra inferior de las "herramientas" el icono "Navigation Bar"
Elegimos por ejemplo el "block" y posicionamos este elemento en la parte alta de la pagina "Master"
para que sea disponible en cualquier otra página del sitio web.
Visualizamos ahora la pagina web en un navegador.
Volvemos al Punto 4 de este manual y seguimos los pasos para " Visualizar el sitio web"
RECUERDA!!! hay que selectionar "Publish all pages"
el resultado en un navegador es el siguiente:
Es interesante notar que pasando el mouse sobre el menú de navegación negro, en la parte alta de la
pantalla podemos desplazarnos entre las páginas del sitio web. En particular bajo "mis grupos
musicales" aparecen las dos otras pestañas que corresponden a las páginas "Shakira" y "Manel" que
hemos creado.
9. Añadir código HTML
Ahora que somos expertos en crear páginas web de forma visual queremos añadir directamente código
HTML a nuestra página web, para obtener funcionalidades avanzadas.
Como primer paso, necesitamos abrir un editor de texto. Por ejemplo el notepad de windows.
Para abrirlo tenemos que clicar en "Inicio->Aplicaciones de Windows->Notepad".
ATENCION!! puede que el recorrido tenga otro nombre (en catalán).
el programa aparece como una hoja blanca en la cual podemos escribir
Luego, seleccionamos la pagina web "Mis grupos musicales"
Luego, insertaremos una zona de texto HTML clicando en el menú superior del programa
Insert->Web Object->HTML
Aparecerá el código fuente de la pagina.
Podemos por ejemplo copiar el siguiente texto HTML.
En el repertorio "d:\TallerUB5\HTML\ejemplo1.txt" podéis encontrar el código.
<form action="http://www.youtube.com/results">
<div>
<body>
<h1>Busqueda en youtube </h1>
<p>Que grupo musical te gusta mas?</p>
</body>
<br>
<input type="text" name="search_query"/>
<input type="submit" value="Buscar" />
</div>
</form>
SUGERENCIA: Primero copiar el texto en Notepad, y luego pegar el texto en el programa WebPlus.
Clicando el botón "Paste to Body" el texto HTML será insertado en la página web.
Si volvemos al Punto 4 de este manual y seguimos los pasos para " Visualizar el sitio web",
podremos ver el resultado en nuestro navegador.
Es posible ahora acceder a la pagina "Mis grupos favoritos" navegando por medio de la barra de
navegación negra
Aparecerá en la parte baja de la pagina este nuevo texto:
indicando por ejemplo "Shakira" en el espacio de texto vacio, y clicando "Buscar", Se abrirá una nueva
página del navegador en youtube, con los resultados de la búsqueda con palabra clave "Shakira"
Analizamos el texto HTML introducido:
<form action="http://www.youtube.com/results">
Este comando indica que creamos un formulario , y el resultado de la petición se enviara a la página de
youtube.
<input type="text" name="search_query"/>
esta línea de código crea un espacio vacío de texto, dentro el cual se escribirá el texto que queremos
buscar. Ese texto se almacenera en la variable "search_query"
<input type="submit" value="Buscar" />
Finalmente este código crea un botón. Una vez pulsado se envía el contenido del espacio de texto a la
pagina indicada (youtube) y se ejecuta la petición.
10. Estilos y colores de texto
Cada parágrafo de texto de una página web se puede personalizar con estilos tipográficos y con colores.
En la sección anterior hemos aprendido como crear una búsqueda en la página Youtube. El texto
aparecía todo negro. Ahora podemos intentar modificar ese ejemplo añadiendo colores y estilos de
caracteres
El siguiente código HTML, incluye en la parte baja la definición de algunas característica
En el repertorio " d:\TallerUB5\HTML\ejemplo2.txt" podéis encontrar el código.
SUGERENCIA: Primero copiar el texto en Notepad, y luego pegar el texto en el programa WebPlus.
Clicando el botón "Paste to Body" el texto HTML será insertado en la página web.
<form action="http://www.youtube.com/results">
<div>
<body>
<h1>Búsqueda en Youtube </h1>
<p>Que grupo musical te gusta más?</p>
</body>
<br>
<input type="text" name="search_query"/>
<input type="submit" value="Buscar" />
</div>
</form>
<style>
h1 {
color: orange;
text-align: center;
}
p{
color: blue;
font-family: "Times New Roman";
font-size: 20px;
}
</style>
El código delimitado por <style>.... </style> define las características del texto. Por ejemplo las líneas
que siguen h1 definen el titulo <h1>Búsqueda en youtube </h1>. De la misma forma las líneas que
siguen p definen las características de texto de <p>Que grupo musical te gusta más?</p>
si copiamos las nueva líneas en WebPlus y visualizamos el resultado, se obtiene lo siguiente
El primer texto se encuentra ahora centrado y de color amarillo, el segundo de color azul, y de tamaño
de letra 20.
Podemos definir nosotros los colores que nos gustan mas
en lugar que:
color: orange;
podemos escribir por ejemplo:
color: red;
SUGERENCIA: Primero modificar el texto en Notepad, y luego pegar el texto en el programa WebPlus.
Clicando el botón "Paste to Body" el texto HTML será insertado en la página web.
11. paginas dinámicas - JavaScript
Es posible crear funcionalidades avanzadas y paginas dinámicas (con animaciones, y interacciones con el
usuario) usando código Javascript.
En este parágrafo se presentaran algunos ejemplos de funcionalidad que se puede integrar en la página
web creada.
Como primer paso creamos una nueva pestaña de la pagina web en la cual se probarán las aplicaciones
de Javascript.
Indicamos, como
"page Name" -> Javascript
como "placement" elegimos la opción "Child of"
y en el menú desplegable seleccionamos "Mis grupos musicales"
como indicado en figura:
Luego seleccionada la pagina "Javascript"
y insertamos nuevo código HTML como indicado anteriormente
Luego, insertaremos una zona de texto HTML clicando en el menú superior del programa
Insert->Web Object->HTML
A este punto, podemos abrir distintos ejemplos de código JavaScript y ver el resultado en nuestro sitio
web. En el repertorio "D:/tallerUB5/Javascript/" encontrarnos varios ficheros de texto, que podemos
abrir con Notepad y copiar en nuestro navegador.
SUGERENCIA: Primero copiar el texto en Notepad, y luego pegar el texto en el programa
WebPlus.
Se recuerda que una vez copiado el texto podemos clicar el botón "Paste to body", luego "OK" para
integrar el código del notepad en nuestro sitio web.
Si volvemos al Punto 4 de este manual y seguimos los pasos para " Visualizar el sitio web",
podremos ver el resultado en nuestro navegador.
En el menú de arriba seleccionamos la nueva página modificada para que nos aparezca en el navegador
11.1. Localización Geográfica
Si usamos el texto contenido en el fichero "D:/tallerUB5/Javascript/javascript1.txt" y visualizamos el
resultado del sitio web (Punto 4)
el resultado es el siguiente:
nos aparece un mensaje que nos pide de buscar la posición. Una vez clicado, por razones de seguridad
tenemos que permitir de compartir nuestra posición:
como resultado podemos visualizar la posición de la Universitat de Barcelona en el google map
11.2. Ordenar bloques de texto
Si usamos el texto contenido en el fichero "D:/tallerUB5/Javascript/javascript2.txt" y visualizamos el
resultado del sitio web (punto 4) el resultado es el siguiente:
Arrastrando los elementos y cambiando el orden de las casillas se puede reconstruir el orden de la
frase.
11.3. Drag and Drop (ejemplo cesta de compra)
Si usamos el texto contenido en el fichero "D:/tallerUB5/Javascript/javascript3.txt" y visualizamos el
resultado del sitio web (punto 4) el resultado es el siguiente:
Los productos indicados en las categorías arriba, se pueden arrastrar y soltar en la zona de abajo
para añadirlos al carrito de compras.
Las distintas categorías (Móviles, camisetas, zapatos) se pueden abrir clicando con el mouse la
pestaña correspondiente.
El siguiente texto define las categorías de objetos,
modificar el contenido añadiendo categorías o nuevos productos
<div id="products">
<h1 class="ui-widget-header">Productos</h1>
<div id="catalog">
<h2><a href="#">Moviles</a></h2>
<div>
<ul>
<li>Iphone</li>
<li>Samsung Galaxy</li>
<li>Sony Experia</li>
</ul>
</div>
.....
11.4. Calendario
Si usamos el texto contenido en el fichero "D:/tallerUB5/Javascript/javascript4.txt" y visualizamos el
resultado del sitio web (punto 4) el resultado es el siguiente:
Podemos crear un calendario, y seleccionando un día en el menú desplegable arriba, se escribirá en
la casilla abajo el día de la semana, el mes y año que hemos seleccionado.
11.5. Texto que se auto-completa
Si usamos el texto contenido en el fichero "D:/tallerUB5/Javascript/javascript5.txt" y visualizamos el
resultado del sitio web (Punto 4) el resultado es el siguiente:
Escribiendo las primeras letras de un nombre, automáticamente el navegador me sugiere una lista de
nombres que contienen esas letras. Es interesante ver que podemos especificar más que un nombre en
la misma lista.
ATENCION, no todos los nombres están disponibles. Analizando el código Javascript encontramos las
líneas de código siguiente que especifican los posibles nombre de la lista.
var availableTags = [
"HUGO","DANIEL","PABLO","ALEJANDRO"....
];
11.6. Añadir un video (no Youtube)
Si usamos el texto contenido en el fichero "D:/tallerUB5/Javascript/javascript6.txt" y visualizamos el
resultado del sitio web (Punto 4) el resultado es el siguiente:
Como ejercicio, remplazar el video de ejemplo por una canción mp3. Por ejemplo podemos usar la
siguiente:
http://www.tonycuffe.com/mp3/girlwho.mp3
11.7. Añadir un reloj digital
Si usamos el texto contenido en el fichero "D:/tallerUB5/Javascript/javascript7.txt" y visualizamos el
resultado del sitio web (Punto 4) el resultado es el siguiente:
El reloj se actualiza automáticamente y nos enseña la hora actual.
11.8. Añadir una calculadora
Si usamos el texto contenido en el fichero "D:/tallerUB5/Javascript/javascript8.txt" y visualizamos el
resultado del sitio web (Punto 4) el resultado es el siguiente:
La calculadora digital nos permite efectuar cálculos simples tecleando los valores y las operaciones con
el mouse.
11.9. Ventanas "popup" de interaccion con el
usuario
Si usamos el texto contenido en el fichero "D:/tallerUB5/Javascript/javascript9.txt" y visualizamos el
resultado del sitio web (Punto 4) el resultado es el siguiente:
Aparece primero una ventana que nos pide de insertar nuestro nombre. Después de escribir nuestro
nombre y pulsar OK, aparece otra ventana que nos pide un color (EN INGLES):
Si elegimos Rojo (RED en ingles) se escribirá a pantalla una frase del color elegido que contiene
nuestro nombre
11.10.
Juegos
Si usamos el texto contenido en el fichero "D:/tallerUB5/Javascript/javascript10.txt" y visualizamos el
resultado del sitio web (Punto 4) el resultado es el siguiente:
Es un juego en el cual hay un jugador contra el ordenador, el jugador puede posicionar cruces (X) en las
casillas, y luego el turno pasa al ordenador, que posiciona redonditas (O).
El objetivo del juego es posicionar tres cruces adyacentes, antes que el ordenador posicione tres
redonditas adyacentes.
Atención el ordenador es muy inteligente! Podemos ganar o perder :-)
12. Creamos nuestro sitio web
Ahora conocemos algunos elementos de programación HTML y JavaScript. Combinamos estos
elementos para crear nuestro sitio web personalizado.