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 mi foto: pocahontas.jpg. Esta es la imagen:


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


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


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.

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:

lunes, 20 de febrero de 2017

Modificación HTML

La variación que hemos realizado con HTML en el Blog han sido el cambio de tipografía y la posición de la cabecera del blog.

  • Cambio de fuente en GoogleFont, ya que la fuente que queríamos no estaba disponible.
  • Cambio de posición en el título, de izquierda a derecha.

Pegamos el enlace y ponemos dónde queremos que esté situado el título (izquierda, derecha o centro):


Enlace:
<link href="https://fonts.googleapis.com/css?family=Chewy" rel="stylesheet">  

Seguido de: type='text/css'/

Debemos añadir en personalizar-avanzados, en Añadir CSS el siguiente código:

h3.

post-title {
  font-family: 'Chewy', cursive;
}

Encima del primer enlace debemos colocar el siguiente código con la posición en la que queremos nuestro título de  blog:
<style>
h1{
 text-align: right;
  }
</style>

Fuentes:
https://www.euroresidentes.com/tecnologia/trucos-diseno-web/como-usar-fuentes-personalizadas-en-tu
https://fonts.google.com