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:

jueves, 2 de marzo de 2017

Hojas de Estilo CSS


¡Buenas tardes diseñoadictos¡ 

Hoy vamos a hablar sobre las hojas de estilo CSS. Tendreís algunas preguntas sobre ellas, las cuales espero que queden resueltas con esta entrada. Allá vamos…


En primer lugar, ¿qué es CSS? Estas siglas significan (CascadingStyleSheets), traducido al Español (Hojas de estilo en cascada).


En segundo lugar, ¿qué es una hoja de estilo?  Es un conjunto de propiedades de formato, más reglas de definición y aplicación.


¿Cuál es la función de estas hojas de estilo CSS? Estas hojas son las encargadas de darles la forma, el color,… a los documentos HTML. Es decir, definen como se van a visualizar los documentos HTML en la pantalla. Permiten definir diferentes estilos para la misma página web o para distintas páginas.