Happy Home: marzo 2017

sábado, 25 de marzo de 2017

Audio y vídeo con YouTube y Soundation

Ambos son gratuitos y bastante fáciles de usar. Tienen infinidad de audios (Soundation) y vídeos (YouTube) y pueden quedar resultados muy atractivos.

Para empezar nos metemos en la página de Soundation y nos registramos con nuestra cuenta de Google+, p. ej. A continuación accedemos a Studio y ahí podremos hacer "magia". Cada persona puede hacer un ritmo-canción totalmente diferente, el mezclar los sonidos es bastante divertido.

Cuando hemos terminado de crear nuestra BSO para el Blog, le damos a Share y copiamos el HTML para colocarlo en un Gadget.

Para crear un vídeo en YouTube tendremos que hacernos una cuenta (nos servirá la de la universidad) y después nos valdrá con editar un par de vídeos. Podemos unir vídeos, colocar música, ponerle transiciones e incluso títulos o letras de las canciones. Lo personalizamos a nuestro gusto.

Para terminar copiamos el código HTML y lo volvemos a pegar a un Gadget.

Los resultados finales podréis verlos al final del Blog y a la derecha de este.

Bootstrap

Vamos a crear una página nueva con HTML, después haremos una pequeña modificación como es subir una imagen.

Para empezar nos descargamos un Bootstrap gratuitamente, a continuación tendremos 3 archivos con los siguientes nombres: CSS, FONTS y JS.

Nos vamos a ejemplos y elegimos la página que más nos guste, yo he elegido esta:

Cuando tengamos guardada la plantilla y elijamos lo que queremos cambiar hacemos click con el derecho e inspeccionamos, esto nos dará el código HTML de lo que posteriormente cambiaremos.

Abrimos la página descargada con Blog de notas y buscamos el código que vamos a cambiar, yo he nombrado a mis foto: 1/2/3.jpg. Estas son las imágenes:

Sustituimos el código por el nuevo nombre de la imagen:

Y ya podríamos ver la modificaicón desde nuestra página web creada en Bootstrap.

Resultado final: Bootstrap-HappyHome

jueves, 16 de marzo de 2017

Archivo JavaScript

Creamos un archivo .js y lo llamamos Javascript, este lo subiremos a Hostinger con lo siguiente:

En el archivo HTML que habíamos subido en las prácticas anteriores, tenemos que colocar los botones correspondientes para las funciones que hemos creado para el JavaScript.

Estas funciones nos abrirán ventanas a los 5 minutos de haber entrado en la página, nos darán la bienvenida e incluso nos saludarán, entre otras funciones. También podemos hacer click en "Hazme click!" y nos redirigirá a la página principal de nuestro blog.

Estos son algunos de los ejemplos.

lunes, 6 de marzo de 2017

Modificando con JavaScript

Anteriormente habíamos creado dos archivos (HTML y CSS) que subiríamos a la cuenta creada en Hostinguer; estos dos archivos crearían un acceso a nuestro espacio personal desde nuestro blog.

A continuación creamos otro archivo CSS que llamaremos final3.css, modificamos los colores* (por ejemplo), aunque podríamos cambiar el estilo de fuente. Cuando hemos subido el archivo a Hostinguer haremos una serie de cambios en el archivo HTML que habíamos subido anteriormente.

Añadimos un identificador al final de <link href="final.css" rel="stylesheet" type="text/css">, solo poniendo: id="estilo"

Colocaremos por encima de <head>:

<script type="text/javascript" language="JavaScript">

function cambio(archivo){

document.getElementById("estilo").href= archivo;

}

</script>

Esto hará que haya una opción que cambia nuestro espacio personal y para ello necesitaremos también "botones" que nos lo indiquen y tendremos que colocarlos justo debajo de la etiqueta <body>

<button type="button" onclick="cambio('final3.css')">¡Cambio de estilo!</button>

<button type="button" onclick="cambio('final.css')">¡Vuelta al inicio!</button>

En nuestro caso se llamarán así, pero podemos personalizarlo a nuestro gusto.

Resultado final:
Inicio:

Cambio:

*http://www.color-hex.com/

viernes, 3 de marzo de 2017

¿Qué se puede hacer con HTML y CSS?

Entre los desarrolladores web no se habla de otra cosa que de HTML y CSS, ya que está de moda.

A continuación veremos unos ejemplos:

1. Hay una aplicación que te permite dibujar lo que quieras en la pantalla.

2. Asteroids es un juego antiguo, y ahora se puede jugar fluido y sin tirones.

3. Se pueden crear animaciones en CSS.

4. Se pueden desarrollar juegos en HTML utilizando CSS.

5. También sirve para juguetear con la dinámica de fluidos.

http://www.culturaweb.com/blog/post/ejemplos-de-que-se-puede-hacer-con-html5-y-css3

Hojas de estilo CSS

En primer lugar nos creamos una cuenta en Hostinger completamente gratuita, creamos un subdominio y seguidamente subimos nuestros archivos HTML y CSS que hemos editado con los cambios que queríamos realizar para nuestro blog.

Cambiamos el nombre de nuestro sitio web, redirigimos el enlace a nuestro blog y cambiamos los colores. Aun así podremos hacer las modificaciones que queramos y como más nos guste, ya sea cambiar el tamaño de letra como el color del encabezado.

Resultado final: