├── .gitignore ├── CSS ├── index.html ├── pages │ ├── animaciones.html │ ├── bootstrap.html │ ├── box_model.html │ ├── box_sizing.html │ ├── colores.html │ ├── desborde.html │ ├── display.html │ ├── display_visibility.html │ ├── especificidad.html │ ├── flexbox.html │ ├── grid.html │ ├── iconos.html │ ├── media_queries.html │ ├── posicionamiento.html │ ├── pseudoclases.html │ ├── selectores.html │ ├── selectores_avanzados.html │ ├── tipografias.html │ └── unidades.html ├── phi.html ├── src │ ├── fonts │ │ └── saint_bartogenia │ │ │ ├── READ_BEFORE_ANY_USE.txt │ │ │ ├── SaintBartogenia_PERSONAL_USE_ONLY.otf │ │ │ └── img │ │ │ ├── saint-bartogenia_flag.png │ │ │ ├── saint-bartogenia_poster01.png │ │ │ ├── saint-bartogenia_poster02.png │ │ │ ├── saint-bartogenia_poster03.png │ │ │ ├── saint-bartogenia_poster04.png │ │ │ ├── saint-bartogenia_poster05.png │ │ │ └── saint-bartogenia_poster06.png │ └── img │ │ ├── logo.png │ │ ├── perrito.jpg │ │ └── producto.png └── styles │ ├── animaciones.css │ ├── bootstrap.css │ ├── box_model.css │ ├── box_sizing.css │ ├── colores.css │ ├── desborde.css │ ├── display.css │ ├── display_visibility.css │ ├── especificidad.css │ ├── flexbox.css │ ├── grid.css │ ├── iconos.css │ ├── media_queries.css │ ├── posicionamiento.css │ ├── pseudoclases.css │ ├── selectores.css │ ├── selectores_avanzados.css │ ├── styles.css │ ├── tipografias.css │ └── unidades.css ├── Flask ├── app │ ├── __init__.py │ ├── database.py │ ├── models.py │ └── views.py ├── hello.py ├── requirements.txt └── run.py ├── HTML ├── enlaces.html ├── enlaces │ └── relativos │ │ └── ejemplo_rutas_relativas.html ├── estilos.css ├── etiquetas_semanticas.html ├── favicon.html ├── favicon.png ├── formularios.html ├── iframes.html ├── imagenes.html ├── img │ ├── Gatitos │ │ └── Gatito.png │ └── Perritos │ │ └── perrito.jpg ├── index.html ├── index2.html ├── intro_css.html ├── listas.html ├── pages │ └── clase_3 │ │ └── ejemplo_clase3.html └── tablas.html ├── JS ├── pages │ ├── DOM_eventos.html │ ├── alerta_confirm_prompt.html │ ├── arrays.html │ ├── ejemplo_DOM_API.html │ ├── estructuras_control_if.html │ ├── estructuras_control_loops.html │ ├── estructuras_control_switch.html │ ├── funciones.html │ ├── introduccion.html │ ├── json.html │ ├── objetos.html │ ├── operadores_aritmeticos.html │ ├── operadores_comparacion.html │ ├── operadores_logicos.html │ ├── scope.html │ ├── tipos_dato.html │ └── variables.html └── src │ ├── alerta_confirm_prompt.js │ ├── arrays.js │ ├── dom_eventos.js │ ├── ejemplo_DOM_API.js │ ├── estructuras_control_if.js │ ├── estructuras_control_loops.js │ ├── estructuras_control_switch.js │ ├── funciones.js │ ├── introduccion.js │ ├── json.js │ ├── objetos.js │ ├── operadores_aritmeticos.js │ ├── operadores_comparacion.js │ ├── operadores_logicos.js │ ├── scope.js │ ├── tipos_dato.js │ └── variables.js ├── LICENSE ├── Presentaciones ├── 31_Flask_Introduccion_Postgres.pptx.pdf ├── 32_Flask_view_model_Postgres.pptx.pdf ├── Clase 0. Presentación del curso Full Stack Python.pptx.pdf ├── Clase 01. HTML 1.pptx.pdf ├── Clase 02. HTML 2.pptx.pdf ├── Clase 03. HTML 3.pptx.pdf ├── Clase 04. HTML 4.pptx.pdf ├── Clase 05. CSS 1.pptx.pdf ├── Clase 06. CSS 2.pptx.pdf ├── Clase 07. CSS 3.pptx.pdf ├── Clase 08. CSS 4.pptx.pdf ├── Clase 09. CSS 5.pptx.pdf ├── Clase 10. CSS 6.pptx.pdf ├── Clase 11. Bootstrap.pptx.pdf ├── Clase 12. GIT.pptx.pdf ├── Clase 13. JS 1.pptx.pdf ├── Clase 14. JS 2.pptx.pdf ├── Clase 15. JS 3.pptx.pdf ├── Clase 16. JS 4.pptx.pdf ├── Clase 17. JS 5.pptx.pdf ├── Clase 18. JS 6.pptx.pdf ├── Clase 22. SQL 1.pptx.pdf ├── Clase 23. SQL 2.pptx.pdf ├── Clase 24. SQL 3.pptx.pdf ├── Clase 25. Python 1.pptx.pdf ├── Clase 26. Python 2.pptx.pdf ├── Clase 27. Python 3.pptx.pdf ├── Clase 28. Python 4.pptx.pdf ├── Clase 29. Python 5.pptx.pdf ├── Clase 30. Python 6.pptx.pdf ├── Clase 31. Python 7.pptx.pdf ├── Clase 32. Python 8.pptx.pdf ├── Practico Integrador - CaC - FullStack.pptx.pdf ├── TIF - CaC - Python.pptx.pdf └── TIF-TODO list.pdf ├── Python ├── Clases_objetos.py ├── colaboracion_clases.py ├── diccionarios.py ├── entrada_datos.py ├── estructuras_control_for.py ├── estructuras_control_if.py ├── estructuras_control_while.py ├── funciones.py ├── herencia.py ├── hola_mundo.py ├── listas.py ├── operadores_aritmeticos.py ├── operadores_comparacion.py ├── operadores_logicos.py ├── polimorfismo.py ├── scope.py ├── tipos_de_dato.py └── tuplas.py ├── README.md ├── SQL ├── notas.txt └── scripts.sql ├── TODO list app ├── css │ ├── add_task.css │ └── main.css ├── index.html ├── js │ ├── add_update_task.js │ ├── ejemplo_fetch_get.js │ ├── ejemplo_fetch_post.js │ ├── fetchData.js │ └── index.js ├── pages │ └── add_update_task.html └── resources │ ├── ico │ ├── logo.ico │ └── logo.png │ └── img │ ├── bg.png │ └── bg_dark.png └── datos.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Byte-compiled / optimized / DLL files 2 | __pycache__/ 3 | *.py[cod] 4 | *$py.class 5 | 6 | # C extensions 7 | *.so 8 | 9 | # Distribution / packaging 10 | .Python 11 | build/ 12 | develop-eggs/ 13 | dist/ 14 | downloads/ 15 | eggs/ 16 | .eggs/ 17 | lib/ 18 | lib64/ 19 | parts/ 20 | sdist/ 21 | var/ 22 | wheels/ 23 | share/python-wheels/ 24 | *.egg-info/ 25 | .installed.cfg 26 | *.egg 27 | MANIFEST 28 | 29 | # PyInstaller 30 | # Usually these files are written by a python script from a template 31 | # before PyInstaller builds the exe, so as to inject date/other infos into it. 32 | *.manifest 33 | *.spec 34 | 35 | # Installer logs 36 | pip-log.txt 37 | pip-delete-this-directory.txt 38 | 39 | # Unit test / coverage reports 40 | htmlcov/ 41 | .tox/ 42 | .nox/ 43 | .coverage 44 | .coverage.* 45 | .cache 46 | nosetests.xml 47 | coverage.xml 48 | *.cover 49 | *.py,cover 50 | .hypothesis/ 51 | .pytest_cache/ 52 | cover/ 53 | 54 | # Translations 55 | *.mo 56 | *.pot 57 | 58 | # Django stuff: 59 | *.log 60 | local_settings.py 61 | db.sqlite3 62 | db.sqlite3-journal 63 | 64 | # Flask stuff: 65 | instance/ 66 | .webassets-cache 67 | 68 | # Scrapy stuff: 69 | .scrapy 70 | 71 | # Sphinx documentation 72 | docs/_build/ 73 | 74 | # PyBuilder 75 | .pybuilder/ 76 | target/ 77 | 78 | # Jupyter Notebook 79 | .ipynb_checkpoints 80 | 81 | # IPython 82 | profile_default/ 83 | ipython_config.py 84 | 85 | # pyenv 86 | # For a library or package, you might want to ignore these files since the code is 87 | # intended to run in multiple environments; otherwise, check them in: 88 | # .python-version 89 | 90 | # pipenv 91 | # According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control. 92 | # However, in case of collaboration, if having platform-specific dependencies or dependencies 93 | # having no cross-platform support, pipenv may install dependencies that don't work, or not 94 | # install all needed dependencies. 95 | #Pipfile.lock 96 | 97 | # poetry 98 | # Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control. 99 | # This is especially recommended for binary packages to ensure reproducibility, and is more 100 | # commonly ignored for libraries. 101 | # https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control 102 | #poetry.lock 103 | 104 | # pdm 105 | # Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control. 106 | #pdm.lock 107 | # pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it 108 | # in version control. 109 | # https://pdm.fming.dev/#use-with-ide 110 | .pdm.toml 111 | 112 | # PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm 113 | __pypackages__/ 114 | 115 | # Celery stuff 116 | celerybeat-schedule 117 | celerybeat.pid 118 | 119 | # SageMath parsed files 120 | *.sage.py 121 | 122 | # Environments 123 | .env 124 | .venv 125 | env/ 126 | venv/ 127 | ENV/ 128 | env.bak/ 129 | venv.bak/ 130 | 131 | # Spyder project settings 132 | .spyderproject 133 | .spyproject 134 | 135 | # Rope project settings 136 | .ropeproject 137 | 138 | # mkdocs documentation 139 | /site 140 | 141 | # mypy 142 | .mypy_cache/ 143 | .dmypy.json 144 | dmypy.json 145 | 146 | # Pyre type checker 147 | .pyre/ 148 | 149 | # pytype static type analyzer 150 | .pytype/ 151 | 152 | # Cython debug symbols 153 | cython_debug/ 154 | 155 | # PyCharm 156 | # JetBrains specific template is maintained in a separate JetBrains.gitignore that can 157 | # be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore 158 | # and can be added to the global gitignore or merged into this file. For a more nuclear 159 | # option (not recommended) you can uncomment the following to ignore the entire idea folder. 160 | #.idea/ 161 | 162 | todolistvenv/ -------------------------------------------------------------------------------- /CSS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Intro a CSS 7 | 8 | 9 | 10 | 16 | 17 | 18 |

Intro a CSS

19 | 20 |

Parrafo 1

21 |

Parrafo 2

22 |

Parrafo 3

23 | 24 |
Articulo 1
25 |
Articulo 2
26 |
Articulo 3
27 | 28 | -------------------------------------------------------------------------------- /CSS/pages/animaciones.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Animaciones 7 | 8 | 9 | 10 |

Animaciones

11 | 12 |
13 | Caja 1 14 |
15 | 16 | -------------------------------------------------------------------------------- /CSS/pages/bootstrap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bootstrap 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Bootstrap

16 | 17 |
18 |
19 |
20 | Seccion 1 21 |
22 |
23 | Seccion 2 24 |
25 | 26 | 27 | 28 | 62 | 63 |
64 | 67 | 68 | -------------------------------------------------------------------------------- /CSS/pages/box_model.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Box Model 7 | 8 | 9 | 10 |

Box Model

11 | 12 |

Parrafo 1

13 |

Parrafo 2

14 | 15 |
Articulo 1
16 |
Articulo 2
17 | 18 | -------------------------------------------------------------------------------- /CSS/pages/box_sizing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Box sizing 7 | 8 | 9 | 10 |

Box Sizing

11 |

Border box

12 | 13 |
14 |
15 | Caja 1 16 |
17 |
18 | Caja 1 19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /CSS/pages/colores.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Colores 7 | 8 | 9 | 10 | 11 |

colores

12 | 13 |
Articulo 1
14 |
Articulo 2
15 |
Articulo 3
16 |
Articulo 4
17 | 18 | -------------------------------------------------------------------------------- /CSS/pages/desborde.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Desborde 7 | 8 | 9 | 10 |

Desborde (Overflow)

11 | 12 |
Caja 1
13 | 14 |
15 | Perrito 16 |
17 | 18 | -------------------------------------------------------------------------------- /CSS/pages/display.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Display 7 | 8 | 9 | 10 | 11 |

Display

12 | 13 |

Inline

14 | Link 1 15 | Link 2 16 | Link 3 17 | 18 | Span 1 19 | 20 |

Inline-block

21 |
Articulo 1
22 |
Articulo 2
23 |
Articulo 3
24 | 25 |

Block

26 |

Parrafo 1

27 |

Parrafo 2

28 |

Parrafo 3

29 |
Div 1
30 | 31 | -------------------------------------------------------------------------------- /CSS/pages/display_visibility.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Display y Visibility 7 | 8 | 9 | 10 |

Display y Visibility

11 | 12 |

Display: none

13 |

Parrafo 1

14 |

Parrafo 2

15 |

Parrafo 3

16 | 17 |

Visibility: hidden

18 |

Parrafo 4

19 |

Parrafo 5

20 |

Parrafo 6

21 | 22 | -------------------------------------------------------------------------------- /CSS/pages/especificidad.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Especificidad 7 | 8 | 9 | 10 |

Especificidad

11 | 12 |
    13 |
  1. Universal
    2. 14 |
  2. Etiqueta
    3. 15 |
  3. Clase
    4. 16 |
  4. id
    5. 17 |
  5. Estilos en linea
    6. 18 |
19 | 20 |

Parrafo 1

21 |

Parrafo 2

22 |

Parrafo 3

23 |

Parrafo 4

24 | 25 |
26 |
Articulo 1
27 |
Articulo 2
28 |
Articulo 3
29 |
30 | 31 |
32 | Caja 1 33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /CSS/pages/flexbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flexbox 7 | 8 | 9 | 10 |
11 |

Flexbox

12 |
13 | 14 |

Flex wrap

15 |
16 |
Articulo 1
17 |
Articulo 2
18 |
Articulo 3
19 |
20 | 21 |

Flex nowrap

22 |
23 |
Articulo 1
24 |
Articulo 2
25 |
Articulo 3
26 |
27 | 28 |

justify content y align items

29 |
30 |
Articulo 1
31 |
Articulo 2
32 |
Articulo 3
33 |
Articulo 4
34 |
35 | 36 |

Flex grow

37 |
38 |
Articulo 1
39 |
Articulo 2
40 |
Articulo 3
41 |
42 | 43 |

definir clases

44 |
45 |
Articulo 1
46 |
Articulo 2
47 |
Articulo 3
48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /CSS/pages/grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Grid 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | Logo 15 | 16 |

Mi página de productos

17 | Login 18 |
19 | 26 |
27 |
28 |

Productos

29 |
30 |

Ofertas

31 |
32 |
33 | Producto 34 |

Oferta

35 |

Descripcion de la oferta

36 |
37 |
38 | Producto 39 |

Oferta

40 |

Descripcion de la oferta

41 |
42 |
43 | Producto 44 |

Oferta

45 |

Descripcion de la oferta

46 |
47 |
48 | Producto 49 |

Oferta

50 |

Descripcion de la oferta

51 |
52 |
53 |
54 |
55 |

Categorias

56 |
57 |
Tecnologia
58 |
Hogar
59 |
Mascotas
60 |
Vehiculos
61 |
Bebés
62 |
Supermercado
63 |
64 |
65 |
66 |
67 |

Contactanos

68 |
69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 |
78 |
79 |
80 | 90 | 91 | -------------------------------------------------------------------------------- /CSS/pages/iconos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Iconos 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /CSS/pages/media_queries.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Media Queries 7 | 8 | 9 | 10 |
11 |

Media Queries

12 |
13 | 14 |
15 |
16 |
Caja 1
17 |
Caja 2
18 |
Caja 3
19 |
20 |
21 | 22 | 25 | 26 | -------------------------------------------------------------------------------- /CSS/pages/posicionamiento.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Posicionamiento 7 | 8 | 9 | 10 |
11 |

Posicionamiento

12 |
13 | 20 |
21 |

Static

22 |

23 | Cuando la propiedad posistion esta en "static" decimos que el elemento 24 | "No está posicionado". 25 |

26 | 27 |

Absolute

28 |

29 | Busca su primer padre posicionado y se desplaza en funcion de este. 30 | Si no encuentra ninguno, toma como referencia el body. 31 |

32 |
33 |
Articulo 1
34 |
Articulo 2
35 |
Articulo 3
36 |
Articulo 4
37 |

Parrafo 1

38 |

Parrafo 2

39 |
40 | 41 |

Relative

42 |

43 | posicionar la etiqueta tomando como referencia su lugar original. 44 |

45 |
46 |
Articulo 5
47 |
48 | 49 |
50 | 51 |
52 | 53 |

Fixed

54 | ir al inicio 55 |
56 | 59 | 60 | -------------------------------------------------------------------------------- /CSS/pages/pseudoclases.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pseudoclases 7 | 8 | 9 | 10 |

Pseudoclases

11 | 12 |

First, last

13 |
14 |

Parrafo 1

15 |

Parrafo 2

16 |

Parrafo 3

17 |
18 | 19 |

nth-child

20 |
21 |

Parrafo 1

22 |

Parrafo 2

23 |

Parrafo 3

24 |

Parrafo 4

25 |

Parrafo 5

26 |

Parrafo 6

27 |
28 | 29 |

estados de boton

30 |
31 | Link 1 32 | Link 2 33 | Link 3 34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /CSS/pages/selectores.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Selectores 7 | 8 | 9 | 10 | 11 |

Selectores

12 | 13 | 20 | 21 |

Parrafo 1

22 |

Parrafo 2

23 |

Parrafo 3

24 | 25 | 26 | -------------------------------------------------------------------------------- /CSS/pages/selectores_avanzados.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Selectores Avanzados 7 | 8 | 9 | 10 |
11 |

selectores Avanzados

12 |
13 |
14 |

Parrafo 1

15 |

Parrafo 2

16 |

Parrafo 3

17 | 18 |
19 |

Seccion 1

20 |
Articulo 1
21 |
22 | 23 |
Articulo 2
24 | 25 | 26 |
27 |
28 |
29 |
30 | Caja 1 31 |
32 |
33 |
34 |
35 | 36 |
37 |
38 | Caja 2 39 |
40 |
41 | 42 |
43 |

Contenedor 2

44 |

Parrafo 1

45 |

Parrafo 2

46 |

Parrafo 3

47 |
48 | 49 |
50 |

Contenedor 2

51 |

Parrafo 1

52 |

Parrafo 2

53 |

Parrafo 3

54 |
55 | 56 |
57 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /CSS/pages/tipografias.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tipografias 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 |

Tipografias

18 | 19 |

20 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam itaque minima quaerat adipisci eius vitae 21 | numquam perferendis consequuntur. Eos id quidem cupiditate ea? Exercitationem impedit qui expedita ipsa, non 22 | rem? 23 |

24 | 25 |
26 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab ipsam error iure ducimus, laboriosam numquam, 27 | voluptatibus molestias esse accusantium quo enim. Asperiores, ipsum tenetur maiores totam distinctio quam illum 28 | harum. 29 |
30 | 31 |
32 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti vitae fugit praesentium dolores consectetur 33 | ducimus deserunt porro necessitatibus? Ratione repudiandae voluptate cupiditate dolorum quasi nostrum deleniti 34 | et, alias labore omnis! 35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /CSS/pages/unidades.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Unidades 7 | 8 | 9 | 10 |

Unidades

11 | 12 |

Absolutas

13 |

Parrafo 1

14 | 15 |

Relativas

16 | 17 |
Caja 1
18 | 19 |
20 |

Seccion 1

21 |
Caja 2
22 |
23 | 24 |
25 |

Seccion 2

26 |

Parrafo 2

27 |
28 | 29 | 30 |

Parrafo3

31 |
32 | Articulo 1 33 |
34 | 35 |
Columna 1
Columna 2
36 | 37 |
Fila 1
38 |
Fila 2
39 | 40 | 41 | -------------------------------------------------------------------------------- /CSS/phi.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 69 | 70 | 71 | 72 | 73 |
74 |
21
75 |
76 |
13
77 |
78 |
79 |
8
80 |
81 |
5
82 |
83 |
84 |
3
85 |
86 |
2
87 |
1
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 | 97 | 98 | -------------------------------------------------------------------------------- /CSS/src/fonts/saint_bartogenia/READ_BEFORE_ANY_USE.txt: -------------------------------------------------------------------------------- 1 | 2 | By installing or using this font you agree to the Product Usage Agreement: 3 | http://www.mansgreback.com/pua 4 | 5 | ----------------------- 6 | 7 | This font is for PERSONAL USE ONLY and requires a license for commercial use. 8 | The font license can be purchased at: 9 | http://www.mansgreback.com/fonts/saint-bartogenia 10 | 11 | Please read "What license do I need?" for more info: 12 | http://www.mansgreback.com/license 13 | 14 | ----------------------- 15 | 16 | Saint Bartogenia is a handscript font that elegantly bridges the gap between handwriting and formality. 17 | 18 | Exuding a beautiful and lovely aura, this font is a perfect choice for wedding invitations and other elegant stationery. Its script form is both classy and fine, mirroring the artistry of traditional calligraphy with a modern twist. The thin, delicate lines of Saint Bartogenia create a sense of sophistication and grace, making each character swirl across the page like a light wind. 19 | 20 | Use underscore _ anywhere in a word to make a swash. 21 | Example: Ele_gant 22 | 23 | Use multiple underscores to make longer underlines. 24 | Example: Wonder___world 25 | 26 | The font is built with advanced OpenType functionality and guaranteed top-notch quality, containing stylistic and contextual alternates, ligatures and more automatic and manual features; all to give you full control and customizability. 27 | It has extensive lingual support, covering all Latin-based languages, from North Europa to South Africa, from America to South-East Asia. It contains all characters and symbols you'll ever need, including all punctuation and numbers. 28 | 29 | Saint Bartogenia is a manifestation of Mans Greback's commitment to combining aesthetic beauty with practical usability, making it a go-to choice for designers seeking to infuse their projects with a touch of finesse. 30 | 31 | ----------------------- 32 | 33 | For further information, please read the FAQ: 34 | http://www.mansgreback.com/faq 35 | -------------------------------------------------------------------------------- /CSS/src/fonts/saint_bartogenia/SaintBartogenia_PERSONAL_USE_ONLY.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/CSS/src/fonts/saint_bartogenia/SaintBartogenia_PERSONAL_USE_ONLY.otf -------------------------------------------------------------------------------- /CSS/src/fonts/saint_bartogenia/img/saint-bartogenia_flag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/CSS/src/fonts/saint_bartogenia/img/saint-bartogenia_flag.png -------------------------------------------------------------------------------- /CSS/src/fonts/saint_bartogenia/img/saint-bartogenia_poster01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/CSS/src/fonts/saint_bartogenia/img/saint-bartogenia_poster01.png -------------------------------------------------------------------------------- /CSS/src/fonts/saint_bartogenia/img/saint-bartogenia_poster02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/CSS/src/fonts/saint_bartogenia/img/saint-bartogenia_poster02.png -------------------------------------------------------------------------------- /CSS/src/fonts/saint_bartogenia/img/saint-bartogenia_poster03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/CSS/src/fonts/saint_bartogenia/img/saint-bartogenia_poster03.png -------------------------------------------------------------------------------- /CSS/src/fonts/saint_bartogenia/img/saint-bartogenia_poster04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/CSS/src/fonts/saint_bartogenia/img/saint-bartogenia_poster04.png -------------------------------------------------------------------------------- /CSS/src/fonts/saint_bartogenia/img/saint-bartogenia_poster05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/CSS/src/fonts/saint_bartogenia/img/saint-bartogenia_poster05.png -------------------------------------------------------------------------------- /CSS/src/fonts/saint_bartogenia/img/saint-bartogenia_poster06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/CSS/src/fonts/saint_bartogenia/img/saint-bartogenia_poster06.png -------------------------------------------------------------------------------- /CSS/src/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/CSS/src/img/logo.png -------------------------------------------------------------------------------- /CSS/src/img/perrito.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/CSS/src/img/perrito.jpg -------------------------------------------------------------------------------- /CSS/src/img/producto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/CSS/src/img/producto.png -------------------------------------------------------------------------------- /CSS/styles/animaciones.css: -------------------------------------------------------------------------------- 1 | div { 2 | width: 100px; 3 | height: 100px; 4 | 5 | padding: 15px; 6 | 7 | background-color: red; 8 | 9 | animation-name: CambiarColor; 10 | animation-duration: 1s; 11 | animation-iteration-count: infinite; 12 | animation-timing-function: ease-in-out; 13 | } 14 | 15 | @keyframes CambiarColor { 16 | 0% {background-color: red;} 17 | 50% {background-color: yellow;} 18 | 100% {background-color: red;} 19 | } 20 | 21 | h1 { 22 | opacity: 0.5; 23 | } -------------------------------------------------------------------------------- /CSS/styles/bootstrap.css: -------------------------------------------------------------------------------- 1 | main section { 2 | background-color: blue; 3 | color: white; 4 | border: 1px solid black; 5 | } 6 | 7 | body { 8 | background-color: gray; 9 | } -------------------------------------------------------------------------------- /CSS/styles/box_model.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | 7 | p { 8 | margin: 5px; 9 | border: 5px solid black; 10 | padding: 5px; 11 | 12 | width: 200px; 13 | height: 100px; 14 | } 15 | 16 | article { 17 | /* 18 | tanto el padding como el margin y el border 19 | pueden recibir 1, 2, 3, o 4 valores. 20 | */ 21 | 22 | padding: 5px; 23 | 24 | padding: 10px 15px; 25 | 26 | padding: 10px 15px 20px 25px; 27 | 28 | padding-top: 20px; 29 | padding-right: 25px; 30 | padding-bottom: 30px; 31 | padding-left: 35px; 32 | } -------------------------------------------------------------------------------- /CSS/styles/box_sizing.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .contenedor { 7 | width: 200px; 8 | height: 200px; 9 | 10 | background-color: blue; 11 | } 12 | 13 | .contenido { 14 | box-sizing: border-box; 15 | 16 | width: 100px; 17 | height: 100px; 18 | 19 | border: 10px solid black; 20 | 21 | background-color: red; 22 | } -------------------------------------------------------------------------------- /CSS/styles/colores.css: -------------------------------------------------------------------------------- 1 | .por_nombre { 2 | background-color: red; 3 | } 4 | 5 | .por_rgb { 6 | /* 7 | RGB(Red Green Blue) 8 | 9 | Colores Luz / Colores aditivos 10 | 11 | Colores primarios : RGB 12 | Colores secundarios : CYM(K) 13 | 14 | en rgb el valor minimo de cada componente de color es 0 15 | y el maximo es 255. 16 | 0-255(256 = 2**8) 17 | */ 18 | 19 | background-color: rgb(0,0,0); 20 | 21 | background-color: rgb(255,255,255); 22 | 23 | /* Colores primarios */ 24 | background-color: rgb(255,0,0); 25 | background-color: rgb(0,255,0); 26 | background-color: rgb(0,0,255); 27 | 28 | /* Colores Secundarios */ 29 | background-color: rgb(0,255,255); 30 | background-color: rgb(255,255,0); 31 | background-color: rgb(255,0,255); 32 | 33 | background-color: rgb(100,100,100); 34 | 35 | color: white; 36 | } 37 | 38 | body { 39 | background-color: aqua; 40 | } 41 | .por_rgba { 42 | background-color: rgba(0,0,0, 0.5); 43 | } 44 | .por_hexa { 45 | /* 46 | RGB 0 - 255 47 | Hexa 0 - FF 48 | 49 | Decimal (0-9): 50 | 0,1,2,3,4,5,6,7,8,9, 10 ... 51 | 52 | Hexadecimal(0-F) 53 | 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F, 10 54 | 55 | */ 56 | background-color: #000000; 57 | background-color: #FFFFFF; 58 | background-color: #FFF; 59 | 60 | /* Colores primarios */ 61 | background-color: #FF0000; 62 | background-color: #00FF00; 63 | background-color: #0000FF; 64 | 65 | /* Colores Secundarios */ 66 | background-color: #00FFFF; 67 | background-color: #FFFF00; 68 | background-color: #FF00FF; 69 | 70 | /*grises*/ 71 | background-color: #AAA; 72 | 73 | background-color: #0F4C5C; 74 | } -------------------------------------------------------------------------------- /CSS/styles/desborde.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | .caja { 6 | width: 50px; 7 | height: 50px; 8 | 9 | background-color: red; 10 | 11 | font-size: 50px; 12 | 13 | overflow: hidden; 14 | } 15 | 16 | .marco { 17 | width: 100px; 18 | height: 100px; 19 | 20 | border: 5px solid black; 21 | border-radius: 999px; 22 | 23 | overflow: hidden; 24 | } 25 | 26 | .marco img { 27 | position: relative; 28 | right: 62px; 29 | } -------------------------------------------------------------------------------- /CSS/styles/display.css: -------------------------------------------------------------------------------- 1 | a { 2 | width: 100px; 3 | height: 50px; 4 | 5 | background-color: red; 6 | } 7 | 8 | p { 9 | width: 100px; 10 | height: 50px; 11 | background-color: blue; 12 | } 13 | 14 | article { 15 | display: inline-block; 16 | width: 200px; 17 | height: 50px; 18 | 19 | background-color: magenta; 20 | } 21 | -------------------------------------------------------------------------------- /CSS/styles/display_visibility.css: -------------------------------------------------------------------------------- 1 | #Parrafo2 { 2 | display: none; 3 | } 4 | 5 | #Parrafo5 { 6 | visibility: hidden; 7 | } 8 | -------------------------------------------------------------------------------- /CSS/styles/especificidad.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | p { 7 | background-color: red; 8 | } 9 | 10 | .azul { 11 | background-color: blue; 12 | } 13 | 14 | #Parrafo3 { 15 | background-color: green; 16 | } 17 | 18 | #Parrafo4 { 19 | background-color: blueviolet; 20 | } 21 | 22 | article { 23 | background-color: green; 24 | } 25 | 26 | .cyan { 27 | background-color: cyan; 28 | color: red; 29 | } 30 | 31 | article.cyan { 32 | background-color: burlywood; 33 | color: white; 34 | } 35 | 36 | #Articulo3 { 37 | background-color: darkblue; 38 | } 39 | 40 | article#Articulo3 { 41 | background-color: cadetblue; 42 | } 43 | 44 | body section article.cyan#Articulo3 { 45 | background-color: crimson; 46 | } 47 | 48 | body { 49 | /* background-image: url("../src/img/perrito.jpg"); */ 50 | } 51 | 52 | p { 53 | /* Ojo con el uso de important */ 54 | /* background-color: red !important; */ 55 | } 56 | 57 | /* 58 | Si los selectores son igual de especificos 59 | se resuelve por orden en el código. 60 | 61 | El ultimo definido es el que gana. 62 | */ 63 | div { 64 | background-color: crimson; 65 | } 66 | 67 | div { 68 | background-color: darkgreen; 69 | } 70 | -------------------------------------------------------------------------------- /CSS/styles/flexbox.css: -------------------------------------------------------------------------------- 1 | header { 2 | background-color: gray; 3 | padding: 25px; 4 | height: 100px; 5 | } 6 | 7 | .centered.red { 8 | background-color: red; 9 | } 10 | section { 11 | margin: 25px; 12 | } 13 | section.flex_wrap { 14 | background-color: blue; 15 | width: 300px; 16 | 17 | display: flex; 18 | flex-direction: row; 19 | flex-wrap: wrap; 20 | } 21 | 22 | section.flex_nowrap { 23 | background-color: blue; 24 | width: 300px; 25 | 26 | display: flex; 27 | flex-direction: row; 28 | flex-wrap: nowrap; 29 | } 30 | 31 | section article { 32 | background-color: red; 33 | border: 1px solid black; 34 | width: 100px; 35 | height: 50px; 36 | } 37 | 38 | .justify_align { 39 | background-color: blue; 40 | height: 200px; 41 | 42 | display: flex; 43 | flex-direction: row; 44 | 45 | /* flex-wrap: wrap; */ 46 | /*Alineacion en el eje principal*/ 47 | justify-content: space-evenly; 48 | 49 | /*Alineacion en el eje secundario*/ 50 | align-items: center; 51 | } 52 | 53 | .flex_grow { 54 | display: flex; 55 | flex-direction: row; 56 | background-color: blue; 57 | } 58 | 59 | .flex_grow article { 60 | flex: 1; 61 | } 62 | 63 | #Articulo2 { 64 | flex: 2; 65 | } 66 | 67 | .centered { 68 | display: flex; 69 | justify-content: center; 70 | align-items: center; 71 | } -------------------------------------------------------------------------------- /CSS/styles/grid.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | html { 7 | scroll-behavior: smooth; 8 | } 9 | 10 | body { 11 | background-color: #EFE9F4; 12 | } 13 | 14 | header, nav, main, footer { 15 | padding: 25px; 16 | } 17 | 18 | header { 19 | display: flex; 20 | justify-content: space-between; 21 | align-items: center; 22 | } 23 | 24 | header img { 25 | width: 60px; 26 | } 27 | 28 | .button { 29 | background-color: rgb(255, 140, 58); 30 | 31 | padding: 10px; 32 | 33 | margin-right: 10px; 34 | 35 | border-radius: 5px; 36 | border-top-right-radius: 15px; 37 | 38 | color: #171D1C; 39 | 40 | transition: 0.3s all; 41 | 42 | box-shadow: 5px 5px 5px rgba(0,0,0, 0.2); 43 | } 44 | 45 | .button:hover { 46 | background-color: black; 47 | color: #EFE9F4; 48 | 49 | border-top-right-radius: 5px; 50 | } 51 | 52 | header { 53 | background-color: #5863F8; 54 | } 55 | nav { 56 | background-color: #373c85; 57 | position: sticky; 58 | top: 0; 59 | } 60 | 61 | nav ul { 62 | list-style-type: none; 63 | 64 | display: flex; 65 | } 66 | 67 | a { 68 | text-decoration: none; 69 | } 70 | 71 | main { 72 | padding: 0; 73 | } 74 | 75 | main h2 { 76 | background-color: #16BAC5; 77 | } 78 | 79 | main h3 { 80 | background-color: #5FBFF9; 81 | } 82 | 83 | #Productos h2, #Contacto h2 { 84 | padding: 15px 25px; 85 | } 86 | 87 | #Productos h3 { 88 | padding: 10px 25px; 89 | } 90 | 91 | #Ofertas .contenido { 92 | display: flex; 93 | justify-content: space-evenly; 94 | align-items: center; 95 | 96 | padding: 25px; 97 | } 98 | 99 | #Ofertas .contenido article { 100 | background-color: #a1cae4; 101 | padding: 15px; 102 | 103 | display: flex; 104 | flex-direction: column; 105 | } 106 | 107 | #Ofertas .contenido article h4 { 108 | font-size: 2em; 109 | padding: 15px 0; 110 | } 111 | 112 | #Categorias .contenido { 113 | display: flex; 114 | justify-content: space-around; 115 | flex-wrap: wrap; 116 | 117 | padding: 25px; 118 | 119 | width: 50%; 120 | 121 | margin: 0 auto; 122 | } 123 | 124 | #Categorias .contenido article { 125 | width: 200px; 126 | padding: 25px; 127 | margin: 15px; 128 | background-color: #a1cae4; 129 | 130 | text-align: center; 131 | } 132 | 133 | #Contacto form { 134 | display: grid; 135 | 136 | grid-template-columns: 2fr 5fr; 137 | 138 | grid-column-gap: 15px; 139 | grid-row-gap: 15px; 140 | 141 | width: 500px; 142 | 143 | margin: 25px auto; 144 | background-color: #5FBFF9; 145 | 146 | padding: 25px; 147 | } 148 | 149 | #Contacto form input[type="reset"], #Contacto form input[type="submit"] { 150 | border: none; 151 | } 152 | footer { 153 | color: #EFE9F4; 154 | background-color: #171D1C; 155 | 156 | display: flex; 157 | justify-content: space-between; 158 | align-items: center; 159 | } 160 | 161 | footer .redes { 162 | font-size: 1.5em; 163 | } 164 | 165 | footer .redes i { 166 | color: rgb(255, 140, 58); 167 | transition: 0.2s all; 168 | } 169 | 170 | footer .redes i:hover { 171 | color: #EFE9F4;; 172 | } -------------------------------------------------------------------------------- /CSS/styles/iconos.css: -------------------------------------------------------------------------------- 1 | i.bxl-facebook-square { 2 | color: blue; 3 | transition: 0.2s all; 4 | font-size: 1em; 5 | } 6 | 7 | i .bxl-facebook-square:hover { 8 | color: red; 9 | font-size: 2em; 10 | } -------------------------------------------------------------------------------- /CSS/styles/media_queries.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | header, main, footer { 7 | padding: 25px; 8 | } 9 | 10 | header { 11 | background-color: lightgray; 12 | } 13 | 14 | main { 15 | min-height: 100vh; 16 | } 17 | 18 | footer { 19 | background-color: gray; 20 | } 21 | 22 | .contenedor div { 23 | width: 30%; 24 | background-color: brown; 25 | height: 100px; 26 | 27 | display: inline-block; 28 | margin: 15px; 29 | } 30 | 31 | 32 | @media only screen and (max-width: 600px){ 33 | header, main, footer { 34 | padding:10px; 35 | } 36 | 37 | body { 38 | font-size: 12px; 39 | } 40 | 41 | .contenedor div { 42 | width: 90%; 43 | display: block; 44 | } 45 | } 46 | 47 | @media only screen and (min-width: 600px){ 48 | header, main, footer { 49 | padding:15px; 50 | } 51 | 52 | body { 53 | font-size: 16px; 54 | } 55 | } 56 | 57 | @media only screen and (min-width: 1000px){ 58 | header, main, footer { 59 | padding:30px; 60 | } 61 | 62 | body { 63 | font-size: 24px; 64 | } 65 | } -------------------------------------------------------------------------------- /CSS/styles/posicionamiento.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | html { 6 | scroll-behavior: smooth; 7 | } 8 | 9 | header,main,footer { 10 | padding: 25px; 11 | } 12 | 13 | header, footer { 14 | text-align: center; 15 | } 16 | 17 | header { 18 | background-color: gray; 19 | min-height: 10vh; 20 | } 21 | 22 | main { 23 | height: 200vh; 24 | } 25 | 26 | footer { 27 | background-color: #444; 28 | min-height: 5vh; 29 | } 30 | 31 | .button-up { 32 | display: inline-block; 33 | width: 50px; 34 | height: 50px; 35 | 36 | background-color: blue; 37 | color: white; 38 | padding: 5px; 39 | text-align: center; 40 | 41 | border-radius: 999px; 42 | 43 | position: fixed; 44 | bottom: 15px; 45 | right: 15px; 46 | } 47 | 48 | .contenedor_posicion_absoluta { 49 | background-color: blue; 50 | height: 500px; 51 | 52 | position: relative; 53 | } 54 | 55 | .posicion_absoluta { 56 | background-color: blueviolet; 57 | width: 200px; 58 | height: 100px; 59 | 60 | position: absolute; 61 | } 62 | 63 | .posicion_absoluta:nth-child(2n){ 64 | background-color: chartreuse; 65 | } 66 | 67 | .contenedor_posicion_relativa { 68 | background-color: crimson; 69 | height: 500px; 70 | } 71 | 72 | .posicion_relativa { 73 | background-color: chocolate; 74 | width: 200px; 75 | height: 100px; 76 | 77 | position: relative; 78 | top: 15px; 79 | right: 15px; 80 | } 81 | 82 | .marco { 83 | border: 1px solid black; 84 | border-radius: 999px; 85 | overflow: hidden; 86 | 87 | width: 100px; 88 | height: 100px; 89 | } 90 | 91 | .marco img { 92 | position: relative; 93 | right: -15px; 94 | 95 | transition: 1s all; 96 | } 97 | 98 | .marco img:hover { 99 | right: 59px; 100 | } 101 | 102 | 103 | nav { 104 | position: sticky; 105 | top: 0; 106 | z-index: 999; 107 | box-shadow: 0 5px 5px rgb(0,0,0,0.5); 108 | } 109 | 110 | nav ul { 111 | list-style-type: none; 112 | padding: 15px; 113 | background-color: blueviolet; 114 | } 115 | 116 | nav ul li{ 117 | display: inline-block; 118 | padding: 10px; 119 | text-align: center; 120 | 121 | background-color: burlywood; 122 | } 123 | -------------------------------------------------------------------------------- /CSS/styles/pseudoclases.css: -------------------------------------------------------------------------------- 1 | .first_last p:first-child { 2 | background-color: red; 3 | } 4 | 5 | .first_last p:last-child { 6 | background-color: blue; 7 | } 8 | 9 | .nth p:nth-child(2n) { 10 | background-color: brown; 11 | } 12 | 13 | .nth p:nth-child(2n+1) { 14 | background-color: aquamarine; 15 | } 16 | 17 | .buttons a { 18 | text-decoration: none; 19 | 20 | display: inline-block; 21 | width: 50px; 22 | height: 25px; 23 | 24 | padding: 10px; 25 | 26 | background-color: coral; 27 | color: black; 28 | 29 | transition: 0.2s all; 30 | } 31 | 32 | .buttons a:link { 33 | color: black; 34 | } 35 | 36 | .buttons a:visited { 37 | color: aquamarine; 38 | } 39 | 40 | .buttons a:hover { 41 | background-color: black; 42 | color: white; 43 | width: 100px; 44 | } 45 | 46 | .buttons a:active { 47 | color: red; 48 | } 49 | 50 | .buttons a:focus { 51 | border: 5px solid magenta; 52 | } -------------------------------------------------------------------------------- /CSS/styles/selectores.css: -------------------------------------------------------------------------------- 1 | /* Selector Universal */ 2 | * { 3 | /*limpiar estilos por defecto*/ 4 | margin: 0; 5 | padding: 0; 6 | /* border: 1px solid red; */ 7 | } 8 | 9 | /* Selectores de etiqueta */ 10 | p { 11 | background-color: red; 12 | } 13 | 14 | ul { 15 | list-style-type: none; 16 | } 17 | 18 | /* Selectores de clase */ 19 | .azul { 20 | background-color: blue; 21 | color: white; 22 | } 23 | 24 | /* Selectores de id*/ 25 | 26 | #Parrafo3{ 27 | background-color: green; 28 | } -------------------------------------------------------------------------------- /CSS/styles/selectores_avanzados.css: -------------------------------------------------------------------------------- 1 | /* Selectores simples */ 2 | * { 3 | margin: 0; 4 | padding :0; 5 | } 6 | 7 | p { 8 | font-size: 1.5em; 9 | } 10 | 11 | .clase1 { 12 | border: 1px solid black; 13 | } 14 | 15 | #Parrafo1 { 16 | background-color: blue; 17 | } 18 | 19 | /* Selectores compuestos */ 20 | /* Grupo */ 21 | 22 | header, main, footer { 23 | padding: 15px; 24 | } 25 | 26 | header { 27 | background-color: gray; 28 | } 29 | 30 | main { 31 | } 32 | 33 | footer { 34 | background-color: lightgray; 35 | } 36 | 37 | section { 38 | background-color: chartreuse; 39 | border: 1px solid black; 40 | height: 200px; 41 | } 42 | 43 | /* Descendiente */ 44 | main section article { 45 | background-color: red; 46 | } 47 | 48 | .contenedor { 49 | border: 1px solid black; 50 | width: 200px; 51 | height: 200px; 52 | } 53 | /* Hijo directo */ 54 | .contenedor>.contenido { 55 | background-color: red; 56 | width: 100px; 57 | height: 100px; 58 | } 59 | 60 | h2 + p { 61 | background-color: brown; 62 | } 63 | 64 | h3 ~ p { 65 | background-color: chocolate; 66 | } -------------------------------------------------------------------------------- /CSS/styles/styles.css: -------------------------------------------------------------------------------- 1 | article { 2 | background-color: green; 3 | } 4 | 5 | /* 6 | Estructura general de un selector en CSS 7 | 8 | selector { 9 | propiedad1: valor; 10 | propiedad2: valor1 valor2; 11 | } 12 | 13 | */ -------------------------------------------------------------------------------- /CSS/styles/tipografias.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: saintBartogenia; 3 | src: url(../src/fonts/saint_bartogenia/SaintBartogenia_PERSONAL_USE_ONLY.otf); 4 | } 5 | 6 | p { 7 | font-family: Arial, Helvetica, sans-serif; 8 | font-size: 20px; 9 | font-weight: 900; 10 | font-style: italic; 11 | } 12 | 13 | article { 14 | font-family: "Roboto", sans-serif; 15 | font-weight: regular; 16 | } 17 | 18 | section { 19 | font-family: saintBartogenia, serif; 20 | } -------------------------------------------------------------------------------- /CSS/styles/unidades.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | p { 6 | width: 200px; 7 | height: 50px; 8 | 9 | background-color: blue; 10 | } 11 | 12 | article { 13 | border: 1px solid black; 14 | width: 210mm; 15 | height: 297mm; 16 | } 17 | 18 | div { 19 | background-color: green; 20 | width: 50%; 21 | font-size: 50%; 22 | } 23 | 24 | section { 25 | background-color: red; 26 | width: 75%; 27 | font-size: 50px; 28 | color: white; 29 | } 30 | 31 | /* 32 | Las propiedades de texto se heredan 33 | */ 34 | #Parrafo2 { 35 | padding: 1em; 36 | font-size: 0.5em; 37 | } 38 | 39 | html { 40 | font-size: 20px; 41 | } 42 | 43 | #Parrafo3 { 44 | font-size: 0.5rem; 45 | } 46 | 47 | .columna { 48 | height: 100vh; 49 | display: inline-block; 50 | } 51 | 52 | .fila { 53 | height: 50vh; 54 | width: 100vw; 55 | background-color: blue; 56 | /* border: 1px solid white; */ 57 | } -------------------------------------------------------------------------------- /Flask/app/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Flask/app/__init__.py -------------------------------------------------------------------------------- /Flask/app/database.py: -------------------------------------------------------------------------------- 1 | import os 2 | import psycopg2 3 | from flask import g 4 | from dotenv import load_dotenv 5 | 6 | # Cargar variables de entorno desde el archivo .env 7 | load_dotenv() 8 | 9 | # Configuración de la base de datos usando variables de entorno 10 | DATABASE_CONFIG = { 11 | 'user': os.getenv('DB_USERNAME'), 12 | 'password': os.getenv('DB_PASSWORD'), 13 | 'host': os.getenv('DB_HOST'), 14 | 'database': os.getenv('DB_NAME'), 15 | 'port': os.getenv('DB_PORT', 5432) 16 | } 17 | 18 | # Función para obtener la conexión a la base de datos 19 | def get_db(): 20 | # Si 'db' no está en el contexto global de Flask 'g' 21 | if 'db' not in g: 22 | # Crear una nueva conexión a la base de datos y guardarla en 'g' 23 | g.db = psycopg2.connect(**DATABASE_CONFIG) 24 | # Retornar la conexión a la base de datos 25 | return g.db 26 | 27 | # Función para cerrar la conexión a la base de datos 28 | def close_db(e=None): 29 | # Extraer la conexión a la base de datos de 'g' y eliminarla 30 | db = g.pop('db', None) 31 | # Si la conexión existe, cerrarla 32 | if db is not None: 33 | db.close() 34 | 35 | # Función para inicializar la aplicación con el manejo de la base de datos 36 | def init_app(app): 37 | # Registrar 'close_db' para que se ejecute al final del contexto de la aplicación 38 | app.teardown_appcontext(close_db) 39 | 40 | def test_connection(): 41 | conn = psycopg2.connect(**DATABASE_CONFIG) 42 | 43 | cur = conn.cursor() 44 | 45 | conn.commit() 46 | 47 | cur.close() 48 | conn.close() 49 | 50 | def create_table_tareas(): 51 | conn = psycopg2.connect(**DATABASE_CONFIG) 52 | cur = conn.cursor() 53 | cur.execute( 54 | """ 55 | CREATE TABLE IF NOT EXISTS Tareas ( 56 | id SERIAL PRIMARY KEY, 57 | nombre VARCHAR(50) NOT NULL, 58 | descripcion VARCHAR(300) NOT NULL, 59 | fecha_creacion DATE NOT NULL, 60 | completada BOOLEAN NOT NULL, 61 | activa BOOLEAN NOT NULL 62 | ); 63 | """ 64 | ) 65 | conn.commit() 66 | 67 | cur.close() 68 | conn.close() -------------------------------------------------------------------------------- /Flask/app/models.py: -------------------------------------------------------------------------------- 1 | from app.database import get_db 2 | 3 | class Task: 4 | def __init__(self, id_task=None, nombre=None, descripcion=None, fecha_creacion=None, completada=None, activa=None): 5 | self.id_task = id_task 6 | self.nombre = nombre 7 | self.descripcion = descripcion 8 | self.fecha_creacion = fecha_creacion 9 | self.completada = completada 10 | self.activa = activa 11 | 12 | @staticmethod 13 | def __get_tasks_by_query(query): 14 | db = get_db() 15 | cursor = db.cursor() 16 | cursor.execute(query) 17 | rows = cursor.fetchall() 18 | 19 | tasks = [] 20 | for row in rows: 21 | tasks.append( 22 | Task( 23 | id_task=row[0], 24 | nombre=row[1], 25 | descripcion=row[2], 26 | fecha_creacion=row[3], 27 | completada=row[4], 28 | activa=row[5] 29 | ) 30 | ) 31 | cursor.close() 32 | return tasks 33 | 34 | @staticmethod 35 | def get_all_pending(): 36 | return Task.__get_tasks_by_query( 37 | """ 38 | SELECT * 39 | FROM tareas 40 | WHERE activa = true AND completada = false 41 | ORDER BY fecha_creacion DESC 42 | """ 43 | ) 44 | 45 | @staticmethod 46 | def get_all_completed(): 47 | return Task.__get_tasks_by_query( 48 | """ 49 | SELECT * 50 | FROM tareas 51 | WHERE activa = true AND completada = true 52 | ORDER BY fecha_creacion DESC 53 | """ 54 | ) 55 | 56 | @staticmethod 57 | def get_all_archived(): 58 | return Task.__get_tasks_by_query( 59 | """ 60 | SELECT * 61 | FROM tareas 62 | WHERE activa = false 63 | ORDER BY fecha_creacion DESC 64 | """ 65 | ) 66 | 67 | @staticmethod 68 | def get_by_id(id_task): 69 | db = get_db() 70 | cursor = db.cursor() 71 | cursor.execute("SELECT * FROM tareas WHERE id = %s", (id_task,)) 72 | 73 | row = cursor.fetchone() 74 | cursor.close() 75 | 76 | if row: 77 | return Task( 78 | id_task=row[0], 79 | nombre=row[1], 80 | descripcion=row[2], 81 | fecha_creacion=row[3], 82 | completada=row[4], 83 | activa=row[5] 84 | ) 85 | return None 86 | 87 | def save(self): 88 | db = get_db() 89 | cursor = db.cursor() 90 | if self.id_task: # Actualizar Tarea existente 91 | cursor.execute( 92 | """ 93 | UPDATE tareas 94 | SET nombre = %s, descripcion = %s, completada = %s, activa = %s 95 | WHERE id = %s 96 | """, 97 | (self.nombre, self.descripcion, self.completada, self.activa, self.id_task)) 98 | else: # Crear Tarea nueva 99 | cursor.execute( 100 | """ 101 | INSERT INTO tareas 102 | (nombre, descripcion, fecha_creacion, completada, activa) 103 | VALUES (%s, %s, %s, %s, %s) 104 | """, 105 | (self.nombre, self.descripcion, self.fecha_creacion, self.completada, self.activa)) 106 | self.id_task = cursor.lastrowid 107 | db.commit() 108 | cursor.close() 109 | 110 | def delete(self): 111 | db = get_db() 112 | cursor = db.cursor() 113 | cursor.execute("UPDATE tareas SET activa = false WHERE id = %s", (self.id_task,)) 114 | db.commit() 115 | cursor.close() 116 | 117 | def serialize(self): 118 | return { 119 | 'id': self.id_task, 120 | 'nombre': self.nombre, 121 | 'descripcion': self.descripcion, 122 | 'fecha_creacion': self.fecha_creacion.strftime('%Y-%m-%d'), 123 | 'completada': self.completada, 124 | 'activa': self.activa 125 | } 126 | -------------------------------------------------------------------------------- /Flask/app/views.py: -------------------------------------------------------------------------------- 1 | from flask import jsonify, request 2 | from app.models import Task 3 | 4 | from datetime import date 5 | 6 | def index(): 7 | return jsonify( 8 | { 9 | 'mensaje': 'Hola Mundo Listado de tareas' 10 | } 11 | ) 12 | 13 | def get_pending_tasks(): 14 | tasks = Task.get_all_pending() 15 | return jsonify([task.serialize() for task in tasks]) 16 | 17 | def get_completed_tasks(): 18 | tasks = Task.get_all_completed() 19 | return jsonify([task.serialize() for task in tasks]) 20 | 21 | def get_archived_tasks(): 22 | tasks = Task.get_all_archived() 23 | return jsonify([task.serialize() for task in tasks]) 24 | 25 | def get_task(task_id): 26 | task = Task.get_by_id(task_id) 27 | if not task: 28 | return jsonify({'message': 'Task not found'}), 404 29 | return jsonify(task.serialize()) 30 | 31 | def create_task(): 32 | data = request.json 33 | new_task = Task( 34 | nombre=data['nombre'], 35 | descripcion=data['descripcion'], 36 | fecha_creacion=date.today().strftime('%Y-%m-%d'), 37 | completada=False, 38 | activa=True 39 | ) 40 | new_task.save() 41 | return jsonify({'message': 'Task created successfully'}), 201 42 | 43 | def update_task(task_id): 44 | task = Task.get_by_id(task_id) 45 | if not task: 46 | return jsonify({'message': 'Task not found'}), 404 47 | 48 | data = request.json 49 | task.nombre = data['nombre'] 50 | task.descripcion = data['descripcion'] 51 | task.save() 52 | return jsonify({'message': 'Task updated successfully'}) 53 | 54 | def archive_task(task_id): 55 | task = Task.get_by_id(task_id) 56 | if not task: 57 | return jsonify({'message': 'Task not found'}), 404 58 | 59 | task.delete() 60 | return jsonify({'message': 'Movie deleted successfully'}) 61 | 62 | def __complete_task(task_id, status): 63 | task = Task.get_by_id(task_id) 64 | if not task: 65 | return jsonify({'message': 'Task not found'}), 404 66 | 67 | task.completada = status 68 | task.activa = True 69 | task.save() 70 | return jsonify({'message': 'Task updated successfully'}) 71 | 72 | def set_complete_task(task_id): 73 | return __complete_task(task_id, True) 74 | 75 | def reset_complete_task(task_id): 76 | return __complete_task(task_id, False) 77 | -------------------------------------------------------------------------------- /Flask/hello.py: -------------------------------------------------------------------------------- 1 | from flask import Flask 2 | 3 | 4 | app = Flask(__name__) 5 | 6 | # Cuando vemos un @algo encima de una funcion, se llama decorator 7 | @app.route('/') 8 | def pepito(): 9 | return "Hola Mundo Flask" 10 | 11 | # En criollo, este if significa que estoy ejecutando este script por consola. 12 | # Es decir: 13 | # > python hello.py 14 | if __name__ == '__main__': 15 | app.run(debug=True) 16 | 17 | """ 18 | Listo, con powershell como administrador, ya lo active 19 | Get-ExecutionPolicy (para ver estadoo) 20 | Set-ExecutionPolicy Unrestricted (para activar) 21 | """ -------------------------------------------------------------------------------- /Flask/requirements.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Flask/requirements.txt -------------------------------------------------------------------------------- /Flask/run.py: -------------------------------------------------------------------------------- 1 | from flask import Flask 2 | from flask_cors import CORS 3 | 4 | from app.views import * 5 | from app.database import * 6 | 7 | app = Flask(__name__) 8 | 9 | # Rutas de API-Rest 10 | app.route('/', methods=['GET'])(index) 11 | 12 | # CRUD 13 | app.route('/api/tasks/pending/', methods=['GET'])(get_pending_tasks) 14 | app.route('/api/tasks/completed/', methods=['GET'])(get_completed_tasks) 15 | app.route('/api/tasks/archived/', methods=['GET'])(get_archived_tasks) 16 | 17 | app.route('/api/tasks/fetch/', methods=['GET'])(get_task) 18 | 19 | app.route('/api/tasks/create/', methods=['POST'])(create_task) 20 | app.route('/api/tasks/update/', methods=['PUT'])(update_task) 21 | 22 | app.route('/api/tasks/archive/', methods=['DELETE'])(archive_task) 23 | app.route('/api/tasks/complete/set/', methods=['PUT'])(set_complete_task) 24 | app.route('/api/tasks/complete/reset/', methods=['PUT'])(reset_complete_task) 25 | 26 | create_table_tareas() 27 | 28 | # Conexión a BDD 29 | init_app(app) 30 | 31 | # Cors 32 | CORS(app) 33 | 34 | 35 | if __name__ == '__main__': 36 | app.run(debug=True) -------------------------------------------------------------------------------- /HTML/enlaces.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Enlaces 7 | 8 | 9 |

