HTML5 – ProgramaciónExtrema.com https://programacionextrema.com Tutoriales de programación! Sat, 05 Jan 2019 19:50:09 +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 Cambiar la fuente de la letra (texto) HTML con CSS https://programacionextrema.com/2019/01/05/cambiar-la-fuente-de-la-letra-texto-html-con-css/ https://programacionextrema.com/2019/01/05/cambiar-la-fuente-de-la-letra-texto-html-con-css/#respond Sat, 05 Jan 2019 19:38:17 +0000 https://programacionextrema.com/?p=1402 Las fuentes de letras que se utilice en un sitio web desarrollado con HTML y CSS pueden determinar que tan atractiva se ve, aunque algunos desestimen completamente su uso y se queden con los tipos que vienen por defecto. En este tutorial te vamos a explicar cómo cambiar de fuente (font) con CSS, para que… Read More

La entrada Cambiar la fuente de la letra (texto) HTML con CSS aparece primero en ProgramaciónExtrema.com.

]]> Las fuentes de letras que se utilice en un sitio web desarrollado con HTML y CSS pueden determinar que tan atractiva se ve, aunque algunos desestimen completamente su uso y se queden con los tipos que vienen por defecto.

En este tutorial te vamos a explicar cómo cambiar de fuente (font) con CSS, para que puedas desarrollar un sitio web moderno e impactante en una primera instancia. Podremos comprobar que unas pocas lineas de código CSS se podrá modificar el tipo de letra de todo el cuerpo HTML.

Ejemplo de cambio de fuente en un texto HTML con CSS

Para comprender mejor cómo realizar un cambio de fuente o tipografía, a continuación te proporcionaremos un breve ejemplos de código. El mismo está completo y se encuentra en HTML y CSS.

<html>
  <head>
    <title>Cambiar la fuente de la letra al HTML con CSS</title>
    <style>
      .texto {
        font-family: Verdana;
      }
    </style>
  </head>
  <body>
    <div class="texto">Texto de prueba</div>
  </body>
</html>

En el ejemplo anterior se puede apreciar que con el atributo CSS font-family se modifica la tipografía del texto que está dentro de una etiqueta div de clase texto.

La propiedad font-family acepta varias fuentes, las cuales vienen incorporadas por defecto. A continuación te dejamos algunas fuentes adicionales que se pueden utilizar libremente en cualquier sitio web.

Family Genérico Font family Descripción
Serif Times New Roman
Georgia 		Las fuentes Serif tienen pequeñas líneas en los extremos de algunos caracteres.
Sans-serif Arial
Verdana 		«Sans» significa sin – estas fuentes no tienen líneas en los extremos de los caracteres
Monospace Courier New
Lucida Console 		Todos los caracteres monoespacios tienen el mismo ancho.

Utilizar fuentes (fonts) de Google

Google ofrece gratuitamente y libremente una gran variedad del fuentes para que puedas utilizar en tus proyectos. Las misma fuentes se pueden ver en https://fonts.google.com. Para utilizar alguna de sus fuentes solamente es necesario importarla dentro del HTML. A continuación te dejaremos un breve ejemplo de cómo hacerlo, reutilizando el código anterior.

<html>
  <head>
    <title>Cambiar la fuente de la letra al HTML con CSS usando las fuentes de Google</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      .texto {
        font-family: 'Tangerine', serif;
      }
    </style> 
  </head>
  <body>
    <div class="texto">Texto de prueba</div>
  </body>
</html>

Eso es lo básico que hay que saber para poder modificar o cambiar las fuentes de los texto en HTML con CSS. En caso de que tengan una duda pueden dejar un comentario al final del tutorial.

La entrada Cambiar la fuente de la letra (texto) HTML con CSS aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2019/01/05/cambiar-la-fuente-de-la-letra-texto-html-con-css/feed/ 0 Cómo ejecutar una función desde un enlace o link HTML con Java Script https://programacionextrema.com/2018/10/31/como-ejecutar-una-funcion-desde-un-enlace-link-html-con-java-script/ https://programacionextrema.com/2018/10/31/como-ejecutar-una-funcion-desde-un-enlace-link-html-con-java-script/#respond Wed, 31 Oct 2018 19:10:41 +0000 https://programacionextrema.com/?p=1388 En esta ocasión vamos a ver una simple funcionalidad que puede ser muy útil en muchos casos. Vamos a explicar con un código muy sencillo cómo ejecutar una función desde un enlace o link HTML con Java Script, de tal forma que no haga una redirección a otra página. Esta funcionalidad es muy similar a… Read More

La entrada Cómo ejecutar una función desde un enlace o link HTML con Java Script aparece primero en ProgramaciónExtrema.com.

]]> En esta ocasión vamos a ver una simple funcionalidad que puede ser muy útil en muchos casos. Vamos a explicar con un código muy sencillo cómo ejecutar una función desde un enlace o link HTML con Java Script, de tal forma que no haga una redirección a otra página.

