30.12.13

Google Tips - Ayuda on line sobre productos Google

La gente de Google recientemente ha creado un site en el cual podemos ver consejos y guías de uso de sus productos, el mismo se llama Google Tips, y se encuentra dividido en un formato de tarjetas en las cuales  se incluye una frase que orienta al usuario sobre el uso del producto
El site lo podemos ordenar de diferentes formas y si deseamos, sobre un producto en particular

Por ahora Google ofrece consejos sobre 13 de sus productos:

  • Search
  • Gmail
  • Google+
  • YouTube
  • Maps
  • Docs
  • Drive
  • Calendar
  • Play
  • News
  • Keep
  • Chrome
  • Android


Lo interesante que ofrece el site, es que estas tarjetas se pueden compartir en las diferentes redes sociales como ser Facebook, Twitter y por supuesto Google+, de igual manera las mismas pueden ser enviadas por email




Site
https://www.google.com/get/googletips/

19.12.13

DevDocs - Un help para todos los gustos

Les comento que gracias a Luka Mis pude encontrar un site denominado DevDocs, en el cual podemos encontrar en forma detallada al estilo chm, diferentes tipos de tecnologías web como ser HTML5, CSS3, AngularJS, JQuery, etc.
Cada una de ellas se subdivide por categorías y subcategorías teniendo el sintaxis, descripción, métodos, propiedades, ejemplos, etc.
Realmente un Help sobre tecnologías web muy completo y siempre en línea, posee además un log de los cambios que se van realizando en el site, como por ejemplo actualizaciones de un documento

Site
http://devdocs.io/


6.12.13

IFTTT + Evernote = la combinacion perfecta

Alguien dijo una vez: "deja que Internet trabaje para vos" y de allí surgió IFTTT un disparador de eventos que por ejemplo si ocurre alguna entrada en nuestro calendario, la llegada de un mail con una palabra determinada en Gmail, o simplemente algún contacto nos envía un mensaje en Facebook. toma la acción que le indiquemos y la ejecuta.
Una de las combinaciones mas poderosas que encontré fue IFTTT + Evernote, ya que podemos automatizar la recopilación datos desde muchos orígenes totalmente diferentes, no solo de aplicaciones sino en OS y de manera totalmente programada, y de esta manera insertar notas con etiquetas en nuestros notebooks sin necesidad de estar recorriendo constantemente nuestra jungla de aplicaciones.
Uno de los ejemplos mas novedosos que encontré fue Siri to Evernote, que nos permite crear una lista de recordatorios denominado "Evernote", luego le podemos indicar a Siri "Añadir Evernote recordatorio". Esta acción añadirá una nota en Evernote llamada "Notas de Siri", realmente impecable
En la actualidad hay aproximadamente unas 3,289 combinaciones de aplicaciones que usan como origen o destino a Evernote.
De esta manera podemos automatizar todas nuestras tareas en las cuales intervenga Evernote, aqui les dejo el link donde figuran todas las combinaciones hasta el día de hoy creadas por los usuarios (vos tambien podes crear una nueva !!!!!!)

https://ifttt.com/recipes/search?q=EVERNOTE&ac=false



Descarga tus archivos desde Google

"Es importante tener acceso a nuestros datos, principalmente cuando hablamos de cartas de amor, nuestra primera oferta de trabajo, o discusiones sobre vídeos de gatos."

Así es como empieza el texto en el cual Google presenta la posibilidad de bajar en archivos, nuestro contenido de emails, calendar, youtube, blogger, etc. De esta manera tenemos la posibilidad de exportar una copia de todos esos datos y hacer un backup de ellos, claro que fuera de los servidores de Google.

Nos permite hacer un solo archivo con varios de los servicios o bien un archivo por servicio, es totalmente personalizable


5.12.13

Evernote - App Center

Evernote muy rápidamente se está convirtiendo en una plataforma de almacenamiento de datos "on the Cloud" sincronizable con todos los dispositivos
Posee también el App Center, en el cual podemos encontrar innumerables aplicaciones para todo tipo plataformas como ser Windows, Android, Mac, Web, etc.
Estas aplicaciones se encuentran ordenadas/divididas por tipo de uso:

  • Empresas
  • Estilo de vida
  • Productividad
  • Viajes
  • Educación

Una de las herramientas muy utilizadas para los bloggers es Postach.io, en la cual podemos usar a Evernote como plataforma de blogging, o también el uso de Foxit Reader que nos permite imprimir nuestro documento PDF y enviarlo directamente a nuestros notebooks de la aplicación
Así hay un sinfín de aplicaciones, algunas para una sola plataforma y otras multiplataforma, estas aplicaciones se encuentran diseñadas por developers o empresas externas a Evernote, que arman sus desarrollos por medio de la API, SDK y documentación que ofrece la Evernote de forma totalmente libre

Site
http://appcenter.evernote.com/es

API
http://dev.evernote.com/



2.12.13

Videos de Angular JS

Acá les dejo unos links muy buenos sobre una colección de videos de YouTube para el auto aprendizaje de AngularJS de Google, los mismos se encuentran separados por niveles de aprendizaje y/o conocimiento

Nivel 100 - Introduccion a AngularJS http://www.youtube.com/watch?v=8ILQOFAgaXE
Nivel 200 - Fundamentos http://www.youtube.com/watch?v=i9MHigUZKEM
Nivel 300 - Buenas prácticas http://www.youtube.com/watch?v=ZhfUv0spHCY

Official Site
AngularJS.org


29.11.13

OK Google ! para Chrome

la gente de Google recientemente ha lanzado de manera oficial (beta) la función de reconocimiento por voz para su navegador Chrome llamada "Google Voice Search Hotword"

La tecnología que emplea OK Google! ya estaba presente en las famosas Google Glass, pero ahora OK Google! da el salto a los ordenadores gracias a una extensión para Google Chrome llamada Google Voice Search Hotword, que permite a todos los usuarios de este navegador disfrutar de las ventajas de buscar en Google con la voz.

El funcionamiento es muy sencillo, simplememnte debemos decir, OK Google! y lo que queremos buscar para que Chrome lo procese

Por ahorqa se encuentra en Beta y solamente para el idioma ingeles, que en este caso deberemos ser un poco prolijos a la hora de pronunciar

Añadir a Chrome
https://chrome.google.com/webstore/detail/google-voice-search-hotwo/bepbmhgboaologfdajaanbcjmnhjmhfn


28.11.13

Novedades de Evernote 5 para Windows

Acá les paso algunas de las muchas novedades que tiene Evernote 5 para Windows

Atajos
Se pueden arrastrar tus notas, libretas, etiquetas y búsquedas hacia al área Atajos para así obtener un acceso mucho más rápido

Notas, libretas y etiquetas
Los botones dedicados te permiten acceder y organizar las notas como deseas.

Expansión de las listas de libretas y etiquetas
Expande tus etiquetas para usarlas con rapidez como destinos de colocación o moverlas a Atajos.

Atajos del teclado
Mayús-Alt-N: Para ir a las libretas
Mayús-Alt-N: Para ir a las etiquetas
CTRL-Mayús-H: Para resaltar el texto seleccionado
CTRL-1 a CTRL-0: Para ir a tus primeros 10 atajos



27.11.13

Twitter to Evernote

IFTTT realmente es una herramienta/servicio muy copada que tenemos en la red, especialmente para automatizar acciones que realizamos a diario.
Una de ellas es que todos nuestros tweets favoritos los podamos guardar en nuestra libreta de Evernote
Simplemente le tenemos que dar permiso a nuestras cuentas de twitter y Evernote y listo, cada vez que nos llegue un tweet favorito, aparecerá sincronizado como nota en la libreta. Altamente recomendable

Site
https://ifttt.com/recipes/108658



25.11.13

Como hacer un enlace a Evernote

Evernote es una herramienta muy útil para guardar nuestras notas, fotos, audio y video todo lo que nos podemos imaginar, separando las mismas en libretas, con la facilidad de etiquetarlas para una mejor búsqueda
Se vuelve realmente imprescindible para el dia al dia en nuestras vidas ya que... "chau papeles" y lo mejor que podemos sincronizar las mismas con cualquier dispositivo, ya sea un smartphone, table, pc, notebook o bien por medio del site
Aca les dejo un código muy sencillo para agregar a nuestras páginas o blogs para que los usuarios puedan guardar en sus libretas de Evernote nuestras notas o post con un solo click

Code
http://chopapp.com/#3v39phzj

Site
http://evernote.com/intl/es-latam/


BEDUK - BEATFREAK ( official video in full HD )

21.11.13

Office 365 Help, blog y forums

La gente de Microsoft acaba de crear el Office 365 Help Center en el que se trata de facilitar el acceso a información de soporte y de ayuda que los usuarios de Office 365 puedan necesitar.
La idea es facilitar el acceso rápida a información relativa a errores frecuentes, FAQs y otros temas qué se suelen consultar habitualmente en Office 365.
Este nuevo centro de soporte estará disponible en todos los idiomas de comunidad de Office 365 soportados y será actualizado de forma frecuente por el equipo de Office 365.

Help
http://community.office365.com/en-us/tools/helpcenter.aspx?hcs=eaaed863-981d-4db3-a0a8-f82138026ac2#ESKU-Admin-Mail

Blog
http://community.office365.com/en-us/default.aspx

Forums
http://community.office365.com/en-us/forums/default.aspx



17.11.13

Nueva funcionalidad de Gmail y Google Drive

No se si lo han notado pero cuando en Gmail nos viene un documento adjunto,nos da la posibilidad de descargarlo a nuestra PC o dispositivo o simplemente guardarlo en Google Drive
Esto no es nada nuevo porque existen aplicaciones de terceros que cumplen con la misma función, pero la de Gmail ya la posee incorporada y realmente es muy simple de utilizar


8.11.13

FlatIcon - miles de iconos gratis

FlatIcon se trata de un site en el cual podemos descargar en forma gratuita miles de iconos al estilo web 2.0 es decir con un estilo minimalista, nada de 3d ni colores, simplemente en blanco y negro, todos ellos creados por diseñadores profesionales
Podemos buscarlos por temática, packs o incluso por popularidad
El site contiene un plugin de PhotoShop para buscar e insertar en la aplicacion



