Hay 1 articulo(s) nuevo(s) en portada, haz click aquí para leer.

Frogx Three

Desarrollo

Categoría dedicada al desarrollo web, todo lo relacionado con programación en diferentes lenguajes como PHP, HTML5, CSS3, JavaScript, etc. Aquí encontraras recursos, ejemplos y tips de desarrollo.

Vangrant herramienta para crear maquinas virtuales especiales para programadores

vangrant

Tenia ya varios días queriendo compartir Vangrant con ustedes, Vangrant es una aplicación el cual te permite crear entornos de desarrollo a la medida especiales para equipo de programadores que necesitan trabajar en proyectos compartiendo entornos de desarrollo con las mismas características, Vangrant es una herramienta para crear maquinas virtuales especiales para programadores y que soluciona aquel problema extremadamente común en los programadores, el clásico “pero en mi maquina si funciona” ya que esta aplicación te permitirá a ti y a tu equipo crear maquinas virtuales idénticas para cada miembro, compartiendo exactamente las mismas características. Por ejemplo, pongamos en perspectiva una situación, si tienes un equipo de trabajo que se prepara para desarrollar un proyecto web que esta destinado a funcionar en un Servidor Ngix, con PHP y MySQL en sus ultimas versiones y alguna serie de características especificas como Memcache, Composer, Laravel 4, etc. pero tu equipo utiliza herramientas como......

Seguir leyendo 61

PhotoSwipe script para galerías de imágenes con soporte de gestos Touch

photoswipe

PhotoSwipe es uno de los mejores scripts JavaScript disponibles en Internet para crear galerías de imágenes para paginas web, es un script completamente gratuito que no tiene dependencias con otros scripts o frameworks, es decir no tendrás necesidad de utilizar jQuery, Mootools ni ningún otro framework, PhotoSwipe ofrece un completo soporte de gestos Touch y MultiTouch que convierte a esta galería de imágenes en un excelente recurso para diseñadores web que ofrezcan diseños de paginas web responsivas con soporte para móviles y tabletas. PhotoSwipe, a su vez utiliza elementos de navegación SVG que se adaptan de forma automática a cualquier resolución sin perdida de calidad, ofrece soporte de navegación con el teclado, otra característica bastante interesante de PhotoSwipe y que la hace diferente a otras opciones disponibles en Internet es su optimización para SEO, ya que tiene un generador de URL’s que permiten ser generadas para cada elementos de tus......

Seguir leyendo 53

Underscores, generador de plantillas base responsivas para WordPress

underscores

Underscores o _S es una plantilla base para WordPress la cual podemos utilizar para implementar a partir de ella nuestros diseños web y tomarla como base para crear los diseños de nuestra pagina web utilizando WordPress como motor principal, en el sitio web que enlazo al final de estas lineas podrán encontrar un generador de plantillas base responsivas para WordPress gratuito el cual genera plantillas basado en la plantilla Underscores, la cual es Open Source. El sitio te genera un archivo Zip con la plantilla underscore con soporte responsivo el cual puedes utilizar para tu pagina web, en el sitio antes de generar puedes personaliza el nombre de la plantilla, el nombre del autor, la URL del autor, la descripción e incluso puedes solicitar que en el paquete se incluya un archivo SASS para manejar los estilos CSS utilizando SASS. Este generador de plantillas para WordPress es gratuito, y seguro que les......

Seguir leyendo 46

Tutorial para crear mockups 3D interactivos con CSS3 y jQuery

3d-animated-mockup-featured-new

Si eres diseñadores sabras lo importante que puede llegar a ser aplicar un poco de animación en una pagina web, y si tus usuarios tiene interacción con eventos de tu sitio para provocar animación mejor, pero y si combinas todo eso y creas formas interactivas para hacer demostraciones que permitan a tus visitantes y interactuar y que tengan un entorno visual agradable, bueno esto seria increíble. Eso es lo que podrás lograr si sigues el siguiente tutorial que estoy compartiendo con ustedes, y que si bien esta en Ingles bien que vale la pena esforzarse un poco en comprenderlo. Este tutorial para diseñadores web te permitirá crear mockups 3D interactivos con CSS3 y jQuery, una combinación que bien utilizada y aprovechada es una bomba, en el enlace que les comparto al final podrán encontrar el tutorial completo que les explica como funciona y como utilizarlos, también podrán descargar los archivos......

