Desarrollando un portafolio personal alucinante en 3 semanas

Así que decidiste que vas a diseñar y desarrollarte un portafolio personal. ¡Eso es genial! Usted está muy por delante de la mitad de la comunidad de diseño y desarrollo web. Pero ¿qué pasa con el 50% restante? Tienes que mostrar habilidades exclusivas en un espacio pequeño para brillar en esta industria de rápido crecimiento.

En las últimas 3 semanas, desde que tomé esa decisión, aprendí mucho sobre el desarrollo de una cartera única. Ahora siento que es hora de compartir este conocimiento recién adquirido con usted.

Lo que se me ocurrió después de esas 3 semanas es una excelente cartera inspirada en el juego.

Semana # 1: busca más allá de lo que ves

Al menos una vez cada seis meses, nace una nueva tendencia web. Es muy difícil seguir todas estas tendencias, sin importar cuántos blogs y desarrolladores sigas en tus redes sociales. ¿Sitios web de una página, paralaje, controles deslizantes, diseño minimalista, etc.? La lista de tendencias web es interminable y podríamos seguir contándolas todo el día.

Entonces, lo primero que vas a hacer es un breve proyecto de investigación sobre qué es? ¿En qué? En cuanto a diseño web y tendencias de desarrollo web. Una cosa buena acerca de este tipo de investigación es que está obteniendo ideas y tal vez un primer borrador de cómo debería ser su cartera. El problema es que puede hacer que selle su mente a la creatividad e ideas innovadoras propias.

Una cosa importante que no debe olvidar en esta semana es escribir todo su material de marketing. Creo que esta es una de las partes más difíciles con las que lidiarás. No es fácil escribir las cosas que básicamente podrían determinar si un cliente se comunicará con usted o no. Escríbalo en un papel y hágase la siguiente pregunta: "Si yo fuera un cliente potencial, ¿qué me haría contactarme?"

No olvides que este portafolio te presentará al mundo. Tienes que aportar ideas originales, ideas innovadoras y un concepto de cartera que hará volar a la gente.

Lo que se me ocurrió después de la primera semana fue una decisión: "No importa lo difícil que sea, me voy a desarrollar un juego web basado en la programación frontal". ¿Tres semanas fue el tiempo que me di para hacerlo?

Semana # 2: Codificación como si no hubiera mañana

Después de tener una idea básica, y no un momento antes, es hora de comenzar a pensar en la etapa de desarrollo.

Decidí que mi cartera funcionaría como un juego basado en la web, por lo que comencé a buscar marcos de JavaScript que podrían ayudarme a ahorrar tiempo y trabajo. Lo que pasa con los marcos es que, por lo general, serán buenos para Head Start, pero a largo plazo no se ajustarán a sus necesidades.

Un buen ejemplo de mi cartera son las cajas de luz que proporcionan información sobre mí y se activan cuando un usuario ingresa a una casa. Ese tipo de funcionalidad no existe en un motor de juego JS regular.

Ahora, siempre hay una opción para tomar un marco existente y mejorarlo agregando su propio código, pero tenga en cuenta que, a veces, pasar al código de otra persona llevará más tiempo que escribir el suyo. Además, si reescribe el código de otra persona, eso podría ser un problema en las nuevas versiones.

Después de pasar por encima de unos pocos marcos del motor de juego, sentí que no tengo más remedio que construir mi propio motor de juego que se ajuste a mis necesidades.

Vamos a ver rápidamente los principales métodos que ejecuto en el juego.

Para manejar los eventos del teclado de flechas utilicé el siguiente código:

Como puedes ver, el código es muy simple. En caso de que el usuario presione el botón? Arriba? o? abajo? flechas que llamo el? moverY? Función, y en caso de? verdad? o? Izquierda? Llamo? Moverx? función.

Un vistazo rápido a uno de ellos revelará dónde sucederá toda la magia:

Para cada paso de usuario verifico con un método especial llamado? CanImove? (¿Puedo moverme?) Si el personaje puede moverse sobre el lienzo del juego. Este método incluye límites de pantalla, posiciones de casas, límites de carreteras, etc. Si puede, devuelvo Verdadero y el personaje sigue moviéndose, de lo contrario, devuelvo Falso y el personaje permanece en su posición actual.

Ahora, debido a que todavía estamos hablando de la web, tuve pensamientos de que moverme con las flechas del teclado no es suficiente. Siempre tiene que pensar en el usuario final: su cliente potencial que tal vez no tenga tiempo para "pasar el rato en su mundo". Es por esto que agregué una barra de navegación y una opción para? Teleportar? el personaje directamente a un punto específico en el juego.

El? Telepuerto? El método se ve así:

Me sale el? X? y? y? parámetros del evento clic del mouse con? event.pageX? y? evento.páginaY ?, después de tener ambos, cambio el CSS del jugador, ¿se fue? y? top? propiedades y usar el jQuery? animate? Método para animar la opacidad del jugador, para que pueda crear el? Fade? efecto.

Un buen consejo que puedo decirles que desafortunadamente aprendí de la manera más difícil es mantener su código lo más dinámico posible. Escriba el código de tal manera que si desea agregar más contenido a su cartera en el futuro, su código lo respalde.

Semana # 3: La retroalimentación es tu nuevo mejor amigo

La última semana de desarrollo de mi cartera fue muy difícil. Tuve que cerrar los toques finales de diseño y codificar cosas mientras luchaba para no publicarlos ya. Era como mantener en secreto que no estás seguro de que sea completamente cierto.

Encontré una solución a esta contradicción molesta. Tome a diez personas que conozca y en las que confíe, muéstreles su trabajo y pídales comentarios. Preferiblemente, esas diez personas deben ser completamente diferentes entre sí. Aquí están las diez personas que elegí para esta misión secreta:

  • Mi mamá
  • Mi jefe
  • Mi mejor amigo
  • Mi sobrino de 6 años
  • Un diseñador web senior
  • Un desarrollador senior de front-end
  • Un cliente potencial
  • Un cliente con el que trabajé
  • Un ingeniero de control de calidad
  • Otro desarrollador web super-multi-ninja (por si acaso)

Pídales que te den su opinión sobre cualquier cosa. A partir de tu madre, eso te dice: ¡¿No está funcionando en mi computadora ?! (Bueno, ¿estás usando IE5.5?) Lo que te recuerda que debes escribir algunas alternativas de IE a tu sobrino de 6 años que, sorprendentemente, puede darte una prueba de usabilidad gratuita, y finalmente a tu jefe y al? desarrollador web ninja? quien le brindará una minuciosa revisión del código que puede ayudarlo a mejorar su código y hacerlo aún más eficiente.

No tienes idea de cuántos buenos cambios te pueden dar los comentarios. Quedarse con eso.

Conclusión

Aunque desarrollar un portafolio personal definitivamente no es una tarea fácil, vale cada centavo. Aprendí mucho de este proceso y obtuve una gran respuesta.

Tómese el tiempo y piense en su propia y? Alucinante? idea para su cartera, no dude en consultar con otras personas sobre diseño, interfaces de usuario y problemas de mercadeo, y ¿siempre recuerda lo más importante? ¡que te diviertas!