Site
http://www.flaticon.com/





31.10.13

Libros/ebooks gratuitos de Microsoft

Les paso un link de Microsoft en el cual podrán encontrar muchos libros gratuitos en formato pdf, mobi y epub.
Se encuentran separados por tecnología como ser:

  • Office & Office 365
  • Sharepoint
  • SQL Server
  • System Center
  • Visual Studio
  • Web Development
  • Windows
  • Windows Azure
  • Windows Server
Espero que les sea de utilidad


Download
http://bit.ly/1csICNe

27.10.13

Armin van Buuren feat. Trevor Guthrie - This Is What It Feels Like (Offi...

Aplicacion MVC 4 desde cero

Les dejo el enlace de un documento que termine hace poco sobre el armado de una aplicación web con ASP net MVC 4 desde cero
Espero que les sea de utilidad

Download
https://drive.google.com/file/d/0Bx_vnpT2oAZmLUVaem1aMTRWX00/edit?usp=sharing

Offline.js

Offline.js es una biblioteca para alertar automáticamente a los usuarios cuando han perdido la conectividad a Internet, como por ejemplo Gmail.
Captura peticiones AJAX que se hicieron mientras que la conexión estaba abajo.
Posee numerosos themas y lo mas importante que no requiere configuración

Download
http://github.hubspot.com/offline/docs/welcome/



10.10.13

Google Web Designer

Recientemente Google acaba de sacar una herramienta de diseño web (aún en beta) que nos permitirá crear anuncios y webs en HTML5 y CSS3
Dicha aplicación se llama Google Web Designer, y por ahora solamente se encuentra disponible para Mac y Windows
Lo bueno de esta herramienta es que al trabajar con HTML5 la vista del site, página o simplemente un anuncio, se podrá ver en cualquier dispositivo (actualizado, claro) y con ese único diseño es suficiente para poder ser visto desde cualquier plataforma

Download
https://www.google.com/webdesigner/






1.10.13

Cloudy - insertar imagenes en Gmail

Existe una nueva aplicacion para Google Chrome llamada Cloudy, nos permite insertar imágenes desde la nube como Dropbox, Box y Google Drive para luego enviarlos como adjuntos en los correos de Gmail




Download
https://chrome.google.com/webstore/detail/cloudy-for-gmail/fcfnjfpcmnoabmbhponbioedjceaddaa

23.9.13

Google y su nuevo acceso a aplicaciones

Recientemente Google ha cambiado la forma de acceder a sus aplicaciones por medio de un único botón o acceso directo, en el cual se desplegarán las aplicaciones más usuales


22.9.13

Carousel con Bootstrap y JQuery

Acá les paso el link de un ejemplo muy sencillo para hacer un carousel de fotos con Bootstrap3
Tenemos que utilizar la librería de Bootstrap y la ultima versión de JQuery, en el final del código podrán notar la existencia de un JavaScript que impone la velocidad en milisegundos con los que pasa cada foto
En lo posible para que la vista quede bien, traten que todas las fotos sean del mismo tamaño y también
utilizan los tag
en modo grilla para que ocupe la parte de la pantalla que necesite

Code
http://chopapp.com/#natkc92g



6.9.13

TinyPNG - optimizador de imagenes online

El tiempo de carga de una página es fundamental para un site, y al mejorar la velocidad, mejora el SEO
Esto es muy imprescindible para los smartphones y para ello, se pueden comprimir las imágenes
Existe una herramienta online llamada TinyPNG, tiene muy poca (o casi nada) de perdida de calidad en nuestros archivos PNG, realmente muy útil

Site
http://tinypng.org/


27.8.13

BizTalk - Problemas en la generación de schemas de SQL

Creo que a muchos nos ha sucedido que cuando queremos agregar un item (Add Generated Items) y principalmente de SQL, el wizard se cierra inexplicablemente sin concluir su tarea.
Para solucionar este problema debemos re registrar desde la consola de .net las siguientes dlls que se encuentran en la carpeta C:\Program Files (x86)\Microsoft BizTalk Server 2010

regsvcs Microsoft.BizTalk.Adapter.SQL.dll, presionar ENTER
regsvcs Microsoft.BizTalk.Adapter.SQLAdmin.dll, presionar ENTER
regasm /codebase Microsoft.BizTalk.Adapter.SQLAdmin.dll, presionar ENTER

Problema solucionado
Espero que les sirva

14.8.13

Mapa de Windows Azure

Les paso un gráfico que armé sobre todas las funcionalidades de Azure, si falta alguna, seran bienvenidos los comentarios, espero que les sea útil


13.8.13

BizTalk Mapper Extensions UtilityPack for BizTalk Server 2010

La gente de Microsoft recientemente ha sacado a la luz, un paquete de extensiones para los mapas de BizTalk 2010.
BizTalk Mapper Extensiones UtilityPack es un conjunto de bibliotecas con varios functoids útiles para incluir y utilizar en un mapa, lo que proporcionará una extensión de las capacidades de BizTalk Mapper, entre los mismos se encuentran:

  • Convert from human readable to epoch date Functoid
  • Convert from epoch to human readable date Functoid
  • Convert datetime format Functoid
  • Dynamic Generators Functoids
  • Password Generator Functoid
  • Guid Generator Functoid
  • Tiny Id Generator Functoid
  • Encoder Functoids
  • Base64 Decoder Functoid
  • Base64  Encoder Functoid
  • BTSNTSvc Config Get Functoid
  • System Environment Variable Get Functoid
  • Custom Config Get Functoid
  • Windows Registry Config Get Functoid
  • SSO Config Get Functoid
  • CRM Lookup Functoid
  • String Constant functoid
  • String ToTitleCase functoid
  • String Advance Compare Functoid
  • String Replace Functoid
  • String Normalize Functoid
  • String PadLeft Functoid
  • String PadRight Functoid
  • Custom Advanced Functoids
  • Default Value Mapping functoid





9.8.13

System Of A Down - Aerials

Nuguets - Utilizacion de varios sources

Normalmente desde Visual Studio utilizamos el repositorio de Nugets desde la web https://nuget.org/api/v2/ Pero de una manera muy sencilla podemos tener un repositorio local, en un servidor de la compañia o bien en uno propio.
Para ello debemos armar un archivo denominado nuget.config y lo debemos depositar en la carpeta: C:\Users\NombreDelUsuario\AppData\Roaming\NuGet
Ahora bien, para que apunte al repositorio por default, local o file share, debemos agregarle el siguiente código

Solución

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <packageSources>
    <add key="NuGet official package source" value="https://nuget.org/api/v2/" />
    <add key="NuGet Local package source" value="c:\Nugets" />
    <add key="NuGet Remote package source" value="\\nombredelshare\c$\Nugets" />
  </packageSources>
  <disabledPackageSources />
  <activePackageSource>
    <add key="NuGet official package source" value="https://nuget.org/api/v2/" />
    <add key="NuGet Local package source" value="c:\Nugets" />
    <add key="NuGet Remote package source" value="\\nombredelshare\c$\Nugets" />
  </activePackageSource>
</configuration>






26.7.13

Power Map Preview for Excel 2013

Power Map (code name GeoFlow) es una nueva herramienta de visualización en 3D de complemento para Excel 2013 para mapear, explorar e interactuar con los datos geográficos y temporales, permitiendo a las personas a descubrir y compartir nuevos conocimientos. Power Map ahora forma parte del Power BI de Office 365

Realmente la forma de armar un mapa es muy sencillo y el add-in se encarga de insertar los datos directamente en el mapa de Bing, haciendolo totalmente interactivo



Site 

15.7.13

Directorio de páginas de Google

les paso un muy interesante enlace en el cual podrán encontrar todas las paginas de Google en las cuales se podrá filtrar por país, idioma y categoría
Realmente muy útil (si son Googleros, jejejeje)

Site
https://www.google.com.co/press/google-directory.html

12.7.13

HTML5 - top 10 de los mejores frameworks

Les paso un link en el cual se encuentran los 10 mejores frameworks para trabajar con HTML5, espero que les sea de utilidad

site
http://designinstruct.com/roundups/html5-frameworks/


Microsoft - Libros gratuitos

Eric Ligman (Microsoft) ha publicado una serie de libros electronicos totalmente gratuitos en diversos formatos sobre los siguientes temas:

  • Office 365
  • SharePoint
  • SQL Server
  • System Center
  • Visual Studio
  • Web Development
  • Windows
  • Windows Azure
  • Windows Server
Realmente hay una gran variedad de libros por cada tema y los mismos van de nivel 100 a 400



Site 
http://blogs.msdn.com/b/mssmallbiz/archive/2013/06/18/huge-collection-of-free-microsoft-ebooks-for-you-including-office-office-365-sharepoint-sql-server-system-center-visual-studio-web-development-windows-windows-azure-and-windows-server.aspx

19.6.13

Fin del soporte para Windows XP SP3 y Office 2003

El 8 de abril de 2014 finaliza el Soporte para Windows XP SP3 y Office 2003

En 2002 Microsoft presentaba su política de Ciclo de Vida de Soporte desarrollada a partir de los comentarios de nuestros clientes y con el fin de ofrecer una mayor transparencia y previsibilidad a la hora de explicar las opciones de soporte para nuestros productos. Siguiendo esta política, los productos para Empresa y Desarrolladores, entre los cuales se incluyen los sistemas operativos Windows y Microsoft Office, disponen de un mínimo de 10 años de soporte (5 de soporte estándar y 5 más de soporte extendido) en el nivel de service pack soportado.

Pero más allá del soporte, para que las Tecnologías de la Información puedan generar valor de negocio se exige innovar. La mayoría de usuarios a día de hoy esperan capacidades en sus ordenadores que prácticamente ni se conocían en el año 2001. El acceso desde cualquier lugar y el empleo de ordenadores de múltiples formatos, el desarrollo de las redes sociales o la nube son solo unos pocos ejemplos de los tremendos cambios que se han producido en esta última década.

fuente Microsoft

Link
http://www.microsoft.com/es-es/windows/endofsupport.aspx


BizTalk Server y como evitar la salida de un NaN

Muchas veces hemos mapeado schemas de entrada y de salida con sumatoria de datos y todo lo que lleva un mapeo mas o menos complejo, aca les dejo un ejemplo de un mapa sencillo con sumatoria de campos



Muchas veces cuando sumamos NO nos devuelve cero ni nada por el estilo, es mas la salida de este nos puede dar un NaN, para evitar este problema y que en su defecto nos devuelva cero, arme una solucion bastante sencilla (que aun se puede mejorar), este código lo agregué a un script functoid

public double Amount(double param1, double param2, double param3)
{
double param4;

bool isNaN1 = Double.IsNaN(param1);
bool isNaN2 = Double.IsNaN(param2);
bool isNaN3 = Double.IsNaN(param3);

if(isNaN1 == true) {param1 = 0;}
if(isNaN2 == true) {param2 = 0;}
if(isNaN3 == true) {param3 = 0;}

param4 = param1 + param2 + param3;

return param4;
}

code

9.6.13

Team Foundation Task Board Enhancer

El otro día ingrese en la página de Tiago Pascoal (MVP), realmente un genio.
Ha creado una extensión para la versión web Access de Team Foundation Server 2012 que es un #MustHave, trae mucha features en los boards de TFS2012:

  • Mostrar los IDs de los WorkItems en el boards
  • Mostrar los elementos bloqueados con una imagen que los identifique
  • Mostrar la foto de los usuarios en lugar de los nombres en las tarjetas
  • Mostrar el tipo y estado de un WorkItem en el board de tasks. De esta forma es muy fácil ver si un PBI sen encuentra cerrado o cual es el estado en que está.

Lo copado de esta extensión es totalmente gratis!!!!!!

Site
http://pascoal.net/task-board-enhancer/






30.5.13

Salvar paginas en Google Drive

La gente de Google nos brinda un atajo para guardar cualquier documento, foto, musica, e inclusive una pagina web en Google Drive por medio de un boton incrustado en nuestro site.
El código es realmente muy simple




Código
<script src="https://apis.google.com/js/plusone.js"></script><br />
<div class="g-savetodrive" data-filename="Stray_Kitten.jpg" data-sitename="Google Developers Blog" data-src="https://cors-files.appspot.com/Stray_Kitten.jpg">


Blog Oficial de Google
http://googledevelopers.blogspot.ca/2013/05/an-easier-way-to-save-files-to-google.html

12.5.13

WebMatrix 3

Ya se encuentra a nuestra disposición para su descarga desde la página oficial de WebMatrix o desde Web Platform Installer

Algunas de sus nuevas caracteristicas son:

  • Diseñado para los lenguajes más usados: ASP.NET, PHP, Node.js, HTML5, JavaScript, CSS3
  • Optimizado para Open Source: Permite instalar aplicaciones web basadas en proyectos Open Source con sólo unos pocos clicks
  • Ayudante para la Nube: Con WebMatrix 3, publicar las aplicaciones en la nube es tan sencillo como darle al botón de publicar
  • Diseño para dispositivos móviles: WebMatrix 3 dispone de plantillas para dispositivos móviles
  • Control de código fuente con Git: Conéctate con GitHub, CodePlex y Team Foundation rápido y fácil para compartir el código con el mundo
  • Control de código fuente con Team Foundation Service: Conéctate con el mejor servicio de control de código fuente
  • Edición remota: Edita tus sitios remotamente con sólo conectarte a él
  • Extensiones de la Comunidad: Encuentra las extensiones que necesites como simulador de iPhone, Power Tools para Node.js, etc.

7.4.13

HTML5 - parte 10 - formularios con patterns

Les paso un ejemplo muy sencillo de una de las formas de utilizar patterns en nuestro formulario, en este caso vamos a utilizar letras de la "a" a la "z", minúsculas, mayúsculas, números y cantidad de caracteres


<!DOCTYPE html>
<head>
<title>Dummy</title>

<body>

<form ation="">
  <label for="txtUsu">Usuario</label>
  <input type="text" id="txtUsu" name="txtUsu" pattern="[A-Za-z0-9].{8,}" title="El usuario debe llevar 8 caracteres como mínimo (mayusculas, minusculas y numeros)" required />
  <br>
  <label for="txtPass">Password</label>
  <input type="password" id="txtPass" name="txtPass" pattern=".{8,}" title="La password debe llevar 8 caracteres como mínimo" required />
  <br>
  <input type="submit" value="Test" />
</form>

</body>
</html>


Codigo
https://skydrive.live.com/redir?resid=81EDB1806AD68E58!981

25.3.13

HTML5 - parte 9 - Ventana Modal

Les paso un código muy sencillo armado solamente con CSS3 y HTML5 para tener en nuestro navegador una ventana modal, ya sea para una notificación como para un simple formulario

<!DOCTYPE html>
<head>
<title>Ventana Modal</title>

<style>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
}

