domingo, 23 de abril de 2017

MOBINCUBE... crea tu propia APP

¡Buenas tardes diseñoadictos!


En esta nueva entrega os voy a hablar sobre Mobincube, una herramienta muy útil para la creación de un medio de comunicación muy extendido entre los usuarios actuales; las aplicaciones móviles.

Mobincube es considerada la mejor herramienta desde la que podremos crear app de cualquier tipo, de manera gratuita; o bien, si deseamos un mayor número de ventajas, Mobincube dispone de unas tarifas mensuales bastante económicas.


Una de las ventajas de esta herramienta es que le ofrece al usuario la opción de crear la app desde una plantilla pre-diseñada, o crearla desde cero para una mayor personalización. Además, una vez creada la app Mobincube ofrece una dirección URL y un Código QR, para hacer mucho más fácil la descarga a los usuarios.
Por último, decirnos para aquellos que estáis interesados en el tema. Mobincube ofrece unos seminarios en los que un responsable de la empresa comenta todas las dudas que tengan los usuarios.

Aquí os dejo el enlace para que podáis echarle un vistazo:

https://www.mobincube.com/es/  

En el lateral derecho del blog podréis ver el código QR de mi app.

lunes, 10 de abril de 2017

Pidoco

¡Buenas tardes diseñoadictos!

Hoy os traigo una herramienta muy interesante para aquellos interesados en el diseño de interfaces gráficas. Algunos os preguntaréis que es una interfaz gráfica, pues bien es la parte del programa que facilita la comunicación entre dicho programa y el usuario. Es decir, todo lo que aparece en nuestra pantalla cuando por ejemplo visitamos una página web.

En esta entrada utilizaremos lo que actualmente llamamos Mockup. Se trata de fotomontajes que permiten a los diseñadores gráficos, web e industriales mostrar al cliente cómo quedarán sus diseños. A través, de estas herramientas podremos crear magníficos escenarios digitales.