Esta funcionalidad es muy similar a la de ejecutar una función pero con un botón, con la diferencia principal de que en un enlace la función se invoca en el atributo href y en un botón se hace con el atributo onclick.

Código de muestra para llamar una función desde un enlace o link HTML con Java Script

Para realizar esta tarea vamos a crear un link HTML y vamos a utilizar su atributo href para llamar a la función en cuestión. A diferencia de un enlace tradicional donde solamente se utiliza la URL completa para hacer una redirección en este caso es necesario indicar que se va a llamar a una función Java Script, para esto en el atributo href se debe poner la función (a la cual se va a invocar) de la siguiente forma.

<html>
  <head>
    <title>Cómo ejecutar una función desde un enlace o link HTML con Java Script</title>
  </head>
  <body>
    <a href="javascript:funcion()">Llamar función</a>
    <script>
      function funcion(){
        alert('Función ejecutada');
      }
    </script>
  </body>
</html>

Al ejecutar el código anterior en el navegador van a poder visualizar un pop-up con un mensaje, el cual es el resultado de llamar a una función con Java Script.

Eso es todo lo necesario para realizar dicha función, en caso de que se encuentren con algún problema no duden en dejar un comentario al final del artículo.

La entrada Cómo ejecutar una función desde un enlace o link HTML con Java Script aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2018/10/31/como-ejecutar-una-funcion-desde-un-enlace-link-html-con-java-script/feed/ 0 Cómo hacer una etiqueta o tag div HTML editable https://programacionextrema.com/2018/10/24/como-hacer-una-etiqueta-o-tag-div-html-editable/ https://programacionextrema.com/2018/10/24/como-hacer-una-etiqueta-o-tag-div-html-editable/#respond Wed, 24 Oct 2018 23:39:28 +0000 https://programacionextrema.com/?p=1385 En el presente tutorial vamos a explicar, proporcionando un código fuente de ejemplo para que uses en tus proyectos, cómo hacer una etiqueta o tag div HTML editable, de forma tal que cumpla el mismo funcionamiento que un campo de texto. Esta funcionalidad puede ser muy útil cuando se requiera crear un campo de texto… Read More

La entrada Cómo hacer una etiqueta o tag div HTML editable aparece primero en ProgramaciónExtrema.com.

]]> En el presente tutorial vamos a explicar, proporcionando un código fuente de ejemplo para que uses en tus proyectos, cómo hacer una etiqueta o tag div HTML editable, de forma tal que cumpla el mismo funcionamiento que un campo de texto.

Esta funcionalidad puede ser muy útil cuando se requiera crear un campo de texto que no sea un input de type text. Para esto simplemente vamos a aplicar estilos CSS sin la necesidad de tener que programar lógica con Java Script o jQuery.

Código para hacer una etiqueta o tag div HTML editable (campo de texto)

Para realizar esta función simplemente vamos a definir una etiqueta div y le incluiremos el atributo contenteditable en true, permitiendo así que en la etiqueta se pueda escribir cualquier tipo de texto. Además le agregaremos estilos CSS para ajustar correctamente el tamaño y para que el texto no sobresalga del div.

<html>
  <head>
    <title>Cómo hacer una etiqueta o tag div HTML editable</title>
    <style>
      .editable {
        width: 300px;
        min-height: 20px;
        border: 1px solid black;
        word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <div class="editable" contenteditable="true">
    </div>
  </body>
</html>

Al ejecutar el código anterior en un navegador van a poder visualizar el campo de texto editable, simplemente para probarlo pueden tipear cualquier caracter y ver como se adapta al tamaño.

En el caso de que sea necesario recuperar el valor ingresado en el campo de texto se puede utilizar la función text que nos proporciona jQuery, como lo mostraremos a continuación.

$('.editable').text();

Eso es todo lo necesario para poder hacer una etiqueta o tag div editable en HTML, en muy pocos pasos y sobre todo de forma eficiente. En el caso de que tengan algún inconveniente no duden en dejar un comentario.

La entrada Cómo hacer una etiqueta o tag div HTML editable aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2018/10/24/como-hacer-una-etiqueta-o-tag-div-html-editable/feed/ 0 Superponer etiquetas y tags HTML con CSS (uno dentro de otro) https://programacionextrema.com/2018/10/13/superponer-etiquetas-y-tags-html-con-css/ https://programacionextrema.com/2018/10/13/superponer-etiquetas-y-tags-html-con-css/#respond Sat, 13 Oct 2018 21:31:24 +0000 https://programacionextrema.com/?p=1370 En la presente ocasión vamos a ver cómo superponer etiquetas y tags HTML con CSS. Esto mismo puede servir para manipular cualquier elemento HTML, por ejemplo botones, enlaces, todos los input y tags div entre otros. Para que puedas comprender correctamente todos los pasos necesarios para realizar dicha función, te vamos a proporcionar el código… Read More

La entrada Superponer etiquetas y tags HTML con CSS (uno dentro de otro) aparece primero en ProgramaciónExtrema.com.

]]> En la presente ocasión vamos a ver cómo superponer etiquetas y tags HTML con CSS. Esto mismo puede servir para manipular cualquier elemento HTML, por ejemplo botones, enlaces, todos los input y tags div entre otros. Para que puedas comprender correctamente todos los pasos necesarios para realizar dicha función, te vamos a proporcionar el código completo.