.modalDialog:target {
display: block;
pointer-events: auto;
}

.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}

.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }
</style>
</head>

<body>

<a href="#openModal">Abrir ventana Modal</a>

<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Cerrar" class="close">X</a>
<h2>Ventana Modal</h2>
<p>Esta ventana funciona con HTML5 y CSS3</p>
<p>Realmente es muy sencillo su implementación, la podemos usar para una notificación hasta un formulario</p>
</div>
</div>

</body>
</html>


Codigo
http://chopapp.com/#5ew2n6eq
SkyDrive

22.3.13

Google Keep

La gente de Google a lanzado Google Keep (adosado a google drive) se trata de un servicio web para incluir notas con fotos y otras cosas más, de esta manera estaría compitiendo con EverNote o OneNote de MS Este servicio lo podemos navegar por medio de https://drive.google.com/keep/ o bien utilizando la App para andrioid

20.3.13

HTML5 - parte 8 - pseudo Rockola

Les paso un ejemplo sencillo en el cual podran armar una psudo rockola con imágenes y musica, en este código usaremos cuatro imágenes y un mismo tema para cada imágen pero con formatos mp3 y wma, realmente es muy sencillo de armar, aparte la mayoría del código ya viene del ejemplo 7 anterior <!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Dummy</title>
        <link rel="stylesheet" type="text/css" href="Styles/Site.css" />
        <script type="text/javascript" src="JS/jquery-1.7.1.js"></script>
