viernes, 7 de abril de 2017

MOCKUP

En esta semana vamos a ver que es un mockup, esto es un  foto montaje que permite a los diseñadores gráficos y web mostrar al cliente cómo quedaran sus diseños.

El objetivo de esta práctica es crear la interfaz de una página web para la semana cultural, debemos incluir la lista de actividades que se van a realizar, un calendario, etc.

Para ello vamos a usar una web llamada pidoco, una vez registrado, e iniciado un nuevo proyecto nos muestra lo siguiente:


Aquí podemos observar a la izquierda de la imagen la cantidad de herramientas que nos ofrece, y arrastrando esto a la pantalla central, podemos ir colocando las diferentes cosas que queremos que lleve nuestra web en un futuro.
Como la practica consiste en una web para la semana cultural este a sido mi propuesta:


Hasta Pronto!!

Edición de audio y video

Para esta práctica hemos editado un vídeo con youtube el video que podeís ver en la parte inferior del blog, además hemos tenido que crear un audio a través de Soundation, una herramienta online en la wue te premite la edición de audio.
Una vez nos hemos registrado le damos a sound, y empezamos a crear nuestra pista de audio ya sea con pistas que ofrece la herramienta o con pistas propias del ordenador.

Este a sido el resultado final:
audio


Fin.

lunes, 3 de abril de 2017

Bootstrap

¿Qué es  Bootstrap?
Es una herramienta para la creación de paginas web, mas concretamente es un framework originalmente creado por Twitter, que permite crear interfaces web con CSS y JavaScript, cuya particularidad es la de adaptar la interfaz del sitio web al tamaño del dispositivo en que se visualice. Es decir, el sitio web se adapta automáticamente al tamaño de una PC, una Tablet u otro dispositivo. Esta técnica de diseño y desarrollo se conoce como “responsive design” o diseño adaptativo

Bootstrap es modular y consiste esencialmente en una serie de hojas de estilo LESS que implementan la variedad de componentes de la herramienta. Una hoja de estilo llamada bootstrap.less incluye los componentes de las hojas de estilo. Los desarrolladores pueden adaptar el mismo archivo de Bootstrap, seleccionando los componentes que deseen usar en su proyecto.

Los ajustes son posibles en una medida limitada a través de una hoja de estilo de configuración central. Los cambios más profundos son posibles mediante las declaraciones LESS.

El uso del lenguaje de hojas de estilo LESS permite el uso de variables, funciones y operadores, selectores anidados, así como clases mixin.

En la práctica de hoy vamos a crear una web con bootstrap, y realizarle un cambio, como introducir una imagen, es simplemente entrando en la web de bootstrap, descargando los archivos, y copiando una plantilla de las que nos da, y realizando el cambio en esta.

Este es mi resultado final:



Muchas gracias, y hasta la próxima.






1º Práctica de Java Script

Qué es el Java Script¿?

Es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos,3 basado en prototipos, imperativo, débilmente tipado y dinámico.Permite mejoras en la interfaz de usuario y páginas web dinámicas.

El ejercicio de hoy, consiste en hacer un cambio de estilo de nuestra web a traves de este lenguaje, para ello creamos un nuevo documento de .css con distinto nombre, y añadimos una serie de marcadores en nuestro archivo .html.

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

Un script con una función: 
<script type="text/javascript" language="JavaScript">
function cambio(archivo){
document.getElementById("estilo").href= archivo;
}
</script>

Y un boton e el body:
 <button type="button" onclick="cambio('final3.css')">Cambio de estilo!</button>

Con esto conseguimos hacer un cambio dinámico en nuestra web.

Este es el aspecto inicial:

y dando al botón cambio de estilo, cambiamos lo siguiente: