Pues me gustaria realizar el daw pero por tema laboral tiene que ser a distancia. La cosa que despues de mirar bastante solo me he quedado con dos escuelas serian : FOC o MEDAC.

Me tiraria mas por medac porque el precio es mas accesible , pero tampoco quiero arrepentirme porque veo alguna mala valoracion , os lo agradezco si me podeis ayudar o si coincido con alguien que ha pasado por algun sitio de los que nombro.

Documentación

• Chrome
• Firefox
• Microsoft Edge
• Opera

Centro de desarrolladores

• Chrome
• Firefox
• Microsoft Edge
• Opera

Tiempo de revisión

• Chrome: 5 días
• Firefox: 1 día
• Microsoft Edge: 3 días
• Opera: (por determinar)

Cargar extensión en local para testear

• Chrome: Entra en el menú de 3 puntos - Más herramientas - Extensiones - Cargar descomprimida.
• Firefox: Ejecuta esto en la barra de direcciones "about:debugging", luego entra en Este Firefox - Cargar complemento temporal, para que el zip funcione tienes que seleccionar los ficheros de la extensión y comprimir, no comprimir la carpeta que los contiene o no funcionará.
• Microsoft Edge: Ejecuta esto en la barra de direcciones "about:flags", activa la opción "Habilitar características de desarrollador de extensiones", entra el menú de 3 puntos - Extensiones, Abajo del todo te aparecerá un botón "Cargar extensión".
• Opera: Pulsa la tecla Alt para ver el menú de la aplicación, entra en Extensiones - Extensiones - Cargar descomprimida.

manifest.json

Chrome y Firefox pueden compartir el mismo fichero manifest.json de la extensión, pero para otros navegadores hay que indicar unos campos adicionales. Opera

• Tienes que indicar: "default_locale": "es" (esto es para que en la descripción de la tienda te salga el idioma español, si no lo indicas por defecto será en inglés)
• Tienes que indicar en permissions: "activeTab"

Microsoft Edge

• Dentro de background tienes que indicar: "persistent": false
• Dentro de browser_action tienes que indicar: "default_icon": {"20": "icon20.png", "40": "icon40.png"}

Carpetas

Chrome

• Si defines default_locale en manifest.json tienes que crear un fichero en la raíz de la extensión: _locales/es/messages.json

Imagenes de la tienda

Opera

• El icono tiene que tener un tamaño de 64 x 64 píxeles
• La captura de pantalla tiene que tener un tamaño de 640 x 400 píxeles

Chrome

• El icono tiene que tener un tamaño de 128 x 128 píxeles (lo recoge automáticamente del manifest.json)
• La captura de pantalla tiene que tener un tamaño de 640 x 400 o 1280 x 800 píxeles

Microsoft Edge

• El icono tiene que tener un tamaño de 128 x 128 píxeles
• La captura de pantalla tiene que tener un tamaño de 640 x 400 o 1280 x 800 píxeles

Firefox

• El icono tiene que tener un tamaño de 128 x 128 píxeles
• La captura de pantalla tiene que tener un tamaño de 640 x 400, hasta un máximo de 2400 x 1800 píxeles

browserAction

var obj_browser = ( navigator.userAgent.search(‘Edge’) > -1 ) ? browser : chrome;
var url_open = ‘https://dominio.com’;

obj_browser.browserAction.onClicked.addListener(function() {
obj_browser.tabs.create({‘url’: url_open});
});

Cosas que recomiendo tener a la hora de subir tu extensión en las distintas tiendas

• Título de la extensión
• Descripción de la extensión
• Iconos en distintos tamaños que he comentado arriba
• Captura de pantalla
• Explicación paso a paso de como funciona la extensión en inglés
• URL a tu web
• URL a la página de Política de Privacidad de la web de tu extensión
• URL a un vídeo a youtube (si lo tienes)

Política de privacidad

Si no tienes ninguna página puedes usar este generador de política de privacidad o con la misma instalación de WordPress en español te crea automáticamente una en borrador.