Seguir leyendo 16

MixitUp, Plugin jQuery para filtrar y reordenar grids dinámicamente

mixitup

Me encontré un plugin jQuery genial que quiero compartir con ustedes se llama MixitUp y creo que lo aplicare en algún momento al blog, MixitUp es un plugin jQuery que te permite agregar dinamismo al grid de tu pagina web, el plugin te permite filtrar y reordenar bloques en un grid de forma dinámica y con animación agregando un toque visual y bastante interesante a la tu diseño, de tal manera que puedes ofrecer una opción interesante de filtrado de datos con un poco de interacción y animación que harían mas cómoda y agradable la interacción de los usuarios que visitan tu pagina con la información que ellos encuentran en tu sitio. El plugin es gratuito, y lo puedes utilizar sin problemas en cualquiera de tus paginas web, en el sitio hace referencia a una licencia comercial pero esta es solo si tienes intensiones de incluir MixitUp en un plantilla......

Seguir leyendo 44

Script para agregar animaciones a imágenes SVG en tu pagina web

vivus

La semana pasada les hable de un sitio donde podían encontrar un plugin para animar iconos para web, aquellos iconos estaban construidos utilizando imágenes SVG y al menos en aquel sitio los podían integrar de manera sencilla en una pagina web utilizando jQuery, en este nuevo recurso para diseñadores les vengo a compartir Vivus, un script JavaScript para agregar animaciones a imágenes SVG aprovechando la propiedad strokeDashoffset que ofrece CSS3 la cual utiliza el script para crear una animación de dibujo de lineas de las imágenes SVG que estes utilizando en tu pagina web. El script es gratuito y muy, muy pero muy fácil de utilizar, simplemente basta con incluir el script en tu pagina y llamar a la función que se encargara de animar las imágenes SVG que le indiques en cada llamada, les dejo el enlace hacia el sitio oficial de esta librería JavaScript y espero que les sea de......

Seguir leyendo 48

Plugin jQuery para cambiar diseño de elementos de formularios web

Labelauty

Labelauty es un pequeño pero muy útil plugin jQuery para cambiar el diseño de elementos de formularios web, en particular de los elementos Checkbox y los Radio Buttons, que podrán ser muy útiles pero son los elementos más inflexibles para crear diseños de paginas web con formularios que se adapten al diseño, el plugin prácticamente convierte los elementos checkbox y radio buttons en botones seleccionables a los cuales les puedes aplicar diseños mas agradables y que se puedan adaptar a la identidad del sitio sin perder la funcionalidad que estos elementos nos ofrecen. La imagen de abajo te muestra un ejemplo de como utilizar este plugin jQuery para cambiar el diseño de formularios web, el plugin es completamente gratuito y bastante sencillo de aplicar, basta con iniciar el script en el footer o cabecera de tu sitio web para que el diseño de todos los elementos checkbox y radio buttons se......

Seguir leyendo 74

Brackets 1.0 un gran editor para diseñadores web con increíbles mejoras

nueva version brackets

Hace unos meses les recomendé un nuevo editor para diseñadores web Open Source creado por Adobe y de nombre Brackets, en aquel entonces este fantástico editor para crear paginas web estaba en versión beta 0.4 y incluso en aquel momento Brackets se plantaba como una excelente alternativa entre los IDE de programación para diseño web, bueno pues el día de ayer Adobe lanzo Brackets 1.0 la primera versión estable de este editor de código para diseño web, la nueva versión de Brackets incluye una serie de características fantásticas que te harán reconsiderar elegir este como tu editor de código web oficial. Principales características de Brackets 1.0 Editor en linea En lugar de saltar entre tabs de archivos, Brackets te permite abrir una ventana directa al código que más te interesa. ¿Quieres trabajar en el archivo CSS que se aplica al ID específico de un elemento HTML? Basta con poner el cursor del ratón sobre......