Esto puede ser necesario en muchas ocasiones, por ejemplo cuando se requiere mostrar un texto o un botón por encima de una imagen o cualquier otro elemento del doc.

Código para superponer etiquetas y tags HTML con CSS usando posiciones relativa y absoluta

Para comprender mejor el código a continuación vamos a definir dos etiquetas div HTML, una dentro de otra, para que la segunda se puede posicionar por encima de la primera, en cualquier ubicación. Para esto la primera va a tener que tener el atributo position como relative mientras que la segunda va a tener que tener ese mismo atributo pero con el valor absolute, luego con el bottom y el right se va a poder posicionar en cualquier ubicación.

<html>
  <head>
    <title>Superponer etiquetas y tags HTML con CSS</title>
    <style type="text/css">
      .tag1{
        width: 300px;
        height: 300px;
        position: relative;
        background: red;
      }
      .tag2{
        width: 100px;
        height: 50px;
        position: absolute;
        bottom: 5px;
        right: 5px;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="tag1">
      <div class="tag2"></div>
    </div>
  </body>
</html>

Con el código anterior la segunda etiqueta se va a mostrar en la parte inferior izquierda de la primera, en caso de querer ubicarla sobre el margen superior simplemente hay que utilizar el atributo top en lugar del bottom, como se utilizó en el ejemplo anterior.

Así es como se verá el código anterior en tu navegador.

Superponer etiquetas y tags HTML con CSS

Si te interesa superponer el segundo tag sobre una imagen, simplemente se puede realizar agregando la etiqueta img de la imagen en el primer tag.

Eso es todo lo que hay que tener en cuenta para poder realizar la función de superponer etiquetas HTML con CSS. En caso de que tengan alguna duda pueden dejar su comentario al final del post.

La entrada Superponer etiquetas y tags HTML con CSS (uno dentro de otro) aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2018/10/13/superponer-etiquetas-y-tags-html-con-css/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 Limpiar un formulario con Java Script https://programacionextrema.com/2016/03/08/limpiar-un-formulario-con-java-script/ https://programacionextrema.com/2016/03/08/limpiar-un-formulario-con-java-script/#comments Tue, 08 Mar 2016 23:31:19 +0000 http://programacionextrema.com/?p=1107 Java Script y HTML son dos lenguajes de programación fundamentales para desarrollar un sitio web moderno y sencillo. Es por ese motivo que en esta ocasión aprenderemos una simple técnica para limpiar un formulario con Java Script. La necesidad de limpiar un formulario con Java Script Especialmente en formularios con muchos campos para completar siempre… Read More

La entrada Limpiar un formulario con Java Script aparece primero en ProgramaciónExtrema.com.

]]> Java Script y HTML son dos lenguajes de programación fundamentales para desarrollar un sitio web moderno y sencillo. Es por ese motivo que en esta ocasión aprenderemos una simple técnica para limpiar un formulario con Java Script.

La necesidad de limpiar un formulario con Java Script

Especialmente en formularios con muchos campos para completar siempre es muy útil para los usuarios tener la opción de limpiar o reiniciar el formulario, esto va ahorrarle al usuario realizar ese trabajo molesto, ya que en muchos casos podría dejar de visitar el sitio.

Cómo reiniciar o limpiar un formulario con Java Script

Para realizar esta tarea vamos a necesitar un formulario en HTML. Para este caso vamos a realizar uno muy simple, con dos campos de textos y dos botones (uno para enviar el formulario y el otro para limpiar el formulario).

<form id="miForm" action="action_page.php">
    Nombre:<br>
    <input type="text" name="nombre"><br>
    Apellido:<br>
    <input type="text" name="apellido"><br><br>
    <input type="button" onclick="limpiarFormulario()" value="Limpiar formulario">
    <input type="submit" value="Submit">
</form>

En el código del formulario se puede ver que el botón de tipo button va a ejecutar la función Java Script limpiarFormulario() cuando se haga click. Esa función va a ser la encargada de reiniciar el formulario:

<script>
  function limpiarFormulario() {
    document.getElementById("miForm").reset();
  }
</script>

Esta misma funcionalidad se puede realizar de otra forma mucho más sencilla, compatible con navegadores HTML5 y sin utilizar Java Script. Siguiendo con el código anterior solamente debemos cambiar el tipo del botón por reset y obviamente quitar la función onclick:

<input type="reset" value="Limpiar formulario">

Bueno gente, esto es todo. Espero que les haya sido de gran utilidad este breve tutorial en el cual explicamos cómo limpiar un formulario con Java Script. Ante cualquier inconveniente no dude en enviar un comentario.

La entrada Limpiar un formulario con Java Script aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2016/03/08/limpiar-un-formulario-con-java-script/feed/ 2 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 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