jueves, 20 de septiembre de 2012

Consejos para la optimización de Jquery

Consejo nº 1 Utilizar la ultima version de Jquery alojada en Google

Es importante mantener la web actualizada con la ultima version de Jquery ya que esto te mejora el rendimiento y corrige muchos errores.
La ultima version estable es la 1.8:

<script type="text/javascript" 
src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
 

 Consejo nº 2 Utilizar cheatsheets o 'chuletas' de acceso rapido con los comandos mas importantes del lenguaje

A continuacion muestro varias:



Consejo nº 3 Cargar tanto el fichero remoto como el local por si el primero fallara

No esta demas crear una redireccion de tu archivo jquery local por si el que tienes de google falla.
Se hace de la siguiente manera:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
<script>window.jQuery 
|| document.write('<script src="js/jquery-1.8.1.min.js"><\/script>')
</script>
 

Consejo nº 4 No repetir etiquetas Jquery

Si encadenamos los elementos eliminaremos la redundancia en nuestro codigo.

Metodo erroneo

$("#mySmashingID").css("color", "pink");
$("#mySmashingID").css("font", "Verdana");
$("#mySmashingID").text("Some error message goes here!");
 
Metodo correcto 

$("#mySmashingID").css({ "color": "pink", "font": "Verdana"})
.text("Some error message goes here!!");

jueves, 5 de julio de 2012

Colección de plugins jQuery interesantes

jQuery es simplemente milagroso mediante sus plugins se puede lograr casi cualquier cosa que se desee. Hace su trabajo sin complicaciones y rápido. Por lo tanto, los desarrolladores buscan constantemente nuevos plugins jQuery, junto con tutoriales paso a paso para aprender usando jQuery de manera más competente.

En esta entrada hago un recopilatorio de plugins interesantes e impresionantes para su uso. jQuery es el marco de Javascript más destacado y conocido, que va de la mano con muchas características sorprendentes, así como es muy fácil de utilizar.

Jquery tooltips sencillos y elegantes




Menu en caja



Plugin Jquery para busqueda por demanda



Efecto visual de imagen a pantalla completa en 3D con CSS3 y jQuery



Slider de imagenes



Thumbmail con efecto de proximidad mediante CSS3 y Jquery



Subida de ficheros



CraftMap mapas con puntos guia



Menu abanico con CSS3 y Jquery







Este tutorial trata sobre la creación de un libro de muestras de animación utilizando la rotación de CSS y JavaScript. La idea es mostrar un libro de muestras como el de la imagen y hacer que en cada pesta individual o "sábanas", se pueda hacer clic. Al hacer clic en una muestra, vamos a girar las muestras de otros a fin de revelar el seleccionado.

sábado, 28 de abril de 2012

Somnote - Manejo de notas


Somnote es un creador de notas GRATIS simple y fácil de usar, permite anotar y guardar todas tus ideas, tareas (información importante, listas) y los recuerdos y todo esto desde la nube.

Esta disponible para Iphone, Android y via web.

Caracteristicas:

  • Notas de forma instantánea a tu iPhone, Android o
    Web en línea y acceso a tus notas en cualquier lugar.
  • Adjunta fotografías, documentos y archivos de
    hasta 100 MB a tus notas y, más aún
    enviar estos objetos a través de correo electrónico y
    verlos en cualquier momento y en cualquier lugar. 
  • Si tu teléfono se ha estropeado o el teléfono se pierde, tus ideas, tareas y
    todas las notas importantes se almacenarán, guardaran y protegeran a tu teléfono o en la web en línea con SomCloud sincronización
  • El acceso es gratuito y no requiere registrarse como miembro.
  • Para recibir la sincronización es necesario el coreo electronico. 
Enlace:  Somnote

Comparación de servicios de almacenamiento en la nube

Con la llegada de Google Drive y la actualiación de skydrive esta habiendo una gran pelea. A continuación os dejo una comparativa de los 4 servicios mas conocidos donde se analiza punto por punto lo que nos da cada uno para que sepamos cual es mejor.


Obviamente la imagen de esta comparación es de Microsoft.


Iconspedia - Iconos de calidad gratuitos

 
IconsPedia ofrece la calidad de iconos gratuitos para los diseñadores. 

Enlace: Iconspedia

martes, 24 de abril de 2012

Google Drive - 5 GB de almacenamiento gratuito


Google Drive acaba de ser lanzado hace unos minutos y esta disponible para:
  • PC y Mac
  • iPhone and iPad (coming soon)
  • Dispositivos Android
Empieza a utilizar los 5 GB de espacio gratuito. Luego actualiza la cuota a 25 GB por menos de 2,50 USD al mes. Podrás almacenar casi todo por muy poco.

Características

En Google Drive puedes crear documentos, hojas de cálculo y presentaciones nuevos al instante. Trabaja en equipo en el mismo documento. Verás los cambios a medida que se producen.
Gmail
Olvídate de los archivos adjuntos. Envía un enlace de Google Drive en Gmail y todos accederán a la misma versión del archivo de forma automática.

Google+
Tus vídeos y fotos de Google Drive están disponibles al instante en Google+ para que puedas compartirlos con tus círculos con tan solo un solo clic.

Google Drive te permite acceder a tus archivos más rápidamente. Busca contenido por palabras clave y filtra por tipo de archivo, por propietario y muchos otros criterios. Google Drive puede incluso reconocer objetos en las imágenes y texto en los documentos escaneados.

Abre más de 30 tipos de archivo diferentes directamente en el navegador, como vídeos de alta definición, Adobe Illustrator y Photoshop, aunque no tengas el programa instalado.

Crea, abre y comparte archivos desde diversas aplicaciones directamente en Google Drive.

Puedes compartir archivos o carpetas con las personas que quieras y decidir si pueden ver, modificar o comentar el contenido.

Crea y responde a comentarios para obtener opiniones. Amplía el nivel de colaboración de tus archivos.

Google Drive realiza un seguimiento de todos los cambios que efectúas, de modo que cuando pulsas el botón Guardar, se guarda una nueva revisión. Puedes consultar las revisiones de hasta 30 días atrás automáticamente o guardar una revisión de forma definitiva.

Enlace: Google Drive


Wetransfer - Enviar archivos de gran tamaño

WeTransfer es una plataforma gratuita en la transferencia de grandes archivos digitales de hasta 2 GB por transferencia. Podemos transferir cualquier tipo de archivo - tales como presentaciones, fotos, videos, música, documentos y mucho más.
Enlace: WeTransfer

viernes, 20 de abril de 2012

Saaspose - Crear y convertir documentos en la nube




SaaSpose es un nuevo documento basado en la plataforma de nueva generación, la nube, facilitando la conversión y la automatización para los desarrolladores. SaaSpose API ofrece a los desarrolladores de plataformas de todo el control total sobre los documentos y formatos de archivo. Se interactúa a la perfección con otros servicios en la nube.

Hace que sea fácil para los desarrolladores web y móvil de aplicaciones para trabajar con documentos de Microsoft Word, hojas de cálculo Microsoft Excel, presentaciones de Microsoft PowerPoint, archivos PDF de Adobe, los formatos OpenDocument y los formatos y protocolos de correo electrónico en sus aplicaciones.

El API REST se puede llamar desde cualquier plataforma. NET, Java, Ruby, Salesforce, Amazon, y mucho más.

API SaaSpose de REST te permite añadir soporte para todo tipo de tareas comunes en su aplicación web: conjunto de documentos, combinación de correspondencia, informes, conversión de archivos de texto y extracción de la imagen, la eliminación de metadatos, la generación de código de barras y el reconocimiento, seguimiento de correo electrónico y la creación, el contenido de asignación de blancos a diferentes dispositivos.

Enlace: Saaspose 

Menus usando Jquery y algunos CSS3 (Codigo fuente + demos)

Menu redondo con balanceo y rodado




Menu con caja de deslizamiento hacia abajo con CSS3



Cufonized desplegable con CSS3



Slide out



Animado Cool



Navegacion con imagenes diferentes de fondo



Inferior deslizable



Cajas pequeñas


jueves, 19 de abril de 2012

DaleYa - Buscador de trabajos, videos presentaciones

En esta herramienta podrás encontrar trabajos,videos,presentaciones y todo tipo de recursos en segundos ademas de buscar en diferentes servidores.

Enlace: Daleya.

miércoles, 18 de abril de 2012

PunyPNG - Compresión de imagenes


PunyPNG es una herramienta de optimización de sitios web gratuita que reduce drásticamente el tamaño de archivo de tus imágenes sin pérdida de calidad, muy útil para diseñadores y desarrolladores.

Permite comprimir archivos PNG, JPG, GIF y permite un tamaño maximo de imagen de 150 kb.

No requiere registro, pero si lo haces tendras las siguientes ventajas:

  • Más controles de compresión
  • Preservar la información EXIF
  • Apoyo a IE6, acceso a la API entre otras cosas
Enlace: PunyPNG 

lunes, 16 de abril de 2012

Sageframe - CMS con ASP.NET