• Chrome: Es un poco raro la política de privacidad se tiene que indicar a nivel de cuenta no dentro de la extensión en el panel de control de Chrome Web Store - Cuenta - Política de privacidad.
• Firefox: Edita tu extensión en el centro de desarrolladores - Administrar autores y licencia - Política de privacidad.
• Microsoft Edge: Edita tu extensión en el Centro de partners de Microsoft - Propiedades - URL de la directiva de privacidad.
• Opera: Edita tu extensión en el panel de Opera Addons - Versions - Selecciona la versión - Privacy policy URL.

¿Y como crear extensiones para el navegador Safari de Apple?

Aquí ya no he entrado ya que por lo que he visto hace falta una licencia activa y usar xcode por lo que te obliga a tener un mac.

Lo que más me gusta de programar es que aparte de poder ganar dinero trabajando para terceros, es que puedo aprovechar toda esa experiencia para desarrollar mis propias ideas.

Quizás no sea el mejor programador del mundo, no he estudiado una carrera universitaria, no he trabajado fuera de España, tampoco he trabajado en una startup unicornio valorada en millones de dolares y eso me ha limitado mi carrera profesional.

Por otro lado si he tenido experiencia de moverme de un pequeño pueblo a una gran ciudad como Madrid para trabajar en varias startups que algunas de estas han sido vendidas: nvivo (wegow), sindelantal (just eat), socialpubli, socialreacher, prensarank… y también he trabajado para varias agencias de marketing con clientes internacionales.

Cuando tenía menos de 20 años veía como una utopía trabajar para una startup en San Francisco, pero a día de hoy pienso que aunque paguen muy bien allí fuera, creo que en algunos aspectos como la sanidad, la calidad de vida y el clima en España no tiene nada que envidiar a otros países.

Aunque a día de hoy sigo trabajando para terceros, mi ilusión sería un día poder vivir de mis propios proyectos aunque todavía no he dado con la tecla (nunca mejor dicho), pero no me rindo y quien me siga en twitter sabe que siempre ando creando cosas.

Y ahora si, aquí van algunos consejos

0. La mejor forma de aprender a programar es desarrollando tus propios proyectos, nada te va a motivar más que hacer algo que te gusta, aunque no haya un objetivo económico.

1. Si estás empezando, no te precoupes si no te salen las cosas a la primera, a la segunda o a la tercera, sigue intentandolo, al final esto es prueba y error hasta dar con la solución.

2. Hay una frase que me contó un profesor de informática que recordaré toda la vida «divide y vencerás», si te atascas en un problema que te impide avanzar, intenta dividirlo en pequeños problemas.

3. Asume que es imposible aprender todos los frameworks y lenguajes que salen cada día, si intentas hacer de todo no serás experto en nada, muchas cosas que aprendas si no las pones en practica en tu día a día, tarde o temprano se te van a olvidar o van a quedar obsoletas.

4. Intenta escribir variables, funciones, clases y métodos de forma que se pueda entender y no tendrás necesidad de comentar todo el código.

5. Intenta escribir código que puedas aprovechar para futuros proyectos, por ejemplo una clase que solucione uno o varios problemas determinados, te va a ahorrar mucho tiempo y esfuerzo.

6. No tengas miedo a la incertidumbre, aunque lleves mucho tiempo en el mundillo siempre te van a pedir cosas que no has tocado en la vida y tendrás que aprender sobre la marcha.

7. Es posible que te quedes atascado en algo durante muchas horas, en ese caso lo mejor es que despejes tu mente y retomes el problema más tarde, seguro que al día siguiente lo resuelves en 5 minutos.

8. Si trabajas para una empresa intenta aprender de los compañeros que más saben.

9. Si llevas mucho tiempo en una empresa y eres el que más sabe, si ves que no progresas y no eres feliz quizás deberías considerar cambiar de empresa.

10. Hay muchas formas de solucionar un problema, una será rápida pero chapucera, otra eficiente pero más costosa de implementar, a todos nos gustaría tomarnos un tiempo para escribir el código perfecto, pero hay fechas de entrega y los recursos son limitados.

