Blog

Creación Web Optimización de Procesos. I Parte.

El crecimiento de creación web ha sido sostenido y acelerado, la calidad de los trabajos ha mantenido el mismo ritmo y eso es algo muy positivo ya que para el año 2016 asumiremos más responsabilidades, mayor volumen de trabajo y nuestro  objetivo debe ser siempre además de cumplir con los objetivos superar las expectativas de calidad en cada uno de los trabajos que entregamos.

En ese sentido , y refiriéndonos únicamente en esta ocasión a la creación web, partiremos del siguiente proceso para entregar lo que será un primer boceto o etapa y en esta oportunidad utilizaremos el diseño BodyGym con las secciones /*  GENERAL1, NOTICIAS2, CATALOGO4, GALERÍA1, CONTACTO3 */

1.- Creación Web – Estructura Inicial:

Lo primero que haremos es crear una estructura que cuente con las secciones: Home, Quienes Somos, Servicios y/o Productos, Contacto. Si vemos que es un proyecto simple podemos definir el resto de secciones en este paso.

Para la sección de Home es obligatorio el uso de imágenes del Banco de Imágenes.

2.- Adaptar el CSS:

Cuida siempre el responsivo. Debe verse bien en todos los dispositivos, en especial los móviles. Emplea colores planos, los degradados sólo los vamos a usar en el caso de que nos lo pida el cliente y lo mismo para los border-radius, siempre serán cuadrados a menos que nos pidan lo contrario. Utiliza herramientas para encontrar combinaciones de colores como ColoursLovers.

Descarga aquí el CSS base para el diseño BodyGym con la estructura propuesta.

3.- Sube el contenido:

En el home únicamente utilizaremos imágenes del Banco de Imágenes. Vamos a evitar grandes extensiones de texto y haremos lo posible por darle funcionalidad a la página a través de enlaces internos.

4.- Footer:

En el footer lo principal es ubicar los datos de contacto del cliente y debemos dejar un espacio para enlazar las secciones principales de la web.

Descarga aquí la plantilla I de Footer válida para todos los diseños.

RECOMENDACIONES PARA LA CREACIÓN WEB:

Evita la creación de demasiadas secciones, la web debe ser simple y de fácil navegación, pensando siempre en como se verá en todos los dispositivos móviles. Los colores utilizaremos siempre planos y no degradados a menos que nos pidan lo contrario. La altura de las imágenes del slider principal y de la mayoría de las imágenes las debemos controlar con alguna herramienta para asegurar que se vean bien.

Excelente trabajo el que estamos haciendo, creo que con esto vamos a mejorar muchísimo más en todos los sentidos. Seguiremos sacando más CSS por diseño y plantillas de footer y como siempre, si tienes alguna idea o comentario lo recibimos con gusto y estaremos agradecidos.

 

Herramientas interesantes para nuestro día a día

En el punto en el que nos encontramos ya podemos decir que cada uno tiene su propio estilo de trabajo y habrá conocido cuales son sus capacidades y cualidades. En LookingForJob partimos de la filosofía de que vale más la actitud que el talento, ya que con una buena actitud puedes desarrollar cualquier talento que te propongas además que te permite enfocar tus energías y administrar tu tiempo de una manera eficiente, es decir, que tengas que invertir cada vez menos tiempo y energía al mismo tiempo que mejoras tu volumen de trabajo y por consecuencia tus ingresos.

Para lograr esta eficiencia hemos seleccionado unas cuantas herramientas con las que puedes estar seguro optimizarás de gran manera tu trabajo.

1.- PIXLR

Se trata de un editor de fotos online con el cual puedes aplicar efectos, corregir ó mejorar la calidad de la imagen, agregar texto entre otras funcionalidades de manera online lo que resulta muy provechoso para nosotros que podemos trabajar desde donde queramos y además no consumes recursos de tu equipo.

2.- ICONFINDER

Muchas veces los iconos nos resuelven gran cantidad de necesidades gráficas para un web y ICONFINDER podrás encontrar una gran variedad de iconos en diferentes formatos, aunque el ideal para nosotros sería el .PNG que además de ser gratis en su mayoría nos permite utilizarlos sobre cualquier fondo por venir con fondo transparente.