SageFrame es un código abierto altamente extensible CMS que te ayuda a construir su sitio, y desarrolla a la perfección. Se faculta a usted con todas las herramientas esenciales necesarias para el desarrollo de módulos personalizados, aplicaciones, plantillas y varios sitios web de uso con facilidad y comodidad.
El concepto de módulo plug-n-play empleados en SageFrame ofrece mayor dinamismo a su sitio, y también tiene previsto la adición de nuevas características. Por otra parte, en virtud de la función de arrastrar y soltar widget de, y un panel de control altamente configurable, SageFrame imparte flexibilidad a su sitio web como ningún otro CMS.

Enlace: SageFrame

jueves, 12 de abril de 2012

Libros en la red para diseñadores web


 Una guía práctica para diseñar para la web tiene el objetivo de enseñar las técnicas para el diseño de su sitio web utilizando los principios de diseño gráfico.
Con cinco secciones, cada una cubriendo un aspecto fundamental del diseño gráfico: Introducción, Investigación, tipografía, color y diseño.


¿Quieres construir una aplicación web de éxito?
Getting Real es un enfoque ideal para software basado en web. El modelo de la vieja escuela del software de envío en una caja y luego esperar un año o dos para ofrecer una actualización se está desvaneciendo. A diferencia del software instalado, las aplicaciones web pueden evolucionar constantemente en el día a día. Getting Real aprovecha esta ventaja para todo su valor.

Los elementos de estilo tipografico aplicados a la web


Una guía práctica para la web de la tipografía
 
El libro de Robert Bringhurst de los elementos del estilo tipográfico es considerado como un clásico en el campo. De hecho, el famoso tipógrafo Hermann Zapf proclama que el libro es "una necesidad para todo el mundo en las artes gráficas, y en especial para nuestros amigos nuevos que entran en el campo".

Con el fin de disipar algunos de los mitos que rodean a la tipografía en la web, se ha estructurado este libro para desplazarte por los principios de trabajo Bringhurst, explicando cómo realizar cada una de sus
técnicas disponibles utilizando HTML y CSS. El futuro se considera con la cobertura de CSS3, y el sentido práctico está siempre presente con sus soluciones, alternativas y compromisos de los navegadores menos capaces.

Fundamentos Jquery 

  
jQuery se está convirtiendo en  imprescindible para los desarrolladores de front-end. El propósito de este libro es proporcionar una visión general de la biblioteca jQuery JavaScript, cuando haya terminado con el libro, usted debería ser capaz de completar tareas básicas usando jQuery, y tener una base sólida para continuar con su aprendizaje. Este libro fue diseñado como material para ser utilizado en un salón de clases, pero puede resultar útil para el estudio individual.

A continuación, usted tendrá la oportunidad de trabajar en un ejercicio relacionado con el concepto. Algunos de los ejercicios pueden parecer triviales, mientras que otros pueden ser francamente dificiles. En cualquier caso, no hay calificación, el objetivo es simplemente hacer uso de su forma de trabajo a través de los problemas que normalmente va a ser llamados a resolver utilizando jQuery. Ejemplos de soluciones a todos los ejercicios se incluyen en el código de ejemplo.







 
Guia de estilos web (3 Edicion)




Escrito para los diseñadores de sitios web de las empresas, gobierno, organizaciones sin fines de lucro, e instituciones académicas, el libro explica los principios establecidos en el diseño y cubre todos los aspectos de la web, desde el diseño, la planificación hasta la producción y mantenimiento. La guía también muestra cómo estos principios se aplican en proyectos de diseño web cuyas principales preocupaciones son el diseño de información, diseño de la interfaz, y la búsqueda eficiente y de navegación.
Dummies y diseñadores avanzados encontrarán que se trata de la guía disponible más práctico. Nuevo en esta edición:
  • un capítulo dedicado a la facilidad de uso universal
  • información sobre la optimización de motores de búsqueda y los diseños que mejoren
  • un capítulo sobre la arquitectura de la información y la forma de promover un desarrollo sólido
  • técnicas para el empleo de hojas de estilo en los diseños y el diseño tipográfico
  • 185 ilustraciones a todo color
Acceso de diseño  
 

 


Una guía para la usabilidad universal para diseñadores web, por Sarah Horton
 