Seguir leyendo 65

Plugin jQuery para animar iconos para diseños web

livIcons

Hace unos días revisando la documentación de Google Materials vi los efectos de transformación que utilizan en los iconos de sus aplicaciones, efectos bastante interesantes que aprovechan una combinación entre CSS3 y SVG, pero requieren de mucho código CSS, algo que no todos están dispuestos a incluir en sus archivos, buscando un poco me tope con una excelente alternativa, se trata de un plugin jQuery para animar iconos para diseños web. El plugin en cuestión se llama LivIcons que esta combinación entre jQuery, Animaciones CSS y WebFonts, bastante interesante, no se trata de una aplicación que anima los iconos que tienes ya incluidos en tu pagina, el plugin incluye un pack de iconos prediseñados con animaciones de transformación que puedes incluir en tu sitio o utilizar para reemplazar los iconos estaticos que actualmente tengas en tu pagina web. Un excelente recurso para diseñadores web que te permitirá agregar dinamismo a......

Seguir leyendo 36

Efecto de transición elástico con JavaScript

efecto elastico transiciones

Muchas veces en artículos anteriores sobre diseño web he mencionado la importancia de la interactividad y el encanto visual que deberían tener las paginas web para gustar a los usuarios, no se trata solo de la combinación de colores, el movimiento cuenta mucho, pero eso no significa hacer que todo se mueva como antes sucedía con Flash, se trata de volver a los principios del diseño y ha aquella frase que dice “los detalles hacen al diseño”. Eso es algo que podemos lograr con este efecto llamado Wobbly por su creador, se trata de un afecto de transiciones elásticas aplicado a Slideshows de pantalla completa, es un efecto tan sencillo como atractivo que le dará a tu web un toque que la hará diferente de todas las demás, es un script basado en JavaScript y CSS3 bastante sencillo y liviano. Al final podrás encontrar dos enlaces uno hacia el demo donde podrán......

Seguir leyendo 79

Repositorio con los mejores plugins jQuery para diseño web

repositorio plugins jquery

Les invito a navegar por este interesante repositorio de plugins jQuery que me he encontrado en el pude conocer algunos plugins jQuery para diseño web que ni siquiera conocía, todo esta muy bien organizado por categorías según la función principal que estos plugins realicen por ejemplo yo conocí este sitio buscando plugins que me puedan ayudar en el diseño de interfaces web, y he encontrado cosas sencillas pero muy buenas, lo mejor de todo que todos los plugins que encontraras en este repositorio son gratuitos. Estoy seguro que este sitio debe entrar en tu lista de favoritos si eres un diseñador web que le gusta innovar y presentar cosas diferentes en sus diseños, después de todo aquel dicho que dice “el diseño esta en los detalles” no se aplica únicamente al diseño impreso, también se aplicar en el diseño web, y es que muchas veces un detalle de movimiento e......

Seguir leyendo 107

Framework HTML5 para crear apps para móviles

onsen ui framework html5

Onsen UI es un interesante y poderoso Framework HTML5 para crear apps para móviles, es un framework basado en una gran colección componentes y elementos UI para facilitar y agilizar la creación de aplicaciones para móviles, Onsen UI es un framework que se integra perfectamente con Phone Gap y Cordova apps, dos frameworks especializados en la creación de aplicaciones móviles utilizando HTML5, CSS y JavaScript. Todos los elementos de Onsen UI tienen propiedades responsivas que se adaptan perfectamente a diferentes resoluciones sea en aplicaciones para tabletas o para teléfonos móviles, el framework también trabaja perfectamente con dos poderosos frameworks JavaScript como son Angular JS de Google y el conocido jQuery. Onsen UI es un framework HTML5 tipo Open Source es decir que es gratuito y lo puedes utilizar en tus aplicaciones móviles sean gratuitas o de paga, el paquete integra de igual forma por default la librería de iconos Font Awesome, muy......

