Codigos taz

COMO CAMBIAR DE NOMBRE A UNA PARTIDA O TITULO EN S10 COSTOS Y PRESUPUESTOS

2025-04-20T19:32:00.004-05:00

Para cambiar de nombre de nombre a una partida o titulo de un proyecto en S10, primero nos situamos
en la partida que queremos modificar, luego se debe presionar la tecla FN+3, aparecera una ventana para editar el nombre de una partida o titulo en S10, y con la flecha hacia abajo se puede navegar

COMO MOSTRAR ARCHIVOS OCULTOS DE USB CON COMANDO CMD WINDOWNS

2024-09-12T15:38:00.006-05:00

Para mostrar los archivos ocultos de un USB con comando CMD en Windows ejecutar lo siguiente:

attrib -h -r -s /s /d D:*.*

COMO SOLUCIONAR ERROR DE BLUETOOTH QUE DESAPARECE DE WINDOWS 10

2024-07-30T11:34:00.007-05:00

Para solucionar el error de Bluetooh que desaparece de Windows 10 aplica la siguiente solucion:

Presiona Win + R, escribe msdt.exe -id DeviceDiagnostic y presiona Enter para abrir el solucionador de problemas de hardware y dispositivos.
Si el sistema no encuentra el error referente al bluetooth, entonces darle clic a "Seguir buscando", al final el analizador de problemas pedirá que reinicies la computadora. Al reiniciar, el icono de Bluetooth ya se debería mostrar.

Como Ejecutar una Migracion Especifica en LARAVEL

2018-05-19T10:30:00.002-05:00

Si queremos ejecutar una migracion en especifico en Laravel, debemos ejecutar el siguiente comando:

php artisan migrate --path=app/database/migrations/2014_01_17_032743_create_photos_table.php

Solo reemplazamos 2014_01_17_032743_create_photos_table.php por el nombre de nuestra migracion.

Base de Datos de todos los paises, estados, regiones, provincias y distritos del mundo en SQL

2018-05-15T12:05:00.001-05:00

Acontinuacion les muestro una Base de Datos de todos los paises, estados, regiones, provincias y distritos del mundo en SQL

El link para DESCARGAR es el siguiente:

paises_del_mundo.sql

Si por alguna razon el link no funciona, escriban un comentario para enviarles la informacion.

Como convertir de VARCHAR a INT en MYSQL

2017-05-24T12:29:00.000-05:00

En este post veremos como Como convertir de VARCHAR a INT en MYSQL.
Para convertir de VARCHAR a INT en MYSQL, solo hacemos uso de la funcion ABS de MYSQL.

Por ejemplo tenemos un campo VARCHAR con datos numericos:

 2
 20
 19

Pero al hacer ORDER BY a esta tabla nos resulta:

 19, 2, 20

Para ello solo tenemos que poner nuestro codigo asi:

 SELECT *
 FROM mytable
 ORDER BY ABS(mycol)

Y asi ordenara correctamente la tabla:

 2
 19
 20

OTRA FORMA DE USAR ABS:

Otra forma de utilizar este metodo es si queremos seleccionar un MAX, en un campo VARCHAR con datos numericos:

Para este caso el maximo valor que nos dara MYSQL sera 9, pero en realidad seria 11.

Entonces para ello usamos el siguiente codigo:

SELECT MAX(ABS(mi_columna))
FROM mi_tabla

Ahora si el maximo valor seria 11, y no 9, gracias a la funcion ABS de MYSQL.

Como eliminar valores duplicados de un Array en Javascript

2017-05-13T18:14:00.001-05:00

Para remover o eliminar valores repetidos de un array en Javascript utilizamos la siguiente funcion:

Solo basta con tener nuestro codigo de la siguiente forma:

var mi_array = ['a', 'b', 'c', 'b', 'c', 'd', 'a'];

Array.prototype.unique = function() {
    var el = this.concat().sort();
    for (var i = 1; i < el.length; ) {
        if (el[i-1] === el[i])
            el.splice(i,1);
        else
            i++;
    }
    return el;
}
nuevo_array = mi_array.unique();

console.log(nuevo_array);

Espero les haya sido de gran ayuda!

Como hacer DEPLOY de aplicaciones Vue js + Webpack en Heroku

2017-05-11T19:16:00.001-05:00

En este post veremos como desplegar apps de Vue js creados con webpack en Heroku.

Primero debemos crear una aplicacion en Heroku, nos dirigimos a https://dashboard.heroku.com para ello.

Ahora para crear una aplicación Vue js con Webpack y VUE-CLI , debemos tener instalado lo necesario que dice la guia de Vue.

Los pasos para crear una aplicación son:

$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

Al hacer npm run dev nuestra aplicacion correra en modo local, para levantar o hacer deploy en heroku debemos seguir los siguientes pasos:

1. Crear los archivos necesarios para que nuestra aplicacion este lista para produccion, eso lo logramos con:

$ npm run build

2. Al ejecutar npm run build se creara la carpeta /dist que contendra los archivos estaticos compilados listos para producción. Ahora dentro de esa carpeta creamos un archivo llamado package.json, que es diferente al que esta en la raiz del proyecto.

El archivo /dist/package.json contendra lo siguiente:

{
 "name": "proyecto",
 "version": "1.0.0",
 "description": "mi proyecto vue js",
 "author": "el autor",
 "private": true,
 "scripts": {
   "postinstall": "npm install express"
 }
}

3. Ahora dentro de la carpeta /dist, también creamos un archivo llamado server,js.

El archivo /dist/server.js contendra lo siguiente:

var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);

4. Ahora en la linea de comandos iniciamos sesion en Heroku, para ello primero debemos instalar el Cliente de Heroku, segun el sistema operativo que tenemos. Tambien debemos tener instalado GIT.

Una vez instalado git y el cliente de Heroku, ejecutamos lo siguiente en la consola:

$ heroku login

Ponemos nuestro correo electronico y contraseña de la cuenta con que creamos Heroku.

4. Ahora dentro de la carpeta /dist de nuestra aplicacion Vue js con webpack ejecutamos los siguientes comandos de git.

$ git init
$ heroku git:remote -a mi-app-heroku

5. Para subir nuestro proyecto vue js de nuestra computadora en local para que se ejecute en internet gracias a Heroku, lo hacemos mediante git, con los siguiente comandos, seguimos dentro de la carpeta /dist

$ git add .
$ git commit -am "primer commit"
$ git push heroku master

Empezara a subir los archivos de la carpeta /dist que fueron creados con el comando npm run build a Heroku. Si nos sale algun error en este ultimo proceso, repetir los pasos 4 y 5.

6. Finalmente nos vamos a la URL que Heroku nos da para ver nuestra aplicacion Vue js con Webpack desplegada.

Recomendaciones: Este metodo funciona si creamos nuestra aplicacion con webpack, ya que si se creo con webpack-simple no podremos hacer deploy en Heroku.

Si quieren aprender mas de Vue js, les recomiendo seguir este Curso Online de Vue js totalmente GRATIS.

Si este tutorial les sirvio de ayuda no duden en dejar su comentario. Gracias!!

Como Deshabilitar ESLint

2017-05-11T15:05:00.001-05:00

ESLint es una libreria para mostrar los errores de nuestra aplicacion web en EcmaScript 6 o ES6.

En ocaciones este libreria resulta ser un poco molesta para algunos desarrolladores por que muestra los errores de manera implicita, en la misma interfaz del navegador.

Para desactivar ESLint , o Deshabilitar ESLint de nuestro proyecto, lo haremos comentando las siguientes lineas de la carpeta ubicada en nuestro proyecto web:

mi_proyecto/build/webpack.base.conf.js

Buscar las siguientes lineas y comentarlas:

preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      }
    ],

Debe quedar asi:

/* preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      }
    ],
*/

Como actualizar la version de NODE JS en Windows

2017-02-22T16:19:00.001-05:00

En esta nueva entrada te mostrare como actualizar la version de NodeJs en Windows.

Primero debemos instalar NVM, que es una herramienta que nos permitira manejar distintas versiones de NodeJs y NPM en nuestra computadora.

Instalamos el archivo ejecutable que descargamos de AQUI.

Ahora abrimos la terminal de Windows y ponemos el siguiente comando:

nvm -v

Si se ha instalado correctamente nos aparecera la version actual del NVM que instalamos.

Ahora si, para poder instalar varias versiones de NodeJs tecleamos el siguiente comando en la terminal:

En esta caso la version que queremos sera 0.12.7 para un Windows de 64 bits, si no estas seguro de que version de windows tienes, ya no pongas el 64 en el comando.

nvm install 0.12.7 64

ó

nvm install 0.12.7

Similarmente podemos instalar otra version de NodeJs:

nvm install 4.2.1 64

Ahora si queremos ver todas las versiones de NodeJs tecleamos el siguiente comando:

nvm list

Si lo que queremos es usar cualquier version que ya tenemos instalada, usaremos el siguiente comando:

nvm use 4.2.1 64

Eso seria todo, cualquier preguntas que tienes no dudes en escribirme en un comentario.

-->

Como Obtener el Alto y Ancho Real de una Pagina con JAVASCRIPT

2016-06-02T19:02:00.003-05:00

Para obtener el alto y ancho real de una pagina web utilizamos el siguiente codigo.

Este codigo en javascript es para calcular el alto real de la pagina, osea todo el contenido que es visible pero haciendo scroll vertical:

document.body.scrollHeight;

Este codigo en javascript es para calcular el ancho real de la pagina, osea todo el contenido que es visible pero haciendo scroll horizontal:

document.body.scrollWidth;

Si te sirvio, ayudanos compartiendo!
-->

Como Hacer un Slider de Imagenes y Texto en Jquery y CSS

2016-05-06T16:13:00.000-05:00

Como Hacer un Slider de Imagenes y Texto en Jquery y CSS
En este post aprenderemos a hacer un Slider de Imagenes con Texto con Jquery y CSS Para ello utilizaremos el Plugin de SliderJS Para empezar debemos tener la siguiente estructura en HTML:

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ejemplo Slider</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script src="http://www.jose-aguilar.com/scripts/jquery/slidesjs/examples/images-with-captions/js/slides.min.jquery.js"></script>
    </head>
    <body>
        <div id="slides">
            <div class="slides_container">
                <div class="slide">
                    <a href="#" > 
                        <img src="http://www.buenosaires.gob.ar/sites/gcaba/files/baires_8_0.jpg" >
                    </a>
                    <div class="caption">
                        <p>Texto del Slide #1</p>
                    </div>
                </div>
                <div class="slide">
                    <a href="#">
                        <img src="http://media-cdn.tripadvisor.com/media/photo-s/00/1c/80/01/tokyo-tower-from-roppongi.jpg" >
                    </a>
                    <div class="caption">
                        <p>Texto del Slide #2</p>
                    </div>
                </div>                  
                <div class="slide">
                    <a href="#">
                        <img src="http://www.cruceroclick.com/admin/archivos/Image/PAISAJES/POLINESIA/Tranquil_Lagoon_Bora_Bora_Island_French_Polynesia.jpg">
                    </a>
                    <div class="caption">
                        <p>Texto del Slide #3</p>
                    </div>
                </div>
            </div>

            <a href="#" class="prev"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-left-01-32.png" alt="Arrow Prev"></a>
            <a href="#" class="next"><img src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-right-01-32.png"  alt="Arrow Next"></a>
      
        </div>
    </body>
</html>

El codigo CSS es como se muestra :

#slides {
        margin:0 auto;
        position: relative;
    }
    .slides_container {
        margin:0 auto;
        width:580px;
        height: 280px;
        overflow:hidden;
        position:relative;
    }
    .slides_container .slide {
        width:580px;
        height: 280px;
        display:block;
    }

    #slides .next, #slides .prev {
        position: absolute;
        top:107px;
        width:24px;
        height:24px;
        display:block;
        z-index:101;
    }
    #slides .next {
        right:300px;
    }
    #slides .prev {
        left:300px;
    }
    .pagination {
        margin:26px auto 0;
        width:100px;
    }

    .pagination li {
        float:left;
        margin:0 1px;
        list-style:none;
    }
    .pagination li a {
        display:block;
        width:12px;
        height:0;
        padding-top:12px;
        background-image:url('http://i.imgur.com/VRdGEDj.png');
        background-position:0 0;
        float:left;
        overflow:hidden;
    }
    .pagination li.current a {
        background-position:0 -12px;
    }
    .caption {
        z-index:500;
        position:absolute;
        bottom:-15px;
        left:0;
        height:50px;
        padding:5px 20px 0 20px;
        background:#000;
        background:rgba(0,0,0,.5);
        width:540px;
        font-size:1.3em;
        line-height:1.33;
        color:#fff;
        border-top:1px solid #000;
        text-shadow:none;
    }

El codigo en Jquery es como se muestra

$(function(){
                $('#slides').slides({
                    play: 5000,
                    pause: 2500,
                    hoverPause: true,
                    animationStart: function(current){
                        $('.caption').animate({
                            bottom:-15
                        },100);
                        if (window.console && console.log) {
                            console.log('animationStart on slide: ', current);
                        };
                    },
                    animationComplete: function(current){
                        $('.caption').animate({
                            bottom:0
                        },200);
                        if (window.console && console.log) {
                            console.log('animationComplete on slide: ', current);
                        };
                    },
                    slidesLoaded: function() {
                        $('.caption').animate({
                            bottom:0
                        },200);
                    }
                });
            });

Puedes ver DEMO AQUI -->

Como hacer una Ventana Modal con Solo CSS y HTML sin Plugins

2016-04-29T16:30:00.001-05:00

En esta entrada haremos una Ventana Modal con Solo CSS y HTML sin Plugins

El siguiente código funciona para abrir la ventana modal después de que se cargue la pagina.

Posteriormente se puede implementar con Jquery para abrir una ventana modal al hacer clic en un boton.

Primero en nuestro HTML debemos tener la siguiente estructura:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  
   <!-- Inicio  Modal-->
   <input type="checkbox" id="close-modal">
   <label for="close-modal" id="btn-close-modal"></label>
   <div class="modal">
     <div class="content-modal">
       <h1>Hola</h1>
        <p>Este es el contenido del modal</p>
     </div>
   </div> 
  <!-- Fin  Modal-->
  
</body>
</html>

Luego los estilos en CSS son:

.modal{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.75);
    position: fixed;
    z-index: 50000;
    top: 0;
    left: 0; 
    display: flex;
    -webkit-animation: modal 2s 3s forwards;
    -moz-animation: modal 2s 3s forwards;
    -o-animation: modal 2s 3s forwards;
    -ms-animation: modal 2s 3s forwards;
    animation: modal 2s 3s forwards;
    visibility: hidden;
    opacity: 0;
}
.content-modal{
    width: 300px;
    height: 250px;
    margin: auto;
    background: #fff;
    text-align: center;
}
#close-modal{
    display: none;
}
#close-modal:checked + label, #close-modal:checked ~ .modal {
    display: none;
}
#close-modal + label {
    position: fixed;
    color: #fff;
    z-index: 500000;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    top:50%;
    right: 50%;
    margin-top: -140px;
    margin-right: -165px;
    cursor: pointer;
    font-weight: bold;
    text-indent: -9999px;
    background: url("data:image/png;base64,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") no-repeat 0 0;
    -webkit-animation: modal 2s 3s forwards;
    -moz-animation: modal 2s 3s forwards;
    -o-animation: modal 2s 3s forwards;
    -ms-animation: modal 2s 3s forwards;
    animation: modal 2s 3s forwards;
    visibility: hidden;
    opacity: 0;
}
@keyframes modal{
    100%{
        visibility: visible;
        opacity: 1;
    }
}

La posicion del Boton cerrar depende del ancho y alto del contenido.

Puedes ver el DEMO

-->

Como recargar pagina con javascript

2016-02-15T10:44:00.000-05:00

Para recargar una pagina con Javascript ultilizamos el siguiente codigo:

<a href="javascript:location.reload()">Actualizar</a>

-->

QUE ES UNA PTC Y COMO GANAR DINERO POR INTERNET

2016-02-07T15:44:00.002-05:00

Una PTC es aquella que te paga por click en banners o enlaces a través de su web.
PTC (Paid-To-Click) o en español "Pago por clic" es un modelo de negocio basado en la publicidad en Internet. Son empresas de publicidad que pagan por visitar las webs de sus clientes. Sus clientes suelen buscar visitas y estas empresas se lo consiguen.

Las paginas PTC mas confiables y que vienen pagando a sus usuarios son las siguientes, recomiendo mucho registrarse para empezar a ganar dinero por Internet:

Hacer menú con triángulo hacia arriba CSS HTML

2016-02-03T12:49:00.000-05:00

Cuando Tenemos un menu desplegable y queremos que aparezca un triangulo en la parte de arriba hacemos lo siguiente:

CODIGO HTML:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<nav>
  <ul class"menu">
    <li><a href="#">Menu 1</a></li>
    <li id="li-submenu">
      <a href="#">Menu 2</a>
      <div id="submenu" style="display: none;">
        <div id="triangulito"></div>
        <ul>
          <li><a href="#">Submenu 1</a></li>
           <li><a href="#">Submenu 2</a></li>
          <li><a href="#">Submenu 3</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
  </ul>
</nav>

CODIGO CSS:

/*Para despleglar menu horizontal */
nav ul{
    list-style: none;
    display: block;
    
}
nav ul li{
    float: left;
    margin-right: 0.5em;
}

/*Para  el submenu */
#submenu {
    position: absolute;
    z-index: 1;
}

#submenu ul {
    padding: 15px 20px 5px 15px;
    background: #333;
    border-radius: 3px;
    margin-top: 0.5em;
}

#submenu ul li {
    float:none;
    font-size: 1em;
    text-align: left;
    list-style-type: none;
    margin: 0 0 7px;
    cursor: pointer;
    display: list-item;
}

#submenu ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: normal;
    cursor: pointer;
}

/*PARA EL TRIANGULO*/
#triangulito {
    margin-left: 10px;
    margin-bottom: -8px;
    width: 0px; 
    height: 0px; 
    border-left:  10px solid transparent;
    border-right: 10px solid transparent; 
    border-bottom: 10px solid #333;
}

CODIGO JAVASCRIPT CON JQUERY:

$(document).ready(function(){
    //Para despleglar al pasar mouse por encima
    $("#li-submenu").on( "mouseenter", function() {
      $("#submenu").css( "display", "block" );
    });
    $("#li-submenu").on( "mouseleave", function() {
      $("#submenu").css( "display", "none" );
    });
})

CLIC PARA VER EL DEMO:

Abrir una URL en una nueva pestaña con JavaScript

2016-01-29T12:12:00.002-05:00

El código para abrir una URL en una nueva pestaña con javascript es el siguiente:

function abrirPestania() {
  var url='http://www.google.com';
  var win = window.open(url, '_blank');
  win.focus();
}

El codigo que iria en el HTML seria:

<div onclick="abrirPestania();">Hazme Clic</div>

Ajustar imagen de fondo a todo el ancho del DIV

2016-01-26T13:45:00.001-05:00

Para que un elemento DIV tenga una imagen de fondo y que este ocupe el 100% del ancho utilizamos el siguiente codigo:

#mi_div{
     background: url(direccion de la imagen);
     backgorund-size: cover;
}

Obtener el ancho y alto de la pantalla con javascript

2016-01-25T12:07:00.003-05:00

Para saber el ancho y alto de la pantalla donde se visualiza nuestra pagina utilizamos el siguiente codigo:

alert('El ancho de la resolucion de pantalla es de '+screen.width+'pixeles'); 
alert('El alto de la resolucion de pantalla es de '+screen.height+'pixeles');

Mostrar y Ocultar DIV al hacer SCROLL con Jquery

2016-01-25T12:02:00.000-05:00

En algunas ocasiones necesitamos que cierto elemento aparezca o desaparezca al scroll en la pagina web.
Para ello solo debemos indicar en el Jquery que DIV queremos ocultar o mostrar. En nuestro caso tenemos el siguiente Div:

<div id="caja-flotante">CAJA FLOTANTE</div>

Ahora Escribimos el siguiente codigo en Jquery:

<script>
    $(function(){
        $(window).scroll(function(){
            if ($(window).scrollTop() > 30)
            {
                $("#caja-flotante").fadeOut();
            }
            else
            { 
                $("#caja-flotante").fadeIn();
            }
        });
    });
</script>

Ahora al hacer scroll el div indicado se mostrara o ocultara, esta tecnica es ideal para FANBOX de redes sociales como se muestra en este post:

http://codigos-taz.blogspot.pe/2016/01/fanbox-de-redes-sociales-flotantes-en.html

Fanbox de Redes Sociales Flotantes en Pagina Web

2016-01-25T11:18:00.000-05:00

Para tener los iconos de fanpage de las redes sociales en nuestra pagina web, que esten a un lado flotando y siempre fijos, basta con incluir el siguiente codigo en nuestro HTML.

<a href='URL de tu Pagina' target='_blank' title='Síguenos en Facebook'><img src='http://i.imgur.com/imjkLMw.png' width="40" height="40" style='display:scroll;position:fixed;bottom:335px;right:0px' alt="" /></a>
    <a href='URL de tu Pagina' target='_blank' title='Síguenos en Twitter'><img src='http://imgsrv.power991fm.com/image/kujr/UserFiles/Image/Twitter-Logo-png-2.png' width="40" height="40" 
    style='display:scroll;position:fixed;bottom:290px;right:0px' alt="" /></a>
    <a href='URL de tu Pagina' target='_blank' title='Síguenos en YouTube'><img src='http://a4.mzstatic.com/us/r30/Purple3/v4/d6/e4/12/d6e41207-d0ee-96c5-6f9d-e789c6e4caf7/icon128-2x.png' width="40" height="40" 
    style='display:scroll;position:fixed;bottom:245px;right:0px' alt="" /></a>

Como construir un robot con Raspberry Pi - DEMO

2016-01-08T13:03:00.000-05:00

Robot construido con Raspberry Pi y controlado remotante via WiFi.

Demo Encendido de Led con Arduino y Raspberry Pi

2016-01-08T12:24:00.003-05:00

Un demo de como encender leds con arduino y raspberry pi.

Como usar background-image y background-color a la vez en HTML y CSS

2015-10-06T13:46:00.001-05:00

Cuando en nuestro sitio web queremos utilizar background-image y background-color a la vez hacemos lo siguiente:

Nuestro HTML debera tener la siguiente estructura:

<html>
<head>
    <title></title>
</head>
<body>
    <div id="wrap">
    Aqui va todo el contenido de la pagina
    </div>
</body>
</html>

Ahora en nuestro CSS tendremos lo siguiente:

body {
  height: 100%;
  background-image: url("mi_imagen.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#wrap {
  background: rgba(0,0,0,0.85); //Color negro transparente para que se vea la imagen

}

Y eso es todo, con eso tendremos una pagina web con una imagen de fondo y color transparente para que se aprecie la imagen

-->

Deshabilitar ZOOM de paginas HTML en dispositivos moviles

2015-10-06T12:05:00.001-05:00

Al momento de hacer Zoom con los dedos en un navegador movil (android o ios), en ocaciones resulta molesto para algunos desarrolladores. La solucion a este problema es el siguiente:

Poner dentro del HEAD de nuestro sitio web lo siguiente:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">

Esto hara que nuestros sitios web al ser visualizados desde un dispositivo movil, los usuarios no puedan hacer zoom con el double tap.