Entradas

Mostrando entradas de noviembre, 2016

Que es CSS Sprite y las mejores herramientas online para generarlos

Imagen
El concepto de  w3schools : Un sprite de imagen es una colección de imágenes puestas en una sola imagen . Una pagina web con muchas imágenes puede tardar mucho tiempo en cargar y generar varias solicitudes de servidor.  El uso de Sprites de imagen reducirá el numero de solicitudes de servidor y ahorrara ancho de banda. Un ejemplo en imágenes: Como el concepto anterior lo indica consiste en una colección de imágenes agrupadas en una sola, y que a través de código CSS podemos hacer ir recorriendo cada una de esas imagenes y hacer uso de las que necesites. Un ejemplo real: Imagen Sprite: Código CSS: .sprite {     background-image: url(spritesheet.png);     background-repeat: no-repeat;     display: block; } .sprite-Arrow {     width: 19px;     height: 20px;     background-position: -5px -5px; } .sprite-ArrowWhite_Next {     width: 24px;     height: 39px;     background-position: -34px -5px; } .sprite-ArrowWhite_Prev {     width: 24

Descargar Mecamatic 3.0 Full (Mega)

Imagen
Mecamatic es un software para aprender mecanografía .  es de los mejores que existe actualmente.  Click para descargar

Herramienta para validar Twitter Cards

Imagen
Si estas integrando Twitter Cards a tu sitio web, entonces sabrás que tiene que pasar las pruebas de validación de Twitter para que esta pueda ser mostrada en el timeline de los usuario en formato de tarjeta. Para comprobar que vas por el camino correcto, Twitter ha creado una herramienta que con solo colocar la url, podrás comprobar la validez de la misma Link validador de Twitter Cards :  https://cards-dev.twitter.com/validator Ejemplo de una tarjeta valida:

Las 3 mejores herramientas para medir velocidad y rendimiento de un sitio Web

Imagen
Todos los webmasters se preocupan por medir el tiempo de carga de una pagina web, teniendo como premisa que mientras menos tarde en carga, mas rápido el usuario podrá ver lo que esta buscando, asi disminuir el porcentaje de rebote y por lo tanto aumentar la permanencia en el site, ayudando asi de forma positiva al SEO de la misma y por lo tanto a mayor visibilidad en buscadores.  Lista de Herramientas gratuitas y sin registro: Google PageSpeed link: https://developers.google.com/speed/pagespeed/insights/ Esta herramienta analiza la velocidad de carga de una web, arrojando un valor entre 1 y 100 con un color respectivo , rojo bastante malo el resultado, naranja donde los resultados son aceptable pero se pueden mejorar y verde que es donde todos queremos estar. Divide el test en dos partes el rendimiento en versión móvil y en web : Indica que partes de nuestra web o servidor debemos mejorar para tener el rendimiento mas optimo y muestra de que forma esto se p

Plantilla para crear post AMP

Imagen
Si llegaste hasta aqui es porque te interesa agregar el ya popular AMP a tu sitio web. que incluye esta plantilla: 1. Menú. 2. Integración con Font Awesome 4.5.0. 3. Fuente Roboto. 4. Compartir en Whatsapp. Link del Repositorio en GitHub: https://github.com/darwincrack/template-amp

Que es AMP y porqué deberías comenzar a utilizarlo

Imagen
Las páginas AMP ( Accelerated Mobile Pages ) son páginas web diseñadas siguiendo especificaciones que tienen como principal meta optimizar el tiempo de carga de la web. Este es un proyecto de código abierto el cual está impulsado por G oogle  en conjunto con algunos de los medios digitales más importante del mundo como The Guardian, The New York Times, BBC, El País y The Washington Post , además cuenta con el respaldo de pesos pesados tecnológicos como Facebook , Twitter  por nombrar algunos. Si bien las web responsive, se adaptan a los móviles estas por lo general tardan mucho tiempo en cargar, es por ello que ha surgido esta nueva tecnología para optimizar el tiempo de carga de la web y de alguna manera crear un nuevo paradigma para los desarrolladores ya que hay que replantearse la manera en que se están colocando tanto script tanto css para mejorar tal vez la funcionalidad o el look and feel pero sacrificando el tiempo de carga, en este caso AMP pretende mantener una bue

Solución para XAMPP de Error puerto 80 ocupado en Windows 10

Imagen
Si utilizas XAMPP en Windows 10, muy probablemente te ocurrirá el error de que el puerto 80 esta siendo ocupado tal cual como se ve en la imagen de abajo al querer iniciar Apache.  Solucionarlo es bastante sencillo: Abrir CMD en modo administrador. escribir el siguiente comando:  net stop W3SVC 3. iniciar Apache nuevamente en XAMPP y de esta manera ya queda solucionado. Si te ayudo esta solución, compártelo por favor.

Video Tutorial de como Agregar marca de agua (Watermark) a imágenes

Imagen
hemos realizado un video explicando como agregar marca de agua a las imagenes, para ello utilizamos el siguiente software: Watermark Magick 6.1 

Como Abrir Ventana Modal al Cargar la pagina utilizando Foundation CSS

Los ejemplo que vienen por defecto en la pagina oficial de Foundation CSS , no dicen o al menos yo no lo he encontrado, como abrir una ventana modal al momento de cargar la pagina. para aquellos que se pregunte lo mismo, aqui esta la solución: El HTML de la ventana: <div id="myModal" class="reveal-modal" data-reveal>   <h2>MI titulo</h2> <p>Contenido</p>   <a class="close-reveal-modal">&#215;</a> </div> El JS: $(document).foundation(); //con esta linea le indicamos a la pagina que cargue la ventana modal $(document).ready(function(){$('#myModal').foundation('reveal', 'open')});

Como mantener la ventana modal en el centro de la pagina al hacer Scroll en Foundation CSS

Probado en   Foundation CSS 5.5.3 aunque no dudo que puede servir para versiones posteriores u anteriores. Por defecto la ventana modal al hacer scroll en la pagina esta no se mantiene centrada en la misma, aqui esta la solución para el que desee mantener la ventana en el centro de la pagina . .reveal-modal { position : fixed ; }

Generar Iframe de Youtube con PHP

$videolink="https://www.youtube.com/watch?v=4xEYOMXdGe8"; $ytarray=explode("/", $videolink); $ytendstring=end($ytarray); $ytendarray=explode("?v=", $ytendstring); $ytendstring=end($ytendarray); $ytendarray=explode("&", $ytendstring); $ytcode=$ytendarray[0]; echo "<iframe width=\"420\" height=\"315\" src=\"http://www.youtube.com/embed/$ytcode\" frameborder=\"0\" allowfullscreen></iframe>"; esto es una prueba sdfsdfsdfsdfsd