Guía de diseño web El éxito es la guía definitiva para comenzar su propia web independiente de negocio. En este libro se ofrece a los diseñadores paso a paso las instrucciones sobre la forma de lograr lo siguiente:

     La transición de tiempo completo para el autoempleo
     Pautas para conseguir un ingreso adicional
     Buscar nuevos clientes y hacer que regresen
     Promociona tu negocio independiente
     Gestiona tus proyectos profesionales
     Gestionar los precios de tu servicio de forma adecuada
 
 
 

  • Los principios básicos para incluir la accesibilidad en proyectos de diseño.
    • Trucos para lograr que personas con discapacidad colaboren en un proyecto de diseño.
    • Consejos para tener una buena relación con personas con discapacidad.
  • Detalles sobre la accesibilidad en cada fase del proceso de diseño centrado en el usuario (DCU).
    • Ejemplos de cómo tener en cuenta la accesibilidad en la creación de perfiles de grupos de usuarios, personajes y escenarios.
    • Consejos sobre cómo hacer una valoración de la accesibilidad a través de la evaluación heurística, las simulaciones y las técnicas de filtrado.
    • Análisis detallado de la planificación, preparación, realización, análisis y elaboración de informes de pruebas de usabilidad eficaces con participantes con discapacidad.
    • Preguntas apropiadas para un formulario de selección de participantes.
    • Lista de verificación para las pruebas de usabilidad con participantes con discapacidades.
 
 

miércoles, 11 de abril de 2012

Codeguard - Backpups online de tu web


Codeguard es una herramienta que nos permite crear backups de nuestra introduciendo el FTP de nuestro servidor web con sus respectivas credenciales, ademas nos ofrece 2 Gb de almacenamiento de modo gratuito.

Enlace: Codeguard

domingo, 8 de abril de 2012

RankGoo - Posicionamiento Google

Rankgoo es una herramienta que nos permite saber mediante un conjunto de palabras la posicion en la que se nuestra web en el buscador de google de diferentes paises como España, Venezuela, Mexico, Argentina, entre otros.

Enlace: RankGoo

Logocraft

soswebayuda.blogspot.com - logocraft
Logocraft es un creador de logotipos en linea especialmente diseñado para negocios. Cada logotipo creado puede guardarse o descargarse para su uso. Después de la creación se puede acceder al logo creado en cualquier momento y volverse a editar. Todo esto sin tener que descargar ningún software y sin experiencia necesario en diseño para crear logos profesionales en tu sitio web y negocio

No hay absolutamente ningún costo para crear tu propio logo. Se puede usar en tu sitio web, tarjetas de visita, papelería, etc. Puedes diseñar y descargar cualquier cantidad de logos.

Para crear el logo solo hacen falta 3 pasos:

El primer paso es crearse una cuenta para poder tener un historial y modificar los logos que hayamos creado, a continuación seleccionamos una imagen de las imágenes proporcionadas. Hay un gran numero de logotipos divididos por categorías.

A continuación editamos el logo seleccionado en el editor. Personalizamos el icono con el nombre de la empresa, los colores de la compañía, una fuente que representa a la empresa, y mucho más.

Y por ultimo una vez terminado, guardamos el logo. Podremos volver a acceder en cualquier momento para hacer otras modificaciones o descargarlo .

Enlace: Logocraft 

 

sábado, 7 de abril de 2012

PicMonkey


PicMonkey es el nuevo editor de imagenes con el que Google pretende sustituir a Picnik. 
Sigue manteniendo las mismas herramientas que el anterior pero evolucionado destaca su velocidad, su potencias y su facilidad de uso. Este editor funciona de manera gratuita y sin ningun registro y sus principales funcionalidades son:


  • Ediciones Basicas (Cortar, pegar, rotar, reajustar tamaño...)
  • Efectos (Se van actualizando con mucha frecuencia)
  • Retoque de imagen (Ojos rojos, clonado y demas cosas para la estetica)
  • Textos en gran cantidad
  • Formas y stickers de estrellas, corazones, flechas, smileys, emoticonos entre otras. 
  • Marcos
  • Texturas
Enlace:PicMonkey

martes, 27 de marzo de 2012

BlueStacks - Android en PC


Tus programas y demás favoritos de android pueden ser ejecutados desde el pc mediante la instalación de este emulador que además permite la ejecución en pantalla completa.



Aqui podemos ver el famoso Angry Birds Space emulado a pantalla completa.

Enlace: Bluestacks

CSS Lint

Esta web nos permite revisar nuestro codigo CSS para comprobar si nuestra sintaxis es correcta.
Si encuentra algun fallo nos dice exactamente cual es el fallo para poderlo corregir rapidamente.

Enlace: CSS Lint

viernes, 23 de marzo de 2012

Picozu