Seguir leyendo 71

Plugins para crear paginas multilenguaje con WordPress

wordpress multilenguaje shutterstock

Como diseñadores web muchas veces nos piden características especiales que si consideramos tiempo de desarrollo, diseño y programación los costos suelen elevarse mucho y si de por si los cliente quieren el trabajo casi gratis si les comentamos que una nueva característica elevaría los costos, estos pegan el grito al cielo, pero existen alternativas en Internet que nos pueden reducir tiempos de trabajo y permiten ofrecen servicios no a la medida pero que cumplen en esencia lo que muchas veces piden los clientes con costos no tan elevados. Esto sucede mucho cuando llega un cliente solicitando un sitio en varios idiomas, la opción más sencilla es incluir Google Translate, pero seamos sinceros por mucho que nos ayude Google a traducir textos en diferentes idiomas, Google no es perfecto. Si utilizamos algún gestor de contenidos sea un CMS o un gestor de Blogs como WordPress (que se puede utilizar como CMS)......

Seguir leyendo 154

Plugin WordPress para construir paginas responsivas sin pogramación

wordpress page builder plugin

Site Origin ofrece un excelente y poderoso plugin para WordPress perfecto para construir paginas web responsivas sin necesidad de programar, el Page Builder Plugin para WordPress que ofrecen los chicos de Site Origin es un poderoso plugin que trabaja con una amplia colección de widgets prediseñados y que se adaptan a tu diseño. El plugin te permite crear paginas dentro de tu WordPress arrastrando y soltando diferentes widgets por pagina de forma personalizada, ordenando cada uno los de los widgets en el sitio según tus necesidades, el plugin te permite agregar widgets de Slides, botones de acción, videos, embeds de redes sociales, widgets de contenido, formularios todo adaptables y utilizando configuraciones automáticas que se adaptan a las dimensiones de la pantalla de nuestros visitantes, permitiendo crear diseños web responsivos de una forma rápida y muy sencilla. El plugin es completamente gratis, y nos facilitara crear toda la estructura de la pagina,......

Seguir leyendo 98

Plugin para hacer tus formularios web más esteticos

formplate

Formplate es un plugin para hacer que los formularios de tu pagina web se vean más estéticos y con un diseño fuera del común y feo diseño que se muestra por default como parte del UI de cada navegador, este plugin es una combinación entre JavaScript y CSS3 que genera código HTML5 valido para cambiar el estilo de tus formularios y el diseño sea el mismo sea en navegadores web de computadoras de escritorio, móviles o tabletas, sin importar el navegador, la versión o el sistema operativo. El plugin es gratuito, utiliza un par de dependencias las cuales son Modernizr y jQuery para funcionar de forma adecuada e integrarse correctamente con cualquier navegador web, en su pagina web la cual enlazamos más abajo se muestra un ejemplo de como incluir este plugin en tu pagina web. Enlace para descargar Formplate...

Seguir leyendo 134

App JavaScript para crear lineas de tiempo con HTML5 y CSS3

timesheet js

Time Sheet JS es una interesante App JavaScript que te facilita crear lineas de tiempo aprovechando la flexibilidad de HTML5 y CSS3, es un script muy fácil de utilizar e integrar en tu pagina web, basta con incluir el script y definir un arreglo en formato JSON con los datos que deseas se desplieguen como parte de la linea de tiempo, definiendo para cada dato una fecha inicial y una fecha inicial así como la información referente a dicho evento. La forma en la que nos permite crear las lineas de tiempo nos permite crear el arreglo de datos y eventos de manera muy sencilla integrando los datos desde una base de datos usando AJAX por ejemplo, no hay mucha documentación sobre la herramienta, solo una pequeña guía que explica como crear tu primera linea de tiempo con Time Sheet, les dejo el ejemplo. Por cierto resaltar que esta librería no......

Seguir leyendo 58

