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.