11. Intenta ponerte en el lado del negocio, se te pueden ocurrir muchas ideas para mejorar un producto ¿Pero cuales de estas van a tener realmente un impacto económico positivo en la empresa?

12. Intenta hablar con tus superiores para conocer su visión a largo plazo, si programas con sprints a corto plazo seguramente más adelante tengas que reescribir muchas cosas porqué no tenías claro cual era el objetivo final.

13. Vuélvete imprescindible en la empresa donde trabajas, de esta forma aparte de tener el puesto asegurado, tendrás más posibilidades de pedir un aumento de sueldo con éxito.

14. Si tienes que programar algo que sea multiplataforma considera hacer una API desde el principio, te va a quitar muchos quebraderos de cabeza.

15. Intenta dejar documentación escrita a modo de wiki por si alguien retoma tu trabajo, muchas veces he tenido que retomar el código de una persona que ya no se encuentra en la empresa y no me ha quedado otra que investigar para saber como funciona todo.

16. Ten empatía con otros programadores, quizás el código no sea el mejor, pero nunca sabrás en que situación se encontraba esta persona. ¿Cuanto tiempo tuvo? ¿Tenía mucha presión? ¿Le pagaban bien?

17. Si has empezado un nuevo proyecto personal, no te obsesiones en que sea todo perfecto, super escalable, que tenga miles de funcionalidades, intenta salir con el mínimo para que ese producto se consiga vender.

18. A lo mejor me gano algún hater por esto, pero al cliente le importa un pito que lo que hagas sea «clean code», si te paga es porqué considera que va a ganar más dinero con tu solución.

19. En cada problema que te encuentres busca en stackoverflow, seguro que no eres el primero que se encuentra con eso y esté disponible una solución.

20. Por mucho tiempo que lleves programando siempre vas a aprender algo nuevo, incluso de los que apenas llevan unos pocos meses aprendiendo, te recomiendo seguir en twitter el hashtag #100DaysOfCode.

21. Si decides dar el paso a ser freelance, no seas tan optimista con las fechas de entrega, seguramente tardes más horas, intenta trackear tu tiempo con herramientas como puede ser toggl.

22. Aprende GIT, es la única forma de trabajar en equipo sin miedo a machacar el trabajo de los demás.

23. Programar no lo es todo, deberías aprender marketing para saber negociar, aprender a delegar por si el equipo crece, aprender a comunicarte mejor para evitar malentendidos.

24. Si te piden programar algo y no lo tienes del todo claro, antes de ponerte a programar a lo loco mira de aclarar todas tus dudas para evitar malentenidos y perder tiempo en programar cosas que no hacían falta.

25. Si buscas trabajo como programador y no tienes experiencia, crea proyectos por tu cuenta para demostrar que tienes aptitudes, conocimientos y que eres capaz de materializar ideas en algo funcional sea una web o app.

26. Y el consejo más importante de todos, evita siempre que puedas subir cambios a producción un Viernes por la tarde a no ser que esté todo super testeado.

Si se me ocurren más cosas iré actualizando la lista.

¿Se te ocurre algo más? Te invito a dejar un comentario abajo.

Me llamo Miquel Camps y creo que no soy el mejor programador para dar consejos, mi código no es del todo limpio, pero quizás puedas aprender algo de mi quebradero de cabeza de dos días para hacer crear un Currículum jugable basado en el mundo del juego Age of Empires.

Aquí puedes visitar mi CV: https://vivirenremoto.github.io/ageofcv/

El código fuente está subido en Github: https://github.com/vivirenremoto/ageofcv/

Información

El mapa se genera dinámicamente., eso significa que en c ada visita puede cambiar el entorno, el clima, la posición de los árboles, los edificios, la música, etc.

Los controles

Puedes mover el aldeano por el mapa usando el cursor como el juego original y si quieres también con el teclado.

Si mueves el aldeano por encima de un edificio podrás conocer más detalles sobre mi.

La idea original

