Skip to content
/ freegen Public template

Proyecto que ofrece gratis un Generador de Tarjetas escrito en HTML y Javascript para ser usado con Github Pages o de manera local.

License

Notifications You must be signed in to change notification settings

yaelsito/freegen

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 

Repository files navigation

BIENVENIDO A FREEGEN

Con FreeGen podrás tener tu propio generador de tarjetas personalizado y online con Github Pages.

PREVIEW de como quedaría:

enter image description here

TUTORIAL

¿No tienes experiencia en programación? No importa, es sencillo. Primero debes crear tu cuenta de Github. Simplemente registrate en "Signup".

1. Usar la plantilla

Selecciona el botón verde "Use this template".

1

2. Configurar el nuevo repositorio

Te mostrará una ventana donde:

  • Repository name: será el nuevo nombre de tu repositorio. Ojo: No será el mismo nombre de tu CCGEN pero puedes usarlo.
  • Include all branches: garantiza que si en el futuro agrego cosas nuevas, podrás acceder a ellas. Debes marcar la casilla.

Luego, debes darle "Create repository from template".

2

3. Personalización

Ahora verás una pantalla con todos los nuevos archivos del generador, entre ellos: index.html Toca index.html y espera que cargue.

3

Una vez haya cargado, toca el icono del Lapiz para editar el archivo:

4

MODIFICAR INDEX.HTML

Ahora verás todas las lineas que conforman el CCGEN. Recuerda solo editar las cosas que estén dentro del cuadro rojo y solo como se observa en el ejemplo.

  • La línea 5: Te permite darle un nombre a tu CCGEN, es el que se mostrará en la pestaña del navegador.

  • La línea 8: Te permite ponerle una descripción a tu CCGEN, la que se mostrará en los buscadores.

  • La línea 10: Es para poner tu nombre como autor del CCGEN o bien podrías dejarlo así, no pasa nada.

  • La línea 26: Te permite darle nombre a tu CCGEN, es el nombre que se mostrará en la página principal y el más importante.

  • La línea 27: Te permite darle una descripción corta a tu CCGEN, ya sea un eslogan, una frase o algo. se mostrará igual en la página principal.

5

ACTUALIZAR INDEX.HTML

Ya que hayas terminado de editar a tu gusto, ve hasta abajo de la página y dale al botón verde que dice "Commit changes"

6

Nota: No debes modificar ninguna otra cosa, porque puedes dejar inservible tu generador y deberás repetir el proceso.

PONER ONLINE TU CCGEN

Ya casi hemos terminado, ahora toca poner online tu nuevo CCGEN. Para eso debes ir a "Settings" en la parte superior.

7

Ahora dirigete a "Pages" y aquí debes configurar lo siguiente:

  • Source: Deploy from a branch.
  • Branch: Main.
  • Carpeta: root (dejar por defecto luego de elegir main).

Ahora debes darle "SAVE" y esperar. Adjunto imagen de cómo debe quedar:

8

OBTENER LA URL DE TU CCGEN

Si ya hiciste lo anterior, ahora refresca la página y verás lo siguiente:

9

Ahora solo toca el botón "Visit Site" y te llevará a tu nuevo CCGEN personalizado. Procura guardar ese link en un blog de notas o guardarlo como Favorito en tu navegador.

RESULTADO FINAL

Si has hecho bien todos los pasos, verás este bonito CCGEN personalizado con todos tus datos!

FINAL

Preguntas Frecuentes:

¿ CÓMO EDITAR LOS ICONOS Y LOGOS?

Cómo pudiste observar, en las líneas 12 y 26 hay archivos ,png cuyos nombres son fav.png y logo.png.

fav.png es el que se muestra en la pestaña del navegador y logo.png el que se muestra dentro del generador, el logo principal.

Para editarlos, debes ir a la carpeta assets, luego entrar a la carpeta img y dentro de ahí borrar ambas imagenes. Luego debes subir las tuyas con los mismos nombres.

enter image description here

¿CÓMO VOLVER A MODIFICAR LOS NOMBRES?

Si quieres modificar algún dato, debes volver a editar el archivo HTML siempre y cuando NO MODIFIQUES NADA QUE SEA LO YA MENCIONADO EN ESTE TUTORIAL.

Nota: Si ya tienes experiencia o conocimiento en HTML Y JAVASCRIPT no modifiques ni elimines ninguna etiqueta, pues el CCGEN quedará inservible.

MI CCGEN NO FUNCIONA O DEJÓ DE FUNCIONAR:

Si tu generador dejó de funcionar luego de modificarlo, significa que borraste algún componente importante y el sistema lo detectó. Deberás volver a hacer el proceso.

Si sabes de programación y borraste intencionalmente algo, (los créditos por ejemplo) me temo que el generador estaba preparado para eso y no se ejecutarán sus funciones.

Créditos:

Todo el desarrollo, modificación, colores, y tiempo fueron con dedicación por Sergio Yael Massieu, dueño de Stery y programador en ratos libres. Siempre he pensado que si hay conocimiento, hay que esparcirlo al resto de personas, no nos quita nada compartir con los demás.

Si llegaste hasta aquí, muchas gracias. Si quieres realizar una donación o un reconocimiento, puedes escribirme al correo: yaeldev@tutanota.com

De nuevo gracias y espero valoren el esfuerzo y tiempo que me tomó hacer todo esto para ustedes 💕

Mis otras redes:

About

Proyecto que ofrece gratis un Generador de Tarjetas escrito en HTML y Javascript para ser usado con Github Pages o de manera local.

Resources

License

Stars

Watchers

Forks

Languages