1. Instalación y preparación de los ficheros 1.1. Copiar ... de informatica_V5.pdf · clicando...

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 seleccionando la imagen

"D:\tallerUB5\Media\Shakira.jpg"

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.

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.

<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>

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:


Este comando indica que creamos un formulario , y el resultado de la petición se enviara a la página de

youtube.


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"


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.



<div>

<body>

<h1>Búsqueda en Youtube </h1>

<p>Que grupo musical te gusta más?</p>

</body>

<br>



</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.


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


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)



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



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


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)



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


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


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


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


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.

1. Instalación y preparación de los ficheros 1.1. Copiar ... de informatica_V5.pdf · clicando...

Documents

Transcript of 1. Instalación y preparación de los ficheros 1.1. Copiar ... de informatica_V5.pdf · clicando...