3.-GRAVIT

Podemos considerarlo como una plataforma de Diseño Gráfico Online, quizás un poco más avanzada y completa que PIXLR. Además de tener funcionalidades muy parecidas a las de Photoshop su característica más relevante es que permite realizar trabajos en colaboración además de que es gratis y no necesitas descargar nada, todo el trabajo lo podemos realizar 100% online.

4.- TRELLO

Ya todos lo conocemos, pero lo que si es cierto es que a todos nos hace falta conocer más. Esta aplicación, personalmente, no deja de sorprenderme, me atrevería a decir que todas las semanas descubro nuevas funcionalidades, extensiones y usos pero lo que más me impresiona es la sencillez de su interfaz y lo intuitivo que resulta usarlo. Te recomiendo que le des un vistazo a su blog, tienen temas super interesantes.

5. BUFFER

Más que una herramienta que nos pueda ayudar en nuestro trabajo creo que esto puede ser útil para cualquier proyecto personal que tengan o incluso para su propio uso personal. Lo puedes instalar como una extensión de Chrome e integras de manera gratuita hasta 4 de tus redes sociales y con pocos clicks puedes actualizar todos tus perfiles, programar publicaciones, conocer las estadísticas, entre otras cosas.

Ya por último me gustaría comentar acerca de algunas extensiones de FireFox que suelo usar para el Diseño Web que realmente me facilitan el trabajo, de seguro ya las conocerás pero no está mal repetirlas por si a alguno le es útil:

El Clásico Firebug. Inspector de elementos, consola, css, errores y más. En lo personal sólo uso el tema de HTML, CSS y en algunos casos JAVASCRIPT.

AwasomeScreenShoot Para hacer capturas de pantalla de toda la web ó de partes seleccionadas.

También existen otros muchos como la regla para medir elementos en la página o selectores de colores para obtener el código de color de cualquier elemento en la web.

Espero que sirva de ayuda y si tienes alguna otra herramienta que nos pueda servir te pido que por favor la compartas en los comentarios, te lo sabremos agradecer.

Libertad para administrar tu tiempo

tiempo

 

Definiciones en la web:

Los modernos diccionarios definen el tiempo como la relación que existe entre dos o más fenómenos sucesos, cuerpos u objetos; duración de los fenómenos, época, siglo, etc. Duración de las cosas sujetas a mudanza; aspecto mensurable de la duración, Fuente.

Te proponemos que destines unas horas del día para el trabajo y te plantees un objetivo para este tiempo, ya verás que con una simple organización la productividad se duplicará.

Tener el control de tu tiempo y tu vida reduces los niveles de estrés y aprendes a administrar tu energía para disfrutar más los aspectos familiares, profesionales y personales.

Con la organización y la eficiencia lograrás mejorar la calidad de tus trabajos y disminuir la energía y tiempo que empleas para su desarrollo.

Anímate a compartir en los comentarios: ¿Cómo administras tu tiempo?

Acerca del Diseño Web, El Cliente y El Usuario.

diseno-web

 

You know larry…

Toquemos un poco el tema del diseño web teniendo en cuenta las exigencias del cliente. Lo primero es tener en cuenta que las páginas que estamos creando además de cumplir con lo que pide el cliente deben ser funcionales para los usuarios de la web, en otras palabras, debemos ponernos en los zapatos del cliente y los usuarios.

Empecemos:

1.- Inicio ó Home llamativo y cuidado. Expondremos brevemente de que trata la web y que servicios ó productos ofrece dejando espacios para la construcción de links internos en especial uno para la sección de contacto. Utilicemos únicamente fotos de buena calidad y preferiblemente que sean del banco de imágenes.

2- Sección Quienes somos. En esta sección hablaremos sobre el negocio del cliente, en muchos casos no tendremos contenido suficiente por lo que podemos hacer uso del banco de contenidos en el Customizer y modificar lo que sea necesario. Cuando utilicemos el banco de contenidos por favor notifiquémoslo. Aquí podemos usar fotos del cliente en el caso de que tengamos.