Hipervínculos

10 |

Un Bloque de texto

11 | 12 |

Ancla

13 | ir al inicio 14 | ir al Parrafo 1 15 | 16 |

Absolutos

17 | Ir a MercadoLibre 18 | 19 |

Relativos

20 | Ver foto de perrito 21 | Ir a pagina de enlaces relativos 22 | 23 | 24 | -------------------------------------------------------------------------------- /HTML/enlaces/relativos/ejemplo_rutas_relativas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ejemplo de como "volver" hacia atras usando links relativos 7 | 8 | 9 |

Ejemplo de como "volver" hacia atras usando links relativos

10 | Ir a la pagina de enlaces 11 | 12 | -------------------------------------------------------------------------------- /HTML/estilos.css: -------------------------------------------------------------------------------- 1 | section { 2 | background-color: blue; 3 | } -------------------------------------------------------------------------------- /HTML/etiquetas_semanticas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Etiquetas semanticas 7 | 8 | 9 |
10 |

Etiquetas Semanticas

11 | 12 | 19 |
20 | 21 |
22 |
23 |

Seccion 1

24 |
Articulo 1
25 |
Articulo 2
26 |
Articulo 3
27 |
28 |
29 |

Seccion 2

30 |
Articulo 4
31 |
Articulo 5
32 |
Articulo 6
33 | 34 |
35 |

Visto recientemente

36 | 37 |

Descripcion del producto

38 |

Precio

39 |

envio full

40 |
41 |
42 |
43 | 44 |
45 |

2024 - Codo a codo - Todos los derechos reservados

46 |
47 | 48 | -------------------------------------------------------------------------------- /HTML/favicon.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Favicon 8 | 9 | 10 |

Favicon

11 | 12 | -------------------------------------------------------------------------------- /HTML/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/HTML/favicon.png -------------------------------------------------------------------------------- /HTML/formularios.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Formularios 7 | 8 | 17 | 18 | 19 |

Formularios

20 | 21 |
22 |
23 | Datos Personales 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
42 | 43 |
44 | Comida Favorita 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |
54 | 55 |
56 | Medios de transporte 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 |
67 | 68 |
69 | Otros 70 | 71 | 72 | 73 | 74 | 79 | 80 |
81 | 82 |
83 | Acciones 84 | 85 | 86 |
87 |
88 | 89 | -------------------------------------------------------------------------------- /HTML/iframes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | iframes 7 | 8 | 9 |

iframes

10 |

Mapa de google

11 | 12 | 13 | 14 |

Video de Youtube

15 | 16 | 17 | ir a video YT 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /HTML/imagenes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Imagenes 7 | 8 | 9 |

Imagenes

10 | 11 | La imagen de un gatito 12 | La imagen del mismo gatito 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /HTML/img/Gatitos/Gatito.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/HTML/img/Gatitos/Gatito.png -------------------------------------------------------------------------------- /HTML/img/Perritos/perrito.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/HTML/img/Perritos/perrito.jpg -------------------------------------------------------------------------------- /HTML/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hola Mundo HTML 6 | 7 | 8 |

Mi primer sitio web

9 |

10 | Aprendiendo uso de etiquetas en HTML. 11 |

12 | 13 | -------------------------------------------------------------------------------- /HTML/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ejemplo creado usando el shortuct de emmet 7 | 8 | 9 |

10 | para crearlo escribimos el caracter ! y apretamos enter. 11 |

12 | 13 | -------------------------------------------------------------------------------- /HTML/intro_css.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Intro a Css 7 | 8 | 9 | 10 | 16 | 17 | 18 |
19 |

Introduccion a CSS

20 |
21 |
22 |

23 | CSS - Cascade Style Sheets 24 |

25 | 26 |
Articulo 1
27 |
Articulo 2
28 |
Articulo 3
29 |
Articulo 4
30 | 31 |
Seccion 1
32 |
Seccion 2
33 |
Seccion 3
34 | 35 | 36 |
37 |
38 | 39 | -------------------------------------------------------------------------------- /HTML/listas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Listas ordenadas y no ordenadas 7 | 8 | 9 |

Listas

10 |

Ordenadas

11 |

Como hacer una pizza

12 |
    13 |
  1. Harina
    2. 14 |
  2. salsa
    3. 15 |
  3. queso
    4. 16 |
  4. horno
    5. 17 |
18 |

No Ordenadas

19 |

Vehiculos

20 |
    21 |
  • Auto
    • 22 |
  • Moto
    • 23 |
  • Bici
    • 24 |
25 | 26 |

Dependientes

27 |
    28 |
  • Lunes 29 |
      30 |
    • Mañana
      • 31 |
    • Tarde
      • 32 |
    • Noche
      • 33 |
    34 |
    • 35 |
  • Martes
    • 36 |
  • Miercoles
    • 37 |
38 | 39 |

Listas de definicion

40 |
41 |
Comidas
42 |
Pizza
43 |
Empanadas
44 |
Milanesas
45 |
46 | 47 | -------------------------------------------------------------------------------- /HTML/pages/clase_3/ejemplo_clase3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Acceso a una imagen en otro directorio 7 | 8 | 9 |

Acceso a una imagen en otro directorio

10 | 11 | 12 | -------------------------------------------------------------------------------- /HTML/tablas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tablas 7 | 8 | 14 | 15 | 16 | 17 |

Tablas

18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
codigoproductocosto
1Moto1000
2Bici500
3Auto2000
41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 |
12
456
89
57 | 58 | 59 | -------------------------------------------------------------------------------- /JS/pages/DOM_eventos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DOM y eventos 7 | 12 | 13 | 14 |

DOM y eventos

15 | 16 |
17 |

Titulo

18 | Link 1 19 |
20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /JS/pages/alerta_confirm_prompt.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Alertas confirmaciones y prompts 7 | 8 | 9 |

Alertas confirmaciones y prompts

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /JS/pages/arrays.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Arrays 7 | 8 | 9 |

Arrays

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /JS/pages/ejemplo_DOM_API.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Ejemplo Manejo del DOM + API 7 | 47 | 48 | 49 |

Ejemplo Manejo del DOM + API

50 | 51 |
52 |
53 | 54 |

55 |
56 | 57 |
58 |
59 |
60 | 61 | 62 |
63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /JS/pages/estructuras_control_if.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Estructuras de control: IF 7 | 8 | 9 |

Estructuras de control: IF

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /JS/pages/estructuras_control_loops.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Estructuras de control: Loops 7 | 8 | 9 |

Estructuras de control: Loops

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /JS/pages/estructuras_control_switch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Estructuras de control: Switch 7 | 8 | 9 |

Estructuras de control: Switch

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /JS/pages/funciones.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Funciones 7 | 8 | 9 |

Funciones

10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /JS/pages/introduccion.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hola mundo JS 7 | 8 | 9 |

Introduccion a Javascript

10 | 11 | 12 | 13 | 16 | 17 | -------------------------------------------------------------------------------- /JS/pages/json.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Json 7 | 8 | 9 |

Json

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /JS/pages/objetos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Objetos 7 | 8 | 9 |

Objetos

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /JS/pages/operadores_aritmeticos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Operadores Aritmeticos 7 | 8 | 9 |

Operadores Aritmeticos

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /JS/pages/operadores_comparacion.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Operadores de comparacion 7 | 8 | 9 |

Operadores de comparacion

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /JS/pages/operadores_logicos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Operadores lógicos 7 | 8 | 9 |

Operadores lógicos

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /JS/pages/scope.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Scope 7 | 8 | 9 |

Scope

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /JS/pages/tipos_dato.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tipos de dato 7 | 8 | 9 |

Tipos de dato

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /JS/pages/variables.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Variables 7 | 8 | 9 |

