Programacion web Mallorca | Diseño web Mallorca | SEO Mallorca | HTML Mallorca | CSS Mallorca

Consejos para la optimización de Jquery

2012-09-20T12:34:00.000+02:00

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:

Jquery Cheatsheet

Jquery cheatsheet 2

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!!");

Colección de plugins jQuery interesantes

2012-07-05T21:47:00.002+02:00

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

Demo | Descarga

Menu en caja

Demo | Descarga

Plugin Jquery para busqueda por demanda

Demo | Descarga

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

Demo | Descarga

Slider de imagenes

Demo | Descarga

Thumbmail con efecto de proximidad mediante CSS3 y Jquery

Demo | Descarga

Subida de ficheros

Demo | Descarga

CraftMap mapas con puntos guia

Demo | Descarga

Menu abanico con CSS3 y Jquery

2012-07-05T20:35:00.000+02:00

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.

Demo | Descarga

Somnote - Manejo de notas

2012-04-28T12:52:00.000+02:00

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

2012-04-28T11:53:00.002+02:00

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

2012-04-28T11:17:00.001+02:00

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

Enlace: Iconspedia

Google Drive - 5 GB de almacenamiento gratuito

2012-04-24T19:18:00.001+02:00

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

2012-04-24T18:52:00.001+02:00

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

Saaspose - Crear y convertir documentos en la nube

2012-04-20T21:17:00.000+02:00

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)

2012-04-20T20:41:00.000+02:00

Menu redondo con balanceo y rodado

Demo Codigo fuente

Menu con caja de deslizamiento hacia abajo con CSS3

Demo Codigo fuente

Cufonized desplegable con CSS3

Demo Codigo fuente

Slide out

Demo Codigo fuente

Animado Cool

Demo Codigo fuente

Navegacion con imagenes diferentes de fondo

Demo Codigo fuente

Inferior deslizable

Demo Codigo fuente

Cajas pequeñas

Demo Codigo fuente

DaleYa - Buscador de trabajos, videos presentaciones

2012-04-19T20:00:00.000+02:00

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

Enlace: Daleya.

PunyPNG - Compresión de imagenes

2012-04-18T17:41:00.003+02:00

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

Sageframe - CMS con ASP.NET

2012-04-16T21:09:00.002+02:00

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

Libros en la red para diseñadores web

2012-04-12T17:30:00.000+02:00

Diseñando para la 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.

Getting Real

¿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

Guia de diseñador de paginas web con exito

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

Integración de la accesibilidad en el diseño

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.

Codeguard - Backpups online de tu web

2012-04-11T21:13:00.002+02:00

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

RankGoo - Posicionamiento Google

2012-04-08T13:52:00.000+02:00

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

2012-04-08T13:07:00.000+02:00

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

PicMonkey

2012-04-07T12:50:00.000+02:00

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

BlueStacks - Android en PC

2012-03-27T20:47:00.003+02:00

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

2012-03-27T20:32:00.000+02:00

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

Picozu

2012-03-23T18:55:00.000+01:00

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

Mapa de la Web 2.0

2012-03-22T18:30:00.000+01:00

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.

Enlace: Mapa Web 2.0.pdf

Design Kindle

2012-03-22T17:43:00.000+01:00

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

Cursos de programación online

2012-03-20T17:25:00.000+01:00

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:

Hurricane Electric

Enlaces a cursos de programación:

Perl PHP Ruby Python SQL

Enlaces a cursos de desarrollo web:

HTML CSS Javascript Jquery XML

978.gs

2012-03-14T20:00:00.000+01:00

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