Tengo que admitir que mi idea inicial no era hacer un CV, yo quería replicar la interfaz del juego Age of Empires por diversión.

¿Qué he usado?

• Gráficos y sonidos de vídeos de youtube
• HTML
• CSS
• jQuery para escribir menos código javascript
• Google fonts
• Librería Javascript para hacer el efecto de nieve hecho por Trent Willis

Las fases de desarrollo

1. Empezar con lo básico
2. Pequeños detalles
3. Responsive design
4. Pulir el código
5. Conseguir algo de feedback y mejorarlo

Empezar con lo básico

Lo primero que hice fue poner en el mapa un aldeano, un simple DIV dentro de la etiqueta BODY, una imagen plana sin ningún tipo de animación.

Luego añadí un DIV por encima de todas los elementos DIV para que cuando hiciera clic sobre este pudiera saber la posición X y X y así mover el aldeano por la pantalla.

Después añadí un árbol, una casa, la universidad y así cada edificío.

Finalmente puse un modal informativa que aparece cuando el aldeano se sitúa encima de un edificío.

El mejor consejo que puedo dar es que vayas paso a paso, prueba y error, haces un cambio y recargas, no te desanimes si no sale lo que quieres a la primera.

Pequeños detalles

Una vez la interacción básica estaba hecha, el primer detalle que añadí fue la águila que aparece volando y que puede aparecer de una esquina de la pantalla.

Luego añadí que el entorno fuera aleatorio, el tiempo, sonidos... para dar vida y personalidad a la web plana.

¿Te has dado cuenta que cuando mueves un aldeano hay dos tipos de sonidos?

Responsive design

Esta web CV ha sido creada para funcionar en escritorio y en dispositivos móviles en vertical.

La diferencia principal entre una versión y la otra es la posición de los edificios que contaré como lo hice más tarde en este artículo, también cambia el tamaño de los edificios, el número de elementos como arboles y los copos de nieve que son menores y en menor cantidad en la versión móvil.

Pulir el código

Sé que el código no es perfecto y se puede mejorar, pero básicamente eliminé el código duplicado.

1- Antes para la interacción de cada edificio tenía una condición "IF", luego lo cambié a un bucle "WHILE" y un sólo "IF", creo que así es más simple y fácil de mantener.

2- Al principio los árboles que se mostraban se cargaban de forma individual duplicando código, esto lo cambié por un bucle "FOR", así era más sencillo mostrar 10 o 20 árboles modificando solo una variable.

¿Qué ha sido lo más díficil para mi?

Al principio los edificios podían aparecer en cualquier parte de la pantalla, a veces un edificio podía quedar solapado por encima de otro y eso era un desastre.

Así que pensé en hacer una cuadrícula virtual con una matriz (array), así que en escritorio la cuadrícula está dividida en dos columnas y dos filas, en cambio en dispositivos móviles en la cuadrícula solo hay una columna y cuatro filas en ambos casos cada casilla de la cuadrícula proporcional al tamaño de la pantalla.

Cada edificío aparece de forma aleatoria en cada casilla de esta cuadrícula virtual.

¿Qué otros problemas me he encontrado?

Esto es inevitable, tu no puedes probar tu web en cada dispositivo que existe en el mundo, como usuario de Android yo no tengo un iPhone, una persona con un dispositivo iOS me comentó que en el navegador Safari las imágenes no le cargaban, la solución fue reemplazar las imágenes con formato WEB y reemplazarlas por imágenes en formato GIF y PNG.

Mensaje final

Espero que te haya gustado, que consigas algo de inspiración y sería genial si lo puedes compartir con tus familiares y amigos que hayan jugado alguna vez a Age of Empìres para recordarles estos buenos momentos que nos ha hecho pasar el videojuego.

Copyright

Todo el contenido de esta página Web, incluyendo artículos, ilustraciones, capturas de pantalla, gráficos, logotipos, descargas digitales y otros archivos, es propiedad de Microsoft, a menos que sea propiedad de un tercero, y está protegido por las leyes alemanas e internacionales de derechos de autor, marcas registradas y otras leyes de propiedad intelectual. Las marcas y los derechos de autor de los juegos y personajes de terceros son propiedad de las empresas que comercializan o conceden licencias de esos productos.

Me llamo Miquel Camps, soy programador web freeelance de España, me puedes encontrar en twitter y en linkedin.

Aquí puedes visitar mi CV: https://vivirenremoto.github.io/mariocv/

El código fuente está subido en Github: https://github.com/vivirenremoto/mariocv/

Controles básicos

Puedes mover a Mario a la izquierda o derecha usando las flechas del teclado, o con los botones de dirección si usas un móvil.

¿Qué tecnologías he usado?

• Gráficos
• Música y sonidos del juego original de Youtube
• HTML
• CSS
• jQuery (para escribir javascript con menos dolor)
• Google fonts

Fases del desarrollo

1. Empezar con lo básico
2. Pequeños detalles
3. Imagenes con píxeles perfectos
4. Pulir código
5. ¿Qué ha sido lo más díficil para mi?
6. ¿Qué otros problemas me he encontrado?

Empezar con lo básico

En la pantalla hay 5 objectos.

• Mario
• Cielo (nubes y montañas)
• Suelo
• Cajas de información
• Flechas de dirección

Los pasos para hacer esto desde cero son:

1. Escribir el HTML
2. Escribir el CSS
3. Escribir el Javascript y llorar
4. Test, test, test
5. Pulir el código

Pequeños detalles

La figura de Mario es una etiqueta IMG y en el atributo src tiene una imagen transparente, parece extraño, pero la imagen realmente se aplica con el atributo CSS "background".

Para crear la animación de Mario corriendo uso un sprite con 3 frames como este:

Para cambiar de un frame a otro uso el atributo CSS "background-position-x" y javascript:

• Frame 1, background-position-x: 0px;
• Frame 2, background-position-x: -65px;
• Frame 3, background-position-x: -130px;

Para cambiar la perspectiva de cuando Mario se mueve a la izquierda o derecha realmente uso la misma imagen, pero le aplico un atributo CSS "-webkit-transform":

• Izquierda, -webkit-transform:scaleX(-1);
• Derecha, -webkit-transform:scaleX(1);

Imágenes con píxeles perfectos

Para el fondo uso una imagen un poco pequeña que en escritorio se veía borrosa.

Victor @olivicmic me sugirió añadir al fondo el atributo CSS "image-rendering: crisp-edges" para obtener una imagen con más contraste. ¡Wow! Este pequeño cambio a marcado una gran diferencia.

Gracias Victor

Pulir el código

En la primera versión había mucho código duplicado en los controles del usuario cuando el usuario pulsa una tecla o hace clic en una flecha, para no repetir código lo puse en funciones.

¿Qué ha sido lo más díficil para mi?

Toda la interacción por javascript, gestionar intervalos de tiempo y que los controles funcionen tanto en escritorio como en dispositivos móviles.

¿Qué otros problemas me he encontrado?

Algunos navegadores como Google Chrome no permiten reproducir la música automáticamente, la música se reproduce cuando el usuario realiza alguna interacción como por ejemplo hacer un clic en la pantalla o pulsa las flechas de dirección.

Mensaje final

Espero que te haya gustado, que consigas algo de inspiración y sería genial si lo puedes compartir con tus familiares y amigos que hayan jugado alguna vez a Mario para recordarles estos buenos momentos que nos ha hecho pasar el videojuego.

Copyright

Todo el contenido de esta página Web, incluyendo artículos, ilustraciones, capturas de pantalla, gráficos, logotipos, descargas digitales y otros archivos, es propiedad de Nintendo, a menos que sea propiedad de un tercero, y está protegido por las leyes alemanas e internacionales de derechos de autor, marcas registradas y otras leyes de propiedad intelectual. Las marcas y los derechos de autor de los juegos y personajes de terceros son propiedad de las empresas que comercializan o conceden licencias de esos productos.