Browsing all articles in Diseño Web
Aug
24

8 maneras de ser un desarrollador web más productivo

Existen muchas cosas que podemos hacer para convertirnos en desarrolladores web más productivos, algunas muy simples y otras un tanto más complicadas. Pero mientras sea para ahorrar tiempo, hacer las cosas de una mejor manera y producir más dinero, cualquier esfuerzo extra vale la pena.

Web developer

Lo que sigue a continuación son algunas pistas sobre esas cosas que me han servido para ser mucho más eficiente y que espero te ayuden a ti también.

1. Usar Frameworks

Los frameworks pueden ayudarnos a ahorrar tiempo de manera considerable. Con ellos podemos olvidarnos de las tareas más básicas y tediosas, para concentrarnos totalmente en desarrollar las funcionalidades y requerimientos del sitio o aplicación web que estamos desarrollando. Otra gran ventaja es que suelen ser mucho más seguros, lo que además nos permite estar un poco más tranquilos. Los frameworks más conocidos tienen una gran comunidad de desarrolladores a su alrededor, con ellos podemos interactuar, intercambiar opiniones y resolver problemas rápidamente.

Tenemos frameworks disponibles para casi todos los lenguajes: PHP, Ruby, Python, JavaScript, CSS, etc; todos tienen varias herramientas de este tipo disponibles. Incluso también hay frameworks para acelerar el desarrollo de temas para WordPress, así como los hay para desarrollar aplicaciones web móviles. Con una rápida búsqueda en Google, y una buena comparación entre ellos, lograrás encontrar la herramienta perfecta para ti.

2. Probar con nuevas herramientas

Probablemente estás acostumbrado a utilizar el mismo editor de código desde hace mucho tiempo, lo conoces bien y no consideras que sea necesario cambiarlo, pues piensas que ya eres la suficientemente rápido. Pero cada día surgen nuevas y mejores herramientas mucho más cómodas, rápidas y con características que nos ayudaran a generar código de manera más eficiente.

El problema es que muchas veces no contamos con el tiempo necesario para dedicarnos a probar una nueva herramienta. Pero te propongo sacar un par de horas antes de arrancar tu próximo proyecto para investigar sobre alternativas a los programas que usas regularmente, es muy probable que te lleves una sorpresa o simplemente descubras una mejor manera de aprovechar tus herramientas de siempre.

3. Crear una librería de código propia

En ocasiones dedicamos mucho tiempo a un problema muy particular, después de que conseguimos resolverlo nos vamos rápidamente a otra cosa. Cuatro meses más tarde volvemos a encontrarnos con un problema similar, sabemos que ya nos enfrentamos a el y que podemos resolverlo mucho más rápido, pero ¿para que volver a hacer todo el trabajo?.

Guarda esas funciones y fragmentos de código que tanto tiempo te tomó escribir para reutilizarlas posteriormente. Crea un wiki propio, archivalas en Evernote, compártelas en un blog y haz que sean útiles para otros. Usa etiquetas y una descripción para identificarlas y conseguirlas rápidamente cuando la librería se haga más grande.

4. Organizar los recursos disponibles

Utiliza una carpeta en Dropbox, o en tu servicio de almacenamiento favorito, para guardar todo el material que descargas de Internet y así tenerlo disponible en cualquier momento. Me refiero a iconos, imágenes, fuentes, guías, libros, plantillas, etc.

Organiza todos estos recursos en carpetas separadas por categorías y usa nombres descriptivos para encontrarlos más fácilmente. La próxima vez que necesites algo de esto no tendrás que volver a buscar y descargar, ¡ya lo tienes!.

5. Elaborar listas de tareas

Estar organizados es una de las partes más importantes. Crea listas de tareas para cada día de la semana, establece metas realistas y no planifiques para hacer en 2 horas algo que sabes que te tomará 4, no te engañes a ti mismo. Realiza tu mejor esfuerzo por terminar las tareas en el tiempo establecido. Si terminas antes estarás muy satisfecho y podrás elegir entre adelantar algo del día siguiente o simplemente ir a relajarte y distraerte con otra actividad.