<script type="text/javascript" src="JS/Fade.js"></script>
    </head>

    <body>
        <div id="contenedor">
            <div id="subcontenedor1">
                <ul id="Lista">
                    <li><img src="Images/ArminvanBuuren.jpg" alt="ArminvanBuuren" id="imagen1" onMouseOver="javascript:document.getElementById('t1').play();" onMouseOut="javascript:document.getElementById('t1').pause();"/></li>
                    <li><img src="Images/Deadmau5.jpg"       alt="Deadmau5" id="imagen2"       onMouseOver="javascript:document.getElementById('t2').play();" onMouseOut="javascript:document.getElementById('t2').pause();"/></li>
                    <li><img src="Images/MarkusSchulz.jpg"   alt="MarkusSchulz" id="imagen3"   onMouseOver="javascript:document.getElementById('t3').play();" onMouseOut="javascript:document.getElementById('t3').pause();"/></li>
                    <li><img src="Images/SandervanDoorn.jpg" alt="SandervanDoorn" id="imagen4" onMouseOver="javascript:document.getElementById('t4').play();" onMouseOut="javascript:document.getElementById('t4').pause();"/></li>
                </ul>
            </div>
          
            <div id="subcontenedor2">
                <img src="Images/ArminvanBuuren.jpg" alt="ArminvanBuuren" id="imagen1g"/>        
                <img src="Images/Deadmau5.jpg" alt="Deadmau5" id="imagen2g"/>        
                <img src="Images/MarkusSchulz.jpg" alt="MarkusSchulz" id="imagen3g"/>        
                <img src="Images/SandervanDoorn.jpg" alt="SandervanDoorn" id="imagen4g"/>
            </div>
        </div>

