html5 – ProgramaciónExtrema.com https://programacionextrema.com Tutoriales de programación! Wed, 12 Sep 2018 17:52:42 +0000 es hourly 1 https://wordpress.org/?v=5.6.15 https://programacionextrema.com/wp-content/uploads/2015/10/cropped-icon-programacion-extrema-32x32.png html5 – ProgramaciónExtrema.com https://programacionextrema.com 32 32 Ocultar y mostrar un botón con Java Script y jQuery https://programacionextrema.com/2018/09/12/ocultar-y-mostrar-un-boton-con-java-script-y-jquery/ https://programacionextrema.com/2018/09/12/ocultar-y-mostrar-un-boton-con-java-script-y-jquery/#respond Wed, 12 Sep 2018 17:52:41 +0000 https://programacionextrema.com/?p=1321 Después de un largo tiempo vuelvo con un nuevo tutorial, puede ser bastante simple pero muy útil para aquellos que recién empiezan a programar. En esta oportunidad vamos a ver cómo ocultar y mostrar un botón con Java Script y jQuery. Esta misma funcionalidad también se puede aplicar con cualquier etiqueta HTML en caso de… Read More

La entrada Ocultar y mostrar un botón con Java Script y jQuery aparece primero en ProgramaciónExtrema.com.

]]> Después de un largo tiempo vuelvo con un nuevo tutorial, puede ser bastante simple pero muy útil para aquellos que recién empiezan a programar. En esta oportunidad vamos a ver cómo ocultar y mostrar un botón con Java Script y jQuery. Esta misma funcionalidad también se puede aplicar con cualquier etiqueta HTML en caso de ser necesario.

Para hacer esto es muy importante tener la librería de jQuery incluida en el código HTML, como lo mostraremos más adelante.

Cómo ocultar y mostrar un botón HTML con Java Script y jQuery

El código que publicaré a continuación lo que hace es ocultar o mostrar el botón con id «acción» con solamente presionar otros dos botones.

<html>
  <head>
    <title>Ocultar y mostrar un botón con Java Script y jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <button type="button" id="button">Acción</button>
    <button type="button" id="show">Mostrar botón acción</button>
    <button type="button" id="hide">Ocultar botón acción</button>
    <script>
      $(function(){
        $('#show').click(function(){
          $('#button').show();
        });
        $('#hide').click(function(){
	      $('#button').hide();
        });
      })
    </script>
  </body>
</html>

Ahora si se quiere simplificar la funcionalidad, se puede utilizar la función toggle de jQuery, que detecta automáticamente si el botón está oculto o no. En caso de estar oculto lo muestra y lo mismo en caso contrario.

<html>
  <head>
    <title>Ocultar y mostrar un botón con Java Script y jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <button type="button" id="button">Acción</button>
    <button type="button" id="show">Mostrar/Ocultar</button>
    <script>
      $(function(){
        $('#show').click(function(){
          $('#button').toggle();
        });
      })
    </script>
  </body>
</html>

Bueno gente, eso es todo por esta vez. La idea es que al finalizar el mini tutorial puedan ser capaces de oculta y mostrar etiquetas HTML con Java Script y jQuery. Ante cualquier inconveniente no duden en dejar un comentario.

La entrada Ocultar y mostrar un botón con Java Script y jQuery aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2018/09/12/ocultar-y-mostrar-un-boton-con-java-script-y-jquery/feed/ 0 Convertir HTML en imagen con Java Script y jQuery para descargar https://programacionextrema.com/2017/03/14/convertir-html-en-imagen-java-script-jquery-para-descargar/ https://programacionextrema.com/2017/03/14/convertir-html-en-imagen-java-script-jquery-para-descargar/#comments Tue, 14 Mar 2017 20:06:13 +0000 http://programacionextrema.com/?p=1235 Hace poco para un proyecto personal tuve la necesidad de generar imágenes a partir de código HTML para que se puedan descargar en formato PNG, si bien en un principio parecía ser una tarea bastante fácil más adelante se me complico ya que no encontraba una librería en Java Script útil que me ayudara a… Read More

