SPUTNIK: marzo 2017

lunes, 27 de marzo de 2017

Bootstrap

Hemos modificado la página Bootstrap, añadiendo una foto propia.

En primer lugar hemos entrado en la página web Bootstrap y hemos descargado todas las plantillas y letras en la página de inicio, posteriormente y tras elegir un diseño hemos descargado el html de ese diseño en particular (botón derecho y guardar)

Después de esto hemos buscado en el código de la página web el nombre de una de las imágenes que aparecen en gris, pulsando el botón derecho y seleccionando "inspeccionar archivo" llegamos al código, copiamos el código de la imagen ya mencionada y en el archivo html descargado buscamos el esta imagen para sustituirla por una imagen de nuestro ordenar.

De esta manera se ve solo desde tu ordenador y tiene que ser visible para todos. Por eso hay que subir el archivo html junto a las carpetas descargadas a hostinger.

El resultado lo puedes ver pulsando aquí

Y también en la parte derecha de la pantalla en sitios de interés.

jueves, 23 de marzo de 2017

Canción y vídeo

Hoy vamos a añadir un vídeo editado por nosotros desde el editor de vídeo de youtube. En primer lugar abrimos un canal de youtube con la cuenta de gmail. Nos metemos en crear vídeo y añadimos imágenes, vídeos y música aceptadas por la política de derechos de autor de youtube.
Para ver los resultados solo tienes que bajar hasta el final del blog.

La segunda parte de la práctica de esta semana es crear tu propia banda sonora con el programa online soundation. Hay que registrarse pero de manera muy sencilla, con google o facebook.
Simplemente hemos creado un hilo musical con los sonidos que tiene la web.

Para comprobar los resultados solo tenéis buscar en la parte derecha del blog la sección de nuestra melodía.

jueves, 16 de marzo de 2017

Javascript II

Esta semana lo hemos tenido un poco complicado para hacer la práctica.

En primer lugar hemos escrito un archivo javascript.js, el código hay que pasarlo a mano y cada línea cumple una función diferente en la página.

Además dentro del código index.html hay que hacer ciertas modificaciones.

De la línea 7 a la 20 el código hace que en la parte de arriba de la página aparezca una palabra, en nuestro caso "Pincha" que parpadea, en rojo y si es pulsada te manda a nuestro querido blog.

La línea 22 muestra la función 2, que está definida en el javascrip.js, esta función lo que hace es mostrar un texto en un cuadro que si se selecciona abre una ventana que permite que pongas tu nombre y abajo pondrá a partir de ahora lo que tu hayas escrito.

Hemos añadido botones nuevos a la página, dos de los ellos (funciones demo) que hemos añadido cambian el título a otro tamaño o color. El tercer botón hace saltar una ventana que saluda a todos los camaradas.

Lo último que hemos añadido es un mensaje que salta a los 5s. después de abrir la página, tiene de nombre función Bienvenidos.

Para ver todos los cambios realizados solo tienes que pulsar aquí.

Hemos tenido problemas con Hostinger, normalmente van todos las funciones nuevas pero de vez en cuando hemos visto que fallan.

miércoles, 8 de marzo de 2017

Window.alert

Hemos creado una ventana de alerta en nuestra página web, de manera muy sencilla.
En primer lugar nos metemos en nuestro dominio de Hostinger, en el archivo index.html y en la parte del <body> metemos en siguiente código:

El resultado es una ventana emergente que sale al pulsar la última tecla (una verdad innegable)

lunes, 6 de marzo de 2017

Javascript

Comenzamos esta semana haciendo un pequeño cambio de imagen a nuestra página web.

En primer lugar haremos otro archivo css con diferentes colores y tipografía. En nuestro caso este archivo se llamará Final2.css y lo subiremos a la parte pública de nuestro subdominio de Hostinger.

Seguidamente añadiremos al archivo index.html la siguiente línea de código, dentro de <head>:

Y también hay que añadir un scrip, también en el <head>:

Con esto podemos hacer que nuestra página cambie su aspecto, pero para ello tendremos que añadir también un botón dentro de la web para que se produzca el cambio y esté a gusto del usuario. El código para dicho botón es el siguiente y se coloca en el <body>:

Observa el resultado final en Información del Sputnik