-->

Buscar este blog

lunes, 27 de marzo de 2017

¡Audio y vídeo!

Existen gran variedad de herramientas para crear audio y vídeos, ya sean desde ordenador o dispositivos móviles, de forma gratuita o de pago, online o se necesita descarga e instalación.

En esta práctica hemos creado vídeo con el editor de YouTube. Es muy sencillo:

  • Primero, creamos un canal con nuestra cuenta de Google.
  • Personalizamos nuestro nombre que se va mostrar en el canal
  • Seguidamente, nos iremos a la opción de "crear" para crear nuestro primer vídeo. Tenemos muchas opciones para nuestro vídeo; modificar un vídeo ya subido a nuestro canal, usar vídeos dentro de YouTube con licencia, añadir nuestras propias fotos, editar el audio, las transiciones y, por último, añadir títulos.
  • Cuando el video junto con el audio y las transiciones estén a nuestro gusto, le damos a "crear video". Hay que esperar hasta que YouTube procese el video (tarda un ratito).
  • Por último, le damos a compartir e insertar para copiar el código HTML. Para insertarlo en el blog, podemos crear un gadget y colocarlo en el sitio que más nos guste.

Por otro lado, hemos usado Soundation, es una herramienta online que permite crear o editar un clip de audio. Muy fácil:
  • Lo primero, es registrarnos. Podemos hacerlo con nuestra cuenta Google.
  • Accedemos a "STUDIO", donde nos encontramos con las pistas de audio y sonidos predefinidos. También podemos añadir sonidos desde nuestro ordenador.
  • Vamos jugando con los diferentes sonidos hasta que creemos una melodía que nos guste.
  • Una vez creada la canción, la publicamos (tarda unos minutos en procesarse)
  • Por último, cuando tengamos la canción, le damos a compartir y copiamos el código HTML y lo insertamos en un gadget (al igual que lo hemos hecho con el vídeo)

Yo ya tengo mi vídeo y mi audio, ¿Te gustan?

¡Bootstrap!

Bootstrap es un conjunto de herramientas de código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño basado en HTML y CSS, así como extensiones de JavaScript opcionales.
En la práctica hemos conocido Bootstrap y modificado nuestra página web. Los pasos que hemos seguido son los siguientes:

  • Descargar Bootstrap de su página principal. Dentro se encuentras tres carpetas (css,fonts, js)
  • Buscamos ejemplos en la página de Bootstrap, seleccionamos el que más nos guste y guardamos el archivo.html.
  • Seguidamente, podemos modificar el archivo.html, por ejemplo, yo he añadido imágenes y modificado el título.
  • Por último, he subido el archivo .html y .css correspondiente a mi cuenta Hostinger, junto con las imágenes que he añadido a la página web.

¡Cuidado! Tenemos que modificar la dirección del archivo.css en el archivo.html para conseguir que nuestra página tenga el estilo deseado.

Podéis acceder a esta nueva página a través de mi página web, con el nombre de "Página Bootstrap"

miércoles, 15 de marzo de 2017

¡Seguimos con JavaScript!

