Charles Emmanuel S. Ndiaye
4 years ago
committed by
GitHub
commit
0b7f660da4
@ -0,0 +1,30 @@
|
||||
# Programación basada en Eventos - Construye un juego de Mecanografía
|
||||
|
||||
## Introducción
|
||||
|
||||
Escribir es una de las habilidades más subestimadas de los desarrolladores. La capacidad de poder transmitir rápidamente pensamientos de su cabeza a su editor permite que la creatividad fluya libremente. ¡Una de las mejores formas de aprender es jugando un juego!
|
||||
|
||||
> Entonces, ¡construyamos un juego de mecanografía!
|
||||
|
||||
Utilizará las habilidades de JavaScript, HTML y CSS que ha aprendido hasta ahora para crear este juego. El mismo le mostrara al jugador una cita aleatoria (estamos usando [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes) citas) y el tiempo que tarda el jugador en escribirlo con precisión.
|
||||
|
||||
|
||||
|
||||
## Requisitos
|
||||
|
||||
Esta lección asume que está familiarizado con los siguientes conceptos:
|
||||
|
||||
- Crear entradas de texto y botones
|
||||
- CSS y estilos por clases
|
||||
- JavaScript básico
|
||||
- Creación de array
|
||||
- Crear números de manera aleatoria (random)
|
||||
- Obtener la hora actual
|
||||
|
||||
## Lección
|
||||
|
||||
[Creación de un juego de mecanografía mediante eventos](../typing-game/translations/README.es.md)
|
||||
|
||||
## Creditos
|
||||
|
||||
Escrito con ♥️ por [Christopher Harrison](http://www.twitter.com/geektrainer)
|
||||
@ -0,0 +1,216 @@
|
||||
# Construisez un jeu spatial, partie 2 : dessinez des héros et des monstres sur le canevas
|
||||
|
||||
## Quiz préalable
|
||||
|
||||
[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/31?loc=fr)
|
||||
|
||||
## Le canevas
|
||||
|
||||
Le canevas est un élément HTML qui par défaut n'a pas de contenu ; c'est une ardoise vierge. Vous devez dessiner dessus pour y ajouter quelque chose.
|
||||
|
||||
✅ Lisez en [plus sur l'API Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) sur MDN.
|
||||
|
||||
Voici comment il est généralement déclaré, dans le corps de la page:
|
||||
|
||||
```html
|
||||
<canvas id="myCanvas" width="200" height="100"></canvas>
|
||||
```
|
||||
|
||||
Ci-dessus, nous définissons `id`, `width` et `height`.
|
||||
|
||||
- `id`: définissez-le pour obtenir une référence lorsque vous avez besoin d'interagir avec lui.
|
||||
- `width`: c'est la largeur de l'élément.
|
||||
- `height`: c'est la hauteur de l'élément.
|
||||
|
||||
## Dessiner une géométrie simple
|
||||
|
||||
Le Canvas utilise un système de coordonnées cartésiennes pour dessiner des choses. Ainsi, il utilise un axe x et un axe y pour exprimer où se trouve quelque chose. L'emplacement `0,0` est la position en haut à gauche et en bas à droite ce que vous appelez également la LARGEUR et la HAUTEUR du canevas.
|
||||
|
||||
|
||||
> Image de [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
|
||||
|
||||
Pour dessiner sur l'élément de canevas, vous devrez suivre les étapes suivantes:
|
||||
|
||||
1. **Obtenir une référence** à l'élément Canvas.
|
||||
1. **Obtenez une référence** sur l'élément Context qui se trouve sur l'élément canvas.
|
||||
1. **Effectuez une opération de dessin** à l'aide de l'élément de contexte.
|
||||
|
||||
Le code pour les étapes ci-dessus ressemble communément à ceci:
|
||||
|
||||
```javascript
|
||||
// dessine un rectangle rouge
|
||||
//1. obtenir la référence du canevas
|
||||
canvas = document.getElementById("myCanvas");
|
||||
|
||||
//2. définir le contexte en 2D pour dessiner des formes de base
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
//3. le remplir avec la couleur rouge
|
||||
ctx.fillStyle = 'red';
|
||||
|
||||
//4. et dessiner un rectangle avec ces paramètres, en définissant l'emplacement et la taille
|
||||
ctx.fillRect(0,0, 200, 200) // x,y, largeur, hauteur
|
||||
```
|
||||
|
||||
✅ L'API Canvas se concentre principalement sur les formes 2D, mais vous pouvez également dessiner des éléments 3D sur un site Web ; pour cela, vous pouvez utiliser l'[API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API).
|
||||
|
||||
Vous pouvez dessiner toutes sortes de choses avec l'API Canvas comme:
|
||||
|
||||
- **Des formes géométriques**, nous avons déjà montré comment dessiner un rectangle, mais il y a beaucoup plus que vous pouvez dessiner.
|
||||
- **Du texte**, vous pouvez dessiner un texte avec la police et la couleur de votre choix.
|
||||
- **Des images**, vous pouvez dessiner une image basée sur un élément d'image comme un .jpg ou .png par exemple.
|
||||
|
||||
✅ Essayez-le ! Vous savez dessiner un rectangle, pouvez-vous dessiner un cercle sur une page ? Jetez un œil à quelques dessins Canvas intéressants sur CodePen. Voici un [exemple particulièrement impressionnant](https://codepen.io/dissimulate/pen/KrAwx).
|
||||
|
||||
## Charger et dessiner un élément d'image
|
||||
|
||||
Vous chargez une ressource image en créant un objet `Image` et définissez sa propriété `src`. Ensuite, vous écoutez l'événement `load` pour savoir quand il est prêt à être utilisé. Le code ressemble à ceci:
|
||||
|
||||
### Charger l'élément
|
||||
|
||||
```javascript
|
||||
const img = new Image();
|
||||
img.src = 'path/to/my/image.png';
|
||||
img.onload = () => {
|
||||
// image chargée et prête à être utilisée
|
||||
}
|
||||
```
|
||||
|
||||
### Charger le modèle d'élément
|
||||
|
||||
Il est recommandé d'envelopper ce qui précède dans une construction comme celle-ci, il est donc plus facile à utiliser et vous n'essayez de le manipuler que lorsqu'il est complètement chargé:
|
||||
|
||||
```javascript
|
||||
function loadAsset(path) {
|
||||
return new Promise((resolve) => {
|
||||
const img = new Image();
|
||||
img.src = path;
|
||||
img.onload = () => {
|
||||
// image chargée et prête à être utilisée
|
||||
resolve(img);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// utiliser comme celà
|
||||
|
||||
async function run() {
|
||||
const heroImg = await loadAsset('hero.png')
|
||||
const monsterImg = await loadAsset('monster.png')
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Pour dessiner les ressources du jeu sur un écran, votre code ressemblerait à ceci:
|
||||
|
||||
```javascript
|
||||
async function run() {
|
||||
const heroImg = await loadAsset('hero.png')
|
||||
const monsterImg = await loadAsset('monster.png')
|
||||
|
||||
canvas = document.getElementById("myCanvas");
|
||||
ctx = canvas.getContext("2d");
|
||||
ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
|
||||
ctx.drawImage(monsterImg, 0,0);
|
||||
}
|
||||
```
|
||||
|
||||
## Il est maintenant temps de commencer à créer votre jeu
|
||||
|
||||
### Que construire
|
||||
|
||||
Vous allez créer une page Web avec un élément Canvas. Il devrait rendre un écran noir `1024*768`. Nous vous avons fourni deux images:
|
||||
|
||||
- Navire héros
|
||||
|
||||
|
||||
|
||||
- Monstre 5*5
|
||||
|
||||
|
||||
|
||||
### Étapes recommandées pour commencer le développement
|
||||
|
||||
Recherchez les fichiers qui ont été créés pour vous dans le sous-dossier `your-work`. Il doit contenir les éléments suivants:
|
||||
|
||||
```bash
|
||||
-| assets
|
||||
-| enemyShip.png
|
||||
-| player.png
|
||||
-| index.html
|
||||
-| app.js
|
||||
-| package.json
|
||||
```
|
||||
|
||||
Ouvrez la copie de ce dossier dans Visual Studio Code. Vous devez disposer d'une configuration d'environnement de développement local, de préférence avec Visual Studio Code ainsi que NPM et Node installés. Si `npm` n'est pas configuré sur votre ordinateur, [voici comment procéder](https://www.npmjs.com/get-npm).
|
||||
|
||||
Démarrez votre projet en accédant au dossier `your_work`:
|
||||
|
||||
```bash
|
||||
cd your-work
|
||||
npm start
|
||||
```
|
||||
|
||||
Ce qui précède démarrera un serveur HTTP à l'adresse `http://localhost:5000`. Ouvrez un navigateur et saisissez cette adresse. C'est une page blanche actuellement, mais cela va changer
|
||||
|
||||
> Remarque : pour voir les changements sur votre écran, actualisez votre navigateur.
|
||||
|
||||
### Ajouter du code
|
||||
|
||||
Ajoutez le code nécessaire à `your-work/app.js` pour résoudre le problème ci-dessous
|
||||
|
||||
1. **Dessinez** un canevas avec un fond noir
|
||||
> astuce : ajoutez deux lignes sous le TODO approprié dans `/app.js`, en définissant l'élément `ctx` sur noir et les coordonnées haut/gauche à 0,0 et la hauteur et la largeur à égales à celles du canevas.
|
||||
2. **Charger** les textures
|
||||
> astuce : ajoutez les images du joueur et de l'ennemi en utilisant `await loadTexture` et en passant le chemin de l'image. Vous ne les verrez pas encore à l'écran!
|
||||
3. **Dessinez** le héros au centre de l'écran dans la moitié inférieure
|
||||
> astuce : utilisez l'API `drawImage` pour dessiner heroImg à l'écran, en définissant `canvas.width / 2 - 45` et `canvas.height - canvas.height / 4)`;
|
||||
4. **Dessinez**les monstres 5*5
|
||||
> astuce : vous pouvez maintenant décommenter le code pour dessiner les ennemis à l'écran. Ensuite, allez à la fonction `createEnemies` et compilez la.
|
||||
|
||||
Tout d'abord, configurez quelques constantes:
|
||||
|
||||
```javascript
|
||||
const MONSTER_TOTAL = 5;
|
||||
const MONSTER_WIDTH = MONSTER_TOTAL * 98;
|
||||
const START_X = (canvas.width - MONSTER_WIDTH) / 2;
|
||||
const STOP_X = START_X + MONSTER_WIDTH;
|
||||
```
|
||||
|
||||
Ensuite, créez une boucle pour dessiner le tableau de monstres sur l'écran:
|
||||
|
||||
```javascript
|
||||
for (let x = START_X; x < STOP_X; x += 98) {
|
||||
for (let y = 0; y < 50 * 5; y += 50) {
|
||||
ctx.drawImage(enemyImg, x, y);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Résultat
|
||||
|
||||
Le résultat final devrait ressembler à ça:
|
||||
|
||||
|
||||
|
||||
## Solution
|
||||
|
||||
Veuillez d'abord essayer de le résoudre vous-même, mais si vous êtes bloqué, jetez un œil à une [solution](../solution/app.js)
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Challenge
|
||||
|
||||
Vous avez appris à dessiner avec l'API Canvas axée sur la 2D ; jetez un œil à l'[API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API), et essayez de dessiner un objet 3D.
|
||||
|
||||
## Quiz de validation des connaissances
|
||||
|
||||
[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/32?loc=fr)
|
||||
|
||||
## Révision et étude personnelle
|
||||
|
||||
En savoir plus sur l'API Canvas en [lisant à ce sujet](https://developer.mozilla.org/docs/Web/API/Canvas_API).
|
||||
|
||||
## Affectation
|
||||
|
||||
[Jouer avec l'API Canvas](assignment.fr.md)
|
||||
@ -0,0 +1,50 @@
|
||||
# [Tema de la lección]
|
||||
|
||||
|
||||
|
||||
## [Cuestionario previo](quiz-url)
|
||||
|
||||
[Describe lo que aprenderemos]
|
||||
|
||||
### Introducción
|
||||
|
||||
Describe lo que se cubrirá en esta lección
|
||||
|
||||
> Notas
|
||||
|
||||
### Requisitos previos
|
||||
|
||||
¿Qué cosas deberían cubrirse antes de esta lección?
|
||||
|
||||
### Preparación
|
||||
|
||||
Pasos previos para comenzar esta lección
|
||||
|
||||
---
|
||||
|
||||
[Recorre el contenido en bloques]
|
||||
|
||||
## [Tema 1]
|
||||
|
||||
### Tareas:
|
||||
|
||||
Trabajen juntos para mejorar progresivamente su base de código para construir el proyecto con código compartido:
|
||||
|
||||
```html
|
||||
fragmento de código
|
||||
```
|
||||
|
||||
✅ Comprobación de conocimientos: aproveche este momento para ampliar el conocimiento de los estudiantes con preguntas abiertas
|
||||
|
||||
## [Tema 2]
|
||||
|
||||
## [Tema 3]
|
||||
|
||||
🚀 Desafío: Agregue un desafío para que los estudiantes trabajen de manera colaborativa en clase para mejorar el proyecto
|
||||
|
||||
Opcional: Agregue una captura de pantalla de la interfaz de usuario al completar la lección - Si corresponde
|
||||
## [Cuestionario posterior a la lección ](quiz-url)
|
||||
|
||||
## Revisión y autoestudio
|
||||
|
||||
**Deberes asignados [MM/YY]**: [Nombre de la asignación](assignment.es.md)
|
||||
@ -0,0 +1,9 @@
|
||||
# [Nombre de la asignación]
|
||||
|
||||
## Instrucciones
|
||||
|
||||
## Rúbrica
|
||||
|
||||
| Criterio | Ejemplo | Adecuado | Necesita mejorar |
|
||||
| -------- | --------- | -------- | ----------------- |
|
||||
| | | | |
|
||||
@ -0,0 +1,103 @@
|
||||
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
||||
[](http://makeapullrequest.com)
|
||||
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
||||
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
||||
|
||||
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
|
||||
|
||||
# ప్రారంభకులకు వెబ్ అభివృద్ధి - ఒక పాఠ్యప్రణాళిక
|
||||
|
||||
మా స్క్రిప్ట్, సిఎస్ఎస్ మరియు హెచ్టిఎమ్ఎల్ బేసిక్స్ గురించి 12 వారాల, 24-పాఠాల పాఠ్యప్రణాళికను అందించడానికి మా ప్రతి పాఠంలో ప్రీ మరియు పోస్ట్ లెసన్ క్విజ్ లు, పాఠం పూర్తి చేయడానికి రాతపూర్వక ఆదేశాలు, పరిష్కారం, అసైన్మెంట్ మరియు మరిన్ని ఉంటాయి. మా ప్రాజెక్ట్ ఆధారిత పెడగోజీ, కొత్త నైపుణ్యాలు 'అతుక్కుపోవడానికి' రుజువు చేయబడ్డ మార్గం, బిల్డింగ్ చేసేటప్పుడు నేర్చుకోవడానికి మిమ్మల్ని అనుమతిస్తుంది.
|
||||
|
||||
**మా రచయితలు జెన్ లూపర్, క్రిస్ నోరింగ్, క్రిస్టోఫర్ హారిసన్, జాస్మిన్ గ్రీన్అవే, యోహాన్ లాసోర్సా, ఫ్లోర్ డ్రీస్, మరియు స్కెచ్ నోట్ కళాకారుడు టోమోమి ఇమురాకు హృదయపూర్వక ధన్యవాదాలు!**
|
||||
|
||||
# ప్రారంభించడం
|
||||
|
||||
> **గురువులు**, మేము కొన్ని చేర్చాము [సూచనలు](for-teachers.pt.md) ఈ పాఠ్యప్రణాళికను ఎలా ఉపయోగించాలనే దానిపై మా చర్చలో మీ ఫీడ్ బ్యాక్ ని మేం ఇష్టపడతాము [ఫోరమ్](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
|
||||
|
||||
> **విద్యార్థులు**, ఈ పాఠ్యప్రణాళికను మీ స్వంతంగా ఉపయోగించడానికి, మొత్తం రెపోను ఫోర్క్ చేసి, మీ స్వంతంగా వ్యాయామాలను పూర్తి చేయండి, ప్రీ లెక్చర్ క్విజ్ తో ప్రారంభించి, తరువాత ఉపన్యాసం చదవడం మరియు మిగిలిన కార్యకలాపాలను పూర్తి చేయడం. పరిష్కార కోడ్ కాపీ చేయడం కంటే పాఠాలను అర్థం చేసుకోవడం ద్వారా ప్రాజెక్టులను సృష్టించడానికి ప్రయత్నించండి; అయితే ఆ కోడ్ ప్రతి ప్రాజెక్ట్ ఆధారిత పాఠంలో/పరిష్కారాల సంచికల్లో అందుబాటులో ఉంటుంది. స్నేహితులతో అధ్యయన బృందాన్ని ఏర్పాటు చేయడం మరియు కంటెంట్ ను కలిసి పరిశీలించడం మరొక ఆలోచన. తదుపరి అధ్యయనం కొరకు, మేం సిఫారసు చేస్తున్నాం. [మైక్రోసాఫ్ట్ లెర్న్](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) మరియు దిగువ పేర్కొన్న వీడియోలను చూడటం ద్వారా.
|
||||
|
||||
[](https://youtube.com/watch?v=R1wrdtmBSII "ప్రోమో వీడియో")
|
||||
|
||||
ద్వారా జిఫ్ [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
|
||||
|
||||
> 🎥 ప్రాజెక్ట్ గురించి వీడియో కొరకు మరియు దానిని సృష్టించిన వ్యక్తుల కొరకు పై ఇమేజ్ మీద క్లిక్ చేయండి!
|
||||
|
||||
## బోధనా విధానం
|
||||
|
||||
ఈ పాఠ్యప్రణాళికను రూపొందించేటప్పుడు మేము రెండు బోధనా సిద్ధాంతాలను ఎంచుకున్నాము: ఇది ప్రాజెక్ట్ ఆధారితమైనది మరియు ఇది తరచుగా క్విజ్ లను కలిగి ఉండేలా చూస్తుంది. ఈ సిరీస్ ముగిసే నాటికి, విద్యార్థులు టైపింగ్ గేమ్, వర్చువల్ టెర్రరియం, 'గ్రీన్' బ్రౌజర్ పొడిగింపు, 'స్పేస్ ఆక్రమణదారుల' రకం గేమ్, మరియు వ్యాపార తరహా బ్యాంకింగ్ యాప్ ను నిర్మించి, నేటి వెబ్ డెవలపర్ యొక్క ఆధునిక టూల్ చైన్ తో పాటు జావాస్క్రిప్ట్, హెచ్ టిఎమ్ ఎల్ మరియు సిఎస్ఎస్ యొక్క ప్రాథమికాంశాలను నేర్చుకున్నారు.
|
||||
|
||||
> 🎓 ఈ పాఠ్యప్రణాళికలో మీరు మొదటి కొన్ని పాఠాలను ఒక విధంగా తీసుకోవచ్చు [మార్గాన్ని నేర్చుకోండి](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) మైక్రోసాఫ్ట్ లెర్న్ పై!
|
||||
|
||||
కంటెంట్ ప్రాజెక్ట్ లతో అలైన్ అయ్యేలా చూడటం ద్వారా, ఈ ప్రక్రియ విద్యార్థుల కొరకు మరింత నిమగ్నం చేయబడుతుంది మరియు కాన్సెప్ట్ లను నిలుపుకోవడం పెంచబడుతుంది. మేము జావాస్క్రిప్ట్ బేసిక్స్ లో అనేక స్టార్టర్ పాఠాలు కూడా వ్రాశాము, కాన్సెప్ట్ లను పరిచయం చేయడానికి, వీడియోనుండి వీడియోతో జత చేయబడింది "[ప్రారంభ సిరీస్ కు: జావాస్క్రిప్ట్](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" వీడియో ట్యుటోరియల్స్ సేకరణ, దీని రచయితలు కొందరు ఈ పాఠ్యప్రణాళికకు సహకరించారు.
|
||||
|
||||
అదనంగా, ఒక తరగతి కి ముందు తక్కువ వాటాల క్విజ్ ఒక అంశాన్ని నేర్చుకునే దిశగా విద్యార్థి యొక్క ఉద్దేశ్యాన్ని ఏర్పరుస్తుంది, తరగతి తర్వాత రెండవ క్విజ్ మరింత నిలుపుదలను నిర్ధారిస్తుంది. ఈ కరిక్యులం సరళంగా మరియు వినోదాత్మకంగా రూపొందించబడింది మరియు దీనిని పూర్తిగా లేదా పాక్షికంగా తీసుకోవచ్చు. ప్రాజెక్టులు చిన్నవిగా ప్రారంభమవుతాయి మరియు ౧౨ వారాల చక్రం చివరినాటికి మరింత సంక్లిష్టంగా మారతాయి.
|
||||
|
||||
ఒక ఫ్రేమ్ వర్క్ ని స్వీకరించడానికి ముందు వెబ్ డెవలపర్ గా అవసరమైన ప్రాథమిక నైపుణ్యాలపై దృష్టి సారించడం కొరకు జావాస్క్రిప్ట్ ఫ్రేమ్ వర్క్ లను ప్రవేశపెట్టడాన్ని మేం ఉద్దేశ్యపూర్వకంగా పరిహరించినప్పటికీ, ఈ కరిక్యులం పూర్తి చేయడానికి మంచి తదుపరి దశ నోడ్ గురించి నేర్చుకోవడం.js వీడియోల యొక్క మరో కలెక్షన్ ద్వారా: "[ప్రారంభ సిరీస్ నుండి: నోడ్.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)".
|
||||
|
||||
> మా కనుగొనండి [ప్రవర్తనా నియమావళి](CODE_OF_CONDUCT.md), [దోహదపడటం](CONTRIBUTING.md), మరియు [తర్జుమా](TRANSLATIONS.md) మార్గదర్శకాలు. మీ నిర్మాణాత్మక ఫీడ్ బ్యాక్ ని మేం స్వాగతిస్తున్నాం!
|
||||
|
||||
## ప్రతి పాఠంలో ఇవి ఉంటాయి:
|
||||
|
||||
- ఐచ్ఛిక స్కెచ్ నోట్
|
||||
- ఐచ్ఛిక అనుబంధ వీడియో
|
||||
- ప్రీ లెసన్ వార్మప్ క్విజ్
|
||||
- వ్రాసిన పాఠం
|
||||
- ప్రాజెక్ట్ ఆధారిత పాఠాల కొరకు, ప్రాజెక్ట్ ని ఎలా నిర్మించాలనే దానిపై దశలవారీ గైడ్ లు
|
||||
- నాలెడ్జ్ చెక్ లు
|
||||
- ఒక సవాలు
|
||||
- అనుబంధ పఠనం
|
||||
- అసైన్ మెంట్
|
||||
- పాఠం అనంతర క్విజ్
|
||||
|
||||
> **క్విజ్ ల గురించి ఒక నోట్**: అన్ని క్విజ్ లు [ఈ యాప్ లో](https://happy-mud-02d95f10f.azurestaticapps.net/) కలిగి ఉంటాయి, ఒక్కొక్కటి మూడు ప్రశ్నల యొక్క 48 మొత్తం క్విజ్ లు. అవి పాఠాల లోపల నుంచి లింక్ చేయబడతాయి, అయితే క్విజ్ యాప్ ని స్థానికంగా రన్ చేయవచ్చు; 'క్విజ్-యాప్' ఫోల్డర్ లోని సూచనను పాటించండి. అవి క్రమంగా స్థానికీకరించబడుతున్నాయి.
|
||||
|
||||
## పాఠాలు
|
||||
|
||||
| | ప్రాజెక్ట్ పేరు | బోధించిన భావనలు | చదువు లక్ష్యాలు | లింక్ చేయబడింది పాఠం | రచయిత |
|
||||
| :-: | :-------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
|
||||
| 01 | ప్రారంభించడం | ప్రోగ్రామింగ్ మరియు టూల్స్ ఆఫ్ ది ట్రేడ్ కు పరిచయం | చాలా ప్రోగ్రామింగ్ భాషల వెనుక మరియు ప్రొఫెషనల్ డెవలపర్లు వారి ఉద్యోగాలు చేయడానికి సహాయపడే సాఫ్ట్ వేర్ గురించి ప్రాథమిక పునాదిని తెలుసుకోండి | [ప్రోగ్రామింగ్ లాంగ్వేజెస్ మరియు టూల్స్ ఆఫ్ ది ట్రేడ్ కు ఇంట్రో](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
|
||||
| 02 | ప్రారంభించడం | గిట్ హబ్ యొక్క బేసిక్స్, టీమ్ తో పనిచేయడం | మీ ప్రాజెక్ట్ లో GitHub ని ఎలా ఉపయోగించాలి, కోడ్ బేస్ పై ఇతరులతో ఎలా సహకరించాలి | [గిట్ హబ్ కు ఇంట్రో](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
|
||||
| 03 | ప్రారంభించడం | యాక్సెసబిలిటీ | వెబ్ యొక్క ప్రాథమికాంశాలను తెలుసుకోండి accessibility | [యాక్సెసబిలిటీ ఫండమెంటల్స్](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
|
||||
| 04 | జెఎస్ బేసిక్స్ | జావాస్క్రిప్ట్ డేటా రకాలు | జావాస్క్రిప్ట్ డేటా యొక్క ప్రాథమికాంశాలు రకాలు | [డేటా రకాలు](/2-js-basics/1-data-types/README.md) | Jasmine |
|
||||
| 05 | జెఎస్ బేసిక్స్ | విధులు మరియు పద్ధతులు | అప్లికేషన్ యొక్క లాజిక్ ఫ్లో నిర్వహించడం కొరకు ఫంక్షన్ లు మరియు విధానాల గురించి తెలుసుకోండి. | [విధులు మరియు పద్ధతులు](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
|
||||
| 06 | జెఎస్ బేసిక్స్ | జెఎస్ తో నిర్ణయాలు తీసుకోవడం | నిర్ణయం తీసుకునే విధానాలను ఉపయోగించి మీ కోడ్ లో పరిస్థితులను ఎలా సృష్టించాలో తెలుసుకోండి. | [నిర్ణయాలు తీసుకోవడం](/2-js-basics/3-making-decisions/README.md) | Jasmine |
|
||||
| 07 | జెఎస్ బేసిక్స్ | ఎరాయ్ లు మరియు లూప్ లు | జావాస్క్రిప్ట్ లో ఎరాయ్ లు మరియు లూప్ లను ఉపయోగించి డేటాతో పనిచేయండి. | [ఎరాయ్ లు మరియు లూప్ లు](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
|
||||
| 08 | [టెర్రిరియం](/3-terrarium/solution/README.md) | ప్రాక్టీస్ లో హెచ్ టిఎమ్ ఎల్ | లేఅవుట్ నిర్మించడంపై దృష్టి సారించి, ఆన్ లైన్ టెర్రిరియం సృష్టించడం కొరకు హెచ్ టిఎమ్ ఎల్ ని రూపొందించండి. | [హెచ్ టిఎమ్ ఎల్ పరిచయం](/3-terrarium/1-intro-to-html/README.md) | Jen |
|
||||
| 09 | [టెర్రిరియం](/3-terrarium/solution/README.md) | ఆచరణలో సిఎస్ఎస్ | పేజీని ప్రతిస్పందించేలా చేయడం సహా సిఎస్ఎస్ యొక్క ప్రాథమికాంశాలపై దృష్టి సారించి, ఆన్ లైన్ టెర్రరియంస్టైల్ చేయడానికి సిఎస్ఎస్ ని నిర్మించండి. | [సిఎస్ఎస్ పరిచయం](/3-terrarium/2-intro-to-css/README.md) | Jen |
|
||||
| 10 | [టెర్రిరియం](/3-terrarium/solution) | జావాస్క్రిప్ట్ మూసివేతలు, డి.ఒ.ఎం మానిప్యులేషన్ | క్లోజర్లు మరియు డివోఎమ్ మానిప్యులేషన్ పై దృష్టి సారించి, డ్రాగ్/డ్రాప్ ఇంటర్ ఫేస్ వలే టెర్రిరియం పనిచేయడానికి జావాస్క్రిప్ట్ ని రూపొందించండి. | [జావాస్క్రిప్ట్ మూసివేతలు, డి.ఒ.ఎం మానిప్యులేషన్](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
|
||||
| 11 | [టైపింగ్ గేమ్](/4-typing-game/solution) | టైపింగ్ గేమ్ నిర్మించండి | మీ జావాస్క్రిప్ట్ యాప్ యొక్క లాజిక్ డ్రైవ్ చేయడం కొరకు కీబోర్డ్ ఈవెంట్ లను ఎలా ఉపయోగించాలో తెలుసుకోండి. | [ఈవెంట్ ఆధారిత ప్రోగ్రామింగ్](/4-typing-game/typing-game/README.md) | Christopher |
|
||||
| 12 | [గ్రీన్ బ్రౌజర్ పొడిగింపు](/5-browser-extension/solution) | బ్రౌజర్ లతో పనిచేయడం | బ్రౌజర్ లు ఏవిధంగా పనిచేస్తాయి, వాటి చరిత్ర మరియు బ్రౌజర్ పొడిగింపు యొక్క మొదటి ఎలిమెంట్ లను ఎలా పరంజా చేయాలో తెలుసుకోండి. | [బ్రౌజర్ల గురించి](/5-browser-extension/1-about-browsers/README.md) | Jen |
|
||||
| 13 | [గ్రీన్ బ్రౌజర్ పొడిగింపు](/5-browser-extension/solution) | ఒక ఫారాన్ని నిర్మించడం, APఐని పిలవడం మరియు స్థానిక స్టోరేజీలో వేరియబుల్స్ నిల్వ చేయడం | స్థానిక స్టోరేజీలో నిల్వ చేయబడ్డ వేరియబుల్స్ ఉపయోగించి APఐకి కాల్ చేయడం కొరకు మీ బ్రౌజర్ పొడిగింపు యొక్క జావాస్క్రిప్ట్ ఎలిమెంట్ లను రూపొందించండి. | [APఐలు, ఫారాలు మరియు స్థానిక స్టోరేజీ](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
|
||||
| 14 | [గ్రీన్ బ్రౌజర్ పొడిగింపు](/5-browser-extension/solution) | బ్రౌజర్ లో నేపథ్య ప్రక్రియలు, వెబ్ పనితీరు | ఎక్స్ టెన్షన్ యొక్క ఐకాన్ ని నిర్వహించడం కొరకు బ్రౌజర్ యొక్క బ్యాక్ గ్రౌండ్ ప్రాసెస్ లను ఉపయోగించండి. వెబ్ పనితీరు మరియు కొన్ని ఆప్టిమైజేషన్ ల గురించి తెలుసుకోండి | [బ్యాక్ గ్రౌండ్ టాస్క్ లు మరియు పనితీరు](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
|
||||
| 15 | [స్పేస్ గేమ్](/6-space-game/solution) | జావాస్క్రిప్ట్ తో మరింత అధునాతన గేమ్ డెవలప్ మెంట్ | ఒక గేమ్ ని రూపొందించడం కొరకు సిద్ధం చేయడం కొరకు క్లాసులు మరియు కంపోజిషన్ మరియు పబ్/సబ్ ప్యాట్రన్ రెండింటిని ఉపయోగించి ఇన్హెరిటెన్స్ గురించి తెలుసుకోండి. | [అధునాతన గేమ్ డెవలప్ మెంట్ పరిచయం](/6-space-game/1-introduction/README.md) | Chris |
|
||||
| 16 | [స్పేస్ గేమ్](/6-space-game/solution) | కాన్వాస్ కు డ్రాయింగ్ | స్క్రీన్ కు ఎలిమెంట్ లను గీయడం కొరకు ఉపయోగించే కాన్వాస్ APఐ గురించి తెలుసుకోండి. | [కాన్వాస్ కు డ్రాయింగ్](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
|
||||
| 17 | [స్పేస్ గేమ్](/6-space-game/solution) | స్క్రీన్ చుట్టూ మూలకాలను కదిలించడం | కార్టేసియన్ కోఆర్డినేట్ లు మరియు కాన్వాస్ ఎపిఐఉపయోగించి ఎలిమెంట్ లు చలనాన్ని ఎలా పొందగలవో కనుగొనండి. | [చుట్టూ మూలకాలను తరలించడం](/6-space-game/3-moving-elements-around/README.md) | Chris |
|
||||
| 18 | [స్పేస్ గేమ్](/6-space-game/solution) | తాడన గుర్తింపు | కీప్రెస్ లను ఉపయోగించి ఎలిమెంట్ లు ఒకదానికొకటి ఢీకొనడం మరియు ప్రతిస్పందించేలా చేయడం మరియు గేమ్ యొక్క పనితీరును ధృవీకరించడం కొరకు కూల్ డౌన్ ఫంక్షన్ ని అందించడం | [తాడన గుర్తింపు](/6-space-game/4-collision-detection/README.md) | Chris |
|
||||
| 19 | [స్పేస్ గేమ్](/6-space-game/solution) | స్కోరును ఉంచడం | ఆట యొక్క స్థితి మరియు పనితీరు ఆధారంగా గణిత గణనలు నిర్వహించండి | [కీపింగ్ స్కోరు](/6-space-game/5-keeping-score/README.md) | Chris |
|
||||
| 20 | [స్పేస్ గేమ్](/6-space-game/solution) | ఆటను ముగించడం మరియు తిరిగి ప్రారంభించడం | ఆస్తులను శుభ్రం చేయడం మరియు వేరియబుల్ విలువలను రీసెట్ చేయడం సహా గేమ్ ని ముగించడం మరియు తిరిగి ప్రారంభించడం గురించి తెలుసుకోండి. | [ముగింపు పరిస్థితి](/6-space-game/6-end-condition/README.md) | Chris |
|
||||
| 21 | [బ్యాంకింగ్ యాప్](/7-bank-project/solution) | వెబ్ యాప్ లో హెచ్ టిఎమ్ ఎల్ టెంప్లెట్ లు మరియు రూట్ లు | రూటింగ్ మరియు హెచ్ టిఎమ్ ఎల్ టెంప్లెట్ లను ఉపయోగించి మల్టీపేజీ వెబ్ సైట్ యొక్క ఆర్కిటెక్చర్ యొక్క పరంజాను ఎలా సృష్టించాలో తెలుసుకోండి. | [హెచ్ టిఎమ్ ఎల్ టెంప్లెట్ లు మరియు రూట్ లు](/7-bank-project/1-template-route/README.md) | Yohan |
|
||||
| 22 | [బ్యాంకింగ్ యాప్](/7-bank-project/solution) | లాగిన్ మరియు రిజిస్ట్రేషన్ ఫారాన్ని రూపొందించండి | బిల్డింగ్ ఫారాలు మరియు ధ్రువీకరణ రొటీన్ ల హ్యాండింగ్ గురించి తెలుసుకోండి | [రూపాలు](/7-bank-project/2-forms/README.md) | Yohan |
|
||||
| 23 | [బ్యాంకింగ్ యాప్](/7-bank-project/solution) | డేటాను పొందడం మరియు ఉపయోగించే విధానాలు | డేటా మీ యాప్ లో మరియు బయటకు ఎలా ప్రవహిస్తుంది, దానిని ఎలా తీసుకురావాలి, నిల్వ చేయాలి మరియు పారవేయాలి | [రూపాలు](/7-bank-project/3-data/README.md) | Yohan |
|
||||
| 24 | [బ్యాంకింగ్ యాప్](/7-bank-project/solution) | స్టేట్ మేనేజ్ మెంట్ యొక్క భావనలు | మీ యాప్ స్థితిని ఎలా నిలుపుకుందో మరియు దానిని ప్రోగ్రామ్ గా ఎలా నిర్వహించాలో తెలుసుకోండి. | [రాష్ట్ర నిర్వహణ](/7-bank-project/4-state-management/README.md) | Yohan |
|
||||
|
||||
## ఆఫ్ లైన్ యాక్సెస్
|
||||
|
||||
మీరు [డాక్సిఫై](https://docsify.js.org/#/) ఉపయోగించడం ద్వారా ఈ డాక్యుమెంటేషన్ ని ఆఫ్ లైన్ లో రన్ చేయవచ్చు. ఈ రెపోను ఫోర్క్ చేయండి, [మీ స్థానిక యంత్రంపై డాక్సిఫైని ఇన్ స్టాల్ చేయండి](https://docsify.js.org/#/quickstart), ఆపై ఈ రెపో యొక్క రూట్ ఫోల్డర్ లో, 'డాక్సిఫై సర్వ్' టైప్ చేయండి. వెబ్ సైట్ మీ స్థానిక హోస్ట్ లో పోర్ట్ 3000లో అందించబడుతుంది: 'స్థానిక హోస్ట్:3000'.
|
||||
|
||||
## పిడిఎఫ్
|
||||
|
||||
అన్ని పాఠాల యొక్క పిడిఎఫ్ ని [ఇక్కడ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) చూడవచ్చు.
|
||||
|
||||
## ఇతర పాఠ్యప్రణాళిక
|
||||
|
||||
మా బృందం ఇతర పాఠ్యాంశాలను ఉత్పత్తి చేస్తుంది! తనిఖీ:
|
||||
|
||||
- [ప్రారంభకులకు మెషిన్ లెర్నింగ్](https://aka.ms/ml-beginners)
|
||||
- [ప్రారంభకులకు ఐవోటి](https://aka.ms/iot-beginners)
|
||||
- [ప్రారంభకులకు డేటా సైన్స్](https://aka.ms/datascience-beginners)
|
||||
@ -0,0 +1,34 @@
|
||||
## విద్యావేత్తల కొరకు
|
||||
|
||||
ఈ పాఠ్యప్రణాళికను మీ తరగతి గదిలో ఉపయోగించాలని మీరు అనుకుంటున్నారా? దయచేసి స్వేచ్ఛగా ఉండండి!
|
||||
|
||||
వాస్తవానికి, మీరు గిట్ హబ్ క్లాస్ రూమ్ ఉపయోగించడం ద్వారా Gtహబ్ లోనే దీనిని ఉపయోగించవచ్చు.
|
||||
|
||||
అలా చేయడానికి, ఈ రెపోను ఫోర్క్ చేయండి. మీరు ప్రతి పాఠం కోసం ఒక రెపోను సృష్టించాల్సి ఉంటుంది, కాబట్టి మీరు ప్రతి సంచికను ప్రత్యేక రెపోలోకి వెలికితీయాల్సి ఉంటుంది. ఆ విధంగా, [గిట్ హబ్ క్లాస్ రూమ్](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) ప్రతి పాఠాన్ని విడిగా ఎంచుకోవచ్చు.
|
||||
|
||||
|
||||
ఈ [పూర్తి సూచనలు](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) రూమ్-విత్-గిథబ్-క్లాస్ రూమ్/) మీ తరగతి గదిని ఎలా ఏర్పాటు చేయాలో మీకు ఒక అవగాహన ఇస్తుంది.
|
||||
|
||||
## మూడెల్, కాన్వాస్ లేదా బ్లాక్ బోర్డ్ లో దీనిని ఉపయోగించడం
|
||||
|
||||
ఈ లెర్నింగ్ మేనేజ్మెంట్ సిస్టమ్స్లో ఈ పాఠ్యాంశాలు బాగా పని చేస్తాయి! పూర్తి కంటెంట్ కోసం [Moodle అప్లోడ్ ఫైల్](/teaching-files/webdev-moodle.mbz) ని ఉపయోగించండి లేదా కొన్నింటిని కలిగి ఉన్న [కామన్ కార్ట్రిడ్జ్ ఫైల్](/teaching-files/webdev-common-cartridge.imscc) ఇందులో కొంత కంటెంట్ ఉంటుంది. Moodle Cloud పూర్తి కామన్ కాట్రిడ్జ్ ఎగుమతులకు మద్దతు ఇవ్వదు, కాబట్టి కాన్వాస్లోకి అప్లోడ్ చేయగల మూడ్లే డౌన్లోడ్ ఫైల్ను ఉపయోగించడం ఉత్తమం. దయచేసి మేము ఈ అనుభవాన్ని ఎలా మెరుగుపరచవచ్చో మాకు తెలియజేయండి.
|
||||
|
||||
|
||||
> మూడ్లే తరగతి గదిలో పాఠ్యప్రణాళిక
|
||||
|
||||
|
||||
> కాన్వాస్లో పాఠ్యప్రణాళిక
|
||||
|
||||
## రెపోను యథాతథంగా ఉపయోగించడం
|
||||
|
||||
మీరు GitHub క్లాస్రూమ్ని ఉపయోగించకుండా, ప్రస్తుతం ఉన్న విధంగానే ఈ రెపోను ఉపయోగించాలనుకుంటే, అది కూడా చేయవచ్చు. మీరు మీ విద్యార్థులతో కలిసి ఏ పాఠంతో కలిసి పని చేయాలో వారితో కమ్యూనికేట్ చేయాలి.
|
||||
|
||||
ఆన్లైన్ ఫార్మాట్లో (జూమ్, టీమ్లు లేదా ఇతరమైనవి) మీరు క్విజ్ల కోసం బ్రేక్అవుట్ రూమ్లను ఏర్పరచవచ్చు మరియు విద్యార్థులు నేర్చుకోవడానికి సిద్ధంగా ఉండటానికి వారికి మెంటర్ని అందించవచ్చు. ఆపై క్విజ్ల కోసం విద్యార్థులను ఆహ్వానించండి మరియు నిర్దిష్ట సమయంలో వారి సమాధానాలను 'సమస్యలు'గా సమర్పించండి. విద్యార్థులు బహిరంగంగా కలిసి పని చేయాలని మీరు కోరుకుంటే, మీరు అసైన్మెంట్లతో అదే పని చేయవచ్చు.
|
||||
|
||||
మీరు మరింత ప్రైవేట్ ఆకృతిని ఇష్టపడితే, పాఠ్యాంశాలను, పాఠం వారీగా పాఠాన్ని, వారి స్వంత గిట్హబ్ రెపోలను ప్రైవేట్ రెపోలుగా విభజించి, మీకు యాక్సెస్ ఇవ్వమని మీ విద్యార్థులను అడగండి. అప్పుడు వారు క్విజ్లు మరియు అసైన్మెంట్లను ప్రైవేట్గా పూర్తి చేయగలరు మరియు మీ తరగతి గది రెపోలో సమస్యల ద్వారా వాటిని మీకు సమర్పించగలరు.
|
||||
|
||||
ఆన్లైన్ క్లాస్రూమ్ ఫార్మాట్లో దీన్ని పని చేయడానికి అనేక మార్గాలు ఉన్నాయి. దయచేసి మీకు ఏది బాగా పని చేస్తుందో మాకు తెలియజేయండి!
|
||||
|
||||
## దయచేసి మీ ఆలోచనలను మాకు తెలియజేయండి!
|
||||
|
||||
మేము ఈ పాఠ్యాంశాలను మీకు మరియు మీ విద్యార్థులకు పని చేయాలనుకుంటున్నాము. దయచేసి మాకు [ఫీడ్బ్యాక్](https://forms.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR2humCsRZhxNuI79cm6n0hRUQzRVVU9VVlU5UlFLWTRLWlkyQUxORTg5WS4u).
|
||||
Loading…
Reference in new issue