lunes, 24 de abril de 2017

Mockup con Pidocco


En esta sesión prácticas vamos a realizar un mockup. Un mochup es un modelo a escala real o tamaño real de un diseño o dispositivo, utilizado para la demostración, evaluación del diseño, promoción y para otros fines.

Para diseñar nuestro mockup, que tendrá que estar relacionado con la semana cultural utilizaremos la herramienta Pidocco. Con ella crearemos una interfaz de una página web destinada a la semana cultural .


martes, 28 de marzo de 2017

Herramientas audio y vídeo

En la práctica de herramientas de audio y vídeo se nos proponía trabajar con el editor de vídeo de YouTube y Soundation.

Parte primera, YouTube.
En primer lugar, tenemos que crearnos un canal de YouTube si no lo tenemos.
Una vez creados, nos vamos a la columna izquierda de la pantalla, daremos Clik en Crear, una vez en la pantalla del editor, creamos un vídeo a base de fotos o vídeos proporcionados por el mismo YouTube, en mi caso he añadido vídeos acompañado de un audio.
Una vez conforme con nuestro vídeo , creamos el vídeo y se procesa.
Para poder agregarlo a nuestro blog, le damos a compartir y copiamos el código que se nos proporciona.



La segunda parte de la práctica es con la página Soundation, donde vamos a crear un audio. Al igual que en YouTube, nos creamos una cuenta. Una vez dentro nos vamos a la barra superior de la pantalla y hacemos Clik en Studio, se nos abrirá una ventana de editor de audio, donde podemos añadir sonidos proporcionados por Soundation o añadir audio desde nuestro ordenador. Una vez hecho nuestro clip de audio, nos vamos a File , Publish Track para publicarlo y así poder insertarlo en nuestro blog.




sábado, 18 de marzo de 2017

Funciones en Java Script II

En esta práctica se ha tenido que crear un archivo .js,  javascript.js donde se ha metido todas las funciones de javascript de la página web.
Se ha creado un botón "Cambia Demo" que cambia el color a blanco y el tamaño de la etiqueta "header".
Se ha creado un botón "Cambia Demo1" que cambia el color a negro y el tamaño de la etiqueta "header".
Se ha creado un botón "Alert" que  lanza un mensaje de "Hola Clase".
Se ha creado una función que a los 5 segundos de abrir la página, lanza un mensaje de Bienvenido.
Se ha creado un botón "Mensaje" que lanza un mensaje que nos pide un nombre, Si ponemos un nombre y le damos  "aceptar", nos cambia el texto del párrafo con el id "nombre", bienvenido,por "Hola <<nombre>> como estas hoy?", si le damos "cancelar", nos sigue pidiendo un nombre.

sábado, 11 de marzo de 2017

Funciones en Java Script

La sesión de la práctica 3 trataba de crear un estilo css más para poder jugar con ambos estilos.
Una vez hecho esto, creamos dos botones en nuestra página web, los cuales, tendrán la función de intercambiar los dos estilos existentes según queramos. ¿Cómo hemos hecho esto?
Para hacer esta operación debemos añadir en nuestro index.html un identificador link que nos relaciona nuestro estilo original con el que debe cargar la página, en mi caso sería: <link href="final.css" rel="stylesheet" type="text/css" id="estilo">.
La función de cambiar los estilos se realiza a través de los Script de Java.
Creamos una variable llamada estilo_actual para almacenar el estilo que esta seleccionada en la página, por defecto el estilo original que es el valor 0.
Creamos la función cambio (estilo), la función se encarga de comprobar si el estilo que ha seleccionado el usuario esta ya activo. Si está activo muestra un alert diciendo que ya está activo el estilo, si no eta activo, activo el estilo seleccionado y guarda en la variables estilo_actual el valor del estilo seleccionado.

lunes, 20 de febrero de 2017

Poniendo en práctica lo aprendido

En la clase práctica de hoy, hemos puesto en práctica algunos conocimientos aprendidos durante esta semana. 
En primer lugar, hemos personalizado el fondo del blog. El proceso es el siguiente:

  1. Estando dentro del BackEnd, nos clicamos en PLANTILLA, situado en la columna de la derecha.
  2. Clicamos en PERSONALIZAR→FONDO
  3. Pinchamos en la imagen de fondo. Nos da la opción de poner una  predeterminada ofrecida por blogger o poder subir la imagen que queramos.
Secuencia por foto:




Una vez hecho esto, añadimos un favicon. 
¿Qué es un favicon?
Es icono de página, es una pequeña imagen asociada con una página o sitio web en particular. 
¿Cómo se hace un favicon?
  1. Clicamos en DISEÑO
  2. En la ventana de la derecha nos aparecerá en primer lugar: FAVICON
  3. Clicamos y seguimos las instrucciones que se nos ofrecen.
En tercer lugar, añadimos una lista de los blogs que queremos seguir. Esto se hace a través de un gadget. Lo vemos a través de imágenes como lo hemos hecho.

Una vez hecho esto, pasamos a realizar un cambio en el código html. Mi cambio ha sido el que vemos a continuación:
El cambio realizado ha sido estructurar una lista de definiciones. Para ello el códico utilizado es:
<head><title>En un blog diferenciamos dos interfaces:</title>
  
  </head>
  <body>
    <h3>Interfaces que encontramos en un blog:
      
    </h3>
    <dl>
      <dt>FrontEnd</dt>
      <dd>Es nuestro "escaparate", es decir, lo que nosotros como autor de un blog le enseñamos a nuestro lector. Podríamos decir que es la cara "bonita" del blog.</dd>
      <dt>BackEnd</dt>
      <dd> Es nuestro "taller", sólo puede verlo y gestionarlo el propio autor o autores del blog. Aquí hacemos es donde controlamos todo lo que queremos publicar y cómo lo queremos publicar.</dd>
      
    </dl>
  </body>

En último lugar,creamos un vídeo con html5maker, su resultado fue:

jueves, 16 de febrero de 2017

BLOG

El primer sistema de comunicación multimedia que vamos a ver será el blog.


En primer lugar vamos explicar que es un blog. Un blog es un sitio web donde una persona o varias muestran contenidos de su propio interés, que actualizan con frecuencia y pueden ser comentados por los lectores de su blog.
Podemos definirlo como publicaciones en línea de historias que se actualizan periódicamente, éstas son presentadas en orden cronológico inverso, es decir, lo más reciente que se ha publicado es lo primero que nos aparecerá en pantalla.
Normalmente, los blogs disponen de una lista de enlaces a otros blogs, a páginas para ampliar información, citar fuentes o hacer notar que se continúa con un tema que empezó otro blog .


¿Qué elementos básicos podemos usar para crear nuestro blog?


  • Texto
  • Hipertexto
  • Imagen
  • Gráficos 3D
  • Animaciones
  • Sonido
  • Vídeo
En un blog diferenciamos dos interfaces:

Interfaces que encontramos en un blog:

FrontEnd
Es nuestro "escaparate", es decir, lo que nosotros como autor de un blog le enseñamos a nuestro lector. Podríamos decir que es la cara "bonita" del blog.
BackEnd
Es nuestro "taller", sólo puede verlo y gestionarlo el propio autor o autores del blog. Aquí hacemos es donde controlamos todo lo que queremos publicar y cómo lo queremos publicar.

FrontEnd

En el FrontEnd podemos encontrarnos:
  • Cabecera: Título del blog y/o una imagen de fondo. Cuando el lector hace clic en el enlace se sitúa en la portada o página del blog
  • Entradas del blog: Ordenadas en orden cronológico inverso. Se limita e número de artículos en la página principal, pra acceder a artículos anteriores se proporciona un enlace a "Entradas anteriores".
  • Barra lateral: Incluye gadgest o módulos que integran al blog: búsqueda, artículos por meses, artículos por etiquetas, etc.


Elementos de un artículo

  1. Fecha de publicación
  2. Título
  3. Contenido
  4. Autor
  5. Hora de publicación
  6. Comentarios
  7. Edición (Sólo administrador del blog)
  8. Entradas recientes/posteriores: Estos enlaces de navegación situados al final de una página permiten acceder al resto de artículos.
  9. Página principal: Enlace a la portada del blog
  10. Suscripción

Tipos de blogs

Podemos hacer una clasificación dependiendo de:
  • Su funcionamiento
  • Tipo de contenido predominante
  • Dispositivo donde se visualizará
Tipos: 
  • Openblog: parecido a un foro
  • Fotoblog:el elemnto principal es la foto
  • Videoblog: las entradas son clips de vídeo
  • Audioblog: cada entrada suele ser un audio en formato mp3
  • Moblog: blog orientado a la visualización en móviles o PDA
  • Tumbleblog: variante del blog poco estructurado. La temática suele ser variada, no se centra solo en una.
  • Microblog: permiten publicar mensajes breves no superiores a 140 caracteres.
Podemos disponer de un blog gratuito con los siguientes servicios, son los más conocidos:


martes, 14 de febrero de 2017

Empezando de cero

Para situarnos un poco...

En este blog aprenderemos como comunicarnos a través de medios multimedia, son todos aquellos medios donde podamos transmitir una información a través de imágenes, sonido , vídeos o texto.
Podemos hablar de multimedia interactiva cuando el usuario puede controlar "su imagen" a la hora de transmitir información o de hipermedia  cuando se presentan enlaces sobre el tema tratado.

¿Dónde y cómo podemos aplicar métodos multimedia para COMUNICAR?

  • En el ámbito empresarial 
    • Presentaciones
    • Demos
    • Anuncios
    • Demos de producto
    • Catálogos
    • Correos por voz
    • Vídeo conferencia
    • Móviles, PDA´s, bluetooth
    • Simuladores de procesos, vuelos
    • Etc
  • En el ámbito de la enseñanza
    • Aquí podemos aportar innovación y un beneficio en la educación a la hora de interactuar con los alumnos. Cambiamos el modelo educativo actual de aprendizaje pasivo a un modelo de aprendizaje experimental y activo donde tanto profesor y alumno pueden ser protagonistas.
    • Uso más frecuente: idiomas, disciplinas científicas y técnicas y educación a distancia.
  • En el ámbito doméstico (amplio mercado de electrónica de consumo)
    • Televisión
    • Consolas de videojuegos
    • Reproductores de música
    • Usos más frecuentes: Consulta de materiales de referencia, juegos, comunicación (móvil), control domótico
  • En los servicios públicos: Contienen información visual e impactante, debe ser una interfaz intuitiva para el usuario,  ya que normalmente se utiliza con el objetivo de dar un servicio de información amplio y rápido para atender a la demanda en cualquier momento.
    • Bibliotecas
    • Museos
    • Campus universitarios
    • Centros comerciales
    • Cines
    • Teatros
    • Aeropuertos
    • Etc