1CarlosMex

Con el fuerte camino que lleva HTML5 nace una nueva herramienta llamada Swiffy. Anteriormente ya existía una herramienta con el mismo objetivo pero era de Adobe ahora llega el turno de Google con su app Swiffy. Swiffy convierte formatos .SWF solo lo subes al fichero y la aplicacion te lo regresa en instantes es muy rápido. Puedes ir a Su pagina oficial para probar esta herramienta. Mas informacion en CentroMex

La geolocalización es en pocas palabras asociar un recurso digital a una locación física ya sea mediante imágenes, vídeos, textos o meta-datos. Con HTML5 podemos saber la localización de un usuario aunque en realidad es la de su ordenador. El punto que se muestra en el mapa no es exacto pero es una aproximación bastante cerca. Puedes ver el ejemplo en la fuente.. y probablemente tu navegador te pida permisos para saber tu locación pero tranquilo acepta los permisos, nadie sabrá tus datos. Lo primero que tenemos que hacer es crear es un parrafo con un identificador llamado demo que sera en donde aparezcan los mensajes de error. Después crearemos un div con la identificación mapholder. <p id="demo"></p> <div id="mapholder"></div> Ahora enlacemos el mapa de google. <script src="http://maps.google.com/maps/api/js?sensor=false"></script> Ahora coloquemos el script que hace prácticamente todo el trabajo. var x=document.getElementById("demo"; /* Función de la localización*/ function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{x.innerHTML="Tu navegador no soporta geolocalización.";} } /*Función de posición*/ function showPosition(position) { lat=position.coords.latitude; lon=position.coords.longitude; latlon=new google.maps.LatLng(lat, lon) mapholder=document.getElementById('mapholder') mapholder.style.height='260px'; mapholder.style.width='590px'; /*Opciones*/ var myOptions={ center:latlon,zoom:14, /*zoom en el mapa*/ mapTypeId:google.maps.MapTypeId.ROADMAP, mapTypeControl:false, navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} }; var map=new google.maps.Map(document.getElementById("mapholder",myOptions); var marker=new google.maps.Marker({position:latlon,map:map,title:"Aquí estas"}); } /*Mensajes de errores*/ function showError(error) { switch(error.code) { case error.PERMISSION_DENIED:/*Solicitud denegada*/ x.innerHTML="El usuario negó la solicitud de Geolocalización" break; case error.POSITION_UNAVAILABLE:/*No disponible*/ x.innerHTML="La información de localización no esta disponible" break; case error.TIMEOUT:/*Tiempo agotado*/ x.innerHTML="El tiempo de espera se agotó." break; case error.UNKNOWN_ERROR:/*Error desconocido*/ x.innerHTML="A ocurrido un error desconocido." break; } Por ultimo nos falta agregar un botón que llame al script. <button onclick="getLocation()">¡Encontrarme!</button> El usuario al hacer clic en el botón le mostrara un aproximado de su ubicación pero claro antes tendrá que dar permisos al navegador, y en caso de que lo deniegue o surja algún otro error se le mostrara en el párrafo con el identificador demo. Puedes darle estilos al botón pero eso esta de más.

Muchos desarrolladores web no conocen los prefijos de CSS para los navegadores, y es que son de gran utilidad al estar programando. Apple Corporation -webkit- La mas conocida y utilizada por lo desarrolladores, nos sirve para los navegadores Google Chrome, Safari y otros. Mozilla Foundation -moz- Podría decirse que es el segundo mas utilizado por nosotros los programadores, y nos es útil para Mozilla Firefox y otros. Opera Software -o-,-xv- Es para Opera y apuesto que no los conocías, el menos utilizado en la web desgraciadamente. Opera Mobile Aliance -wap- Si no conocías los anteriores de opera supongo tampoco este, pero ahora que lo conoces te recomiendo lo comiences a implementar ya que es para Opera Mini, Opera Mobile y otros. Microsoft Corporation -ms- El maravilloso prefijo de Microsoft, no ta conocido aun pero cada día esta siendo mas implementado por los desarrolladores, lamentablemente solo es para la versión de Internet Explorer 9 (y los siguientes). Puedes ver mas información en la fuente.

Un tooltip con HTML dentro nos puede servir para distintas cosas como por ejemplo colocar imágenes o un mensaje importante para el usuario e incluso para darle tips de que hacer. Para crear este tooltip utilizaremos únicamente CSS, si deseas puedes ver el resultado que tendríamos al final de este tutorial. Primero tendríamos que crear un enlace y dentro de el otra etiqueta contenedora la cual tendrá el HTML, ya sea imágenes o texto como lo viste en el ejemplo. <a href="#" class="tooltip-2">Tooltip con HTML <span> <img src="URL-DE-TU-IMAGEN.jpg"/> <h2 class="title-tooltip"> Titulo</h2> <p>Texto del tooltip</p> <hr> <p>Aquí mas texto</p> </span> </a> Con esto tendríamos el tooltip personalizado y con HTML integrado dentro de el como ya lo mencionamos podemos colocar imágenes, y otras etiquetas HTML. Igual que anteriormente colocamos el CSS pero con más estilos personalizados. a.tooltip-2 span { cursor:default; display:none; padding:5px; margin-left:8px; width:500px; /*Ancho del tooltip*/ position:relative; z-index:9; } a.tooltip-2:hover span{ display:inline; position:absolute; /*Background con degradado*/ background: rgb(58,58,58); background: -moz-linear-gradient(top, rgba(58,58,58,1) 0%, rgba(0,0,0,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(58,58,58,1)), color-stop(100%,rgba(0,0,0,1))); background: -webkit-linear-gradient(top, rgba(58,58,58,1) 0%,rgba(0,0,0,1) 100%); background: -o-linear-gradient(top, rgba(58,58,58,1) 0%,rgba(0,0,0,1) 100%); background: -ms-linear-gradient(top, rgba(58,58,58,1) 0%,rgba(0,0,0,1) 100%); background: linear-gradient(to bottom, rgba(58,58,58,1) 0%,rgba(0,0,0,1) 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3a', endColorstr='#000000',GradientType=0 ); /*Termina background con degradado*/ border:3px solid #cccccc; color:#ddd; text-shadow:0px 0px 1px #fff; font-size:14px; font-weight:normal; opacity:0.9; box-shadow: 0 25px 10px -23px rgba(0, 0, 0, 0.7); /*Sombra del tooltip*/ } /*Estilo y poscion de imagen*/ a.tooltip-2 span img { float:right; display:block; margin:3px 5px; border:3px solid #ccc; } /*Estilo del titulo en el tooltip*/ .title-tooltip { margin:0px; color:#FFF; font-size:23px; text-shadow:1px 1px 0px #000; text-align:center; } Teniendo ya esto obtendríamos un tooltip más personalizado igual que el primer ejemplo que nos serviría para colocar información sobre un tema o bien como ya lo mencione para ayudar al usuario a navegar mejor por la web. En el tutorial completo, muestran dos tipos de tooltip, por si te interesa conocer el otro.

Muchos des-arrolladores actualizados saben hacer Sombras exteriores e interiores con CSS3 pero algunos "nuevos en esto" por así decirlo no están aun tan familiarizados. Para crear un sombra normal tenemos el siguiente código: .sombraext { box-shadow: outset 1px 3px 9px #999; -webkit-box-shadow: outset 1px 3px 7px #0f0f0f; /*Safari, Chrome*/ -ms-box-shadow: outset 1px 3px 7px #0f0f0f;/*Internet explorer*/ -o-box-shadow: outset 1px 3px 7px #0f0f0f;/*Opera*/ -moz-box-shadow: outset 1px 3px 7px #0f0f0f;/*Mozilla Firefox*/ } Tal vez no conozcas la propiedad OUTSET ya que no es necesario ponerla por que el navegador la detecta por defecto. Con este código crearíamos una bonita sombra (Que puedes ver en la fuente de este articulo). Ahora para crear una sombra Interior tendriamos el siguiente código: .sombraint { box-shadow:inset 1px 3px 9px #999; -webkit-box-shadow:inset 1px 3px 7px #0f0f0f; /*Safari, Chrome*/ -ms-box-shadow:inset 1px 3px 7px #0f0f0f; /*Internet explorer*/ -o-box-shadow:inset 1px 3px 7px #0f0f0f; /*Opera*/ -moz-box-shadow:inset 1px 3px 7px #0f0f0f; /*Mozilla Firefox*/ } Esta vez en lugar de OUTSET colocamos INSET que esto Si es necesario para que el navegador entienda que es una sombra interior.(también podrás ver el efecto en la fuente mas abajo). La compatibilidad de este efecto en los navegadores es completamente visible, con algunas fallas en Internet Explorer pero valla.. ¿que esperábamos de el?... Puedes leer el articulo completo en la Fuente.

Existen distintas formas de reducir el tamaño de cada imagen nosotros veremos las 3 mejores, sencillas y eficaces. La primera necesitaremos el software paint que viene en los sistemas operativos de windows. Simplemente abrimos la imagen que deseamos y la volvemos a guardar en el mismo formato. NOTA: las imágenes PNG con transparencia la perderán. La segunda opción sirve para los formatos PNG sin quitar la transparencia, estas herramients se llaman PNGoptimizer y PunyPNG . En ocasiones PNGoptimized no reduce nada del peso, por eso recomiendo punypng. Ahora por ultimo uno de los más conocidos y utilizados es para los formatos JPEG, reduce notablemente el tamaño de la imagen y además al igual que los anteriores no baja la calidad ni si quiera un poco: JPEGmini Un dato curioso es que entre más grande es la imagen mayor peso reduce de ella, puedes intentarlo para darte cuenta de la gran diferencia. En la siguiente liga http://www.centromex.com.ar/2012/09/reducir-peso-imagenes-png-jpg-online.html Encontraras ejemplos de las imagenes antes y despues de reducir su peso. El enlace también esta en la fuente

¿Te haz preguntado alguna vez si tu blog vale algo? o ¿cuantos ingresos podría generar diariamente? o incluso ¿cual es tu PageRank? con IN-TER-NET.info podremos saber todo esto y mucho más. Esta herramienta nos proporciona información de nuestro sitio web, desde cuantos visitantes tenemos, donde esta alojado tu host o el numero de páginas indexadas por google. Veamos los pasos a seguir para ver las estadísticas de nuestro dominio y también saber que no es útil y que no tanto Primero ingresa tu dominio, importante es solamente como se ve en la imagen, no coloques www y después damos en Lookup. Una vez accedido lo primero que veremos es esto que es la información detallada de nuestro sitio web (su valor, trafico, etc). 1.- En el número uno nos muestra el promedio de visitantes diarios. 2.- De segundo tenemos un aproximado de las páginas vistas, es decir no solo en la página principal. 3.- En el numero tres vemos nuestro pagerank de google. 4.- Ahora veremos cuantas páginas tiene indexada cada uno de los 3 motores de búsqueda más utilizados en la web. 5.- Por ultimo pero no menos importante cuantas veces han compartido nuestra url en las redes sociales Facebook y Twitter. Estos datos pueden ayudarte a mejorar tu sitio, para poder dar una mejor posición en los buscadores o lograr que los usuarios compartan más tu sitio en las redes sociales.

Todos sabemos que con CSS3 podemos agregar sombras a los elementos HTML y también al texto, pero muy pocos sabemos que podemos hacer efectos en 3D. Yo conozco dos métodos el manual y el "quiero que lo hagan por mi", así es existe una pagina web que crea tu texto en 3D llamada 3D CSS text generator tu solo das estilos y te genera el código. Aquí en taringa no podemos hacer que 'funcione' el código, por lo que si quieren ver el ejemplo tendrán que ir al Articulo original (en la fuente). Veamos el código: .sombra{ text-shadow: 1px 1px 0px #777, 2px 2px 0px #777, 3px 3px 0px #666, 4px 4px 0px #666, 5px 5px 0px #555, 6px 6px 0px #555, 7px 7px 0px #444; } Lo que se hace en el código es agregar las propiedades normales de una sombra, pero después se agrega una coma (,) para que el navegador entienda que se agregara otro atributo. No te olvides de ir oscureciendo más el color que utilizaste así se notara el efecto en 3D. Ahora lo único que queda es hacerlo compatible con todos los navegadores, excepto por Internet Explorer que no soporta esta propiedad. .sombra { -webkit-text-shadow: 1px 1px 0px #777, 2px 2px 0px #777, 3px 3px 0px #666, 4px 4px 0px #666, 5px 5px 0px #555, 6px 6px 0px #555, 7px 7px 0px #444; -moz-text-shadow: 1px 1px 0px #777, 2px 2px 0px #777, 3px 3px 0px #666, 4px 4px 0px #666, 5px 5px 0px #555, 6px 6px 0px #555, 7px 7px 0px #444; -o-text-shadow: 1px 1px 0px #777, 2px 2px 0px #777, 3px 3px 0px #666, 4px 4px 0px #666, 5px 5px 0px #555, 6px 6px 0px #555, 7px 7px 0px #444; } Con esto ya sería compatible, y por explorer no te preocupes no se notara ningún cambio se vera como si no tubiese nada.

Limpiar tu código puede traerte muchas ventajas, las principal y la que más nos interesa es que el blog cargue más rápido así es, comprimir tu CSS puede hacer que tu blog reduzca el tiempo de espera al usuario. Nosotros utilizaremos un software llamado Notepad++ tal vez ya lo conozcas por que es un complejo editor de código, y además tiene una herramienta para quitar los espacios innecesarios de tu código, que es lo que utilizaremos. En la imagen puedes apreciar lugares encerrados en rojo los cuales son ejemplos muy comunes de espacios innecesarios que son uno de los culpables de que nuestra web cargue lento, pero vamos a solucionarlo prácticamente sin hacer nada. 1.- Abre tu archivo en Notepad++ 2.- Ve a Editar después a Operación de limpieza y te da opciones para limpiar tu código, nosotros utilizaremos la opción quitar espacios al inicio y al final. Con esto lograremos haber quitado todos los espacios innecesarios y erróneos de nuestro código. Existe otra opción más la cual nos quita espacios y saltos de línea pero no es muy recomendable ya que nos será difícil editar el código pero te mostraré como se utiliza y su resultado. 1.- Igual que anteriormente vamos a Editar después Operaciones de limpieza pero esta vez seleccionamos Quitar espacios no necesarios y finales de linea Con esto obtendríamos ya quitar absolutamente todos los espacios, es decir todo quedaría en una sola linea. El resultado es el siguiente, y podrás notar que no existe ningun espacio y ningun salto de linea todo esta junto de esta manera el archivo pesara menos pero la desventaja es que sera algo complicado si es necesario editar el CSS.

Algo que hoy en día es muy usado en los sitios web, es colocar múltiples imágenes de fondo, ya sea simplemente decorativo o necesario. Pero hasta ahora no había una manera correcta para hacerlo. Existe un pequeño truco en HTML para lograr ese efecto, pero no es necesario verlo. (si quieres verlo ve al enlace de la fuente) Para colocar los múltiples fondos, se hace de la siguiente manera con CSS3 Código: #fondos { background: url(URL de imagen)no-repeat, url(URL de imagen) no-repeat, url(URL de imagen) no-repeat; } Si conoces bien la sintaxis de CSS lo entenderás al 100% pero si eres nuevo en esto, ve al enlace de la fuente para ver al articulo completo. Anteriormente no se podía hacer eso ¿por que? no lo se, pero gracias a CSS3 ya es posible y sencillo. Desgraciadamente esto aun no es visible en Internet Explorer, pero ¿que esperábamos? supongo y Internet Explorer 10 ya tendrá soporte para esto. +Info en la funete