Directorio para encontrar APIs de desarrollo para tus proyectos

mashape

Si eres desarrollador web o de aplicaciones móviles seguro muchas veces te haz preguntado si existe algún script o aplicación que te facilite realizar tareas complejas o que te permitan conectarte con servicios o redes sociales para interactuar con la información de dicho sitio, bueno ahi es donde las APIs son muy útiles ya que son frameworks de desarrollo completos que te permite conectar con servicios públicos o redes sociales para interactuar con la información que estos ofrecen o realizar publicaciones en otros sitios. Pero no solo existen APIs de redes sociales, también existen otras que te permiten conectarte a servicios medicos, servicios financieros, de marketing e incluso de telefonía móvil que te ayudaran a mejorar tus aplicaciones y quizás a dotarlas de funciones que pudieras pensar que es imposible realizar, por ello quiero recomendarles Mashape un excelente directorio de APIs donde puedes encontrar todos estos recursos para desarrolladores, todo......

Seguir leyendo 79

Plugin jQuery para crear diseños web inspirados en Windows 8

grid windows 8 metro

Gridster es un excelente y muy útil plugin jQuery perfecto para diseñadores web que busquen crear diseños de paginas web modernos y fuera de lo común, este plugin hecho con jQuery te facilita la construcción de diseño web inspirados en el sistema de girds o rejillas que utiliza el tema Metro que viene por default en Windows 8, Metro presento un estilo de organización de contenidos y accesos por medio de bloques ordenados de forma aleatoria en diferentes dimensiones encajando perfectamente entre ellos. Gridster también permite agregar eventos drag & drop a estos bloques con la intensión de reordenarlos al arrastrar y provocando un efecto de acomodo automatico entre los bloques, este plugin es completamente gratuito y muy fácil de utilizar en la pagina web oficial podrán descargarlo y ver una serie de ejemplo de uso de Gridster. Enlace para descargar Gridster...

Seguir leyendo 79

El nuevo WordPress 4.0, una mejor experiencia de redacción

wordpress

Ayer se lanzo el nuevo WordPress 4.0, el cual añade nuevas características enfocadas a una mejor escritura de artículos, gestión de contenido y a mejorar la experiencias de los usuarios de WordPress en general, esta nueva versión de WordPress viene bajo el nombre de “Benny” en honor al clarinetista estadounidense de Jazz y director de orquesta Benny Goodman. Según el creador de WordPress y fundador de Automattic, Matt Mullenweg esta nueva versión no es considerada como un actualización importante al menos internamente, para ellos es solo una nueva versión, pero para los usuarios esto supone algo que hay que agradecer, porque quizás en cantidad los cambios sean “pocos” pero en realidad estos cambios mejoran por mucho la experiencia de escribir y gestionar artículos y contenido con WordPress. Características del nuevo WordPress 4.0 “Benny” Gestor de medios Un nuevo gestor de medios, con una navegación y visualización de tus medios en tipo rejilla......

Seguir leyendo 106

Tutorial para crear notificaciones animadas con CSS3

notificaciones css

Fantástico tutorial y códigos CSS3 para crear increíbles diseños de notificaciones con animación para tus diseños de paginas web, en el ejemplo que enlazamos al final verán 12 ejemplos de notificaciones web animadas con muy buen diseño y fáciles de aplicar en tu pagina, algunas utilizan librerías JavaScript para las animaciones y las acciones pero en general se trata de código CSS para generar las animaciones utilizando transiciones y los keyframes, características incluidas en CSS3 y que ya son soportadas por la gran mayoría de los navegadores web modernos. En el segundo enlace encontrarán el enlace para descargar la guiá de instalación y un paquete con los códigos CSS3 y scripts JavaScript para utilizar todos estos diseños de notificaciones animadas para mejorar el diseño de interface de tus paginas web. Enlaces: Demo | Descargar códigos y tutorial...

Seguir leyendo 48

Pagina 1 de 26123...6...Antiguas »

#Ranascreativas // Últimas imágenes enviadas