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

lunes, 27 de febrero de 2017

Colores en HTML

Al hacer los cambios en la apariencia de nuestro sitio web debíamos poner los colores con lenguaje hexadecimal por ellos aquí van una serie de páginas que facilitan la selección de un color y su codificación.
 
Particularmente he usado HTML Color Codes  que tiene tanto una tabla de colores:

Como un selector del color:
Pero también encontramos otros sitios como Colores HTML que te ofrece tablas con diversos colores y tonalidades: 


Por poner un último ejemplo tenemos a Virtualnautas que también te ofrece una tabla, pero con menos colores:



Hojas de estilos CSS

Esta semana hemos creado un subdominio gratuito en la página Hostinger y en él una página web que en mi caso da un poquito de información acerca del Sputnik.
Después de registrarnos en Hostinger subimos dos archivos uno html en el que está la información que va a haber en la página web y otro archivo css que sirve para editar la apariencia. Sacamos del campus ambos códigos y procederemos a cambiar tanto el contenido como el aspecto.

HTML:
Este es el código original que copiamos en un bloc de notas.

Tras hacerle varios cambios lo guardamos como pruebapagina.html con codificación UTF-8 y el tipo de archivo "todos los archivos". Cambiamos el contenido escrito, además tenemos que poner un enlace que lleve de nuestro sitio web a nuestro blog: 


Cuando esté subido al subdominio tenemos que cambiar el nombre a index.html

CSS:
También tenemos que editar otro código pero este hay que guardarlo con .css y con las mismas características que el anterior.

En este caso cambiamos la apariencia de nuestra web, cambiando los colores y la tipografía. 

Para aprender un poco más sobre el Sputnik solo tenéis que pulsar a la derecha en la sección de sitios de interés "información del Sputnik" o pinchar en la palabra Sputnik del principio. 

miércoles, 22 de febrero de 2017

HTML

Hemos hecho unos cuantos cambios en nuestro blog con el HTML.

El objetivo es cambiar la tipografía del título y centrarlo. La nueva tipografía no está en blogger, esta pertenece a Google Fonts y es la tipografía Russo One.

El primer paso es coger el código fuente de la tipografía y ponerla en el código HTML del blog.





Para centrar el título utilizamos el siguiente código:



Todo puesto en el código HTML quedaría de la siguiente manera:


Después de guardar hay que ir a la Plantilla-Personalizar-Avanzado-Añadir CSS y se pega el código:


Fuentes:
Euroresidentes