Existen bastantes herramientas de este tipo, pero en este caso emplearemos: PIDOCO.
Aquí tenéis el enlace para acceder al Pidoco (https://pidoco.com/en).

Estos son los sencillos pasos que deberéis seguir para emplear crear vuestra interfaz gráfica.

1.      Una vez que estáis en la página web de Pidoco, el primer paso es registrarse gratuitamente en (Sign up)


2.      Posteriormente escogemos el tamaño de la pantalla que vamos a utilizar. En este caso utilizaremos; Desktop Web (1366x768)


3.      Ya obtenemos la pantalla principal, desde donde daremos forma a nuestra interfaz gráfica simplemente arrastrando los elementos de la barra de la izquierda.


4.      Si queréis enlazarlo a vuestro blog simplemente tendréis que hacer click como podéis observar en la imagen.



Ya no hay más pasos, ahora estáis solos con vuestra imaginación. Espero que disfrutéis con la herramienta. Este es mi resultado.


lunes, 27 de marzo de 2017

Diseña tus propios vídeos y disfruta de tus propias melodías...

¡Buenas tardes de nuevo diseñoadictos¡

Como os he comentado en la anterior entrada, os quería hablar sobre varios temas. En esta entrada os hablaré de los dos temas restantes.

Se trata de dos herramientas para la edición y creación de vídeos por una parte (Youtube). Y Soundatión para la edición y creación de audio. Son dos herramientas bastante prácticas, ya que podremos realizar todo el proceso online, sin necesidad de descargas ni nada de ese tipo.

Es indispensable que dispongamos o en su defecto creemos una cuenta Google, para poder acceder en ambas herramientas.

1.   Para iniciar el proceso en Youtube debemos hacer click en el botón de “Creator Studio”, como se muestra en la imagen.

De ahí se abrirá la siguiente pantalla, donde haremos click en “CREAR”. Posteriormente “Editor de vídeos”.

Nuestro vídeo será tan personal como deseemos, ya que podremos incluir texto, filtros, …

2.   Por otra parte, en Soundation, con nuesta cuenta Google crearemos una nueva cuenta para tener acceso. Para ello, haremos click en “Sing Up” y elegimos la cuenta "FREE" (gratis).


Posteriormente haremos click sobre “STUDIO”, para poder acceder al editor de audio. Una vez en el editor de audio, podremos combinar tantos sonidos como deseemos para crear infinitas melodías. 
Podeis observar los resultados de mi video editado en Youtube en la parte inferior del blog. Y los resultados de mi melodía en la columna de la derecha del blog.

Bootstrap

¡Buenas tardes diseñoadictos¡

Hace días que no os escribo, ya que he estado preparando unos temas bastante interesantes sobre los que hablaros.
En esta primera entrada de hoy, hablaremos sobre Bootstrap. Os preguntareis de que se trata. Pues bien, se trata de una herramienta con la que crear interfaces web con CSS y JavaScript. Tiene la peculiaridad de adoptar la interfaz del sitio web al tamaño del dispositivo en el que se visualice.
Si seguís los siguientes pasos, podréis comprobar la funcionalidad de esta herramienta.
1.   Acceder a la página web de Bootstratp. Este es el enlace:
2.   Doble click en “Download Bootstrap”.
3.   Nos redirige a una nueva página en la que volvemos a dar doble click en “Download Boortstrap”.
4.   Posteriormente obtenemos un archivo zip. El cual debemos descomprimir y obtendremos tres carpetas:
a.   Css
b.   Font
c.    Js
5.   Sin movernos de la página en la que estamos, hacemos click en la parte derecha “Examples”.  A continuación, nos muestra unas series de páginas predefinidas entre las que elegiremos una. En mi caso elijo esta:

6.   Click derecho sobre la plantilla escogida. Posteriormente “Guardar como”. La guardamos dentro de la carpeta descargada anteriormente.
a.   Tipo: Página web (completa)
7.   En mi caso, voy a incrustar una imagen en una de las esferas. Para ello, hacemos click derecho sobre una de ella. Posteriormente “Inspeccionar”.  Con ello aparecerá una ventana en la derecha de la pantalla, subrayado en azul aparecerá el texto de la esfera.
8.   Volvemos a la carpeta que descargamos en el paso 4. Abrimos la plantilla predefinida que escogimos (la abrimos con bloc de notas). Eliminamos el fragmento que hace referencia a la esfera que seleccionamos en el paso anterior.

9.   Guardamos en la carpeta la imagen que querremos que aparezca en la esfera.
10.Volvemos al bloc de notas (paso 8). En el lugar del fragmento eliminado de la esfera, escribimos (título de nuestra imagen.jpg).


11.Guardamos el archivo. Lo cerramos y lo abrimos con el navegador. Este es mi resultado.

miércoles, 15 de marzo de 2017

más JavaScript...

¡Buenas tardes diseñoadictos¡


Ya que en la última entrada estuvimos hablando sobre JavaScript y realizamos el ejemplo de los botones en una página web, con ayuda de este lenguaje de programación. Hoy vamos a continuar con el mismo tema, pero profundizando aún más.

En el ejemplo anterior; empleábamos dos archivos CSS uno para cada estilo y un archivo HTML en el que incluíamos el script y todas las funciones a realizar. Sin embargo, hoy vamos a realizar un ejemplo bastante parecido al anterior, pero utilizando otro procedimiento.

(El objetivo será sacar todas las funciones del HTML y crear un archivo js (JavaScript) en el que implementaremos todas las funciones, que serán llamadas desde el HTML)

Para ello, debemos seguir los siguientes pasos:

1.   En el bloc de nota, crear un archivo con extensión js. En este caso le llamaremos javascript.js. Como en todos los archivos que hemos creado anteriormente:

a.   Tipo de archivo: TODOS LOS ARCHIVOS
b.   Tipo de configuración: UTF-8

En él copiamos las siguientes funciones (texto de la imagen).

2.   Guardamos el archivo javascript.js en la misma carpeta en la que tenemos los CSS y el HTML.

3.   Posteriormente, debemos llamar a estas funciones desde el HTML. Para ello, copiamos el texto del recuadro, justamente igual que en la imagen.

4.   El último paso es comprobar que funciona. Para comprobarlo doble click izquierdo en el archivo HTML.

Para que podáis apreciar los resultados mejor, pinchad en la pestañita que se encuentra arriba a la izquierda en “Mi Sitio Web”. Ahí se encuentra todos los cambios que hemos realizado durante las últimas entradas.

No lo he dicho en las entradas anteriores, pero si tenéis alguna duda solo tenéis que comentarlo y la resolveremos. Espero que estos ejemplos os hayan ayudado a comprender mejor, que es HTML, CSS, JavaScript,…


En nada nos vemos, ¡disfrutad del fin de semana¡

domingo, 12 de marzo de 2017

JavaScript



¡Buenas tardes de nuevo diseñoadictos¡

No podía irme sin hablarlos sobre un nuevo tema, el cual le dará el toque final a vuestra página web. Se trata del lenguaje de programación JavaScript, el cual usamos para programar el comportamiento de una página web.
Os preguntareis cuáles son sus usos. Estos son algunos de los miles que puede tener:
  • ·        Responder a eventos locales dentro de la página, como pulsar un botón.
  • ·        La realización de cálculos en tiempo real.
  • ·        La validación de formularios dentro de una página.
  • ·        Mostrar mensajes, crear animaciones, etc.

Para que podáis observar con mayor claridad su función, vamos a realizar uno de estos ejemplos para la página web que hemos creado en la entrada anterior. En este caso realizaremos dos botones, de tal manera que si pulsamos uno u otro nuestra página se verá con colores distintos. Para ello seguiremos los siguientes pasos:

1.   Creamos un nuevo archivo en bloc de notas, igual que el archivo “final.css”, creado en la entrada anterior. A este le llamamos “final3.css”, la única diferencia es que debemos cambiarle los colores.

2.   Guardamos el archivo en la carpeta creada en la entrada anterior. Lo guardamos con las mismas características que el archivo “final.css”.

3.   A continuación, abrimos el archivo “index.html”. En él introduciremos la información para crear los botones.
a.   Primero añadiremos un identificador al link del estilo. Irá situado como podéis observar en la imagen.
<link href="final.css" rel="stylesheet" type="text/css" id="estilo">

b.   En segundo lugar, introducimos un script con una función, para realizar el cambio de colores. Copiamos el siguiente texto, al igual que en la imagen.
<script type=”text/javascript” language=”JavaScript”>
function cambio(archivo){
document.getElementById(“estilo”).href= archivo;
}
</script>

c.    Por último, creamos los botones. Podemos crear tantos como deseemos. En este caso, creamos dos, ya que tenemos dos archivos CSS uno para cada estilo de colores. Copiamos y pegamos el siguiente texto como en la imagen.
<button type=”button” oneclick=”cambio(‘final.css’)”>Estilo original!</button>
<button type=”button” oneclick=”cambio(‘final.css’)”>ESTILO NUEVO!</button>


4.   Este es mi resultado:
a.   Estilo original

b.   Estilo nuevo

Tú Sitio Web

¡Buenas tardes diseñoadictos ¡

En las ultimas entradas hemos hablado sobre el lenguaje HTML y las hojas de estilo CSS. Pues bien. En esta entrada vamos a poner en práctica lo anterior, con la ayuda del HTML y CSS vamos a crear nuestra página web. Para ello debemos seguir los siguientes pasos:

1.   Crear una nueva carpeta, para guardar los archivos a crear.

2.   Copiar y pegar (texto de la imagen, desde “body” hasta “}” de la derecha) en el bloc de notas.