Variables

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /JS/src/alerta_confirm_prompt.js: -------------------------------------------------------------------------------- 1 | alert("Este mensaje informativo solo puede ser visto"); 2 | 3 | let respuesta = confirm("Estas seguro?"); 4 | console.log(respuesta); 5 | 6 | numero = Number.parseInt(prompt("por favor ingrese un numero")); // Casteo explicito 7 | console.log(numero, typeof numero); -------------------------------------------------------------------------------- /JS/src/arrays.js: -------------------------------------------------------------------------------- 1 | // Creación 2 | // 0 1 2 3 4 5 6 3 | let nota_alumnos = [10, 7, 5, 9, 8, 1, 6]; 4 | 5 | // Las listas pueden poseer valores de cualquier tipo 6 | let lista_random = [1, .5, "hola", false, null, undefined, x => x**2, [1,2,3]] 7 | 8 | // formas de acceso 9 | console.log(nota_alumnos); 10 | console.log("primero: " + nota_alumnos[0]); // Obtengo el primero 11 | console.log("ultimo: "+ nota_alumnos[nota_alumnos.length - 1]); // Obtengo el ultimo 12 | 13 | // longitud 14 | console.log(nota_alumnos.length); 15 | 16 | // Acceso a valores fuera de rango 17 | console.log(nota_alumnos[8]); 18 | 19 | // sort 20 | console.log(nota_alumnos); 21 | 22 | // Le paso un criterio de ordenamiento como una función flecha 23 | nota_alumnos.sort((a, b) => b - a); 24 | console.log(nota_alumnos); 25 | 26 | // Modificación 27 | nota_alumnos[0] = 5; 28 | console.log(nota_alumnos); 29 | 30 | // Agregar y quitar 31 | 32 | // agregar fuera de rango 33 | nota_alumnos[10] = 6.5; 34 | console.log(nota_alumnos); 35 | 36 | // Agregar al final 37 | nota_alumnos.push(7.5); 38 | nota_alumnos.push(8.5); 39 | console.log(nota_alumnos); 40 | 41 | // Quito el ultimo elemento 42 | nota_alumnos.pop(); 43 | nota_alumnos.pop(); 44 | nota_alumnos.pop(); 45 | 46 | console.log(nota_alumnos); 47 | 48 | // recorrer 49 | 50 | nota_alumnos = [5, 6, 7, 8, 9, 10]; 51 | 52 | // for "clasico" 53 | // 0 1 2 3 (4) 54 | // ej: [6,7,8,9] 55 | for(let i = 0; i < nota_alumnos.length; i++){ 56 | console.log("La nota del alumno N°: " + (i + 1) + " es " + nota_alumnos[i]); 57 | } 58 | 59 | // for of (for each) 60 | for (let nota of nota_alumnos) { 61 | console.log(nota); 62 | } -------------------------------------------------------------------------------- /JS/src/dom_eventos.js: -------------------------------------------------------------------------------- 1 | let original = document.querySelector("#Original"); 2 | let contenedor = document.querySelector("#Contenedor"); 3 | 4 | console.log(original); 5 | console.log(contenedor); 6 | 7 | let botonAgregar = document.querySelector("#Agregar"); 8 | let botonQuitar = document.querySelector("#Quitar"); 9 | 10 | original.querySelector("h2").innerHTML = "Este titulo fue modificado por JS"; 11 | 12 | let copia = original.cloneNode(true); 13 | 14 | original.remove(); 15 | 16 | copia.style.backgroundColor = '#f00'; 17 | copia.style.padding = '15px'; 18 | 19 | function AgregarArticulo() { 20 | contenedor.appendChild(copia.cloneNode(true)); 21 | } 22 | 23 | function QuitarArticulo() { 24 | if(contenedor.childElementCount > 0){ 25 | contenedor.removeChild(contenedor.lastChild); 26 | } 27 | } 28 | 29 | // Eventos 30 | botonAgregar.addEventListener("click", function(){ 31 | AgregarArticulo(); 32 | }); 33 | 34 | botonQuitar.addEventListener("click", function(){ 35 | QuitarArticulo(); 36 | }); 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /JS/src/ejemplo_DOM_API.js: -------------------------------------------------------------------------------- 1 | let original = document.querySelector("#Plantilla"); 2 | let contenedor = document.querySelector("#Contenedor"); 3 | 4 | let botonAgregar = document.querySelector("#Agregar"); 5 | let botonQuitar = document.querySelector("#Quitar"); 6 | 7 | let referencia = original.cloneNode(true); 8 | 9 | original.remove(); 10 | 11 | function AgregarArticulo() { 12 | fetch("https://randomuser.me/api") 13 | .then(response => response.json()) 14 | .then(data => { 15 | // Procesamiento de la info que llega de la API 16 | 17 | console.log(data.results[0].name.first + " " + data.results[0].name.last); 18 | 19 | console.log(data.results[0].picture.large); 20 | 21 | let nuevaPersona = referencia.cloneNode(true); 22 | 23 | nuevaPersona.querySelector("img").src = data.results[0].picture.large; 24 | nuevaPersona.querySelector("img").alt = "Foto CV"; 25 | nuevaPersona.querySelector("p").innerHTML = data.results[0].name.first + " " + data.results[0].name.last; 26 | 27 | contenedor.appendChild(nuevaPersona); 28 | }) 29 | .catch(error => console.log("Ocurrió un error! " + error)); 30 | } 31 | 32 | function QuitarArticulo() { 33 | if(contenedor.childElementCount > 0){ 34 | contenedor.removeChild(contenedor.lastChild); 35 | } 36 | } 37 | 38 | // Eventos 39 | botonAgregar.addEventListener("click", function(){ 40 | AgregarArticulo(); 41 | }); 42 | 43 | botonQuitar.addEventListener("click", function(){ 44 | QuitarArticulo(); 45 | }); 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /JS/src/estructuras_control_if.js: -------------------------------------------------------------------------------- 1 | let a = false; // Tiene titulo 2 | let b = true; // Mayor de edad 3 | 4 | // Puede la persona entrar a Codo a codo? 5 | if(a && b) { 6 | console.log("La persona SI está habilitada para entrar a Cac"); 7 | 8 | } else { 9 | 10 | console.log("La persona NO está habilitada para entrar a Cac"); 11 | } 12 | 13 | // la clausula else es opcional 14 | if(8 == 10) { 15 | console.log("Condicion Verdadera"); 16 | } 17 | 18 | /* 19 | Martin, un joven programador que se dirije a la cocina. 20 | Al pasar martin se pregunta dos cosas, si tiene hambre y si tene ganas de comer. 21 | 22 | Si tiene hambre y ganas de comer: se arma un sanguche. 23 | Si no tiene hambre y no tiene ganas de comer: se va dormir. 24 | Si tiene hambre y no tiene ganas de comer: se hace un té. 25 | Si no tiene hambre y si tiene ganas de comer: se come una mandarina. 26 | */ 27 | 28 | 29 | console.log("ADIOS"); -------------------------------------------------------------------------------- /JS/src/estructuras_control_loops.js: -------------------------------------------------------------------------------- 1 | let valor = 0; 2 | 3 | while(valor < 10) { 4 | console.log(valor); 5 | valor++; 6 | } 7 | 8 | console.log("for ------------------------------------------") 9 | 10 | console.log("while con prompt ------------------------------------------") 11 | 12 | let continuar = true; 13 | 14 | while(continuar) { 15 | let respuesta = Number.parseInt(prompt("Ingrese un numero del 1 al 10")); 16 | 17 | if(respuesta >= 1 && respuesta <= 10) { 18 | continuar = false; 19 | 20 | } else { 21 | console.log("El valor ingresado es incorrecto"); 22 | } 23 | } 24 | 25 | // for(valor inicial; condicion; incremento / decremento) 26 | for(i = 0; i < 10; i++){ 27 | console.log(i); 28 | } 29 | 30 | console.log("for con listas ------------------------------------------") 31 | 32 | let lista = ["Carlos", "Maria", "Jose", "Gaston", "Lucia", "Mario"] 33 | 34 | for(i = 0; i < lista.length; i++){ 35 | console.log(lista[i]); 36 | } 37 | 38 | console.log("do while ------------------------------------------") 39 | let condicion = false; 40 | 41 | // me garantiza 0 o más ejecuciones 42 | while(condicion){ 43 | console.log("Estoy dentro del while"); 44 | } 45 | 46 | // me garantiza 1 o más ejecuciones 47 | do { 48 | console.log("Estoy dentro del do while"); 49 | }while(condicion); 50 | 51 | console.log("Adios"); -------------------------------------------------------------------------------- /JS/src/estructuras_control_switch.js: -------------------------------------------------------------------------------- 1 | let valor = Number.parseInt(prompt("Ingrese un numero")); 2 | 3 | switch (valor){ 4 | case 1: 5 | console.log("Lunes"); 6 | break; 7 | 8 | case 2: 9 | console.log("Martes"); 10 | break; 11 | 12 | case 3: 13 | console.log("Miercoles"); 14 | break; 15 | 16 | case 4: 17 | console.log("Jueves"); 18 | break; 19 | 20 | case 5: 21 | console.log("Viernes"); 22 | break; 23 | 24 | case 6: 25 | console.log("Sabado"); 26 | break; 27 | 28 | case 7: 29 | console.log("Domingo"); 30 | break; 31 | 32 | default: 33 | console.log("El valor no presentra un día"); 34 | break; 35 | } 36 | 37 | console.log("Adios"); -------------------------------------------------------------------------------- /JS/src/funciones.js: -------------------------------------------------------------------------------- 1 | function calcular_promedio() { 2 | let suma = 0; 3 | let cantidad = 0; 4 | let continuar = true; 5 | 6 | while(continuar) { 7 | let respuesta = prompt("Ingrese un numero"); 8 | 9 | if (respuesta == "salir") { 10 | // Corto abruptamente el while 11 | break; 12 | } 13 | 14 | suma += Number.parseInt(respuesta); // sintaxis equivalente: suma = suma + respuesta; 15 | cantidad++; 16 | } 17 | 18 | let promedio = suma / cantidad; 19 | 20 | console.log(promedio); 21 | } 22 | 23 | function calculo_iva(costo) { 24 | console.log("Calculando costo final:"); 25 | return costo * 1.21; 26 | } 27 | 28 | let bici = 1000; 29 | let moto = 5000; 30 | let auto = 25000; 31 | 32 | console.log(calculo_iva(bici)); 33 | console.log(calculo_iva(moto)); 34 | console.log(calculo_iva(auto)); 35 | 36 | // funciones flecha (tambien llamadas lambda) 37 | var cuadrado = x => x ** 2; 38 | 39 | console.log(cuadrado(4)); 40 | -------------------------------------------------------------------------------- /JS/src/introduccion.js: -------------------------------------------------------------------------------- 1 | console.log("Hola mundo JS"); 2 | console.log(2 + 2); 3 | 4 | /* 5 | 6 | Esto es un comentario de bloque 7 | 8 | */ 9 | 10 | 11 | // Comentario de linea -------------------------------------------------------------------------------- /JS/src/json.js: -------------------------------------------------------------------------------- 1 | // Creo un objeto (tambien llamado array asociativo | En python se los llama diccionarios) 2 | // Los elementos no están ordenados 3 | // JSON Javascript Object Notation 4 | 5 | let persona = { 6 | nombre: "Carlos", 7 | apellido: "Lopez", 8 | dni: 1234, 9 | cuota_al_dia: true, 10 | 11 | curso: { 12 | turno: "Manaña", 13 | comision: 24264, 14 | nombre: "Fullstack Python", 15 | notas: [7,8,9,10] 16 | }, 17 | 18 | titulo: null, 19 | 20 | mejores_amigos: ["Maria", "Gaston"] 21 | }; 22 | 23 | // API - Application Programming Interface 24 | // Consumiendo una API 25 | 26 | fetch("https://randomuser.me/api") 27 | .then(response => response.json()) 28 | .then(data => { 29 | // Procesamiento de la info que llega de la API 30 | console.log(data); 31 | }) 32 | .catch(error => console.log("Ocurrió un error! " + error)); 33 | 34 | 35 | /* fuentes 36 | Fetch: 37 | - https://developer.mozilla.org/es/docs/Web/API/Fetch_API/Using_Fetch 38 | 39 | GET a un repo con github pages: 40 | - https://medium.com/@peternjuguna76/hosting-a-json-file-on-github-pages-a-step-by-step-guide-52105a5a393a 41 | - https://stackoverflow.com/questions/39199042/serve-json-data-from-github-pages 42 | 43 | APIS: 44 | (Movies) https://developer.themoviedb.org/docs/getting-started 45 | (Harry Potter) - Suspendida - https://hp-api.onrender.com/ 46 | (Pokemon) https://pokeapi.co/ 47 | (Listado de APIS) https://github.com/public-apis/public-apis 48 | (Dragon Ball API) https://web.dragonball-api.com/ 49 | (Random user) https://randomuser.me/api 50 | */ 51 | 52 | // https://username.github.io/reponame/file.json 53 | 54 | fetch("https://lucianopueyo.github.io/Codo-a-codo-Fullstack-24264/datos.json") 55 | .then(response => response.json()) 56 | .then(data => { 57 | // Procesamiento de la info que llega de la API 58 | console.log(data); 59 | }) 60 | .catch(error => console.log("Ocurrió un error! " + error)); 61 | 62 | fetch("https://dragonball-api.com/api/characters/1") 63 | .then(response => response.json()) 64 | .then(data => { 65 | // Procesamiento de la info que llega de la API 66 | console.log(data); 67 | }) 68 | .catch(error => console.log("Ocurrió un error! " + error)); 69 | -------------------------------------------------------------------------------- /JS/src/objetos.js: -------------------------------------------------------------------------------- 1 | class Persona { 2 | constructor(nombre, apellido, dni){ 3 | // Atributos 4 | this.nombre = nombre; 5 | this.apellido = apellido; 6 | this.dni = dni; 7 | } 8 | 9 | // metodos 10 | Presentar() { 11 | return "Mi nombre es: " + this.nombre + " " + this.apellido + " dni: " + this.dni; 12 | } 13 | } 14 | 15 | let persona1 = new Persona("Carlos", "Lopez", 1234); // Instanciar una clase 16 | let persona2 = new Persona("Maria", "Del Cerro", 5678); 17 | let persona3 = new Persona("Jose", "Perez", 7892); 18 | 19 | let lista_personas = [persona1, persona2, persona3]; 20 | 21 | // Accedo a los atributos individuales 22 | console.log(persona1.nombre); 23 | console.log(persona1.apellido); 24 | console.log(persona1.dni); 25 | 26 | console.log(persona1.Presentar()); 27 | console.log(persona2.Presentar()); 28 | console.log(persona3.Presentar()); 29 | -------------------------------------------------------------------------------- /JS/src/operadores_aritmeticos.js: -------------------------------------------------------------------------------- 1 | a = 4 2 | b = 0.5 3 | 4 | // Suma 5 | console.log(a + b); 6 | console.log("Hola " + "Como estas"); 7 | console.log("El resultado de a + b es: " + (10 + 10)); // Casteo implicito 8 | 9 | // Resta 10 | console.log(a - b); 11 | 12 | // Multiplicacion 13 | console.log(a * b); 14 | 15 | // Exponenciacion 16 | console.log(4 ** 2); 17 | console.log(4 ** 0.5); 18 | 19 | // Division 20 | console.log(a / b); 21 | console.log(a / 0); 22 | 23 | // Modulo (resto de la division) 24 | console.log(5 % 2); 25 | 26 | a++; 27 | console.log(a); 28 | 29 | a--; 30 | console.log(a); -------------------------------------------------------------------------------- /JS/src/operadores_comparacion.js: -------------------------------------------------------------------------------- 1 | // igualdad y desigualdad 2 | console.log(5 == 4); 3 | console.log(5 != 4); 4 | 5 | console.log(5 == "5"); // Coercion de tipos 6 | console.log(5 === "5"); 7 | 8 | // Mayor y menor 9 | console.log(6 < 10); 10 | console.log(20 > 20); 11 | 12 | // Mayor o igual y menor o igual 13 | console.log(10 < 10); 14 | console.log(10 <= 10); 15 | 16 | console.log(5 > 5); 17 | console.log(5 >= 5); 18 | -------------------------------------------------------------------------------- /JS/src/operadores_logicos.js: -------------------------------------------------------------------------------- 1 | /* 2 | Conjuncion (AND &&) 3 | La operación A && B dara por resultado verdadero únicamente cuando ambos operandos sean verdaderos. Cualquier otro caso, el resultado es falso. 4 | 5 | Puedo entrar a codo a codo? 6 | A tengo titulo 7 | B Soy mayor 8 | 9 | A | B | A && B 10 | 0 | 0 | 0 11 | 0 | 1 | 0 12 | 1 | 0 | 0 13 | 1 | 1 | 1 14 | 15 | Disyunción (OR ||) 16 | La operación A || B dará por resultado verdadero cuando al menos uno de sus operandos sea verdadero. 17 | El único caso donde da falso es cuando ambos operandos son falsos. 18 | 19 | A | B | A || B 20 | 0 | 0 | 0 21 | 0 | 1 | 1 22 | 1 | 0 | 1 23 | 1 | 1 | 1 24 | 25 | Negación (NOT !) (Operador Unario) 26 | Invierte el valor de A. 27 | 28 | A | !A 29 | 0 | 1 30 | 1 | 0 31 | */ 32 | 33 | let a = true; 34 | let b = false; 35 | 36 | console.log(a, b); 37 | console.log(a && b); 38 | console.log(a || b); -------------------------------------------------------------------------------- /JS/src/scope.js: -------------------------------------------------------------------------------- 1 | let a = 15; // variable global 2 | 3 | function funcion_1() { 4 | let b = 20; // variable local 5 | console.log(a); 6 | console.log(b); 7 | } 8 | 9 | funcion_1() 10 | 11 | console.log(a); 12 | console.log(b); -------------------------------------------------------------------------------- /JS/src/tipos_dato.js: -------------------------------------------------------------------------------- 1 | // number 2 | a = 10; // int 3 | b = 5.9; // float 4 | 5 | console.log(0.1 + 0.2); 6 | 7 | // string 8 | c = "Hola como estas 12345 #!%&/"; 9 | 10 | // boolean 11 | d = true; -------------------------------------------------------------------------------- /JS/src/variables.js: -------------------------------------------------------------------------------- 1 | // Crear una variable y asignarle un valor; 2 | let suma = 7 + 4 + 10; 3 | let promedio = suma / 3; 4 | 5 | const IVA = 1.21; 6 | 7 | console.log("Suma: " + suma); 8 | console.log("Promedio: " + promedio); 9 | 10 | suma = 30; 11 | console.log("Suma: " + suma); 12 | 13 | // Tipado dinamico en accion 14 | suma = "Hola como estas, todo bien?"; 15 | console.log(suma); 16 | 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Luciano Pueyo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Presentaciones/31_Flask_Introduccion_Postgres.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/31_Flask_Introduccion_Postgres.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/32_Flask_view_model_Postgres.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/32_Flask_view_model_Postgres.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 0. Presentación del curso Full Stack Python.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 0. Presentación del curso Full Stack Python.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 01. HTML 1.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 01. HTML 1.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 02. HTML 2.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 02. HTML 2.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 03. HTML 3.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 03. HTML 3.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 04. HTML 4.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 04. HTML 4.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 05. CSS 1.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 05. CSS 1.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 06. CSS 2.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 06. CSS 2.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 07. CSS 3.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 07. CSS 3.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 08. CSS 4.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 08. CSS 4.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 09. CSS 5.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 09. CSS 5.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 10. CSS 6.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 10. CSS 6.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 11. Bootstrap.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 11. Bootstrap.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 12. GIT.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 12. GIT.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 13. JS 1.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 13. JS 1.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 14. JS 2.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 14. JS 2.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 15. JS 3.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 15. JS 3.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 16. JS 4.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 16. JS 4.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 17. JS 5.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 17. JS 5.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 18. JS 6.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 18. JS 6.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 22. SQL 1.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 22. SQL 1.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 23. SQL 2.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 23. SQL 2.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 24. SQL 3.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 24. SQL 3.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 25. Python 1.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 25. Python 1.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 26. Python 2.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 26. Python 2.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 27. Python 3.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 27. Python 3.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 28. Python 4.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 28. Python 4.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 29. Python 5.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 29. Python 5.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 30. Python 6.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 30. Python 6.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 31. Python 7.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 31. Python 7.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Clase 32. Python 8.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Clase 32. Python 8.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/Practico Integrador - CaC - FullStack.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/Practico Integrador - CaC - FullStack.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/TIF - CaC - Python.pptx.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/TIF - CaC - Python.pptx.pdf -------------------------------------------------------------------------------- /Presentaciones/TIF-TODO list.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/Presentaciones/TIF-TODO list.pdf -------------------------------------------------------------------------------- /Python/Clases_objetos.py: -------------------------------------------------------------------------------- 1 | class Persona: 2 | def __init__(self, nombre, apellido, dni): 3 | """ 4 | Constructor 5 | """ 6 | self.nombre = nombre 7 | self.apellido = apellido 8 | self.dni = dni 9 | 10 | def presentar(self): 11 | print(f"Hola, mi nombre es {self.nombre} {self.apellido}") 12 | 13 | def caminar(self): 14 | print("caminando") 15 | 16 | def __toString(self): 17 | return f"{self.nombre} {self.apellido} {self.dni}" 18 | 19 | def __repr__(self): 20 | return self.__toString() 21 | 22 | def __str__(self): 23 | return self.__toString() 24 | 25 | 26 | # Instanciando la clase 27 | persona1 = Persona("Carlos", "Lopez", 1234) 28 | persona2 = Persona("Maria", "Del Cerro", 5678) 29 | 30 | # Invoco metodos de las instancias 31 | persona1.presentar() 32 | persona1.caminar() 33 | 34 | persona2.presentar() 35 | persona2.caminar() 36 | 37 | lista1 = [persona1, persona2] 38 | print(lista1) 39 | 40 | print(persona1) 41 | print(persona2) 42 | -------------------------------------------------------------------------------- /Python/colaboracion_clases.py: -------------------------------------------------------------------------------- 1 | class Persona: 2 | mayoria_de_edad = 18 # Atributos de Clase 3 | 4 | def __init__(self, nombre, apellido, edad, dni): 5 | """ 6 | Constructor 7 | """ 8 | 9 | # Atributos de instancia 10 | self.nombre = nombre 11 | self.apellido = apellido 12 | self.edad = edad 13 | self.dni = dni 14 | self.saldo = 0 15 | 16 | def presentar(self): 17 | print(f"Hola, mi nombre es {self.nombre} {self.apellido}") 18 | 19 | def caminar(self): 20 | print("caminando") 21 | 22 | def transaccion(self, monto): 23 | self.saldo += monto 24 | 25 | def esMayorDeEdad(self): 26 | return self.edad >= Persona.mayoria_de_edad 27 | 28 | def __toString(self): # Metodo privado 29 | return f"{self.nombre} {self.apellido} {self.dni}" 30 | 31 | def __repr__(self): 32 | return self.__toString() 33 | 34 | def __str__(self): 35 | return self.__toString() 36 | 37 | 38 | class Banco: 39 | def __init__(self, nombre): 40 | self.nombre = nombre 41 | self.lista_personas = [] 42 | 43 | def registrar_persona(self, persona): 44 | if not persona.esMayorDeEdad(): # Early return 45 | raise ValueError("Solo se pueden registrar personas mayores de edad") 46 | 47 | self.lista_personas.append(persona) 48 | 49 | def contar_personas(self): 50 | return len(self.lista_personas) 51 | 52 | def saldo_total(self): 53 | total = 0 54 | 55 | for persona in self.lista_personas: 56 | total += persona.saldo 57 | 58 | return total 59 | 60 | # Instanciando la clase 61 | persona1 = Persona("Carlos", "Lopez", 25, 1234) 62 | persona2 = Persona("Maria", "Del Cerro", 30, 5678) 63 | persona3 = Persona("Roberto", "Perez", 52, 8901) 64 | 65 | persona1.transaccion(1500) 66 | persona2.transaccion(3000) 67 | persona3.transaccion(5000) 68 | persona3.transaccion(-1000) 69 | 70 | banco1 = Banco("El Banco de Codo a Codo") 71 | 72 | banco1.registrar_persona(persona1) 73 | banco1.registrar_persona(persona2) 74 | banco1.registrar_persona(persona3) 75 | 76 | print(banco1.contar_personas()) 77 | print(banco1.saldo_total()) -------------------------------------------------------------------------------- /Python/diccionarios.py: -------------------------------------------------------------------------------- 1 | """ 2 | Los diccionarios son colecciones de pares clave-valor. 3 | Los diccionarios no tienen orden. 4 | 5 | En un diccionarios las claves son unicas. 6 | 7 | - Crear 8 | 9 | - Acceso 10 | - Modificar 11 | - Agregar 12 | - Eliminar 13 | 14 | - Iterar 15 | 16 | - Existencia 17 | """ 18 | 19 | # Crear 20 | diccionario1 = { 21 | "Carlos": 1234, 22 | "Maria": 5678, 23 | "Jose": 9012 24 | } 25 | 26 | persona1 = { 27 | "Nombre": "Carlos", 28 | "Apellido": "Lopez", 29 | "Edad": 25 30 | } 31 | 32 | persona2 = { 33 | "Nombre": "Maria", 34 | "Apellido": "Del Cerro", 35 | "Edad": 30 36 | } 37 | 38 | # Acceso 39 | print(diccionario1["Carlos"]) 40 | 41 | # Agregar 42 | diccionario1["Gaston"] = 3457 43 | print(diccionario1) 44 | 45 | # Modificar 46 | diccionario1["Gaston"] = 8888 47 | print(diccionario1) 48 | 49 | # Eliminar 50 | del diccionario1["Gaston"] 51 | print(diccionario1) 52 | 53 | # Iterar 54 | # For each 55 | for clave in diccionario1: 56 | print(clave, diccionario1[clave]) 57 | 58 | print("-----------------------------------------") 59 | for clave in diccionario1.keys(): 60 | print(clave, diccionario1[clave]) 61 | 62 | print("-----------------------------------------") 63 | for valor in diccionario1.values(): 64 | print(valor) 65 | 66 | print("-----------------------------------------") 67 | for clave, valor in diccionario1.items(): 68 | print(clave, valor) 69 | 70 | print("Carlos" in diccionario1) 71 | print("Roberto" in diccionario1) 72 | 73 | print(list(diccionario1)) -------------------------------------------------------------------------------- /Python/entrada_datos.py: -------------------------------------------------------------------------------- 1 | print("Calculadora 1.0 ") 2 | a = int(input("Ingrese un numero: ")) 3 | b = int(input("Ingrese otro: ")) 4 | 5 | print(a + b) -------------------------------------------------------------------------------- /Python/estructuras_control_for.py: -------------------------------------------------------------------------------- 1 | # For "Clasico" 2 | 3 | # Los rangos funcionan de forma que el "desde es inclusive" y el "hasta es no inclusive" - [Desde, hasta) 4 | for i in range(10): 5 | print(i) 6 | 7 | print("-" * 15) 8 | for i in range(0, 10, 2): 9 | print(i) 10 | -------------------------------------------------------------------------------- /Python/estructuras_control_if.py: -------------------------------------------------------------------------------- 1 | condicion = True 2 | 3 | if condicion: 4 | print("La condicion es verdadera") 5 | 6 | condicion2 = True 7 | if condicion2: 8 | print("La condicion 2 es verdadera") 9 | 10 | else: 11 | print("La condicion es falsa") 12 | 13 | # Python hasta hace poco, no tenia switch 14 | dia = 17 15 | 16 | if dia == 1: 17 | print("Lunes") 18 | 19 | elif dia == 2: 20 | print("Martes") 21 | 22 | elif dia == 3: 23 | print("Miercoles") 24 | 25 | elif dia == 4: 26 | print("Jueves") 27 | 28 | elif dia == 5: 29 | print("Viernes") 30 | 31 | elif dia == 6: 32 | print("Sabado") 33 | 34 | elif dia == 7: 35 | print("Domingo") 36 | 37 | else: 38 | print("Eso no es un día") -------------------------------------------------------------------------------- /Python/estructuras_control_while.py: -------------------------------------------------------------------------------- 1 | seguir = True 2 | contador = 0 3 | 4 | while seguir: 5 | print(contador) 6 | contador += 1 7 | 8 | if(contador == 10): 9 | break 10 | 11 | print("Adios") 12 | -------------------------------------------------------------------------------- /Python/funciones.py: -------------------------------------------------------------------------------- 1 | def calcular_iva(costo): 2 | return costo * 1.21 3 | 4 | 5 | bici = 1000 6 | moto = 5000 7 | auto = 25000 8 | 9 | print(calcular_iva(bici)) 10 | print(calcular_iva(moto)) 11 | print(calcular_iva(auto)) 12 | 13 | 14 | def division_con_validacion(): 15 | """ 16 | Funcion que pide dos parametros por consola y muestra la division. 17 | Valida que el divisor sea distitnto de 0. 18 | """ 19 | seguir = True 20 | 21 | while seguir: 22 | print("------------------") 23 | print("Calculadora v2000") 24 | a = int(input("ingrese un valor: ")) 25 | b = int(input("ingrese otro valor: ")) 26 | 27 | if b != 0: 28 | break 29 | 30 | else: 31 | print("Por favor ingrese un divisor distinto de 0") 32 | 33 | print(a / b) 34 | 35 | division_con_validacion() 36 | 37 | cuadrado = lambda x : x ** 2 38 | print(cuadrado(2)) 39 | -------------------------------------------------------------------------------- /Python/herencia.py: -------------------------------------------------------------------------------- 1 | from abc import ABC, abstractmethod 2 | 3 | #ABC = ABSTRACT BASE CLASS 4 | 5 | class Persona(ABC): 6 | def __init__(self, nombre, apellido, dni): 7 | self.nombre = nombre 8 | self.apellido = apellido 9 | self.dni = dni 10 | 11 | # Validar nombre apellido dni 12 | 13 | # Metodo Abstracto 14 | @abstractmethod 15 | def presentar(self): 16 | pass 17 | 18 | def __toString(self): 19 | return f"{self.nombre} {self.apellido} {self.dni}" 20 | 21 | def __repr__(self): 22 | return self.__toString() 23 | 24 | def __str__(self): 25 | return self.__toString() 26 | 27 | 28 | class Empleado(Persona): 29 | def __init__(self, nombre, apellido, dni, CUIT): 30 | super().__init__(nombre, apellido, dni) 31 | self.CUIT = CUIT 32 | 33 | def presentar(self): 34 | print(f"Hola, soy el empleado: {self.nombre} {self.apellido} CUIT: {self.CUIT}") 35 | 36 | def vender(self): 37 | print("Se efectuó una venta") 38 | 39 | 40 | class Cliente(Persona): 41 | def __init__(self, nombre, apellido, dni, codigo_cliente): 42 | super().__init__(nombre, apellido, dni) 43 | self.codigo_cliente = codigo_cliente 44 | 45 | def presentar(self): 46 | print(f"Hola, soy el cliente: {self.nombre} {self.apellido} Codigo de cliente: {self.codigo_cliente}") 47 | 48 | def comprar(self): 49 | print("Se efectuó una compra") 50 | 51 | 52 | #persona1 = Persona("Roberto", "Perez", 7891) 53 | 54 | empleado1 = Empleado("Carlos", "Lopez", 1234, 10001234) 55 | cliente1 = Cliente("Maria", "Del Cerro", 5678, 'A5678') 56 | 57 | empleado1.presentar() 58 | cliente1.presentar() 59 | 60 | empleado1.vender() 61 | cliente1.comprar() -------------------------------------------------------------------------------- /Python/hola_mundo.py: -------------------------------------------------------------------------------- 1 | print("Hola Mundo Python") 2 | 3 | # Esto es un comentario de linea 4 | 5 | # En python no existe el comentario de bloque como tal 6 | 7 | """ 8 | String multilinea 9 | 10 | Docstrings 11 | 12 | Si bien esto no es un comentario, se usa como tal. 13 | """ -------------------------------------------------------------------------------- /Python/listas.py: -------------------------------------------------------------------------------- 1 | """ 2 | Las listas con una coleccion de elementos ordenados. 3 | 4 | Las acciones mas comunes son: 5 | 6 | - Crear 7 | 8 | - Acceso 9 | - Modificar 10 | - Agregar 11 | - Eliminar 12 | 13 | - Iterar 14 | 15 | - Existencia 16 | 17 | - Ordenar 18 | """ 19 | 20 | # Crear 21 | lista1 = [1,2,3, "Hola", True, 5.1, 6+1j, [5,6,7], None] 22 | lista2 = [] 23 | lista3 = list() 24 | 25 | # 0 1 2 26 | # -3 -2 -1 27 | alumnos = ["Carlos", "Maria", "Jose"] 28 | 29 | # consultar el tamaño de una coleccion 30 | print(len(alumnos)) 31 | 32 | # Acceso 33 | print(alumnos[0]) # Primer elemento 34 | 35 | # Indices negativos 36 | print(alumnos[-1]) # Ultimo elemento 37 | 38 | # Fuera de rango! 39 | # alumnos[8] 40 | 41 | # Modificar 42 | 43 | print(alumnos) 44 | alumnos[2] = "Roberto" 45 | print(alumnos) 46 | 47 | # Agregar 48 | alumnos.append("Luisa") # Agregar al final 49 | print(alumnos) 50 | 51 | alumnos.insert(2, "Gaston") # Agrego en el indice 2 52 | print(alumnos) 53 | 54 | # Quitar 55 | alumnos.pop() # Quita el ultimo 56 | print(alumnos) 57 | 58 | alumnos.pop() 59 | print(alumnos) 60 | 61 | alumnos.pop(1) #Quita por indice 62 | print(alumnos) 63 | 64 | numeros = [10, 20, 30, 10] 65 | 66 | print(numeros) 67 | numeros.remove(10) 68 | print(numeros) 69 | 70 | # Iterar 71 | # For "Clasico" 72 | 73 | # 0 1 2 3 4 74 | notas = [7.5, 10.0, 8.33, 4.0, 6.5] 75 | 76 | for i in range(len(notas)): 77 | print(notas[i]) 78 | 79 | print("------------------------------") 80 | # For Each 81 | for nota in notas: 82 | print(nota) 83 | 84 | # Existencia 85 | alumnos = ["Carlos", "Maria", "Jose", "Gaston"] 86 | print("Carlos" in alumnos) 87 | print("carlos" in alumnos) 88 | 89 | # Ordenar 90 | numeros = [1,9,2,8,3,7,4,6,5,0] 91 | 92 | print(numeros) 93 | 94 | numeros.sort() 95 | print(numeros) 96 | 97 | numeros.sort(reverse=True) 98 | print(numeros) 99 | -------------------------------------------------------------------------------- /Python/operadores_aritmeticos.py: -------------------------------------------------------------------------------- 1 | # Aritmeticos 2 | print(7 + 8) # suma 3 | print(3 - 5) # Resta 4 | print(3 * 4) # Multiplicacion 5 | 6 | print(7 / 5) # Division real 7 | print(7 // 5) # Division entera 8 | print(5 % 2) # Resto de la division 9 | 10 | print(2 ** 2) # Potencia 11 | print(2 ** 0.5) # Raiz cuadrada 12 | 13 | suma = 7 + (10*5 - 8/2) 14 | print("La variable es de tipo: " + str(type(suma))) # Casteo explicito 15 | print("Hola ", suma) # Separo los valores dentro del print con comas 16 | print(f"El costo final es de: ${suma} pesos argentinos") # uso f string 17 | 18 | # Comparando con el mismo resultado concatenando y casteando 19 | print("El costo final es de: $" + str(suma) + " pesos argentinos") 20 | -------------------------------------------------------------------------------- /Python/operadores_comparacion.py: -------------------------------------------------------------------------------- 1 | # Mayor, menor, mayor o igual, menor o igual 2 | print(5 > 10, 10 < 20) 3 | print(10 < 10, 10 <= 10) 4 | print(20 > 20, 20 >= 20) 5 | 6 | # Igual, distinto 7 | print("Hola" == "chau", 15 == 15.0, 15 == "15") 8 | print("Celda" != "celda") -------------------------------------------------------------------------------- /Python/operadores_logicos.py: -------------------------------------------------------------------------------- 1 | # AND 2 | """ 3 | A | B | A and B 4 | 0 | 0 | 0 5 | 0 | 1 | 0 6 | 1 | 0 | 0 7 | 1 | 1 | 1 8 | """ 9 | 10 | # OR 11 | """ 12 | A | B | A or B 13 | 0 | 0 | 0 14 | 0 | 1 | 1 15 | 1 | 0 | 1 16 | 1 | 1 | 1 17 | """ 18 | 19 | # NOT 20 | """ 21 | A | not A 22 | 0 | 1 23 | 1 | 0 24 | """ 25 | 26 | a = True 27 | b = False 28 | 29 | print(a and b, a or b, not a) -------------------------------------------------------------------------------- /Python/polimorfismo.py: -------------------------------------------------------------------------------- 1 | class Perro: 2 | def sonido(self): 3 | print("GUAU") 4 | 5 | 6 | class Gato: 7 | def sonido(self): 8 | print("MIAU") 9 | 10 | 11 | class Pato: 12 | def sonido(self): 13 | print("CUACK") 14 | 15 | 16 | perro1 = Perro() 17 | gato1 = Gato() 18 | pato1 = Pato() 19 | 20 | lista_animales = [perro1, gato1, pato1] 21 | 22 | for animal in lista_animales: 23 | animal.sonido() -------------------------------------------------------------------------------- /Python/scope.py: -------------------------------------------------------------------------------- 1 | a = 50 # Variable global 2 | 3 | def funcion1(): 4 | print(a) 5 | b = 20 # Variable Local 6 | 7 | funcion1() -------------------------------------------------------------------------------- /Python/tipos_de_dato.py: -------------------------------------------------------------------------------- 1 | a = 5 # (int) 2 | b = 3.8 # (float) 3 | c = "Hola como estás" # (str) 4 | d = True # (bool) 5 | e = 5+1j # (complex) 6 | f = None # (none) 7 | 8 | # Al igual que en JS, cuando operamos con floats debemos estar atentos al error de representacion 9 | suma = 0.1 + 0.2 10 | print(suma) 11 | 12 | # Conocer el tipo de un dato en una variable 13 | print(type(a), type(b), type(e)) 14 | 15 | # Expresion 16 | suma = 7 + 8 - (5 / 3) 17 | print(suma) 18 | 19 | 20 | condicion = 17 > 9 21 | 22 | if condicion: 23 | print("La condicion es verdadera") 24 | 25 | else: 26 | print("La condicion es falsa") 27 | 28 | print("Adios") 29 | 30 | variable_que_acumula_un_promedio = 8 -------------------------------------------------------------------------------- /Python/tuplas.py: -------------------------------------------------------------------------------- 1 | """ 2 | Las tuplas son muy parecidas a las listas. 3 | Son colecciones INMUTABLES de elementos ordenados. 4 | 5 | Las acciones mas comunes son: 6 | 7 | - Crear 8 | 9 | - Acceso 10 | - Iterar 11 | 12 | - Existencia 13 | """ 14 | # 0 1 2 3 15 | tupla1 = (1,2,3,4) 16 | 17 | # Acceso 18 | print("Primer Elemento", tupla1[0]) 19 | print("Ultimo Elemento", tupla1[-1]) 20 | 21 | # Existencia 22 | print(6 in tupla1) 23 | print(3 in tupla1) 24 | 25 | # Iterar 26 | for i in range(len(tupla1)): 27 | print(tupla1[i]) 28 | 29 | print("---------------------------") 30 | 31 | for numero in tupla1: 32 | print(numero) 33 | 34 | # Checkeando tipos 35 | print(type(tupla1), type([8,7,9])) 36 | 37 | def funcion1(): 38 | return "hola", "Adios" 39 | 40 | resultado = funcion1() 41 | print(resultado, type(resultado)) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Codo-a-codo-Fullstack-24264 2 | Todo el material creado en clase para la comisión 24264 3 | 4 | Comisión: 24264 5 | Cursada: Martes y Jueves 08:00am a 09:30am 6 | Meet: https://meet.google.com/ksw-akzc-dtj 7 | Lista de reproducción: https://www.youtube.com/playlist?list=PLt-b2TBrGUc9TVTyXDVhNvtGdC_ZkRNRp 8 | Formulario de presentismo: https://forms.gle/F4prc6Rwq6QVcD3HA 9 | Consultas: https://forms.gle/DrLfzZMdiPHoCpAz7 10 | Github: https://github.com/LucianoPueyo/Codo-a-codo-Fullstack-24264 -------------------------------------------------------------------------------- /SQL/notas.txt: -------------------------------------------------------------------------------- 1 | Fullstack 2 | Frontend + Backend 3 | 4 | Base datos Relacionales (PostgreSQL) 5 | - DBMS 6 | - Tablas (información neta) 7 | - defino relaciones 8 | 1 a 1 (Detalle de alumno) 9 | 1 a n (Docente a Curso) 10 | n a n (Alumno a Curso) 11 | 12 | - Clave primaria (Primary Key) 13 | Identificador unico dentro de una tabla. 14 | 15 | - Clave Foranea (Foreign Key) 16 | Es un campo dentro de una tabla que referencia a una primary key. 17 | 18 | 19 | - Cliente de base de datos (PGAdmin) | SQL 20 | Denfinir estructuras (tablas) 21 | Manipular la informacion 22 | agregar 23 | modificar 24 | borrar 25 | Consultar datos (Query) 26 | 27 | 28 | -------------------------------------------------------------------------------- /SQL/scripts.sql: -------------------------------------------------------------------------------- 1 | -- Crear tabla Alumno 2 | CREATE TABLE Alumno ( 3 | id SERIAL PRIMARY KEY, 4 | nombre VARCHAR(50) NOT NULL, 5 | apellido VARCHAR(50) NOT NULL, 6 | dni VARCHAR(10) NOT NULL UNIQUE 7 | ); 8 | 9 | -- Crear tabla Docente 10 | CREATE TABLE Docente ( 11 | id SERIAL PRIMARY KEY, 12 | nombre VARCHAR(50) NOT NULL, 13 | apellido VARCHAR(50) NOT NULL, 14 | dni VARCHAR(10) NOT NULL UNIQUE, 15 | cuit VARCHAR(15) NOT NULL UNIQUE 16 | ); 17 | 18 | -- Crear tabla Curso 19 | CREATE TABLE Curso ( 20 | id SERIAL PRIMARY KEY, 21 | nombre VARCHAR(100) NOT NULL, 22 | descripcion TEXT, 23 | turno VARCHAR(20) NOT NULL, 24 | cupos_maximos INT NOT NULL CHECK (cupos_maximos > 0), 25 | docente_id INT, 26 | FOREIGN KEY (docente_id) REFERENCES Docente (id) ON DELETE SET NULL 27 | ); 28 | 29 | CREATE TABLE Inscripcion ( 30 | id SERIAL PRIMARY KEY, 31 | alumno_id INT NOT NULL, 32 | curso_id INT NOT NULL, 33 | fecha_inscripcion DATE NOT NULL DEFAULT CURRENT_DATE, 34 | FOREIGN KEY (alumno_id) REFERENCES Alumno (id) ON DELETE CASCADE, 35 | FOREIGN KEY (curso_id) REFERENCES Curso (id) ON DELETE CASCADE, 36 | UNIQUE (alumno_id, curso_id) -- para evitar duplicados de inscripción 37 | ); 38 | 39 | -- Insertar datos en la tabla Alumno 40 | INSERT INTO Alumno (nombre, apellido, dni) VALUES 41 | ('Juan', 'Pérez', '12345678A'), 42 | ('María', 'Gómez', '23456789B'), 43 | ('Carlos', 'Rodríguez', '34567890C'), 44 | ('Ana', 'López', '45678901D'), 45 | ('Luis', 'Martínez', '56789012E'), 46 | ('Laura', 'García', '67890123F'), 47 | ('Jorge', 'Hernández', '78901234G'), 48 | ('Elena', 'Sánchez', '89012345H'), 49 | ('Miguel', 'Díaz', '90123456I'), 50 | ('Sara', 'Fernández', '01234567J'); 51 | 52 | -- Insertar datos en la tabla Docente 53 | INSERT INTO Docente (nombre, apellido, dni, cuit) VALUES 54 | ('Mario', 'Gutiérrez', '11223344A', '20-11223344-1'), 55 | ('Lucía', 'Jiménez', '22334455B', '20-22334455-2'), 56 | ('Santiago', 'Molina', '33445566C', '20-33445566-3'), 57 | ('Valeria', 'Silva', '44556677D', '20-44556677-4'), 58 | ('Pedro', 'Ruiz', '55667788E', '20-55667788-5'), 59 | ('Camila', 'Torres', '66778899F', '20-66778899-6'), 60 | ('Gabriel', 'Vega', '77889900G', '20-77889900-7'), 61 | ('Daniela', 'Ramos', '88990011H', '20-88990011-8'), 62 | ('Rodrigo', 'Cruz', '99001122I', '20-99001122-9'), 63 | ('Isabel', 'Moreno', '00112233J', '20-00112233-0'); 64 | 65 | -- Insertar datos en la tabla Curso 66 | INSERT INTO Curso (nombre, descripcion, turno, cupos_maximos, docente_id) VALUES 67 | ('Matemáticas Avanzadas', 'Curso avanzado de matemáticas', 'Mañana', 30, 1), 68 | ('Historia del Arte', 'Curso sobre la historia del arte', 'Tarde', 25, 2), 69 | ('Programación en Python', 'Curso de introducción a la programación en Python', 'Noche', 20, 3); 70 | 71 | -- Insertar datos en la tabla Inscripcion 72 | INSERT INTO Inscripcion (alumno_id, curso_id, fecha_inscripcion) VALUES 73 | (1, 1, '2024-01-10'), 74 | (2, 1, '2024-01-11'), 75 | (3, 1, '2024-01-12'), 76 | (4, 2, '2024-01-13'), 77 | (5, 2, '2024-01-14'), 78 | (6, 2, '2024-01-15'), 79 | (7, 3, '2024-01-16'), 80 | (8, 3, '2024-01-17'), 81 | (9, 3, '2024-01-18'), 82 | (10, 3, '2024-01-19'); 83 | 84 | -- Borrar registros 85 | /* 86 | DELETE FROM Alumno WHERE id = 1; 87 | 88 | DELETE FROM Docente WHERE id = 1; 89 | 90 | DELETE FROM Curso WHERE id = 1; 91 | 92 | DELETE FROM Inscripcion WHERE id = 1; 93 | */ 94 | 95 | SELECT * 96 | FROM alumno; 97 | 98 | SELECT * 99 | FROM alumno 100 | where nombre = 'Ana'; 101 | 102 | select id, apellido from alumno; -------------------------------------------------------------------------------- /TODO list app/css/add_task.css: -------------------------------------------------------------------------------- 1 | main { 2 | h2 { 3 | a { 4 | color: var(--secondary); 5 | font-size: 0.75em; 6 | 7 | transition: all 0.2s; 8 | } 9 | 10 | a:hover { 11 | color: var(--main); 12 | } 13 | } 14 | 15 | .tareas { 16 | justify-content: center; 17 | 18 | .tarea{ 19 | form { 20 | flex: 1; 21 | display: flex; 22 | flex-direction: column; 23 | justify-content: flex-start; 24 | align-items: flex-start; 25 | 26 | input { 27 | background-color: rgba(0,0,0,0.1); 28 | border: none; 29 | 30 | padding: var(--min-padding); 31 | width: 100%; 32 | 33 | font-size: 1.17em; 34 | 35 | @media only screen and (max-width: 600px) { 36 | font-size: 1em; 37 | } 38 | 39 | font-weight: 400; 40 | } 41 | 42 | textarea{ 43 | resize: none; 44 | background-color: rgba(0,0,0,0.1); 45 | border: none; 46 | 47 | font-size: 16px; 48 | 49 | @media only screen and (max-width: 600px) { 50 | font-size: 1em; 51 | } 52 | } 53 | } 54 | } 55 | } 56 | } -------------------------------------------------------------------------------- /TODO list app/css/main.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --main: #5900FF; 3 | --main-midtone: #885bdc; 4 | --main-light: #EFE7FF; 5 | --secondary: #FFEFBD; 6 | --secondary-light: #FFF8E4; 7 | --dark: #242424; 8 | --dark-light: #2F2F2F; 9 | 10 | --completed: #a3ffa0; 11 | --archived: #ffa0a0; 12 | 13 | --main-padding: 50px; 14 | --secondary-padding: 25px; 15 | --terciary-padding: 15px; 16 | --min-padding: 10px; 17 | } 18 | 19 | * { 20 | margin: 0; 21 | padding: 0; 22 | 23 | box-sizing: border-box; 24 | } 25 | 26 | html { 27 | scroll-behavior: smooth; 28 | } 29 | 30 | body { 31 | font-family: 'Roboto'; 32 | } 33 | 34 | .light-background { 35 | background-image: url("../resources/img/bg.png"); 36 | } 37 | 38 | .dark-background { 39 | background-image: url("../resources/img/bg_dark.png"); 40 | } 41 | 42 | header { 43 | min-height: 100vh; 44 | 45 | font-weight: normal; 46 | font-size: 50px; 47 | 48 | @media only screen and (max-width: 600px) { 49 | font-size: 25px; 50 | } 51 | 52 | color: var(--dark-light); 53 | 54 | display: flex; 55 | flex-direction: row; 56 | justify-content: flex-start; 57 | align-items: center; 58 | 59 | transition: all 0.1s; 60 | } 61 | 62 | header, main, footer { 63 | padding: var(--main-padding); 64 | 65 | @media only screen and (max-width: 600px) { 66 | padding: var(--secondary-padding); 67 | } 68 | } 69 | 70 | main { 71 | min-height: 100vh; 72 | 73 | display: flex; 74 | flex-direction: column; 75 | justify-content: flex-start; 76 | flex-wrap: wrap; 77 | 78 | h2 { 79 | color: var(--main-light); 80 | font-weight: 200; 81 | } 82 | 83 | .headerActionButton { 84 | color: var(--main-light); 85 | border: none; 86 | 87 | background-color: transparent; 88 | 89 | font-family: 'Roboto'; 90 | font-weight: 200; 91 | font-size: 0.75em; 92 | 93 | transition: all 0.2s; 94 | } 95 | 96 | .headerActionButton.active { 97 | color: var(--secondary); 98 | text-decoration: underline; 99 | } 100 | 101 | .headerActionButton:hover { 102 | color: var(--main); 103 | cursor: pointer; 104 | } 105 | 106 | .tareas { 107 | display: flex; 108 | flex-direction: row; 109 | justify-content: center; 110 | align-items: center; 111 | flex-wrap: wrap; 112 | flex: 1; 113 | gap: var(--main-padding); 114 | 115 | padding: var(--terciary-padding); 116 | 117 | .tareas-container { 118 | display: flex; 119 | flex-direction: row; 120 | justify-content: flex-start; 121 | align-items: center; 122 | flex-wrap: wrap; 123 | gap: var(--main-padding); 124 | } 125 | 126 | .tarea { 127 | position: relative; 128 | 129 | display: flex; 130 | flex-direction: column; 131 | 132 | justify-content: flex-start; 133 | 134 | width: 300px; 135 | height: 400px; 136 | 137 | padding: var(--secondary-padding); 138 | 139 | transition: all 0.1s; 140 | 141 | @media only screen and (max-width: 600px) { 142 | width: 200px; 143 | height: 300px; 144 | 145 | padding: var(--min-padding); 146 | 147 | font-size: 0.75em; 148 | } 149 | 150 | h3 { 151 | padding: var(--min-padding); 152 | 153 | .detalle { 154 | color: gray; 155 | font-size: 0.75em; 156 | } 157 | } 158 | 159 | hr { 160 | width: 100%; 161 | margin: 5px; 162 | } 163 | 164 | .descripcion { 165 | padding: var(--min-padding); 166 | line-height: 1.5em; 167 | 168 | flex: 6; 169 | 170 | width: 100%; 171 | } 172 | 173 | .acciones { 174 | flex: 1; 175 | 176 | display: flex; 177 | flex-direction: row; 178 | justify-content: flex-end; 179 | align-items: center; 180 | 181 | width: 100%; 182 | opacity: 0; 183 | 184 | font-size: 2em; 185 | 186 | @media only screen and (max-width: 600px) { 187 | font-size: 1.7em; 188 | } 189 | 190 | transition: all 0.1s; 191 | 192 | button { 193 | margin: 0 5px; 194 | color: var(--dark); 195 | transition: all 0.2s; 196 | 197 | border: none; 198 | background-color: transparent; 199 | font-size: 1em; 200 | } 201 | 202 | button:hover { 203 | cursor: pointer; 204 | } 205 | 206 | #Crear:hover, 207 | #Completar:hover, 208 | #Pendiente:hover { 209 | color: var(--main); 210 | } 211 | 212 | #Crear:hover { 213 | cursor: pointer; 214 | } 215 | 216 | #Editar:hover { 217 | color: var(--main-midtone); 218 | } 219 | 220 | #Archivar:hover, 221 | #Cancelar:hover { 222 | color: red; 223 | } 224 | } 225 | 226 | .fecha { 227 | position: absolute; 228 | bottom:0; 229 | right: 0; 230 | padding: var(--min-padding); 231 | 232 | font-weight: 400; 233 | font-size: 0.8em; 234 | 235 | @media only screen and (max-width: 600px) { 236 | font-size: 0.6em; 237 | } 238 | } 239 | } 240 | 241 | .tarea.pendiente { 242 | background-color: var(--secondary); 243 | } 244 | 245 | .tarea.completada { 246 | background-color: var(--completed); 247 | } 248 | 249 | .tarea.archivada { 250 | background-color: var(--archived); 251 | } 252 | 253 | .tarea:hover .acciones { 254 | opacity: 100; 255 | } 256 | 257 | .tarea.agregar { 258 | width: unset; 259 | height: unset; 260 | position: sticky; 261 | padding: 0; 262 | bottom: 0; 263 | right: var(--secondary-padding); 264 | z-index: 100; 265 | 266 | background-color: transparent; 267 | transition: all 0.2s; 268 | 269 | display: flex; 270 | justify-content: center; 271 | align-items: center; 272 | 273 | .accion { 274 | color: var(--main-light); 275 | font-size: 4em; 276 | 277 | transition: all 0.2s; 278 | } 279 | 280 | .accion:hover { 281 | color: var(--main); 282 | } 283 | } 284 | } 285 | } 286 | 287 | 288 | footer { 289 | position: fixed; 290 | bottom: 0; 291 | 292 | display: flex; 293 | flex-direction: row; 294 | justify-content: space-between; 295 | align-items: center; 296 | 297 | width: 100%; 298 | 299 | @media only screen and (max-width: 600px) { 300 | font-size: 0.5em; 301 | } 302 | 303 | .firma { 304 | font-weight: 300; 305 | color: var(--main-light); 306 | } 307 | 308 | .sociales { 309 | list-style-type: none; 310 | display: flex; 311 | 312 | flex-direction: row; 313 | justify-content: space-evenly; 314 | align-items: center; 315 | 316 | @media only screen and (max-width: 600px) { 317 | font-size: 1.3em; 318 | } 319 | 320 | a { 321 | font-size: 2em; 322 | color: var(--main-light); 323 | 324 | transition: all 0.1s; 325 | } 326 | 327 | a:hover { 328 | color: var(--main); 329 | } 330 | } 331 | } 332 | 333 | footer.animated { 334 | animation: scroll-color-change linear; 335 | animation-timeline: scroll(); 336 | 337 | .firma { 338 | color: unset; 339 | } 340 | 341 | a { 342 | animation: scroll-color-change linear; 343 | animation-timeline: scroll(); 344 | } 345 | a:hover { 346 | animation: scroll-color-change-inverse linear; 347 | animation-timeline: scroll(); 348 | } 349 | } 350 | 351 | @keyframes scroll-color-change { 352 | from { 353 | color: var(--dark); 354 | } 355 | to { 356 | color: var(--main-light); 357 | } 358 | } 359 | 360 | @keyframes scroll-color-change-inverse { 361 | from { 362 | color: var(--main); 363 | } 364 | } 365 | 366 | .chanfle { 367 | /*Una forma de obtener esquinas a 45 grados*/ 368 | /* https://css-generators.com/custom-corners/ */ 369 | clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); 370 | overflow: hidden; 371 | z-index: 1; 372 | } -------------------------------------------------------------------------------- /TODO list app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Mi Lista de Tareas 1.0 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

21 | Mi Lista
22 | de tareas
23 | pendientes 24 |

25 |
26 | 27 |
28 |

29 | Mis Tareas
30 | 31 | 32 | 33 |

34 |
35 |
36 |
37 |

38 | Tarea 1 39 |

40 |
41 |

42 | Descripcion tarea pendiente 43 |

44 |
45 | 46 | 47 | 48 |
49 | 19/12/24 50 | 51 |
52 |
53 |

54 | Tarea 2 55 | (Completada) 56 |

57 |
58 |

59 | Descripcion tarea completada 60 |

61 |
62 | 63 | 64 |
65 | 19/12/24 66 | 67 |
68 |
69 |

70 | Tarea 2 71 | (Archivada) 72 |

73 |
74 |

75 | Descripcion tarea archivada 76 |

77 |
78 | 79 |
80 | 19/12/24 81 | 82 |
83 |
84 | 89 |
90 |
91 | 92 |
93 |

94 | TODO List V1.0
95 | Codo a Codo
96 | 1er Cuatrimestre 2024 97 |

98 |
    99 |
    • 100 |
    • 101 |
    • 102 |
103 |
104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /TODO list app/js/add_update_task.js: -------------------------------------------------------------------------------- 1 | let submitButton = document.querySelector("#Formulario #Crear"); 2 | 3 | let params = new URLSearchParams(document.location.search); 4 | let task_id = params.get("task_id"); 5 | 6 | function add_new_task(event) { 7 | let data = { 8 | 'nombre': document.querySelector("#Formulario #Titulo").value, 9 | 'descripcion': document.querySelector("#Formulario #Descripcion").value 10 | } 11 | 12 | let url = 'http://localhost:5000/api/tasks/create/'; 13 | 14 | fetchData(url, "POST", () => { 15 | document.querySelector("#Formulario").reset(); 16 | window.location.replace("../index.html#TareasPendientes"); 17 | }, 18 | data); 19 | } 20 | 21 | function update_task(event) { 22 | let data = { 23 | 'nombre': document.querySelector("#Formulario #Titulo").value, 24 | 'descripcion': document.querySelector("#Formulario #Descripcion").value 25 | } 26 | 27 | let url = 'http://localhost:5000/api/tasks/update/' + task_id; 28 | 29 | fetchData(url, "PUT", () => { 30 | document.querySelector("#Formulario").reset(); 31 | window.location.replace("../index.html#TareasPendientes"); 32 | }, 33 | data); 34 | } 35 | 36 | function set_form_readOnly(value) { 37 | let form = document.querySelector("#Formulario"); 38 | var elements = form.elements; 39 | for (input of elements) { 40 | input.readOnly = value; 41 | } 42 | } 43 | 44 | function add_or_update(){ 45 | if(task_id !== null) { 46 | document.querySelector(".actionTitle").innerHTML = "Editar tarea existente"; 47 | 48 | set_form_readOnly(true); 49 | 50 | let url = 'http://localhost:5000/api/tasks/fetch/' + task_id; 51 | fetchData(url, "GET", (data) => { 52 | document.querySelector("#Titulo").value = data.nombre; 53 | document.querySelector("#Descripcion").value = data.descripcion; 54 | document.querySelector("#task_id").value = data.id; 55 | document.querySelector(".fecha").innerHTML = data.fecha_creacion; 56 | 57 | set_form_readOnly(false); 58 | }); 59 | 60 | submitButton.addEventListener("click", update_task); 61 | } else { 62 | submitButton.addEventListener("click", add_new_task); 63 | } 64 | } 65 | 66 | 67 | 68 | add_or_update(); 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /TODO list app/js/ejemplo_fetch_get.js: -------------------------------------------------------------------------------- 1 | // Contenedor donde se dibujan las tareas 2 | let taskContainer = document.querySelector(".tareas-container"); 3 | 4 | // Template de tarea Pendiente 5 | let taskPendingTemplateReference = document.querySelector(".tarea.pendiente.template"); 6 | 7 | // Template de tarea Completada 8 | let taskCompletedTemplateReference = document.querySelector(".tarea.completada.template"); 9 | 10 | // Template de tarea Archivada 11 | let taskArchivedTemplateReference = document.querySelector(".tarea.archivada.template"); 12 | 13 | let pendingTask = taskPendingTemplateReference.cloneNode(true); 14 | let completedTask = taskCompletedTemplateReference.cloneNode(true); 15 | let archivedTask = taskArchivedTemplateReference.cloneNode(true); 16 | 17 | // Quito del documento los templates 18 | taskPendingTemplateReference.remove(); 19 | taskCompletedTemplateReference.remove(); 20 | taskArchivedTemplateReference.remove(); 21 | 22 | fetchData( 23 | "http://localhost:5000/api/tasks/pending/", 24 | "GET", 25 | (data) => { 26 | console.log(data); 27 | 28 | let tareas = []; 29 | 30 | // Recorro la lista de tareas obtenidas 31 | for (const tarea of data) { 32 | console.log(tarea); 33 | 34 | // Duplico la plantilla de tarea pendiente 35 | let newTask = pendingTask.cloneNode(true); 36 | 37 | // Completo la tarea nueva con los datos reales 38 | newTask.querySelector("h3 .titulo").innerHTML = tarea.nombre; 39 | newTask.querySelector(".descripcion").innerHTML = tarea.descripcion; 40 | newTask.querySelector(".fecha").innerHTML = tarea.fecha_creacion; 41 | newTask.querySelector(".task_id").value = tarea.id; 42 | 43 | // Agrego la nueva tarea al listado de tareas para ver en el viewport 44 | tareas.push(newTask); 45 | } 46 | 47 | // Accion doble: 48 | // ReplaceChildren borra todo el contenido interno y agrega lo que yo le diga 49 | taskContainer.replaceChildren(...tareas); 50 | } 51 | ); -------------------------------------------------------------------------------- /TODO list app/js/ejemplo_fetch_post.js: -------------------------------------------------------------------------------- 1 | let submitButton = document.querySelector("#Formulario #Crear"); 2 | 3 | submitButton.addEventListener("click", ()=>{ 4 | let data_post = { 5 | 'nombre': document.querySelector("#Formulario #Titulo").value, 6 | 'descripcion': document.querySelector("#Formulario #Descripcion").value 7 | } 8 | 9 | fetchData( 10 | "http://localhost:5000/api/tasks/create/", 11 | "POST", 12 | (data) => { 13 | document.querySelector("#Formulario").reset(); 14 | window.location.replace("../index.html#TareasPendientes"); 15 | }, 16 | data_post 17 | ); 18 | } 19 | ); 20 | 21 | -------------------------------------------------------------------------------- /TODO list app/js/fetchData.js: -------------------------------------------------------------------------------- 1 | function fetchData(url, method, callback, data = null) { 2 | const options = { 3 | method: method, 4 | headers: { 5 | 'Content-Type': 'application/json', 6 | }, 7 | body: data ? JSON.stringify(data) : null, // Si hay datos, los convierte a JSON y los incluye en el cuerpo 8 | }; 9 | 10 | fetch(url, options) 11 | .then(response => response.json()) 12 | .then(data => { 13 | callback(data); 14 | }) 15 | .catch(error => console.log("Ocurrió un error! " + error)); 16 | } -------------------------------------------------------------------------------- /TODO list app/js/index.js: -------------------------------------------------------------------------------- 1 | // Botones de filtro de tareas 2 | let filterButtons = { 3 | "Pendientes": document.querySelector("#VerPendientes"), 4 | "Completadas": document.querySelector("#VerCompletadas"), 5 | "Archivadas": document.querySelector("#VerArchivadas") 6 | } 7 | 8 | // Contenedor donde se dibujan las tareas 9 | let taskContainer = document.querySelector(".tareas-container"); 10 | 11 | // Template de tarea Pendiente 12 | let taskPendingTemplateReference = document.querySelector(".tarea.pendiente.template"); 13 | 14 | // Template de tarea Completada 15 | let taskCompletedTemplateReference = document.querySelector(".tarea.completada.template"); 16 | 17 | // Template de tarea Archivada 18 | let taskArchivedTemplateReference = document.querySelector(".tarea.archivada.template"); 19 | 20 | // Templates de tareas para clonar al momento de agregar tareas al contenedor 21 | let taskTemplates = { 22 | "Pendiente": taskPendingTemplateReference.cloneNode(true), 23 | "Completada": taskCompletedTemplateReference.cloneNode(true), 24 | "Archivada": taskArchivedTemplateReference.cloneNode(true) 25 | }; 26 | 27 | // Quito del documento los templates 28 | taskPendingTemplateReference.remove(); 29 | taskCompletedTemplateReference.remove(); 30 | taskArchivedTemplateReference.remove(); 31 | 32 | function archiveTask(event) { 33 | let id = event.currentTarget.task_id; 34 | 35 | let url = 'http://localhost:5000/api/tasks/archive/' + id; 36 | 37 | fetchData(url, "DELETE", () => { 38 | location.reload(); 39 | }); 40 | } 41 | 42 | function editTask(event) { 43 | let id = event.currentTarget.task_id; 44 | window.location.replace("pages/add_update_task.html?task_id=" + id); 45 | } 46 | 47 | function completeTask(event) { 48 | let id = event.currentTarget.task_id; 49 | 50 | let url = 'http://localhost:5000/api/tasks/complete/set/' + id; 51 | 52 | fetchData(url, "PUT", () => { 53 | location.reload(); 54 | }); 55 | } 56 | 57 | function toPendingTask(event){ 58 | let id = event.currentTarget.task_id; 59 | 60 | let url = 'http://localhost:5000/api/tasks/complete/reset/' + id; 61 | 62 | fetchData(url, "PUT", () => { 63 | location.reload(); 64 | }); 65 | } 66 | 67 | function loadTasks(task_status) { 68 | let fetch_data = { 69 | 'Pendientes': { 70 | 'URL': 'http://localhost:5000/api/tasks/pending/', 71 | 'TaskTemplatesName': 'Pendiente' 72 | }, 73 | 74 | 'Completadas': { 75 | 'URL': 'http://localhost:5000/api/tasks/completed/', 76 | 'TaskTemplatesName': 'Completada' 77 | }, 78 | 79 | 'Archivadas': { 80 | 'URL': 'http://localhost:5000/api/tasks/archived/', 81 | 'TaskTemplatesName': 'Archivada' 82 | }, 83 | } 84 | 85 | if (!(task_status in fetch_data)){ 86 | throw new Error(`El Parametro: ${task_status} no está definido!`); 87 | } 88 | 89 | fetchData(fetch_data[task_status].URL, "GET", (data) => { 90 | // Procesamiento de la info que llega de la API 91 | let tasks = []; 92 | for (const task of data) { 93 | let newTask = taskTemplates[fetch_data[task_status].TaskTemplatesName].cloneNode(true); 94 | newTask.querySelector("h3 .titulo").innerHTML = task.nombre; 95 | newTask.querySelector(".descripcion").innerHTML = task.descripcion; 96 | newTask.querySelector(".fecha").innerHTML = task.fecha_creacion; 97 | newTask.querySelector(".task_id").value = task.id; 98 | 99 | let archivarAction = newTask.querySelector("#Archivar"); 100 | let editarAction =newTask.querySelector("#Editar"); 101 | let completarAction =newTask.querySelector("#Completar"); 102 | let pasarAPendienteAction =newTask.querySelector("#Pendiente"); 103 | 104 | if (archivarAction) { 105 | archivarAction.addEventListener("click", archiveTask); 106 | archivarAction.task_id = task.id; 107 | } 108 | 109 | if (editarAction) { 110 | editarAction.addEventListener("click", editTask); 111 | editarAction.task_id = task.id; 112 | } 113 | 114 | if (completarAction) { 115 | completarAction.addEventListener("click", completeTask); 116 | completarAction.task_id = task.id; 117 | } 118 | 119 | if (pasarAPendienteAction) { 120 | pasarAPendienteAction.addEventListener("click", toPendingTask); 121 | pasarAPendienteAction.task_id = task.id; 122 | } 123 | 124 | tasks.push(newTask); 125 | } 126 | 127 | taskContainer.replaceChildren(...tasks); 128 | }); 129 | } 130 | 131 | function setActiveFilter(event){ 132 | for (filter in filterButtons) { 133 | filterButtons[filter].classList.remove("active"); 134 | } 135 | 136 | event.currentTarget.classList.add("active"); 137 | 138 | loadTasks(event.currentTarget.filterName); 139 | } 140 | 141 | function setFilters() { 142 | for (button in filterButtons){ 143 | filterButtons[button].addEventListener("click", setActiveFilter); 144 | filterButtons[button].filterName = button; 145 | } 146 | } 147 | 148 | setFilters(); 149 | loadTasks('Pendientes'); -------------------------------------------------------------------------------- /TODO list app/pages/add_update_task.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Agregar Tarea - Mi Lista de Tareas 1.0 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

Agregar nueva tarea
21 | Cancelar 22 |

23 |
24 |
25 |
26 |
27 | 28 |
29 | 30 |
31 | 32 | 33 |
34 | 35 | 36 |
37 |
38 |
39 |
40 |
41 |
42 |

43 | TODO List V1.0
44 | Codo a Codo
45 | 1er Cuatrimestre 2024 46 |

47 |
    48 |
    • 49 |
    • 50 |
    • 51 |
52 |
53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /TODO list app/resources/ico/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/TODO list app/resources/ico/logo.ico -------------------------------------------------------------------------------- /TODO list app/resources/ico/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/TODO list app/resources/ico/logo.png -------------------------------------------------------------------------------- /TODO list app/resources/img/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/TODO list app/resources/img/bg.png -------------------------------------------------------------------------------- /TODO list app/resources/img/bg_dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LucianoPueyo/Codo-a-codo-Fullstack-24264/833ee29cfb4a4d114d655af467ee566760bdf9c3/TODO list app/resources/img/bg_dark.png -------------------------------------------------------------------------------- /datos.json: -------------------------------------------------------------------------------- 1 | { 2 | "personas": [ 3 | "Carlos", 4 | "Maria", 5 | "Jose" 6 | ], 7 | 8 | "turno": "Mañana", 9 | "Comision": 24264 10 | } --------------------------------------------------------------------------------