Esta semana ponemos en práctica nuevas aplicaciones de JavaScript. En la entrada anterior usamos este lenguaje en el archivo.html, y no es del todo correcto, ya que el archivo.html debe de contener la información de la página web, así como los archivos.css los utilizamos para los diferentes estilos para la página. Por este motivo, debemos de crear un archivo.js donde se encontrarán todas las funciones que queremos crear. Este archivo debe de ser mencionado en el archivo.html para que, a la hora de llamar a estas funciones, estas funcionen correctamente en nuestra web.
¿Lo ponemos en práctica? A continuación:
Para que se entienda mejor, pondré las funciones en azul y el uso de las funciones en el archivo.html en rosa
  • Primerio, hacer referencia al archivo javascript que vamos a usar. Por ejemplo:
          <script src="javascript.js"></script> 
  • Cambiar los estilos de nuestra página web:
          //función para cambiar los estilos de nuestra página web
          function cambiarArchivoCss(archivo) {
          document.getElementById("estilo").href=archivo;
          }

          <!--Cambiar el estilo de las páginas-->
          <button type="button" onclick="cambiarArchivoCss('final.css')">¡Original!</button>
          <button type="button" onclick="cambiarArchivoCss('final2.css')">¡Aumenta 10%!</button>
          <button type="button" onclick="cambiarArchivoCss('final3.css')">¡Aumenta 15%!</button>

  • Cambiar el color del "content" en todos los estilos de la página web, usando un botón:
          //función que cambiará el estilo del elemento identificado por "demo" en la página web
          function myFunctiondemo() {
          var x = document.getElementById("content");
  x.style.color = "black";
          }

          <!--Cambiar el color del cuerpo-->
          <button type="button" onclick="myFunctiondemo()">Cambia el color del cuerpo</button>

  • Cambiar el color del "sidebar" en todos los estilos de la página web, usando un botón:
          //función que cambiará el estilo del elemento identificado por "demo" en la página web
          function myFunctiondemo1() {
           var x = document.getElementById("sidebar");
           x.style.color = "black";
          }

          <!--Cambiar el color del menú-->
          <button type="button" onclick="myFunctiondemo1()">Cambia el color del menú</button>

  • Crear una alerta al pulsar el botón de ¡INFORMACION!

          //función que abre una ventana de alerta con el título "Esta página sera actualizada cada semana"
          function myFunctionalert() {
           alert("Esta página será actualizada cada semana");
          }

          <!--Mensaje de alerta, INFORMACION-->
          <button type="button" onclick="myFunctionalert()">¡INFORMACION!</button>

  • Crear una alerta que se iniciará automáticamente a los 5 segundos de que la página sea cargada:
          //función que mostrará un mensaje a los 5 segundos de...
          function Bienvenido(){
          setTimeout("alert('Bienvenid@ a mi página Web, soy Victoria Estévez');",5000);
          }

          <!--Funcion de bienvenida, que se actualiza automaticamente-->
          <body onLoad="Bienvenido();">

  • Crear una función que visualizará un mensaje al introducir un texto en una ventana de alerta, pero esta ventana no podrá ser cerrada hasta que se introduzca el texto:
          //función que visualizará un mensaje, seguirá el mensaje mientras se quiera cerrar y no se introduzca algo
          function myFunction2() {
           var x=document.getElementById("nombre");
           var person=null;
           while (person==null)
           {
           person = window.prompt("Introduce tu nombre", "Nombre y Apellidos");
           if (person != null)
           {
           x.innerHTML="Hola " + person + "! Cómo estás hoy?";
           }
           }
          }

          <!--Funcion de selecionar el texto-->
          Selecciona algo del texto: <input type="text" value="¿Cómo te llamas?" onselect="myFunction2()">
          <p id="nombre">Bienvenido</p>

  • Por último, para poner una llamada de atención para ir directamente al blog:
          <!--Poner texto llamativo para dirigirse al blog-->
          <script type="text/javascript">
          window.setInterval (BlinkIt, 500);
          var color = "red";
          function BlinkIt () {
          var blink = document.getElementById ("blink");
          color = (color == "#ffffff")? "purple" : "#ffffff";
          blink.style.color = color;
          blink.style.fontSize='40px';}
          </script>
          <div id="blink" onclick="parent.location='http://scm-victoriaet2017.blogspot.com.es/'">
          ¡El Blog de Victoria!</div>

¿Queréis ver el resultado? 
Visitar mi Web.

lunes, 6 de marzo de 2017

¡JavaScript!

JavaScript es un lenguaje de programación que se usa para programar el comportamiento de un sitio web. Se trata de un lenguaje interpretado en el cliente por el navegador al momento de cargarse la página, es multiplataforma, orientado a eventos con manejo de objetos.
Un Script es una secuencia de órdenes, en un determinado lenguaje, que puede ser ejecutado por un cliente Web desde su navegador y visualizar el documento en que está contenido. La inclusión de estas secuencias de ordenes en los documentos HTML hace que estos sean más inteligentes. El contenido se genera en forma dinámica, mientras que los valores introducidos en los formularios pueden comprobarse localmente, sin necesitar un servidor ni invertir mucho tiempo en ello.
Podemos decir que JavaScript es simple, ya que no necesitamos amplios conocimientos de programación, es dinámico, respondiendo a eventos en tiempo real y maneja objetos dentro de nuestra página Web y con ello definir diferentes eventos.

Como siempre, ¡hay una parte práctica! Esta semana se trata de crear tantos botones como estilos queremos que tenga nuestra página Web.
En mi caso, he querido modificar los estilos ampliando el tamaño de las letras, pero también se produce una variación de colores en cada estilo. ¿Cómo realizarlo? Muy sencillo:

  • Crearemos tantos archivos con extensión .css como estilos queramos cambiar:
  • Un identificador al link del estilo que usaremos por defecto:
            <link href="final.css" rel="stylesheet" type="text/css" id="estilo">

  • En el head del archivo .html insertamos un script con una función con su nombre:
          <script type="text/javascript" language="JavaScript">
              function cambio(archivo){
                document.getElementById("estilo").href= archivo;
                  }
                    </script>


          • Por último, en el archivo .html añadiremos el botón, que tiene por nombre ¡Aumenta 10%!, y al hacer click llamamos a la función cambio, que lo que hace es pasarle como argumento el nombre del nuevo archivo de estilo .css, en mi caso se llama final2.css
                    <button type="button" onclick="cambio('final2.css')">¡Aumenta 10%!</button>


          ¡Visitar mi página web!
          ¡Tiene sorpresa! 😊

          sábado, 4 de marzo de 2017

          ¡Mi Página WEB!

          Para poder subir mi página web, he utilizado Hostinguer (puedes conseguir un hosting gratuito para que puedas alojar tu página web).
          Consiste en subir un archivo con extensión .HTML y otro en .CSS. En este último podremos modificar el estilo de nuestra Web.
          Yo he realizado diferentes cambios:
          • He usado la tipografía, Century Gothic:
                                         font-family: Century Gothic, sans-serif
          • Para los colores de fondo, he empleado una variedad de lilas con sus correspondientes códigos en hexadecimal. Como por ejemplo el color usado para el fondo del título de la página:
                                         background-color: #BB8FCE

          • Otra modificación, ha sido el tamaño del título y su alineación, en este caso lo he centrado, esto se realiza usando: 
                                         text-align: center;
                                         font-size: 30px;

          • Por último, también cambie el estilo de una pseudoclase usando las mismas indicaciones que aparecen en la entrada anterior.


          Para visitar mi página web, aquí dejo mi dirección:

          domingo, 26 de febrero de 2017

          ¡Hojas de Estilo-CSS!

          CSS, lo que es igual a "hojas de estilo en cascadas", describe cómo un elemento HTML se va a mostrar en la pantalla, o cómo se va a imprimir, o incluso cómo se va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. 
          Las hojas de estilo es el conjunto de propiedades de formatos, más reglas de definición y aplicaciones. Estas son más potentes y cómodas que el formato en HTML, ya que permite definir diferentes estilos para la misma página web o para distintas páginas. Esto es de gran ayuda para los diseñadores de Webs, porque pueden controlar el estilo y el formato de múltiples páginas Webs al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento
          CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos.
          Una regla de estilo son los componentes de una hoja de estilo, y está formada por: 
          • SELECTOR: que indica las etiquetas a las que se aplica.
            • Basado en el elemento
            • Basado en el contexto del elemento
            • Basado en un identificador o una clase
            • Basado en una pseudoclase
          • DECLARACIÓN: que define el conjunto de pares
            • Hojas de estilos externa
            • Hojas de estilo interna
            • Estilo en línea

          Para entender mejor este tema, lo he puesto en practica: he realizado una modificación en el estilo del selector basado en una pseudoclase. Para referirnos a ella, su vinculo es <a> y tiene diferentes estados:
          • link: no visitado
          • visited: visitado
          • hover: cuando el ratón está sobre el enlace
          • active: el momento en el que se pulsa
          He utilizado una hoja de estilo interna con el siguiente código:



          Como se puede apreciar, el resultado es visible en el blog. 
          ¡Compruébalo!

          martes, 21 de febrero de 2017

          ¡ Conoce HTLM 5 !

          HTML5 es una colección de estándares para el diseño y desarrollo de páginas web. Esta colección representa la manera en que se presenta la información en el explorador de Internet y la manera de interactuar con ella.
          Este lenguaje nos permite una mayor interacción entre nuestras páginas web y contenido multimedia con una mayor facilidad a la hora de codificar nuestro diseño básico.
          Podemos afirmar que HTML contiene elementos dedicados ampliamente a mejorar la experiencia del usuario en nuestra página web, haciendo más fácil al diseñador poder agregar elementos de audio, vídeo, así como organizar sus contenidos utilizando menos código.

          Un pequeño ejemplo practico lo realicé en este blog centrando el texto del encabezado, ¿cómo lo hice?
          Para aceder a modificar el codigo HTML debemos ir a Diseño>Plantilla>Editar HTML. Como queremos modificar el estilo de la cabezera, introducimos el siguiente codigo
                                                                 <head>
                                                       <style>
                                                       h1 {
                                                       tex-align: center;
                                                       }
                                                       </style>
                                                                 </head>

          ¡Cuidado! Todas las etiquetas tienen que ser cerradas para que el código funcione correctamente.

          Para finaliza, el siguiente enlace es muy útil para conocer ejemplos de este código y a su vez lo podemos poner en práctica.
          https://www.w3schools.com/html/html_examples.asp


          ¡Yo utilizé HTML5! ¿y tú?