Asigna prioridades a las tareas, comienza por las más importantes. Puedes utilizar herramientas geniales como Astrid y Wunderlist, o Teambox para el trabajo colaborativo. Las primeras dos tienen aplicaciones móviles para poder revisar todo fácilmente desde el teléfono o la tableta.

6. Dividir el trabajo en bloques

Una vez que tenemos las tareas definidas podemos dividir las más largas en bloques más pequeños, así podemos medir mejor nuestro rendimiento y evitamos la fatiga.

Concentrarnos en una sola tarea durante un espacio de 20 o 25 minutos nos puede ayudar a crear una disciplina y a trabajar mucho más rápido, pues estaremos corriendo varias carreras contra reloj a lo largo del día.

7. Tomar descansos entre bloques

Tomar 5 minutos de descanso entre un bloque y otro puede beneficiarnos de diferentes maneras. Si estamos atascados en un problema, alejarnos de la computadora por un momento nos ayudara a tomar un segundo aire y regresar con ideas frescas para continuar con el trabajo.

Existen varías técnicas para gestionar el tiempo, una muy popular es la técnica Pomodoro. Reconozco que la probé y me funcionó por unos días, pero luego la abandoné. Particularmente prefiero acabar una tarea completa antes de tomar un descanso, o descansar entre tareas si siento que realmente lo necesito. Quizá contradiga un poco el punto anterior, pero lo importante es encontrar un método que funcione para nosotros, con los descansos necesarios sin caer en la procrastinación.

8. Aprender cosas nuevas

Dedicar algún tiempo para aprender cosas nuevas siempre es importante. Busca una API que te interese y comienza a estudiarla para descubrir que cosas interesantes puedes hacer con ella.

Dedica una hora a seguir un tutorial para aprender alguna técnica que no sabías que podía hacerse con CSS3. Revisa el trabajo de tus desarrolladores favoritos y aprende como lo hacen. En realidad es muy simple y sobre todo beneficioso.

Cómo puedes ver, son cosas muy fáciles que puedes poner en practica para crear una sana rutina de trabajo, no importa si trabajas desde casa, en una oficina, o si eres de los que lleva su espacio de trabajo a todos lados. Siempre es posible ser mucho más productivo, y ser productivo se traduce en mayores ganancias y en más tiempo para realizar otras actividades que nos gustan.

Fuente: Bitelia.com

Apr
9

CodeGuard: copias de seguridad para tu sitio web

Aunque hoy gran parte de los servicios de alojamiento web ofrece la posibilidad de realizar copias de seguridad, aún cuando se trate de las compañías más económicas, siempre es conveniente tener alguna protección adicional para la información que seguramente nos demandó mucho tiempo de trabajo. Si bien existen varias propuestas en el mercado, me llamó la atención CodeGuard, que realiza varios tipos de respaldos de forma gratuita.

Se trata de un servicio pensado para sitios de todo tipo, ya que se conecta por medio de nuestra cuenta de FTP para respaldar los archivos, monitorizar diariamente los cambios y efectuar las copias correspondientes de todos los ficheros que fueron modificados. Si lo deseamos, podemos activar alertas para estos eventos, detectando rápidamente alguna modificación no autorizada, como la que podría hacer alguna infección de malware.

Pero esto no es lo más interesante porque, como muchos sitios se basan actualmente en contenidos dinámicos (por ejemplo: blogs), también es posible realizar el backup de las bases de datos MySQL. Incluso, aprovechando que WordPress es uno de los gestores de contenidos más populares, están probando un plugin que simplifica la configuración para quienes utilizan dicho CMS.

Las cuentas gratuitas ofrecen un máximo de 2Gb de almacenamiento, que será más que suficiente para los que posean una bitácora personal. Es destacable la navegación por el historial en modo time machine, con una captura de pantalla del momento en que se hizo la copia de seguridad, pero igualmente creo que debería haber una interfaz más intuitiva y un procedimiento más simple de restauración, que hoy consiste en descargar un archivo.

Fuente: Bitelia

 