3.- Contacto. El mapa de la ubicación del cliente, la dirección y las formas de contacto (teléfono , mail, redes sociales, etc). Es bueno si utilizamos alguna llamada a la acción, por ejemplo, en el título del formulario poner: Escríbenos aquí o algo por el estilo.

4.- Footer. En el footer siempre colocaremos la dirección y datos de contacto del cliente así como enlace a las redes sociales y de ser posible espacio para un “menú inferior” improvisado, una lista con enlaces a las secciones.

Una vez tenemos eso podemos ver como estructurar los productos y/o servicios que ofrezca. No es bueno crear muchas subsecciones, lo hace poco navegable sobre todo desde dispositivos móviles.

 

contenido-y-css

 

5.- CSS

Hay que tener en cuenta siempre que nuestros cambios no alteren la visualización en todos los dispositivos, cuida el responsivo.

Utiliza colores planos dentro de lo posible que combinen con el logo ó la identidad del cliente y en el caso de usar degradados que sean muy sutiles, existen herramientas como ( colours lovers ) para encontrar ideas de paletas de colores.

Los efectos en el hover de los elementos, como el menú, sólo los vamos  a usar en el caso de que sea un requisito del cliente.

Para modificar un elemento único en la web debemos utilizar el #id_option123234 que veremos en el body, este id identifica la sección única

Si vas a modificar un #mod3, por ejemplo, debes indicar el #id_option seguido de la case del cuerpo (.general1, por ejemplo). Si colocamos el estilo a un #mod estaremos alterando todos los #mod del diseño.

Visita la página de Bootstrap, ahora estamos trabajando con la versión * Bootstrap v2.0.3. aunque no está mal que conozcas la última versión es muy interesante y útil.

 

recomendacion-web

 

Recomendación

Organizar el trabajo de manera que lo primero que hagas sea vaciar el contenido básico (Home, Quienes Somos, Contacto y Footer), estructurar el resto de la web como los servicios ó productos y por último adaptar el css cuidando todas las secciones de la página.

Trata de utilizar y modificar clases globales. Una vez finalices el trabajo de contenido y adaptación básica de css date un paseo por la web y cuida los detalles de todas las secciones y recuerda, cuida el responsivo, que se vea bien en todos los dispositivos.

Hasta aquí hemos creado lo que podemos entender como una página presencial y presentable al cliente, básica pero atractiva y funcional para recibir formularios de contacto. Al entrar en la web nos debe quedar claro en máximo dos segundos de que trata, qué ofrece y saber como contactar, practica ese ejercicio.

Una vez más, gracias por formar parte del equipo, por favor comenta más abajo cualquier duda o aporte que consideres oportuno.
¡seguimos!

Bienvenidos a LookingForJob

Fué en el 2011 ó 2012 cuando nació LookingForJob, la idea original se basaba en la creación de curriculums online para todas las áreas profesionales con el objetivo de poder ampliar las fronteras ó mejor dicho romperlas, que las personas pudieran buscar trabajo y oportunidades en cualquier parte del mundo.

Pasaron los años, la idea evolucionó y creció hasta convertirse en una Red de Trabajo Global; se incorporó un nuevo socio, Jairo Alberto Ramírez, quien impulsó un rápido crecimiento de la organización aportando sus recursos y contactos pero sobre todo su experiencia y capacidad de dirección.

Ahora que ya sabes como empezó todo, queremos darte la Bienvenida y agradecerte por tu aporte, estamos haciendo un gran trabajo. Michael, Jaussman y Rommel se han unido al equipo directivo y los resultados están siendo alucinantes, tenemos que seguir así y ¿por que no?, mejorarlos.

La idea es trabajar, ganar dinero y aprender, en LookingForJob todos somos jefes porque tenemos libertad para administrar nuestro tiempo. Recuerda que aquí vale más la actitud que el talento.

Hemos abierto este espacio para compartir contenido interesante y relevante para nuestros trabajos así  como para aprender y mantenernos al día en cuanto a la tecnología y el mundo web. Si quieres colaborar escribiendo artículos sólo debes pedirnos un usuario y comentarnos el tema que te interesa desarrollar. También puedes involucrarte dejando un comentario o compartiendo el contenido.

Gracias por formar parte del equipo,

¡seguimos!