Nuevas capacidades de Javascript con Html5

Javascript, el lenguaje favorito del desarrollador de frontend y experiencias de usuario en la web, ha
recibido muchas habilidades nuevas. Esta es una lista de las más importantes.
Web Storage
Una cookie es la forma más casposa de guardar información en el lado del cliente. También es la única
forma. Las cookies no pueden guardar más de 4KB por cookie, 100KB por dominio. Muy poco. Pero al
mismo tiempo, todo el contenido de las cookies va pegado a cualquier petición HTTP que hagas al servidor.
Lo que significa que por cada vez que el usuario recarga la página o baja una imagen, tiene que
subir los KB que pesan todas las cookies que le hemos dado.
Las cookies apestan.
Web Storage soluciona este problema. Son variables que puedes guardar en el disco del usuario, con
soporte en todos los navegadores (incluyendo IE8), puedes guardar hasta 5MB y no sólo texto. Cualquier
tipo de datos cabe en un Storage.

 

Web SQL

Este me gustaba. Es una base de datos tipo SQLite controlable con sólo Javascript. Pero Internet Explorer
9 declaró que no implementará Web SQL1 y la realidad es que Web Storage es más que suficiente
para la mayoría de usos. Así que nada, esto por ahora no sirve.

 

Web Workers
¿Ustedes sabían que Javascript sólo puede hacer una cosa al tiempo? Gran parte de la razón por la que
Wave falló y las web apps son simples es porque la multitarea es imposible. Web Workers soluciona eso.
Web Workers permite tener multiples .js corriendo en paralelo en una misma página. Haciendo tareas
complejas más veloces gracias al multithreading.

 

Web Sockets
Igual que XMLSockets en Actionscript, Web Sockets permite hacer aplicaciones multiusuario en tiempo
real, como juegos, chats, notificaciones, etc. Si el navegador no tiene soporte de Web Sockets, es posible
usar implementaciones multiuser en Javascript como PubSubHubBub1.
Arrastrar y soltar

Vete a gmail, crea un email e intenta arrastrar un archivo del explorador de archivos al mail. Verás que
es posible adjuntarlo con sólo arrastrarlo. El gesto de arrastrar y soltar ahora es posible gracias a HTML5.
Puedes traer trozos de datos o archivos enteros.
Geolocalización

Mi favorita. El navegador hará uso de muchos métodos (GPS, Skyhook, Google Geo, IP) para darte la
latitud y longitud de tus usuarios. Obviamente, ellos tienen que dar permiso. Lo mejor es que funciona
en cualquier PC, no sólo en teléfonos
Más adelante un capítulo dedicado a la geolocalización en la guía.

¿Por qué es importante HTML5?

Entender HTML5 es entender que hoy nos conectamos desde teléfonos móviles, tabletas, eBooks,
netbooks, computadores y otra gama de dispositivos. Es entender que se acabaron los webmasters
y hoy hablamos de equipos multidiciplinarios de empresas de tecnología que cuentan con frontends,
backends, sysadmins, mobile devs, comunity managers y arquitectos de información en los proyectos
que están reiventando mercados y generando tráfico e ingresos.
Podemos hablar de todas las empresas gigantes de la web, podemos enumerar a Microsoft, Google,
Apple, Adobe, Facebook, Yahoo, Mozilla y miles de proyectos tecnológicos que independientemente de
sus objetivos hoy respiran HTML5, lo apoyan y tienen propuestas que los hacen competir en código en
el navegador más cercano a tu pantalla. Es una de sus más importantes estrategias de posicionamiento
y es una de sus más fuertes apuestas de reclutamiento. Dije además que HTML5 tiene logo de superheroe
y que venden camisetas para apoyar al movimiento?

 

Nuevas etiquetas de HTML5

<header>
Hacer cosas como <div id=”header”> es un poco estúpido cuando el 99% de los proyectos web
tienen una cabecera. <header> está diseñada para reemplazar la necesidad de crear divs sin significado
semántico.
<hgroup>
Muchos headers necesitan múltiples títulos, como un blog que tiene un titulo y un tagline explicando el
blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar el SEO, permitiendo usar
otro h1 en el sitio.
En el HTML actual, sólo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO.
<nav>
Igual que <header>, <nav> está diseñado para que ahí coloques la botonera de navegación principal.
Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas <ul>.
<section>
Define un área de contenido única dentro del sitio. En un blog, sería la zona donde están todos los posts.
En un video de youtube, habría un section para el video, uno para los datos del video, otro para la zona
de comentarios.
<article>
Define zonas únicas de contenido independiente. En el home de un blog, cada post sería un article. En
un post del blog, el post y cada uno de sus comentarios sería un <article>.
<aside>
Cualquier contenido que no esté relacionado con el objetivo primario de la página va en un aside. En un
blog, obviamente el aside es la barra lateral de información. En el home de un periódico, puede ser el área de indicadores económicos.
<footer>
Este es obvio. Es el pie de página y todo lo que lo compone.

Atención <div> no está muerto:

 

Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse cuando necesites
una caja con objetivos de diseño gráfico o cualquier cosa que no tenga significado semántico. Sólo
usa las etiquetas semánticas de HTML5 donde sean necesarias.

 

Las etiquetas nuevas importantes de HTML5

Las etiquetas semánticas, a pesar de ser claves para posicionamiento en buscadores y buen desarrollo
web, no son la razón por la que todo el mundo habla de HTML5. Video, audio y animación vectorial
están en la lista de prioridades y en la boca de todas las personas que evangelizan su uso. Específicamente,
las nuevas etiquetas son:
<video>
Inserta video sin necesidad de plugins. Es muy fácil usarla, pero cada navegador soporta codecs diferentes
de video, lo que hace necesario recodificar un video en múltiples codecs. En un futuro capítulo
hablamos un poco del drama que este tag está generando.
<audio>
Lo mismo que video, pero sin video. Puede usar múltiples formatos, en especial mp3, pero también
depende del navegador.
<input *>
Input ya existía como la etiqueta para insertar cajas de texto y botones. Ahora es más poderosa, con la
capacidad de insertar cajas tipo “email” que se autovalidan, calendarios tipo “date”, sliders, números,
entre otras.
<canvas>
Un área de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero para Javascript.
<svg>
Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo de Flash. Todo basado en el estándar abierto SVG (Scalable Vector Graphics), derivado de XML.

Soporte HTML5 en navegadores viejos

HTML5 trae al mundo del desarrollo web habilidades que, siendo el 2010, era casi vergonzoso no tener.
Cosas como <video> y <canvas> eran más que necesarias. Sin embargo, no es el primer gran cambio
de internet. La primera gran revolución del desarrollo web vino en el 2004 con Gmail, al traer a la luz el
objeto XmlHttpRequest, más conocido como AJAX.

Lo que pocos saben es que AJAX fue creado por Microsoft para Internet Explorer 5 en 1999. Sí, el navegador
responsable de detener la innovación en los estándares web también es el creador de la innovación
más importante sin la cual, cosas como Gmail, Facebook, Google Maps o quizás Twitter, habrían
sido inviables.

 

 

Internet Explorer, claro, es también la razón de la poca adopción de HTML5. Sin embargo, hay formas de
que las etiquetas semánticas de HTML5 y atributos de CSS3 funcionen en IE.
Gracias a los grandes hackers del mundo:

  • HTML5 Enabling Script1: Permite usar las etiquetas semanticas dentro de IE6, 7 y 8 como si fueran
    divs normales, estilizables por CSS. Sin este script, las etiquetas son ignoradas en IE y es imposible
    agregarles diseño a ellas o cualquier elemento dentro de ellas.
    Para utilizarlo debes incluir esta línea en el HEAD de tu documento.

  • IE-CSS3: Usando arcanas técnicas (DirectX y VML), este raro script permite usar cosas como bordes
    redondeados y sombras sobre objetos de CSS3 en IE6, 7 y 8. Es magia negra, les digo!
  • Modernizr: Cuando todo falla, con Modernizr puedes detectar si el navegador tiene soporte para
    multiples capacidades de Javascript, HTML5 y CSS3. Si no, tu mismo puedes codear la solución o
    alternativa.

Gracias a estos scripts y a los valientes hackers del mundo que los escribieron, podemos ser desarrolladores
felices.

No tienen por qué sufrir. Soportar IE6 es más caro que las visitas que aporta. Manden al carajo IE6 y
vivan el feliz mundo de HTML5.