Feb
29

Super pack de templates en PSD

Si estaban buscando un paquete de templates para contemplar y utilizar una gran cantidad de opciones, los amigos de WordPress Theme Shock nos invitan a descargar su Free Bundle 2, que incluye 99 plantillas diseñadas para ser utilizadas sobre sitios estilo blog.

Obviamente la utilización y codificación de los mismos quedan a criterio del diseñador, pero quiero destacar que contienen elementos de calidad y detalle que bien pueden colocarse en otras creaciones propias.

Vista previa de Free Bundle 2

Descargar Free Bundle 2 | WordPress Theme Shock

El paquete es impecable y aún se encuentra disponible para descargar de forma gratuita, es una verdadera joya si hablamos de recursos y creo que no hay otro igual. Todas las plantillas han sido elaboradas por los miembros de WordPress Theme Shock, quienes realizan un gran trabajo para servir a la comunidad de diseñadores.

Fuente: kabytes

Feb
27

40+ Impresionantes Website Footers para tu inspiracion

Designing a creative and appealing footer is crucial if you want to make each element of your web design as successful and efficient as possible. Although the footer of a web design appears at the end of the page yet it cannot be neglected. With an effective footer design, you can create a long-lasting impression on your visitors. Through a well designed footer, you can certainly grab the visitors’ attention.

We have previously posted many collections about Website Footers Designs as well but at the moment, we are presenting the most innovative and amazing examples of websites showing impressive footers. These footer designs prove that you can effectively utilize a website footer to provide that extra bit of improvement in the user’s experience. We hope you will like this collection. Do let us know your opinion about this compilation.

 

40+ Impressive Website Footers for Your Inspiration

1. Rubbik

This is one of the best footer designs you would ever see as it contains the required information as well as it provides a comprehensive list of links that help you keep your visitors on your site.

Rubbik

2. 43 folders

This footer design takes the creativity to the next level by simply combining different fundamental aspects of Web design:

43 folders

3. BimbiSicuramente

A simple and uncluttered footer design that showcases a beautiful and visually appealing graphics.

BimbiSicuramente

4. Yuru Inspires

This creatively designed artistic footer design not only fulfills the visual requirements of a web design but also makes navigating the website easier.

Yuru Inspires

5. Mecannical

This one is simply outstanding, an original and creative footer design that will surely impress your target audience.

Mecannical

Post completo http://www.1stwebdesigner.com/inspiration/footer-designs-showcase/

Feb
17

Interesantes Sitios Web

 

DESIGN / CSS

Aylis – aylis.com

We are experts at helping small to medium businesses grow online. We achieve this by providing great branding and quality software.

Aylis

AIGA 50 DC – 50.aigadc.org

We’re proud to announce the 12th biennial AIGA 50, a juried exhibition that showcases 50 of the strongest examples of design produced in our region during the past two years.

AIGA 50 DC

APP / WEB APP / SERVICE

Masterkey – partixel.com/masterkey

Simply a password generator, just done right. Secure passwords with just a tap.

Masterkey

Colllor – colllor.com

Colllor – Turn one color into many alternative ones.

Colllor

COMMUNITY / PORTAL / STORE

Georg Jensengeorgjensen.com/dk

Georg Jensen is the unique craftsmanship, timeless aesthetic design and lifestyle products, from body for watches, jewelery and household goods. (Via Google Translate)

Georg Jensen

Pttrns – pttrns.com

iOS UI Patterns.

Pttrns

STUDIO / PORTFOLIO / BLOG

Sacha Greif – sachagreif.com

Hi! I’m Sacha Greif, a designer, coder, and entrepreneur living in Paris.

Sacha Greif

Kult House – kulthouse.com

Kult House is the collective works of Josh Rhode, a director/designer of brand experiences on emerging platforms.

Kult House

THEMES

Memo – themeforest.net/

Memo is a super-awesome tumblog style WordPress theme with a clean, minimal design. If you’re looking to get started with microblogging then Memo will be right up your street.

Memo

Fuente: abduzeedo.com

Feb
13