<audio id="t1">
<source src="Music/ArminvanBuuren.mp3" type="audio/mp3"/>
<source src="Music/ArminvanBuuren.wma" type="audio/wma"/>
</audio>
<audio id="t2">
<source src="Music/Deadmau5.mp3" type="audio/mp3"/>
<source src="Music/Deadmau5.wma" type="audio/wma"/>
</audio>
<audio id="t3">
<source src="Music/MarkusSchulz.mp3" type="audio/mp3"/>
<source src="Music/MarkusSchulz.wma" type="audio/wma"/>
</audio>
<audio id="t4">
<source src="Music/SandervanDoorn.mp3" type="audio/mp3"/>
<source src="Music/SandervanDoorn.wma" type="audio/wma"/>
</audio>
</body>
</html>


HTML

HTML
http://chopapp.com/#5qpgprka

CSS

CSS
http://chopapp.com/#kovyb0zr

JavaScript

JavaScript
http://chopapp.com/#klktcihx

Bajar ejemplo completo (SkyDrive)

5.3.13

HTML5 - parte 7 - Fade de imagenes

Les paso un ejemplo para jugar un poco con imagenes dentro de nuestra pagina, podemos tener una coleccion de thumbnails o vista en miniaturas y al pasar el raton por encima de ellas podemos ver la foto en tamaño real, realmente es muy sencillo se utiliza como libreria complementaria jquery-1.7.1.js }
He aqui el codigo

Pagina HTML

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Dummy 7</title>
        <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="JS/jquery-1.7.1.js"></script>
        <script type="text/javascript" src="JS/Fade.js"></script>
    </head>

    <body>
        <div id="contenedor">
            <div id="subcontenedor1">
<ul id="Lista">
                    <li><img src="Images/imagen005.jpg" alt="Floppy" id="imagen1" onMouseOver="inimg1()" onMouseOut="outimg1()"/></li>
                    <li><img src="Images/imagen012.jpg" alt="Gorda" id="imagen2" onMouseOver="inimg2()" onMouseOut="outimg2()"/></li>
                    <li><img src="Images/imagen013.jpg" alt="Negra" id="imagen3" onMouseOver="inimg3()" onMouseOut="outimg3()"/></li>
                    <li><img src="Images/imagen015.jpg" alt="Tommy" id="imagen4" onMouseOver="inimg4()" onMouseOut="outimg4()"/></li>
                </ul>
            </div>
         
            <div id="subcontenedor2">
                <img src="Images/imagen005.jpg" alt="Floppy" id="imagen1p"/>       
                <img src="Images/imagen012.jpg" alt="Gorda" id="imagen2p"/>       
                <img src="Images/imagen013.jpg" alt="Negra" id="imagen3p"/>        
                <img src="Images/imagen015.jpg" alt="Tommy" id="imagen4p"/>
            </div>
        </div>
