martes, 11 de abril de 2017

¿CREACIÓN DE APPs?

Ahora crear una APP es más fácil que nunca ya que hay muchísimas páginas donde se pueden realizar y ¡sin saber programar! Yo voy a explicar como usar una página  muy sencilla: MOBINCUBE. Lo primero de todo hay que darse de alta en la página : https://www.mobincube.com/es/ . Después de eso hay que elegir entre todas las plantillas que tiene y hay que ponerle nombre a nuestra App.


Hay que rellenar la información de nuestra App, su descripción, el nombre, el idioma y le pondremos un icono. (mejor si es .png )




Lo que vamos a hacer es una App informativa donde habrá una pantalla principal, y habrá iconos donde te llevaran a otras pantallas. Se puede poner una imagen de cabecera, un titulo, cambiar los iconos para las pantallas, cambiar el fondo... Hay muchas posibilidades. Hay un botón en la barra de la derecha donde se puede previsualizar como quedaría nuestra App en un teléfono móvil y también en una tableta.




Una vez acabado todos los detalles de nuestra App le daremos a Previsualización donde solicitaremos la descarga para Android. Nos dará una URL y un código QR donde podremos descargar un archivo .apk que luego nos dejará descargar nuestra App. Habrá que quitar antes la seguridad en las descargas de nuestro dispositivo para que nos deje instalarla correctamente,



A la derecha está un código QR de una APP que hicimos para la semana cultural donde se pueden ver todas las actividades de esa semana, un calendario donde puedes pinchar en el día y saldrá una foto de las actividades de ese día, fotos de otras semanas culturales y también las redes sociales.



martes, 4 de abril de 2017

¿Que es un Mockup? 

La mayoría de ideas fracasan, pero no porque sean malas, sino porque están mal presentadas. Por ello se crearon los Mockups. Se trata de una maqueta digital o modelo a escala real de un diseño o un dispositivo, utilizada para la demostración, evaluación del diseño, promoción y otros fines que abarcan mucho más allá del entorno diseñador gráfico y el cliente.
Estas maquetas digitales generalmente suelen ser archivos en formato para Photoshop y a través de ellos podremos mostrar como crearían nuestras creaciones en el mudo real. Algunos de los mockups que hay online para descargar son:


    -Mockup de escritorio o mesa de trabajo
    -Mockup de interfaces
    -Mockup de un libro
    -Mockup de libros en perspectiva
    -Mockup de publicidad exterior
    -Mockup de revistas y catálogos
    -Mockups de smartphones
    -Mockup de tarjetas de visita