Lorempixel, generador de imágenes de prueba para tus proyectos

En publicidad, diseño gráfico y web, es imprescindible contar con generadores de contenido de prueba para rellenar las diferentes secciones del proyecto y tener una visión anticipada de lo que será el resultado final.

Una herramienta muy utilizada, es el generador de textos de prueba Lorem ipsum, compuesto por extractos de una obra del político, filósofo y escritor, Marco Tulio Ciceron, en lengua latina y de los cuales fueron removidas algunas sílabas. Aunque el texto carece de sentido, es de gran importancia para la maquetación por su aspecto tipográfico.

Ahora bien, para complementar el texto, es necesario acompañarlo con imágenes, y por lo general el proceso de buscar esas imágenes es tedioso y nos quita mucho tiempo. Para ayudarnos con esto, contamos con una excelente herramienta llamada, Lorempixel.

Lorempixel es un generador de imágenes de prueba que dispone de varias opciones para hacernos el trabajo mucho más fácil y sobre todo ahorrar tiempo, tanto si diseñamos para la web como si lo hacemos para impresos. Con esta herramienta podemos seleccionar imágenes a color o en escala de grises, aleatorias o de una categoría especifica y obviamente el tamaño en que las necesitamos.

Si diseñamos para la web, basta con utilizar la url que provee Lorempixel, en el atributo srcde la imagen, de esta manera: src="http://lorempixel.com/400/200", donde 400 y 200 corresponden al ancho y alto de la imagen en pixels, respectivamente. Pero esto no es todo, también disponemos de las siguientes opciones:

  • Obtener imágenes de una categoría, por ejemplo, animales:http://lorempixel.com/400/200/animals
  • Obtener una imagen aleatoria en escala de grises:http://lorempixel.com/g/400/200
  • Obtener la segunda imagen de una galería de 10 en la categoría deportes:http://lorempixel.com/400/200/sports/2
  • Obtener una imagen de la categoría deportes que contenga un texto de prueba:http://lorempixel.com/400/200/sports/Texto-de-prueba

Si diseñamos para impresos, podemos ir directamente a Lorempixel y utilizar los prácticos controles que ofrece el sitio para generar las imágenes. Solo tendremos que seleccionar el tamaño de la imagen, la categoría y hacer clic en los botones “color image” o “gray image”, según sea el caso.

Sin duda alguna, una excelente herramienta que merece la pena guardar en nuestros favoritos y que nos ahorrará mucho tiempo a la hora de buscar imágenes para nuestro próximos proyectos.

Fuente: bitelia

Feb
9

Beautiful Web Type, selección de algunas de las mejores tipografías de Google Web Fonts


Desde hace pocos años hasta en la actualidad, se han llevado avances significativos a la hora de diseñar la apariencia de cualquier sitio web gracias a las nuevas herramientas que han ido apareciendo, siendo una de ellas la tipografía. Y es que los diseñadores web podrán utilizar otras fuentes de letras distintas sin temor a no ser representadas en las pantallas de ordenador si los sistemas operativos no la tienen instalada.

Precisamente Google Web Fonts es uno de los pocos proveedores de tipografías para sitios web, contando en su directorio con un total de 436 familias tipográficas en estos momentos, donde se puede encontrar tipografías elegantes y tipografías que ni en las peores pesadillas se ocurrirían utilizarlas.

Precisamente Beautiful Web Type es un muestrario de algunas de las mejores tipografías que ofrece Google Web Fonts, un proyecto de Chad Mazzola en el que ha seleccionado una serie de tipografías para que los usuarios podemos verlas “en acción”. De momento representa a ocho tipografías que nos permite tener acceso a las mismas en el directorio de Google Web Fonts, y que poco a poco irá añadiendo nuevas tipografías para tener el muestrario más amplio donde escoger sin necesidad de visitar una a una las más de 400 tipografías del directorio de Google Web Fonts para decidir cual queda mejor para cualquier proyecto.

Enlace: Beautiful Web Type | Vía: TNW

Feb
9

Banners vectorizados para San Valentín

