Skip to content

Commit

Permalink
ya pueeeeee
Browse files Browse the repository at this point in the history
  • Loading branch information
diegovelezg committed Aug 22, 2024
1 parent b64958c commit 89e80f8
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 17 deletions.
20 changes: 10 additions & 10 deletions DEV/00_topics/editors_codepen_ES.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,25 +16,25 @@ Anda al sitio de [CodePen](https://codepen.io/) y crea tu cuenta. Quizás te aco

El único inconveniente es que no hay una versión en castellano ni portugués. Felizmente son pocos elementos de la interfaz con los que tendrás que lidiar. Acá te dejamos capturas de pantalla paso a paso para guiarte.

![](https://github.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-03-11-14-44-08-codePen_01.png)
![](https://raw.githubusercontent.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-03-11-14-44-08-codePen_01.png)

### Crea tu primer "Pen"

En CodePen, se le llaman "Pen" a un proyecto individual que consta de HTML, CSS, y JavaScript. Es básicamente un entorno de desarrollo en línea donde puedes escribir, probar y demostrar fragmentos de código.

Cuando estés lista para comenzar a "codear", crea tu primer "Pen"

![](https://github.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-03-11-14-45-32-codePen_03.png)
![](https://raw.githubusercontent.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-03-11-14-45-32-codePen_03.png)

## Tu primer Pen

Así se verá tu primer "proyecto" completamente en blanco.

![](https://github.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-03-11-14-53-55-codePen_04.png)
![](https://raw.githubusercontent.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-03-11-14-53-55-codePen_04.png)

Ponle un nombre para que te sea fácil identificar qué harás acá.

![](https://github.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-03-11-14-54-34-codePen_05.png)
![](https://raw.githubusercontent.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-03-11-14-54-34-codePen_05.png)

> En CodePen, no necesitas vincular manualmente los archivos de HTML, CSS y JS porque la plataforma lo hace automáticamente por ti. Sólo tienes que escribir el código correspondiente en cada una de las cajas de código (HTML, CSS, JS) en su interfaz. CodePen se encarga de combinar y mostrar el resultado en tiempo real.
>
Expand All @@ -44,31 +44,31 @@ Ponle un nombre para que te sea fácil identificar qué harás acá.

Este espacio es donde escribirás tu código HTML

![](https://github.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-03-11-14-54-51-codePen_06.png)
![](https://raw.githubusercontent.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-03-11-14-54-51-codePen_06.png)

### CSS

Y acá escribirás tu código CSS.

![](https://github.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-03-11-14-55-26-codePen_07.png)
![](https://raw.githubusercontent.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-03-11-14-55-26-codePen_07.png)

### Guarda tu primer "Pen"

![](https://github.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-03-11-14-55-59-codePen_08.png)
![](https://raw.githubusercontent.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-03-11-14-55-59-codePen_08.png)

### Todos tus "Pens"

A partir de ahora, acá encontrarás todos los "Pens" que hayas creado.

![](https://github.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-03-11-14-56-27-codePen_09.png)
![](https://raw.githubusercontent.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-03-11-14-56-27-codePen_09.png)

### Comparte tu trabajo

Cuando quieras compartir tu trabajo para mostrar el resultado o pedir comentarios/ayuda de alguna compañera :sunglasses:, debes obtener el enlace/*link* al "Pen" con el botón "share" (compartir).

![](https://github.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-03-11-14-57-03-codePen_10.png)
![](https://raw.githubusercontent.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-03-11-14-57-03-codePen_10.png)

![](https://github.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-03-11-14-57-10-codePen_11.png)
![](https://raw.githubusercontent.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-03-11-14-57-10-codePen_11.png)

Una vez hayas copiado el enlace con el botón "Copy/link", puedes pegarlo en donde necesites para que tras personas puedan acceder a ver tu trabajo.

Expand Down
4 changes: 2 additions & 2 deletions DEV/00_topics/editors_codepen_doctype_ES.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ En CodePen, cuando intentas usar la etiqueta `<!DOCTYPE html>`, puede parecer qu

CodePen está diseñado específicamente para que escribas HTML que se incluye directamente dentro del `<body>` de un documento HTML. La plataforma maneja automáticamente toda la estructura del documento HTML, incluyendo el `<!DOCTYPE>`, que es esencial para definir el tipo de documento en páginas web completas. Por lo tanto, agregar `<!DOCTYPE html>` en CodePen no es un error de HTML en sí, sino una redundancia en este contexto particular, lo que podría llevar a confusión para quienes están aprendiendo a programar, ya que **en proyectos fuera de CodePen, esta etiqueta es crucial para asegurar que el HTML se procese correctamente.**

<img title="" src="https://github.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-04-22%2012-36-59.png" alt="" width="287">
<img title="" src="https://raw.githubusercontent.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-04-22%2012-36-59.png" alt="" width="287">

<img title="" src="https://github.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-04-22%2012-37-09.png" alt="" width="287">
<img title="" src="https://raw.githubusercontent.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/2024-04-22%2012-37-09.png" alt="" width="287">



Expand Down
6 changes: 3 additions & 3 deletions DEV/00_topics/editors_codepen_fork_ES.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ En nuestro caso, esto nos permitirá conservar una "instantánea" de tu trabajo

1. Abre el proyecto o "Pen" del que quieres hacer la copia para seguir trabajando en ella. Busca y dale al botón "fork"

![](https://github.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/codePen_fork_01.png)
![](https://raw.githubusercontent.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/codePen_fork_01.png)

2. Asegúrate de cambiarle el nombre al proyecto para no confundirte. COdePen no lo hace por defecto (al menos no en el momento en el que creamos esta guía).

![](https://github.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/codePen_fork_02.png)
![](https://raw.githubusercontent.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/codePen_fork_02.png)

3. Ya puedes seguir trabajando en la copia basada en el proyecto original y, cuando lo necesites, puedes compartir la URL o enlace a esta nueva copia.

![](https://github.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/codePen_fork_03.png)
![](https://raw.githubusercontent.com/Laboratoria/digitaljumpstart-curriculum/main/DEV/00_assets/codePen_fork_03.png)

Una vez hayas copiado el enlace con el botón "Copy/link", puedes pegarlo en donde necesites para que tras personas puedan acceder a ver tu trabajo.

Expand Down
4 changes: 2 additions & 2 deletions LEA/lea_model_01_overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Seguramente te resultará mucha información para comenzar pero te irás acostum

## Estructura

![](https://github.com/Laboratoria/digitaljumpstart-curriculum/main/LEA/00_assets/metodolog_01.png)
![](https://raw.githubusercontent.com/Laboratoria/digitaljumpstart-curriculum/main/LEA/00_assets/metodolog_01.png)

### Bloque introductorio

Expand All @@ -42,7 +42,7 @@ Si después de completar el bloque introductorio, quieres continuar aprendiendo

Encontrarás todo organizado de la siguiente manera. Es como una *matrioshka* o muñeca rusa 🪆. Las habilidades funcionan como un "contenedor" de módulos y los módulos como "contenedores" de actividades de todo tipo y/o retos que es lo que tendrás que "hacer" o ir completando.

![](https://github.com/Laboratoria/digitaljumpstart-curriculum/main/LEA/00_assets/metodolog_02.png)
![](https://raw.githubusercontent.com/Laboratoria/digitaljumpstart-curriculum/main/LEA/00_assets/metodolog_02.png)

---

Expand Down

0 comments on commit 89e80f8

Please sign in to comment.