La entrada Convertir HTML en imagen con Java Script y jQuery para descargar aparece primero en ProgramaciónExtrema.com.

]]> Hace poco para un proyecto personal tuve la necesidad de generar imágenes a partir de código HTML para que se puedan descargar en formato PNG, si bien en un principio parecía ser una tarea bastante fácil más adelante se me complico ya que no encontraba una librería en Java Script útil que me ayudara a realizar dicha tarea. Después de un tiempo de buscar me encontré con una llamada html2canvas la cual es bastante amigable y es soportada por la mayoría de los navegadores actuales. Con un simple código pude convertir HTML en imagen para que se pueda descargar y guardar en cualquier computadora.

Estas cosas pueden ser muy útiles cuando se tienen grillas o información muy relevante en lo sitios y las personas las comparten mucho por redes sociales.

Cómo convertir etiquetas o tags HTML en imágenes para descargar y guardar usando el lenguaje Java Script

Como hemos dicho en un principio para poder generar la imagen o foto vamos a utilizar la librería html2canvas, la cual convierte código HTML en canvas. Primero para descargar la última versíon de la librería hay que ingresar al sitio oficial https://github.com/niklasvh/html2canvas/releases.

Descargamos el archivo y lo impartamos en nuestro código junto a la librería de jQuery, ya que la vamos a utilizar para simplificar algunas tareas:

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript" src="html2canvas.js"></script>

Después para hacer la conversión es necesario tener algunas etiquetas o tags HTML y un botón para iniciar la descarga de la imagen como se muestra a continuación:

<div id="imagen">
  <p>Esto es una prueba para <strong>exportar código HTML</strong> a imagen en formato PNG. Ofrecido por ProgramacionExtrema.com<p>
</div>
<button id="boton-descarga">Descargar imagen</button>

Y finalmente necesitamos la lógica para convertir el HTML, para esto vamos a crear la función downloadCanvas, la cual recibe el id del div a convertir y el nombre final del archivo descargable:

 function downloadCanvas(canvasId, filename) {
     // Obteniendo la etiqueta la cual se desea convertir en imagen
     var domElement = document.getElementById(canvasId);

     // Utilizando la función html2canvas para hacer la conversión
     html2canvas(domElement, {
         onrendered: function(domElementCanvas) {
             // Obteniendo el contexto del canvas ya generado
             var context = domElementCanvas.getContext('2d');

             // Creando enlace para descargar la imagen generada
             var link = document.createElement('a');
             link.href = domElementCanvas.toDataURL("image/png");
             link.download = filename;

             // Chequeando para browsers más viejos
             if (document.createEvent) {
                 var event = document.createEvent('MouseEvents');
                 // Simulando clic para descargar
                 event.initMouseEvent("click", true, true, window, 0,
                     0, 0, 0, 0,
                     false, false, false, false,
                     0, null);
                 link.dispatchEvent(event);
             } else {
                 // Simulando clic para descargar
                 link.click();
             }
         }
     });
 }

 // Haciendo la conversión y descarga de la imagen al presionar el botón
 $('#boton-descarga').click(function() {
     downloadCanvas('imagen', 'imagen.png');
 });

Luego al presionar el botón de descarga se hará la conversión automática y la imagen se descargará en su computadora, para ver el ejemplo completo y funcionado ingrese aquí.

Detalles e inconvenientes a tener en cuenta

Dos puntos a tener en cuenta:

Para el caso en el que el contenido HTML que se desea convertir a PNG tenga imágenes, estas deben estar alojadas bajo el mismo dominio, ya que en caso contrario no se podrán visualizar por temas de seguridad.

Si la imagen exportada sale borrosa o se ve mal, le recomendamos modificar el código fuente de la librería. Básicamente debe cambiar la función getBounds por la siguiente:

 function getBounds(node) {
     if (node.getBoundingClientRect) {
         var clientRect = node.getBoundingClientRect();
         var width = node.offsetWidth == null ? clientRect.width : node.offsetWidth;
         return {
             top: Math.floor(clientRect.top),
             bottom: Math.floor(clientRect.bottom || (clientRect.top + clientRect.height)),
             right: Math.floor(clientRect.left + width),
             left: Math.floor(clientRect.left),
             width: width,
             height: node.offsetHeight == null ? clientRect.height : node.offsetHeight
         };
     }
     return {};
 }

De esa forma el resultado será mucho mejor.

Bueno gente, eso es todo lo que hay que saber para poder exportar HTML a imagen en muy pocos pasos y utilizando Java Script con jQuery, espero que les sirva y ante cualquier problema no duden en dejar sus comentarios.