</body>
</html>

Codigo

Hoja de estilos

#contenedor
{
    margin:0px auto;
    width:800px;
    height:650px;
    background-color:Gray;
}

#subcontenedor1
{
    margin:0px auto;
    width:800px;
    height:150px;
}

#subcontenedor2
{
    margin:0px auto;
    width:800px;
}

#Lista
{
    list-style-type:none;
    margin:0px 0px 0px 140px;
}

#Lista li
{
    float:left;
    margin-left:20px;
    margin-top:20px;
}

#Lista li:hover
{
    border:2px solid red;
}

#subcontenedor1 img
{
    width:100px;
    height:100px;
    display:block;
}

#subcontenedor2 img
{
    width:450px;
    height:450px;
    position:absolute;
    margin:5px 175px 40px 175px;
    display:none;
    border:2px solid red;
}

a:link {
    color: #034af3;
    text-decoration: underline;
}

a:visited {
    color: #505abc;
}

a:hover {
    color: #1d60ff;
    text-decoration: none;
}

a:active {
    color: #12eb87;
}

codigo

JavaScript

function inimg1()
{
    $('#imagen1p').fadeIn(500);
};
function outimg1()
{
    $('#imagen1p').fadeOut(500);
};
function inimg2()
{
    $('#imagen2p').fadeIn(500);
};
function outimg2()
{
    $('#imagen2p').fadeOut(500);
};
function inimg3()
{
    $('#imagen3p').fadeIn(500);
};
function outimg3()
{
    $('#imagen3p').fadeOut(500);
};
function inimg4()
{
    $('#imagen4p').fadeIn(500);
};
function outimg4()
{
    $('#imagen4p').fadeOut(500);
};


Codigo

Codigo completo en ZIP

1.3.13

HTML5 - parte 6 - formularios

Les paso un ejemplo de los nuevos input que se utilizan en HTML5 Se le puede agregar el atributo required para que un campo sea requerido y si al intentar enviar el formulario, aparecerá un popup indicando que se debe ingresar un dato
De igual manera podemos utilizar el atributo placeholder para que en el input figure una leyenda, como por ejemplo "ingrese su mail"
Otro atributo es autofocus, que al cargar la pagina el foco se posicionará en el input seleccionado



Código
SkyDrive

23.2.13

HTML5 - parte 5 - Tablas

Les paso un sencillo código para armar una tabla con titulo, encabezado, cuerpo y pie

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Dummy</title>
        <link rel="stylesheet" href="Site.css">
    </head>
    <body>
<h3>Tabla con Titulo, enbezado, cuerpo, pie y colores</h3>

<table id="tabla_colores">
<caption>Venta de almacenes<br>
<details>
<summary>Minoristas</summary>
Precios con IVA
</details>
</caption>
<thead>
<tr>
<th>
Producto
</th>
<th>
Precio
</th>
<th>
Cantidad
</th>
<th>
Total
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Detergente
</td>
<td>
12
</td>
<td>
5
</td>
<td>
60
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
Total
</td>
<td>
-
</td>
<td>
-
</td>
<td>
60
</td>
</tr>
</tfoot>
</table>
</body>
</html>


Codigo
http://chopapp.com/#wcugumc8

Hoja de estilo (Site.css)
#tabla_colores thead th, #tabla_colores tfoot td
{
background-color:blue;
color:White;
}

#tabla_colores tbody td
{
background-color:olive;
}

Codigo
http://chopapp.com/#gbkjg7wy

Si desean que una celda que cubra mas de una columna el codigo es el siguiente
<tfoot>
<tr>
<td colspan="3">
Total
</td>
<td>
89
</td>
</tr>
</tfoot>

Codigo
http://chopapp.com/#uu5g1fa1

Si desean que la celda que cubra mas de un renglon:
<tbody>
<tr>
<td rowspan="3">
Detergente
</td>
<td>
12
</td>
<td>
5
</td>
<td>
60
</td>
</tr>
<tr>
<td>
12
</td>
<td>
5
</td>
<td>
60
</td>
</tr>
<tr>
<td>
12
</td>
<td>
5
</td>
<td>
60
</td>
</tr>
</tbody>

Codigo
http://chopapp.com/#kk77tq1c

16.2.13

HTML5 - parte 4 - Anclaje (solo IE)

Este código que les voy a compartir funciona solamente para IE, no funciona en otros navegadores Se trata de agregar a nuestra página links de tareas o sub links de la página principal y en lugar de navegar por un menu, lo podemos hacer por medio del anclaje en la task bar, nos quedará como un icono mas y podemos acceder al site o bien a los sub links sin el paso previo de abrir el navegador <!DOCTYPE html>