Picozu es un editor de imagenes, hecho con HTML5, JavaScript y CSS3.
Picozu tiene la mayor parte de las características de un editor de imágenes de escritorio: gestión de capas, multitud de filtros, pinceles, creación de formas, texto, recorte de imágenes. Es fácil de usar y la interfaz es similar a la que estamos acostumbrados en otros editores como Photoshop o GIMP.
Además, podemos subir imágenes desde nuestro ordenador o desde otros servicios como Facebook o Picasa para después editarlas y guardarlas a nuestro PC.

Enlace: Picozu

jueves, 22 de marzo de 2012

Mapa de la Web 2.0

En este mapa se pueden ver todos los contenidos de la Web 2.0 ordenados por grupos tales como blogs, lectores de feeds, wikis entre muchos otros.

Design Kindle


Design Kindle es una web que ofrece recursos para el diseñador actual, esta dividido en categorias como sitios web, graficos, vectores, iconos, texturas, estilos, etc.
En la portada de la imagen se pueden ver cosas tan interesantes como un slider de imagenes e iconos sociales.

Enlace: Design kindle

martes, 20 de marzo de 2012

Cursos de programación online



Hurricane Electric ha puesto a nuestra disposición completamente gratis varios programas interactivos para aprender a programar lenguajes como Perl, PHP, Ruby, Python y SQLite. Y no se olvidó de los populares en la web como Html, CSS, Javascript, JQuery y XML.
En cada lenguaje tenemos una serie de ejercicios para completar, cada dia nos lleva un recuento de los ejercicios ya echos, ademas nos muestra videotutoriales de youtube en cada lenguaje.

Enlace de la página principal:


Enlaces a cursos de programación:


Enlaces a cursos de desarrollo web:


miércoles, 14 de marzo de 2012

978.gs


978.gs es un sistema de grids para mobiles, tablets y equipos, tienes diferentes hojas de estilo para 300px, 748px, 1218px y 1378px

Enlace: 978.gs

Arctext


Arctext curva textos haciendo uso de CSS3 y Jquery.
Usa las siguientes opciones:
radius  : 0,
// the minimum value allowed is
// half of the word length.
// if set to -1, the word will be straight.
dir     : 1,
// 1: curve is down,
// -1: curve is up
rotate  : true,
// if true each letter should be rotated.
fitText : false
// if you want to try out the
// fitText plugin (http://fittextjs.com/)
// set this to true.
// Don't forget, the wrapper should be fluid.

jTable

jTable nos permite crear tablas con un diseño muy elegante mediante jquery.

Características: 

  • Crea automáticamente tabla HTML y los registros de cargas de servidor usando AJAX.
  • Crea 'crear nuevo registro "forma de diálogo jQueryUI. Cuando el usuario crea un registro, envía los datos al servidor usando AJAX y agrega el mismo registro a la tabla en la página.
  • Crea una forma 'Record Edit' jQueryUI diálogo. Cuando el usuario edita un registro, se actualiza el servidor usando AJAX y las actualizaciones de todas las celdas en la tabla en la página.
  • Permitir que el usuario 'eliminar un registro "por la confirmación de diálogo basado en jQueryUI. Cuando el usuario elimina un registro, elimina el registro del servidor usando AJAX y elimina el registro de la tabla en la página.
  • Muestra animaciones para crear / borrar / editar las operaciones sobre la mesa.
  • Admite la paginación del lado del servidor usando AJAX.
  •  Permite al usuario seleccionar filas.
  •  Expone algunos eventos para permitir la validación de formas.
  •  Todo el estilo de la tabla y las formas se definen en un archivo CSS, de esta manera puede cambiar el estilo de todo lo de usar plug-in en sus páginas. Archivo CSS está bien definido y comentado.
  •  Viene con temas de color predefinidas.
  •  Funciona en todos los navegadores comunes.
   
Enlace: jTable

martes, 13 de marzo de 2012

Prezentit

Prezentit es una herramienta que nos permite crear transiciones, textos, imagenes, fondos, colores de fondo online como si utilizaramos powerpoint.
Una vez terminadas podremos compartir las creaciones en blogs, webs, descargarlo, tener una vista previa o compartir por correo.

Enlace: Prezentit

JustPaste.it


JustPaste.it nos permite compartir todo tipo de textos e imagenes, videos, etc muy util para compartir cosas entre docentes y alumnos de manera sencilla se puede utilizar tanto el editor normal como el html.
Entre sus funcionalidades destaca que permite pegar texto de editores como Word sin perder el formato, importar cualquier nota al editor, crea copias de seguridad automáticamente y permite exportar a PDF.

Enlace: JustPaste.it