En esta práctica vamos a realizar un Mockup de interfaces para hacer una pagina web para la Semana Cultural del centro. Usaremos PIDOCO que es un recurso online (https://pidoco.com/en) para crear paginas web. Su uso es muy sencilla ya que se arrastran las cosas que quieres insertar en tu web de una pestaña al centro de la pantalla en banco :





Se pueden insertar títulos, textos, fotos, calendarios, iconos, enlaces a webs, botones, tablas... Una vez que has hecho la web como te interesa se te descarga un zip donde estará el código .HTML de lo que has creado. La visualización de mi web sería esta: 




Investigando un poco mas sobre mockups vi una página donde se pueden hacer mockups de todo tipo y sobre todo tipo de objetos y me parece interesante dejar aquí el enlace:


Con esa pagina hice una composición de como quedaría la página que he creado en un ordenador sobre un escritorio: 



lunes, 27 de marzo de 2017

¿HERRAMIENTAS DE VÍDEO Y AUDIO?

Esta practica se ha dividido en dos partes: en una usamos Youtube y en otra Soundation.

Herramienta de Vídeo:

Con Youtube lo que hemos hecho ha sido crear un vídeo con fotos, vídeos, música y texto.
Lo primero es entrar en el Creator Studio de nuestra cuenta de Youtube, y allí le damos a crear y comenzamos con el vídeo.
Podemos poner texto, transiciones, vídeos y fotos que se pueden corregir imperfecciones con filtros y contrastes de luz.., música. Una vez creado se sube al canal ese video y este se´ria el resultado del mío:



Herramienta de Audio:
Con Soundation hemos creado un clip de audio donde hemos metido sonidos predeterminados para crear una pequeña canción. También se puede meter música desde nuestro propio ordenador. Esta es la apariencia que tiene la pagina cuando estamos creando una canción. A la derecha estan los sonidos y a la izquierda los que hemos seleccionado.




Una vez acabada la canción se tiene que publicar, se le pone un título y una foto. La canción que yo hice está en un gadget a la derecha de este post. ¡Escúchala!

Los enlaces para poder esas dos herramientas son:








¿QUÉ ES BOOTSTRAP?

Bootstrap es una web donde se pueden conseguir arhivos .html , .css y .js para desarrollar páginas web. En http://getbootstrap.com/ puedes descargar muchos ejemplos que están subidos para poder crear tu propia pagina web. Es muy sencillo ya que puedes inspeccionar los elementos(fotos, texto..) de esa página web para poderlos encontrar mucho mas rápido en tu .html y cambiarlos.

Yo me he descargado este ejemplo de web y lo que le cambié las fotos:
                                                                             




       ⇒⇒⇒






Luego lo que tuve que hacer fue meter esa nueva página web con todos los archivos que a componen en mi primera página web. En las pestañas donde pone: Home, sobre mi, contacto... añadí una que pone Bootstrap que te redirecciona a la web creada con esta aplicación.
Puedes verla en este enlace : http://miguellopezborrero.esy.es/ o en el gadget que está a la derecha de mi blog.


martes, 14 de marzo de 2017

¿ARCHIVO javascript.js?

En esta sesión practica he creado un archivo con extensión .js donde colocaré las funciones que usaré
en mi web. Lo bueno del  javascript.js es que se podrá usar las funciones en otra pagina web mas rápido al tener ese .js . En el .html  hay que hacer referencia al archivo nuevo  javascript.js que he creado así:

<script src="javascript.js"></script>

Hemos realizado un total de 5 funciones:

- Función para cambiar los estilos de mi web: Cambia el estilo de apariencia de mi web (color,fondo,letra...)

-Función que cambia el "Header" : Cambia el color de letra de la cabecera. Se pone como un botón.

-Función que abre una alerta en mi web: Se pone como un botón y muestra al pulsarse el mensaje "HOLA CLASE!"

-Función de selección: Al seleccionar una parte de texto pide que pongas tu nombre y hasta que no lo pones no se cierra ese mensaje. Luego muestra un mensaje de bienvenido con tu nombre.

-Función que muestra un mensaje a los 5 segundos: Muestra "Bienvenido a esta página" a los 5 segundos de abrir mi web.


Asi es el resultado de mi pagina web con las modificaciones del archivo javascript.js:



lunes, 6 de marzo de 2017

¿COMO HACER CAMBIOS CON JAVASCRIPT?

En la entrada  anterior expliqué que era JavaScript y  creamos un archivo con extensión .css y la enlazábamos al archivo index.html. Con ello hicimos una página web. Lo que haremos ahora es cambiar la apariencia de esa página web añadiendo botones.

Primero añadimos un identificador que llamamos estilo al .html:



Luego  insertamos un script con una función con el nombre que queráis, en mi caso se llama "cambio" y al final, en el body del index.html añadiremos un botón, que lo llamaremos como la función que hará (cambiar estilo) y este llamará al archivo .css especifico: 




Así es como se vería mi web, con los botones para cambiar estilos arriba de la cabecera: 



miércoles, 1 de marzo de 2017

¿Para qué usar JavaScript?

Es un enguaje de programación, que usaremos para programar el comportamiento de un sitio web.

Chrome Experiments, a pesar del nombre, es un sitio dedicado a la difusión de experimentos con tecnologías de punta para navegadores web. Fue lanzado hace unos 18 meses bajo el auspicio de Google, quien recién celebró la llegada del experimento número 100. Por supuesto, JavaScript y HTML5, son las tecnologías más relevantes usadas en el sitio para poner a prueba tus navegadores. En este enlace podeis encontrar la página web y investigar un poco: https://www.chromeexperiments.com/

Un ejemplo de chrome experiments es este GOOGLE GRAVITY, que usa JavaScript