lunes, 27 de marzo de 2017

Herramientas para la creación de Páginas Web

En esta práctica hemos usado Bootstrap para descargar una plantilla de una página web. Después de subir todos los archivos necesarios a Hostinger, editamos la plantilla para que encaje un poco mejor con el estilo del blog.
Por último, he añadido el enlace al blog para poder acceder a esta fácilmente.

miércoles, 22 de marzo de 2017

Herramientas de audio y vídeo

Aquí os dejo el enlace para descargaros la práctica que hemos presentado:


En el lateral y el final del blog podéis ver como queda el vídeo de YouTube y el audio de Soundation.


miércoles, 15 de marzo de 2017

Modificar la web con un archivo JavaScript

Esta semana hemos hecho más cambios en nuestra página web con JavaScript. Hemos creado un archivo con la extensión .js, con el que conseguiremos crear funciones para nuestra página.


Después solo tendremos que hacer unas modificaciones en nuestro archivo html para que llame y use el archivo js y así es como conseguimos diferentes botones e interacciones con nuestra página.


Estos son algunos de los resultados:

lunes, 6 de marzo de 2017

Usando JavaScript

En la práctica de esta semana vamos a jugar con nuestra web usando JavaScript.

Primero hemos creado un nuevo estilo en CSS, en este caso he cambiado los colores originales. Después de subirlo a Hostinger, añadimos el código para añadir un botón que lo cambie y otro que vuelva al anterior.


Además, usando la función window.alert(), creamos una alerta que salte cuando pulses otro botón.






miércoles, 1 de marzo de 2017

Dibujar en CSS

Sasha Tran es una diseñadora web que, a falta de talento de dibujo, probó a dibujar en código CSS. En este link cuenta su experiencia. A base de retos fue probando diferentes estilos, con más dificultad cada vez, y los resultados son geniales.



Las imágenes os redirigen a la página de la autora. Si pincháis en "Fork" podéis ver el código de los gráficos. Os recomiendo echarle un vistazo porque es muy original. 

lunes, 27 de febrero de 2017

Usando hojas de estilos en CSS

Esta semana hemos creado nuestro propio sitio web usando un hosting gratiuto como es Hostinger y hojas de estilo CSS.
Como ya teníamos una página de prueba subida al Campus, solo he hecho algunas modificaciones. Para crear la página necesitamos un código HTML y uno CSS, con el contenido y la apariencia respectivamente. El código HTML lo he personalizado con el nombre del blog y algunas referencias a El principito, además de añadir un enlace a este blog y a mi perfil de Google +.


En la hoja de estilo he cambiado los colores del fondo (para seleccionar los colores en hexadecimal he usado color-hex), la fuente de letra y algunos tamaños de los márgenes. Una vez que hemos realizado todos los cambios lo hemos subido a un sub dominio de Hostinger y hemos comprobado que todo se visualizase bien.

Este es el resultado final (puedes acceder a la página haciendo click en la imagen):


lunes, 20 de febrero de 2017

Modificando el blog con HTML

Para empezar con el HTML, he cambiado un par de cosas del título del blog. La primera, poner una fuente de Google Fonts que no estaba disponible en la personalización de la plantilla.

Tendremos que copiar el código de la fuente, en mi caso
<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"> 
debajo de la etiqueta <head> y cerrarlo con el código type='text/css'/


Después de guardar esta, iremos a Plantilla - Personalizar - Avanzado - Añadir CSS y pegaremos el código, en mi caso:
h3.

post-title {
  font-family: ‘Amatic SC’;
}
Con eso terminaría la primera modificación. Además, quería ponerlo en el centro, así que debajo de la etiqueta <head> y encima de lo que acabamos de hacer, pegamos el siguiente código.
<style>
h1{
text-align: center;
  }
</style>
El resultado queda como podéis ver en la cabecera, creo que queda muy bien con el resto del blog.



Fuente:
Euroresidentes