3.   Guardarlo en la carpeta creada con:
a.   Nombre: final.css
b.   Tipo de archivo: TODOS LOS ARCHIVOS
c.    Configuración: UTF-8

4.   Nuevo archivo en bloc de notas, copiar y pegar (texto de las dos imagenes).


5.   Guardarlo en la carpeta creada con:
a.   Nombre: index.html
b.   Tipo de archivo: TODOS LOS ARCHIVOS
c.    Configuración: UTF-8

6.   PASO OPCIONAL.  Podréis modificar la página web a vuestro gusto, en el archivo CSS se modifican los colores y en el archivo HTML se modifica el texto. A continuación, os dejo la codificación en CSS de algunos colores, para que los uséis a vuestro gusto.
a.   Salmón à #FE6B7A

b.  Azul à #ADD2F0

c.    Verde à #71DC64

d.   Amarillo à #FFFF00

e.   Rojo à #FF0000

f.     Blanco à #FFFFFF

g.   Negro à #000000

h.   Morado à #CAA8DD

7.   Si dais doble click en el archivo “index.html”, se os abrirá directamente el navegador y aparecerá vuestra página web.

8.   El último paso, es alojar la página en un servidor. En este caso, utilizaremos un hostin gratuito (sólo dura 1 año); Hostinger. Para ello debéis pinchar en el siguiente enlace, en el que se explica paso por paso, como subir nuestra página a Hostinger: