mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-09-09 06:00:51 +02:00
update broken translations links
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||

|
||||
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
|
||||
## [Pre-lecture prueba](../.github/pre-lecture-quiz.md)
|
||||
|
||||
### Introducción:
|
||||
|
||||
@@ -15,7 +15,7 @@ En esta lección, usaremos HTML para diseñar el 'esqueleto' de la interfaz de n
|
||||
|
||||
En su computadora, cree una carpeta llamada 'terrario' y dentro de ella, un archivo llamado 'index.html'. Puede hacer esto en Visual Studio Code después de crear su carpeta de terrario abriendo una nueva ventana de VS Code, haciendo clic en 'abrir carpeta' y navegando a su nueva carpeta. Haga clic en el botón pequeño 'archivo' en el panel del Explorador y cree el nuevo archivo:
|
||||
|
||||
! [explorador en VS Code] (images / vs-code-index.png)
|
||||
! [explorador en VS Code](images / vs-code-index.png)
|
||||
|
||||
> Los archivos index.html indican a un navegador que es el archivo predeterminado en una carpeta; Las URL como `https://anysite.com/test` se pueden construir usando una estructura de carpetas que incluya una carpeta llamada `test` con `index.html` dentro; `Index.html` no tiene que aparecer en una URL.
|
||||
|
||||
@@ -97,7 +97,7 @@ Ahora, puede comenzar a construir su página. Normalmente, usa etiquetas `<div>`
|
||||
|
||||
Una etiqueta html que no necesita una etiqueta de cierre es la etiqueta `<img>`, porque tiene un elemento `src` que contiene toda la información que la página necesita para representar el elemento.
|
||||
|
||||
Cree una carpeta en su aplicación llamada `images` y en ella, agregue todas las imágenes en la [carpeta del código fuente] (../ images); (hay 14 imágenes de plantas).
|
||||
Cree una carpeta en su aplicación llamada `images` y en ella, agregue todas las imágenes en la [carpeta del código fuente](../images); (hay 14 imágenes de plantas).
|
||||
|
||||
### Tarea:
|
||||
|
||||
@@ -205,10 +205,10 @@ Agregue este marcado encima de la última etiqueta `</div>`:
|
||||
|
||||
🚀 Desafío: hay algunas etiquetas "antiguas" salvajes en HTML con las que todavía es divertido jugar, aunque no debes usar etiquetas obsoletas como [estas etiquetas](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) en su marcado. Aún así, ¿puede usar la antigua etiqueta `<marquee>` para hacer que el título h1 se desplace horizontalmente? (si lo hace, no olvide quitarlo después)
|
||||
|
||||
## [Post-lecture prueba](.github/post-lecture-quiz.md)
|
||||
## [Post-lecture prueba](../.github/post-lecture-quiz.md)
|
||||
|
||||
## Revisión y autoestudio
|
||||
|
||||
HTML es el sistema de bloques de construcción 'probado y verdadero' que ha ayudado a convertir la web en lo que es hoy. Aprenda un poco sobre su historia estudiando algunas etiquetas antiguas y nuevas. ¿Puedes averiguar por qué algunas etiquetas quedaron obsoletas y otras se agregaron? ¿Qué etiquetas podrían introducirse en el futuro?
|
||||
|
||||
** Tarea: [Practica tu HTML: crea una maqueta de blog](assignment.md)
|
||||
** Tarea: [Practica tu HTML: crea una maqueta de blog](assignment.es.md)
|
@@ -1,9 +1,9 @@
|
||||
# Terrarium Project Parte 2: Introducción a CSS
|
||||
|
||||

|
||||

|
||||
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
|
||||
## [Pre-lecture prueba](../.github/pre-lecture-quiz.md)
|
||||
|
||||
### Introducción:
|
||||
|
||||
@@ -67,7 +67,7 @@ body {
|
||||
|
||||
Abra la consola de su navegador en la pestaña 'Elementos' y observe la fuente H1. Hereda su fuente del cuerpo, como se indica en el navegador:
|
||||
|
||||

|
||||

|
||||
|
||||
✅ ¿Puede hacer que un estilo anidado herede una propiedad diferente?
|
||||
|
||||
@@ -240,19 +240,18 @@ Tenga en cuenta el uso de porcentajes aquí, incluso para el `border-radius`. Si
|
||||
|
||||
---
|
||||
|
||||
🚀 Desafío: agregue un brillo de 'burbuja' al área inferior izquierda del frasco para que se vea más parecido al vidrio. Estarás diseñando el `.jar-glossy-long` y el` .jar-glossy-short` para que parezca un brillo reflejado. Así es como se vería:
|
||||
🚀 Desafío: agregue un brillo de 'burbuja' al área inferior izquierda del frasco para que se vea más parecido al vidrio. Estarás diseñando el `.jar-glossy-long` y el `.jar-glossy-short` para que parezca un brillo reflejado. Así es como se vería:
|
||||
|
||||
! [terrario terminado](./images/terrarium-final.png)
|
||||

|
||||
|
||||
## [Post-lecture prueba](.github/post-lecture-quiz.md)
|
||||
## [Post-lecture prueba](../.github/post-lecture-quiz.md)
|
||||
|
||||
## Revisión y autoestudio
|
||||
|
||||
CSS parece engañosamente sencillo, pero existen muchos desafíos cuando se trata de diseñar una aplicación perfectamente para todos los navegadores y todos los tamaños de pantalla. CSS-Grid y Flexbox son herramientas que se han desarrollado para hacer el trabajo un poco más estructurado y más confiable. Aprende sobre estas herramientas jugando a [Flexbox Froggy](https://flexboxfroggy.com/) y [Grid Garden](https://codepip.com/games/grid-garden/).
|
||||
|
||||
**Asignación**: [Refactorización CSS] (asignación.md)
|
||||
**Asignación**: [Refactorización CSS](assignment.es.md)
|
||||
|
||||
Complete los siguientes módulos de aprendizaje para completar el [cuestionario posterior a la conferencia](. Github / post-lecture-quiz.md):
|
||||
Complete los siguientes módulos de aprendizaje para completar el [cuestionario posterior a la conferencia](../.github/post-lecture-quiz.md):
|
||||
|
||||
[Diseñe su aplicación HTML con CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics)
|
||||
|
||||
|
@@ -1,9 +1,9 @@
|
||||
# Terrarium Project Part 3: DOM Manipulación y cierre
|
||||
|
||||
! [DOM y un cierre](images/webdev101-js.png)
|
||||
! [DOM y un cierre](../images/webdev101-js.png)
|
||||
> Boceto de [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
|
||||
## [Pre-lecture prueba](../.github/pre-lecture-quiz.md)
|
||||
|
||||
### Introducción:
|
||||
|
||||
@@ -16,7 +16,7 @@ Usaremos un cierre para manipular el DOM.
|
||||
> Piense en el DOM como un árbol, que representa todas las formas en que se puede manipular un documento de página web. Se han escrito varias API (interfaces de programas de aplicación) para que los programadores, utilizando el lenguaje de programación de su elección, puedan acceder al DOM y editarlo, cambiarlo, reorganizarlo y administrarlo de otro modo.
|
||||
|
||||
|
||||

|
||||

|
||||
|
||||
> Una representación del DOM y el marcado HTML que lo hace referencia. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
|
||||
|
||||
@@ -193,7 +193,7 @@ Esta pequeña función restablece los eventos `onpointerup` y `onpointermove` pa
|
||||
|
||||
---
|
||||
|
||||
🥇¡Felicitaciones! Has terminado tu hermoso terrario. 
|
||||
🥇¡Felicitaciones! Has terminado tu hermoso terrario. 
|
||||
|
||||
🚀Challenge: agregue un nuevo controlador de eventos a su cierre para hacer algo más en las plantas; por ejemplo, haga doble clic en una planta para traerla al frente. ¡Se creativo!
|
||||
|
||||
@@ -203,5 +203,5 @@ Esta pequeña función restablece los eventos `onpointerup` y `onpointermove` pa
|
||||
|
||||
Si bien arrastrar elementos por la pantalla parece trivial, hay muchas formas de hacerlo y muchas trampas, según el efecto que busque. De hecho, hay una [API de arrastrar y soltar](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) completa que puedes probar. No lo usamos en este módulo porque el efecto que queríamos era algo diferente, pero pruebe esta API en su propio proyecto y vea lo que puede lograr.
|
||||
|
||||
** Tarea: [Trabajar un poco más con el DOM](assignment.md)
|
||||
** Tarea: [Trabajar un poco más con el DOM](assignment.es.md)
|
||||
|
||||
|
Reference in New Issue
Block a user