Laragon, rápido y fácil localhost server, alternativa a XAMPP Y WAMP

 

Cuando empezamos en el mundo del desarrollo de software, siempre procuramos utilizar las mejores herramientas y utilidadesque existan, si estas de acuerdo conmigo te gustara esta herramienta.

Laragon es una excelente alternativa a los tradicionales XAMPP y WAMP,  nos provee de una valor agregado muy friendly, fácil configuración y rapidez.

Para hacerte con esta herramienta solo basta con ir a su sitio oficial y descaragar esta excelente herramienta.



Características geniales.

  • Crea automáticamente un host virtual.
  • Mail Catcher y Mail Sender.
  • Cambiar de versión de PHP, Apache, MySQL y MariaDB es muy fácil.
  • Fácil creación de proyectos con frameworks como Laravel, Symfony, WordPress, Joomla y etc.
  • Configuración: puede configurar su entorno de acuerdo con sus requisitos muy fácilmente.

Host virtual

Cuando crea una nueva carpeta en la carpeta de raíz de documentos de Laragon y se inicia la aplicación, automáticamente crea Host virtual.

Por defecto, el nombre del host es http://nombre_proyecto.dev , abre el dominio en tu navegador favorito.



Laragon se instala por defecto en la raíz de la carpeta ó disco C, pero puede cambiar la carpeta raíz y la extensión, como por ejemplo http://nombre_proyecto.des o lo que gustes.

Nota : Después de crear su nueva carpeta en la raíz del documento, reinicie Laragon o haga clic en Detener y luego en Iniciar todo . De esa forma, Laragon encontrará y creará su nuevo host virtual.

 

Mail Catcher y Mail Remitente

Correo Cather

Cuando desarrollas aplicaciones web, a veces necesitas enviar un correo electrónico para probar si todo funciona. En lugar de utilizar su correo electrónico y llenarlo con correos electrónicos de prueba, Laragon ofrece la función de Mail Catcher. Almacenará correos electrónicos enviados desde su aplicación y los mostrará por 5 segundos de forma predeterminada. De esta forma, puede obtener una vista previa de sus correos electrónicos de manera sencilla y no necesitará buscarlos en su bandeja de entrada o carpeta de correo no deseado.

Nota : Los correos electrónicos enviados con correo PHP ()

Los correos electrónicos se guardan como archivos html o de texto ubicados en  C: \ carpeta_instalación \ bin \ sendmail \ salida   en mi caso C: \ laragon \ bin \ sendmail \ output

Correo con remitente

Si desea enviar correos electrónicos, puede usar Laragon Mail Sender. Funciona con la cuenta de GMail solo con la dirección y la contraseña de Gmail y puede enviar correos electrónicos.

 

Cambio de versión de PHP, Apache y MYSQL

Puede cambiar php, Apache y la versión de MySQL muy fácil desde el menú de Laragon.



Simplemente seleccione la versión y haga clic en él. Reinicie Laragon y esté listo para desarrollarse.

Descargue y agregue versiones php a Laragon

Para la versión de php, puede encontrarlos en  http://windows.php.net/download/ . Necesita una  versión sin hilos seguro Descárgalo y descomprímelo en   C: \ install_folder \ bin \ php   en mi caso

C: \ laragon \ bin \ php

 

Cambiar tu versión de MySQL también es tan simple.

swithcip mysql

Descargue e instale más versiones de MySQL

Puede encontrar y descargar la versión zip de MySQL aquí https://dev.mysql.com/downloads/mysql/ . Descargue Windows (x86, 32 bits),versión ZIP Archive  y descomprímalo en  C: \ install_folder \ bin \ mysql   en mi caso  C: \ laragon \ bin \ mysql

mysqlversions

Después de eso reinicia Laragon para encontrar la nueva versión de MySQL y cambiarla.

Nota : ¡Antes de eso, procura hacer backup.

Descargue e instale la versión de Mariadb en Laragon

La versión de Mariadb se puede descargar aquí https://downloads.mariadb.org/, haga clic en la última versión. Para mí, la última versión es  Descargar 10.2.9 ¡Estable ahora! y desde adentro descargue el archivo zip de Windows x86.Descomprimirlo en   C: \ install_folder \ bin \ php   en mi caso. Ahora reinicia Laragon y selecciona tu nueva versión.