La entrada Convertir HTML en imagen con Java Script y jQuery para descargar aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2017/03/14/convertir-html-en-imagen-java-script-jquery-para-descargar/feed/ 19 Crear animaciones en canvas con Java Script https://programacionextrema.com/2015/12/21/crear-animaciones-en-canvas-con-java-script/ https://programacionextrema.com/2015/12/21/crear-animaciones-en-canvas-con-java-script/#respond Mon, 21 Dec 2015 20:06:16 +0000 http://programacionextrema.com/?p=1013 En esta ocasión veremos cómo crear animaciones en canvas con Java Script, para realizar esta tarea vamos a seguir con el tutorial en el cual explicamos cómo dibujar un cuadrado en canvas, así que antes de comenzar les recomiendo que pasen por ese tutorial. Cómo crear animaciones en canvas con Java Script Siguiendo con el… Read More

La entrada Crear animaciones en canvas con Java Script aparece primero en ProgramaciónExtrema.com.

]]> En esta ocasión veremos cómo crear animaciones en canvas con Java Script, para realizar esta tarea vamos a seguir con el tutorial en el cual explicamos cómo dibujar un cuadrado en canvas, así que antes de comenzar les recomiendo que pasen por ese tutorial.

Cómo crear animaciones en canvas con Java Script

Siguiendo con el tutorial anterior y ya habiendo dibujado un cuadrado en canvas, ahora vamos a crear una animación sobre ese mismo cuadrado.

Esta animación va a permitir que el cuadrado se mueva de izquierda a derecha de forma infinita. Primero vamos a obtener el contexto del elemento canvas para poder dibujar.

var canvas = document.getElementById("micanvas");
var contexto = canvas.getContext('2d');

Luego vamos a definir las variables que vamos a utilizar, como por ejemplo para la posición del cuadrado o para el tiempo de actualización del mismo.

var posX = 0;
var posY = 0;
tiempo =  1000 / 10; // Aproximadamente 10 frames por segundo

Y finalmente vamos a utilizar la función setInterval para ir actualizando la posición del cuadrado en aproximadamente 10 frames por segundo:

setInterval(function(){
		
  // Eliminar el dibujo del cuadrado anterior
  contexto.clearRect(posX, posY, canvas.width, canvas.height);
		
  // Incrementando en 1 la posición x del cuadrado
  // Si llega al extremo derecho vuelve a su posición inicial
  posX = (posX + 1) % (canvas.width - 50);
		
  // Dibujar nuevamente el cuadrado
  contexto.fillStyle = "#FFBD16";
  contexto.fillRect(posX, posY, 50, 50);
		
}, tiempo);

A continuación les dejo el código completo para que lo puedan probar y analizar:

<!DOCTYPE html>
<html>
  <head>
    <title>Crear animaciones en canvas con Java Script</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
  </head>
  <body>
    <canvas id="micanvas" width="200" height="200">
      Contenido que sólo verán los usuarios que no soportan canvas en su navegador.
    </canvas>
    <script language="JavaScript">
      window.onload = function(){
      	var canvas = document.getElementById("micanvas");
      	var contexto = canvas.getContext('2d');
      
        // Posición x, y del cuadrado
        var posX = 0;
        var posY = 0;
      
        // Aproximadamente 10 frames por segundo, se va a dibujar el cuadrado
        tiempo =  1000 / 10; 
      
        setInterval(function(){
      
          // Eliminar el dibujo del cuadrado anterior
          contexto.clearRect(posX, posY, canvas.width, canvas.height);
      
          // Incrementando en 1 la posición x del cuadrado
          // Si llega al extremo derecho vuelve a su posición inicial
          posX = (posX + 1) % (canvas.width - 50);
      
          // Dibujar nuevamente el cuadrado
          contexto.fillStyle = "#FFBD16";
          contexto.fillRect(posX, posY, 50, 50);
      
        }, tiempo);
      
      }
    </script>
  </body>
</html>

Bueno gente, eso es todo lo básico que se necesita entender para crear animaciones en canvas con Java Script. Espero que les sea de gran utilidad y ante cualquier problema no duden en enviar un comentario.

La entrada Crear animaciones en canvas con Java Script aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/12/21/crear-animaciones-en-canvas-con-java-script/feed/ 0 Dibujar cuadrados en canvas con Java Script https://programacionextrema.com/2015/12/21/dibujar-cuadrados-en-canvas-con-java-script/ https://programacionextrema.com/2015/12/21/dibujar-cuadrados-en-canvas-con-java-script/#comments Mon, 21 Dec 2015 00:05:23 +0000 http://programacionextrema.com/?p=1005 En este tutorial aprenderemos a dibujar cuadrados en canvas con Java Script. Como todos sabemos canvas es una etiqueta HTML5 que permite crear gráficos dinámicamente por medio del lenguaje de programación Java Script. Los gráficos pueden ser estáticos o simples animaciones. Además es importante saber que solamente los navegadores modernos soportan esta característica. Cómo dibujar… Read More

La entrada Dibujar cuadrados en canvas con Java Script aparece primero en ProgramaciónExtrema.com.

]]> En este tutorial aprenderemos a dibujar cuadrados en canvas con Java Script. Como todos sabemos canvas es una etiqueta HTML5 que permite crear gráficos dinámicamente por medio del lenguaje de programación Java Script. Los gráficos pueden ser estáticos o simples animaciones. Además es importante saber que solamente los navegadores modernos soportan esta característica.

Cómo dibujar cuadrados en canvas con Java Script

Como primer paso tenemos que definir la etiqueta canvas en nuestro HTML de la siguiente forma.

<canvas id="micanvas" width="200" height="200">
  Contenido que sólo verán los usuarios que no soportan canvas en su navegador.
</canvas>

Luego en Java Script vamos a obtener el contexto del elemento canvas para poder dibujar.

var elemento = document.getElementById("micanvas");
var contexto = elemento.getContext('2d');

Finalmente para dibujar un cuadrado solamante debemos usar la funcion fillRect(x, y, width, height) del contexto:

contexto.fillRect(100, 100, 50, 50);

Si visualizamos el cuadrado en el navegador el resultado sería el siguiente:

Cuadrado en canvas

Cuadrado en canvas

Ahora si queremos cambiar el color del cuadrado solamente debemos utilizar el atributo fillStyle con el color hexadecimal:

contexto.fillStyle = "#FFBD16";

A continuación el código completo:

<!DOCTYPE html>
<html>
  <head>
    <title>Dibujar cuadrados en canvas con Java Script</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
  </head>
  <body>
    <canvas id="micanvas" width="200" height="200">
      Contenido que sólo verán los usuarios que no soportan canvas en su navegador.
    </canvas>
    <script language="JavaScript">
      window.onload = function(){
      	var elemento = document.getElementById("micanvas");
      	var contexto = elemento.getContext('2d');
		contexto.fillStyle = "#FFBD16";
      	contexto.fillRect(100, 100, 50, 50);
      }
    </script>
  </body>
</html>

Bueno gente, eso es todo lo básico que se necesita para dibujar cuadrados en canvas con Java Script. Espero que les sea de gran utilidad y ante cualquier problema no duden en enviar un comentario.

La entrada Dibujar cuadrados en canvas con Java Script aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/12/21/dibujar-cuadrados-en-canvas-con-java-script/feed/ 4 Ver información de un marker en Google Maps https://programacionextrema.com/2015/12/01/ver-informacion-de-un-marker-en-google-maps/ https://programacionextrema.com/2015/12/01/ver-informacion-de-un-marker-en-google-maps/#respond Tue, 01 Dec 2015 00:21:23 +0000 http://programacionextrema.com/?p=837 Anteriormente hemos viste cómo agregar markers en Google Maps, en este tutorial aprenderemos a ver información de un marker en Google Maps a través de una ventana, usando el objeto InfoWindow. ¿Cómo ver información de un marker en Google Maps al hacer click? Esta funcionalidad la vamos a realizar sobre el código del anterior tutorial… Read More

La entrada Ver información de un marker en Google Maps aparece primero en ProgramaciónExtrema.com.

]]> Anteriormente hemos viste cómo agregar markers en Google Maps, en este tutorial aprenderemos a ver información de un marker en Google Maps a través de una ventana, usando el objeto InfoWindow.

¿Cómo ver información de un marker en Google Maps al hacer click?

Esta funcionalidad la vamos a realizar sobre el código del anterior tutorial en el cual creamos el mapa de Google Maps:

<!DOCTYPE html>
<html style="height:100%">
  <head>
    <title>Ver información de un marker en Google Maps</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      html, body{
        height:100%;
        margin: 0px;
      }
      #googleMap{
        width:100%;
        height:100%;
      }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      function initialize() {
        // Configuración del mapa
        var mapProp = {
          center: new google.maps.LatLng(-34.5862088, -58.415677500000015),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // Agregando el mapa al tag de id googleMap
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
         
        // Esta es la información del marker que se va a mostrar, el contenido acepta HTML
        var infowindow = new google.maps.InfoWindow({
          content: "<strong>Información de un marker</strong>"
        });
      
        // Creando un marker en el mapa
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(-34.5862088, -58.415677500000015),
          map: map,
          title: 'Título de ejemplo'
        });
         
        // Al hacer click sobre el marker mostraremos su información en una ventana
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
      }
      
      // Inicializando el mapa cuando se carga la página
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="googleMap"></div>
  </body>
</html>

Es importante prestar atención al objeto InfoWindow, el cual contiene la información que se va a mostrar cundo se detecte el evento click sobre el marker.
Al ejecutar la página anterior y después de hacer click sobre el marker el resultado sería el siguiente.

Información de un marker en Google Maps

Información de un marker en Google Maps

Bueno gente, hemos llegado al final de este breve tutorial, espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.

La entrada Ver información de un marker en Google Maps aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/12/01/ver-informacion-de-un-marker-en-google-maps/feed/ 0 Agregar markers en Google Maps https://programacionextrema.com/2015/11/30/agregar-markers-en-google-maps/ https://programacionextrema.com/2015/11/30/agregar-markers-en-google-maps/#respond Mon, 30 Nov 2015 01:02:50 +0000 http://programacionextrema.com/?p=827 Anteriormente hemos visto cómo crear un mapa con Google Maps, en este tutorial veremos cómo agregar markers en Google Maps utilizando el lenguaje de programación Java Script. ¿Cómo agregar markers en Google Maps? Siguiendo con el código del tutorial anterior vamos a insertar un marker en el mapa con Java script como se muestra en… Read More

La entrada Agregar markers en Google Maps aparece primero en ProgramaciónExtrema.com.

]]> Anteriormente hemos visto cómo crear un mapa con Google Maps, en este tutorial veremos cómo agregar markers en Google Maps utilizando el lenguaje de programación Java Script.

¿Cómo agregar markers en Google Maps?

Siguiendo con el código del tutorial anterior vamos a insertar un marker en el mapa con Java script como se muestra en el siguiente ejemplo:

<!DOCTYPE html>
<html style="height:100%">
  <head>
    <title>Agregar markers en Google Maps</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      html, body{
        height:100%;
        margin: 0px;
      }
      #googleMap{
        width:100%;
        height:100%;
      }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      function initialize() {
        // Configuración del mapa
        var mapProp = {
          center: new google.maps.LatLng(-34.5862088, -58.415677500000015),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // Agregando el mapa al tag de id googleMap
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
      
        // Creando un marker en el mapa
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(-34.5862088, -58.415677500000015),
          map: map,
          title: 'Hello World!'
        });
      }
      
      // Inicializando el mapa cuando se carga la página
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="googleMap"></div>
  </body>
</html>

Al visualizar la página vamos a ver el mapa con un marker en el centro de la ciudad de Buenos Aires.

Bueno gente, hemos llegado al final de este sencillo tutorial en el cual se explica cómo agregar markers en Google Maps. Espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.

La entrada Agregar markers en Google Maps aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/30/agregar-markers-en-google-maps/feed/ 0 Crear un mapa con Google Maps https://programacionextrema.com/2015/11/30/crear-un-mapa-con-google-maps/ https://programacionextrema.com/2015/11/30/crear-un-mapa-con-google-maps/#respond Mon, 30 Nov 2015 00:46:10 +0000 http://programacionextrema.com/?p=825 Anteriormente hemos visto cómo realizar un autocompletado de ciudades con Google Maps, en este tutorial aprenderemos a crear un mapa con Google Maps utilizando el lenguaje de programación Java Script y HTML para la vista. ¿Cómo crear un mapa con Google Maps? Hacer esta tarea es realmente muy fácil, basta con agregar unas poca lineas… Read More

La entrada Crear un mapa con Google Maps aparece primero en ProgramaciónExtrema.com.

]]> Anteriormente hemos visto cómo realizar un autocompletado de ciudades con Google Maps, en este tutorial aprenderemos a crear un mapa con Google Maps utilizando el lenguaje de programación Java Script y HTML para la vista.

¿Cómo crear un mapa con Google Maps?

Hacer esta tarea es realmente muy fácil, basta con agregar unas poca lineas de código como se muestra en el siguiente ejemplo:

<!DOCTYPE html>
<html style="height:100%">
  <head>
    <title>Crear un mapa con Google Maps</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      html, body{
        height:100%;
        margin: 0px;
      }
      #googleMap{
        width:100%;
        height:100%;
      }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      function initialize() {
        // Configuración del mapa
        var mapProp = {
          center: new google.maps.LatLng(-34.5862088, -58.415677500000015),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // Agregando el mapa al tag de id googleMap
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
      
      }
      
      // Inicializando el mapa cuando se carga la página
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="googleMap"></div>
  </body>
</html>

Al visualizar la página anterior vamos a poder ver el mapa ubicado en Buenos Aires.

Bueno gente, hemos llegado al final de este sencillo tutorial en el cual se explica cómo crear un mapa con Google Maps. Espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.

La entrada Crear un mapa con Google Maps aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/30/crear-un-mapa-con-google-maps/feed/ 0 Cómo evitar que un texto salga de un div en HTML https://programacionextrema.com/2015/11/27/como-evitar-que-un-texto-salga-de-un-div-en-html/ https://programacionextrema.com/2015/11/27/como-evitar-que-un-texto-salga-de-un-div-en-html/#comments Fri, 27 Nov 2015 19:59:48 +0000 http://programacionextrema.com/?p=796 Al desarrollar un sitio web en HTML y CSS nos podemos encontrar con muchos problemas, uno muy recurrente ocurre cuando tenemos un texto muy largo dentro de un div con un tamaño fijo, al ser tan largo puede pasar que sobrepase la etiqueta que lo contiene. En este tutorial veremos cómo evitar que un texto… Read More

La entrada Cómo evitar que un texto salga de un div en HTML aparece primero en ProgramaciónExtrema.com.

]]> Al desarrollar un sitio web en HTML y CSS nos podemos encontrar con muchos problemas, uno muy recurrente ocurre cuando tenemos un texto muy largo dentro de un div con un tamaño fijo, al ser tan largo puede pasar que sobrepase la etiqueta que lo contiene. En este tutorial veremos cómo evitar que un texto salga de un div en HTML.

¿Cómo evitar que un texto salga de un div en HTML?

Para evitar esto vamos a utilizar la propiedad CSS3 llamada word-wrap, en el siguiente ejemplo tenemos un div de un tamaño fijo con una palabra grande:

<!DOCTYPE html>
<html>
  <head>
    <title>Cómo evitar que un texto salga de un div en HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
	  #contenedor{
	    width: 50px;
	    background: red;
	  }
	</style>
  </head>
  <body>
    <div id="contenedor">
	PalabraMuyLarga 
    </div>
  </body>
</html>

Si no utilizamos la propiedad word-wrap el resultado sería el siguiente.

Div sin CSS3 word-wrap

Div sin CSS3 word-wrap

Ahora con tan solo agregar la propiedad word-wrap con el valor break-word la palabra se va a partir, permitiendo así que no salga del contenedor div:

<!DOCTYPE html>
<html>
  <head>
    <title>Cómo evitar que un texto salga de un div en HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
      #contenedor{
        width: 50px;
        background: red;
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <div id="contenedor">
      PalabraMuyLarga 
    </div>
  </body>
</html>

En este caso el resultado sería:

Div con CSS3 word-wrap

Div con CSS3 word-wrap

Bueno gente, hemos llegado al final de este tutorial en el cual se explica cómo evitar que un texto salga de un div en HTML. Espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.

La entrada Cómo evitar que un texto salga de un div en HTML aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/27/como-evitar-que-un-texto-salga-de-un-div-en-html/feed/ 3 Tipos de input en HTML5 https://programacionextrema.com/2015/11/22/tipos-de-input-en-html5/ https://programacionextrema.com/2015/11/22/tipos-de-input-en-html5/#respond Sun, 22 Nov 2015 20:45:14 +0000 http://programacionextrema.com/?p=706 HTML5 nos proporciona muchas funcionalidades nuevas y un estándar a seguir para la mayoría de los navegadores. En este tutorial aprenderemos a utilizar todos los tipos de input en HTML5. Como ya saben un input en HTML5 se define con la etiqueta input. Donde en el atributo type se especifica el tipo del input. En… Read More

La entrada Tipos de input en HTML5 aparece primero en ProgramaciónExtrema.com.

]]> HTML5 nos proporciona muchas funcionalidades nuevas y un estándar a seguir para la mayoría de los navegadores. En este tutorial aprenderemos a utilizar todos los tipos de input en HTML5.

Como ya saben un input en HTML5 se define con la etiqueta input.

<input type="XXX">

Donde en el atributo type se especifica el tipo del input. En el siguiente listado podemos ver los más importantes:

Listado de tipos de input en HTML5

text – Solamente permite ingresar texto.
number – Permite ingresar únicamente números.
email – Permite ingresar textos en formato de email.
date – Permite seleccionar una fecha de un calendario.
submit – Permite crear un botón, generalmente usado en formularios.
checkbox – Crea una casilla que permite seleccionar una o varias opciones.
radio – Crea una casilla que permite seleccionar solamente una opción.
url – Permite ingresar una URL.

Estos son los tipos más importantes que nos proporciona HTML5 para los input, espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.

La entrada Tipos de input en HTML5 aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/22/tipos-de-input-en-html5/feed/ 0 Drag and drop en HTML5 https://programacionextrema.com/2015/11/22/drag-and-drop-en-html5/ https://programacionextrema.com/2015/11/22/drag-and-drop-en-html5/#respond Sun, 22 Nov 2015 20:24:09 +0000 http://programacionextrema.com/?p=702 HTML5 es actualmente soportado por la mayoría de los navegadores e incluye muchas funcionalidades nuevas, entre ellas la posibilidad de hacer un drag and drop de manera muy sencilla y sin tener que incluir librerías externas. Es por ese motivo que en este tutorial aprenderemos a utilizar la técnica de drag and drop en HTML5.… Read More

La entrada Drag and drop en HTML5 aparece primero en ProgramaciónExtrema.com.

]]> HTML5 es actualmente soportado por la mayoría de los navegadores e incluye muchas funcionalidades nuevas, entre ellas la posibilidad de hacer un drag and drop de manera muy sencilla y sin tener que incluir librerías externas. Es por ese motivo que en este tutorial aprenderemos a utilizar la técnica de drag and drop en HTML5.

¿Cómo realizar un drag and drop en HTML5?

Con el siguiente código podemos arrastrar una imagen a otra etiqueta div.

<html>
  <head>
    <title>Drag and drop en HTML5</title>
    <style>
      .rect{
        width: 300px;
        height: 67px;
        background: #E4E4E4;
        border: 1px solid black;
        margin:2px;
      }
    </style>
  </head>
  <body>
    <div class="rect">
      <img id="drag1" src="http://programacionextrema.com/wp-content/uploads/2015/10/logo-programacion-extrema.png" draggable="true" ondragstart="drag(event)" >
    </div>
    <div id="div1" class="rect" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <script>
      function allowDrop(ev) {
      	ev.preventDefault();
      }
      
      function drag(ev) {
      	ev.dataTransfer.setData("text", ev.target.id);
      }
      
      function drop(ev) {
      	ev.preventDefault();
      	var data = ev.dataTransfer.getData("text");
      	ev.target.appendChild(document.getElementById(data));
      }
    </script>
  </body>
</html>

Para que un elemento sea draggable se debe indicar con el atributo draggable en true:

<img draggable="true">

En en ejemplo anterior el atributo ondragstart llama a la función drag que especifica qué datos pueden ser draggable.
El método dataTransfer.setData() define el tipo de dato y el valor de los datos draggable, en este caso, el tipo de dato es «text» y el valor es el id del elemento draggable («drag1»):

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

El evento ondragover especifica dónde los datos draggable se pueden descartar. Por defecto, los elementos no pueden ser dejados en cualquier lugar, para evitar esto debemos utilizar la siguiente función en el evento ondragover:

function allowDrop(ev) {
    ev.preventDefault();
}

Cuando se deja caer los datos draggable, se produce un evento. En el ejemplo anterior, el atributo ondrop llama a la función drop (evento):

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

Bueno gente, eso es todo lo que se debe saber a la hora de hacer un drag and drop en HTML5, espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.

La entrada Drag and drop en HTML5 aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2015/11/22/drag-and-drop-en-html5/feed/ 0