Los banners suelen cubrir espacios que por lo general se encuentran destinados a la publicidad. Es usual analizar su posición en los diseños para lograr la mayor visibilidad y por lo tanto atraer la vista del cliente potencial.

En el caso de estas fechas que se festejan en todo el mundo, suelen realizarse descuentos y promociones que son acompañadas por el tema en cuestión y es necesario incluir diseños acordes que se destaquen y cumplan su función.

Vista previa de banners con motivos de San Valentín

Descargar Valentine Heart Banners | Gfxtra

Es por eso que considero que estos banners llaman la atención desde el primer momento, más que nada por el uso de las capas de fuentes tipográficas que en principio pueden visualizarse como texturas, pero una vez que se observan con detenimiento se cae en la cuenta que se trata de palabras en diferentes fuentes.

Una buena ubicación para mensajes y en el caso que no estén buscando herramientas de trabajo, sino simplemente regalar una tarjeta a aquellos amigos especiales (recuerden que San Valentín es una fiesta del cariño, no solo se destina a las parejas sino también a los amigos y a la familia), también puede ayudarlos a armar algo digno de regalar.

Fuente: Kabytes

Feb
9

Papeles texturados en tonos rojizos para San Valentín

San Valentín tiene muchos adeptos en todo el mundo y también muchos detractores. Soy de las que los deja pasar sin pena ni gloria, pero no siempre podremos escaparnos si trabajamos en diseño gráfico para empresas que desean hacerse eco de estas fiestas. Es por esto que los recursos de San Valentín suelen resultar útiles para sacarnos de apuro y cumplir con los tiempos de entrega que no siempre son los ideales.

Obviamente lo que hacen al producto terminado es la diversidad de herramientas que sabemos combinar, por lo que no podemos centrarnos en un solo tipo de recurso.

Vista previa de las texturas en formato .jpg

Descargar Old Style Romantic Papers | FarFarHill

Es por eso que decidí recopilar una nueva serie de recursos gráficos de San Valentín para anexar a los que ya hemos enviado en años anteriores, en esta oportunidad lo haré en post individuales ya que así resultan más fáciles de recolectar. Estas texturas comprenden algunas opciones diferentes para combinar entre si o utilizar por separado. Todas tienen un toque vintage y dado su gran tamaño, se pueden agregar en cualquier tipo de diseño ya sea para web o trabajo de impresión.

Fuente: kabytes

Feb
9

UI completa en 3D gratuita

Cuando creamos una nueva interface los elementos UI se vuelven primordiales y ayudan a facilitar las tareas sin contar el punto necesario en muchos casos de ahorrar tiempo. Por suerte para todos en Internet hoy en día muchos diseñadores ofrecen en forma gratuita sus creaciones, logrando que quienes estén necesitando saltarse algo de tiempo puedan acceder a ellos y obtener una base fuerte para el proyecto.

En SpeckyBoy me entero de un set realmente atractivo creado por la gente de Land-of-Web, con un completo kit UI en 3D en gris y detalles a puro color.

UI completa en 3D

El mismo incluye menú desplegable, sliders, barras de progreso, botones de variados formatos, pestañas, íconos, tool-tips, barras de búsqueda, botones de selección y controles multimedia, entre otras imágenes necesarias dependiendo de la temática de la interface que estemos creando.

UI completa en 3D

Se trata de un recursos completamente libre para usos tanto comerciales como personales sin ningún tipo de restricción, mas allá de que el enlace recíproco sea obviamente bienvenido. Dentro del .ZIP contenedor, encontraremos todos los elementos que contaba en formato .PSD, el mejor en estos casos sin dudas para poder modificar y editarlos sin problemas, adaptándolos al resto del trabajo que estamos diseñando.

Colorful 3D UI Kit – Descargar

Via: kabytes

Últimos posts

Categorías

Videos

Servicios Web para Pymes Perú

Email: info@innovatecmedia.com
Telf: 661-8752
www.innovatecmedia.com

REDES SOCIALES

Facebook: Innovatecmedia.com
Web: www.innovatecmedia.com

Tags

Seo Packages