Mayumi Blogger Template

• CSS
• HTML5
• SVG
• JS API

• Internet Explorer
• Firefox
• Chrome
• Safari
• Opera
• iOS Safari
• Opera Mini
• Android Browser
• Blackberry Browser
• Opera Mobile
• Chrome para Android
• Firefox para Android
• IE Mobile

• Se indica el estado del proceso de desarrollo la propiedad: Proposed Recommendation, Candidate Recommendations, Last Call Working Drafts, Working Drafts o Group Notes.
• Estadísticas del uso de la propiedad en la web.
• Recursos relacionados en Internet para el uso de la propiedad en cuestión.
• Listado de los navegadores mencionados con todas sus versiones, en ellas se indica si la especificación está soportada, no soportada, parcialmente soportada o se desconoce si tiene soporte.

¿Qué les pareció? ¿Conocen alguna otra página similar?

En la actualidad es soportado por casi todos los navegadores web, como podemos apreciar en el siguiente enlace.

Sin embargo, las propiedades cambian de acuerdo al navegador. Por ejemplo si se utiliza webkit, utilizado en Chrome y Safari, se requiere de la siguiente propiedad en CSS:

-webkit-border-radius: 15px;
-webkit-border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 50px;

Esto cambia si es que utilizamos Mozilla Firefox:

-moz-border-radius: 15px;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 50px;

Internet Explorer reconoce las siguientes líneas

border-radius: 15px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;

Para aplicar estas propiedades con facilidad y probarlas en tiempo real, podemos utilizar Border-Radius, una aplicación web que permite editar las propiedades de borde en cada una de las cuatro esquinas de un elemento web y definir si las queremos para WebKit, Gecko o simple CSS3.

¿Qué les pareció la aplicación? ¿Conocen alguna similar para diseño web?


Link: Border-Radius

• Chrome
• Firefox
• Internet Explorer
• Opera
• Safari

En este corto post explicamos qué versión de jQuery están utilizando actualmente.

 // Retorna la versión de jQuery con el siguiente formato: "1.10.2"
jQuery.fn.jquery;

// $ reemplaza a jQuery
$.fn.jquery;

Cómo activar la consola web en los navegadores:

• Firefox: Ctrl. + Mayúsc. + K
• Chrome: Ctrl. + Mayúsc. + I
• Internet Explorer 11: F12
• Opera: Se hacer clic derecho en cualquier zona de la página web y se escoge la opción 'Inspeccionar Elemento'

Realiza copias de seguridad de Firefox, Chrome, Chronium y Opera con estas sencilla aplicación.

Con BrowserBackup Pro podemos realizar una copia de seguridad de la siguiente información:

• Ajustes Generales del browser
• Marcadores
• Información de login y passwords almacenados
• Historial
• Cookies
• Links visitados
• Thumbnails
• Últimas pestañas visitadas y sesión
• Informacón en formularios
• Información de plugins instalados
• Extensiones instaladas

Link: BrowserBackup

Hay dos formas sencillas de ubicar una dirección IP, vía página web o mediante un addon o extensión para el navegador Firefox; ambos son rápidos pero la extensión para Firefox es más completa aunque necesita ser instalada previamente.

ip2location.com: es una página web sencilla que nos indica la ciudad y país de origen de una dirección IP determinada, nos arroja una tabla con los datos encontrados como: Ubicación, el dominio, etc. Se pueden hacer hasta 20 consultas gratuitas por día y si te registras podrás hacer 200 consultas por día. La tabla se puede embeber en blogs y también podremos compartir el primer cuadro vía Twitter o Facebook.


Flagfox 4.2.11 / Geotool: es tan sencillo el uso de esta extensión y requiere de tan pocos recursos que es indispensable tenerlo entre nuestros addons favoritos, yo lo tengo instalado en mi navegador Firefox. Nos muestra un mapa con la ubicación de la IP, detalles personales de los propietari@s vía Whois, información sobre los DNS, etc. Y está en varios idiomas incluyendo el español. Recomendado. 


Si desean una extensión parecida a Flagfox/Geotool pero para el navegador Chrome pueden probar: uDomainFlag, está en ingles. 

¿Cuáles son las principales características de HTML5?

Son las siguientes:

• Semántica
• Utilización de aplicaciones web offiline y uso de almacenamiento (storage).
• Acceso a través de diferentes dispositivos.
• Conectividad
• Uso de multimedia
• Animaciones 3D y gráficos
• Mejor performance
• Uso de CSS3

 Características de HTML 5 para las aplicaciones web de escritorio:

• Mensaje cruzado de documentos
• Elementos editables WYSIWYG
• Elementos de video
• Drag and drop
• Aplicaciones web offline
• Características de HTML5 en formularios
• Manejo de archivos SVG
• Elementos de audio

Características de HTML 5 para las aplicaciones web móviles:

• Almacenamiento web
• Animaciones en 2D
• Selectores CSS3
• Formularios avanzados
• API de geolocalización
• Soporte de video y audio streaming
• Dibujo en canvas
• Soporte offline

 Esta es la infografía:

Es fascinante ver las nuevas páginas web que uno se encuentra en Internet con sorprendentes contenidos multimedia generado con el nuevo estándar HTML5 o sea sin necesidad de plugins adicionales para nuestros navegadores como el Adobe Flash.

A continuación les dejo cinco webs divertidas en HTML5, solo necesitaremos de un navegador compatible como: Chrome, Firefox, Safari, Opera o Internet Explorer.

1.- Brandon Generator 


Brandon Generator, o Las aventuras de Brandon, es un concepto muy interesante que es parte webcómic, parte cortometraje de animación, es un excelente experimento en HTML5. El contenido fue escrito por Edgar Wright (director de Hot Fuzz y Shaun Of The Dead ), ilustrado por Tommy Lee Edwards de LucasFilm, y narrado por Julian Barratt de The Mighty Boosh. Hay cuatro episodios de Brandon Generator en total, con los argumentos de episodios pasados generados por el público que interactuó con el contenido cuando fue subido a la web en el 2012. Microsoft estaba detrás de Brandon Generator, de ahí la aparición del logo de Internet Explorer en el sitio. Sin embargo, gracias al HTML5, el contenido está disponible para verlo en todos los navegadores modernos.


2.- The Rational Keyboard 


The Rational Keyboard o el Teclado Racional, es una aplicación Web HTML5 de Fritz Obermeyer. Se compone de un generador de melodías que el usuario es capaz de cambiar. Las notas cambian constantemente con el fin de mantener la melodía que suena de manera agradable. Hasta que se producen problemas técnicos de sonido, en ese momento se aconseja poner en pausa el teclado para poder restablecerla. Hay cuatro diferentes formatos del instrumento, aunque al cambiarlos sólo se modifica el aspecto, más no el sonido. Es una página muy curiosa y bien trabajada.


3.- The Two Minute Test 


The Two Minute Test o La prueba de dos minutos, es una web que hace varias preguntas para poner a prueba tu conocimiento general y/o nivel de inteligencia. El objetivo final es ver si tienes las habilidades básicas que se requieren para convertirse en un maestro. Las preguntas son presentadas en un formato visual agradable, con números flotantes, o las representaciones de los planetas del Sistema Solar, etc. Se comienza con 100 puntos de 100, y esta puntuación va cayendo a medida que cometes errores. Y a menos que seas @severito u otro científico popular, es un hecho que cometerás crasos errores. ^^ Sólo hay seis tareas para completar en esta curiosa web, y es una prueba de solo dos minutos. Suerte.

4.- Catifier 


Catifier, es una divertida herramienta para probar a arrastrar y pegar gatitos en un fondo que podremos cambiarlo solo escribiendo la dirección donde este alojada nuestra imagen. Esta web no es la gran cosa pero divierte y más si ponemos de fondo fotos conocidas o de conocidos al cual podemos adornarlo de gatitos, de muchos gatitos. ^^

5.- Shiny Demos 


Shiny Demos o Demos brillantes, nos ofrece un verdadero paquete de páginas webs en HTML5. Hay docenas de demostraciones que nos muestran el poder del HTML5, ninguna de las cuales nos llevará más de unos cuantos minutos para probarlos. Las aplicaciones utilizan diferentes elementos de HTML5, todos divididos en secciones para que podamos verlos fácilmente. Además de los juegos y pantallas interactivas de audio y vídeo, hay explicaciones de los diversos elementos que componen el HTML5. Esto podría ofrecer a los desarrolladores Web una nueva forma para entender mejor sus conceptos básicos.

Si deseas saber cómo se vería tu blog o página web en un smartphone: iPhone, Samsung Galaxy, o en una tablet, etc. Esta herramienta web Viewport Resizer, te ayudará con tu cometido. Si bien parece una aplicación solo para desarrolladores de sitios web, con ella cualquier persona puede realizar varias pruebas para comprobar la forma en que será visto finalmente una web en las distintas resoluciones de pantalla de los actuales dispositivos móviles y computadoras que se encuentren en el mercado.



La herramienta Viewport Resizer, viene con su propio bookmarklet o botón que podemos arrastrar a la barra de marcadores de nuestro navegador favorito, esta se puede utilizar con cualquier navegador web moderno como: Chrome o Firefox. Cuando abrimos un sitio web, hacemos clic en el botón de la aplicación o bookmarklet de Viewport Resizer: (Resizer ↔­­­­­­­­­) y nos aparecerá de inmediato una cinta de color negro en la parte superior de la pantalla con los iconos que representan las opciones de tamaño en que podremos ver la página web sea un: Smartphone, Tablet o Widescreen. También nos permite crear tamaños personalizados (Customize). 