Nota : ¡Antes de eso, procura hacer backup.

 

Descargue e instale la versión Apache

Aquí puede encontrar y descargar apache http://directory.apache.org/studio/download/download-windows.html

Descargue el archivo zip de 32 bits de Windows y descomprímalo en  C: \ isntall_folder \ bin \ apache o en mi caso  C: \ laragon \ bin \ apache

Reinicia y selecciona tu Apache favorito.

apacheversions



 

Proyecto fácil de crear

Puede crear fácilmente un nuevo proyecto con un número de plataformas y marcos. Laragon trabaja con github para que siempre descargue la versión más reciente. Las plataformas y el marco que son predeterminados en Laragon son:

  • Laravel
  • Symfony
  • WordPress
  • Joomla
  • otros

También puede agregar plataformas y marcos con los que trabaje.

¿Cómo crear un nuevo proyecto con Laravel en Laragon?

  1. Haga clic en Menú en la ventana principal de Laragon o haga clic derecho con el mouse desde la Bandeja del sistema y haga clic en Crear rápido.
  2. Seleccione su plataforma o marco y haga clic en él
  3. Dé un nombre a su proyecto. Este nombre también será el nombre de la carpeta y su dominio. Por ejemplo, si llamamos al nuevo proyecto laravel, el dominio será http://laravel.dev.  NOTA: utilice nombres simples para facilitar su uso
  4. Espere que Laragon haga su trabajo
  5. Reinicia Laragon y ahora puedes acceder a tu nuevo sitio.

crear nuevo proyecto

seleccionar carpeta nombre

cmd_github

Fuente: https://fastandeasydevelop.wordpress.com/2017/05/20/fast-and-easy-localhost-with-laragon/


Manejo de Eventos Jquery-Elementos Estáticos y Dinámicos

 

Los eventos en jquery se manejan o capturan de manera muy sencilla, desde la manera mas general hasta la manera mas especifica ejemplo

Estamos Accediendo a evento click de todas las filas de las tablas que existan en la pagina, también podemos ser un poco mas específicos:

 

accedemos solamente a las filas de la tabla con identificador mitabla, podemos accedes también mediante la clase del objeto, incluso con atributos menos específicos como el nombre

 

en este caso estamos accediendo al input con nombre evento-click.

algunos otros ejemplos con varios tipos de eventos son

Eventos de elementos Agregados Dinamicamente

Los eventos se capturan de la siguiente manera

 

 

eventos dinamicos

link del proyecto:

 https://drive.google.com/file/d/0B3fNRvDCyakCS2l1SUx6RXZyMlU/view?usp=sharing

Descargar Corel Draw X5 Portable

CorelDRAW. … Esta, a su vez, es la principal aplicación de la suite de programas CorelDRAWGraphics Suite ofrecida por la corporación Corel y que está diseñada para suplir múltiples necesidades, como el dibujo, la maquetación de páginas para impresión y la publicación web, todas incluidas en un mismo programa.

link de descarga

https://drive.google.com/file/d/0B1cvB6Q7PTPjN2N0UnZIN19QSlE/view?usp=sharing

si presenta algun problema el link por favor comentar para solucionar el problema

Descargar Adobe Illustrator Portable

Resultado de imagen para illustrator logo png

Adobe Illustrator es el software standard en la industria para dibujar vectores, proporcionándote todas las herramientas que necesitas en el diseño y el arte profesionales.

Un estándar en la industria del diseño

Adobe Illustrator es la herramienta perfecta para todas los niveles del diseño. Tanto si eres un diseñador web profesional como si quieres crear un póster o unas invitaciones para la fiesta de un amigo, tu creatividad se puede desarrollar con la gran cantidad de opciones con las que cuentas: herramientas de dibujo, brochas, opciones de procesamiento del color, efectos de degradado, sin olvidar el gran número de filtros y efectos especiales con los que podrás añadir un toque final a tus ilustraciones.

link de descarga

https://drive.google.com/file/d/0B1cvB6Q7PTPjOEtKQWZaSmJiZTQ/view?usp=sharing

 

si presenta algun problema el link por favor comentar para solucionar el problema