<html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>Dummy Page</title>
    <meta name="keywords" content="HTML5, JavaScript, CSS3, XML"/>
    <meta name="author" content="Gabriel"/>
    <!--meta para aplicacion-->
    <meta name="application-name" content="GDS - HTML5"/>
    <meta name="msapplication-tooltip" content"GDS - HTML5"/>
    <meta name="msapplication-window" content"width=1024;height=768"/>
    <link rel="icon" type="image/x-icon" href="images/favicon.ico"/>
    <!--Tareas-->
    <meta name="msapplication-task" content="name=Blog;action-uri=http://site.blogspot.com;icon-uri=Images/blogger.ico"/>
    <meta name="msapplication-task" content="name=Twitter;action-uri=http://twitter.com;icon-uri=Images/twitter.ico"/>
    <meta name="msapplication-task" content="name=LinkedIn;action-uri=http://www.linkedin.com;icon-uri=Images/linkedin.ico"/>
    <meta name="msapplication-task" content="name=About Me;action-uri=http://about.me;icon-uri=Images/aboutme.ico"/>
    <meta name="msapplication-task" content="name=Facebook;action-uri=http://www.facebook.com;icon-uri=Images/facebook.ico"/>
    </head>
    <body>
        <h3>HTML5 - parte 4</h3>
        <p>Anclamiento con tareas</p>
<small>Solo sirve para IE, no funciona en otros navegadores</small>
    </body>
</html>


Code
http://chopapp.com/#zr7bile6



13.2.13

HTML5 - Parte 3

Acá les dejo como armar diferentes tipos de listas, si ya se algunas vienen de HTML4, pero no está mal ver todas las variantes para armarlas

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dummy page</title>
</head>
<body>
<p>Listas no ordenadas</p>
<ul>
<li>Notepad</li>
<li>Notepad++</li>
<li>Visual Studio</li>
</ul>

<p>Listas ordenadas</p>
<ol>
<li>Head</li>
<li>Body</li>
<li>Footer</li>
</ol>

<p>Listas con definiciones</p>
<dl>
<dt>Bruce Lee</dt>
<dd>Wing Chung</dd>
<dd>Jeet Kune Do</dd>
<dt>Leandro Crivellari</dt>
<dd>SDS Wing Chung</dd>
<dd>Defensa Personal Inteligente</dd>
<dd>Desarrollo Muscular Progresivo</dd>
<dd>Defensa Femenina Inteligente</dd>
<dd>Mental Training</dd>
</dl>

<p>Listas anidadas</p>
<ol>
<li>Leccion A
<ol>
<li>Parte a</li>
<li>Parte b</li>
<li>Parte c</li>
<li>Final</li>
</ol>
</li>
<li>Leccion B</li>
<li>Leccion C</li>
</ol>

</body>
</html> 


Código
http://chopapp.com/#vegwisph

10.2.13

HTML5 - parte 2

Aca les dejo la segunda entrega de HTML5, en la cual vamos a utilizar los tags hgroup, mark, figure y figcaption, he aqui el codigo

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dummy page</title>
</head>
<body>
<hgroup>
<h1>Titulo1</h1>
<h2>Titulo2</h2>
</hgroup>

<p>esto es un parrafo normal <mark>se utilizara mark</mark> antes que <em>emphasized</em></p>

<p>esto es otro parrafo (<small>que contiene un comentario con small</small>)</p>

<figure>
<img src="imagen.jpg" alt="esto es un alt" />
<figcaption>Titulo de la imagen</figcaption>
</figure>

</body>
</html>


ejmeplo del código

4.2.13

HTML5 - parte1

Les dejo un ejemplo simple para ir armando nuestras páginas en HTML5, con sus principales tags
  • nav
  • header
  • article
    • section
  • footer




<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dummy page</title>
</head>
<body>
<nav>
<a href="/">Link1</a>
<a href="/">Link2</a>
<a href="/">Link3</a>
</nav>

<header>
<h1>Titulo 1</h1>
<p>esto es un parrafo</p>
</header>

<article>
<h1>Titulo del articulo</h1>
<section>
<h1>Titulo de la seccion</h1>
<ul>
<li>Lista 1</li>
<li>Lista 2</li>
<li>Lista 3</li>
</ul>
</section>
</article>

<footer>
<small>aca puede ir un ©</small>
</footer>
</body>
</html>



código
http://chopapp.com/#eydgv8fc

26.1.13

50 tips de performance ASP.NET / ASP.NET MVC

Les comento que hay una edición totalmente gratuita del libro "50 Ways to Avoid, Find and Fix ASP.NET Performance Issues"

Algunos de sus temas son:


  • 50 tips from the ASP.NET and SQL Server communities for boosting performance in your ASP.NET app
  • Learn the secrets of your fellow developers and read advice from MVPs and other experts
  • Covers performance problems in .NET code, SQL Server queries, interactions between code and database, and more...

Simplemente les dejo el link del site para bajarlo...que lo disfruten
Site
http://www.red-gate.com/products/dotnet-development/ants-performance-profiler/entrypage/avoid-find-fix-asp-problems


16.1.13

App para guardar en Google Drive

En el Chrome web store la gente de google publicó una app muy copada, ya que, ademas de tener el famoso guardar como, ahora lo podemos hacer directamente sobre nuestro Google Drive





Site
https://chrome.google.com/webstore/detail/save-to-google-drive/gmbmikajjgmnabiglmofipeabaddhgne/related