miércoles, 29 de marzo de 2017

¿YouTube? ¿Soundation?

YouTube es un sitio web dedicado a compartir vídeos. Dispone de una herramienta de edición de vídeos con la que crearemos un vídeo para después subirlo.
En mi caso he usado uno de los filtros, blanco y negro, y he unido varios vídeos con música de fondo. También se encuentra una transición que "provoca" un cambio de ritmo.


Soundation es una página web que contiene una aplicación que nos permite crear nuestras propias canciones a partir de la mezcla de distintos loops.
Jugando un poco he obtenido esta "canción" que pronto estará en el número uno de las listas de éxitos:

Número 1 en listas


¿Bootstrap?

Es un framework que permite crear interfaces web con CSS y JavaScript. Se adapta automáticamente al tamaño de un PC, tablet u otro dispositivo.

Para realizar esta página web nos descargamos un archivo con extensión .html de Bootstrap. Luego elegimos una plantilla predefinida y la guardamos.
Realizamos modificaciones en la plantilla, que en mi caso han sido en imágenes, texto y links.

Página web sin modificar:
 Página web final:
¡Tú mismo puedes comprobarlo! Tienes ya el enlace en el apartado "Páginas".

miércoles, 15 de marzo de 2017

¿Fichero JavaScript?

Nuestra página web tenía códigos script dentro del archivo html. Ahora tenemos los códigos script en otro archivo con extensión .js, de esta forma podremos utilizar el archivo para otras páginas web.

¡Cuidado con el código porque te puedes tirar dos horas para encontrar un fallo!

En el archivo .js se encontrarán diferentes funciones que luego llamaremos desde el archivo .html para que se ejecute en nuestra página web. También se hace una referencia al archivo javascript que se va a usar:

<script src="javascript2.js"></script>

Esta es una de las funciones que encontraremos en el archivo .js:

function myFunctionalert() {
 alert("Hola Clase!");
}

Esta función abre una ventana de alerta en la que pone: "¿Has visto ya mi blog?".
El el archivo html llamaremos a la función con el código:

<button type="button" onclick="myFunctionalert()">Alerta</button>

De esta forma creamos un botón que al hacer click sobre él, se ejecutará la función indicada.
Para el resto de funciones realizaremos el mismo proceso.

Me paro para explicar la función "Horario", la cual nos indica la fecha y hora en la que nos encontramos en el momento de hacer click en el botón "¿Qué día es hoy?", que realizaremos en html de la misma forma que hemos explicado anteriormente. En cuanto al código JavaScript, utilizaremos funciones que podréis encontrar explicadas en la siguiente página: https://norfipc.com/web/como-mostrar-fecha-hora-paginas-web-javascript.html

Si no has entendido muy bien lo que hace la función puedes ir a mi página web y observarlo tú mismo.


lunes, 6 de marzo de 2017

¿JavaScript?

Es un lenguaje de programación interpretado, que usaremos para programar el comportamiento de un sitio web.
Los códigos vienen dados con una etiqueta de inicio (<script>) y otra de fin (</script>).

Antes nuestra página se encontraba con un solo estilo, el original; ahora existen dos estilos más.
¿Cómo se ha realizado?
Creamos diferentes estilos a mayores del original que llamaremos final2.css y final3.css.
Abrimos nuestro archivo html y realizamos los siguientes cambios.
Añadimos un identificador, que en este caso es "estilo".

<link rel="stylesheet" type ="text/css" href="final.css" id="estilo">

El estilo "final.css" será el que saldrá siempre al iniciar la página web.
En el head del index.html añadimos la función "cambio", que tendrá el estilo determinado por la hoja de estilo "final.css". Este código JavaScript tendrá etiquetas de inicio y fin como ya hemos indicado.

<script type="text/javascript" language="JavaScript">
function cambio(){
document.getElementById("estilo").href= "final.css";
}
</script>

Repetimos el proceso y añadimos la función "cambio1" con el estilo determinado por la hoja de estilo "final2.css".

Podemos realizarlo de otra forma. Añadimos una función "cambio2" con un código parecido, añadiendo el término "archivo":

<script type="text/javascript" language="JavaScript">
function cambio3(archivo){
document.getElementById("estilo").href= archivo;
}


</script>

En el body del index.html añadimos unos botones que permiten el cambio de estilo de la página.
Para las funciones "cambio" y "cambio1" se añade este código:

<button type="button" onclick="cambio()">Original</button>
<button type="button" onclick="cambio1()">Sur</button>

Para la función "cambio2" variamos el código anexionando el estilo "final3.css":

<button type="button" onclick="cambio2('final3.css')">Norte</button>

Por último añadimos un botón de alerta debajo del menú, añadiendo este código.

<!DOCTYPE html>
<html>
<body>
<p>Dale aquí y mira esta alerta.</p>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
alert("¡Alerta!");
}
</script>
</body>
</html>

¡Entra en la página web y compruebalo!

lunes, 27 de febrero de 2017

¿Hostinger?

Es un hosting gratuito que nos permite subir nuestra página web, de esta forma la podemos enlazar al blog para que todo el mundo la pueda ver.

En este enlace se explica cómo subir una página web:
https://www.youtube.com/watch?v=t7gyZAuqUGQ

Antes de subir nuestra página web realizaremos unos cambios en el tipo de letra, el fondo, colores...
¿Cómo? 
- Para cambiar los colores se modifica el código del color, precedido por la almohadilla, o simplemente poniendo el nombre del color:     color: #CCCCCC 
                                                     color: red
                                                     background-color: yellow
En este enlace puedes encontrar los códigos de los colores: http://htmlcolorcodes.com/es/

- Para inserretar una imagen de fondo:      background-image: url("imagen.jpg")

- Añadir el enlace a un blog:
<li><a href="http://scm-arantxarr2017.blogspot.com.es/">Mi blog</a></li>