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.

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¡

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:

a.   https://www.youtube.com/watch?v=t7gyZAuqUGQ

Introducción al HTML

!Buenas tardes diseñoadictos¡

En esta segunda entrada a nuestro blog, haremos una pequeña introducción al lenguaje HTML, mediante una modificación de la estética del blog.

Os preguntareis que es el lenguaje HTML. Pues bien, se trata del lenguaje ó código para la elaboración de páginas web. Se considera el lenguaje web más importante, siendo su invención crucial en la aparición, desarrollo y expansión de la (WWW). Además, es el estándar de visualización de páginas web que se ha impuesto y el que todos los navegadores actuales han adoptado.

 En nuestro caso la modificación que realizaremos será la siguiente: 

    

        * Cambio de la posición del título del blog, lo situaremos en el centro. 

(Nuestro blog antes de la modificación)

        

1.  Para ello, debemos copiar el siguiente fragmento de código HTML:                                 <head>
   <!-- modificacion para centrar la cabecera -->
   <style>
   h1 {
   text-align: center;
   }
   </style> 
2. Posteriormente, lo pegaremos en código HTML que conforma nuestro blog, justamente debajo de lo que vallamos a modificar. En nuestro caso, lo situamos debajo de <head> (cabecera) ya que lo que vamos a modificar es el título. 

S

3. Por ultimo ejecutamos el  código para comprobar si los resultados obtenidos son los deseados.

Esto es solo una pequeña pincelada, de las cientos de modificaciones que podríamos realizar. Espero que os haya servido de ayuda. 

!Hasta la próxima¡