-->

Buscar este blog

lunes, 24 de abril de 2017

¡Herramientas para la creación de una APP!

Las Apps son software creado para funcionar en un dispositivo móvil,
En esta práctica vamos a realizar nuestra propia app, sobre un bar, para ello vamos a usar Mobincube, que es una aplicación gratuita. ¡Es muy fácil de usar! podemos partir de plantillas diseñadas o crear nuestro modelo desde una hoja en blanco. Yo he usado una plantilla llamada "The bar" y la he modificado para que se adapte a mis necesidades.
Podemos acceder a ella a través de la URL de descarga y del código QR que se muestra a continuación:

http://mobincube.mobi/HBS54Q 


Espero que os guste este sitio tanto como a mi 😍

martes, 11 de abril de 2017

!Herramientas para el diseño de interfaces gráficas!

¿Qué es la interfaz gráfica? Es la parte del programa que facilita la comunicación entre dicho programa y el usuario de este.
Para desarrollar las diferentes etapas es importante diferenciar entre:
     -   Sketch: boceto en baja calidad
     -   Wireframe: representación estática de baja calidad
     -   Mockup: representación estática de calidad media-alta
     -   Prototipo: representación navegable de calidad media-alta

En esta sesión, vamos a desarrollar Mockup.
¿Qué es Mockup? Son fotomontajes que permiten a los diseñadores gráficos, web e industriales mostrar al cliente cómo quedará sus diseños. a través de ellos podremos generar magnificas atmosferas y escenarios digitales idílicos y propios de los entornos publicitarios más exigentes.

Para llevarlo a la práctica, hay muchísimas herramientas, pero vamos a trabajar con Pidoco ya que es un software online que permite hacer prototipos para diferentes dispositivos (ordenador, tabletas, móviles...), comprobar su funcionamiento y realizar pruebas de usabilidad.
Yo he realizado un diseño para la semana cultural del CUM, aquí dejo el resultado:



lunes, 27 de marzo de 2017

¡Audio y vídeo!

Existen gran variedad de herramientas para crear audio y vídeos, ya sean desde ordenador o dispositivos móviles, de forma gratuita o de pago, online o se necesita descarga e instalación.

En esta práctica hemos creado vídeo con el editor de YouTube. Es muy sencillo:

  • Primero, creamos un canal con nuestra cuenta de Google.
  • Personalizamos nuestro nombre que se va mostrar en el canal
  • Seguidamente, nos iremos a la opción de "crear" para crear nuestro primer vídeo. Tenemos muchas opciones para nuestro vídeo; modificar un vídeo ya subido a nuestro canal, usar vídeos dentro de YouTube con licencia, añadir nuestras propias fotos, editar el audio, las transiciones y, por último, añadir títulos.
  • Cuando el video junto con el audio y las transiciones estén a nuestro gusto, le damos a "crear video". Hay que esperar hasta que YouTube procese el video (tarda un ratito).
  • Por último, le damos a compartir e insertar para copiar el código HTML. Para insertarlo en el blog, podemos crear un gadget y colocarlo en el sitio que más nos guste.

Por otro lado, hemos usado Soundation, es una herramienta online que permite crear o editar un clip de audio. Muy fácil:
  • Lo primero, es registrarnos. Podemos hacerlo con nuestra cuenta Google.
  • Accedemos a "STUDIO", donde nos encontramos con las pistas de audio y sonidos predefinidos. También podemos añadir sonidos desde nuestro ordenador.
  • Vamos jugando con los diferentes sonidos hasta que creemos una melodía que nos guste.
  • Una vez creada la canción, la publicamos (tarda unos minutos en procesarse)
  • Por último, cuando tengamos la canción, le damos a compartir y copiamos el código HTML y lo insertamos en un gadget (al igual que lo hemos hecho con el vídeo)

Yo ya tengo mi vídeo y mi audio, ¿Te gustan?

¡Bootstrap!

Bootstrap es un conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño basado en HTML y CSS, así como extensiones de JavaScript opcionales.
En la práctica hemos conocido Bootstrap y modificado nuestra página web. Los pasos que hemos seguido son los siguientes:

  • Descargar Bootstrap de su página principal. Dentro se encuentras tres carpetas (css,fonts, js)
  • Buscamos ejemplos en la página de Bootstrap, seleccionamos el que más nos guste y guardamos el archivo.html.
  • Seguidamente, podemos modificar el archivo.html, por ejemplo, yo he añadido imágenes y modificado el título.
  • Por último, he subido el archivo .html y .css correspondiente a mi cuenta Hostinger, junto con las imágenes que he añadido a la página web.

¡Cuidado! Tenemos que modificar la dirección del archivo.css en el archivo.html para conseguir que nuestra página tenga el estilo deseado.

Podéis acceder a esta nueva página a través de mi página web, con el nombre de "Página Bootstrap"

miércoles, 15 de marzo de 2017

¡Seguimos con JavaScript!

Esta semana ponemos en práctica nuevas aplicaciones de JavaScript. En la entrada anterior usamos este lenguaje en el archivo.html, y no es del todo correcto, ya que el archivo.html debe de contener la información de la página web, así como los archivos.css los utilizamos para los diferentes estilos para la página. Por este motivo, debemos de crear un archivo.js donde se encontrarán todas las funciones que queremos crear. Este archivo debe de ser mencionado en el archivo.html para que, a la hora de llamar a estas funciones, estas funcionen correctamente en nuestra web.
¿Lo ponemos en práctica? A continuación:
Para que se entienda mejor, pondré las funciones en azul y el uso de las funciones en el archivo.html en rosa
  • Primerio, hacer referencia al archivo javascript que vamos a usar. Por ejemplo:
          <script src="javascript.js"></script> 
  • Cambiar los estilos de nuestra página web:
          //función para cambiar los estilos de nuestra página web
          function cambiarArchivoCss(archivo) {
          document.getElementById("estilo").href=archivo;
          }

          <!--Cambiar el estilo de las páginas-->
          <button type="button" onclick="cambiarArchivoCss('final.css')">¡Original!</button>
          <button type="button" onclick="cambiarArchivoCss('final2.css')">¡Aumenta 10%!</button>
          <button type="button" onclick="cambiarArchivoCss('final3.css')">¡Aumenta 15%!</button>

  • Cambiar el color del "content" en todos los estilos de la página web, usando un botón:
          //función que cambiará el estilo del elemento identificado por "demo" en la página web
          function myFunctiondemo() {
          var x = document.getElementById("content");
  x.style.color = "black";
          }

          <!--Cambiar el color del cuerpo-->
          <button type="button" onclick="myFunctiondemo()">Cambia el color del cuerpo</button>

  • Cambiar el color del "sidebar" en todos los estilos de la página web, usando un botón:
          //función que cambiará el estilo del elemento identificado por "demo" en la página web
          function myFunctiondemo1() {
           var x = document.getElementById("sidebar");
           x.style.color = "black";
          }

          <!--Cambiar el color del menú-->
          <button type="button" onclick="myFunctiondemo1()">Cambia el color del menú</button>

  • Crear una alerta al pulsar el botón de ¡INFORMACION!

          //función que abre una ventana de alerta con el título "Esta página sera actualizada cada semana"
          function myFunctionalert() {
           alert("Esta página será actualizada cada semana");
          }

          <!--Mensaje de alerta, INFORMACION-->
          <button type="button" onclick="myFunctionalert()">¡INFORMACION!</button>

  • Crear una alerta que se iniciará automáticamente a los 5 segundos de que la página sea cargada:
          //función que mostrará un mensaje a los 5 segundos de...
          function Bienvenido(){
          setTimeout("alert('Bienvenid@ a mi página Web, soy Victoria Estévez');",5000);
          }

          <!--Funcion de bienvenida, que se actualiza automaticamente-->
          <body onLoad="Bienvenido();">

  • Crear una función que visualizará un mensaje al introducir un texto en una ventana de alerta, pero esta ventana no podrá ser cerrada hasta que se introduzca el texto:
          //función que visualizará un mensaje, seguirá el mensaje mientras se quiera cerrar y no se introduzca algo
          function myFunction2() {
           var x=document.getElementById("nombre");
           var person=null;
           while (person==null)
           {
           person = window.prompt("Introduce tu nombre", "Nombre y Apellidos");
           if (person != null)
           {
           x.innerHTML="Hola " + person + "! Cómo estás hoy?";
           }
           }
          }

          <!--Funcion de selecionar el texto-->
          Selecciona algo del texto: <input type="text" value="¿Cómo te llamas?" onselect="myFunction2()">
          <p id="nombre">Bienvenido</p>

  • Por último, para poner una llamada de atención para ir directamente al blog:
          <!--Poner texto llamativo para dirigirse al blog-->
          <script type="text/javascript">
          window.setInterval (BlinkIt, 500);
          var color = "red";
          function BlinkIt () {
          var blink = document.getElementById ("blink");
          color = (color == "#ffffff")? "purple" : "#ffffff";
          blink.style.color = color;
          blink.style.fontSize='40px';}
          </script>
          <div id="blink" onclick="parent.location='http://scm-victoriaet2017.blogspot.com.es/'">
          ¡El Blog de Victoria!</div>

¿Queréis ver el resultado? 
Visitar mi Web.

lunes, 6 de marzo de 2017

¡JavaScript!

JavaScript es un lenguaje de programación que se usa para programar el comportamiento de un sitio web. Se trata de un lenguaje interpretado en el cliente por el navegador al momento de cargarse la página, es multiplataforma, orientado a eventos con manejo de objetos.
Un Script es una secuencia de órdenes, en un determinado lenguaje, que puede ser ejecutado por un cliente Web desde su navegador y visualizar el documento en que está contenido. La inclusión de estas secuencias de ordenes en los documentos HTML hace que estos sean más inteligentes. El contenido se genera en forma dinámica, mientras que los valores introducidos en los formularios pueden comprobarse localmente, sin necesitar un servidor ni invertir mucho tiempo en ello.
Podemos decir que JavaScript es simple, ya que no necesitamos amplios conocimientos de programación, es dinámico, respondiendo a eventos en tiempo real y maneja objetos dentro de nuestra página Web y con ello definir diferentes eventos.

Como siempre, ¡hay una parte práctica! Esta semana se trata de crear tantos botones como estilos queremos que tenga nuestra página Web.
En mi caso, he querido modificar los estilos ampliando el tamaño de las letras, pero también se produce una variación de colores en cada estilo. ¿Cómo realizarlo? Muy sencillo:

  • Crearemos tantos archivos con extensión .css como estilos queramos cambiar:
  • Un identificador al link del estilo que usaremos por defecto:
            <link href="final.css" rel="stylesheet" type="text/css" id="estilo">

  • En el head del archivo .html insertamos un script con una función con su nombre:
          <script type="text/javascript" language="JavaScript">
              function cambio(archivo){
                document.getElementById("estilo").href= archivo;
                  }
                    </script>


          • Por último, en el archivo .html añadiremos el botón, que tiene por nombre ¡Aumenta 10%!, y al hacer click llamamos a la función cambio, que lo que hace es pasarle como argumento el nombre del nuevo archivo de estilo .css, en mi caso se llama final2.css
                    <button type="button" onclick="cambio('final2.css')">¡Aumenta 10%!</button>


          ¡Visitar mi página web!
          ¡Tiene sorpresa! 😊

          sábado, 4 de marzo de 2017

          ¡Mi Página WEB!

          Para poder subir mi página web, he utilizado Hostinguer (puedes conseguir un hosting gratuito para que puedas alojar tu página web).
          Consiste en subir un archivo con extensión .HTML y otro en .CSS. En este último podremos modificar el estilo de nuestra Web.
          Yo he realizado diferentes cambios:
          • He usado la tipografía, Century Gothic:
                                         font-family: Century Gothic, sans-serif
          • Para los colores de fondo, he empleado una variedad de lilas con sus correspondientes códigos en hexadecimal. Como por ejemplo el color usado para el fondo del título de la página:
                                         background-color: #BB8FCE

          • Otra modificación, ha sido el tamaño del título y su alineación, en este caso lo he centrado, esto se realiza usando: 
                                         text-align: center;
                                         font-size: 30px;

          • Por último, también cambie el estilo de una pseudoclase usando las mismas indicaciones que aparecen en la entrada anterior.


          Para visitar mi página web, aquí dejo mi dirección: