Ir al contenido

video

11 entradas con la etiqueta “video”

Vídeo Controlar eventos en Javascript

En el vídeo controlar eventos en Javascript se nos presentan las nociones básicas para poder controlar un evento dentro de una página HTML.

Para ello lo que se hace es construir un formulario en el cual tendremos un botón, del cual queremos saber cuándo se ha pulsado. Además utilizaremos una capa para devolver un texto indicando cuándo se ha pulsado el botón.

<button id="miboton">Hola Soy un Boton</button>
<div id="micapa"></div>

Luego se nos contará la diferencia entre tener el comportamiento y la estructura dentro de un mismo sitio, cosa que sucedía en los principios del HTML y lo que es separar la estructura del comportamiento, que será la mejor forma de poder controlar eventos en Javascript.

Para acabar, entraremos en detalle en el uso de las funciones .getElementById() y .addEventListener() que serán las que nos ayuden a manejar los eventos.

var boton = document.getElementById("miboton");
boton.addEventListener("click",function(){
var capa = document.getElementById("micapa");
capa.innerHTML = "Has pulsado el botón";
},false);

Pero lo mejor es que os veáis en vídeo controlar eventos en Javascript que os contará todo esto en detalle.

¡Espero que os guste el vídeo!

Vídeo Insertar Imagen en un Canvas HTML5

Una de las cosas nuevas que aparecen en HTML5 es el elemento Canvas. Hoy tenemos el vídeo insertar imagen en un Canvas HTML5 el cual nos cuenta cómo podemos crear un Canvas, para, de forma posterior, manipularlo mediante Javascript e insertar una imagen dentro.

En este tutorial aprenderás:

  • El elemento Canvas de HTML5 y cómo crearlo
  • El método .getContext() para acceder al contexto del Canvas
  • La clase Image() de Javascript para crear imágenes
  • Cómo combinar todo para insertar una imagen en el Canvas

El Canvas es un lienzo en blanco donde puedes dibujar gráficos mediante Javascript. Se crea con:

<canvas id="miCanvas" width="800" height="600"></canvas>

Para manipular el Canvas necesitamos obtener su contexto 2D:

var canvas = document.getElementById('miCanvas');
var ctx = canvas.getContext('2d');

Para cargar imágenes en Javascript usamos:

var imagen = new Image();
imagen.src = 'ruta/a/imagen.jpg';

Una vez cargada la imagen, la dibujamos en el Canvas:

imagen.onload = function() {
ctx.drawImage(imagen, 0, 0);
};

Pero lo mejor es que lo veas en el vídeo insertar imagen en un Canvas HTML5 y lo aprendas por ti mismo. Espero que os guste!

Puedes ver el vídeo directamente en YouTube: https://www.youtube.com/watch?v=kC3bmcaS6bw

El Canvas de HTML5 es una herramienta poderosa para crear gráficos dinámicos. Insertar imágenes es solo el principio de todo lo que puedes hacer con esta tecnología.

Vídeo recorrer un array en Java

Tenemos un nuevo vídeo en nuestro canal de Youtube de Línea de Código. En este caso el vídeo nos enseña a Recorrer un Array en Java.

Para ello veremos cómo podemos crear un array de String y cargarlo de contenido, para, a posteriori, utilizar un bucle for para recorrer los elementos del array y mostrarlos en pantalla.

También se analiza el uso de la propiedad .length para poder conocer el número de elementos con los que cuenta el array y saber de qué forma deberemos de salirnos del bucle for.

Espero que os guste el vídeo recorrer un array en Java.

Vídeo Consultas con Filtros en MongoDB

En este nuevo vídeo de Línea de código podemos ver cómo realizar consultas con filtros en MongoDB.

En el vídeo consultas con filtros en MongoDB partiremos de un conjunto de documentos de ciudades:

{
"_id" : ObjectId("525ab02733b01a66a9dcbc5b"),
"ciudad" : "Madrid",
"habitantes" : 3233527
}
{
"_id" : ObjectId("525ab02733b01a66a9dcbc5c"),
"ciudad" : "Barcelona",
"habitantes" : 1620943
}
{
"_id" : ObjectId("525ab02733b01a66a9dcbc5d"),
"ciudad" : "Valencia",
"habitantes" : 797028
}

Y veremos cómo utilizar el método find() con un filtro:

db.ciudades.find( {ciudad:"Madrid"} );

Para poder obtener un documento de la colección.

Pero lo mejor es que veas el vídeo consultas con filtros en MongoDB y nos cuentes qué te parece.

Vídeo Tablas Cebra con Bootstrap

Ya veíamos en el artículo tablas estilo cebra como podíamos construir una tabla estilo cebra con Bootstrap. Pero hemos decidido hacer un vídeo todavía más didáctico.

El vídeo Tablas Cebra con Bootstrap se convierte en el segundo vídeo de nuestro canal.

En el vídeo podrás ver:

  • Cómo crear una tabla con HTML
  • Cómo insertar el framework Bootstrap en tu web
  • Cómo dar formato a la tabla para que se pueda definir un estilo cebra

Espero que el vídeo, cómo los demás del canal, sea de vuestro agrado. Si es así no os olvidéis de suscribir al canal de Línea de Código en Youtube.

Vídeo Imágenes en HTML

Vamos a empezar una nueva serie de vídeos dentro de Línea de Código Estos nuevos vídeos serán más naturales, directos, didácticos e intentarán transmitir de una forma más personal los diferentes temas de programación.

Vídeos pensando en vosotros, vídeos que ayuden a aprender a programar.

Para ello el primer vídeo será “Imágenes en HTML”. En el vídeo Imágenes en HTML podréis encontrar:

  • El uso de la etiqueta img - elemento fundamental para insertar imágenes
  • Los atributos de la etiqueta img - src, alt, width, height, title
  • Las formas de referenciar una imagen desde el atributo src
  • Cómo dar alto y ancho a una imagen usando width y height
  • Para qué sirve el atributo title y cómo se renderiza en el navegador
  • La importancia de la accesibilidad del atributo alt

La etiqueta básica para insertar una imagen es:

<img src="ruta/imagen.jpg" alt="Descripción de la imagen">

Ejemplo completo con todos los atributos:

<img src="foto.jpg"
alt="Descripción accesible"
width="800"
height="600"
title="Texto que aparece al pasar el ratón">

Esperamos que disfrutéis de este nuevo formato de vídeos.

Podéis ver el vídeo directamente en YouTube: https://www.youtube.com/watch?v=ou-UwtE7fuk

Además aceptamos cualquier tipo de comentario, ya sean críticas, puntos de mejora, si os gusta o no os gusta el nuevo formato. Cualquier comentario será muy apreciado.

Vídeo para crear tu primera página web

En este vídeo tutorial vamos a ver cómo puedes crear tu primera página web con el lenguaje HTML.

Para ello revisamos cuáles son los primeros pasos y explicamos los elementos básicos del lenguaje HTML que nos permitan crear tu primera página web.

En este tutorial aprenderás:

  • La estructura básica de un documento HTML con las etiquetas esenciales
  • Cómo crear y guardar un archivo HTML
  • Los elementos fundamentales: <html>, <head>, <body>
  • Cómo agregar contenido a tu primera página
  • Cómo visualizar tu página web en el navegador

Para seguir este tutorial solo necesitas:

  1. Un editor de texto simple (Bloc de notas, TextEdit, etc.)
  2. Un navegador web (Chrome, Firefox, Edge, Safari, etc.)

Todo documento HTML debe tener esta estructura mínima:

<!DOCTYPE html>
<html>
<head>
<title>Mi Primera Página Web</title>
</head>
<body>
<h1>¡Hola Mundo!</h1>
<p>Esta es mi primera página web.</p>
</body>
</html>

Espero que os guste y os sea útil el vídeo tutorial…

Puedes ver el vídeo directamente en YouTube: https://www.youtube.com/watch?v=gCK_sDaoxiA

Crear tu primera página web en HTML es más sencillo de lo que parece. Con este vídeo tutorial darás tus primeros pasos en el desarrollo web y aprenderás los fundamentos que necesitas para seguir avanzando.

Vídeo sobre como crear enlaces en HTML

En este nuevo vídeotutorial de Línea de Código vamos a ver un vídeo sobre cómo crear enlaces en HTML.

En el vídeo explicamos cómo se pueden crear enlaces en HTML para diferentes propósitos:

  • Enlaces a otra página del mismo sitio web
  • Enlaces a un servidor web externo (URLs completas)
  • Enlaces a contenido específico dentro de una página (anclas)
  • Enlaces que abren en nueva ventana o pestaña usando target="_blank"

Los enlaces en HTML se crean usando el elemento <a> con el atributo href que especifica la URL de destino.

Sin más os dejo con el vídeo para crear enlaces en HTML. Espero que os guste…

Puedes ver el vídeo directamente en YouTube: https://www.youtube.com/watch?v=TumSNGO4nJQ

Los enlaces son uno de los elementos más importantes de HTML, ya que permiten la navegación entre páginas y son la base de la web. Este vídeo te enseña todas las técnicas necesarias para crear enlaces efectivos.

Vídeo sobre cómo insertar imágenes en HTML

En el siguiente vídeo veremos cómo podemos insertar imágenes en HTML. Las imágenes se insertarán tanto de un fichero en local como de una imagen que se encuentre en un servidor remoto.

En este tutorial aprenderás:

  • Cómo insertar imágenes usando el elemento <img>
  • Definir el alto y ancho de una imagen con los atributos width y height
  • Añadir un título a la imagen mediante el atributo title
  • Usar texto alternativo con el atributo alt cuando la imagen no se encuentra

Espero que os guste el vídeo sobre cómo insertar imágenes en HTML:

image

Puedes ver el vídeo directamente en YouTube: https://www.youtube.com/watch?v=akmNxzAhxI8

Insertar imágenes correctamente es fundamental para crear páginas web atractivas y accesibles. Este vídeo te proporciona todas las herramientas necesarias para hacerlo de forma profesional.

Feliz 2013

Este año queríamos empezarlo programando, así que os dejamos esta felicitación del 2013 en formato de vídeo. Esperamos que os guste… ¡¡¡ Feliz 2013 !!!