Sin duda una aplicación muy útil para ver como se desarrolla nuestra página web o blog en los distintos dispositivos móviles y tomar una decisión de cambio o no de nuestro template o plantilla web. Recomendado y no solo para bloggers.  :)

Características principales de Viewport Resizer:

- Aplicación web muy fácil de usar tomando nuestro navegador como herramienta. 
- Viene con un bookmarklet que hace más sencillo el examen visual de cualquier página web. 
- Nos permite ver la página web en diferentes tamaños de pantalla o resoluciones.
- También nos permite crear un bookmarklet personalizado.


Enlace:   viewport-resizer 

Si necesitas hacer una edición rápida de tus fotos; ya sea recortar, redimensionar o un simple retoque, y no tienes un software especial en tu PC para editar tus fotos, entonces esta herramienta web online para editar tus imágenes te será de mucha utilidad. 

Hay muchos editores de fotos gratuitos en línea, algunas incluso en Flash, pero PhotoZoe se ejecuta de forma nativa en nuestro navegador; PhotoZoe es rápido y cumple muy bien con su labor que es exactamente lo que necesitamos cuando estamos en apuros.


Solo subimos nuestra foto con el botón "Browse" en la parte superior de la pantalla, hacemos clic en Editar foto y realizar los ajustes que necesitemos. Además de un sistema automático para mejorar nuestra fotos, PhotoZoe viene con algunos filtros como: Instagram, marcos, calcomanías, orientación de recorte, y cambios de tamaño. Hay también algunas otras herramientas para cambiar el contraste, la saturación; además podemos agregarle dibujos predeterminados y adicionarle texto a todas nuestras imágenes.

Una vez terminada las ediciones de nuestras fotos, podemos guardarlas y descargarlas. Los usuarios deben de tener en cuenta que las fotos serán visibles en la galería de fotos de la web, como ejemplos después de usar el servicio, otra advertencia es que las fotos que editemos vendrán por defecto con una pequeña marca de agua de la web. Por eso recomiendo usar fotos que no sean muy personales o que no deseemos mostrar en publico.



Características principales: 

- Carga, edita y descargas tus fotos rápido. 
- La web usa HTML no Flash para editar nuestras imágenes. 
- Mejora nuestras fotos añadiendo: filtros, cambiando el tamaño, recortando y otras interesantes características más gratis y online.


Enlace: PhotoZoe.com

Sitio: PluginCheck
 

Si te gustó el post, puedes seguir a Ricardo en Twitter, a Severito en Twitter y a RFSDigital en Twitter, Facebook y Google +.

Vizify: Muestra una infografía de tu Twitter: En el siguiente post les hablaremos de Vizify, una interesante aplicación que permite poder crear una infografía basada todos tus tweets y actividad en Twitter.

Si tienes la necesidad imperiosa de saber si tu amiga/o, contacto ha leído tu correo electrónico o ha hecho clic en los enlaces que le enviaste vía mail, gracias al addon Yesware, útil herramienta para Gmail aplicable a los navegadores Google Chrome y Mozilla Firefox por fin sabrás cuándo, dónde, y en qué dispositivo fue leído el mail o correo electrónico que enviaste a cada uno de tus contactos.

Yesware, es gratuito para hacer seguimiento a 100 contactos por mes. Creo que es más que suficiente para una cuenta común y corriente como las nuestras.

Si desean seguir a más de 100 personas al mes tienen otra alternativa llamada Yesware Plus, costo $ 4.95 al mes. Esta opción es ideal para comerciantes o vendedores.

Hace unos días probamos, con buenos resultados, un buscador de sitios web similares o relacionados con el tema del site de nuestro interés, de nombre: SimilarSites.com.

Ahora acabo de probar otra buena aplicación web llamada: WebsitesLike, que nos recomienda otros sitios web parecidos, basados en una dirección URL o una palabra clave que debemos escribir en su motor de búsqueda.

El sitio afirma que su índice se actualiza varias veces al día por lo que siempre tendremos una buena selección de sitios web alternativos por ver. Al digitar la URL, el buscador arroja 50 resultados (dominios) diferentes o webs pero similares en cuanto al tema de la web indagada. Estos resultados se basan en una variedad de factores, entre ellos la popularidad web, ranking de Alexa, Google PageRank, palabras clave y la entrada del usuario.

Cada propuesta se marca, por lo que también se puede profundizar en ciertas categorías del sitio, si es un tema en particular o algo que nos interese. Es una estupenda herramienta web también para bloggers ya que podremos analizar otras páginas web, sobre un tema en particular, en el que estemos trabajando en profundidad. Recomendado. 




Características principales de SimilarSites.com:

- En un buscador rápido.
- Obtendremos 50 sitios web alternativos que se pueden visitar.
- Indice de sitio web actualizado, varias veces al día, es posible obtener nuevos resultados con frecuencia.
- Podemos recorrer las categorías del sitio y ver los sitios web basados ​​en temas concretos.


Enlace: websiteslike.org