![\"Página](\"https://preview.ibb.co/kQZGj5/pag_Web_Sencilla.png\")
| ![\"DOM\"](\"https://preview.ibb.co/drvdxQ/representaciondom.png\")
|La idea de este proyecto es que, usando una API con información de películas,\npuedas idear, planear, organizar y desarrollar una aplicación web que aproveche\nestos datos y tenga una propuesta de valor atractiva para lxs usuarixs.
" + }, + "pt": { + "title": "Desafio de Filmes com Framework", + "summary": "A ideia deste projeto é que, usando uma API com informações de filmes, você\npossa planejar, organizar e desenvolver uma aplicação web que utilize esses\ndados e tenha uma proposta de valor atraente para lxs usuárixs.
" + } + }, + "cover": "https://live.staticflickr.com/117/257368762_38bf6fcf9f_h.jpg", + "thumb": "data:image/png;base64,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" + }, { "slug": "open-project", "repo": "Laboratoria/bootcamp", "path": "projects/05-open-project", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:27.746Z", + "createdAt": "2023-05-17T20:36:53.998Z", "prefix": 5, "track": "web-dev", "intl": { @@ -1253,9 +1331,9 @@ "slug": "roman-numerals", "repo": "Laboratoria/bootcamp", "path": "projects/05-roman-numerals", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:27.840Z", + "createdAt": "2023-05-17T20:37:00.407Z", "prefix": 5, "track": "web-dev", "learningObjectives": [ @@ -1296,9 +1374,9 @@ "slug": "roman-numerals-slack", "repo": "Laboratoria/bootcamp", "path": "projects/05-roman-numerals-slack", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:29.642Z", + "createdAt": "2023-05-17T20:37:00.715Z", "prefix": 5, "track": "web-dev", "learningObjectives": [ @@ -1340,9 +1418,9 @@ "slug": "social-network-fw", "repo": "Laboratoria/bootcamp", "path": "projects/05-social-network-fw", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:29.635Z", + "createdAt": "2023-05-17T20:37:00.404Z", "prefix": 5, "track": "web-dev", "learningObjectives": [ @@ -1422,9 +1500,9 @@ "slug": "wordpress-plugin", "repo": "Laboratoria/bootcamp", "path": "projects/05-wordpress-plugin", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:29.744Z", + "createdAt": "2023-05-17T20:37:07.365Z", "prefix": 5, "track": "web-dev", "learningObjectives": [ @@ -1466,9 +1544,9 @@ "slug": "job-application", "repo": "Laboratoria/bootcamp", "path": "projects/06-job-application", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:31.574Z", + "createdAt": "2023-05-17T20:37:07.518Z", "prefix": 6, "track": "web-dev", "intl": { diff --git a/dist/projects/burger-queen-api-client.json b/dist/projects/burger-queen-api-client.json index eed02d7d8..8c7cea9ef 100644 --- a/dist/projects/burger-queen-api-client.json +++ b/dist/projects/burger-queen-api-client.json @@ -2,9 +2,9 @@ "slug": "burger-queen-api-client", "repo": "Laboratoria/bootcamp", "path": "projects/04-burger-queen-api-client", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:24.164Z", + "createdAt": "2023-05-17T20:36:36.055Z", "prefix": 4, "track": "web-dev", "learningObjectives": [ diff --git a/dist/projects/burger-queen-api.json b/dist/projects/burger-queen-api.json index 48e21bd48..c4624366b 100644 --- a/dist/projects/burger-queen-api.json +++ b/dist/projects/burger-queen-api.json @@ -2,9 +2,9 @@ "slug": "burger-queen-api", "repo": "Laboratoria/bootcamp", "path": "projects/04-burger-queen-api", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:24.175Z", + "createdAt": "2023-05-17T20:36:35.478Z", "prefix": 4, "track": "web-dev", "learningObjectives": [ diff --git a/dist/projects/burger-queen.json b/dist/projects/burger-queen.json index 20f2b1725..40a9abdb9 100644 --- a/dist/projects/burger-queen.json +++ b/dist/projects/burger-queen.json @@ -2,9 +2,9 @@ "slug": "burger-queen", "repo": "Laboratoria/bootcamp", "path": "projects/04-burger-queen", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:24.310Z", + "createdAt": "2023-05-17T20:36:35.623Z", "prefix": 4, "track": "web-dev", "learningObjectives": [ diff --git a/dist/projects/card-validation.json b/dist/projects/card-validation.json index 6f35a2c4a..0fb1322f4 100644 --- a/dist/projects/card-validation.json +++ b/dist/projects/card-validation.json @@ -2,9 +2,9 @@ "slug": "card-validation", "repo": "Laboratoria/bootcamp", "path": "projects/01-card-validation", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:11.907Z", + "createdAt": "2023-05-17T20:35:45.831Z", "prefix": 1, "track": "web-dev", "learningObjectives": [ diff --git a/dist/projects/chat-app.json b/dist/projects/chat-app.json index c20f586bf..227bb37df 100644 --- a/dist/projects/chat-app.json +++ b/dist/projects/chat-app.json @@ -2,9 +2,9 @@ "slug": "chat-app", "repo": "Laboratoria/bootcamp", "path": "projects/05-chat-app", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:26.127Z", + "createdAt": "2023-05-17T20:36:46.076Z", "prefix": 5, "track": "web-dev", "learningObjectives": [ diff --git a/dist/projects/cipher.json b/dist/projects/cipher.json index 33390748a..4e4ceee7f 100644 --- a/dist/projects/cipher.json +++ b/dist/projects/cipher.json @@ -2,9 +2,9 @@ "slug": "cipher", "repo": "Laboratoria/bootcamp", "path": "projects/01-cipher", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:14.110Z", + "createdAt": "2023-05-17T20:35:59.250Z", "prefix": 1, "track": "web-dev", "learningObjectives": [ diff --git a/dist/projects/data-lovers.json b/dist/projects/data-lovers.json index fa1d74796..b10b6963f 100644 --- a/dist/projects/data-lovers.json +++ b/dist/projects/data-lovers.json @@ -2,9 +2,9 @@ "slug": "data-lovers", "repo": "Laboratoria/bootcamp", "path": "projects/02-data-lovers", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:16.268Z", + "createdAt": "2023-05-17T20:36:09.362Z", "prefix": 2, "track": "web-dev", "learningObjectives": [ diff --git a/dist/projects/design-and-usability.json b/dist/projects/design-and-usability.json index ca5748503..5610fb96f 100644 --- a/dist/projects/design-and-usability.json +++ b/dist/projects/design-and-usability.json @@ -2,9 +2,9 @@ "slug": "design-and-usability", "repo": "Laboratoria/bootcamp", "path": "projects/01-design-and-usability", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:13.936Z", + "createdAt": "2023-05-17T20:35:59.011Z", "prefix": 1, "track": "ux", "learningObjectives": [ diff --git a/dist/projects/design-detectives.json b/dist/projects/design-detectives.json index d6b7d1021..5e280e625 100644 --- a/dist/projects/design-detectives.json +++ b/dist/projects/design-detectives.json @@ -2,9 +2,9 @@ "slug": "design-detectives", "repo": "Laboratoria/bootcamp", "path": "projects/01-design-detectives", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:14.110Z", + "createdAt": "2023-05-17T20:35:58.467Z", "prefix": 1, "track": "ux", "learningObjectives": [ diff --git a/dist/projects/emergency-room.json b/dist/projects/emergency-room.json index 6f30ed2e2..d0b8a669c 100644 --- a/dist/projects/emergency-room.json +++ b/dist/projects/emergency-room.json @@ -2,9 +2,9 @@ "slug": "emergency-room", "repo": "Laboratoria/bootcamp", "path": "projects/02-emergency-room", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:16.348Z", + "createdAt": "2023-05-17T20:36:08.981Z", "prefix": 2, "track": "web-dev", "learningObjectives": [ diff --git a/dist/projects/fleet-management.json b/dist/projects/fleet-management.json index 7a84814c0..95efa2488 100644 --- a/dist/projects/fleet-management.json +++ b/dist/projects/fleet-management.json @@ -2,9 +2,9 @@ "slug": "fleet-management", "repo": "Laboratoria/bootcamp", "path": "projects/05-fleet-management", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:27.846Z", + "createdAt": "2023-05-17T20:36:54.248Z", "prefix": 5, "track": "web-dev", "learningObjectives": [ diff --git a/dist/projects/hcd-intro.json b/dist/projects/hcd-intro.json index 056899b3b..3423fa319 100644 --- a/dist/projects/hcd-intro.json +++ b/dist/projects/hcd-intro.json @@ -2,9 +2,9 @@ "slug": "hcd-intro", "repo": "Laboratoria/bootcamp", "path": "projects/00-hcd-intro", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:11.615Z", + "createdAt": "2023-05-17T20:35:44.390Z", "prefix": 0, "track": "ux", "learningObjectives": [ diff --git a/dist/projects/industry-deep-dive.json b/dist/projects/industry-deep-dive.json index 01d5baab1..35a3eab2c 100644 --- a/dist/projects/industry-deep-dive.json +++ b/dist/projects/industry-deep-dive.json @@ -2,9 +2,9 @@ "slug": "industry-deep-dive", "repo": "Laboratoria/bootcamp", "path": "projects/03-industry-deep-dive", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:21.585Z", + "createdAt": "2023-05-17T20:36:24.540Z", "prefix": 3, "track": "ux", "learningObjectives": [ diff --git a/dist/projects/job-application.json b/dist/projects/job-application.json index 31b0b138c..c7a81c870 100644 --- a/dist/projects/job-application.json +++ b/dist/projects/job-application.json @@ -2,9 +2,9 @@ "slug": "job-application", "repo": "Laboratoria/bootcamp", "path": "projects/06-job-application", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:31.574Z", + "createdAt": "2023-05-17T20:37:07.518Z", "prefix": 6, "track": "web-dev", "intl": { diff --git a/dist/projects/md-links.json b/dist/projects/md-links.json index ae4a62e67..3bf7364d1 100644 --- a/dist/projects/md-links.json +++ b/dist/projects/md-links.json @@ -2,9 +2,9 @@ "slug": "md-links", "repo": "Laboratoria/bootcamp", "path": "projects/04-md-links", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:26.127Z", + "createdAt": "2023-05-17T20:36:46.215Z", "prefix": 4, "track": "web-dev", "learningObjectives": [ diff --git a/dist/projects/memory-match.json b/dist/projects/memory-match.json index 3ba00d0f4..7c9a4813c 100644 --- a/dist/projects/memory-match.json +++ b/dist/projects/memory-match.json @@ -2,9 +2,9 @@ "slug": "memory-match", "repo": "Laboratoria/bootcamp", "path": "projects/02-memory-match", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:16.213Z", + "createdAt": "2023-05-17T20:36:09.342Z", "prefix": 2, "track": "web-dev", "learningObjectives": [ diff --git a/dist/projects/movie-challenge-fw.json b/dist/projects/movie-challenge-fw.json new file mode 100644 index 000000000..46b421a48 --- /dev/null +++ b/dist/projects/movie-challenge-fw.json @@ -0,0 +1,78 @@ +{ + "slug": "movie-challenge-fw", + "repo": "Laboratoria/bootcamp", + "path": "projects/05-movie-challenge-fw", + "version": "6.3.0", + "parserVersion": "5.0.0-alpha.4", + "createdAt": "2023-05-17T20:36:54.293Z", + "prefix": 5, + "track": "web-dev", + "learningObjectives": [ + "html/semantics", + "css/selectors", + "css/box-model", + "css/flexbox", + "browser/dom/selectors", + "browser/dom/events", + "browser/dom/manipulation", + "browser/fetch", + "js/data-types/primitive-vs-non-primitive", + "js/data-types/arrays", + "js/data-types/objects", + "js/variables", + "js/conditionals", + "js/loops", + "js/functions", + "js/testing/unit", + "js/modules/es-modules", + "js/linting", + "js/semantics", + "js/expression-vs-statement", + "scm/git/setup", + "scm/git/intro", + "scm/git/integration", + "scm/github/setup", + "scm/github/gh-pages", + "scm/github/collaboration", + "http/request-response", + "http/headers", + "http/body", + "http/verbs", + "http/status-codes", + "http/json", + "http/cors", + "angular/components-and-templates", + "angular/structural-directives", + "angular/input-output", + "angular/services", + "angular/routing", + "angular/observables", + "angular/http-client", + "angular/styles", + "react/jsx", + "react/components", + "react/events", + "react/lists-and-keys", + "react/conditional-rendering", + "react/lifting-up-state", + "react/hooks", + "react/css-modules", + "react/routing", + "user-centricity/centricity", + "product-design/interactivity", + "product-design/visual-design", + "research/test" + ], + "intl": { + "es": { + "title": "Movie Challenge con Framework", + "summary": "La idea de este proyecto es que, usando una API con información de películas,\npuedas idear, planear, organizar y desarrollar una aplicación web que aproveche\nestos datos y tenga una propuesta de valor atractiva para lxs usuarixs.
" + }, + "pt": { + "title": "Desafio de Filmes com Framework", + "summary": "A ideia deste projeto é que, usando uma API com informações de filmes, você\npossa planejar, organizar e desenvolver uma aplicação web que utilize esses\ndados e tenha uma proposta de valor atraente para lxs usuárixs.
" + } + }, + "cover": "https://live.staticflickr.com/117/257368762_38bf6fcf9f_h.jpg", + "thumb": "data:image/png;base64,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" +} diff --git a/dist/projects/movie-challenge.json b/dist/projects/movie-challenge.json index a154e920a..cb4806c56 100644 --- a/dist/projects/movie-challenge.json +++ b/dist/projects/movie-challenge.json @@ -2,9 +2,9 @@ "slug": "movie-challenge", "repo": "Laboratoria/bootcamp", "path": "projects/02-movie-challenge", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:18.661Z", + "createdAt": "2023-05-17T20:36:18.418Z", "prefix": 2, "track": "web-dev", "learningObjectives": [ diff --git a/dist/projects/notes.json b/dist/projects/notes.json index acbe69a8f..c384a0d66 100644 --- a/dist/projects/notes.json +++ b/dist/projects/notes.json @@ -2,9 +2,9 @@ "slug": "notes", "repo": "Laboratoria/bootcamp", "path": "projects/04-notes", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:25.974Z", + "createdAt": "2023-05-17T20:36:45.562Z", "prefix": 4, "track": "web-dev", "learningObjectives": [ diff --git a/dist/projects/open-project.json b/dist/projects/open-project.json index 766c9555d..bd0fbf3c2 100644 --- a/dist/projects/open-project.json +++ b/dist/projects/open-project.json @@ -2,9 +2,9 @@ "slug": "open-project", "repo": "Laboratoria/bootcamp", "path": "projects/05-open-project", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:27.746Z", + "createdAt": "2023-05-17T20:36:53.998Z", "prefix": 5, "track": "web-dev", "intl": { diff --git a/dist/projects/roman-numerals-slack.json b/dist/projects/roman-numerals-slack.json index 0d3ae899a..5741ee828 100644 --- a/dist/projects/roman-numerals-slack.json +++ b/dist/projects/roman-numerals-slack.json @@ -2,9 +2,9 @@ "slug": "roman-numerals-slack", "repo": "Laboratoria/bootcamp", "path": "projects/05-roman-numerals-slack", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:29.642Z", + "createdAt": "2023-05-17T20:37:00.715Z", "prefix": 5, "track": "web-dev", "learningObjectives": [ diff --git a/dist/projects/roman-numerals.json b/dist/projects/roman-numerals.json index 004d6c6c9..ed28c6128 100644 --- a/dist/projects/roman-numerals.json +++ b/dist/projects/roman-numerals.json @@ -2,9 +2,9 @@ "slug": "roman-numerals", "repo": "Laboratoria/bootcamp", "path": "projects/05-roman-numerals", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:27.840Z", + "createdAt": "2023-05-17T20:37:00.407Z", "prefix": 5, "track": "web-dev", "learningObjectives": [ diff --git a/dist/projects/small-businesses.json b/dist/projects/small-businesses.json index f2f1f2cc4..f33271d11 100644 --- a/dist/projects/small-businesses.json +++ b/dist/projects/small-businesses.json @@ -2,9 +2,9 @@ "slug": "small-businesses", "repo": "Laboratoria/bootcamp", "path": "projects/02-small-businesses", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:18.578Z", + "createdAt": "2023-05-17T20:36:17.496Z", "prefix": 2, "track": "ux", "learningObjectives": [ diff --git a/dist/projects/social-network-fw.json b/dist/projects/social-network-fw.json index 3f2dac577..53cd6f423 100644 --- a/dist/projects/social-network-fw.json +++ b/dist/projects/social-network-fw.json @@ -2,9 +2,9 @@ "slug": "social-network-fw", "repo": "Laboratoria/bootcamp", "path": "projects/05-social-network-fw", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:29.635Z", + "createdAt": "2023-05-17T20:37:00.404Z", "prefix": 5, "track": "web-dev", "learningObjectives": [ diff --git a/dist/projects/social-network.json b/dist/projects/social-network.json index b427e4b4b..8280743b6 100644 --- a/dist/projects/social-network.json +++ b/dist/projects/social-network.json @@ -2,9 +2,9 @@ "slug": "social-network", "repo": "Laboratoria/bootcamp", "path": "projects/03-social-network", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:22.024Z", + "createdAt": "2023-05-17T20:36:25.131Z", "prefix": 3, "track": "web-dev", "learningObjectives": [ diff --git a/dist/projects/trivia.json b/dist/projects/trivia.json index 3256c09e6..d6387dddb 100644 --- a/dist/projects/trivia.json +++ b/dist/projects/trivia.json @@ -2,9 +2,9 @@ "slug": "trivia", "repo": "Laboratoria/bootcamp", "path": "projects/00-trivia", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:11.906Z", + "createdAt": "2023-05-17T20:35:45.355Z", "prefix": 0, "track": "web-dev", "learningObjectives": [ diff --git a/dist/projects/ux-consultancy.json b/dist/projects/ux-consultancy.json index 30faafcfc..b61d2202a 100644 --- a/dist/projects/ux-consultancy.json +++ b/dist/projects/ux-consultancy.json @@ -2,9 +2,9 @@ "slug": "ux-consultancy", "repo": "Laboratoria/bootcamp", "path": "projects/03-ux-consultancy", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:21.571Z", + "createdAt": "2023-05-17T20:36:24.826Z", "prefix": 3, "track": "ux", "learningObjectives": [ diff --git a/dist/projects/uxploradora.json b/dist/projects/uxploradora.json index c498c1da9..38500987b 100644 --- a/dist/projects/uxploradora.json +++ b/dist/projects/uxploradora.json @@ -2,9 +2,9 @@ "slug": "uxploradora", "repo": "Laboratoria/bootcamp", "path": "projects/02-uxploradora", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:18.808Z", + "createdAt": "2023-05-17T20:36:17.446Z", "prefix": 2, "track": "ux", "learningObjectives": [ diff --git a/dist/projects/wordpress-plugin.json b/dist/projects/wordpress-plugin.json index 598d95829..942873802 100644 --- a/dist/projects/wordpress-plugin.json +++ b/dist/projects/wordpress-plugin.json @@ -2,9 +2,9 @@ "slug": "wordpress-plugin", "repo": "Laboratoria/bootcamp", "path": "projects/05-wordpress-plugin", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:29.744Z", + "createdAt": "2023-05-17T20:37:07.365Z", "prefix": 5, "track": "web-dev", "learningObjectives": [ diff --git a/dist/topics.json b/dist/topics.json index 6e2a330e5..69e055192 100644 --- a/dist/topics.json +++ b/dist/topics.json @@ -3,9 +3,9 @@ "slug": "browser", "repo": "Laboratoria/bootcamp", "path": "topics/browser", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:32.215Z", + "createdAt": "2023-05-17T20:37:08.711Z", "track": "web-dev", "intl": { "es": { @@ -24,9 +24,9 @@ "slug": "content-management", "repo": "Laboratoria/bootcamp", "path": "topics/content-management", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:31.731Z", + "createdAt": "2023-05-17T20:37:14.434Z", "track": "ux", "intl": { "es": { @@ -41,9 +41,9 @@ "slug": "css", "repo": "Laboratoria/bootcamp", "path": "topics/css", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:34.696Z", + "createdAt": "2023-05-17T20:37:15.641Z", "track": "web-dev", "intl": { "es": { @@ -62,9 +62,9 @@ "slug": "functional", "repo": "Laboratoria/bootcamp", "path": "topics/functional", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:34.714Z", + "createdAt": "2023-05-17T20:37:15.352Z", "track": "web-dev", "intl": { "es": { @@ -79,9 +79,9 @@ "slug": "html", "repo": "Laboratoria/bootcamp", "path": "topics/html", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:34.336Z", + "createdAt": "2023-05-17T20:37:20.943Z", "track": "web-dev", "intl": { "es": { @@ -100,9 +100,9 @@ "slug": "interaction-design", "repo": "Laboratoria/bootcamp", "path": "topics/interaction-design", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:36.798Z", + "createdAt": "2023-05-17T20:37:20.975Z", "track": "ux", "intl": { "es": { @@ -117,9 +117,9 @@ "slug": "intro-ux", "repo": "Laboratoria/bootcamp", "path": "topics/intro-ux", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:36.624Z", + "createdAt": "2023-05-17T20:37:20.375Z", "track": "ux", "intl": { "es": { @@ -134,9 +134,9 @@ "slug": "javascript", "repo": "Laboratoria/bootcamp", "path": "topics/javascript", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:37.787Z", + "createdAt": "2023-05-17T20:37:28.374Z", "track": "web-dev", "intl": { "es": { @@ -155,9 +155,9 @@ "slug": "learning-mindset", "repo": "Laboratoria/bootcamp", "path": "topics/learning-mindset", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:39.558Z", + "createdAt": "2023-05-17T20:37:25.229Z", "track": "web-dev", "intl": { "es": { @@ -172,9 +172,9 @@ "slug": "paradigms", "repo": "Laboratoria/bootcamp", "path": "topics/paradigms", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:39.928Z", + "createdAt": "2023-05-17T20:37:26.465Z", "track": "web-dev", "intl": { "es": { @@ -189,9 +189,9 @@ "slug": "prototyping", "repo": "Laboratoria/bootcamp", "path": "topics/prototyping", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:39.620Z", + "createdAt": "2023-05-17T20:37:32.865Z", "track": "ux", "intl": { "es": { @@ -206,9 +206,9 @@ "slug": "scm", "repo": "Laboratoria/bootcamp", "path": "topics/scm", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:41.950Z", + "createdAt": "2023-05-17T20:37:33.525Z", "track": "web-dev", "intl": { "es": { @@ -227,9 +227,9 @@ "slug": "shell", "repo": "Laboratoria/bootcamp", "path": "topics/shell", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:41.835Z", + "createdAt": "2023-05-17T20:37:33.164Z", "track": "web-dev", "intl": { "es": { @@ -248,9 +248,9 @@ "slug": "ux-research", "repo": "Laboratoria/bootcamp", "path": "topics/ux-research", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:42.263Z", + "createdAt": "2023-05-17T20:37:36.192Z", "track": "ux", "intl": { "es": { diff --git a/dist/topics/browser.json b/dist/topics/browser.json index e65745538..9b8e7008b 100644 --- a/dist/topics/browser.json +++ b/dist/topics/browser.json @@ -2,9 +2,9 @@ "slug": "browser", "repo": "Laboratoria/bootcamp", "path": "topics/browser", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:32.215Z", + "createdAt": "2023-05-17T20:37:08.711Z", "track": "web-dev", "intl": { "es": { @@ -55,11 +55,11 @@ "intl": { "es": { "title": "Document Object Model (DOM)", - "body": "En esta unidad aprenderemos:
\nnodeNamenodeTypenodeValueparentNodechildNodesfirstChildlastChildpreviousSiblingpreviousElementSiblingnextSiblingnextElementSiblingLa creación del Document Object Model o DOM es una de las innovaciones\nque más ha influido en el desarrollo de las páginas web dinámicas y de las\naplicaciones web más complejas.
DOM es una herramienta que permite a los programadores web acceder y manipular\nlas páginas XHTML como si fueran documentos XML. De hecho, DOM se diseñó\noriginalmente para manipular de forma sencilla los documentos XML.
A pesar de sus orígenes, DOM se ha convertido en una utilidad disponible para\nla mayoría de lenguajes de programación (Java, PHP, JavaScript) y cuyas únicas\ndiferencias se encuentran en la forma de implementarlo.
Una de las tareas habituales en la programación de aplicaciones web con\nJavaScript consiste en la manipulación de las páginas web. De esta forma,\nes habitual obtener el valor almacenado por algunos elementos (por ejemplo\nlos elementos de un formulario), crear un elemento (párrafos, <div>, etc.)\nde forma dinámica y añadirlo a la página, aplicar una animación a un elemento\n(que aparezca/desaparezca, que se desplace, etc.).
Todas estas tareas habituales son muy sencillas de realizar gracias a DOM, sin\nembargo, para poder realizar dichas tareas es necesario \"transformar\" la\npágina original.
Una página HTML no es más que una sucesión de caracteres, por lo que es un\nformato muy difícil de manipular por esta razón, los navegadores web (Chrome,\nMozilla, IE, etc) transforman automáticamente todas las páginas web en una\nestructura más eficiente de manipular.
\nEsta transformación la realizan todos los navegadores de forma automática y nos\npermite utilizar las herramientas de DOM de forma muy sencilla.
DOM transforma todos los documentos XHTML en un conjunto de elementos llamados\nnodos, que están interconectados y que representan el contenido de la página\nweb y la relacion entre ellos. Por su aspecto, la unión de todos los nodos se\nllama \"árbol de nodos\" tal y como se muestra en la imagen.
Página Web (1) | Árbol de Nodos DOM (2)\n-- | --\n | |
La transformación automática de la página en un árbol de nodos siempre sigue las\nmismas reglas.
\nLas etiquetas XHTML se transforman en dos nodos\n\nEl primero es la propia etiqueta y el segundo nodo es hijo del primero y\nconsiste en el contenido textual de la etiqueta.
\n
Si una etiqueta XHTML se encuentra dentro de otra\n\nSe sigue el mismo procedimiento anterior, pero los nodos generados serán\nnodos hijo de su etiqueta padre.
\n
Como se puede suponer, las páginas XHTML habituales producen árboles con\nmiles de nodos. Aun así, el proceso de transformación es rápido y automático,\nsiendo las funciones proporcionadas por DOM (que se verán más adelante) las\núnicas que permiten acceder a cualquier nodo de la página de forma sencilla\ne inmediata.
\nLa especificación completa de DOM define 12 tipos de nodos, los cuales se\ndetallan a continuación:
| Nombre del Nodo | Significado | Tipo de Nodo |\n| :------- | :------: | -----: |\n| ELEMENT_NODE | Nodo del tipo Element | 1 |\n| ATTRIBUTE_NODE | Nodo del tipo Attr | 2 |\n| TEXT_NODE | Nodo del tipo Text | 3 |\n| CDATA_SECTION_NODE | Nodo del tipo CDATASection | 4 |\n| ENTITY_REFERENCE_NODE | Nodo del tipo EntityReference | 5 |\n| ENTITY_NODE | Nodo del tipo Entity | 6 |\n| PROCESSING_INSTRUCTION_NODE | Nodo del tipo ProcessingInstruction | 7 |\n| COMMENT_NODE | Nodo del tipo Comment | 8 |\n| DOCUMENT_NODE | Nodo del tipo Document | 9 |\n| DOCUMENT_TYPE_NODE | Nodo del tipo DocumentType | 10 |\n| DOCUMENT_FRAGMENT_NODE | Nodo del tipo DocumentFragment | 11 |\n| NOTATION_NODE | Nodo del tipo Notation | 12 |
Aunque las páginas XHTML que manejaremos se pueden manipular manejando\nsolamente cuatro o cinco tipos de estos nodos:
\nDOCUMENT_NODE, nodo raíz del que derivan todos los demás nodos del árbol.
ELEMENT_NODE, representa cada una de las etiquetas XHTML. Se trata del único\nnodo que puede contener atributos y el único del que pueden derivar otros nodos.
<html>\n <head></head>\n <body></body>\n</html>\n\n3 nodo del tipo Element --> html, head y body\nATTRIBUTE_NODE, se define un nodo de este tipo para representar cada uno de\nlos atributos de las etiquetas XHTML, es decir, uno por cada par atributo=valor.
<img src=\"images/logo.png\" alt=\"Logo Laboratoria\" />\n\n1 nodo tipo Element --> etiqueta img\n2 nodo tipo Attr --> src y alt\nTEXT_NODE, nodo que contiene el texto encerrado por una etiqueta XHTML.
<h1>Seré una futura developer de Laboratoria</h1>\n<h2>¿Qué debo hacer?</h2>\n<ul>\n <li>Mentalidad de crecimiento</li>\n <li>Practicar mucho</li>\n <li>Autoaprender y preguntar siempre</li>\n</ul>\n\n6 nodos tipo Element --> etiquetas h1, h2, ul, li,\n5 nodos tipo Text --> 'Seré una futura developer de Laboratoria', '¿Qué debo\n hacer?','Mentalidad de crecimiento','Practicar mucho', 'Autoaprender y\n preguntar siempre'\nCOMMENT_NODE, representa los comentarios incluidos en la página XHTML.
<html>\n <head>\n <title>Página Sencilla</title>\n </head>\n <body>\n <!-- Hola Esto es un comentario-->\n <h1>Hola Mundo</h1>\n <!--Por favor coloca una imagen-->\n <img src=\"images/logo.png\" alt=\"Logo Laboratoria\"/>\n </body>\n</html>\n\n6 nodos Element --> etiqueta html, head, title, body, h1, img\n2 nodos Text --> 'Página Sencilla', 'Hola Mundo'\n2 nodos Attr --> src y alt\n2 nodos Comment --> <!--Hola esto es un comentario-->\n<!--Por favor coloca una imagen-->\nLos otros tipos de nodos existentes que no se van a considerar son\nDocumentType, CDataSection, DocumentFragment, Entity, EntityReference,\nProcessingInstruction y Notation.
Los nodos del DOM se relacionan entre sí teniendo en cuenta quien es el nodo\npadre, los nodos hermanos e hijos. Así como tú tienes hermanos,padre o hijos,\nlos nodos del DOM también tienen una relación familiar.
\n![\"DOM](\"https://www.w3schools.com/js/pic_htmltree.gif\")
La raíz del árbol de nodos de cualquier página web siempre es la misma:\nun nodo llamado document que es el objeto padre de los objetos\nrestantes.
El nodo html es el padre de los objetos o nodos head y body\n(pero hijo del nodo document).
El objeto o nodo body es el padre del a y el h1, por lo\ntanto estas etiquetas son hijos del nodo body.
El nodo de texto My header es hijo del nodo h1.
Analizando la misma imagen de arriba:
\nLos nodos hermanos hacen referencia a los nodos que tiene el mismo padre, es\ndecir, son nodos del mismo nivel en el árbol del DOM.
Los objetos o nodos head y body son hermanos, cuyo padre es el\nobjeto o nodo html.
El nodo de texto My link y el nodo attribute son nodos hermanos,\ncuyo padre es el objeto o nodo a. (En la imagen parece que attribute\nes hermano del nodo a pero a es padre de attribute.)
Primero, cada vez que hablemos de nodos en realidad nos estamos refiriendo a\nun objeto y como recordarás, los objetos tienen propiedades y métodos.\nPor lo tanto los nodos tienen propiedades y métodos que te ayudarán a\nidentificarlos.
A continuación te presentamos tres propiedades de los nodos las cuales te\nayudarán a identificar su nombre, tipo y valor.
\n1 para\nlas etiquetas HTML, 3 para los nodos tipo texto, 8 para los nodos tipo\ncomentarios, 9 para el nodo tipo document, etc.3 y nodos tipo\ncomentarios 8.Prepara tu editor de código, replica lo que realiza Lulú en el siguiente video y\nrefuerza lo aprendido.
\n![\"Recorriendo](\"https://img.youtube.com/vi/D93IP_n6kj8/0.jpg\")
En esta unidad aprenderemos:
\nnodeNamenodeTypenodeValueparentNodechildNodesfirstChildlastChildpreviousSiblingpreviousElementSiblingnextSiblingnextElementSiblingLa creación del Document Object Model o DOM es una de las innovaciones\nque más ha influido en el desarrollo de las páginas web dinámicas y de las\naplicaciones web más complejas.
DOM es una herramienta que permite a los programadores web acceder y manipular\nlas páginas XHTML como si fueran documentos XML. De hecho, DOM se diseñó\noriginalmente para manipular de forma sencilla los documentos XML.
A pesar de sus orígenes, DOM se ha convertido en una utilidad disponible para\nla mayoría de lenguajes de programación (Java, PHP, JavaScript) y cuyas únicas\ndiferencias se encuentran en la forma de implementarlo.
Una de las tareas habituales en la programación de aplicaciones web con\nJavaScript consiste en la manipulación de las páginas web. De esta forma,\nes habitual obtener el valor almacenado por algunos elementos (por ejemplo\nlos elementos de un formulario), crear un elemento (párrafos, <div>, etc.)\nde forma dinámica y añadirlo a la página, aplicar una animación a un elemento\n(que aparezca/desaparezca, que se desplace, etc.).
Todas estas tareas habituales son muy sencillas de realizar gracias a DOM, sin\nembargo, para poder realizar dichas tareas es necesario \"transformar\" la\npágina original.
Una página HTML no es más que una sucesión de caracteres, por lo que es un\nformato muy difícil de manipular por esta razón, los navegadores web (Chrome,\nMozilla, IE, etc) transforman automáticamente todas las páginas web en una\nestructura más eficiente de manipular.
\nEsta transformación la realizan todos los navegadores de forma automática y nos\npermite utilizar las herramientas de DOM de forma muy sencilla.
DOM transforma todos los documentos XHTML en un conjunto de elementos llamados\nnodos, que están interconectados y que representan el contenido de la página\nweb y la relacion entre ellos. Por su aspecto, la unión de todos los nodos se\nllama \"árbol de nodos\" tal y como se muestra en la imagen.
Página Web (1) | Árbol de Nodos DOM (2)\n-- | --\n | |
La transformación automática de la página en un árbol de nodos siempre sigue las\nmismas reglas.
\nLas etiquetas XHTML se transforman en dos nodos\n\nEl primero es la propia etiqueta y el segundo nodo es hijo del primero y\nconsiste en el contenido textual de la etiqueta.
\n
Si una etiqueta XHTML se encuentra dentro de otra\n\nSe sigue el mismo procedimiento anterior, pero los nodos generados serán\nnodos hijo de su etiqueta padre.
\n
Como se puede suponer, las páginas XHTML habituales producen árboles con\nmiles de nodos. Aun así, el proceso de transformación es rápido y automático,\nsiendo las funciones proporcionadas por DOM (que se verán más adelante) las\núnicas que permiten acceder a cualquier nodo de la página de forma sencilla\ne inmediata.
\nLa especificación completa de DOM define 12 tipos de nodos, los cuales se\ndetallan a continuación:
| Nombre del Nodo | Significado | Tipo de Nodo |\n| :------- | :------: | -----: |\n| ELEMENT_NODE | Nodo del tipo Element | 1 |\n| ATTRIBUTE_NODE | Nodo del tipo Attr | 2 |\n| TEXT_NODE | Nodo del tipo Text | 3 |\n| CDATA_SECTION_NODE | Nodo del tipo CDATASection | 4 |\n| ENTITY_REFERENCE_NODE | Nodo del tipo EntityReference | 5 |\n| ENTITY_NODE | Nodo del tipo Entity | 6 |\n| PROCESSING_INSTRUCTION_NODE | Nodo del tipo ProcessingInstruction | 7 |\n| COMMENT_NODE | Nodo del tipo Comment | 8 |\n| DOCUMENT_NODE | Nodo del tipo Document | 9 |\n| DOCUMENT_TYPE_NODE | Nodo del tipo DocumentType | 10 |\n| DOCUMENT_FRAGMENT_NODE | Nodo del tipo DocumentFragment | 11 |\n| NOTATION_NODE | Nodo del tipo Notation | 12 |
Aunque las páginas XHTML que manejaremos se pueden manipular manejando\nsolamente cuatro o cinco tipos de estos nodos:
\nDOCUMENT_NODE, nodo raíz del que derivan todos los demás nodos del árbol.
ELEMENT_NODE, representa cada una de las etiquetas XHTML. Se trata del único\nnodo que puede contener atributos y el único del que pueden derivar otros nodos.
<html>\n <head></head>\n <body></body>\n</html>\n\n3 nodo del tipo Element --> html, head y body\nATTRIBUTE_NODE, se define un nodo de este tipo para representar cada uno de\nlos atributos de las etiquetas XHTML, es decir, uno por cada par atributo=valor.
<img src=\"images/logo.png\" alt=\"Logo Laboratoria\" />\n\n1 nodo tipo Element --> etiqueta img\n2 nodo tipo Attr --> src y alt\nTEXT_NODE, nodo que contiene el texto encerrado por una etiqueta XHTML.
<h1>Seré una futura developer de Laboratoria</h1>\n<h2>¿Qué debo hacer?</h2>\n<ul>\n <li>Mentalidad de crecimiento</li>\n <li>Practicar mucho</li>\n <li>Autoaprender y preguntar siempre</li>\n</ul>\n\n6 nodos tipo Element --> etiquetas h1, h2, ul, li,\n5 nodos tipo Text --> 'Seré una futura developer de Laboratoria', '¿Qué debo\n hacer?','Mentalidad de crecimiento','Practicar mucho', 'Autoaprender y\n preguntar siempre'\nCOMMENT_NODE, representa los comentarios incluidos en la página XHTML.
<html>\n <head>\n <title>Página Sencilla</title>\n </head>\n <body>\n <!-- Hola Esto es un comentario-->\n <h1>Hola Mundo</h1>\n <!--Por favor coloca una imagen-->\n <img src=\"images/logo.png\" alt=\"Logo Laboratoria\"/>\n </body>\n</html>\n\n6 nodos Element --> etiqueta html, head, title, body, h1, img\n2 nodos Text --> 'Página Sencilla', 'Hola Mundo'\n2 nodos Attr --> src y alt\n2 nodos Comment --> <!--Hola esto es un comentario-->\n<!--Por favor coloca una imagen-->\nLos otros tipos de nodos existentes que no se van a considerar son\nDocumentType, CDataSection, DocumentFragment, Entity, EntityReference,\nProcessingInstruction y Notation.
Los nodos del DOM se relacionan entre sí teniendo en cuenta quien es el nodo\npadre, los nodos hermanos e hijos. Así como tú tienes hermanos,padre o hijos,\nlos nodos del DOM también tienen una relación familiar.
\n
La raíz del árbol de nodos de cualquier página web siempre es la misma:\nun nodo llamado document que es el objeto padre de los objetos\nrestantes.
El nodo html es el padre de los objetos o nodos head y body\n(pero hijo del nodo document).
El objeto o nodo body es el padre del a y el h1, por lo\ntanto estas etiquetas son hijos del nodo body.
El nodo de texto My header es hijo del nodo h1.
Analizando la misma imagen de arriba:
\nLos nodos hermanos hacen referencia a los nodos que tiene el mismo padre, es\ndecir, son nodos del mismo nivel en el árbol del DOM.
Los objetos o nodos head y body son hermanos, cuyo padre es el\nobjeto o nodo html.
El nodo de texto My link y el nodo attribute son nodos hermanos,\ncuyo padre es el objeto o nodo a. (En la imagen parece que attribute\nes hermano del nodo a pero a es padre de attribute.)
Primero, cada vez que hablemos de nodos en realidad nos estamos refiriendo a\nun objeto y como recordarás, los objetos tienen propiedades y métodos.\nPor lo tanto los nodos tienen propiedades y métodos que te ayudarán a\nidentificarlos.
A continuación te presentamos tres propiedades de los nodos las cuales te\nayudarán a identificar su nombre, tipo y valor.
\n1 para\nlas etiquetas HTML, 3 para los nodos tipo texto, 8 para los nodos tipo\ncomentarios, 9 para el nodo tipo document, etc.3 y nodos tipo\ncomentarios 8.Prepara tu editor de código, replica lo que realiza Lulú en el siguiente video y\nrefuerza lo aprendido.
\n" }, "pt": { "title": "Document Object Model (DOM)", - "body": "Nesta unidade aprenderemos:
\nparentNodechildNodesfirstChildlastChildpreviousSiblingpreviousElementSiblingnextSiblingnextElementSiblingdocument.getElementById()document.getElementsByTagName()document.getElementsByClassName()document.querySelector()document.querySelectorAll()A criação do Document Object Model o DOM é uma das inovações que mais\ninfluênciou o desenvolvimento de sites e de aplicações mais complexas.
DOM é uma ferrramente que permite que permite os programadoes a acessar e\nmanipular as páginas XHTML como se fossem documentos XML. Na verdade, o DOM\nfoi projetado originalmente para manipular o XML de forma mais simples.
Apesar de suas origens, o DOM virou uma utilidade disponível para a maioria\ndas linguagens de programação (Java, PHP, JavaScript) com a única forma sendo a\nmaneira de implementar.
Uma das tarefas mais comuns da programação web com JavaScript consiste em\nmanipular as páginas web. Desta forma, é comum obter o valor armazenado em\nalguns elementos (por exemplo os elementos de um formulário), criar um elemento\n(<p>, <div>) de forma dinâmica e adicionar ele na página, inserir uma\nanimação com um elemento (fazer aparecer e desaparecer, fazer se mover, etc).
Todas essas tarefas comuns são muito simples de realizar graças ao DOM, sem\ndificuldades, para poder realizar estas tarefas é necessário \"transformar\" a\npágina original.
Uma página HTML não é mais do que uma sequência de caracteres, por isso que é\num formato difícil de manipular, os navegadores web (Chrome, Mozilla, IE, etc)\ntransformam automaticamente todas as páginas web em uma estrutura mais eficiente\nde manipular.
Está transformação é realizada por todos os navegadores de forma automática e\nque nos permite utilizar as ferramentas do DOM de forma simples.
DOM transforma todos os documentos XHTML em um conjunto de elementos\nchamados nós, que estão interconectados e que representam o conteúdo da página\nweb e a relação entre eles. Por causa de seu formato, a união de todos os nós é\nchamado de árvore de nós como mostrado na imagem.
Página Web (1)| Árbol de Nodos DOM (2)\n-- | --\n![\"Página](\"https://user-images.githubusercontent.com/11894994/58907326-48968400-86e4-11e9-87e8-8026b6063636.png\")
| ![\"DOM\"](\"https://user-images.githubusercontent.com/11894994/58907322-459b9380-86e4-11e9-9677-bb17626dd546.png\")
|
A transformação automática de uma página em uma árvore de nós sempre segue as\nmesmas regras.
\nAs etiquetas XHTML se transformar em nós\n\nO primeira é a própria tag e o segundo nó é o filho do primeiro e consistem no\nconteúdo de texto da tag.
\n
Se uma etiqueta XHTML se encontra dentro da outra\n\nSegue o mesmo procedimento anterior, mas os nós gerados serão nós filhos das\ntags pai.
\n
Como se pode supor, as páginas XHTML normalmente produzem árvores com milhares\nde nós. Mesmo assim, o processo de transformação é rápido e automático, sendo as\nfunções fornecidas pelo DOM (que serão vistas posteriormente) as únicas que\npermitem o acesso a qualquer nó da página de forma simples e imediata.
\nA especificação completa de DOM define 12 tipos de nós, que estão detalhados\nabaixo:
| Nome do Nó | Significado | Tipo de Nó |\n| :--- | :---: | ---: |\n| ELEMENT_NODE | Nó do tipo Element | 1 |\n| ATTRIBUTE_NODE | Nó do tipo Attr | 2 |\n| TEXT_NODE | Nó do tipo Text | 3 |\n| CDATA_SECTION_NODE | Nó do tipo CDATASection | 4 |\n| ENTITY_REFERENCE_NODE | Nó do tipo EntityReference | 5 |\n| ENTITY_NODE | Nó do tipo Entity | 6 |\n| PROCESSING_INSTRUCTION_NODE | Nó do tipo ProcessingInstruction | 7 |\n| COMMENT_NODE | Nó do tipo Comment | 8 |\n| DOCUMENT_NODE | Nó do tipo Document | 9 |\n| DOCUMENT_TYPE_NODE | Nó do tipo DocumentType | 10 |\n| DOCUMENT_FRAGMENT_NODE | Nó do tipo DocumentFragment | 11 |\n| NOTATION_NODE | Nó do tipo Notation | 12 |
Embora as páginas XHTML que iremos gerenciar possam ser manipuladas manipulando\napenas quatro ou cinco tipos desses nós:
\nDOCUMENT_NODE, nó raíz que deriva todos os outros nodes da árvore.
ELEMENT_NODE, representa cada uma das tags XHTML. Podem ser filhos de outro\nnó de tipo element e também ter filhos (nó element ou nó text).
<html>\n <head></head>\n <body></body>\n</html>\n\n3 nós de Element -> tags html, head e body\nATTRIBUTE_NODE, um nó desse tipo é definido para representar cada um dos\natributos das tags XHTML. Esses nós são sempre filhos de um nó Elemento e não\npodem ter filhos.
<img src=\"images/logo.png\" alt=\"Logo Laboratoria\"/>\n\n1 nó Element -> tag img\n2 nós Attr -> src e alt\nTEXT_NODE, nó que contém o texto entre uma tag HTML. Esses nós são sempre\nfilhos de um nó Element e não podem ter filhos.
<h1>Futuramente eu serei uma programadora da Laboratoria</h1>\n<h2>O que devo fazer?</h2>\n<ul>\n <li>Mentalidade do crescimento</li>\n <li>Praticar muito</li>\n <li>Autoaprendizagem e perguntar sempre</li>\n</ul>\n\n6 Nós Element -> tags h1, h2, ul, li,\n5 nós Text -> 'Futuramente eu serei uma programadora da Laboratoria',\n'O que devo fazer?', 'Mentalidade de crescimento',\n'praticar muito', 'Autoaprendizagem e perguntar sempre'\nCOMMENT_NODE, representa os comentários incluídos na página XHTML.
<html>\n <head>\n <title>Página única</title>\n </head>\n <body>\n <!-- Olá, este é um comentário -->\n <h1>Olá mundo</h1>\n <!-- Por favor, coloque uma foto -->\n <img src=\"images/logo.png\" alt=\"Logo Laboratoria\"/>\n </body>\n</html>\n\n6 Nós Element -> tag html, head, title, body, h1, img\n2 nós Text -> 'Página simples', 'Olá mundo'\n2 nós Attr -> src e alt\n2 nós Comment -> <!--Olá, este é um comentário -->\n<!-- Por favor, coloque uma foto -->\nExistem outros tipos de nós que não vamos mostrar aqui, como por exemplo:\nDocumentType, CDataSection, DocumentFragment, Entity, EntityReference,\nProcessingInstruction e Notation.
Os nós do DOM se relacionam entre si, tendo em conta quem é o nós pai, quem\nsão os irmão e filhos. Assim como você tem irmãos, pais e filhos, todos os\nnós do DOM também tem alguma relação familiar.
![\"DOM\nTree\"](\"https://user-images.githubusercontent.com/11894994/58907764-4bde3f80-86e5-11e9-8c73-2fa2831dc891.gif\")
pai dos demais objetos.pai de a e h1, portanto, esses\nrótulos são filhos do nó do body.Analisando a mesma imagem acima:
\nirmãos referem-se aos nós que possuem o mesmo pai, ou seja, são nós\ndo mesmo nível na árvore DOM.irmãos, cujo pai é o objeto ou nó\nhtml .irmãos, cujo pai é o\nobjeto ou nó a . (Na imagem parece que attribute é o irmão do nó\na, mas a é pai de attribute.)Primeiro, cada vez que falamos em nós na realidade estão nos referindo a um\nobjeto e como você lembra, os objetos possuem propriedades e métodos. Com\nisso os nós tem também tem propriedades e métodos que irão te ajudar a\nidentificá-los.
Os nós DOM possuem propriedades básicas, que são:
\n1 para tags\nHTML, 3 para nós de tipo de texto, 8 para nós de tipo de comentário, 9\npara nó de tipo de documento, etc.8.Prepare seu editor, replique o que Daniel realiza no vídeo a seguir e reforce\nseu aprendizado.
\n![\"Navegando](\"https://img.youtube.com/vi/3UE4ndfUQVk/0.jpg\")
Nesta unidade aprenderemos:
\nparentNodechildNodesfirstChildlastChildpreviousSiblingpreviousElementSiblingnextSiblingnextElementSiblingdocument.getElementById()document.getElementsByTagName()document.getElementsByClassName()document.querySelector()document.querySelectorAll()A criação do Document Object Model o DOM é uma das inovações que mais\ninfluênciou o desenvolvimento de sites e de aplicações mais complexas.
DOM é uma ferrramente que permite que permite os programadoes a acessar e\nmanipular as páginas XHTML como se fossem documentos XML. Na verdade, o DOM\nfoi projetado originalmente para manipular o XML de forma mais simples.
Apesar de suas origens, o DOM virou uma utilidade disponível para a maioria\ndas linguagens de programação (Java, PHP, JavaScript) com a única forma sendo a\nmaneira de implementar.
Uma das tarefas mais comuns da programação web com JavaScript consiste em\nmanipular as páginas web. Desta forma, é comum obter o valor armazenado em\nalguns elementos (por exemplo os elementos de um formulário), criar um elemento\n(<p>, <div>) de forma dinâmica e adicionar ele na página, inserir uma\nanimação com um elemento (fazer aparecer e desaparecer, fazer se mover, etc).
Todas essas tarefas comuns são muito simples de realizar graças ao DOM, sem\ndificuldades, para poder realizar estas tarefas é necessário \"transformar\" a\npágina original.
Uma página HTML não é mais do que uma sequência de caracteres, por isso que é\num formato difícil de manipular, os navegadores web (Chrome, Mozilla, IE, etc)\ntransformam automaticamente todas as páginas web em uma estrutura mais eficiente\nde manipular.
Está transformação é realizada por todos os navegadores de forma automática e\nque nos permite utilizar as ferramentas do DOM de forma simples.
DOM transforma todos os documentos XHTML em um conjunto de elementos\nchamados nós, que estão interconectados e que representam o conteúdo da página\nweb e a relação entre eles. Por causa de seu formato, a união de todos os nós é\nchamado de árvore de nós como mostrado na imagem.
Página Web (1)| Árbol de Nodos DOM (2)\n-- | --\n | |
A transformação automática de uma página em uma árvore de nós sempre segue as\nmesmas regras.
\nAs etiquetas XHTML se transformar em nós\n\nO primeira é a própria tag e o segundo nó é o filho do primeiro e consistem no\nconteúdo de texto da tag.
\n
Se uma etiqueta XHTML se encontra dentro da outra\n\nSegue o mesmo procedimento anterior, mas os nós gerados serão nós filhos das\ntags pai.
\n
Como se pode supor, as páginas XHTML normalmente produzem árvores com milhares\nde nós. Mesmo assim, o processo de transformação é rápido e automático, sendo as\nfunções fornecidas pelo DOM (que serão vistas posteriormente) as únicas que\npermitem o acesso a qualquer nó da página de forma simples e imediata.
\nA especificação completa de DOM define 12 tipos de nós, que estão detalhados\nabaixo:
| Nome do Nó | Significado | Tipo de Nó |\n| :--- | :---: | ---: |\n| ELEMENT_NODE | Nó do tipo Element | 1 |\n| ATTRIBUTE_NODE | Nó do tipo Attr | 2 |\n| TEXT_NODE | Nó do tipo Text | 3 |\n| CDATA_SECTION_NODE | Nó do tipo CDATASection | 4 |\n| ENTITY_REFERENCE_NODE | Nó do tipo EntityReference | 5 |\n| ENTITY_NODE | Nó do tipo Entity | 6 |\n| PROCESSING_INSTRUCTION_NODE | Nó do tipo ProcessingInstruction | 7 |\n| COMMENT_NODE | Nó do tipo Comment | 8 |\n| DOCUMENT_NODE | Nó do tipo Document | 9 |\n| DOCUMENT_TYPE_NODE | Nó do tipo DocumentType | 10 |\n| DOCUMENT_FRAGMENT_NODE | Nó do tipo DocumentFragment | 11 |\n| NOTATION_NODE | Nó do tipo Notation | 12 |
Embora as páginas XHTML que iremos gerenciar possam ser manipuladas manipulando\napenas quatro ou cinco tipos desses nós:
\nDOCUMENT_NODE, nó raíz que deriva todos os outros nodes da árvore.
ELEMENT_NODE, representa cada uma das tags XHTML. Podem ser filhos de outro\nnó de tipo element e também ter filhos (nó element ou nó text).
<html>\n <head></head>\n <body></body>\n</html>\n\n3 nós de Element -> tags html, head e body\nATTRIBUTE_NODE, um nó desse tipo é definido para representar cada um dos\natributos das tags XHTML. Esses nós são sempre filhos de um nó Elemento e não\npodem ter filhos.
<img src=\"images/logo.png\" alt=\"Logo Laboratoria\"/>\n\n1 nó Element -> tag img\n2 nós Attr -> src e alt\nTEXT_NODE, nó que contém o texto entre uma tag HTML. Esses nós são sempre\nfilhos de um nó Element e não podem ter filhos.
<h1>Futuramente eu serei uma programadora da Laboratoria</h1>\n<h2>O que devo fazer?</h2>\n<ul>\n <li>Mentalidade do crescimento</li>\n <li>Praticar muito</li>\n <li>Autoaprendizagem e perguntar sempre</li>\n</ul>\n\n6 Nós Element -> tags h1, h2, ul, li,\n5 nós Text -> 'Futuramente eu serei uma programadora da Laboratoria',\n'O que devo fazer?', 'Mentalidade de crescimento',\n'praticar muito', 'Autoaprendizagem e perguntar sempre'\nCOMMENT_NODE, representa os comentários incluídos na página XHTML.
<html>\n <head>\n <title>Página única</title>\n </head>\n <body>\n <!-- Olá, este é um comentário -->\n <h1>Olá mundo</h1>\n <!-- Por favor, coloque uma foto -->\n <img src=\"images/logo.png\" alt=\"Logo Laboratoria\"/>\n </body>\n</html>\n\n6 Nós Element -> tag html, head, title, body, h1, img\n2 nós Text -> 'Página simples', 'Olá mundo'\n2 nós Attr -> src e alt\n2 nós Comment -> <!--Olá, este é um comentário -->\n<!-- Por favor, coloque uma foto -->\nExistem outros tipos de nós que não vamos mostrar aqui, como por exemplo:\nDocumentType, CDataSection, DocumentFragment, Entity, EntityReference,\nProcessingInstruction e Notation.
Os nós do DOM se relacionam entre si, tendo em conta quem é o nós pai, quem\nsão os irmão e filhos. Assim como você tem irmãos, pais e filhos, todos os\nnós do DOM também tem alguma relação familiar.
pai dos demais objetos.pai de a e h1, portanto, esses\nrótulos são filhos do nó do body.Analisando a mesma imagem acima:
\nirmãos referem-se aos nós que possuem o mesmo pai, ou seja, são nós\ndo mesmo nível na árvore DOM.irmãos, cujo pai é o objeto ou nó\nhtml .irmãos, cujo pai é o\nobjeto ou nó a . (Na imagem parece que attribute é o irmão do nó\na, mas a é pai de attribute.)Primeiro, cada vez que falamos em nós na realidade estão nos referindo a um\nobjeto e como você lembra, os objetos possuem propriedades e métodos. Com\nisso os nós tem também tem propriedades e métodos que irão te ajudar a\nidentificá-los.
Os nós DOM possuem propriedades básicas, que são:
\n1 para tags\nHTML, 3 para nós de tipo de texto, 8 para nós de tipo de comentário, 9\npara nó de tipo de documento, etc.8.Prepare seu editor, replique o que Daniel realiza no vídeo a seguir e reforce\nseu aprendizado.
\n" } } }, @@ -87,11 +87,11 @@ "intl": { "es": { "title": "Manipulación del DOM", - "body": "En esta unidad aprenderemos:
\ndocument.getElementById()document.getElementsByClassName()document.getElementsByTagName()document.querySelector()document.querySelectorAll()Una vez construido automáticamente el árbol completo de nodos DOM, ya es\nposible utilizar las funciones DOM para acceder de forma directa a cualquier\nnodo del árbol.
\nComo acceder a un nodo del árbol es equivalente a acceder a\n\"un trozo\" de la página, una vez construido el árbol, ya es posible manipular\nde forma sencilla la página: acceder al valor de un elemento, establecer el\nvalor de un elemento, mover un elemento de la página, crear y añadir nuevos\nelementos, etc.
\nDOM proporciona dos métodos alternativos para acceder a un nodo específico:\nacceso a través de sus nodos padre y acceso directo.
\nLas funciones que proporciona DOM para acceder a un nodo a través de sus nodos\npadre consisten en acceder al nodo raíz de la página y después a sus nodos\nhijos y a los nodos hijos de esos hijos y así sucesivamente hasta el último\nnodo de la rama terminada por el nodo buscado. Sin embargo, cuando se quiere\nacceder a un nodo específico, es mucho más rápido acceder directamente a ese\nnodo y no llegar hasta él descendiendo a través de todos sus nodos padre.
\nPor ese motivo, no se van a presentar las funciones necesarias para el acceso\njerárquico de nodos y se muestran solamente las que permiten acceder de forma\ndirecta a los nodos.
\nEs importante recordar que el acceso a los nodos, su modificación\ny su eliminación solamente es posible cuando el árbol DOM ha sido construido\ncompletamente, es decir, después de que la página XHTML se cargue por\ncompleto. Más adelante se verá cómo asegurar que un código JavaScript\nsolamente se ejecute cuando el navegador ha cargado entera la página XHTML.
\nPor último, te recomendamos que pruebes los siguientes métodos replicando el\ncódigo en tu editor favorito.
\nLa función getElementById() es la más utilizada cuando se desarrollan\naplicaciones web dinámicas. Se trata de la función preferida para acceder\ndirectamente a un nodo y poder leer o modificar sus propiedades.
La función getElementById() devuelve el elemento XHTML cuyo atributo id\ncoincide con el parámetro indicado en la función. Como el atributo id debe ser\núnico para cada elemento de una misma página, la función devuelve únicamente\nel nodo deseado.
<body>\n <h2>Hola Laboratoria</h2>\n <h2>Hola Mundo</h2>\n <h2>Mis Hobbies</h2>\n <ul>\n <li id=\"highlight\">Programar</li>\n <li class=\"bolded\">Bailar</li>\n <li class=\"bolded\">Ver peliculas</li>\n </ul>\n</body>\nconst firstItem = document.getElementById(\"highlight\");\nLa función getElementsByClassName() devuelve una lista de nodos\nXHTML cuyo atributo classcoincide con el parámetro indicado en la función.
<body>\n <h2>Hola Laboratoria</h2>\n <h2>Hola Mundo</h2>\n <h2>Mis Hobbies</h2>\n <ul>\n <li id=\"highlight\">Programar</li>\n <li class=\"bolded\">Bailar</li>\n <li class=\"bolded\">Ver peliculas</li>\n </ul>\n</body>\nconst items = document.getElementsByClassName(\"bolded\");\nComo sucede con todas las funciones que proporciona DOM, la función\ngetElementsByTagName() tiene un nombre muy largo, pero que lo hace\nautoexplicativo.
La función getElementsByTagName(nombreEtiqueta) obtiene una lista de nodos.\nde la página XHTML cuya etiqueta sea igual que el parámetro que se le pasa a la\nfunción.
<body>\n <h2>Hola Laboratoria</h2>\n <h2>Hola Mundo</h2>\n <h2>Mis Hobbies</h2>\n <ul>\n <li id=\"highlight\">Programar</li>\n <li class=\"bolded\">Bailar</li>\n <li class=\"bolded\">Ver peliculas</li>\n </ul>\n</body>\nconst titles = document.getElementsByTagName('h2');\n\nconsole.log(titles[0]);\nconsole.log(titles[1]);\nconsole.log(titles[2]);\n\nconst listItems = document.getElementsByTagName('li');\nconsole.log(listItems[0]);\nconsole.log(listItems[1]);\nconsole.log(listItems[2]);\n\nFunción que retorna el primer elemento que coincide con el selector CSS dado\ncomo parámetro.
\n<body>\n <h2>Hola Laboratoria</h2>\n <h2>Hola Mundo</h2>\n <h2>Mis Hobbies</h2>\n <ul>\n <li id=\"highlight\">Programar</li>\n <li class=\"bolded\">Bailar</li>\n <li class=\"bolded\">Ver peliculas</li>\n </ul>\n</body>\n// Selector css - id\nconst item = document.querySelector('#highlight');\nconsole.log(item);\n// Selector css - class\nconst item = document.querySelector('.bolded');\nconsole.log(item);\n// Selector css - etiqueta\nconst title = document.querySelector('h2');\nconsole.log(title);\nFunción que retorna una lista de nodos\nque coinciden con el selector CSS dado como parámetro.
\n<body>\n <h2>Hola Laboratoria</h2>\n <h2>Hola Mundo</h2>\n <h2>Mis Hobbies</h2>\n <ul>\n <li id=\"highlight\">Programar</li>\n <li class=\"bolded\">Bailar</li>\n <li class=\"bolded\">Ver peliculas</li>\n </ul>\n</body>\n// Selector css - etiqueta\nconst titles = document.querySelectorAll('h2');\nconsole.log(titles);\n// Selector css - etiqueta\nconst items = document.querySelectorAll('.bolded');\nconsole.log(items);\nPrepara tu editor de código, replica lo que realiza Lulú en el siguiente video y\nrefuerza lo aprendido.
\n![\"Métodos](\"https://img.youtube.com/vi/7iHu7s54vIk/0.jpg\")
También tenemos el link\nde la documentación oficial de Mozilla de qué es el DOM.
\nOtro link\nde cómo acceder a elementos del DOM con JS de la documentación oficial.
" + "body": "En esta unidad aprenderemos:
\ndocument.getElementById()document.getElementsByClassName()document.getElementsByTagName()document.querySelector()document.querySelectorAll()Una vez construido automáticamente el árbol completo de nodos DOM, ya es\nposible utilizar las funciones DOM para acceder de forma directa a cualquier\nnodo del árbol.
\nComo acceder a un nodo del árbol es equivalente a acceder a\n\"un trozo\" de la página, una vez construido el árbol, ya es posible manipular\nde forma sencilla la página: acceder al valor de un elemento, establecer el\nvalor de un elemento, mover un elemento de la página, crear y añadir nuevos\nelementos, etc.
\nDOM proporciona dos métodos alternativos para acceder a un nodo específico:\nacceso a través de sus nodos padre y acceso directo.
\nLas funciones que proporciona DOM para acceder a un nodo a través de sus nodos\npadre consisten en acceder al nodo raíz de la página y después a sus nodos\nhijos y a los nodos hijos de esos hijos y así sucesivamente hasta el último\nnodo de la rama terminada por el nodo buscado. Sin embargo, cuando se quiere\nacceder a un nodo específico, es mucho más rápido acceder directamente a ese\nnodo y no llegar hasta él descendiendo a través de todos sus nodos padre.
\nPor ese motivo, no se van a presentar las funciones necesarias para el acceso\njerárquico de nodos y se muestran solamente las que permiten acceder de forma\ndirecta a los nodos.
\nEs importante recordar que el acceso a los nodos, su modificación\ny su eliminación solamente es posible cuando el árbol DOM ha sido construido\ncompletamente, es decir, después de que la página XHTML se cargue por\ncompleto. Más adelante se verá cómo asegurar que un código JavaScript\nsolamente se ejecute cuando el navegador ha cargado entera la página XHTML.
\nPor último, te recomendamos que pruebes los siguientes métodos replicando el\ncódigo en tu editor favorito.
\nLa función getElementById() es la más utilizada cuando se desarrollan\naplicaciones web dinámicas. Se trata de la función preferida para acceder\ndirectamente a un nodo y poder leer o modificar sus propiedades.
La función getElementById() devuelve el elemento XHTML cuyo atributo id\ncoincide con el parámetro indicado en la función. Como el atributo id debe ser\núnico para cada elemento de una misma página, la función devuelve únicamente\nel nodo deseado.
<body>\n <h2>Hola Laboratoria</h2>\n <h2>Hola Mundo</h2>\n <h2>Mis Hobbies</h2>\n <ul>\n <li id=\"highlight\">Programar</li>\n <li class=\"bolded\">Bailar</li>\n <li class=\"bolded\">Ver peliculas</li>\n </ul>\n</body>\nconst firstItem = document.getElementById(\"highlight\");\nLa función getElementsByClassName() devuelve una lista de nodos\nXHTML cuyo atributo classcoincide con el parámetro indicado en la función.
<body>\n <h2>Hola Laboratoria</h2>\n <h2>Hola Mundo</h2>\n <h2>Mis Hobbies</h2>\n <ul>\n <li id=\"highlight\">Programar</li>\n <li class=\"bolded\">Bailar</li>\n <li class=\"bolded\">Ver peliculas</li>\n </ul>\n</body>\nconst items = document.getElementsByClassName(\"bolded\");\nComo sucede con todas las funciones que proporciona DOM, la función\ngetElementsByTagName() tiene un nombre muy largo, pero que lo hace\nautoexplicativo.
La función getElementsByTagName(nombreEtiqueta) obtiene una lista de nodos.\nde la página XHTML cuya etiqueta sea igual que el parámetro que se le pasa a la\nfunción.
<body>\n <h2>Hola Laboratoria</h2>\n <h2>Hola Mundo</h2>\n <h2>Mis Hobbies</h2>\n <ul>\n <li id=\"highlight\">Programar</li>\n <li class=\"bolded\">Bailar</li>\n <li class=\"bolded\">Ver peliculas</li>\n </ul>\n</body>\nconst titles = document.getElementsByTagName('h2');\n\nconsole.log(titles[0]);\nconsole.log(titles[1]);\nconsole.log(titles[2]);\n\nconst listItems = document.getElementsByTagName('li');\nconsole.log(listItems[0]);\nconsole.log(listItems[1]);\nconsole.log(listItems[2]);\n\nFunción que retorna el primer elemento que coincide con el selector CSS dado\ncomo parámetro.
\n<body>\n <h2>Hola Laboratoria</h2>\n <h2>Hola Mundo</h2>\n <h2>Mis Hobbies</h2>\n <ul>\n <li id=\"highlight\">Programar</li>\n <li class=\"bolded\">Bailar</li>\n <li class=\"bolded\">Ver peliculas</li>\n </ul>\n</body>\n// Selector css - id\nconst item = document.querySelector('#highlight');\nconsole.log(item);\n// Selector css - class\nconst item = document.querySelector('.bolded');\nconsole.log(item);\n// Selector css - etiqueta\nconst title = document.querySelector('h2');\nconsole.log(title);\nFunción que retorna una lista de nodos\nque coinciden con el selector CSS dado como parámetro.
\n<body>\n <h2>Hola Laboratoria</h2>\n <h2>Hola Mundo</h2>\n <h2>Mis Hobbies</h2>\n <ul>\n <li id=\"highlight\">Programar</li>\n <li class=\"bolded\">Bailar</li>\n <li class=\"bolded\">Ver peliculas</li>\n </ul>\n</body>\n// Selector css - etiqueta\nconst titles = document.querySelectorAll('h2');\nconsole.log(titles);\n// Selector css - etiqueta\nconst items = document.querySelectorAll('.bolded');\nconsole.log(items);\nPrepara tu editor de código, replica lo que realiza Lulú en el siguiente video y\nrefuerza lo aprendido.
\n\nTambién tenemos el link\nde la documentación oficial de Mozilla de qué es el DOM.
\nOtro link\nde cómo acceder a elementos del DOM con JS de la documentación oficial.
" }, "pt": { "title": "Modificando o DOM", - "body": "Nesta unidade aprenderemos:
\ndocument.getElementById()document.getElementsByClassName()document.getElementsByTagName()document.querySelector()document.querySelectorAll()Uma vez construído automaticamente a árvore completa de nós do DOM, já é\npossível utilizar as funções DOM para acessar de maneira direta qualquer nó da\nárvore.
\nComo acessar um nó da árvore equivale a acessar \"um pedaço\" da página, uma vez\nconstruída a árvore já é possível manipular de forma simples a página: acessar o\nvalor de um elemento, estabelecer o valor de um elemento, mover um elemento da\npágina, criar e adicionar novos elementos, etc.
\nDOM fornece dois métodos alternativos para acessar um nó específico: acesso por\nmeios de seus nós pais e acesso direto.
\nAs funções que o DOM disponibiliza para acessar um nó por meio de seus nós pais\nconsistem em acessar o nó raiz da página e depois seus nós filhos e os nós\nfilhos desses filhos e assim sucessivamente até o último nó folha contendo o nó\nprocurado. Porém, quando queremos acessar um nó específico, é muito mais rápido\nacessar diretamente esse nó e não chegar até ele caminhando por todos os seus\nnós pais.
\nPor essa razão, não vamos apresentar as funções necessárias para o acesso\nhierárquico dos nós e mostraremos somente as que permitem acesso os nós de forma\ndireta.
\nÉ importante lembrar que o acesso aos nós, sua modificação e sua eliminação\nsomente são possíveis quando a árvore do DOM estiver construída completamente,\nou seja, depois que a página XHTML estiver carregada completamente. Mais adiante\nveremos como garantir que um código JavaScript só seja executado quando o\nnavegador tenha carregado toda a página XHTML.
\nPor fim, tem recomendamos que prove os seguintes métodos replicando o código no\nseu editor de texto.
\nA função getElementById() é a mais utilizada quando desenvolvemos aplicações\nweb dinâmicas. É a função preferida para acessar diretamente um nó e poder ler\nsuas propriedades.
A função getElementById() retorna o elemento XHTML cujo atributo id coincide\ncom o parâmetro informando na função. Como o atributo id deve ser único para\ncada elemento de uma mesma página, a função devolve somente o nó desejado.
<body>\n <h2>Hello Laboratoria</h2>\n <h2>Hello Mundo</h2>\n <h2>My Hobbies</h2>\n <ul>\n <li id=\"highlight\">Programming</li>\n <li class=\"bolded\">Dancing</li>\n <li class=\"bolded\">Watch Netflix</li>\n </ul>\n</body>\nconst firstItem = document.getElementById(\"highlight\");\nA função getElementsByClassName() retorna uma lista de nós da página XHTML\ncuja o atributo class é igual ao parâmetro indicado na função.
<body>\n <h2>Hello Laboratoria</h2>\n <h2>Hello Mundo</h2>\n <h2>My Hobbies</h2>\n <ul>\n <li id=\"highlight\">Programming</li>\n <li class=\"bolded\">Dancing</li>\n <li class=\"bolded\">Watch Netflix</li>\n </ul>\n</body>\nconst items = document.getElementsByClassName(\"bolded\");\nComo algumas funções do DOM , a função getElementsByTagName() tem o nome\nmuito grande, mas autoexplicativo.
A função getElementsByTagName(tagName) retorna uma lista de nós da página\nXHTML cuja a tag é igual ao parâmetro que foi passado na função.
<body>\n <h2>Hello Laboratoria</h2>\n <h2>Hello Mundo</h2>\n <h2>My Hobbies</h2>\n <ul>\n <li id=\"highlight\">Programming</li>\n <li class=\"bolded\">Dancing</li>\n <li class=\"bolded\">Watch Netflix</li>\n </ul>\n</body>\nconst titles = document.getElementsByTagName('h2');\nconsole.log(titles[0]);\nconsole.log(titles[1]);\nconsole.log(titles[2]);\n\nconst listItems = document.getElementsByTagName('li');\nconsole.log(listItems[0]);\nconsole.log(listItems[1]);\nconsole.log(listItems[2]);\nEstá função retorna o primeiro elemento que coincide com o seletor CSS passado\ncomo parâmetro.
<body>\n <h2>Hello Laboratoria</h2>\n <h2>Hello Mundo</h2>\n <h2>My Hobbies</h2>\n <ul>\n <li id=\"highlight\">Programming</li>\n <li class=\"bolded\">Dancing</li>\n <li class=\"bolded\">Watch Netflix</li>\n </ul>\n</body>\n// Selector css - id\nconst item = document.querySelector('#highlight');\nconsole.log(item);\n// Selector css - class\nconst item = document.querySelector('.bolded');\nconsole.log(item);\n// Selector css - tag\nconst title = document.querySelector('h2');\nconsole.log(title);\nEstá função retorna uma lista de nós que coincidem com o seletor CSS passado\ncomo parâmetro.
<body>\n <h2>Hello Laboratoria</h2>\n <h2>Hello Mundo</h2>\n <h2>My Hobbies</h2>\n <ul>\n <li id=\"highlight\">Programming</li>\n <li class=\"bolded\">Dancing</li>\n <li class=\"bolded\">Watch Netflix</li>\n </ul>\n</body>\n// Selector css - tag\nconst titles = document.querySelectorAll('h2');\nconsole.log(titles);\n// Selector css - class\nconst items = document.querySelectorAll('.bolded');\nconsole.log(items);\nPrepare seueditor, replique o que Daniel realiza no seguinte vídeo e\nreforce seu aprendizado.
\n![\"Manipulando\nHTML\"](\"https://img.youtube.com/vi/6mzK28lEZsI/0.jpg\")
Também recomendamos o\nlink\nda documentação oficinal do Mozilla sobre o DOM.
" + "body": "Nesta unidade aprenderemos:
\ndocument.getElementById()document.getElementsByClassName()document.getElementsByTagName()document.querySelector()document.querySelectorAll()Uma vez construído automaticamente a árvore completa de nós do DOM, já é\npossível utilizar as funções DOM para acessar de maneira direta qualquer nó da\nárvore.
\nComo acessar um nó da árvore equivale a acessar \"um pedaço\" da página, uma vez\nconstruída a árvore já é possível manipular de forma simples a página: acessar o\nvalor de um elemento, estabelecer o valor de um elemento, mover um elemento da\npágina, criar e adicionar novos elementos, etc.
\nDOM fornece dois métodos alternativos para acessar um nó específico: acesso por\nmeios de seus nós pais e acesso direto.
\nAs funções que o DOM disponibiliza para acessar um nó por meio de seus nós pais\nconsistem em acessar o nó raiz da página e depois seus nós filhos e os nós\nfilhos desses filhos e assim sucessivamente até o último nó folha contendo o nó\nprocurado. Porém, quando queremos acessar um nó específico, é muito mais rápido\nacessar diretamente esse nó e não chegar até ele caminhando por todos os seus\nnós pais.
\nPor essa razão, não vamos apresentar as funções necessárias para o acesso\nhierárquico dos nós e mostraremos somente as que permitem acesso os nós de forma\ndireta.
\nÉ importante lembrar que o acesso aos nós, sua modificação e sua eliminação\nsomente são possíveis quando a árvore do DOM estiver construída completamente,\nou seja, depois que a página XHTML estiver carregada completamente. Mais adiante\nveremos como garantir que um código JavaScript só seja executado quando o\nnavegador tenha carregado toda a página XHTML.
\nPor fim, tem recomendamos que prove os seguintes métodos replicando o código no\nseu editor de texto.
\nA função getElementById() é a mais utilizada quando desenvolvemos aplicações\nweb dinâmicas. É a função preferida para acessar diretamente um nó e poder ler\nsuas propriedades.
A função getElementById() retorna o elemento XHTML cujo atributo id coincide\ncom o parâmetro informando na função. Como o atributo id deve ser único para\ncada elemento de uma mesma página, a função devolve somente o nó desejado.
<body>\n <h2>Hello Laboratoria</h2>\n <h2>Hello Mundo</h2>\n <h2>My Hobbies</h2>\n <ul>\n <li id=\"highlight\">Programming</li>\n <li class=\"bolded\">Dancing</li>\n <li class=\"bolded\">Watch Netflix</li>\n </ul>\n</body>\nconst firstItem = document.getElementById(\"highlight\");\nA função getElementsByClassName() retorna uma lista de nós da página XHTML\ncuja o atributo class é igual ao parâmetro indicado na função.
<body>\n <h2>Hello Laboratoria</h2>\n <h2>Hello Mundo</h2>\n <h2>My Hobbies</h2>\n <ul>\n <li id=\"highlight\">Programming</li>\n <li class=\"bolded\">Dancing</li>\n <li class=\"bolded\">Watch Netflix</li>\n </ul>\n</body>\nconst items = document.getElementsByClassName(\"bolded\");\nComo algumas funções do DOM , a função getElementsByTagName() tem o nome\nmuito grande, mas autoexplicativo.
A função getElementsByTagName(tagName) retorna uma lista de nós da página\nXHTML cuja a tag é igual ao parâmetro que foi passado na função.
<body>\n <h2>Hello Laboratoria</h2>\n <h2>Hello Mundo</h2>\n <h2>My Hobbies</h2>\n <ul>\n <li id=\"highlight\">Programming</li>\n <li class=\"bolded\">Dancing</li>\n <li class=\"bolded\">Watch Netflix</li>\n </ul>\n</body>\nconst titles = document.getElementsByTagName('h2');\nconsole.log(titles[0]);\nconsole.log(titles[1]);\nconsole.log(titles[2]);\n\nconst listItems = document.getElementsByTagName('li');\nconsole.log(listItems[0]);\nconsole.log(listItems[1]);\nconsole.log(listItems[2]);\nEstá função retorna o primeiro elemento que coincide com o seletor CSS passado\ncomo parâmetro.
<body>\n <h2>Hello Laboratoria</h2>\n <h2>Hello Mundo</h2>\n <h2>My Hobbies</h2>\n <ul>\n <li id=\"highlight\">Programming</li>\n <li class=\"bolded\">Dancing</li>\n <li class=\"bolded\">Watch Netflix</li>\n </ul>\n</body>\n// Selector css - id\nconst item = document.querySelector('#highlight');\nconsole.log(item);\n// Selector css - class\nconst item = document.querySelector('.bolded');\nconsole.log(item);\n// Selector css - tag\nconst title = document.querySelector('h2');\nconsole.log(title);\nEstá função retorna uma lista de nós que coincidem com o seletor CSS passado\ncomo parâmetro.
<body>\n <h2>Hello Laboratoria</h2>\n <h2>Hello Mundo</h2>\n <h2>My Hobbies</h2>\n <ul>\n <li id=\"highlight\">Programming</li>\n <li class=\"bolded\">Dancing</li>\n <li class=\"bolded\">Watch Netflix</li>\n </ul>\n</body>\n// Selector css - tag\nconst titles = document.querySelectorAll('h2');\nconsole.log(titles);\n// Selector css - class\nconst items = document.querySelectorAll('.bolded');\nconsole.log(items);\nPrepare seueditor, replique o que Daniel realiza no seguinte vídeo e\nreforce seu aprendizado.
\n\nTambém recomendamos o\nlink\nda documentação oficinal do Mozilla sobre o DOM.
" } } }, @@ -103,11 +103,11 @@ "intl": { "es": { "title": "Modificando el DOM", - "body": "En esta unidad aprenderemos:
\ndocument.createTextNode()document.createElement().appendChild().removeChild().innerHTML.textContent.innerText.value.replaceChild().insertBefore()En el tema anterior vimos qué es el DOM y cómo seleccionar nodos utilizando\nJavaScript. En esta ocasión vamos a utilizar el DOM para modificar el\ndocumento HTML utilizando JavaScript.
\nEl DOM nos ofrece una serie de métodos para añadir nodos al árbol de un\ndocumento, pero los más básicos son .createElement(), que crea un elemento, y\n.createTextNode(), que crea un nodo de texto.
Crear y añadir a la página un nuevo elemento XHTML sencillo consta de cuatro\npasos diferentes:
\nEste proceso de creación de nuevos nodos implica la utilización de tres\nfunciones DOM:
\ncreateElement(etiqueta)
Crea un nodo de tipo Element que representa al elemento XHTML cuya etiqueta\nse pasa como parámetro.
\ncreateTextNode(contenido)
Crea un nodo de tipo Text que almacena el contenido textual de los elementos\nXHTML.
\nnodoPadre.appendChild(nodoHijo)
Añade un nodo como hijo de otro nodo. Si se ocupa esta función para añadir el\nnodo Text como hijo del nodo Element y a su vez este nodo Element como\nhijo del nodo existente en el HTML, appendChild se utiliza al menos dos\nveces. Con esta función el nuevo nodo se incluye inmediatamente después de\nlos hijos ya existentes.
De este modo, si se quiere añadir un párrafo simple al final de una página\nXHTML, es necesario incluir el siguiente código JavaScript.
\n// Crear nodo de tipo Element\nconst paragraph = document.createElement(\"p\");\n// Crear nodo de tipo Text\nconst content = document.createTextNode(\"Hola Mundo!\");\n// Añadir el nodo Text como hijo del nodo Element\nparagraph.appendChild(content);\n// Añadir el nodo Element como hijo de la pagina\ndocument.body.appendChild(parrafo);\nHay que recordar que el DOM es la interfaz que conecta el documento HTML con\nJavaScript. Es por eso que, al utilizar .createElement(), el nodo no será\nvisible, ya que hasta este momento no es más que una especie de fantasma que\nexiste en el documento, pero hasta que no se le asigne una posición en el árbol\nno se mostrará al usuario. De la misma manera, con la función\n.createTextNode() el texto existe, pero en ninguna parte mas. Es necesario\nconvertir cualquiera de estos nodos en hijo de otro nodo existente por medio de\nla función .appendChild().
Dado que podemos incluir nuevos hijos en un nodo, tiene sentido que podamos\neliminarlos. Para ello existe el siguiente método:
\nremoveChild()Para quitar un nodo del documento tenemos que seleccionar el padre del nodo, y\ndesde ahí, remover el nodo deseado.
\nSi no conocemos el padre del nodo podemos seleccionar directamente el nodo,\nobtener el padre, con .parentNode, para después utilizar .removeChild()\ny eliminarlo.
Sintaxis:
\npadre.removeChild(nodoAEliminar);\nconst container = document.getElementById('container');\nconst paragraph = document.getElementById('paragraph');\ncontainer.removeChild(paragraph);\n\n/*\n * Con el nodo seleccionado utilizamos `.parentNode`\n * para seleccionar el padre. Desde el padre utilizamos\n * `.removeChild()` para eliminar el nodo seleccionado.\n */\n\nconst paragraph = document.getElementById('paragraph');\nparagraph.parentNode.removeChild(paragraph);\nCuando se elimina un nodo, también se eliminan automáticamente todos los nodos\nhijos que tenga, por lo que no es necesario borrar manualmente cada nodo hijo.
\nAquí arriba te hemos mostrado algunas funciones con las cuales puedes empezar a\nguiarte, pero es importante mencionar que a la hora de programar no hay una\núnica solución posible y la solución que uno como desarrollador puede ofrecer\ndepende mucho de las necesidades de cada proyecto, así que te presentaremos\notros métodos y propiedades que puedes comenzar a probar.
\nComencemos por .textContent y .innerHTML que funcionan como propiedades para\nobtener y establecer el valor de un elemento específico.
textContentAl utilizar textContent sobre un nodo, se va a mostrar el contenido del texto\nque exista en el nodo y en los hijos del mismo. Si hay etiquetas HTML, son\nignoradas. Si se le asigna un valor, va a reemplazar todo el contenido del nodo\npor la cadena de texto que se le asigne. Si la cadena de texto contiene\netiquetas HTML, éstas se van a escapar y se van a visualizar como texto.\nLos cambios realizados no van a ser permanentes, el documento va a regresar a\nsu estado original una vez que se recargue el sitio.
\n![\"textContent\"](\"http://blog.eamexicano.com/wp-content/uploads/2014/02/textcontent.png\")
Funciona de manera similar a textContent pero, además de mostrar el texto que\nexista en el nodo seleccionado y en los hijos, se van a mostrar las etiquetas\nde HTML que pudieran existir. Si se le asigna un valor, se va a reemplazar el\ncontenido del nodo incluyendo a sus hijos por la cadena de texto que se le\nasigne. A diferencia de textContent, si dentro de la cadena de texto asignada\nexisten etiquetas HTML, se van a visualizar en el navegador. Los cambios\nrealizados no van a ser permanentes, el documento va a regresar a su estado\noriginal una vez que se recargue el sitio.
![\"textContent\"](\"http://blog.eamexicano.com/wp-content/uploads/2014/02/innerhtml.png\")
En el siguiente video vemos de forma práctica, cómo utilizar .innerHTML y\n.textContent:
Modificando, reemplazando y eliminando nodos
\nLa propiedad value establece o devuelve el valor del atributo value de un\nelemento html, siempre y cuando en dicho elemento exista la propiedad value,\nalgunas de las etiquetas que contienen la propiedad value son elementos de\nformularios.
Sintaxis
\nelemento.value;elemento.value = texto;\n\nNota: el valor devuelto es un string, que representa el valor del campo de\ntexto.
\n
Puedes ver un ejemplo más claro en este pen.
\nNos permite elegir un nodo del documento e incluir otro antes que él.
\npadre.insertBefore(nuevoNodo, nodoDeReferencia);\nSi tuviéramos un fragmento de un documento como éste:
\n<div id=\"container\">\n <p>Primer párrafo.</p>\n <p>Segundo párrafo.</p>\n</div>\ny quisiéramos añadir un nuevo párrafo antes del segundo, lo haríamos así:
\n// Creamos el nuevo párrafo con su hijo texto\nconst newParagraph = document.createElement('p');\nconst paragraphText = document.createTextNode('Nuevo párrafo.');\nnewParagraph.appendChild(paragraphText);\n\n// Guardamos en una variable el padre y en otra variable el segundo párrafo\nconst container = document.getElementById('container');\nconst secondParagraph = container.getElementsByTagName('p')[1];\n\n// Y ahora lo insertamos\ncontainer.insertBefore(newParagraph, secondParagraph);\nEste método se utiliza para reemplazar un nodo secundario por otro. Toma como\nargumentos dos nodos: un nuevo nodo y el nodo a ser reemplazado. El nodo\nreemplazado debe ser un elemento secundario del elemento al que se llama el\nmétodo.
\nSintaxis:
\npadre.replaceChild(nuevoNodo, nodoAReemplazar);\nCon el mismo HTML que para el ejemplo de .insertBefore(), si quisiéramos\nsustituir el segundo párrafo por el que creamos, lo haríamos así:
container.replaceChild(newParagraph, secondParagraph);\n\n\nTenga en cuenta que tanto
\n.replaceChild()como.insertBefore()esperan el\nnuevo nodo como su primer argumento.
Te recomendamos replicar los ejemplos de código que se han ido mostrando a la\nlargo de la lectura. Además de poner en práctica la teoría con los siguientes\nvídeos.
\nEste video dura 8:18, en el minuto 2:25 empieza a utilizar los métodos\n.createElement() y .createTextNode().
Este otro video agrega los nodos creados al DOM.
\n\nEn esta unidad aprenderemos:
\ndocument.createTextNode()document.createElement().appendChild().removeChild().innerHTML.textContent.innerText.value.replaceChild().insertBefore()En el tema anterior vimos qué es el DOM y cómo seleccionar nodos utilizando\nJavaScript. En esta ocasión vamos a utilizar el DOM para modificar el\ndocumento HTML utilizando JavaScript.
\nEl DOM nos ofrece una serie de métodos para añadir nodos al árbol de un\ndocumento, pero los más básicos son .createElement(), que crea un elemento, y\n.createTextNode(), que crea un nodo de texto.
Crear y añadir a la página un nuevo elemento XHTML sencillo consta de cuatro\npasos diferentes:
\nEste proceso de creación de nuevos nodos implica la utilización de tres\nfunciones DOM:
\ncreateElement(etiqueta)
Crea un nodo de tipo Element que representa al elemento XHTML cuya etiqueta\nse pasa como parámetro.
\ncreateTextNode(contenido)
Crea un nodo de tipo Text que almacena el contenido textual de los elementos\nXHTML.
\nnodoPadre.appendChild(nodoHijo)
Añade un nodo como hijo de otro nodo. Si se ocupa esta función para añadir el\nnodo Text como hijo del nodo Element y a su vez este nodo Element como\nhijo del nodo existente en el HTML, appendChild se utiliza al menos dos\nveces. Con esta función el nuevo nodo se incluye inmediatamente después de\nlos hijos ya existentes.
De este modo, si se quiere añadir un párrafo simple al final de una página\nXHTML, es necesario incluir el siguiente código JavaScript.
\n// Crear nodo de tipo Element\nconst paragraph = document.createElement(\"p\");\n// Crear nodo de tipo Text\nconst content = document.createTextNode(\"Hola Mundo!\");\n// Añadir el nodo Text como hijo del nodo Element\nparagraph.appendChild(content);\n// Añadir el nodo Element como hijo de la pagina\ndocument.body.appendChild(parrafo);\nHay que recordar que el DOM es la interfaz que conecta el documento HTML con\nJavaScript. Es por eso que, al utilizar .createElement(), el nodo no será\nvisible, ya que hasta este momento no es más que una especie de fantasma que\nexiste en el documento, pero hasta que no se le asigne una posición en el árbol\nno se mostrará al usuario. De la misma manera, con la función\n.createTextNode() el texto existe, pero en ninguna parte mas. Es necesario\nconvertir cualquiera de estos nodos en hijo de otro nodo existente por medio de\nla función .appendChild().
Dado que podemos incluir nuevos hijos en un nodo, tiene sentido que podamos\neliminarlos. Para ello existe el siguiente método:
\nremoveChild()Para quitar un nodo del documento tenemos que seleccionar el padre del nodo, y\ndesde ahí, remover el nodo deseado.
\nSi no conocemos el padre del nodo podemos seleccionar directamente el nodo,\nobtener el padre, con .parentNode, para después utilizar .removeChild()\ny eliminarlo.
Sintaxis:
\npadre.removeChild(nodoAEliminar);\nconst container = document.getElementById('container');\nconst paragraph = document.getElementById('paragraph');\ncontainer.removeChild(paragraph);\n\n/*\n * Con el nodo seleccionado utilizamos `.parentNode`\n * para seleccionar el padre. Desde el padre utilizamos\n * `.removeChild()` para eliminar el nodo seleccionado.\n */\n\nconst paragraph = document.getElementById('paragraph');\nparagraph.parentNode.removeChild(paragraph);\nCuando se elimina un nodo, también se eliminan automáticamente todos los nodos\nhijos que tenga, por lo que no es necesario borrar manualmente cada nodo hijo.
\nAquí arriba te hemos mostrado algunas funciones con las cuales puedes empezar a\nguiarte, pero es importante mencionar que a la hora de programar no hay una\núnica solución posible y la solución que uno como desarrollador puede ofrecer\ndepende mucho de las necesidades de cada proyecto, así que te presentaremos\notros métodos y propiedades que puedes comenzar a probar.
\nComencemos por .textContent y .innerHTML que funcionan como propiedades para\nobtener y establecer el valor de un elemento específico.
textContentAl utilizar textContent sobre un nodo, se va a mostrar el contenido del texto\nque exista en el nodo y en los hijos del mismo. Si hay etiquetas HTML, son\nignoradas. Si se le asigna un valor, va a reemplazar todo el contenido del nodo\npor la cadena de texto que se le asigne. Si la cadena de texto contiene\netiquetas HTML, éstas se van a escapar y se van a visualizar como texto.\nLos cambios realizados no van a ser permanentes, el documento va a regresar a\nsu estado original una vez que se recargue el sitio.
\n
Funciona de manera similar a textContent pero, además de mostrar el texto que\nexista en el nodo seleccionado y en los hijos, se van a mostrar las etiquetas\nde HTML que pudieran existir. Si se le asigna un valor, se va a reemplazar el\ncontenido del nodo incluyendo a sus hijos por la cadena de texto que se le\nasigne. A diferencia de textContent, si dentro de la cadena de texto asignada\nexisten etiquetas HTML, se van a visualizar en el navegador. Los cambios\nrealizados no van a ser permanentes, el documento va a regresar a su estado\noriginal una vez que se recargue el sitio.
En el siguiente video vemos de forma práctica, cómo utilizar .innerHTML y\n.textContent:
La propiedad value establece o devuelve el valor del atributo value de un\nelemento html, siempre y cuando en dicho elemento exista la propiedad value,\nalgunas de las etiquetas que contienen la propiedad value son elementos de\nformularios.
Sintaxis
\nelemento.value;elemento.value = texto;\n\nNota: el valor devuelto es un string, que representa el valor del campo de\ntexto.
\n
Puedes ver un ejemplo más claro en este pen.
\nNos permite elegir un nodo del documento e incluir otro antes que él.
\npadre.insertBefore(nuevoNodo, nodoDeReferencia);\nSi tuviéramos un fragmento de un documento como éste:
\n<div id=\"container\">\n <p>Primer párrafo.</p>\n <p>Segundo párrafo.</p>\n</div>\ny quisiéramos añadir un nuevo párrafo antes del segundo, lo haríamos así:
\n// Creamos el nuevo párrafo con su hijo texto\nconst newParagraph = document.createElement('p');\nconst paragraphText = document.createTextNode('Nuevo párrafo.');\nnewParagraph.appendChild(paragraphText);\n\n// Guardamos en una variable el padre y en otra variable el segundo párrafo\nconst container = document.getElementById('container');\nconst secondParagraph = container.getElementsByTagName('p')[1];\n\n// Y ahora lo insertamos\ncontainer.insertBefore(newParagraph, secondParagraph);\nEste método se utiliza para reemplazar un nodo secundario por otro. Toma como\nargumentos dos nodos: un nuevo nodo y el nodo a ser reemplazado. El nodo\nreemplazado debe ser un elemento secundario del elemento al que se llama el\nmétodo.
\nSintaxis:
\npadre.replaceChild(nuevoNodo, nodoAReemplazar);\nCon el mismo HTML que para el ejemplo de .insertBefore(), si quisiéramos\nsustituir el segundo párrafo por el que creamos, lo haríamos así:
container.replaceChild(newParagraph, secondParagraph);\n\n\nTenga en cuenta que tanto
\n.replaceChild()como.insertBefore()esperan el\nnuevo nodo como su primer argumento.
Te recomendamos replicar los ejemplos de código que se han ido mostrando a la\nlargo de la lectura. Además de poner en práctica la teoría con los siguientes\nvídeos.
\nEste video dura 8:18, en el minuto 2:25 empieza a utilizar los métodos\n.createElement() y .createTextNode().
Este otro video agrega los nodos creados al DOM.
\n\nNesta unidade aprenderemos:
\ndocument.createTextNode()document.createElement().appendChild().removeChild().innerHTML.textContent.innerText.value.replaceChild().insertBefore()No tópico anterior vimos o que é o DOM e como selecionar nós usando JavaScript.\nDesta vez vamos usar o DOM para modificar o documento HTML usando JavaScript.
\nO DOM nos oferece uma série de métodos para adicionar nós a árvore de um\ndocumento, os métodos mais básicos são .createElement(), para criar um\nelemento e .createTextNode(), para criar um nós de texto.
Criar e adicionar a uma página um novo elemento é simples, você precisa de\napenas quatro passos:
\nElement que represente o elemento.Text que presente o conteúdo do elemento.Text como filho do nós Element.Element na página.Este processo de criação de novos nós implica na utilização de três funções de\nDOM:
\ncreateElement(tag)
Cria um nós do tipo Element que representa um elemento XHTML cuja a tag\né passada como parâmetro.
createTextNode(conteúdo)
Criar um nós do tipo Text que armazena o conteúdo de texto dos elementos.
nóPai.appendChild(nóFilho)
Adiciona o nóFilho dentro do nóPai.
Desta maneira, se quiser adicionar um parágrafo no final de um página, é\nnecessário incluir o seguinte código JavaScript.
\n// Cria o nó do tipo Element\nconst paragraph = document.createElement(\"p\");\n// Cria o nó do tipo Text\nconst content = document.createTextNode(\"Hola Mundo!\");\n// Adiciona o nó Text como filho do nós Element\nparagraph.appendChild(content);\n// Adiciona o nó Element como filho da página\ndocument.body.appendChild(paragraph);\nTemos que lembrar que o DOM é uma interface que conecta o documento HTML com o\nJavaScript. É por isso que ao utilizar .createElement(), o nó não ficará\nvisível, ele será uma espécie de fantasma dentro do documento. Isso ocorre da\nmesma maneira com a função .createTextNode() e o texto passado como parâmetro.\nPara que esses elementos sejam visíveis na tela, temos que lembrar de utilizar\nalguma função como .appendChild() para adicionar esses elementos ao documento\nHTML.
Como podemos incluir novos filhos em um nó, faz sentido eliminá-los. Para isso,\nexiste o seguinte método:
\nremoveChild()Para remover um nó do documento, temos que selecionar o pai do nó e, a partir\ndaí, remover o nó desejado.
\nSe não soubermos o pai do nó, podemos selecionar diretamente o nó, obter o pai\n(com .parentElement) e usar .removeChild() para excluí-lo.
Sintaxis:
\n pai.removeChild(nóParaEliminacao);\nconst container = document.getElementById('container');\nconst paragraph = document.getElementById('paragraph');\ncontainer.removeChild(paragraph);\n\n/*\n * Com o nó selecionado utilizamos '.parentElement'\n * para selecionar o pai. A partir do pai utilizamos\n * '.removeChild()' para eliminar o nó selecionado.\n */\n\nconst paragraph = document.getElementById('paragraph');\nparagraph.parentNode.removeChild(paragraph);\nCuando se elimina un nodo, también se eliminan automáticamente todos los nodos\nhijos que tenga, por lo que no es necesario borrar manualmente cada nodo hijo.
\nA cima mostramos algumas funções com as quais você pode começar a praticar, mas\né importante mencionar que na hora de programar não existe apenas uma única\nmaneira de fazer ou uma única solução possível. Pensando nisso vamos te\napresentar alguns outros métodos e propriedade para você praticar.
\nOs atributos .textContent e .innerHTML funcionam como propriedades para\nobter e modificar o valor de um elemento específico.
textContentAo usar textContent em um nó, ele mostrará o conteúdo do texto que existe no\nnó e seus filhos. Se houver tags HTML, elas serão ignoradas. Se um valor for\natribuído, ele substituirá todo o conteúdo do nó pela string atribuída a ele.\nSe a string contiver tags HTML, elas serão interpretadas e exibidas como\ntexto. As alterações feitas não serão permanentes, o documento retornará ao seu\nestado original assim que o site for recarregado.
![\"textContent\"](\"https://user-images.githubusercontent.com/11894994/59518266-b5a3d980-8e9b-11e9-8ee1-1624d0047213.png\")
Funciona de maneira semelhante ao textContent, mas, além de mostrar o texto que\nexiste no nó selecionado e nos filhos, ele mostrará as tags HTML que podem\nexistir. Se um valor for atribuído a ele, o conteúdo do nó será substituído,\nincluindo seus filhos, pela sequência de texto atribuída a ele. Ao contrário\ndotextContent, se as tags HTML existirem na string atribuída, elas serão\nexibidas no navegador. As alterações feitas não serão permanentes, o documento\nretornará ao seu estado original assim que o site for recarregado.
![\"textContent\"](\"https://user-images.githubusercontent.com/11894994/59518324-cf452100-8e9b-11e9-82a0-99a3895f5ad1.png\")
No vídeo a seguir, vemos de uma maneira prática, como usar .innerHTML e\n.textContent:
Modificando, substituindo e excluindo nós
\nA propriedade value retorna o valor do atributo value de um elemento HTML,\nsempre e quando existir a propriedade value no elemento. Algunas das tags\nque contém a propriedade value são os elementos de formulário.
Sintaxis
\nelemento.value;elemento.value = texto;\n\nNota: o valor de retorno é uma string, que representa o valor do campo de texto.
\n
Você pode ver um exemplo mais claro neste\npen .
\nPermite escolher um nó do documento e incluir outro antes dele.
\npai.insertBefore(novoNo, noDeReferencia);\nSe tivéssemos um fragmento de um documento como este:
\n<div id=\"container\">\n <p>Primeiro parágrafo</p>\n <p>Segundo paragráfo</p>\n</div>\ne quiséssemos adicionar um novo parágrafo antes do segundo, faríamos assim:
\n// Criamos o novo parágrafo com seu texto filho\nconst newParagraph = document.createElement('p');\nconst paragraphText = document.createTextNode('Novo parágrafo.');\nnewParagraph.appendChild(paragraphText);\n\n// Armazenamos em uma variável o pai e em outra variável o segundo parágrafo\nconst container = document.getElementById('container');\nconst secondParagraph = container.getElementsByTagName('p')[1];\n\n// Agora inserimos\ncontainer.insertBefore(newParagraph, secondParagraph);\nEste método é usado para substituir um nó secundário por outro. Tome como\nargumentos dois nós: um novo nó e o nó a ser substituído. O nó substituído deve\nser um filho do elemento para o qual o método é chamado.
\nSintaxe:
\n pai.replaceChild(novoNo, noParaSubstituir);\nCom o mesmo HTML do exemplo de .insertBefore(), se quiséssemos substituir o\nsegundo parágrafo pelo qual criamos, faríamos assim:
container.replaceChild(newParagraph, secondParagraph);\n\n\nNote que tanto
\n.replaceChild()tanto quanto.insertBefore()esperam que o\nnovo nó seja o primeiro argumento.
Nos vídeos a seguir vamos colocar em prática a parte teórica já que eles usam os\nmétodos como criar, adicionar e eliminar os nós do DOM por meio do Javascript e\nassim poder criar páginas dinâmicas. sugerimos que você faça o exercício junto\ncom o vídeo e se necessário, você pode ir pausando.
\n![\"Criando](\"https://img.youtube.com/vi/fDz1IgduZxA/0.jpg\")
![\"Adicionando](\"https://img.youtube.com/vi/7MKCrho0nho/0.jpg\")
Nesta unidade aprenderemos:
\ndocument.createTextNode()document.createElement().appendChild().removeChild().innerHTML.textContent.innerText.value.replaceChild().insertBefore()No tópico anterior vimos o que é o DOM e como selecionar nós usando JavaScript.\nDesta vez vamos usar o DOM para modificar o documento HTML usando JavaScript.
\nO DOM nos oferece uma série de métodos para adicionar nós a árvore de um\ndocumento, os métodos mais básicos são .createElement(), para criar um\nelemento e .createTextNode(), para criar um nós de texto.
Criar e adicionar a uma página um novo elemento é simples, você precisa de\napenas quatro passos:
\nElement que represente o elemento.Text que presente o conteúdo do elemento.Text como filho do nós Element.Element na página.Este processo de criação de novos nós implica na utilização de três funções de\nDOM:
\ncreateElement(tag)
Cria um nós do tipo Element que representa um elemento XHTML cuja a tag\né passada como parâmetro.
createTextNode(conteúdo)
Criar um nós do tipo Text que armazena o conteúdo de texto dos elementos.
nóPai.appendChild(nóFilho)
Adiciona o nóFilho dentro do nóPai.
Desta maneira, se quiser adicionar um parágrafo no final de um página, é\nnecessário incluir o seguinte código JavaScript.
\n// Cria o nó do tipo Element\nconst paragraph = document.createElement(\"p\");\n// Cria o nó do tipo Text\nconst content = document.createTextNode(\"Hola Mundo!\");\n// Adiciona o nó Text como filho do nós Element\nparagraph.appendChild(content);\n// Adiciona o nó Element como filho da página\ndocument.body.appendChild(paragraph);\nTemos que lembrar que o DOM é uma interface que conecta o documento HTML com o\nJavaScript. É por isso que ao utilizar .createElement(), o nó não ficará\nvisível, ele será uma espécie de fantasma dentro do documento. Isso ocorre da\nmesma maneira com a função .createTextNode() e o texto passado como parâmetro.\nPara que esses elementos sejam visíveis na tela, temos que lembrar de utilizar\nalguma função como .appendChild() para adicionar esses elementos ao documento\nHTML.
Como podemos incluir novos filhos em um nó, faz sentido eliminá-los. Para isso,\nexiste o seguinte método:
\nremoveChild()Para remover um nó do documento, temos que selecionar o pai do nó e, a partir\ndaí, remover o nó desejado.
\nSe não soubermos o pai do nó, podemos selecionar diretamente o nó, obter o pai\n(com .parentElement) e usar .removeChild() para excluí-lo.
Sintaxis:
\n pai.removeChild(nóParaEliminacao);\nconst container = document.getElementById('container');\nconst paragraph = document.getElementById('paragraph');\ncontainer.removeChild(paragraph);\n\n/*\n * Com o nó selecionado utilizamos '.parentElement'\n * para selecionar o pai. A partir do pai utilizamos\n * '.removeChild()' para eliminar o nó selecionado.\n */\n\nconst paragraph = document.getElementById('paragraph');\nparagraph.parentNode.removeChild(paragraph);\nCuando se elimina un nodo, también se eliminan automáticamente todos los nodos\nhijos que tenga, por lo que no es necesario borrar manualmente cada nodo hijo.
\nA cima mostramos algumas funções com as quais você pode começar a praticar, mas\né importante mencionar que na hora de programar não existe apenas uma única\nmaneira de fazer ou uma única solução possível. Pensando nisso vamos te\napresentar alguns outros métodos e propriedade para você praticar.
\nOs atributos .textContent e .innerHTML funcionam como propriedades para\nobter e modificar o valor de um elemento específico.
textContentAo usar textContent em um nó, ele mostrará o conteúdo do texto que existe no\nnó e seus filhos. Se houver tags HTML, elas serão ignoradas. Se um valor for\natribuído, ele substituirá todo o conteúdo do nó pela string atribuída a ele.\nSe a string contiver tags HTML, elas serão interpretadas e exibidas como\ntexto. As alterações feitas não serão permanentes, o documento retornará ao seu\nestado original assim que o site for recarregado.
Funciona de maneira semelhante ao textContent, mas, além de mostrar o texto que\nexiste no nó selecionado e nos filhos, ele mostrará as tags HTML que podem\nexistir. Se um valor for atribuído a ele, o conteúdo do nó será substituído,\nincluindo seus filhos, pela sequência de texto atribuída a ele. Ao contrário\ndotextContent, se as tags HTML existirem na string atribuída, elas serão\nexibidas no navegador. As alterações feitas não serão permanentes, o documento\nretornará ao seu estado original assim que o site for recarregado.
No vídeo a seguir, vemos de uma maneira prática, como usar .innerHTML e\n.textContent:
A propriedade value retorna o valor do atributo value de um elemento HTML,\nsempre e quando existir a propriedade value no elemento. Algunas das tags\nque contém a propriedade value são os elementos de formulário.
Sintaxis
\nelemento.value;elemento.value = texto;\n\nNota: o valor de retorno é uma string, que representa o valor do campo de texto.
\n
Você pode ver um exemplo mais claro neste\npen .
\nPermite escolher um nó do documento e incluir outro antes dele.
\npai.insertBefore(novoNo, noDeReferencia);\nSe tivéssemos um fragmento de um documento como este:
\n<div id=\"container\">\n <p>Primeiro parágrafo</p>\n <p>Segundo paragráfo</p>\n</div>\ne quiséssemos adicionar um novo parágrafo antes do segundo, faríamos assim:
\n// Criamos o novo parágrafo com seu texto filho\nconst newParagraph = document.createElement('p');\nconst paragraphText = document.createTextNode('Novo parágrafo.');\nnewParagraph.appendChild(paragraphText);\n\n// Armazenamos em uma variável o pai e em outra variável o segundo parágrafo\nconst container = document.getElementById('container');\nconst secondParagraph = container.getElementsByTagName('p')[1];\n\n// Agora inserimos\ncontainer.insertBefore(newParagraph, secondParagraph);\nEste método é usado para substituir um nó secundário por outro. Tome como\nargumentos dois nós: um novo nó e o nó a ser substituído. O nó substituído deve\nser um filho do elemento para o qual o método é chamado.
\nSintaxe:
\n pai.replaceChild(novoNo, noParaSubstituir);\nCom o mesmo HTML do exemplo de .insertBefore(), se quiséssemos substituir o\nsegundo parágrafo pelo qual criamos, faríamos assim:
container.replaceChild(newParagraph, secondParagraph);\n\n\nNote que tanto
\n.replaceChild()tanto quanto.insertBefore()esperam que o\nnovo nó seja o primeiro argumento.
Nos vídeos a seguir vamos colocar em prática a parte teórica já que eles usam os\nmétodos como criar, adicionar e eliminar os nós do DOM por meio do Javascript e\nassim poder criar páginas dinâmicas. sugerimos que você faça o exercício junto\ncom o vídeo e se necessário, você pode ir pausando.
\n\nEn esta unidad aprenderemos:
\nUn evento representa la idea de que algo ha pasado en nuestro programa, y\ntenemos la oportunidad de hacer algo o reaccionar a esa cosa que ha ocurrido\n(el evento).
\nPor ejemplo, la interacción con el usuario se hace através de eventos. Cuando el\nusuario realiza una acción como hacer un click, esto dispara un evento que\nnos va a permir reaccionar, y así agregar interacción al programa. A cada evento\nse le asocian una o más funciones que serán ejecutadas cuando ocurra dicho\nevento. A estas funciones las llamamos manejadores o manejadores de eventos\n(conocidos en inglés como event handlers o event listeners).
Aquí hay un video de referencia.
\nPara poder hacer uso de la magia de los eventos es necesario saber primero como\n\"escucharlos\", esto se puede lograr mediante el método addEventListener.
\nLa sintaxis es muy sencilla:
\n elemento_que_escucha.addEventListener('evento', funcion_a_ejecutar);\nAquí un link de\nreferencia.
\nExisten diferentes formas de asociar un evento a elementos del DOM, para saber\nmás sobre ello visita éste link\n(a partir del punto 6.2).
\nAdemás de agregar el listener al evento también se puede eliminar usando el\nmétodo removeEventListener, el cual funciona casi de la misma manera. La\nsintaxis es de la siguiente manera:
\n elemento_que_escucha.removeEventListener('evento', funcion_a_eliminar);\nPara que el método funcione correctamente es obligatorio mandar como parámetro\nel callback (función) utilizado con addEventListener.
\nAhora hablemos sobre objectEvent que es otro tema de importancia en el\nmanejo de eventos. Cuando un evento ocurre, la función que se ejecutará\nnecesita información adicional sobre éste.
\nobjectEvent es el objeto que representa el evento que se ha producido. Se\ncrea automáticamente cuando ocurre el evento y se destruye una vez se haya\nejecutado su función manejadora. Éste objeto tiene un conjunto de propiedades\ncon información sobre el evento. En el siguiente código podrás encontrar un\nejemplo.
\nconst holaMundo = (event) => {\n const evento = window.event || event;\n alert('Hola Mundo.');\n};\n\nconst boton = document.getElementById('boton');\nboton.addEventListener('click', holaMundo, false);\nEn ocasiones es necesario prevenir un cierto comportamiento que un evento tiene\npor defecto, para ello existe preventDefault, a continuación un ejemplo:
\n\n\nEste es el código para un formulario muy sencillo\nHay un input para ingresar el nombre y otro para ingresar el apellido\nPor último, hay un input de tipo submit (botón enviar)
\n
<form>\n <div>\n <label for=\"fname\">First name: </label>\n <input id=\"fname\" type=\"text\">\n </div>\n <div>\n <label for=\"lname\">Last name: </label>\n <input id=\"lname\" type=\"text\">\n </div>\n <div>\n <input id=\"submit\" type=\"submit\">\n </div>\n</form>\n<p></p>\n\n\nAhora veámos la funcionalidad del JS:\nEn la primera parte se guardan en variables los elementos del formulario\nDespués tenemos la función que detona el evento submit\nEsta función comprueba si los campos están vacios\nSi la condición se cumple se ejecuta la función preventDefault para el\neventObject (e)\nImpidiendo que el formulario se envíe automáticamente (acción que tiene por\ndefecto este tipo de \"botón\") para mostrar al usuario un mensaje de error.
\n
const form = document.querySelector('form');\nconst fname = document.getElementById('fname');\nconst lname = document.getElementById('lname');\nconst submit = document.getElementById('submit');\nconst para = document.querySelector('p');\n\nform.onsubmit = function(e) {\n if (fname.value === '' || lname.value === '') {\n e.preventDefault();\n para.textContent = 'You need to fill in both names!';\n }\n}\nCuando un evento se ejecuta pasa por diferentes fases: Capture phase, Target\nphase y Bubbling phase, como se muestra en las siguientes imágenes.
\n![\"Event](\"https://user-images.githubusercontent.com/110297/120246086-d60a0180-c234-11eb-9c38-0535154be569.png\")
![\"Event](\"https://user-images.githubusercontent.com/110297/120246026-9e02be80-c234-11eb-8ce5-c73e13ae900d.png\")
Revisa éste video en donde encontrarás\nun ejemplo práctico del flujo que siguen los eventos.
\nCuando el usuario interactúa con el navegador se pueden desencadenar múltiples\ntipos de eventos, algunos de los más comunes son:
\nPara mayor información sobre todos los eventos visita éste link\ny también éste otro link.
\nEstos son algunos de los eventos más utilizados:
\nAquí podrás encontrar un\nejemplo sobre la interacción con los eventos.
\n\n\nGuía de uso:
\n\n
\n- Nota como el fondo es de color blanco
\n- Ahora haz click en el botón Hacer magia :)
\n- Revisa el código y analiza la lógica de programación
\n- Ahora intenta modificar el código para que reaccione con otros eventos,\ndiviertete ;)
\n
Finalmente, te adjuntamos el link\nde la documentación oficial explicando todo acerca de eventos:
" + "body": "En esta unidad aprenderemos:
\nUn evento representa la idea de que algo ha pasado en nuestro programa, y\ntenemos la oportunidad de hacer algo o reaccionar a esa cosa que ha ocurrido\n(el evento).
\nPor ejemplo, la interacción con el usuario se hace através de eventos. Cuando el\nusuario realiza una acción como hacer un click, esto dispara un evento que\nnos va a permir reaccionar, y así agregar interacción al programa. A cada evento\nse le asocian una o más funciones que serán ejecutadas cuando ocurra dicho\nevento. A estas funciones las llamamos manejadores o manejadores de eventos\n(conocidos en inglés como event handlers o event listeners).
Aquí hay un de referencia.
\nPara poder hacer uso de la magia de los eventos es necesario saber primero como\n\"escucharlos\", esto se puede lograr mediante el método addEventListener.
\nLa sintaxis es muy sencilla:
\n elemento_que_escucha.addEventListener('evento', funcion_a_ejecutar);\nAquí un link de\nreferencia.
\nExisten diferentes formas de asociar un evento a elementos del DOM, para saber\nmás sobre ello visita éste link\n(a partir del punto 6.2).
\nAdemás de agregar el listener al evento también se puede eliminar usando el\nmétodo removeEventListener, el cual funciona casi de la misma manera. La\nsintaxis es de la siguiente manera:
\n elemento_que_escucha.removeEventListener('evento', funcion_a_eliminar);\nPara que el método funcione correctamente es obligatorio mandar como parámetro\nel callback (función) utilizado con addEventListener.
\nAhora hablemos sobre objectEvent que es otro tema de importancia en el\nmanejo de eventos. Cuando un evento ocurre, la función que se ejecutará\nnecesita información adicional sobre éste.
\nobjectEvent es el objeto que representa el evento que se ha producido. Se\ncrea automáticamente cuando ocurre el evento y se destruye una vez se haya\nejecutado su función manejadora. Éste objeto tiene un conjunto de propiedades\ncon información sobre el evento. En el siguiente código podrás encontrar un\nejemplo.
\nconst holaMundo = (event) => {\n const evento = window.event || event;\n alert('Hola Mundo.');\n};\n\nconst boton = document.getElementById('boton');\nboton.addEventListener('click', holaMundo, false);\nEn ocasiones es necesario prevenir un cierto comportamiento que un evento tiene\npor defecto, para ello existe preventDefault, a continuación un ejemplo:
\n\n\nEste es el código para un formulario muy sencillo\nHay un input para ingresar el nombre y otro para ingresar el apellido\nPor último, hay un input de tipo submit (botón enviar)
\n
<form>\n <div>\n <label for=\"fname\">First name: </label>\n <input id=\"fname\" type=\"text\">\n </div>\n <div>\n <label for=\"lname\">Last name: </label>\n <input id=\"lname\" type=\"text\">\n </div>\n <div>\n <input id=\"submit\" type=\"submit\">\n </div>\n</form>\n<p></p>\n\n\nAhora veámos la funcionalidad del JS:\nEn la primera parte se guardan en variables los elementos del formulario\nDespués tenemos la función que detona el evento submit\nEsta función comprueba si los campos están vacios\nSi la condición se cumple se ejecuta la función preventDefault para el\neventObject (e)\nImpidiendo que el formulario se envíe automáticamente (acción que tiene por\ndefecto este tipo de \"botón\") para mostrar al usuario un mensaje de error.
\n
const form = document.querySelector('form');\nconst fname = document.getElementById('fname');\nconst lname = document.getElementById('lname');\nconst submit = document.getElementById('submit');\nconst para = document.querySelector('p');\n\nform.onsubmit = function(e) {\n if (fname.value === '' || lname.value === '') {\n e.preventDefault();\n para.textContent = 'You need to fill in both names!';\n }\n}\nCuando un evento se ejecuta pasa por diferentes fases: Capture phase, Target\nphase y Bubbling phase, como se muestra en las siguientes imágenes.
\n
Revisa éste en donde encontrarás\nun ejemplo práctico del flujo que siguen los eventos.
\nCuando el usuario interactúa con el navegador se pueden desencadenar múltiples\ntipos de eventos, algunos de los más comunes son:
\nPara mayor información sobre todos los eventos visita éste link\ny también éste otro link.
\nEstos son algunos de los eventos más utilizados:
\nAquí podrás encontrar un\nejemplo sobre la interacción con los eventos.
\n\n\nGuía de uso:
\n\n
\n- Nota como el fondo es de color blanco
\n- Ahora haz click en el botón Hacer magia :)
\n- Revisa el código y analiza la lógica de programación
\n- Ahora intenta modificar el código para que reaccione con otros eventos,\ndiviertete ;)
\n
Finalmente, te adjuntamos el link\nde la documentación oficial explicando todo acerca de eventos:
" }, "pt": { "title": "Eventos", - "body": "Nesta unidade aprenderemos:
\nÉ quando o usuário realiza uma ação permitindo que ele interaja com o programa.\nCada evento é associado a um manipulador (conhecidos como eventHandlers ou\neventListener), que será executado quando o evento ocorrer.
\nAqui está um vídeo de referência.
\nPara poder fazer uso da magia dos eventos é necessário saber primeiro como\n\"escutá-los\". Isto pode ser conseguido através do método addEventListener .
\nA sintaxe é muito simples:
\n elemento_que_escuta.addEventListener('evento', funcao_para_escutar);\nAqui um link de referência.
\nExistem diferentes formas de associar um evento a elementos do DOM. Para saber\nmais visite este\nlink\n(a partir de 6.2).
\nAlém de adicionar o listener ao evento, ele também pode ser eliminado usando o\nmétodo removeEventListener , que funciona quase da mesma maneira. A sintaxe\né a seguinte:
\n elemento_que_escuta.removeEventListener('evento', funcao_para_remover);\nPara que o método funcione corretamente, é obrigatório enviar como parâmetro o\nretorno de chamada (função) usado com addEventListener.
\nAgora vamos falar sobre objectEvent, que é outra questão importante no\ntratamento de eventos. Quando um evento ocorre, a função que será executada\nprecisa de informações adicionais sobre ele.
\nobjectEvent é o objeto que representa o evento que ocorreu. É criado\nautomaticamente quando o evento ocorre e é destruído quando sua função de\ngerenciamento é executada. Este objeto tem um conjunto de propriedades com\ninformações sobre o evento. No código a seguir, você encontrará um exemplo.
\nfunction olaMundo(event){\n const evento = window.event || event;\n alert('Olá Mundo.');\n}\n\nconst botao = document.getElementById('botao');\nbotao.addEventListener('click', olaMundo, false);\nÀs vezes é necessário evitar certos comportamentos que um evento tem por padrão.\nPara isso existe preventDefault. Aqui está um exemplo:
\n\n\nEste é o código para um formulário muito simples Há um input para inserir o\nnome e outro para inserir o sobrenome. Finalmente, há um input do tipo\nsubmit (botão de envio)
\n
<form>\n <div>\n <label for=\"fname\">First name: </label>\n <input id=\"fname\" type=\"text\">\n </div>\n <div>\n <label for=\"lname\">Last name: </label>\n <input id=\"lname\" type=\"text\">\n </div>\n <div>\n <input id=\"submit\" type=\"submit\">\n </div>\n</form>\n<p></p>\n\n\nAgora vejamos a funcionalidade JS: Na primeira parte são armazenados em\nvariáveis os elementos do formulário. Em seguida, temos a função que dispara o\nevento submit. Esta função verifica se os campos estão vazios. Se a condição\nse cumpre a função executa preventDefault para eventObject (e) impedindo\nque o formulário seja enviado automaticamente (ação que tem por padrão este\ntipo de \"botão\") para mostrar ao usuário uma mensagem de erro.
\n
const form = document.querySelector('form');\nconst fname = document.getElementById('fname');\nconst lname = document.getElementById('lname');\nconst submit = document.getElementById('submit');\nconst para = document.querySelector('p');\n\nform.onsubmit = function(e) {\n if (fname.value === '' || lname.value === '') {\n e.preventDefault();\n para.textContent = 'You need to fill in both names!';\n }\n}\nQuando um evento é executado, ele passa por diferentes fases: Capture phase,\nTarget phase e Bubbling phase , conforme mostrado na imagem a seguir.
\n![\"flow-event\"](\"https://user-images.githubusercontent.com/11894994/59521680-4205ca80-8ea3-11e9-8332-0ac326994e11.png\")
A seguir, um vídeo que te explicará com um exemplo o fluxo que seguem os\neventos:
\n![\"Adicionando](\"https://img.youtube.com/vi/wsim6ujXeOY/0.jpg\")
Quando o usuário interage com o navegador, vários tipos de eventos podem ser\nacionados. Alguns dos mais comuns são:
\nPara mais informações sobre todos os eventos, acesse este\nlink.
\nEstes são alguns dos eventos mais usados:
\nAqui você pode encontrar um\nexemplo sobre interação com eventos.
\n\n\nGuia de uso:
\n\n
\n- Observe como o fundo é branco
\n- Agora clique no botão Make magic :)
\n- Verifique o código e analise a lógica de programação
\n- Agora tente modificar o código para que ele reaja com outros eventos,\ndivirta-se;)
\n
Finalmente, anexamos o\nlink da documentação\noficial explicando tudo sobre os eventos:
" + "body": "Nesta unidade aprenderemos:
\nÉ quando o usuário realiza uma ação permitindo que ele interaja com o programa.\nCada evento é associado a um manipulador (conhecidos como eventHandlers ou\neventListener), que será executado quando o evento ocorrer.
\nAqui está um de referência.
\nPara poder fazer uso da magia dos eventos é necessário saber primeiro como\n\"escutá-los\". Isto pode ser conseguido através do método addEventListener .
\nA sintaxe é muito simples:
\n elemento_que_escuta.addEventListener('evento', funcao_para_escutar);\nAqui um link de referência.
\nExistem diferentes formas de associar um evento a elementos do DOM. Para saber\nmais visite este\nlink\n(a partir de 6.2).
\nAlém de adicionar o listener ao evento, ele também pode ser eliminado usando o\nmétodo removeEventListener , que funciona quase da mesma maneira. A sintaxe\né a seguinte:
\n elemento_que_escuta.removeEventListener('evento', funcao_para_remover);\nPara que o método funcione corretamente, é obrigatório enviar como parâmetro o\nretorno de chamada (função) usado com addEventListener.
\nAgora vamos falar sobre objectEvent, que é outra questão importante no\ntratamento de eventos. Quando um evento ocorre, a função que será executada\nprecisa de informações adicionais sobre ele.
\nobjectEvent é o objeto que representa o evento que ocorreu. É criado\nautomaticamente quando o evento ocorre e é destruído quando sua função de\ngerenciamento é executada. Este objeto tem um conjunto de propriedades com\ninformações sobre o evento. No código a seguir, você encontrará um exemplo.
\nfunction olaMundo(event){\n const evento = window.event || event;\n alert('Olá Mundo.');\n}\n\nconst botao = document.getElementById('botao');\nbotao.addEventListener('click', olaMundo, false);\nÀs vezes é necessário evitar certos comportamentos que um evento tem por padrão.\nPara isso existe preventDefault. Aqui está um exemplo:
\n\n\nEste é o código para um formulário muito simples Há um input para inserir o\nnome e outro para inserir o sobrenome. Finalmente, há um input do tipo\nsubmit (botão de envio)
\n
<form>\n <div>\n <label for=\"fname\">First name: </label>\n <input id=\"fname\" type=\"text\">\n </div>\n <div>\n <label for=\"lname\">Last name: </label>\n <input id=\"lname\" type=\"text\">\n </div>\n <div>\n <input id=\"submit\" type=\"submit\">\n </div>\n</form>\n<p></p>\n\n\nAgora vejamos a funcionalidade JS: Na primeira parte são armazenados em\nvariáveis os elementos do formulário. Em seguida, temos a função que dispara o\nevento submit. Esta função verifica se os campos estão vazios. Se a condição\nse cumpre a função executa preventDefault para eventObject (e) impedindo\nque o formulário seja enviado automaticamente (ação que tem por padrão este\ntipo de \"botão\") para mostrar ao usuário uma mensagem de erro.
\n
const form = document.querySelector('form');\nconst fname = document.getElementById('fname');\nconst lname = document.getElementById('lname');\nconst submit = document.getElementById('submit');\nconst para = document.querySelector('p');\n\nform.onsubmit = function(e) {\n if (fname.value === '' || lname.value === '') {\n e.preventDefault();\n para.textContent = 'You need to fill in both names!';\n }\n}\nQuando um evento é executado, ele passa por diferentes fases: Capture phase,\nTarget phase e Bubbling phase , conforme mostrado na imagem a seguir.
\n
A seguir, um vídeo que te explicará com um exemplo o fluxo que seguem os\neventos:
\n\nQuando o usuário interage com o navegador, vários tipos de eventos podem ser\nacionados. Alguns dos mais comuns são:
\nPara mais informações sobre todos os eventos, acesse este\nlink.
\nEstes são alguns dos eventos mais usados:
\nAqui você pode encontrar um\nexemplo sobre interação com eventos.
\n\n\nGuia de uso:
\n\n
\n- Observe como o fundo é branco
\n- Agora clique no botão Make magic :)
\n- Verifique o código e analise a lógica de programação
\n- Agora tente modificar o código para que ele reaja com outros eventos,\ndivirta-se;)
\n
Finalmente, anexamos o\nlink da documentação\noficial explicando tudo sobre os eventos:
" } } }, @@ -167,11 +167,11 @@ "intl": { "es": { "title": "Atributos data", - "body": "En esta unidad aprenderemos a profundidad:
\nSon atributos personalizados que nos permiten añadir datos a nuestros elementos\nHTML, que no necesariamente son visibles pero que nos ayudan mucho al momento\nde dar información adicional de dichos elementos.
\nUsarlos es muy fácil, ya que su sintaxis e interacción es sencilla.
\nSe compone de un prefijo data- acompañado del nombre (en minúsculas) que\nconsideremos más apropiado para el valor que va a guardar:
<elemento id=\"ejemplo\" data-nombre=\"valor\" data-otro-nombre=\"otro valor\">\nPara poder acceder a estos atributos hacemos uso del método dataset.
const ejemplo = document.getElementById(\"ejemplo\");\nconst valor = ejemplo.dataset.nombre;\nconst otroValor = ejemplo.dataset.otroNombre;\nEn este link podemos\nencontrar información más detallada acerca de esto que acabamos de leer.
\nYa que tenemos una noción de qué son y el cómo se usan los atributos data, qué\nte parece si vemos el siguiente video en el que se muestra un ejercicio\nhaciendo uso de éstos.
\n![\"Atributos](\"https://img.youtube.com/vi/fnn6mqN1S8Q/0.jpg\")
Para leer más acerca de los atributos data, revisa este link\ny este otro link.
" + "body": "En esta unidad aprenderemos a profundidad:
\nSon atributos personalizados que nos permiten añadir datos a nuestros elementos\nHTML, que no necesariamente son visibles pero que nos ayudan mucho al momento\nde dar información adicional de dichos elementos.
\nUsarlos es muy fácil, ya que su sintaxis e interacción es sencilla.
\nSe compone de un prefijo data- acompañado del nombre (en minúsculas) que\nconsideremos más apropiado para el valor que va a guardar:
<elemento id=\"ejemplo\" data-nombre=\"valor\" data-otro-nombre=\"otro valor\">\nPara poder acceder a estos atributos hacemos uso del método dataset.
const ejemplo = document.getElementById(\"ejemplo\");\nconst valor = ejemplo.dataset.nombre;\nconst otroValor = ejemplo.dataset.otroNombre;\nEn este link podemos\nencontrar información más detallada acerca de esto que acabamos de leer.
\nYa que tenemos una noción de qué son y el cómo se usan los atributos data, qué\nte parece si vemos el siguiente video en el que se muestra un ejercicio\nhaciendo uso de éstos.
\n\nPara leer más acerca de los atributos data, revisa este link\ny este otro link.
" }, "pt": { "title": "Atributos de dados", - "body": "Nesta unidade aprenderemos em profundidade:
\nEles são atributos personalizados que nos permitem adicionar dados aos nossos\nelementos HTML, que não são necessariamente visíveis, mas que nos ajudam muito\nao fornecer informações adicionais sobre esses elementos.
\nUsá-los é muito fácil, já que sua sintaxe e interação são simples.
\nConsiste em um prefixo data- acompanhado do nome (em letras minúsculas)\nque consideramos mais apropriado para o valor que você irá salvar:
<elemento id=\"exemplo\" data-nome=\"valor\" data-outro-nome=\"outro valor\">\nPara acessar esses atributos, usamos o método dataset.
const exemplo = document.getElementById(\"exemplo\");\n const valor = exemplo.dataset.nome;\n const outroValor = exemplo.dataset.outroNome;\nComo temos uma noção do que são e como os atributos de dados são usados, o que\nvocê acha de vermos o vídeo a seguir, no qual um exercício é mostrado fazendo\nuso deles.
\n![\"Atributos](\"https://img.youtube.com/vi/fvyo7d1JDcSs/0.jpg\")
Para ler mais sobre os atributos de dados, verifique este\nlink\ne este outro link.
" + "body": "Nesta unidade aprenderemos em profundidade:
\nEles são atributos personalizados que nos permitem adicionar dados aos nossos\nelementos HTML, que não são necessariamente visíveis, mas que nos ajudam muito\nao fornecer informações adicionais sobre esses elementos.
\nUsá-los é muito fácil, já que sua sintaxe e interação são simples.
\nConsiste em um prefixo data- acompanhado do nome (em letras minúsculas)\nque consideramos mais apropriado para o valor que você irá salvar:
<elemento id=\"exemplo\" data-nome=\"valor\" data-outro-nome=\"outro valor\">\nPara acessar esses atributos, usamos o método dataset.
const exemplo = document.getElementById(\"exemplo\");\n const valor = exemplo.dataset.nome;\n const outroValor = exemplo.dataset.outroNome;\nComo temos uma noção do que são e como os atributos de dados são usados, o que\nvocê acha de vermos o vídeo a seguir, no qual um exercício é mostrado fazendo\nuso deles.
\n\nPara ler mais sobre os atributos de dados, verifique este\nlink\ne este outro link.
" } } }, @@ -183,11 +183,11 @@ "intl": { "es": { "title": "Casos prácticos (videos)", - "body": "Al igual que hemos hecho antes, es hora de aplicar los conceptos aprendidos\npara resolver problemas.
\nA continuación tendrás varios problemas que debes resolver. Intenta\nresolverlos primero por tu cuenta. Más abajo encontrarás las soluciones.
\nDespués de haberlo intentado, compara tus soluciones con los videos de abajo.
\nNO antes.
\nUna pequeña aerolínea acaba de comprar una computadora para su nuevo sistema\nde reservaciones automatizadas. Se te ha pedido que desarrolles el nuevo\nsistema. Escribirás una aplicación para asignar asientos en cada vuelo del\núnico avión de la aerolínea (capacidad: 10 asientos).
\n![\"GitHub](\"https://image.ibb.co/eMz26v/avion_2.jpg\")
Tu aplicación debe mostrar las siguientes alternativas:
\nPor favor escriba 1 para Primera Clase y Por favor escriba 2 para Económico.
\n![\"GitHub](\"https://image.ibb.co/mh9PKF/avion_3.jpg\")
Si el usuario escribe 1, tu aplicación debe asignarle un asiento en la\nsección de primera clase (asientos 1 a 4). Si el usuario escribe 2, tu\naplicación debe asignarle un asiento en la sección económica\n(asientos 5 a 10).
\nTu aplicación deberá entonces imprimir un pase de abordar, indicando el\nnúmero de asiento de la persona y si se encuentra en la sección de primera\nclase o clase económica.
\n![\"GitHub](\"https://image.ibb.co/d8gtDa/avion_4.jpg\")
A continuación, encontrarás tips que podrían ayudarte con la solución, ¡mucha suerte!
\n![\"GitHub](\"https://image.ibb.co/bQ86Ya/untitled_8.jpg\")
Usa un arreglo unidimensional del tipo booleano para representar la tabla de\nasientos del avión. Inicializa todos los elementos del arreglo con -false-\npara indicar que todos los asientos están vacíos. A medida que se asigne cada\nasiento, establezca el elemento correspondiente del arreglo en true para\nindicar que ese asiento ya no está disponible.
\nTu aplicación nunca deberá asignar un asiento que ya haya sido asignado.\nCuando esté llena la sección económica o primera clase, tu programa deberá\npreguntar a la persona si acepta ser colocada en la sección de primera clase\n(y viceversa).
\n![\"GitHub](\"https://image.ibb.co/nH4rzF/avion_6.jpg\")
Si la persona acepta, haga la asignación de asiento apropiada.
\nSi no, debe imprimir el mensaje “El próximo vuelo sale en 3 horas”.
\n![\"GitHub](\"https://image.ibb.co/d2Hpmv/avion_7.jpg\")
El juego de buscaminas funciona de la siguiente forma:
\nSe muestra una tabla donde se encuentran celdas vacías, con número o con minas.\nEn caso de oprimir una mina entonces el juego termina, si se oprimen lugares\nsin minas (vacía o de número), el juego continúa.
\nUn menú de hamburguesa nos permite tener escondido el menú y únicamente mostrar\nun botón (3 líneas horizontales) que cuando lo apretamos (o hacemos click), se\nmuestra en la pantalla todas las opciones del menú.
\nAlgo así:
\n![\"Hamburger](\"http://i.imgur.com/JKJ8V9v.gif\")
Replicar esa funcionalidad usando DOM y CSS. (No agregar efectos \"bonitos\",\núnicamente enfocarse en funcionalidad)
\nLas tabs nos sirven para agrupar contenido similar usando solo un espacio.
\nAlgo así:
\n![\"Tabs](\"https://diypm8fk7dlz0.cloudfront.net/support/wp-content/uploads/2014/06/simulate-tabs.gif\")
Replicar esa funcionalidad usando DOM y CSS. (No agregar efectos \"bonitos\",\núnicamente enfocarse en funcionalidad)
\nEl menú drop down nos ayuda a ahorrar espacio en un menú, ya que agrupa\nelementos similares.
\nAlgo así:
\n![\"Drop](\"https://cdn.codemyui.com/wp-content/uploads/2016/06/jQuery-Dropdown-Navigation-Menu.gif\")
Esta página permite elegir efectos como sepia, blanco y negro e\ninvertir colores que deseamos que obtengan nuestras imágenes.\nDeberás replicarla usando DOM y CSS.
\nVeamos como debe quedar la página...\n![\"Mini](\"https://fotos.subefotos.com/33a270779462a9ffe98ae8c2b528087co.gif\")
A continuación Silvana, Meme, Amalia, Karla e Inti te explican cómo resolvieron\ncada uno de los ejercicios anteriores.
\n![\"Solución](\"https://img.youtube.com/vi/ov2pYXulNvc/0.jpg\")
![\"Solución](\"https://img.youtube.com/vi/ZtnY3ojz91k/0.jpg\")
![\"Solución](\"https://img.youtube.com/vi/ej2MVZpPaoM/0.jpg\")
![\"Solución](\"https://img.youtube.com/vi/nEKbaKIat1g/0.jpg\")
![\"Solución](\"https://img.youtube.com/vi/yV7L6r6D464/0.jpg\")
Al igual que hemos hecho antes, es hora de aplicar los conceptos aprendidos\npara resolver problemas.
\nA continuación tendrás varios problemas que debes resolver. Intenta\nresolverlos primero por tu cuenta. Más abajo encontrarás las soluciones.
\nDespués de haberlo intentado, compara tus soluciones con los videos de abajo.
\nNO antes.
\nUna pequeña aerolínea acaba de comprar una computadora para su nuevo sistema\nde reservaciones automatizadas. Se te ha pedido que desarrolles el nuevo\nsistema. Escribirás una aplicación para asignar asientos en cada vuelo del\núnico avión de la aerolínea (capacidad: 10 asientos).
\n
Tu aplicación debe mostrar las siguientes alternativas:
\nPor favor escriba 1 para Primera Clase y Por favor escriba 2 para Económico.
\n
Si el usuario escribe 1, tu aplicación debe asignarle un asiento en la\nsección de primera clase (asientos 1 a 4). Si el usuario escribe 2, tu\naplicación debe asignarle un asiento en la sección económica\n(asientos 5 a 10).
\nTu aplicación deberá entonces imprimir un pase de abordar, indicando el\nnúmero de asiento de la persona y si se encuentra en la sección de primera\nclase o clase económica.
\n
A continuación, encontrarás tips que podrían ayudarte con la solución, ¡mucha suerte!
\n
Usa un arreglo unidimensional del tipo booleano para representar la tabla de\nasientos del avión. Inicializa todos los elementos del arreglo con -false-\npara indicar que todos los asientos están vacíos. A medida que se asigne cada\nasiento, establezca el elemento correspondiente del arreglo en true para\nindicar que ese asiento ya no está disponible.
\nTu aplicación nunca deberá asignar un asiento que ya haya sido asignado.\nCuando esté llena la sección económica o primera clase, tu programa deberá\npreguntar a la persona si acepta ser colocada en la sección de primera clase\n(y viceversa).
\n
Si la persona acepta, haga la asignación de asiento apropiada.
\nSi no, debe imprimir el mensaje “El próximo vuelo sale en 3 horas”.
\n
El juego de buscaminas funciona de la siguiente forma:
\nSe muestra una tabla donde se encuentran celdas vacías, con número o con minas.\nEn caso de oprimir una mina entonces el juego termina, si se oprimen lugares\nsin minas (vacía o de número), el juego continúa.
\nUn menú de hamburguesa nos permite tener escondido el menú y únicamente mostrar\nun botón (3 líneas horizontales) que cuando lo apretamos (o hacemos click), se\nmuestra en la pantalla todas las opciones del menú.
\nAlgo así:
\n
Replicar esa funcionalidad usando DOM y CSS. (No agregar efectos \"bonitos\",\núnicamente enfocarse en funcionalidad)
\nLas tabs nos sirven para agrupar contenido similar usando solo un espacio.
\nAlgo así:
\n
Replicar esa funcionalidad usando DOM y CSS. (No agregar efectos \"bonitos\",\núnicamente enfocarse en funcionalidad)
\nEl menú drop down nos ayuda a ahorrar espacio en un menú, ya que agrupa\nelementos similares.
\nAlgo así:
\n
Esta página permite elegir efectos como sepia, blanco y negro e\ninvertir colores que deseamos que obtengan nuestras imágenes.\nDeberás replicarla usando DOM y CSS.
\nVeamos como debe quedar la página...\n
A continuación Silvana, Meme, Amalia, Karla e Inti te explican cómo resolvieron\ncada uno de los ejercicios anteriores.
\nComo já fizemos antes, é hora de aplicar os conceitos aprendidos para resolver\nproblemas.
\nA seguir, você terá vários problemas que deverá resolver. Tente resolvê-los\nprimeiro por conta própria. Abaixo você encontrará as soluções.
\nDepois de tentar, compare suas soluções com os vídeos abaixo.
\nNÃO antes.
\nUma pequena companhia aérea acaba de comprar um computador para seu novo sistema\nde reservas automatizado. Você foi solicitada a desenvolver o novo sistema.\nEscreva uma aplicação para atribuir assentos em cada voo do único avião da\ncompanhia (capacidade: 10 assentos).
\n![\"Avião\"](\"https://user-images.githubusercontent.com/11894994/59522404-010eb580-8ea5-11e9-86e3-4c1e8f32b0b5.jpg\")
Sua aplicação deve mostrar as seguintes alternativas:
\nPor favor, digite 1 para Primeira Classe e Por favor, digite 2 para Econômica.
\n![\"Avião\"](\"https://user-images.githubusercontent.com/11894994/59522439-184da300-8ea5-11e9-83de-4823ef78efb4.jpg\")
Se o usuário digitar 1, seu aplicativo deve atribuir um lugar na seção de\nprimeira classe (assentos 1 a 4). Se o usuário digitar 2, sua aplicação deve\natribuir um assento na seção econômica (assentos 5 a 10).
\nA sua aplicação deverá então imprimir um cartão de embarque, indicando o número\ndo lugar da pessoa e se está na primeira classe ou na classe econômica.
\n![\"Avião\"](\"https://user-images.githubusercontent.com/11894994/59522498-33b8ae00-8ea5-11e9-9081-6417549b41bb.jpg\")
Abaixo, você encontrará dicas que poderão ajudá-la com a solução, boa sorte!
\n![\"Fluxo\"](\"https://user-images.githubusercontent.com/11894994/59522574-62368900-8ea5-11e9-9be8-5c2679577b40.jpg\")
Use uma matriz unidimensional do tipo booleano para representar a tabela de\nassentos do avião. Inicialize todos os elementos do array com -false- para\nindicar que todos os lugares estão vazios. À medida que cada lugar é atribuído,\ndefina o elemento correspondente da matriz como true para indicar que esse lugar\nnão está mais disponível.
\nSeu aplicativo nunca deverá atribuir um lugar que já tenha sido atribuído.\nQuando a seção econômica ou a primeira classe estiver cheia, seu programa deve\nperguntar à pessoa se ela concorda em ser colocada na primeira classe (e\nvice-versa).
\n![\"Avião\"](\"https://user-images.githubusercontent.com/11894994/59522653-98740880-8ea5-11e9-8733-84cc47264e9e.jpg\")
Se a pessoa aceitar, faça a atribuição de lugar apropriada.
\nSe não, você deve exibir a mensagem \"O próximo vôo sai em 3 horas\".
\n![\"Avião\"](\"https://user-images.githubusercontent.com/11894994/59522674-a45fca80-8ea5-11e9-867e-2762fee3a637.jpg\")
Um menu de hambúrguer nos permite ter o menu escondido e mostrar apenas um botão\n(3 linhas horizontais) que quando pressionamos (ou clicamos), todas as\nopções de menu são mostradas na tela.
\nAlgo assim:
\n![\"Menu\nhamburger\"](\"https://user-images.githubusercontent.com/11894994/59522804-f7398200-8ea5-11e9-9e50-08ccec42da24.gif\")
Replicar essa funcionalidade usando DOM e CSS. (Não adicione efeitos \"legais\",\napenas foque na funcionalidade)
\nAs abas são usadas para agrupar conteúdo semelhante usando apenas um espaço.
\nAlgo assim:
\n![\"Menu](\"https://user-images.githubusercontent.com/11894994/59522837-12a48d00-8ea6-11e9-9704-8d137aee4ee7.gif\")
Replicar essa funcionalidade usando DOM e CSS. (Não adicione efeitos \"legais\",\napenas foque na funcionalidade)
\nEsta página permite eleger efeitos como sepia, branco e preto e\ninverter cores que desejamos que nossas imagens tenham.\nVocê deverá replicar usando DOM e CSS.
\nVeja como a página deve ficar:\n![\"Mini\nZoo\"](\"https://user-images.githubusercontent.com/11894994/62797560-613f6380-bab2-11e9-925d-a306c44368c4.gif\")
A seguir a equipe te explica como ela resolveu cada um dos exercícios.
\n![\"Reserva](\"https://img.youtube.com/vi/HwOqNq-QIss/0.jpg\")
![\"Menu\nHambúrguer\"](\"https://img.youtube.com/vi/5fzzEx7-a5k/0.jpg\")
![\"Menu\nTabs\"](\"https://img.youtube.com/vi/qziZsQC7C-c/0.jpg\")
![\"Mini\nZoo\"](\"https://img.youtube.com/vi/Y-JmMbIP-Uw/0.jpg\")
Como já fizemos antes, é hora de aplicar os conceitos aprendidos para resolver\nproblemas.
\nA seguir, você terá vários problemas que deverá resolver. Tente resolvê-los\nprimeiro por conta própria. Abaixo você encontrará as soluções.
\nDepois de tentar, compare suas soluções com os vídeos abaixo.
\nNÃO antes.
\nUma pequena companhia aérea acaba de comprar um computador para seu novo sistema\nde reservas automatizado. Você foi solicitada a desenvolver o novo sistema.\nEscreva uma aplicação para atribuir assentos em cada voo do único avião da\ncompanhia (capacidade: 10 assentos).
\n
Sua aplicação deve mostrar as seguintes alternativas:
\nPor favor, digite 1 para Primeira Classe e Por favor, digite 2 para Econômica.
\n
Se o usuário digitar 1, seu aplicativo deve atribuir um lugar na seção de\nprimeira classe (assentos 1 a 4). Se o usuário digitar 2, sua aplicação deve\natribuir um assento na seção econômica (assentos 5 a 10).
\nA sua aplicação deverá então imprimir um cartão de embarque, indicando o número\ndo lugar da pessoa e se está na primeira classe ou na classe econômica.
\n
Abaixo, você encontrará dicas que poderão ajudá-la com a solução, boa sorte!
\n
Use uma matriz unidimensional do tipo booleano para representar a tabela de\nassentos do avião. Inicialize todos os elementos do array com -false- para\nindicar que todos os lugares estão vazios. À medida que cada lugar é atribuído,\ndefina o elemento correspondente da matriz como true para indicar que esse lugar\nnão está mais disponível.
\nSeu aplicativo nunca deverá atribuir um lugar que já tenha sido atribuído.\nQuando a seção econômica ou a primeira classe estiver cheia, seu programa deve\nperguntar à pessoa se ela concorda em ser colocada na primeira classe (e\nvice-versa).
\n
Se a pessoa aceitar, faça a atribuição de lugar apropriada.
\nSe não, você deve exibir a mensagem \"O próximo vôo sai em 3 horas\".
\n
Um menu de hambúrguer nos permite ter o menu escondido e mostrar apenas um botão\n(3 linhas horizontais) que quando pressionamos (ou clicamos), todas as\nopções de menu são mostradas na tela.
\nAlgo assim:
\n
Replicar essa funcionalidade usando DOM e CSS. (Não adicione efeitos \"legais\",\napenas foque na funcionalidade)
\nAs abas são usadas para agrupar conteúdo semelhante usando apenas um espaço.
\nAlgo assim:
\n
Replicar essa funcionalidade usando DOM e CSS. (Não adicione efeitos \"legais\",\napenas foque na funcionalidade)
\nEsta página permite eleger efeitos como sepia, branco e preto e\ninverter cores que desejamos que nossas imagens tenham.\nVocê deverá replicar usando DOM e CSS.
\nVeja como a página deve ficar:\n
A seguir a equipe te explica como ela resolveu cada um dos exercícios.
\nA continuación tienes más problemas de práctica.
\nCrea una página web que implemente el juego Tic Tac Toe (también conocido como\ngato, michi, tres en línea, etc). Este es un divertido juego entre dos jugadores\nX y O, quienes marcan los espacios de un tablero 3x3 alternadamente,\nel ganador es quien primero consigue tener una línea horizontal, vertical o\ndiagonal de 3 espacios consecutivos con su elemento.\nPara esto deberás crear el tablero directamente en el archivo html y la\nfuncionalidad se desarrollará mediante uso del DOM.
\nPara desarrollar el juego debemos tener en cuenta ciertos puntos:
\n![\"Tic](\"https://d30y9cdsu7xlg0.cloudfront.net/png/25029-200.png\")
Necesitamos generar 12 cuadros blancos en filas de 3. Uno de esos cuadros\nserá de un color diferente. Necesitamos mover ese cuadro a través de los\ncuadros blancos usando las flechas del teclado.
\nEn el siguiente video explicamos un poco más el ejercicio:
\n![\"Animación](\"https://img.youtube.com/vi/LtfSKzCjCC4/0.jpg\")
¿Recuerdas el reto de código de Freelancer?\nAhora, nos enfocaremos en replicar la funcionalidad de la sección de Portfolio\nque es el modal al dar click sobre cada una de las imágenes. Debe quedar como\nen la siguiente imagen:
![\"Freelancer](\"https://media.giphy.com/media/xT9IgDSValpayTy8QE/giphy.gif\")
¿Recuerdas el ejercicio guíado de Nuestras Coders?\nAhora agregaremos un filtro para seleccionar a las coders dependiendo de su sede.\nAl final, deberá quedarte algo así:
\n![\"Nuestras](\"https://media.giphy.com/media/xT9IgwHr6d1LObJt16/giphy.gif\")
En la vida diaria usamos servicios que generan el CAPTCHA.\nEl más usado es el de Google, puedes encontrar su documentación aquí.\nEstos CAPTCHA tienen como objetivo final poder identificar si eres o no un\nhumano y van cambiando conforme avanza la tecnología.
\nInicialmente consistía en un conjunto de imágenes que el usuario debía\ndeterminar el contenido de las mismas e indicarlo al sistema. Hoy en día\nevalúan tu comportamiento en el navegador, y de tener dudas te pide evaluar un\nconjunto de imágenes mucho más grande.
\nArmaremos un Captcha (tal cual se muestra en el diseño de abajo), este\ncomprobará que el usuario escriba lo mismo que el Captcha que le\nproporcionaremos. El valor ingresado se evaluará al momento de que el usuario\nhaga clic en el símbolo ✓ y se generará otro código cuando el usuario haga\nclic en el símbolo ↻.
\nDato: Genera los números y letras de manera random
\n![\"Captcha\"](\"https://fotos.subefotos.com/299269b4ed8aac7e0a445f0c76355612o.gif\")
A continuación tienes más problemas de práctica.
\nCrea una página web que implemente el juego Tic Tac Toe (también conocido como\ngato, michi, tres en línea, etc). Este es un divertido juego entre dos jugadores\nX y O, quienes marcan los espacios de un tablero 3x3 alternadamente,\nel ganador es quien primero consigue tener una línea horizontal, vertical o\ndiagonal de 3 espacios consecutivos con su elemento.\nPara esto deberás crear el tablero directamente en el archivo html y la\nfuncionalidad se desarrollará mediante uso del DOM.
\nPara desarrollar el juego debemos tener en cuenta ciertos puntos:
\n
Necesitamos generar 12 cuadros blancos en filas de 3. Uno de esos cuadros\nserá de un color diferente. Necesitamos mover ese cuadro a través de los\ncuadros blancos usando las flechas del teclado.
\nEn el siguiente video explicamos un poco más el ejercicio:
\n\n¿Recuerdas el reto de código de Freelancer?\nAhora, nos enfocaremos en replicar la funcionalidad de la sección de Portfolio\nque es el modal al dar click sobre cada una de las imágenes. Debe quedar como\nen la siguiente imagen:
¿Recuerdas el ejercicio guíado de Nuestras Coders?\nAhora agregaremos un filtro para seleccionar a las coders dependiendo de su sede.\nAl final, deberá quedarte algo así:
\n
En la vida diaria usamos servicios que generan el CAPTCHA.\nEl más usado es el de Google, puedes encontrar su documentación aquí.\nEstos CAPTCHA tienen como objetivo final poder identificar si eres o no un\nhumano y van cambiando conforme avanza la tecnología.
\nInicialmente consistía en un conjunto de imágenes que el usuario debía\ndeterminar el contenido de las mismas e indicarlo al sistema. Hoy en día\nevalúan tu comportamiento en el navegador, y de tener dudas te pide evaluar un\nconjunto de imágenes mucho más grande.
\nArmaremos un Captcha (tal cual se muestra en el diseño de abajo), este\ncomprobará que el usuario escriba lo mismo que el Captcha que le\nproporcionaremos. El valor ingresado se evaluará al momento de que el usuario\nhaga clic en el símbolo ✓ y se generará otro código cuando el usuario haga\nclic en el símbolo ↻.
\nDato: Genera los números y letras de manera random
\n
Anteriormente, nos enteramos que HTML5 viene con un conjunto de APIs, vamos\na entrar un poco en contexto con la siguiente diapositiva:
\n\n\nEntonces, ¿qué es una API?
\nUna interfaz de programación de aplicaciones es una colección de instrucciones\ny estándares de programación para acceder a una aplicación de software. Con\nuna API, es posible diseñar productos basados en el servicio que proporciona\nla API.
\nHTML5 tiene varias APIs nuevas. Por ejemplo:
\n\n
\n- Una API de dibujo en 2D utilizada con el nuevo elemento de lienzos para\nrepresentar gráficos y otras imágenes visuales
\n- Un mecanismo API de memoria caché que soporta aplicaciones web offline
\n- Una API para reproducir video y audio utilizado con los nuevos elementos de\nvideo y audio
\n- Una API de historial que hace que el historial de navegación sea accesible y\npermite que las páginas se agreguen a este
\n- Una API de arrastrar y soltar para ser utilizada con el atributo draggable
\n- Una API de edición para ser utilizada con el atributo contenteditable
\n- Almacenamiento del lado del cliente con APIs de JavaScript para pares de\nvalor clave y también bases de datos SQL intercaladas
\nEste texto es un extracto del blog publicado en IBM\npor Grace Walker.
\n
En esta unidad nos enfocaremos en 4 APIs del navegador, pero no será una\nlimitante, lo que verás te dará una base para enfrentarte al variado universo\nde APIs que HTML5 trae consigo. Las APIs que revisaremos son Media, Web\nStorage, Geolocation y Drag and Drop.
\nEn el sitio de html5index.org puedes encontrar la lista\nde HTML5 JavaScript APIs con algunos recursos para que puedas obtener mayor\ninformación. Como te darás cuenta, hay muchas de estas APIs y cubrirlas todas\nno sería posible, pero te sugerimos que no solo revises las que verás a\ncontinuación.
\nCuando empezamos a estudiar un tema nuevo, es útil tener una idea de los\nconceptos más importantes de lo que vamos a aprender y de los temas centrales\nque debemos prestar particular atención.
\nA continuación te presentamos una serie de preguntas que debes ser capaz de\nresponder al terminar esta unidad. Utiliza estas preguntas como guía para\norientar tus esfuerzos de aprendizaje. Regresa a ellas constantemente a\nmedida que avanzas para validar que estás avanzando en la dirección correcta.\nQue te sirva como un \"checklist\" que vas marcando a medida que vas progresando.
\n![\"Buscaminas\"](\"https://lh4.googleusercontent.com/c4jnMEV2CirXxh8CRzP1y6_VSqfPOLNQnTGyv2uKyPzEMfa42ztBClyMCigW7K3dJqNWacIJDjaj-kfVDFWtQbHySxNhSSRBPVnf2Q2SbHK3MUkWD0WMpsVyXeUAfrI11ya9heW5lng\")
localStorage y sessionStorage?Anteriormente, nos enteramos que HTML5 viene con un conjunto de APIs, vamos\na entrar un poco en contexto con la siguiente diapositiva:
\n\n\nEntonces, ¿qué es una API?
\nUna interfaz de programación de aplicaciones es una colección de instrucciones\ny estándares de programación para acceder a una aplicación de software. Con\nuna API, es posible diseñar productos basados en el servicio que proporciona\nla API.
\nHTML5 tiene varias APIs nuevas. Por ejemplo:
\n\n
\n- Una API de dibujo en 2D utilizada con el nuevo elemento de lienzos para\nrepresentar gráficos y otras imágenes visuales
\n- Un mecanismo API de memoria caché que soporta aplicaciones web offline
\n- Una API para reproducir video y audio utilizado con los nuevos elementos de\nvideo y audio
\n- Una API de historial que hace que el historial de navegación sea accesible y\npermite que las páginas se agreguen a este
\n- Una API de arrastrar y soltar para ser utilizada con el atributo draggable
\n- Una API de edición para ser utilizada con el atributo contenteditable
\n- Almacenamiento del lado del cliente con APIs de JavaScript para pares de\nvalor clave y también bases de datos SQL intercaladas
\nEste texto es un extracto del blog publicado en IBM\npor Grace Walker.
\n
En esta unidad nos enfocaremos en 4 APIs del navegador, pero no será una\nlimitante, lo que verás te dará una base para enfrentarte al variado universo\nde APIs que HTML5 trae consigo. Las APIs que revisaremos son Media, Web\nStorage, Geolocation y Drag and Drop.
\nEn el sitio de html5index.org puedes encontrar la lista\nde HTML5 JavaScript APIs con algunos recursos para que puedas obtener mayor\ninformación. Como te darás cuenta, hay muchas de estas APIs y cubrirlas todas\nno sería posible, pero te sugerimos que no solo revises las que verás a\ncontinuación.
\nCuando empezamos a estudiar un tema nuevo, es útil tener una idea de los\nconceptos más importantes de lo que vamos a aprender y de los temas centrales\nque debemos prestar particular atención.
\nA continuación te presentamos una serie de preguntas que debes ser capaz de\nresponder al terminar esta unidad. Utiliza estas preguntas como guía para\norientar tus esfuerzos de aprendizaje. Regresa a ellas constantemente a\nmedida que avanzas para validar que estás avanzando en la dirección correcta.\nQue te sirva como un \"checklist\" que vas marcando a medida que vas progresando.
\nlocalStorage y sessionStorage?Aprender a grandes rasgos cómo usar el API de Audio y Video.
\n\n\nLxs desarrolladorxs web han querido usar video y audio desde hace mucho tiempo,\na inicio de los 2000, cuando empezamos a tener un ancho de banda lo\nsuficientemente rápido para soportar cualquier tipo de video (los archivos de\nvideo son más grandes que texto o incluso imágenes). Al principio, las\ntecnologías web nativas como HTML no tenían la habilidad para embeber video o\naudio en la web, así que tecnologías propietarias (o basadas en plugins) como\nFlash (y posteriormente Silverlight) se volvieron muy populares para manejar\neste tipo de contenido. Estas tecnologías funcionaron bien, pero tenían un gran\nnúmero de problemas, incluyendo que no funcionaban bien con HTML/CSS, seguridad\ny problemas de accesibilidad.
\nUna solución nativa resolvería esto si se hiciera bien. Afortunadamente, unos\naños después, la especificación de HTML5 incluiría estos features con los\nelementos
\n<video>y<audio>, y algunas JavaScript APIs para controlarlos.
Este es un extracto de la documentación de MDN\nsobre las etiquetas de audio y video, para entrar en contexto de lo genial que\nfue agregar soporte nativo desde HTML5 con su API de media.
\nPara insertar contenido multimedia en nuestra web, debemos usar las etiquetas\n<video> y <audio>. A continuación te mostramos unos ejemplos de cómo\ninsertarlos:
¿Te diste cuenta de lo sencillo que es agregarlo? Bueno, adicional a esto,\ndebemos de tener en cuenta lo siguiente:
\ncontrols, ¿te imaginas qué pasa si se lo quitas?. Así como este atributo hay\nmuchos más, conforme vayas necesitando irás reconociendo qué otros existen..mp4 y un audio con extensión .mp3. No todos los navegadores\nsoportan el mismo formato, para garantizar que nuestro audio y/o video\nfuncione en cualquier formato, debemos de agregarlo nuestro recurso en\ndiversos formatos, eso lo logramos con la etiqueta <source>.La W3Schools (uno de tus mejores amigos en este momento) tiene una serie de\nrecursos que te pueden ayudar a obtener esta información.
\n<audio> Tag, aquí\npuedes encontrar la lista de atributos que soporta esta etiqueta y formatos\nde audio que cada navegador soporta.<video> Tag, aquí\npuedes encontrar la lista de atributos que soporta esta etiqueta y formatos\nde video que cada navegador soporta.Interactuamos a través de la interfaz HTMLMediaElement, ésta agrega las\npropiedades y métodos necesarios para soportar capacidades básicas relacionados\na elementos multimedia (audio y video).
Ejemplo:
\n¿Cómo te imaginas que sería con el audio? ¿Básicamente lo mismo no? Esperamos lo\nintentes y veas el resultado.
\n¿Y cómo sería con jQuery?
\nSi bien jQuery nos permite manipular el DOM con mayor facilidad, no provee\nsoporte para HTMLMediaElements, y lo que nos queda por hacer es obtener el\nelemento del DOM usando el método .get y debido a que es un único elemento\n(por lo tanto, el primero), hacemos $video.get(0) para poder interactuar con\nel API de video. Otro detalle interesante a notar es que, al estar esperando que\nel DOM esté listo a través de $(document).ready no significa necesariamente\nque el video haya cargado como tal, por eso, para obtener la duración, fue\nnecesario agregar un evento que nos indique que los datos del video se han\nterminado de cargar (video.onloadeddata).
Si deseas hacer una aplicación con audio y/o video, pero no se te ocurre de\ndónde obtener dicho audio y/o video, puedes obtener algunos gratuitos desde los\nsiguientes enlaces:
\n\nSi en alguna no te deja descargar, recuerda que eres una desarrolladora web y\ntienes superpoderes para inspeccionar elementos y obtener los enlaces desde\ntu Dev Tools ;).
" + "body": "Aprender a grandes rasgos cómo usar el API de Audio y Video.
\n\n\nLxs desarrolladorxs web han querido usar video y audio desde hace mucho tiempo,\na inicio de los 2000, cuando empezamos a tener un ancho de banda lo\nsuficientemente rápido para soportar cualquier tipo de video (los archivos de\nvideo son más grandes que texto o incluso imágenes). Al principio, las\ntecnologías web nativas como HTML no tenían la habilidad para embeber video o\naudio en la web, así que tecnologías propietarias (o basadas en plugins) como\nFlash (y posteriormente Silverlight) se volvieron muy populares para manejar\neste tipo de contenido. Estas tecnologías funcionaron bien, pero tenían un gran\nnúmero de problemas, incluyendo que no funcionaban bien con HTML/CSS, seguridad\ny problemas de accesibilidad.
\nUna solución nativa resolvería esto si se hiciera bien. Afortunadamente, unos\naños después, la especificación de HTML5 incluiría estos features con los\nelementos
\n<video>y<audio>, y algunas JavaScript APIs para controlarlos.
Este es un extracto de la documentación de MDN\nsobre las etiquetas de audio y video, para entrar en contexto de lo genial que\nfue agregar soporte nativo desde HTML5 con su API de media.
\nPara insertar contenido multimedia en nuestra web, debemos usar las etiquetas\n<video> y <audio>. A continuación te mostramos unos ejemplos de cómo\ninsertarlos:
¿Te diste cuenta de lo sencillo que es agregarlo? Bueno, adicional a esto,\ndebemos de tener en cuenta lo siguiente:
\ncontrols, ¿te imaginas qué pasa si se lo quitas?. Así como este atributo hay\nmuchos más, conforme vayas necesitando irás reconociendo qué otros existen..mp4 y un audio con extensión .mp3. No todos los navegadores\nsoportan el mismo formato, para garantizar que nuestro audio y/o video\nfuncione en cualquier formato, debemos de agregarlo nuestro recurso en\ndiversos formatos, eso lo logramos con la etiqueta <source>.La W3Schools (uno de tus mejores amigos en este momento) tiene una serie de\nrecursos que te pueden ayudar a obtener esta información.
\n<audio> Tag, aquí\npuedes encontrar la lista de atributos que soporta esta etiqueta y formatos\nde audio que cada navegador soporta.<video> Tag, aquí\npuedes encontrar la lista de atributos que soporta esta etiqueta y formatos\nde video que cada navegador soporta.Interactuamos a través de la interfaz HTMLMediaElement, ésta agrega las\npropiedades y métodos necesarios para soportar capacidades básicas relacionados\na elementos multimedia (audio y video).
Ejemplo:
\n¿Cómo te imaginas que sería con el audio? ¿Básicamente lo mismo no? Esperamos lo\nintentes y veas el resultado.
\n¿Y cómo sería con jQuery?
\nSi bien jQuery nos permite manipular el DOM con mayor facilidad, no provee\nsoporte para HTMLMediaElements, y lo que nos queda por hacer es obtener el\nelemento del DOM usando el método .get y debido a que es un único elemento\n(por lo tanto, el primero), hacemos $video.get(0) para poder interactuar con\nel API de video. Otro detalle interesante a notar es que, al estar esperando que\nel DOM esté listo a través de $(document).ready no significa necesariamente\nque el video haya cargado como tal, por eso, para obtener la duración, fue\nnecesario agregar un evento que nos indique que los datos del video se han\nterminado de cargar (video.onloadeddata).
Si deseas hacer una aplicación con audio y/o video, pero no se te ocurre de\ndónde obtener dicho audio y/o video, puedes obtener algunos gratuitos desde los\nsiguientes enlaces:
\n\nSi en alguna no te deja descargar, recuerda que eres una desarrolladora web y\ntienes superpoderes para inspeccionar elementos y obtener los enlaces desde\ntu Dev Tools ;).
" }, "pt": { "title": "Media: Áudio & Vídeo", - "body": "Aprender de forma geral como usar a API de Áudio e Vídeo.
\n\n\nOs desenvolvedores web desejam usar áudio e vídeo há muito tempo, desde o\ninício dos anos 2000, quando começamos a ter uma largura de banda\nsuficientemente rápida para suportar qualquer tipo de vídeo (os arquivos de\nvídeo são maiores que textos ou imagens). No início, as tecnologias web\nnativas como HTML não possuíam as habilidade para incorporar vídeo ou áudio na\nweb, o que fez com que tecnologias proprietárias (ou baseadas em plugins) como\nFlash (e posteriormente Silverlight) se tornassem muito populares para\nmanipular esse tipo de conteúdo. Estas tecnologias funcionaram bem, mas\npossuíam um grande número de problemas, incluindo que não funcionavam bem com\nHTML/CSS, problemas de segurança e de acessibilidade.
\nUma solução nativa resolveria isto se fosse bem feita. Felizmente, alguns anos\ndepois, a especificação de HTML5 incluiria estas features com os elementos\n
\n<video>e<audio>e algumas APIs JavaScript para controlá-los.
Este é um trecho da documentação de\nMDN\nsobre as tags de áudio e vídeo, para você entender o contexto de como foi\nimportante adicionar suporte nativo no HTML5 com sua API de mídia.
\nPara inserir conteúdo multimídia em nossa web, devemos usar as tags <video>\ne <audio>. A seguir mostramos alguns exemplos de como inseri-los:
Você percebeu como é fácil adicioná-los? Bem, além disso, devemos levar em\nconsideração o seguinte:
\ncontrols. Você consegue imaginar o que acontece se o remover? Assim como\neste atributo, existem muitos mais que você verá conforme for precisando..mp4 e um áudio com extensão .mp3. Nem todos os navegadores suportam o\nmesmo formato. Para garantir que nosso áudio e/ou vídeo funcione em qualquer\nformato, devemos adicioná-lo com vários formatos e para isso usamos a etiqueta\n<source>.A W3Schools (uma de suas melhores amigas neste momento) possui uma série de\nrecursos para ajudar a obter essa informação.
\n<audio> Tag: aqui você\npode encontrar a lista de atributos que são suportados por esta tag e\nformatos de áudio que cada navegador suporta.<video> Tag: aqui você\npode encontrar a lista de atributos que são suportados por esta tag e\nformatos de vídeo que cada navegador suporta.Interagimos por meio da interface HTMLMediaElement. Ela agrega as propriedades\ne métodos necessários para suportar capacidades básicas relacionadas a elementos\nmultimídia (áudio e vídeo).
Exemplo:
\nComo você imagina que seria com o áudio? Basicamente o mesmo? Esperamos que você\ntente e veja qual é o resultado.
\nE como seria com jQuery?
\nAinda que jQuery nos permita manipular o DOM com mais facilidade, ele não\nfornece suporte para HTMLMediaElements, o que nos força a obter o elemento do\nDOM usando o método .get; como ele é um único elemento (portanto, o primeiro),\nfazemos $video.get(0) para poder interagir com a API de vídeo. Outro detalhe\ninteressante a observar é que, ao aguardar que o DOM esteja pronto por meio de\n$(document).ready não significa necessariamente que o vídeo esteja carregado\ncomo tal. Por isso, para obter a duração, foi necessário adicionar um evento que\nnos indique que os dados do vídeo tenham terminado de carregar\n(video.onloadeddata).
Se deseja fazer uma aplicação com áudio e/ou vídeo, mas não lhe ocorre onde\nobter os arquivos, pode utilizar alguns gratuitos nos links abaixo:
\n\nSe não conseguir baixar algum, lembre-se de que você é uma desenvolvedora web e\nvocê possui superpoderes para inspecionar elementos e obter os links a partir de\nsuas Dev Tools ;).
" + "body": "Aprender de forma geral como usar a API de Áudio e Vídeo.
\n\n\nOs desenvolvedores web desejam usar áudio e vídeo há muito tempo, desde o\ninício dos anos 2000, quando começamos a ter uma largura de banda\nsuficientemente rápida para suportar qualquer tipo de vídeo (os arquivos de\nvídeo são maiores que textos ou imagens). No início, as tecnologias web\nnativas como HTML não possuíam as habilidade para incorporar vídeo ou áudio na\nweb, o que fez com que tecnologias proprietárias (ou baseadas em plugins) como\nFlash (e posteriormente Silverlight) se tornassem muito populares para\nmanipular esse tipo de conteúdo. Estas tecnologias funcionaram bem, mas\npossuíam um grande número de problemas, incluindo que não funcionavam bem com\nHTML/CSS, problemas de segurança e de acessibilidade.
\nUma solução nativa resolveria isto se fosse bem feita. Felizmente, alguns anos\ndepois, a especificação de HTML5 incluiria estas features com os elementos\n
\n<video>e<audio>e algumas APIs JavaScript para controlá-los.
Este é um trecho da documentação de\nMDN\nsobre as tags de áudio e vídeo, para você entender o contexto de como foi\nimportante adicionar suporte nativo no HTML5 com sua API de mídia.
\nPara inserir conteúdo multimídia em nossa web, devemos usar as tags <video>\ne <audio>. A seguir mostramos alguns exemplos de como inseri-los:
Você percebeu como é fácil adicioná-los? Bem, além disso, devemos levar em\nconsideração o seguinte:
\ncontrols. Você consegue imaginar o que acontece se o remover? Assim como\neste atributo, existem muitos mais que você verá conforme for precisando..mp4 e um áudio com extensão .mp3. Nem todos os navegadores suportam o\nmesmo formato. Para garantir que nosso áudio e/ou vídeo funcione em qualquer\nformato, devemos adicioná-lo com vários formatos e para isso usamos a etiqueta\n<source>.A W3Schools (uma de suas melhores amigas neste momento) possui uma série de\nrecursos para ajudar a obter essa informação.
\n<audio> Tag: aqui você\npode encontrar a lista de atributos que são suportados por esta tag e\nformatos de áudio que cada navegador suporta.<video> Tag: aqui você\npode encontrar a lista de atributos que são suportados por esta tag e\nformatos de vídeo que cada navegador suporta.Interagimos por meio da interface HTMLMediaElement. Ela agrega as propriedades\ne métodos necessários para suportar capacidades básicas relacionadas a elementos\nmultimídia (áudio e vídeo).
Exemplo:
\nComo você imagina que seria com o áudio? Basicamente o mesmo? Esperamos que você\ntente e veja qual é o resultado.
\nE como seria com jQuery?
\nAinda que jQuery nos permita manipular o DOM com mais facilidade, ele não\nfornece suporte para HTMLMediaElements, o que nos força a obter o elemento do\nDOM usando o método .get; como ele é um único elemento (portanto, o primeiro),\nfazemos $video.get(0) para poder interagir com a API de vídeo. Outro detalhe\ninteressante a observar é que, ao aguardar que o DOM esteja pronto por meio de\n$(document).ready não significa necessariamente que o vídeo esteja carregado\ncomo tal. Por isso, para obter a duração, foi necessário adicionar um evento que\nnos indique que os dados do vídeo tenham terminado de carregar\n(video.onloadeddata).
Se deseja fazer uma aplicação com áudio e/ou vídeo, mas não lhe ocorre onde\nobter os arquivos, pode utilizar alguns gratuitos nos links abaixo:
\n\nSe não conseguir baixar algum, lembre-se de que você é uma desenvolvedora web e\nvocê possui superpoderes para inspecionar elementos e obter os links a partir de\nsuas Dev Tools ;).
" } } }, @@ -312,11 +312,11 @@ "intl": { "es": { "title": "Web Storage", - "body": "La API de almacenamiento web proporciona los mecanismos mediante los cuales\nel navegador puede almacenar información de tipo clave/valor, de una forma\nmucho más intuitiva que utilizando cookies.
\nLos dos mecanismos en el almacenamiento web son los siguientes:
\nsessionStorage mantiene un área de almacenamiento separada para cada origen\nque está disponible por la duración de la sesión de la página (tanto si el\nnavegador esta abierto como si no, incluyendo recargas de página y\nrestablecimientos).localStorage hace lo mismo, pero persiste incluso cuando el navegador es\ncerrado y reabierto.Fuente: MDN - API de almacenamiento web
\nMira el siguiente enlace: https://mdn.github.io/dom-examples/web-storage/,\njuega con él y recarga la página, si deseas cierra la pestaña o el navegador y\nvuelve a ingresar. ¿Te diste cuenta que tus cambios permanecieron? Esto es lo\nque la API de Web Storage (almacenamiento web) nos permite hacer fácilmente.
\n¿Aun no te queda del todo claro? Acá te dejamos un post de Medium\nescrito por nuestra súper profe Marcia donde te explica los métodos que tenemos\ndisponibles a través de esta API.
\nSi eres de las que prefiere el contenido visual, acá te dejamos un video que\nte permite ver un ejemplo de cómo usar localStorage.
![\"Local](\"https://img.youtube.com/vi/hb8O0qRqiSk/0.jpg\")
JSON.stringify(), JSON.parse()?Si revisaste el video, habrás percibido que usa los métodos JSON.stringify() y\nJSON.parse(), sino lo viste, aun así es bueno que tengas presente ambos\nmétodos.
Como bien es mencionado en la parte superior, esta API almacena elementos en el\nformato de clave/valor. Ejemplo: si tengo el nombre del usuario en una variable\nllamada name y quiero almacenarla en el navegador, haría lo siguiente:
const name = 'nombre de usuario';\n/*\n * name es el identificador (clave),\n * y el valor está almacenada en la variable `name`\n */\nlocalStorage.setItem('name', name);\n// Si usáramos sessionStorage, solo cambiaríamos el objeto de localStorage\n// sessionStorage.setItem('name', name);\n\n\nEl valor siempre será almacenado como
\nstringindependientemente del tipo de\ndato con el que se almacenen.
// signup.html\nconst age = 50;\nlocalStorage.setItem('age', 50);\n\n// home.html\nconst userAge = localStorage.getItem('age');\ntypeof userAge; // \"string\"\nBien, esto deberíamos tenerlo presente siempre, en especial cuando vamos a\nquerer operar con esos valores como el caso de números o booleanos, pero\n¿cuándo usamos los métodos del objeto JSON entonces?. En ocasiones vamos a\nnecesitar almacenar múltiples valores que estén relacionados entre sí,\nnormalmente, lo representaríamos en un objeto, y debido a que todo lo que se\nalmacena es un string, no lo podemos hacer directamente. Ejemplo:
// login.html\nconst user = {\n name: 'user',\n email: 'user@gmail.com',\n photoUrl: 'https://images.com/user.png',\n};\n\nsessionStorage.setItem('loggedUser', user);\n\n// home.html\nconst loggedUser = sessionStorage.getItem('loggedUser');\nconsole.log(loggedUser); // \"[object Object]\"\nEsto ocurre ya que el intérprete trata de convertir el objeto a un string y\nesto hace que se almacence como \"[object Object]\". Si quieres saber más sobre\nporqué el objeto se convierte a string de esa manera, debes de entender un poco\nsobre como funciona coerción en JavaScript,\ny entender sobre el método .toString() de los objetos.
En fin, ¿cómo solucionamos este inconveniente y logremos almacenar nuestro\nobjeto? Entendamos qué hacen los siguientes métodos:
\nJSON.stringify(): convierte el objeto que es pasado como argumento a un\nstring, serializando las propiedades y valores.JSON.parse(): convierte el string pasado como argumento a un objeto,\ndeserializando las propiedades y valores.Ejemplo:
\n// login.html\nconst user = {\n name: 'user',\n email: 'user@gmail.com',\n photoUrl: 'https://images.com/user.png',\n};\n\n/*\n * Aquí se guarda el objeto en forma de string\n */\nsessionStorage.setItem('loggedUser', JSON.stringify(user));\n\nconsole.log(sessionStorage.getItem('loggedUser'));\n// {\"name\":\"user\",\"email\":\"user@gmail.com\",\"photoUrl\":\"https://images.com/user.png\"}\n\n\n// home.html\n/*\n * Aquí se obtiene el objeto en forma de string y se convierte (parsea) a objeto\n */\nconst loggedUser = JSON.parse(sessionStorage.getItem('loggedUser'));\nconsole.log(typeof loggedUser); // \"object\"\n\n" + "body": "Para terminar, no olvides que lo almacenado en el localStorage persiste aun\ncuando se cierra el navegador, así que si deseamos limpiar o eliminar lo que\ntenemos almacenado, debemos de usar los métodos
\n.removeItem()o.clear()\ndependiendo si queremos eliminar una clave específica o todas.
La API de almacenamiento web proporciona los mecanismos mediante los cuales\nel navegador puede almacenar información de tipo clave/valor, de una forma\nmucho más intuitiva que utilizando cookies.
\nLos dos mecanismos en el almacenamiento web son los siguientes:
\nsessionStorage mantiene un área de almacenamiento separada para cada origen\nque está disponible por la duración de la sesión de la página (tanto si el\nnavegador esta abierto como si no, incluyendo recargas de página y\nrestablecimientos).localStorage hace lo mismo, pero persiste incluso cuando el navegador es\ncerrado y reabierto.Fuente: MDN - API de almacenamiento web
\nMira el siguiente enlace: https://mdn.github.io/dom-examples/web-storage/,\njuega con él y recarga la página, si deseas cierra la pestaña o el navegador y\nvuelve a ingresar. ¿Te diste cuenta que tus cambios permanecieron? Esto es lo\nque la API de Web Storage (almacenamiento web) nos permite hacer fácilmente.
\n¿Aun no te queda del todo claro? Acá te dejamos un post de Medium\nescrito por nuestra súper profe Marcia donde te explica los métodos que tenemos\ndisponibles a través de esta API.
\nSi eres de las que prefiere el contenido visual, acá te dejamos un video que\nte permite ver un ejemplo de cómo usar localStorage.
JSON.stringify(), JSON.parse()?Si revisaste el video, habrás percibido que usa los métodos JSON.stringify() y\nJSON.parse(), sino lo viste, aun así es bueno que tengas presente ambos\nmétodos.
Como bien es mencionado en la parte superior, esta API almacena elementos en el\nformato de clave/valor. Ejemplo: si tengo el nombre del usuario en una variable\nllamada name y quiero almacenarla en el navegador, haría lo siguiente:
const name = 'nombre de usuario';\n/*\n * name es el identificador (clave),\n * y el valor está almacenada en la variable `name`\n */\nlocalStorage.setItem('name', name);\n// Si usáramos sessionStorage, solo cambiaríamos el objeto de localStorage\n// sessionStorage.setItem('name', name);\n\n\nEl valor siempre será almacenado como
\nstringindependientemente del tipo de\ndato con el que se almacenen.
// signup.html\nconst age = 50;\nlocalStorage.setItem('age', 50);\n\n// home.html\nconst userAge = localStorage.getItem('age');\ntypeof userAge; // \"string\"\nBien, esto deberíamos tenerlo presente siempre, en especial cuando vamos a\nquerer operar con esos valores como el caso de números o booleanos, pero\n¿cuándo usamos los métodos del objeto JSON entonces?. En ocasiones vamos a\nnecesitar almacenar múltiples valores que estén relacionados entre sí,\nnormalmente, lo representaríamos en un objeto, y debido a que todo lo que se\nalmacena es un string, no lo podemos hacer directamente. Ejemplo:
// login.html\nconst user = {\n name: 'user',\n email: 'user@gmail.com',\n photoUrl: 'https://images.com/user.png',\n};\n\nsessionStorage.setItem('loggedUser', user);\n\n// home.html\nconst loggedUser = sessionStorage.getItem('loggedUser');\nconsole.log(loggedUser); // \"[object Object]\"\nEsto ocurre ya que el intérprete trata de convertir el objeto a un string y\nesto hace que se almacence como \"[object Object]\". Si quieres saber más sobre\nporqué el objeto se convierte a string de esa manera, debes de entender un poco\nsobre como funciona coerción en JavaScript,\ny entender sobre el método .toString() de los objetos.
En fin, ¿cómo solucionamos este inconveniente y logremos almacenar nuestro\nobjeto? Entendamos qué hacen los siguientes métodos:
\nJSON.stringify(): convierte el objeto que es pasado como argumento a un\nstring, serializando las propiedades y valores.JSON.parse(): convierte el string pasado como argumento a un objeto,\ndeserializando las propiedades y valores.Ejemplo:
\n// login.html\nconst user = {\n name: 'user',\n email: 'user@gmail.com',\n photoUrl: 'https://images.com/user.png',\n};\n\n/*\n * Aquí se guarda el objeto en forma de string\n */\nsessionStorage.setItem('loggedUser', JSON.stringify(user));\n\nconsole.log(sessionStorage.getItem('loggedUser'));\n// {\"name\":\"user\",\"email\":\"user@gmail.com\",\"photoUrl\":\"https://images.com/user.png\"}\n\n\n// home.html\n/*\n * Aquí se obtiene el objeto en forma de string y se convierte (parsea) a objeto\n */\nconst loggedUser = JSON.parse(sessionStorage.getItem('loggedUser'));\nconsole.log(typeof loggedUser); // \"object\"\n\n" }, "pt": { "title": "Web Storage", - "body": "Para terminar, no olvides que lo almacenado en el localStorage persiste aun\ncuando se cierra el navegador, así que si deseamos limpiar o eliminar lo que\ntenemos almacenado, debemos de usar los métodos
\n.removeItem()o.clear()\ndependiendo si queremos eliminar una clave específica o todas.
A API de armazenamento web fornece os mecanismos através do quais o navegador\npode armazenar informação do tipo chave/valor de uma maneira muito mais\nintuitiva do que utilizando cookies.
\nOs dois mecanismos de armazenamento web são os seguintes:
\nsessionStorage: mantém uma área de armazenamento separada para cada origem\nque estiver disponível pela duração da sessão da página (tanto se o navegador\nestiver aberto como se estiver fechado, incluindo recarregamento de páginas e\nrestabelecimentos).localStorage faz o mesmo, mas persiste inclusive quando o navegador é\nfechado e reaberto.Fonte: MDN - API de armazenamento\nweb
\nVeja o seguinte link:\nhttps://mdn.github.io/dom-examples/web-storage/,\nbrinque com ele e recarregue a página ou, se desejar, feche a janela ou o\nnavegador e volte a acessar. Ele informa quantas mudanças permaneceram? Isto é o\nque a API de Web Storage (armazenamento web) permite que façamos facilmente.
\nAinda não está claro pra você? Aqui deixamos um post de\nMedium\nescrito por nossa super professora Marcia no qual ela explica os métodos que\ntemos disponíveis por meio desta API.
\nSe você for das que preferem o conteúdo visual, deixamos aqui um vídeo que lhe\npermite ver um exemplo de como usar localStorage.
![\"Local\nStorage\"](\"https://img.youtube.com/vi/2K4Z46CT5z4/0.jpg\")
JSON.stringify(), JSON.parse()?Se você assistiu ao vídeo, percebeu que ele usa os métodos JSON.stringify() e\nJSON.parse(). Se não o viu, é bom que tenha em mente ambos os métodos.
Como é mencionado na parte superior, esta API armazena elementos no formato de\nchave/valor. Exemplo: se tenho o nome do usuário em uma variável chamada name\ne quero armazená-la no navegador, você faria o seguinte:
const name = 'nome de usuário';\n/*\n * name é o identificador (chave),\n * e o valor está armazenado na variável `name`\n */\nlocalStorage.setItem('name', name);\n// Se usássemos sessionStorage, só mudaríamos o objeto de localStorage\n// sessionStorage.setItem('name', name);\n\n\nO valor sempre será armazenado como
\nstringindependentemente do tipo de\ndado.
// signup.html\nconst age = 50;\nlocalStorage.setItem('age', 50);\n\n// home.html\nconst userAge = localStorage.getItem('age');\ntypeof userAge; // \"string\"\nBem, isso deveríamos saber sempre, em particular quando vamos operar com esses\nvalores como o caso de números e booleanos. Mas e quando usamos os métodos do\nobjeto JSON? Há situações em que vamos precisar armazenar múltiplos valores\nque estão relacionados entre si. Normalmente, representaríamos isso como um\nobjeto e como tudo que ele armazena é uma string, não podemos fazê-lo\ndiretamente. Exemplo:
// login.html\nconst user = {\n name: 'user',\n email: 'user@gmail.com',\n photoUrl: 'https://images.com/user.png',\n};\n\nsessionStorage.setItem('loggedUser', user);\n\n// home.html\nconst loggedUser = sessionStorage.getItem('loggedUser');\nconsole.log(loggedUser); // \"[object Object]\"\nIsto acontece porque o interpretador trata de converter o objeto para uma string\ne isto faz com que armazene como \"[object Object]\". Se você quiser saber mais\nsobre porque o objeto é convertido para uma string dessa maneira, deve entender\num pouco sobre como funciona a coerção em\nJavaScript e\nentender sobre o método .toString() dos\nobjetos.
Enfim, como resolvemos esta inconveniência e conseguimos armazenar nosso objeto?\nEntendamos o que fazem os seguintes métodos:
\nJSON.stringify(): converte o objeto que é passado como argumento para uma\nstring, serializando as propriedades e valores.JSON.parse(): converte a string passada como argumento para um objeto,\ndesserializando as propriedades e valores.Exemplo:
\n// login.html\nconst user = {\n name: 'user',\n email: 'user@gmail.com',\n photoUrl: 'https://images.com/user.png',\n};\n\n/*\n * Aqui guardamos o objeto em forma de string.\n */\nsessionStorage.setItem('loggedUser', JSON.stringify(user));\n\nconsole.log(sessionStorage.getItem('loggedUser'));\n// {\n// \"name\":\"user\",\n// \"email\":\"user@gmail.com\",\n// \"photoUrl\":\"https://images.com/user.png\"\n// }\n\n\n// home.html\n/*\n * Aqui obtemos o objeto em forma de string e convertemos (parse) para objeto.\n */\nconst loggedUser = JSON.parse(sessionStorage.getItem('loggedUser'));\nconsole.log(typeof loggedUser); // \"object\"\n\n" + "body": "Para finalizar, não esqueça de que o que foi armazenado no localStorage é\npersistido mesmo quando fechamos o navegador. Logo, se desejamos limpar ou\napagar o que temos armazenado, devemos usar os métodos
\n.removeItem()ou\n.clear()dependendo se queremos eliminar uma chave específica ou todas.
A API de armazenamento web fornece os mecanismos através do quais o navegador\npode armazenar informação do tipo chave/valor de uma maneira muito mais\nintuitiva do que utilizando cookies.
\nOs dois mecanismos de armazenamento web são os seguintes:
\nsessionStorage: mantém uma área de armazenamento separada para cada origem\nque estiver disponível pela duração da sessão da página (tanto se o navegador\nestiver aberto como se estiver fechado, incluindo recarregamento de páginas e\nrestabelecimentos).localStorage faz o mesmo, mas persiste inclusive quando o navegador é\nfechado e reaberto.Fonte: MDN - API de armazenamento\nweb
\nVeja o seguinte link:\nhttps://mdn.github.io/dom-examples/web-storage/,\nbrinque com ele e recarregue a página ou, se desejar, feche a janela ou o\nnavegador e volte a acessar. Ele informa quantas mudanças permaneceram? Isto é o\nque a API de Web Storage (armazenamento web) permite que façamos facilmente.
\nAinda não está claro pra você? Aqui deixamos um post de\nMedium\nescrito por nossa super professora Marcia no qual ela explica os métodos que\ntemos disponíveis por meio desta API.
\nSe você for das que preferem o conteúdo visual, deixamos aqui um vídeo que lhe\npermite ver um exemplo de como usar localStorage.
JSON.stringify(), JSON.parse()?Se você assistiu ao vídeo, percebeu que ele usa os métodos JSON.stringify() e\nJSON.parse(). Se não o viu, é bom que tenha em mente ambos os métodos.
Como é mencionado na parte superior, esta API armazena elementos no formato de\nchave/valor. Exemplo: se tenho o nome do usuário em uma variável chamada name\ne quero armazená-la no navegador, você faria o seguinte:
const name = 'nome de usuário';\n/*\n * name é o identificador (chave),\n * e o valor está armazenado na variável `name`\n */\nlocalStorage.setItem('name', name);\n// Se usássemos sessionStorage, só mudaríamos o objeto de localStorage\n// sessionStorage.setItem('name', name);\n\n\nO valor sempre será armazenado como
\nstringindependentemente do tipo de\ndado.
// signup.html\nconst age = 50;\nlocalStorage.setItem('age', 50);\n\n// home.html\nconst userAge = localStorage.getItem('age');\ntypeof userAge; // \"string\"\nBem, isso deveríamos saber sempre, em particular quando vamos operar com esses\nvalores como o caso de números e booleanos. Mas e quando usamos os métodos do\nobjeto JSON? Há situações em que vamos precisar armazenar múltiplos valores\nque estão relacionados entre si. Normalmente, representaríamos isso como um\nobjeto e como tudo que ele armazena é uma string, não podemos fazê-lo\ndiretamente. Exemplo:
// login.html\nconst user = {\n name: 'user',\n email: 'user@gmail.com',\n photoUrl: 'https://images.com/user.png',\n};\n\nsessionStorage.setItem('loggedUser', user);\n\n// home.html\nconst loggedUser = sessionStorage.getItem('loggedUser');\nconsole.log(loggedUser); // \"[object Object]\"\nIsto acontece porque o interpretador trata de converter o objeto para uma string\ne isto faz com que armazene como \"[object Object]\". Se você quiser saber mais\nsobre porque o objeto é convertido para uma string dessa maneira, deve entender\num pouco sobre como funciona a coerção em\nJavaScript e\nentender sobre o método .toString() dos\nobjetos.
Enfim, como resolvemos esta inconveniência e conseguimos armazenar nosso objeto?\nEntendamos o que fazem os seguintes métodos:
\nJSON.stringify(): converte o objeto que é passado como argumento para uma\nstring, serializando as propriedades e valores.JSON.parse(): converte a string passada como argumento para um objeto,\ndesserializando as propriedades e valores.Exemplo:
\n// login.html\nconst user = {\n name: 'user',\n email: 'user@gmail.com',\n photoUrl: 'https://images.com/user.png',\n};\n\n/*\n * Aqui guardamos o objeto em forma de string.\n */\nsessionStorage.setItem('loggedUser', JSON.stringify(user));\n\nconsole.log(sessionStorage.getItem('loggedUser'));\n// {\n// \"name\":\"user\",\n// \"email\":\"user@gmail.com\",\n// \"photoUrl\":\"https://images.com/user.png\"\n// }\n\n\n// home.html\n/*\n * Aqui obtemos o objeto em forma de string e convertemos (parse) para objeto.\n */\nconst loggedUser = JSON.parse(sessionStorage.getItem('loggedUser'));\nconsole.log(typeof loggedUser); // \"object\"\n\n" } } }, @@ -328,11 +328,11 @@ "intl": { "es": { "title": "Jugando con Web Storage", - "body": "Para finalizar, não esqueça de que o que foi armazenado no localStorage é\npersistido mesmo quando fechamos o navegador. Logo, se desejamos limpar ou\napagar o que temos armazenado, devemos usar os métodos
\n.removeItem()ou\n.clear()dependendo se queremos eliminar uma chave específica ou todas.
Debes subir todos tus ejercicios a GitHub y publicarlos en gh-pages.
Implementa un login con Firebase, sea manual o con alguna red social,\nredireccionálo a la página principal de tu sitio (puedes darle la temática que\ndesees) y permite tener una edición de perfil, para esto los datos deben de\nestar precargados con lo que almacenaste en el navegador. Ten en cuenta que\ndebe funcionar para distintos usuarios, por lo que deberá estar existente\ndurante una sesión del usuario. ¿Deberás usar localStorage o sessionStorage?
Alguna vez te has puesto a leer un post de un blog pero te has sentido incómoda\ncon la fuente, el tamaño o incluso los colores usados. Es hora de darle una\nsolución, crea un sitio responsive (esto no es necesario indicarlo, pero por si\nlas dudas) con un post real (tu preferido, no Lorem Ipsum) y dale la opción a tu\nusuario de personalizar su modo de lectura de la mejor forma que creas\nconveniente.
\nAlgo muy similar al ejemplo visto en la lectura del self-learning anterior.\nSi deseas que se mantenga la configuración del usuario guardada, ¿qué usarás?
" + "body": "Debes subir todos tus ejercicios a GitHub y publicarlos en gh-pages.
Implementa un login con Firebase, sea manual o con alguna red social,\nredireccionálo a la página principal de tu sitio (puedes darle la temática que\ndesees) y permite tener una edición de perfil, para esto los datos deben de\nestar precargados con lo que almacenaste en el navegador. Ten en cuenta que\ndebe funcionar para distintos usuarios, por lo que deberá estar existente\ndurante una sesión del usuario. ¿Deberás usar localStorage o sessionStorage?
Alguna vez te has puesto a leer un post de un blog pero te has sentido incómoda\ncon la fuente, el tamaño o incluso los colores usados. Es hora de darle una\nsolución, crea un sitio responsive (esto no es necesario indicarlo, pero por si\nlas dudas) con un post real (tu preferido, no Lorem Ipsum) y dale la opción a tu\nusuario de personalizar su modo de lectura de la mejor forma que creas\nconveniente.
\nAlgo muy similar al ejemplo visto en la lectura del self-learning anterior.\nSi deseas que se mantenga la configuración del usuario guardada, ¿qué usarás?
" }, "pt": { "title": "Exercitando com Web Storage", - "body": "Você deve subir todos os seus exercícios para o GitHub e publicá-los nas gh-pages.
Implemente um login com Firebase, seja manual ou com alguma rede social,\nredirecione para a página principal de seu sítio web (pode dar-lhe a temática\nque desejar) e permita ter uma edição de perfil. Para isto, os dados devem estar\npré-carregados com o que foi armazenado no navegador. Leve em consideração que\ndeve funcionar para diferentes usuários, motivo pelo qual deverá existir sessões\npor usuário. Você deverá usar localStorage ou sessionStorage?
Alguma vez você começou a ler um post de um blog, mas você se sentiu incomodada\ncom a fonte, o tamanho ou as cores usados? Chegou a hora de resolver isso. Crie\num site responsivo (não é preciso dizer, mas por via das dúvidas) com um post\nreal (seu preferido, sem Lorem Ipsum) e implemente a opção para que o usuário\npossa personalizar seu modo de leitura da forma que achar conveniente.
\nAlgo muito similar ao exemplo visto na leitura de self-learning\nanterior. Se desejar armazenar\na configuração do usuário, o que você usará?
" + "body": "Você deve subir todos os seus exercícios para o GitHub e publicá-los nas gh-pages.
Implemente um login com Firebase, seja manual ou com alguma rede social,\nredirecione para a página principal de seu sítio web (pode dar-lhe a temática\nque desejar) e permita ter uma edição de perfil. Para isto, os dados devem estar\npré-carregados com o que foi armazenado no navegador. Leve em consideração que\ndeve funcionar para diferentes usuários, motivo pelo qual deverá existir sessões\npor usuário. Você deverá usar localStorage ou sessionStorage?
Alguma vez você começou a ler um post de um blog, mas você se sentiu incomodada\ncom a fonte, o tamanho ou as cores usados? Chegou a hora de resolver isso. Crie\num site responsivo (não é preciso dizer, mas por via das dúvidas) com um post\nreal (seu preferido, sem Lorem Ipsum) e implemente a opção para que o usuário\npossa personalizar seu modo de leitura da forma que achar conveniente.
\nAlgo muito similar ao exemplo visto na leitura de self-learning\nanterior. Se desejar armazenar\na configuração do usuário, o que você usará?
" } }, "challenges": [] @@ -345,7 +345,7 @@ "intl": { "es": { "title": "Geolocation", - "body": "Entender qué es la geolocalización y cómo usar el API
\nRevisemos las siguientes diapositivas
\nAhora vamos a leer el siguiente enlace\nde DevCode que aparte de tener información importante cuenta con un ejemplo\npráctico para ir resolviendo.
\nPara finalizar, veamos el siguiente vídeo, notarás que pone todo en su HTML\npero tú eres una desarrolladora que ama las buenas prácticas y a la hora de\nponer manos a la obra en tu editor de texto, pondrás cada cosa en su archivo\ncorrespondiente.
\n\nSi ya realizando lo anterior quieres algo más, DevCode tiene un tutorial\npara obtener la geolocalización con Nodejs.
" + "body": "Entender qué es la geolocalización y cómo usar el API
\nRevisemos las siguientes diapositivas
\nAhora vamos a leer el siguiente enlace\nde DevCode que aparte de tener información importante cuenta con un ejemplo\npráctico para ir resolviendo.
\nPara finalizar, veamos el siguiente vídeo, notarás que pone todo en su HTML\npero tú eres una desarrolladora que ama las buenas prácticas y a la hora de\nponer manos a la obra en tu editor de texto, pondrás cada cosa en su archivo\ncorrespondiente.
\n\nSi ya realizando lo anterior quieres algo más, DevCode tiene un tutorial\npara obtener la geolocalización con Nodejs.
" }, "pt": { "title": "Geolocalização", @@ -361,7 +361,7 @@ "intl": { "es": { "title": "Jugando con Geolocation", - "body": "Debes subir todos tus ejercicios a GitHub y publicarlos en gh-pages.
Sigamos las siguientes diapositivas para resolver nuestro\nreto
\nDebes subir todos tus ejercicios a GitHub y publicarlos en gh-pages.
Sigamos las siguientes diapositivas para resolver nuestro\nreto
\nDebes subir todos tu ejercicios a GitHub y publicarlos en gh-pages.
Revisa las siguientes diapositivas para resolver tu ejercicio
" + "body": "Debes subir todos tu ejercicios a GitHub y publicarlos en gh-pages.
Revisa las siguientes diapositivas para resolver tu ejercicio
\nEn esta unidad, nos hemos enfocado en algunas APIs específicas, pero como bien\nlo hemos mencionado, no son las únicas y te invitamos a explorar por tu cuenta\notras.
\nAcá te dejamos algunas con las que puedes ir jugando:
\nEl elemento HTML <canvas> es usado para dibujar gráficos a través de\nJavaScript. A nivel de HTML, el elemento solo es un contenedor de gráficos.\nEl API provee variados métodos para dibujar rutas, cajas, círculos, texto y\nagregar imágenes.
Dibuja las diversas formas geométricas que conozcas y comienza a darle un estilo\npersonalizado a cada una.
\nEjemplo:
\nCrea una interfaz con tus imágenes preferidas y vuélvelas pixeleadas.
\nEjemplo: Mira la sección de Quiénes somos? en la web de Developers\nLaboratoria.
\nEsta probablemente ya la haz conocido, ya sea a través del elemento <input type=\"file\" /> o cuando has querido adjuntar una imagen al momento de postear\nen tu red social. Cualquiera que haya sido el escenario, te habrás dado cuenta\nque es muy útil saber manipularla.
¿Recuerdas el reto de web storage, donde podías editar los datos tu perfil? ¿Qué\nte parece si ahora editas también su foto de perfil? ¿Y si recargas la página,\npermanece la imagen que acabas de cambiar? Comienza a mezclar ambas APIs y\ncomprueba hasta donde te lleva tu imaginación. Recuerda que una buena manera de\nindicar al usuario que su edición está correcta es mostrándole como quedaría\nantes de guardarlo.
\n\n\nDebes probar esto en tu móvil una vez terminado, estamos seguros que te\nllamará la atención ver que puedes poner un selfie que te tomas con la cámara\ncomo foto de perfil. Ooopss, la idea era que lo descubrieras por tu cuenta ;)
\n
Si ya sabes cómo mostrar las imágenes que tienes almacenadas en tu PC o móvil,\ntienes el poder de agregar interacción con el DOM, loguearte con redes sociales\ny almacenarlo en una base de datos gracias a Firebase; esto quiere decir que\n¡tienes todo lo necesario para construir tu propio Instagram! Deja volar tu\nimaginación y diviértete creando tu red social de fotografía a tu gusto.
\n\n\nNota, con CSS puedes hacer filtros a tus imágenes\n:scream:
\n
¿Alguna vez te has preguntado cómo funcionan las aplicaciones en tiempo real?\n¿Cómo hace Facebook, WhatsApp u otra red social para notificarte que has\nrecibido un mensaje inmediatamente después de que el remitente lo envió? Un\nejemplo más técnico sería mediante Firebase, ¿te has dado cuenta que si escuchas\nlos cambios de su base de datos, tu aplicación se actualzia automáticamente?
\nTodo esto es gracias a los Web Sockets, HTML5 provee esta API con la que puedes\nestablecer conecciones socket entre el navegador y un servidor. Esto significa\nque existe una conexión persistente en la que puedes enviar datos en cualquier\nmomento.
\nComo bien lo menciona en el párrafo anterior, se necesita escribir un script en\nel servidor y en el cliente para establecer una conexión de Web Sockets. Esto\npuede ser un poco complicado sobre todo porque la implementación varía en el\nback-end dependiendo del lenguaje y varía en el cliente por la compatibilidad\nentre navegadores. Para hacer probar esta API de una manera sencilla, podrías\nusar Node.js (JavaScript del lado del servidor) y una librería que funcione en\nambos lados (cliente y servidor) como socket.io.
\nProbablemente dirás que con Firebase ya puedes hacer un chat en tiempo real, aun\nasí te invitamos a vivir la experiencia de crearlo sin Firebase y veas como\npuedes armar una aplicación en tiempo real escribiendo código tanto en el cliente\ncomo en el servidor.
\n¿Te imaginas tener una pizarra compartida? Con canvas puedes crear un lienzo y\nmediante eventos del mouse dibujar en él, si estos gráficos los envías hacia un\nsocket podrías dibujarlo entre todos los usuarios conectados en tiempo real,\nalgo así como una pizarra mágina. Piénsalo, puede ayudarte cuando quieres\nenseñar o estudiar junto a alguien.
\nSi pudieras encender la cámara de tu laptop, mostrarla en la web, y enviarla a\ntravés de un socket, tendrías una aplicación de videollamadas. ¿Crees que aun\nno puedes lograrlo? Pues te comentamos, que con un par de APIs más Web Sockets\ny sobre todo tus ganas de querer hacerlo, lo puedes lograr ;)
\nLas APIs serían getUserMedia\n(parte de Media API) y Canvas. Y probablemente al investigar al respecto, te\nencontrarás con el término de WebRTC.
Tranquila, le tendrás que dedicar tiempo, pero si te interesa estamos 100%\nseguros de que podrás lograrlo :).
\n\n\nLa API de Notificaciones permite a una página web enviar notificaciones que\nse mostrarán fuera de la web al nivel del sistema. Esto permite a las\naplicaciones web enviar información al usuario aunque estas estén de fondo.
\n
Fuente: MDN - Usando la API de Notificaciones
\nYa tienes tu chat o red social ya sea con Firebase o tu propia implementación de\nWeb Sockets, ahora que te parece si cada vez que un usuario interactúa con tu\napp, le envías una notificación. Eso estaría muy cool :muscle:
\n\n\nLa mayoría de los dispositivos modernos pueden vibrar a través del hardware,\nesto permite que a través del código de software se pueda emitir estas\nvibraciones. La Vibration API ofrece a las aplicaciones web la capacidad de\nacceder a este hardware en caso este lo soporte, caso contrario el dispositivo\nno hace nada.
\n
Fuente: MDN - Vibración API
\nYa tienes tus notificaciones, ahora que te parece si agregas la capacidad de\nvibrar cuando éstas lleguen a tu usuario.
\nExisten muchas APIs que vuelven cada vez más potente al navegador, y esto a\npermitido grandes avances en la web, lo único que te podemos decir es que nunca\nnos va a dar el tiempo de ver todos, solo hay que ser curiosas y comenzar a\njugar sin miedo con ellas.
\nRecuerda tener presente que muchas de ellas tienen problemas de compatibilidad\ncon dispositivos o navegadores específicos así que no vayas a pensar que algo\nestá fallando en tu código necesariamente, puede que sea algo de hardware. Por\notro lado, recuerda que en The HTML 5 JavaScript API Index\npuedes indagar un poco más acerca de las APIs existentes.
\nY mira de manera interactiva cómo ha evolucionado la web en\nwww.evolutionoftheweb.com.
\n![\"Evolution](\"http://www.evolutionoftheweb.com/img/Evolution_of_the_web.jpg\")
En esta unidad, nos hemos enfocado en algunas APIs específicas, pero como bien\nlo hemos mencionado, no son las únicas y te invitamos a explorar por tu cuenta\notras.
\nAcá te dejamos algunas con las que puedes ir jugando:
\nEl elemento HTML <canvas> es usado para dibujar gráficos a través de\nJavaScript. A nivel de HTML, el elemento solo es un contenedor de gráficos.\nEl API provee variados métodos para dibujar rutas, cajas, círculos, texto y\nagregar imágenes.
Dibuja las diversas formas geométricas que conozcas y comienza a darle un estilo\npersonalizado a cada una.
\nEjemplo:
\nCrea una interfaz con tus imágenes preferidas y vuélvelas pixeleadas.
\nEjemplo: Mira la sección de Quiénes somos? en la web de Developers\nLaboratoria.
\nEsta probablemente ya la haz conocido, ya sea a través del elemento <input type=\"file\" /> o cuando has querido adjuntar una imagen al momento de postear\nen tu red social. Cualquiera que haya sido el escenario, te habrás dado cuenta\nque es muy útil saber manipularla.
¿Recuerdas el reto de web storage, donde podías editar los datos tu perfil? ¿Qué\nte parece si ahora editas también su foto de perfil? ¿Y si recargas la página,\npermanece la imagen que acabas de cambiar? Comienza a mezclar ambas APIs y\ncomprueba hasta donde te lleva tu imaginación. Recuerda que una buena manera de\nindicar al usuario que su edición está correcta es mostrándole como quedaría\nantes de guardarlo.
\n\n\nDebes probar esto en tu móvil una vez terminado, estamos seguros que te\nllamará la atención ver que puedes poner un selfie que te tomas con la cámara\ncomo foto de perfil. Ooopss, la idea era que lo descubrieras por tu cuenta ;)
\n
Si ya sabes cómo mostrar las imágenes que tienes almacenadas en tu PC o móvil,\ntienes el poder de agregar interacción con el DOM, loguearte con redes sociales\ny almacenarlo en una base de datos gracias a Firebase; esto quiere decir que\n¡tienes todo lo necesario para construir tu propio Instagram! Deja volar tu\nimaginación y diviértete creando tu red social de fotografía a tu gusto.
\n\n\nNota, con CSS puedes hacer filtros a tus imágenes\n:scream:
\n
¿Alguna vez te has preguntado cómo funcionan las aplicaciones en tiempo real?\n¿Cómo hace Facebook, WhatsApp u otra red social para notificarte que has\nrecibido un mensaje inmediatamente después de que el remitente lo envió? Un\nejemplo más técnico sería mediante Firebase, ¿te has dado cuenta que si escuchas\nlos cambios de su base de datos, tu aplicación se actualzia automáticamente?
\nTodo esto es gracias a los Web Sockets, HTML5 provee esta API con la que puedes\nestablecer conecciones socket entre el navegador y un servidor. Esto significa\nque existe una conexión persistente en la que puedes enviar datos en cualquier\nmomento.
\nComo bien lo menciona en el párrafo anterior, se necesita escribir un script en\nel servidor y en el cliente para establecer una conexión de Web Sockets. Esto\npuede ser un poco complicado sobre todo porque la implementación varía en el\nback-end dependiendo del lenguaje y varía en el cliente por la compatibilidad\nentre navegadores. Para hacer probar esta API de una manera sencilla, podrías\nusar Node.js (JavaScript del lado del servidor) y una librería que funcione en\nambos lados (cliente y servidor) como socket.io.
\nProbablemente dirás que con Firebase ya puedes hacer un chat en tiempo real, aun\nasí te invitamos a vivir la experiencia de crearlo sin Firebase y veas como\npuedes armar una aplicación en tiempo real escribiendo código tanto en el cliente\ncomo en el servidor.
\n¿Te imaginas tener una pizarra compartida? Con canvas puedes crear un lienzo y\nmediante eventos del mouse dibujar en él, si estos gráficos los envías hacia un\nsocket podrías dibujarlo entre todos los usuarios conectados en tiempo real,\nalgo así como una pizarra mágina. Piénsalo, puede ayudarte cuando quieres\nenseñar o estudiar junto a alguien.
\nSi pudieras encender la cámara de tu laptop, mostrarla en la web, y enviarla a\ntravés de un socket, tendrías una aplicación de videollamadas. ¿Crees que aun\nno puedes lograrlo? Pues te comentamos, que con un par de APIs más Web Sockets\ny sobre todo tus ganas de querer hacerlo, lo puedes lograr ;)
\nLas APIs serían getUserMedia\n(parte de Media API) y Canvas. Y probablemente al investigar al respecto, te\nencontrarás con el término de WebRTC.
Tranquila, le tendrás que dedicar tiempo, pero si te interesa estamos 100%\nseguros de que podrás lograrlo :).
\n\n\nLa API de Notificaciones permite a una página web enviar notificaciones que\nse mostrarán fuera de la web al nivel del sistema. Esto permite a las\naplicaciones web enviar información al usuario aunque estas estén de fondo.
\n
Fuente: MDN - Usando la API de Notificaciones
\nYa tienes tu chat o red social ya sea con Firebase o tu propia implementación de\nWeb Sockets, ahora que te parece si cada vez que un usuario interactúa con tu\napp, le envías una notificación. Eso estaría muy cool :muscle:
\n\n\nLa mayoría de los dispositivos modernos pueden vibrar a través del hardware,\nesto permite que a través del código de software se pueda emitir estas\nvibraciones. La Vibration API ofrece a las aplicaciones web la capacidad de\nacceder a este hardware en caso este lo soporte, caso contrario el dispositivo\nno hace nada.
\n
Fuente: MDN - Vibración API
\nYa tienes tus notificaciones, ahora que te parece si agregas la capacidad de\nvibrar cuando éstas lleguen a tu usuario.
\nExisten muchas APIs que vuelven cada vez más potente al navegador, y esto a\npermitido grandes avances en la web, lo único que te podemos decir es que nunca\nnos va a dar el tiempo de ver todos, solo hay que ser curiosas y comenzar a\njugar sin miedo con ellas.
\nRecuerda tener presente que muchas de ellas tienen problemas de compatibilidad\ncon dispositivos o navegadores específicos así que no vayas a pensar que algo\nestá fallando en tu código necesariamente, puede que sea algo de hardware. Por\notro lado, recuerda que en The HTML 5 JavaScript API Index\npuedes indagar un poco más acerca de las APIs existentes.
\nY mira de manera interactiva cómo ha evolucionado la web en\nwww.evolutionoftheweb.com.
\n
Nesta unidade, focamos em algumas APIs específicas, mas como mencionamos, não\nsão as únicas. Convidamos você a explorar por conta própria as outras.
\nAqui deixamos algumas com as quais você pode ir brincando:
\nO elemento HTML <canvas> é utilizado para desenhar gráficos por meio de\nJavaScript. No HTML, o elemento é só um contêiner de gráficos. A API fornece\ndiversos métodos para desenhar linhas, caixas, círculos, texto e adicionar\nimagens.
Desenhe as diversas formas geométricas que você conhece e comece a dar um estilo\npersonalizado a cada uma delas.
\nExemplo:
\nCrie uma interface com suas imagens preferidas e torne-as pixeladas.
\nExemplo: Veja a seção de Quem somos? no sítio web das Developers\nLaboratoria.
\nEsta provavelmente você já conhece, por meio do elemento <input type=\"file\" />\nou quando você quis adicionar uma imagem no momento de postar em sua rede\nsocial. Qualquer que tenha sido o cenário, você perceberá que é muito útil saber\nmanipulá-la.
Lembra do desafio de web storage, no qual você podia editar os dados do seu\nperfil? Que tal se agora você puder alterar também sua foto de perfil? E se\nrecarregar a página, permanecer a imagem que acabou de trocar? Comece a mesclar\nas duas APIs e vá até onde sua imaginação deixar. Lembre-se de que uma boa\nmaneira de indicar ao usuário que sua edição está correta é exibindo como ficará\nantes de salvar efetivamente.
\n\n\nVocê deve testar isto no seu dispositivo móvel quando terminar. Estamos\nconfiantes que você perceberá que pode colocar uma selfie que tirou com sua\ncâmera como foto de perfil. Ooopss, a ideia era que você percebesse isso\nsozinha ;)
\n
Se você já sabe como exibir imagens que estão armazenadas em seu PC ou celular,\nvocê pode adicionar interação com o DOM, logar em redes sociais e armazenar as\ninformações em uma base de dados graças ao Firebase; isto quer dizer que você\ntem tudo o que precisa para construir o seu próprio Instagram! Solte sua\nimaginação e divirta-se criando sua rede social de imagens do seu jeito.
\n\n\nNota: com CSS você pode adicionar filtros em suas\nimagens :scream:
\n
Algumas vez lhe perguntaram como funcionam as aplicações em tempo real? Como\nfunciona o Facebook, WhatsApp e outras redes sociais para notificar que você\nrecebeu uma mensagem imediatamente depois de que o remetente a tenha enviado? Um\nexemplo mais técnico seria por meio de Firebase. Você percebeu que, se sua\naplicação ouve as mudanças na base de dados, ela atualiza automaticamente?
\nTudo isso é graças aos Web Sockets. HTML5 fornece esta API com a qual você\npode estabelecer conexões socket entre o navegador e um servidor. Isso\nsignifica que existe uma conexão persistente na qual você pode enviar dados a\nqualquer momento.
\nComo dissemos no parágrafo anterior, é necessário escrever um script no servidor\ne no cliente estabelecer uma conexão com Web Sockets. Isso pode ser um pouco\ncomplicado principalmente porque a implementação varia no back-end dependendo\nda linguagem e varia no cliente devido à compatibilidade entre navegadores. Para\ntestar esta API de uma maneira simples, você poderia utilizar Node.js\n(JavaScript ao lado do servidor) e uma biblioteca que funcione em ambos os lados\n(cliente e servidor) como socket.io.
\nProvavelmente você dirá que com Firebase já pode fazer um chat em tempo real,\ncontudo convidamos você a viver a experiência de criá-lo sem Firebase e veja\ncomo pode fazer uma aplicação em tempo real escrevendo código tanto no cliente\ncomo no servidor.
\nVocê pode imaginar ter uma lousa compartilhada? Com canvas você pode criar uma\ntela e usando eventos de mouse para desenhar nela. Se esses desenhos forem\nenviados para um socket você poderia desenhá-los para todos os usuários\nconectados em tempo real (quase como um quadro mágico). Pense nisso, pode\najudá-la quando quiser ensinar ou estudar em conjunto com alguém.
\nSe você pudesse acessar a câmera de seu notebook, exibi-la na web e transmitir a\nimagem por meio de um socket, você teria uma aplicação de vídeo-chamadas. Acha\nque ainda não pode? Como já lhe dissemos, com um par de APIs associados a Web\nSockets e com sua vontade de fazer, você consegue ;)
\nAs APIs seriam getUserMedia (parte\nde Media API) e Canvas. E provavelmente ao pesquisar sobre o assunto, você\nacabará encontrando o WebRTC.
Calma, você terá que dedicar tempo, mas se estiver interessada, temos 100% de\ncerteza de que você consegue :).
\n\n\nA API de notificações permite que uma página web envie notificações que serão\nexibidas fora da web no nível de sistema. Isso permite às aplicações web\nenviar informações para o usuário embora estas estejam em segundo plano.
\n
Fonte: MDN - Usando a API de\nNotificações
\nVocê já tem seu chat ou rede social seja com Firebase ou com sua própria\nimplementação de Web Sockets. Agora, o que acha se a cada vez que um usuário\ninterage com sua aplicação, ela envia uma notificação? Isso seria muito legal!
\n\n\nA maioria dos dispositivos modernos podem vibrar utilizando o hardware. Isso\npermite que por meio do código de software se possa emitir essas vibrações. A\nVibration API permite às aplicações web a capacidade de acessar esse hardware\nno caso de haver suporte para tal. Caso contrário, o dispositivo não faz nada.
\n
Fonte: MDN - Vibration\nAPI
\nVocê já tem suas notificações. Agora, o que acha de adicionar a capacidade de\nvibrar quando elas chegarem para o usuário?
\nExistem muitas APIs que tornam o navegador cada vez mais poderoso e isso tem\npermitido grandes avanços na web. Só podemos dizer que nunca teremos tempo de\nlhe mostrar todas, portanto você deve ser curiosa e começar a brincar com elas\nsem medo.
\nLembre-se que muitas delas possuem problemas de compatibilidade com dispositivos\ne navegadores específicos. Portanto, alguma falha pode estar acontecendo por\nfalha de hardware e não por causa de seu software. Por outro lado, lembre-se que\nem The HTML 5 JavaScript API Index você pode aprender\num pouco mais sobre as APIs existentes.
\nE veja de forma interativa como a web tem evoluído em\nwww.evolutionoftheweb.com.
\n![\"Evolution](\"https://user-images.githubusercontent.com/11894994/59535335-1563aa00-8ec7-11e9-8cea-73aa1816e0ef.jpg\")
Nesta unidade, focamos em algumas APIs específicas, mas como mencionamos, não\nsão as únicas. Convidamos você a explorar por conta própria as outras.
\nAqui deixamos algumas com as quais você pode ir brincando:
\nO elemento HTML <canvas> é utilizado para desenhar gráficos por meio de\nJavaScript. No HTML, o elemento é só um contêiner de gráficos. A API fornece\ndiversos métodos para desenhar linhas, caixas, círculos, texto e adicionar\nimagens.
Desenhe as diversas formas geométricas que você conhece e comece a dar um estilo\npersonalizado a cada uma delas.
\nExemplo:
\nCrie uma interface com suas imagens preferidas e torne-as pixeladas.
\nExemplo: Veja a seção de Quem somos? no sítio web das Developers\nLaboratoria.
\nEsta provavelmente você já conhece, por meio do elemento <input type=\"file\" />\nou quando você quis adicionar uma imagem no momento de postar em sua rede\nsocial. Qualquer que tenha sido o cenário, você perceberá que é muito útil saber\nmanipulá-la.
Lembra do desafio de web storage, no qual você podia editar os dados do seu\nperfil? Que tal se agora você puder alterar também sua foto de perfil? E se\nrecarregar a página, permanecer a imagem que acabou de trocar? Comece a mesclar\nas duas APIs e vá até onde sua imaginação deixar. Lembre-se de que uma boa\nmaneira de indicar ao usuário que sua edição está correta é exibindo como ficará\nantes de salvar efetivamente.
\n\n\nVocê deve testar isto no seu dispositivo móvel quando terminar. Estamos\nconfiantes que você perceberá que pode colocar uma selfie que tirou com sua\ncâmera como foto de perfil. Ooopss, a ideia era que você percebesse isso\nsozinha ;)
\n
Se você já sabe como exibir imagens que estão armazenadas em seu PC ou celular,\nvocê pode adicionar interação com o DOM, logar em redes sociais e armazenar as\ninformações em uma base de dados graças ao Firebase; isto quer dizer que você\ntem tudo o que precisa para construir o seu próprio Instagram! Solte sua\nimaginação e divirta-se criando sua rede social de imagens do seu jeito.
\n\n\nNota: com CSS você pode adicionar filtros em suas\nimagens :scream:
\n
Algumas vez lhe perguntaram como funcionam as aplicações em tempo real? Como\nfunciona o Facebook, WhatsApp e outras redes sociais para notificar que você\nrecebeu uma mensagem imediatamente depois de que o remetente a tenha enviado? Um\nexemplo mais técnico seria por meio de Firebase. Você percebeu que, se sua\naplicação ouve as mudanças na base de dados, ela atualiza automaticamente?
\nTudo isso é graças aos Web Sockets. HTML5 fornece esta API com a qual você\npode estabelecer conexões socket entre o navegador e um servidor. Isso\nsignifica que existe uma conexão persistente na qual você pode enviar dados a\nqualquer momento.
\nComo dissemos no parágrafo anterior, é necessário escrever um script no servidor\ne no cliente estabelecer uma conexão com Web Sockets. Isso pode ser um pouco\ncomplicado principalmente porque a implementação varia no back-end dependendo\nda linguagem e varia no cliente devido à compatibilidade entre navegadores. Para\ntestar esta API de uma maneira simples, você poderia utilizar Node.js\n(JavaScript ao lado do servidor) e uma biblioteca que funcione em ambos os lados\n(cliente e servidor) como socket.io.
\nProvavelmente você dirá que com Firebase já pode fazer um chat em tempo real,\ncontudo convidamos você a viver a experiência de criá-lo sem Firebase e veja\ncomo pode fazer uma aplicação em tempo real escrevendo código tanto no cliente\ncomo no servidor.
\nVocê pode imaginar ter uma lousa compartilhada? Com canvas você pode criar uma\ntela e usando eventos de mouse para desenhar nela. Se esses desenhos forem\nenviados para um socket você poderia desenhá-los para todos os usuários\nconectados em tempo real (quase como um quadro mágico). Pense nisso, pode\najudá-la quando quiser ensinar ou estudar em conjunto com alguém.
\nSe você pudesse acessar a câmera de seu notebook, exibi-la na web e transmitir a\nimagem por meio de um socket, você teria uma aplicação de vídeo-chamadas. Acha\nque ainda não pode? Como já lhe dissemos, com um par de APIs associados a Web\nSockets e com sua vontade de fazer, você consegue ;)
\nAs APIs seriam getUserMedia (parte\nde Media API) e Canvas. E provavelmente ao pesquisar sobre o assunto, você\nacabará encontrando o WebRTC.
Calma, você terá que dedicar tempo, mas se estiver interessada, temos 100% de\ncerteza de que você consegue :).
\n\n\nA API de notificações permite que uma página web envie notificações que serão\nexibidas fora da web no nível de sistema. Isso permite às aplicações web\nenviar informações para o usuário embora estas estejam em segundo plano.
\n
Fonte: MDN - Usando a API de\nNotificações
\nVocê já tem seu chat ou rede social seja com Firebase ou com sua própria\nimplementação de Web Sockets. Agora, o que acha se a cada vez que um usuário\ninterage com sua aplicação, ela envia uma notificação? Isso seria muito legal!
\n\n\nA maioria dos dispositivos modernos podem vibrar utilizando o hardware. Isso\npermite que por meio do código de software se possa emitir essas vibrações. A\nVibration API permite às aplicações web a capacidade de acessar esse hardware\nno caso de haver suporte para tal. Caso contrário, o dispositivo não faz nada.
\n
Fonte: MDN - Vibration\nAPI
\nVocê já tem suas notificações. Agora, o que acha de adicionar a capacidade de\nvibrar quando elas chegarem para o usuário?
\nExistem muitas APIs que tornam o navegador cada vez mais poderoso e isso tem\npermitido grandes avanços na web. Só podemos dizer que nunca teremos tempo de\nlhe mostrar todas, portanto você deve ser curiosa e começar a brincar com elas\nsem medo.
\nLembre-se que muitas delas possuem problemas de compatibilidade com dispositivos\ne navegadores específicos. Portanto, alguma falha pode estar acontecendo por\nfalha de hardware e não por causa de seu software. Por outro lado, lembre-se que\nem The HTML 5 JavaScript API Index você pode aprender\num pouco mais sobre as APIs existentes.
\nE veja de forma interativa como a web tem evoluído em\nwww.evolutionoftheweb.com.
\n
Para entender esto, lo primero es recordar que existe un protocolo de\ncomunicación en el que se deja claro cómo y de que manera un cliente\n(navegador) pide información/datos a un servidor. Ya teniendo en cuenta\nesto revisemos la siguiente imagen:
\n![\"comunicación\"](\"http://www.solocodigoweb.com/wp-content/uploads/2017/06/clientserver.jpg\")
En la imagen se puede apreciar como un cliente (emisor) realiza una solicitud\nHTTP (HTTP Request) a un servidor (receptor) y este último le responde\n(HTTP Response) el pedido.
\nEstas peticiones y respuestas (que generalmente son conocidas como requests\ny responses, su traducción en inglés) son transportados a través de internet\ncomo medio de comunicación.
\nCuando hacemos esto normalmente lo realizamos de forma Síncrona, es decir\nque necesitamos que cada petición tenga su respuesta antes de enviar otra\npetición, tal como en una conversación entre dos personas.
\n\n\nCuando el navegador hace una petición de forma síncrona tiene que esperar la\nrespuesta antes de proceder a la carga de una página
\n
Pero esto en algún momento ya no nos va a resultar tan eficiente o funcional,\nten en cuenta que generalmente solo una petición no es lo único que una\naplicación está haciendo, y en general estará haciendo muchas peticiones a la\nvez, es por eso que podemos, y debemos, hacerlo de manera Asíncrona haciendo\nuso de AJAX y así lograr hacer más de una \"tarea\" a la vez.
\n\n\nCuando el navegador hace peticiones de forma asíncrona, estas pueden\nocurrir en el fondo sin bloquear la carga de una página
\n
En el siguiente vídeo los geniales amigos de UDACITY nos explican de manera\nvisual lo anterior, está en inglés pero ya sabemos que ese no es impedimento\npara que entendamos el concepto :muscle:
\n![\"Client-server](\"https://img.youtube.com/vi/nozbz6J3_4w/0.jpg\")
Para entender esto, lo primero es recordar que existe un protocolo de\ncomunicación en el que se deja claro cómo y de que manera un cliente\n(navegador) pide información/datos a un servidor. Ya teniendo en cuenta\nesto revisemos la siguiente imagen:
\n
En la imagen se puede apreciar como un cliente (emisor) realiza una solicitud\nHTTP (HTTP Request) a un servidor (receptor) y este último le responde\n(HTTP Response) el pedido.
\nEstas peticiones y respuestas (que generalmente son conocidas como requests\ny responses, su traducción en inglés) son transportados a través de internet\ncomo medio de comunicación.
\nCuando hacemos esto normalmente lo realizamos de forma Síncrona, es decir\nque necesitamos que cada petición tenga su respuesta antes de enviar otra\npetición, tal como en una conversación entre dos personas.
\n\n\nCuando el navegador hace una petición de forma síncrona tiene que esperar la\nrespuesta antes de proceder a la carga de una página
\n
Pero esto en algún momento ya no nos va a resultar tan eficiente o funcional,\nten en cuenta que generalmente solo una petición no es lo único que una\naplicación está haciendo, y en general estará haciendo muchas peticiones a la\nvez, es por eso que podemos, y debemos, hacerlo de manera Asíncrona haciendo\nuso de AJAX y así lograr hacer más de una \"tarea\" a la vez.
\n\n\nCuando el navegador hace peticiones de forma asíncrona, estas pueden\nocurrir en el fondo sin bloquear la carga de una página
\n
En el siguiente vídeo los geniales amigos de UDACITY nos explican de manera\nvisual lo anterior, está en inglés pero ya sabemos que ese no es impedimento\npara que entendamos el concepto :muscle:
\n" }, "pt": { "title": "Comunicação Cliente Servidor", - "body": "Para entender isso, primeiro precisamos lembrar que existe um protocolo de\ncomunicação que deixa claro de que maneira um cliente (navegador) solicita\ninformações/dados de um servidor. Levando em conta isso vamos revisar com a\nimagem a seguir:
\n![\"Comunicação\"](\"https://user-images.githubusercontent.com/11894994/59535679-eef23e80-8ec7-11e9-8878-ccc13659946c.jpg\")
Na imagem podemos ver como um cliente (emissor) faz uma solicitação HTTP (HTTP\nRequest) para um servidor (receptor) e este último responde ao pedido (HTTP\nResponse).
\nEsses request e response são transportados pela internet como intermediário.
\nQuando fazemos isso normalmente o fazemos de forma síncrona, ou seja,\nnecessitamos que cada solicitação tenha sua resposta antes de enviar outra\npetição.
\n\n\nQuando o navegador faz uma petição de forma síncrona ele precisa esperar a\nresposta antes de continuar com o carregamento de uma página.
\n
Mas isso em algum momento já não vai ser tão eficiente ou funcional, de maneira\nque podemos fazê-lo de forma assíncrona utilizando AJAX, podendo fazer\nmais de uma \"tarefa\" por vez.
\n\n\nQuando o navegador faz petições de forma assíncrona, elas podem ocorrer por\ntrás sem bloquear o carregamento de uma página.
\n
No vídeo a seguir os amigos geniais da UDACITY explicam de maneira visual o\nconteúdo anterior. Está em inglês mas já sabemos que isso não é impedimento para\nque entendamos o conceito :muscle:
\n
Para entender isso, primeiro precisamos lembrar que existe um protocolo de\ncomunicação que deixa claro de que maneira um cliente (navegador) solicita\ninformações/dados de um servidor. Levando em conta isso vamos revisar com a\nimagem a seguir:
\n
Na imagem podemos ver como um cliente (emissor) faz uma solicitação HTTP (HTTP\nRequest) para um servidor (receptor) e este último responde ao pedido (HTTP\nResponse).
\nEsses request e response são transportados pela internet como intermediário.
\nQuando fazemos isso normalmente o fazemos de forma síncrona, ou seja,\nnecessitamos que cada solicitação tenha sua resposta antes de enviar outra\npetição.
\n\n\nQuando o navegador faz uma petição de forma síncrona ele precisa esperar a\nresposta antes de continuar com o carregamento de uma página.
\n
Mas isso em algum momento já não vai ser tão eficiente ou funcional, de maneira\nque podemos fazê-lo de forma assíncrona utilizando AJAX, podendo fazer\nmais de uma \"tarefa\" por vez.
\n\n\nQuando o navegador faz petições de forma assíncrona, elas podem ocorrer por\ntrás sem bloquear o carregamento de uma página.
\n
No vídeo a seguir os amigos geniais da UDACITY explicam de maneira visual o\nconteúdo anterior. Está em inglês mas já sabemos que isso não é impedimento para\nque entendamos o conceito :muscle:
\n" } } }, @@ -457,11 +457,11 @@ "intl": { "es": { "title": "AJAX", - "body": "\n\nJavaScript Asíncrono y XML (AJAX) no es una tecnología por sí misma,\nes un término que describe un nuevo modo de utilizar conjuntamente varias\ntecnologías existentes. Esto incluye: HTML o XHTML, CSS, JavaScript, DOM,\nXML, XSLT, y el objeto XMLHttpRequest. Cuando estas tecnologías se combinan\nen un modelo AJAX, es posible lograr aplicaciones web capaces de actualizarse\ncontinuamente sin tener que volver a cargar la página completa. Esto crea\naplicaciones más rápidas y con mejor respuesta a las acciones del usuario.
\n
Extracto de MDN WEB DOCS:
\n\n\nEn la aplicación web tradicional, la computadora cliente realiza una solicitud\nde una página web. El servidor crea y regresa la página para el cliente.\nFinalmente, el cliente carga la nueva página y muestra la información.\nSi interactúan con la página, digamos para agregar o eliminar algo o al enviar\nun formulario, vuelve a comenzar el ciclo. El cliente hará otra solicitud,\nel servidor regresa una página totalmente nueva, el cliente carga y se\nlo presenta nuevamente al usuario.
\n
Hasta mediados de la década de los 2000, esta era básicamente la única forma\nen que se producía la comunicación por Internet. La información residiría en\nel servidor, un cliente solicitaría esos datos, actualizaría la página y\nla mostraría. Este ciclo se repetiría para todas y cada una de las\nnuevas solicitudes.
\nA finales de los años 90, el equipo de Microsoft Outlook agregó el componente\nXMLHTTP a Internet Explorer y compiló la versión web del cliente de correo de\nOutlook. Este código fue recogido por otros navegadores como\nXMLHttpRequest. Esto permitió a los navegadores realizar solicitudes HTTP\ndesde Javascript y actualizar la página actual sin recuperar una página\ncompleta del servidor. En lugar del modelo síncrono de espera para una página\ncompleta, la interfaz de usuario podría actualizarse de forma asíncrona a\nmedida que el usuario siguiera trabajando.
\nEn 2005, Jesse James Garrett acuñó el término AJAX para significar\n\"Javascript y XML asíncronos\". Esta es esencialmente la técnica de usar\nXMLHTTPRequest para recuperar datos y luego modificar la página actual.
\nAJAX tomó el mundo de la web por asalto, extendiéndose mucho más allá de\nMicrosoft Outlook. Las aplicaciones web de vanguardia como Flickr, GMail y\nGoogle Maps lo adoptaron rápidamente. En lugar de tener que esperar para\nobtener datos y actualizar la página completa, estas nuevas aplicaciones\ncasi instantáneas fueron increíbles.
\n\nEn la lectura y vídeo anterior se menciona JSON y XML, vayamos a este enlace\npara leer al respecto.
\nY por último terminamos con esta lectura\nque nos resume y explica con otras palabras que es AJAX.
" + "body": "\n\nJavaScript Asíncrono y XML (AJAX) no es una tecnología por sí misma,\nes un término que describe un nuevo modo de utilizar conjuntamente varias\ntecnologías existentes. Esto incluye: HTML o XHTML, CSS, JavaScript, DOM,\nXML, XSLT, y el objeto XMLHttpRequest. Cuando estas tecnologías se combinan\nen un modelo AJAX, es posible lograr aplicaciones web capaces de actualizarse\ncontinuamente sin tener que volver a cargar la página completa. Esto crea\naplicaciones más rápidas y con mejor respuesta a las acciones del usuario.
\n
Extracto de MDN WEB DOCS:
\n\n\nEn la aplicación web tradicional, la computadora cliente realiza una solicitud\nde una página web. El servidor crea y regresa la página para el cliente.\nFinalmente, el cliente carga la nueva página y muestra la información.\nSi interactúan con la página, digamos para agregar o eliminar algo o al enviar\nun formulario, vuelve a comenzar el ciclo. El cliente hará otra solicitud,\nel servidor regresa una página totalmente nueva, el cliente carga y se\nlo presenta nuevamente al usuario.
\n
Hasta mediados de la década de los 2000, esta era básicamente la única forma\nen que se producía la comunicación por Internet. La información residiría en\nel servidor, un cliente solicitaría esos datos, actualizaría la página y\nla mostraría. Este ciclo se repetiría para todas y cada una de las\nnuevas solicitudes.
\nA finales de los años 90, el equipo de Microsoft Outlook agregó el componente\nXMLHTTP a Internet Explorer y compiló la versión web del cliente de correo de\nOutlook. Este código fue recogido por otros navegadores como\nXMLHttpRequest. Esto permitió a los navegadores realizar solicitudes HTTP\ndesde Javascript y actualizar la página actual sin recuperar una página\ncompleta del servidor. En lugar del modelo síncrono de espera para una página\ncompleta, la interfaz de usuario podría actualizarse de forma asíncrona a\nmedida que el usuario siguiera trabajando.
\nEn 2005, Jesse James Garrett acuñó el término AJAX para significar\n\"Javascript y XML asíncronos\". Esta es esencialmente la técnica de usar\nXMLHTTPRequest para recuperar datos y luego modificar la página actual.
\nAJAX tomó el mundo de la web por asalto, extendiéndose mucho más allá de\nMicrosoft Outlook. Las aplicaciones web de vanguardia como Flickr, GMail y\nGoogle Maps lo adoptaron rápidamente. En lugar de tener que esperar para\nobtener datos y actualizar la página completa, estas nuevas aplicaciones\ncasi instantáneas fueron increíbles.
\n\nEn la lectura y vídeo anterior se menciona JSON y XML, vayamos a este enlace\npara leer al respecto.
\nY por último terminamos con esta lectura\nque nos resume y explica con otras palabras que es AJAX.
" }, "pt": { "title": "AJAX", - "body": "\n\nJavaScript Assíncrono e XML (AJAX) não são uma tecnologia por si mesmas, mas\num termo que descreve um novo modo de utilizar conjuntamente várias\ntecnologias existentes. Isso inclui: HTML ou XHTML, CSS, JavaScript, DOM, XML,\nXSLT e o objeto XMLHttpRequest. Quando essas tecnologias se combinam em um\nmodelo AJAX, é possível fazer aplicações web capazes de atualização contínua\nsem precisar recarregar a página completamente. Isso cria aplicações mais\nrápidas e com melhor resposta às ações do usuário.
\n
Parta do MDN WEB DOCS
\n\n\nNa aplicação web tradicional, o computador cliente realiza uma solicitação de\numa página web. O servidor cria e retorna a página para o cliente. Finalmente,\no cliente carrega a nova página e mostra a informação. Há interação com as\npáginas, digamos para adicionar ou eliminar algo ou enviar um formulário e de\nnovo começa o ciclo. O cliente fará outra solicitação, o servidor retorna uma\npágina totalmente nova, o cliente carrega e a apresenta ao usuário.
\n
Até meados da década de 2000, esta era basicamente a única maneira de se\nproduzir comunicação pela Internet. A informação residiria no servidor, um\ncliente solicitaria esses dados, atualizaria a página e a mostraria. Esse ciclo\nse repetiria para toda nova solicitação.
\nNo final dos anos 1990, a equipe do Microsoft Outlook adicionou o componente\nXMLHTTP ao Internet Explorer e compilou uma versão web do cliente de e-mail do\nOutlook. Esse código foi agregado a outros navegadores como XMLHttpRequest.\nIsso permitiu aos navegadores realizar solicitações HTTP a partir do JavaScript\ne atualizar a página sem buscá-la no servidor. No lugar do modelo síncrono de\nespera para uma página completa, a interface do usuário poderia ser atualizada\nde forma assíncrona a medida que o usuário seguisse trabalhando.
\nEm 2005, Jesse James Garrett cunhou o termo AJAX como significado de \"JavaScript\ne XML assíncronos\". Essa é essencialmente a técnica de utilizar XMLHttpRequest\npara recuperar dados e em seguida modificar a página atual.
\nAJAX tomou de assalto o mundo da web, indo muito mais além do Microsoft Outlook.\nAs aplicações web de vanguarda como Flickr, GMail e Google Maps adotaram AJAX\nrapidamente. No lugar de ter que esperar para obter dados e atualizar a página\ncompleta, essas novas aplicações quase instantâneas eram incríveis.
\n\nNa leitura e vídeo anteriores são mencionados JSON e XML. Vejamos este\nlink\nem espanhol para ler a respeito.
\nE por último terminamos com esta\nleitura\nem espanhol que resume e explica com outras palavras o que é AJAX.
" + "body": "\n\nJavaScript Assíncrono e XML (AJAX) não são uma tecnologia por si mesmas, mas\num termo que descreve um novo modo de utilizar conjuntamente várias\ntecnologias existentes. Isso inclui: HTML ou XHTML, CSS, JavaScript, DOM, XML,\nXSLT e o objeto XMLHttpRequest. Quando essas tecnologias se combinam em um\nmodelo AJAX, é possível fazer aplicações web capazes de atualização contínua\nsem precisar recarregar a página completamente. Isso cria aplicações mais\nrápidas e com melhor resposta às ações do usuário.
\n
Parta do MDN WEB DOCS
\n\n\nNa aplicação web tradicional, o computador cliente realiza uma solicitação de\numa página web. O servidor cria e retorna a página para o cliente. Finalmente,\no cliente carrega a nova página e mostra a informação. Há interação com as\npáginas, digamos para adicionar ou eliminar algo ou enviar um formulário e de\nnovo começa o ciclo. O cliente fará outra solicitação, o servidor retorna uma\npágina totalmente nova, o cliente carrega e a apresenta ao usuário.
\n
Até meados da década de 2000, esta era basicamente a única maneira de se\nproduzir comunicação pela Internet. A informação residiria no servidor, um\ncliente solicitaria esses dados, atualizaria a página e a mostraria. Esse ciclo\nse repetiria para toda nova solicitação.
\nNo final dos anos 1990, a equipe do Microsoft Outlook adicionou o componente\nXMLHTTP ao Internet Explorer e compilou uma versão web do cliente de e-mail do\nOutlook. Esse código foi agregado a outros navegadores como XMLHttpRequest.\nIsso permitiu aos navegadores realizar solicitações HTTP a partir do JavaScript\ne atualizar a página sem buscá-la no servidor. No lugar do modelo síncrono de\nespera para uma página completa, a interface do usuário poderia ser atualizada\nde forma assíncrona a medida que o usuário seguisse trabalhando.
\nEm 2005, Jesse James Garrett cunhou o termo AJAX como significado de \"JavaScript\ne XML assíncronos\". Essa é essencialmente a técnica de utilizar XMLHttpRequest\npara recuperar dados e em seguida modificar a página atual.
\nAJAX tomou de assalto o mundo da web, indo muito mais além do Microsoft Outlook.\nAs aplicações web de vanguarda como Flickr, GMail e Google Maps adotaram AJAX\nrapidamente. No lugar de ter que esperar para obter dados e atualizar a página\ncompleta, essas novas aplicações quase instantâneas eram incríveis.
\n\nNa leitura e vídeo anteriores são mencionados JSON e XML. Vejamos este\nlink\nem espanhol para ler a respeito.
\nE por último terminamos com esta\nleitura\nem espanhol que resume e explica com outras palavras o que é AJAX.
" } } }, @@ -489,11 +489,11 @@ "intl": { "es": { "title": "XHR", - "body": "Una buena manera de entender XHR es usando la siguiente analogía:
\n\n\nPreparar un pastel!\nPara prepararlo necesitamos, harina, huevo, leche, mantequilla y un horno.\nEncendemos el horno. Luego procedemos a mezclar los 4 ingredientes y ya\nlista la mezcla la metemos al horno, aquí va a tardar un poco en lo que se\nhornea pero mientras podemos ir preparando la cubierta del pastel.
\n
Un objeto XHR es proporcionado por el entorno de JavaScript y se utiliza para\nhacer peticiones AJAX, es muy parecido a la parte de la preparación de la mezcla\ndonde primero debemos \"preparar\" las configuraciones y luego mandar nuestra\npetición, pero una vez hecho esto nuestro código puede seguir adelante y hacer\notras peticiones o tareas.
\n\n\nCuando el horno nos regresa el pastel horneado podemos continuar con\ndecorarlo
\n
Una vez que nuestra petición tiene respuesta puede seguir adelante con lo que\nhayamos dispuesto para esta \"tarea\".
\nEl entorno de JavaScript nos proporciona una forma de realizar solicitudes\nHTTP asíncronas. Esto lo hacemos con un objeto XMLHttpRequest, podemos usar\neste objeto con la función de constructor XMLHttpRequest proporcionada.
\nXMLHttpRequests (comúnmente abreviado como XHR o xhr) se puede utilizar para\nsolicitar cualquier tipo de archivo (por ejemplo, archivos de texto plano,\nHTML, JSON, de imagen, etc.) o datos de una API.
\nAhora profundizaremos en el objeto XMLHttpRequest. Veremos cómo crearlo, qué\nmétodos y propiedades se deben usar y cómo enviar realmente solicitudes\nasíncronas.
\n\n.open()Ya que hemos construido un objeto XHR llamado asyncRequestObject.
\nconst asyncRequestObject = new XMLHttpRequest ();\nPodemos acceder a sus métodos, uno de los más importantes es el método .open()
asyncRequestObject.open();
\n.open() toma una serie de parámetros, pero los más importantes son sus dos\nprimeros: el método HTTP y la URL para enviar la solicitud.
![\"sintax-open\"](\"https://github.com/AnaSalazar/curricula-js/blob/ivandevp-06-spa/06-spa/02-asynchronous-js-request/04-xhr/sintax_open.png?raw=true\")
Si queremos solicitar de manera asíncrona la página de inicio del popular sitio\nde imágenes de alta resolución, Unsplash, usaremos una solicitud GET y\nproporcionaremos la URL:
\nasyncRequestObject.open('GET', 'https://unsplash.com');\n\n\nLos métodos HTTP que por el momento más usaremos son:\nGET - para recuperar datos.\nPOST - para enviar datos.
\n
.send()Para enviar la solicitud, necesitamos usar el método de envío:
\nasyncRequestObject.send();\nYa sabemos que no hay mejor manera de aprender que practicar, para ver como\nfunciona, dirígete a Unsplash, abre tu developer tools\ny agrega en consola el objeto y sus métodos open y send.
\n![\"XHR](\"https://d17h27t6h515a5.cloudfront.net/topher/2017/August/59938614_ud109-l1-send-xhr-request-1/ud109-l1-send-xhr-request-1.gif\")
En el siguiente video podemos ver que es lo pasa, está en inglés pero si vas\nhaciendo el paso a paso como en el video, seguro que le entiendes.
\n![\"XHR](\"https://img.youtube.com/vi/m9C0LJoWhOE/0.jpg\")
Ya que la petición ha sido enviada debemos establecer la propiedad onload en\nel objeto a una función que manejará la respuesta exitosa de nuestra solicitud\nXHR:
function handleSuccess () {\n // en la función, `this` es el valor del objeto XHR\n // this.responseText contiene la respuesta del servidor\n\n console.log( this.responseText ); // el HTML de https://unsplash.com/\n}\n\nasyncRequestObject.onload = handleSuccess;\nCon esto nos damos cuenta que si onload no está configurado, la solicitud\nvuelve pero no ocurre nada con eso.
Ahora veamos que pasa si sucede algo con la solicitud y no se puede cumplir,\nentonces necesitamos usar la propiedad onerror:
\nfunction handleError () {\n console.log( 'An error occurred 😞' );\n}\n\nasyncRequestObject.onerror = handleError;\nAl igual que con onload, si onerror no está configurado y se produce un\nerror, ese error simplemente fallará en silencio y tu código (¡y tu usuario!)\nno sabrá qué es lo que está mal ni cómo recuperarlo.
Es una buena práctica el tener ambos casos, correcto y error, en control\nsiempre. Es nuestra responsabilidad de desarrolladoras el comunicar al usuario\nqué es lo que sucede mientras espera. Y ofrecer opciones en caso de error, eso\nhará que nuestras aplicaciones tengan una mejor UX (experiencia de usuario) y\nsean más robustas, esto es, que no se caigan con nada.
\nAquí está el código completo que hemos desarrollado.
\nSe crea el objeto XHR, se le dice qué información solicitar, configuramos los\nmanejadores para un éxito o error y luego finalmente se envía la solicitud:
\nfunction handleSuccess () {\n console.log( this.responseText );\n\n}\n\nfunction handleError () {\n console.log( 'An error occurred 😞' );\n}\n\nconst asyncRequestObject = new XMLHttpRequest();\nasyncRequestObject.open('GET', 'https://unsplash.com');\nasyncRequestObject.onload = handleSuccess;\nasyncRequestObject.onerror = handleError;\nasyncRequestObject.send();\nObtener el HTML de un sitio web está bien, pero probablemente no sea muy útil.\nLos datos que devuelve están en un formato que es extremadamente difícil de\nanalizar y consumir.
\nSería mucho más fácil (y útil) si pudiéramos obtener solo los datos que\nqueremos en una estructura de datos mejor ordenada, aquí entra JSON\n(JavaScript Object Notation).
\nEs un formato de texto, es una forma de ordenar los datos de manera que sea\nfácil procesarlos y manejarlos. Nace del problema de cómo podemos intercambiar\ndatos entre aplicaciones, páginas o servicios de una manera cómoda.\nJSON ES texto, pero con una estructura bien definida, tal como ordenamos\nlibros en capítulos, secciones, parrafos, lineas. Un JSON estará compuesto de\nllaves y valores tal como en el siguiente ejemplo:
\n{\n \"título\": \"La guía del viajero intergaláctico\",\n \"autor\": \"Douglas Adams\",\n \"descripción\": \"Triología de cinco partes\"\n}\nTítulo, autor y descripción son las llaves, mientras que el resto son los\nvalores de esas llaves.
\nEntonces, si estamos comunicándonos con una API a través de JSON, necesitamos\nque nuestro código entienda el formato de este texto especial, a este proceso le\nllamaremos análisis o parsing en inglés. Luego de este análisis, el texto pasa\na ser un objeto de javascript, que podemos manipular y acceder como cualquier\notro objeto que hemos visto.\nSupongamos que la respuesta es el JSON que pusimos de ejemplo anteriormente,\nveamos cómo podemos analizar o parsear ésta :
\nfunction handleSuccess () {\n const data = JSON.parse( this.responseText );\n console.log( `${data.autor} escribió el libro : ${data.título}` );\n}\n\nasyncRequestObject.onload = handleSuccess;\nPara obtener más información sobre el uso del objeto XHR para realizar\nsolicitudes asíncronas, puedes consultar estos enlaces:
\nUna buena manera de entender XHR es usando la siguiente analogía:
\n\n\nPreparar un pastel!\nPara prepararlo necesitamos, harina, huevo, leche, mantequilla y un horno.\nEncendemos el horno. Luego procedemos a mezclar los 4 ingredientes y ya\nlista la mezcla la metemos al horno, aquí va a tardar un poco en lo que se\nhornea pero mientras podemos ir preparando la cubierta del pastel.
\n
Un objeto XHR es proporcionado por el entorno de JavaScript y se utiliza para\nhacer peticiones AJAX, es muy parecido a la parte de la preparación de la mezcla\ndonde primero debemos \"preparar\" las configuraciones y luego mandar nuestra\npetición, pero una vez hecho esto nuestro código puede seguir adelante y hacer\notras peticiones o tareas.
\n\n\nCuando el horno nos regresa el pastel horneado podemos continuar con\ndecorarlo
\n
Una vez que nuestra petición tiene respuesta puede seguir adelante con lo que\nhayamos dispuesto para esta \"tarea\".
\nEl entorno de JavaScript nos proporciona una forma de realizar solicitudes\nHTTP asíncronas. Esto lo hacemos con un objeto XMLHttpRequest, podemos usar\neste objeto con la función de constructor XMLHttpRequest proporcionada.
\nXMLHttpRequests (comúnmente abreviado como XHR o xhr) se puede utilizar para\nsolicitar cualquier tipo de archivo (por ejemplo, archivos de texto plano,\nHTML, JSON, de imagen, etc.) o datos de una API.
\nAhora profundizaremos en el objeto XMLHttpRequest. Veremos cómo crearlo, qué\nmétodos y propiedades se deben usar y cómo enviar realmente solicitudes\nasíncronas.
\n\n.open()Ya que hemos construido un objeto XHR llamado asyncRequestObject.
\nconst asyncRequestObject = new XMLHttpRequest ();\nPodemos acceder a sus métodos, uno de los más importantes es el método .open()
asyncRequestObject.open();
\n.open() toma una serie de parámetros, pero los más importantes son sus dos\nprimeros: el método HTTP y la URL para enviar la solicitud.
Si queremos solicitar de manera asíncrona la página de inicio del popular sitio\nde imágenes de alta resolución, Unsplash, usaremos una solicitud GET y\nproporcionaremos la URL:
\nasyncRequestObject.open('GET', 'https://unsplash.com');\n\n\nLos métodos HTTP que por el momento más usaremos son:\nGET - para recuperar datos.\nPOST - para enviar datos.
\n
.send()Para enviar la solicitud, necesitamos usar el método de envío:
\nasyncRequestObject.send();\nYa sabemos que no hay mejor manera de aprender que practicar, para ver como\nfunciona, dirígete a Unsplash, abre tu developer tools\ny agrega en consola el objeto y sus métodos open y send.
\n
En el siguiente video podemos ver que es lo pasa, está en inglés pero si vas\nhaciendo el paso a paso como en el video, seguro que le entiendes.
\n\nYa que la petición ha sido enviada debemos establecer la propiedad onload en\nel objeto a una función que manejará la respuesta exitosa de nuestra solicitud\nXHR:
function handleSuccess () {\n // en la función, `this` es el valor del objeto XHR\n // this.responseText contiene la respuesta del servidor\n\n console.log( this.responseText ); // el HTML de https://unsplash.com/\n}\n\nasyncRequestObject.onload = handleSuccess;\nCon esto nos damos cuenta que si onload no está configurado, la solicitud\nvuelve pero no ocurre nada con eso.
Ahora veamos que pasa si sucede algo con la solicitud y no se puede cumplir,\nentonces necesitamos usar la propiedad onerror:
\nfunction handleError () {\n console.log( 'An error occurred 😞' );\n}\n\nasyncRequestObject.onerror = handleError;\nAl igual que con onload, si onerror no está configurado y se produce un\nerror, ese error simplemente fallará en silencio y tu código (¡y tu usuario!)\nno sabrá qué es lo que está mal ni cómo recuperarlo.
Es una buena práctica el tener ambos casos, correcto y error, en control\nsiempre. Es nuestra responsabilidad de desarrolladoras el comunicar al usuario\nqué es lo que sucede mientras espera. Y ofrecer opciones en caso de error, eso\nhará que nuestras aplicaciones tengan una mejor UX (experiencia de usuario) y\nsean más robustas, esto es, que no se caigan con nada.
\nAquí está el código completo que hemos desarrollado.
\nSe crea el objeto XHR, se le dice qué información solicitar, configuramos los\nmanejadores para un éxito o error y luego finalmente se envía la solicitud:
\nfunction handleSuccess () {\n console.log( this.responseText );\n\n}\n\nfunction handleError () {\n console.log( 'An error occurred 😞' );\n}\n\nconst asyncRequestObject = new XMLHttpRequest();\nasyncRequestObject.open('GET', 'https://unsplash.com');\nasyncRequestObject.onload = handleSuccess;\nasyncRequestObject.onerror = handleError;\nasyncRequestObject.send();\nObtener el HTML de un sitio web está bien, pero probablemente no sea muy útil.\nLos datos que devuelve están en un formato que es extremadamente difícil de\nanalizar y consumir.
\nSería mucho más fácil (y útil) si pudiéramos obtener solo los datos que\nqueremos en una estructura de datos mejor ordenada, aquí entra JSON\n(JavaScript Object Notation).
\nEs un formato de texto, es una forma de ordenar los datos de manera que sea\nfácil procesarlos y manejarlos. Nace del problema de cómo podemos intercambiar\ndatos entre aplicaciones, páginas o servicios de una manera cómoda.\nJSON ES texto, pero con una estructura bien definida, tal como ordenamos\nlibros en capítulos, secciones, parrafos, lineas. Un JSON estará compuesto de\nllaves y valores tal como en el siguiente ejemplo:
\n{\n \"título\": \"La guía del viajero intergaláctico\",\n \"autor\": \"Douglas Adams\",\n \"descripción\": \"Triología de cinco partes\"\n}\nTítulo, autor y descripción son las llaves, mientras que el resto son los\nvalores de esas llaves.
\nEntonces, si estamos comunicándonos con una API a través de JSON, necesitamos\nque nuestro código entienda el formato de este texto especial, a este proceso le\nllamaremos análisis o parsing en inglés. Luego de este análisis, el texto pasa\na ser un objeto de javascript, que podemos manipular y acceder como cualquier\notro objeto que hemos visto.\nSupongamos que la respuesta es el JSON que pusimos de ejemplo anteriormente,\nveamos cómo podemos analizar o parsear ésta :
\nfunction handleSuccess () {\n const data = JSON.parse( this.responseText );\n console.log( `${data.autor} escribió el libro : ${data.título}` );\n}\n\nasyncRequestObject.onload = handleSuccess;\nPara obtener más información sobre el uso del objeto XHR para realizar\nsolicitudes asíncronas, puedes consultar estos enlaces:
\nUma boa maneira de entender XHR é usando a seguinte analogia:
\n\n\nPreparar uma torta! Para prepará-la, precisamos de farinha, ovo, leite,\nmanteiga e um forno. Acendemos o forno. Em seguida podemos misturar os 4\ningredientes e já pronta a massa a colocamos no forno. Aqui demora um pouco\naté que asse, mas enquanto isso podemos ir fazendo o recheio.
\n
Um objeto XHR é fornecido pelo ambiente de JavaScript e é utilizado para fazer\nrequisições AJAX. É muito parecido com a parte da preparação da massa em que\nprimeiro devemos \"preparar\" as configurações e em seguida enviar nossa\nrequisição. Uma vez isto feito, nosso código pode seguir adiante e fazer outras\nrequisições ou tarefas.
\n\n\nQuando o forno nos devolve a torta assada, podemos continuar a decorá-la.
\n
Uma vez que nossa requisição tem uma resposta, o programa pode seguir em frente\ncom o que programamos para esta \"tarefa\".
\nO ambiente de JavaScript proporciona uma forma de realizar requisições HTTP\nassíncronas. Isso é feito com um objeto XMLHttpRequest. Podemos usar este\nobjeto com a função do construtor XMLHttpRequest.
XMLHttpRequests (comummente abreviado como XHR ou xhr) podem ser utilizados para\nrequisitar qualquer tipo de arquivo (por exemplo, arquivos de texto puro, HTML,\nJSON, de imagem, etc.) ou dados de uma API.
\nAgora aprofundaremos o estudo no objeto XMLHttpRequest. Veremos como criá-lo,\nquais métodos e propriedades devem ser usadas e como enviar requisições\nassíncronas.
\n\n.open()Construímos um objeto XHR chamado asyncRequestObject.
\nconst asyncRequestObject = new XMLHttpRequest();\nPodemos acessar seus métodos. Um dos mais importantes é o método .open()
asyncRequestObject.open();
.open() recebe uma série de parâmetros, mas os mais importantes são os dois\nprimeiros: o método HTTP e a URL para enviar a requisição.
![\"sintax-open\"](\"https://user-images.githubusercontent.com/11894994/59536886-5493fa00-8ecb-11e9-9fb2-dbf4237c6ae4.png\")
Se queremos requisitar de maneira assíncrona a página inicial do popular sítio\nde imagens de alta resolução, Unsplash, usaremos uma requisição GET e\nforneceremos a URL:
asyncRequestObject.open('GET', 'https://unsplash.com');\n\n\nOs métodos HTTP que mais usaremos por enquanto são: GET - para recuperar\ndados. POST - para enviar dados.
\n
.send()Para enviar a requisição, precisamos usar o método de envio:
\nasyncRequestObject.send();\nJá sabemos que não há melhor maneira de aprender do que fazendo. Para ver como\nfunciona, vá ao Unsplash, abra suas developer tools e\nadicione no console o objeto e seus métodos open e send.
![\"XHR](\"https://user-images.githubusercontent.com/11894994/59536911-72615f00-8ecb-11e9-8e8a-5add6b412c9e.gif\")
No vídeo a seguir podemos ver o que acontece:
\n![\"APIs](\"https://img.youtube.com/vi/ravLi7zZA7Q/0.jpg\")
Uma vez que a petição foi enviada, devemos estabelecer a propriedade onload no\nobjeto a uma função que manejará a resposta bem sucedida da nossa requisição\nXHR: XHR:
function handleSuccess () {\n // na função, `this` é o valor do objeto XHR\n // this.responseText contém a resposta do servidor\n\n console.log( this.responseText ); // o HTML de https://unsplash.com/\n}\n\nasyncRequestObject.onload = handleSuccess;\nCom isso percebemos que se onload não estiver configurado, a solicitação\nretorna mas não faz nada.
Agora vejamos o que passa se algo acontece com a requisição e não acontece com\nsucesso. Nesse caso, precisamos usar a propriedade onerror:
function handleError () {\n console.log( 'Um erro aconteceu 😞' );\n}\n\nasyncRequestObject.onerror = handleError;\nAssim como com onload, se onerror não estiver configurado e um erro\nacontece, esse erro simplesmente ficará em silêncio e seu código (e seu\nusuário!) não saberá o que deu de errado e nem como refazer a operação.
Aqui está o código completo que desenvolvemos:
\nCriamos o objeto XHR, dissemos qual informação requisitar, configuramos os\nmanipuladores para sucesso ou erro e por fim enviamos a requisição:
\nfunction handleSuccess () {\n console.log( this.responseText );\n\n}\n\nfunction handleError () {\n console.log( 'Um erro aconteceu 😞' );\n}\n\nconst asyncRequestObject = new XMLHttpRequest();\nasyncRequestObject.open('GET', 'https://unsplash.com');\nasyncRequestObject.onload = handleSuccess;\nasyncRequestObject.onerror = handleError;\nasyncRequestObject.send();\nObter o HTML de um sítio web é fácil, mas provavelmente não é muito útil. Os\ndados que retornam estão em um formato que é extremamente difícil de analisar e\nconsumir.
\nSeria muito mais fácil (e útil) se pudéssemos obter somente os dados que\nqueremos em uma estrutura de dados melhor ordenada. Aqui entra JSON.
\nAo realizar uma requisição de uma API que retorna um JSON, tudo o que precisamos\nfazer é converter esse retorno JSON em um objeto JavaScript. Podemos fazer isso\ncom JSON.parse();. Modifiquemos a função de carregamento para manipular uma\nresposta JSON:
function handleSuccess () {\n const data = JSON.parse( this.responseText );\n console.log( data );\n}\n\nasyncRequestObject.onload = handleSuccess;\nPara obter mais informação sobre o uso do objeto XHR para realizar requisições\nassíncronas, você pode consultar estes links:
\nUma boa maneira de entender XHR é usando a seguinte analogia:
\n\n\nPreparar uma torta! Para prepará-la, precisamos de farinha, ovo, leite,\nmanteiga e um forno. Acendemos o forno. Em seguida podemos misturar os 4\ningredientes e já pronta a massa a colocamos no forno. Aqui demora um pouco\naté que asse, mas enquanto isso podemos ir fazendo o recheio.
\n
Um objeto XHR é fornecido pelo ambiente de JavaScript e é utilizado para fazer\nrequisições AJAX. É muito parecido com a parte da preparação da massa em que\nprimeiro devemos \"preparar\" as configurações e em seguida enviar nossa\nrequisição. Uma vez isto feito, nosso código pode seguir adiante e fazer outras\nrequisições ou tarefas.
\n\n\nQuando o forno nos devolve a torta assada, podemos continuar a decorá-la.
\n
Uma vez que nossa requisição tem uma resposta, o programa pode seguir em frente\ncom o que programamos para esta \"tarefa\".
\nO ambiente de JavaScript proporciona uma forma de realizar requisições HTTP\nassíncronas. Isso é feito com um objeto XMLHttpRequest. Podemos usar este\nobjeto com a função do construtor XMLHttpRequest.
XMLHttpRequests (comummente abreviado como XHR ou xhr) podem ser utilizados para\nrequisitar qualquer tipo de arquivo (por exemplo, arquivos de texto puro, HTML,\nJSON, de imagem, etc.) ou dados de uma API.
\nAgora aprofundaremos o estudo no objeto XMLHttpRequest. Veremos como criá-lo,\nquais métodos e propriedades devem ser usadas e como enviar requisições\nassíncronas.
\n\n.open()Construímos um objeto XHR chamado asyncRequestObject.
\nconst asyncRequestObject = new XMLHttpRequest();\nPodemos acessar seus métodos. Um dos mais importantes é o método .open()
asyncRequestObject.open();
.open() recebe uma série de parâmetros, mas os mais importantes são os dois\nprimeiros: o método HTTP e a URL para enviar a requisição.
Se queremos requisitar de maneira assíncrona a página inicial do popular sítio\nde imagens de alta resolução, Unsplash, usaremos uma requisição GET e\nforneceremos a URL:
asyncRequestObject.open('GET', 'https://unsplash.com');\n\n\nOs métodos HTTP que mais usaremos por enquanto são: GET - para recuperar\ndados. POST - para enviar dados.
\n
.send()Para enviar a requisição, precisamos usar o método de envio:
\nasyncRequestObject.send();\nJá sabemos que não há melhor maneira de aprender do que fazendo. Para ver como\nfunciona, vá ao Unsplash, abra suas developer tools e\nadicione no console o objeto e seus métodos open e send.
No vídeo a seguir podemos ver o que acontece:
\n\nUma vez que a petição foi enviada, devemos estabelecer a propriedade onload no\nobjeto a uma função que manejará a resposta bem sucedida da nossa requisição\nXHR: XHR:
function handleSuccess () {\n // na função, `this` é o valor do objeto XHR\n // this.responseText contém a resposta do servidor\n\n console.log( this.responseText ); // o HTML de https://unsplash.com/\n}\n\nasyncRequestObject.onload = handleSuccess;\nCom isso percebemos que se onload não estiver configurado, a solicitação\nretorna mas não faz nada.
Agora vejamos o que passa se algo acontece com a requisição e não acontece com\nsucesso. Nesse caso, precisamos usar a propriedade onerror:
function handleError () {\n console.log( 'Um erro aconteceu 😞' );\n}\n\nasyncRequestObject.onerror = handleError;\nAssim como com onload, se onerror não estiver configurado e um erro\nacontece, esse erro simplesmente ficará em silêncio e seu código (e seu\nusuário!) não saberá o que deu de errado e nem como refazer a operação.
Aqui está o código completo que desenvolvemos:
\nCriamos o objeto XHR, dissemos qual informação requisitar, configuramos os\nmanipuladores para sucesso ou erro e por fim enviamos a requisição:
\nfunction handleSuccess () {\n console.log( this.responseText );\n\n}\n\nfunction handleError () {\n console.log( 'Um erro aconteceu 😞' );\n}\n\nconst asyncRequestObject = new XMLHttpRequest();\nasyncRequestObject.open('GET', 'https://unsplash.com');\nasyncRequestObject.onload = handleSuccess;\nasyncRequestObject.onerror = handleError;\nasyncRequestObject.send();\nObter o HTML de um sítio web é fácil, mas provavelmente não é muito útil. Os\ndados que retornam estão em um formato que é extremamente difícil de analisar e\nconsumir.
\nSeria muito mais fácil (e útil) se pudéssemos obter somente os dados que\nqueremos em uma estrutura de dados melhor ordenada. Aqui entra JSON.
\nAo realizar uma requisição de uma API que retorna um JSON, tudo o que precisamos\nfazer é converter esse retorno JSON em um objeto JavaScript. Podemos fazer isso\ncom JSON.parse();. Modifiquemos a função de carregamento para manipular uma\nresposta JSON:
function handleSuccess () {\n const data = JSON.parse( this.responseText );\n console.log( data );\n}\n\nasyncRequestObject.onload = handleSuccess;\nPara obter mais informação sobre o uso do objeto XHR para realizar requisições\nassíncronas, você pode consultar estes links:
\nDejar que un experto prepare el pastel por ti.
\n![\"XHR](\"https://img.youtube.com/vi/NFGrayBZOVM/0.jpg\")
jQuery es una librería muy popular que ya has tenido la oportunidad de usar. El\nuso que le has dado hasta este momento ha sido para manipular y recorrer el DOM\na través de métodos que hacen nuestro código más corto.
\nAhora, usaremos esta ventaja de usar métodos más pequeños y dejar la\nresponsabilidad a jQuery de ver la compatibilidad de navegadores por nosotros\nen la implementación de AJAX.
\nEsto es posible gracias al método .ajax() que jQuery provee para realizar\npeticiones asíncronas.
.ajax()El método .ajax() es el corazón de las peticiones asíncronas en la librería\nde jQuery. Hay 2 formas de usar este método:
$.ajax(<url-a-realizar-la-petición>, <un-objeto-configuración>);\n\n// or\n\n$.ajax(<solo un objeto de configuración>);\nFuente: Documentación de jQuery
\nLa manera más común de usar el método .ajax() es usando solo el objeto de\nconfiguración, esto en parte es debido a que es la forma más antigua que está\ndisponible (versión 1.0, a ver si encuentras de donde obtuvimos este dato\nmirando la documentación), además de que toda la configuración lo puedes poner\nen un solo objeto.
\n\nQué es un objeto de configuración?
\nEs un objeto de JavaScript que se usa para configurar algo.
\nPor ejemplo:
\n\nconst settings = {\n name: 'this is my name',\n colors: ['orange', 'blue'],\n layers: 2,\n isRound: true,\n};\nEl objeto de configuración puede ser pasado como parámetro de una función\nconstructora. Imaginemos la función constructora
\nMakeCake:\nconst myDeliciousCake = MakeCake(settings);\nDe igual manera, el objeto de configuración puede ser pasado directamente:
\n\nconst myDeliciousCake = MakeCake({\n name: 'this is my name',\n colors: ['orange', 'blue'],\n layers: 2,\n isRound: true,\n});\n
El método .ajax() de jQuery tiene que ser increíblemente versátil y poderoso\nsi es lo que le da vida a las peticiones asíncronas de jQuery. Una petición Ajax\nsimple se vería así:
$.ajax({\n url: `https://api.github.com/users/${searchedUser}`\n});\nVamos a probarlo:
\nDeveloper Tools de tu navegadorNetwork y que el botón de grabación está\nencendido![\"jQuery](\"https://media.giphy.com/media/l1KcRuWi059tT6VYQ/giphy.gif\")
Este request (petición o solicitud) está siendo realizada hacia un recurso en\nGithub (información del usuario). El request puede ser revisado desde el panel\nde redes (pestaña Network en el Dev Tools).
Ya sabemos cómo realizar una petición con .ajax() pero aun no estamos\ncontrolando la respuesta.
Si recordamos cómo podemos lograr esto usando un objeto XHR, el response era\ncontrolado por una función. Para el método .ajax() es exactamente lo mismo,\npodemos encadenar a la ejecución de éste, el método .done(). Vamos a pasar una\nfunción como argumento al método .done() que se ejecutará una vez que la\nllamada Ajax haya terminado:
function handleResponse(data) {\n console.log('the ajax request has finished!');\n console.log(data);\n}\n\n$.ajax({\n url: `https://api.github.com/users/${searchedUser}`\n}).done(handleResponse);\n![\"done](\"https://media.giphy.com/media/xUOwGiAxN7tYlwAZyg/giphy.gif\")
La llamada asíncrona es realizada y controlada una vez que termina por el\nmétodo .done(), en este caso, muestra el response en la consola.
Para ponernos a prueba, vamos a convertir esta petición asíncrona que usa XHR\na una llamada con el método .ajax() de jQuery. Esto es lo que tenemos\nactualmente:
const githubRequest = new XMLHttpRequest();\ngithubRequest.onload = addUser;\ngithubRequest.open('GET', `https://api.github.com/users/${searchedUser}`);\ngithubRequest.send();\nMuchas de estas operaciones pueden ser manejadas internamente por jQuery, así\nque el primer paso de la conversión sería así:
\n$.ajax({\n url: `https://api.github.com/users/${searchedUser}`\n}).done(addUser);\nUsando jQuery para peticiones asíncronas:
\nGET, jQuery lo da por\ndefecto y solo tenemos que indicarle la URL del recurso que estamos\nsolicitando.onload, usamos el método .done()La petición debe enviarse correctamente ahora. ¡Gran trabajo! Pero ahora tenemos\nproblemas con el response y cómo se está controlando.
\nYa hemos obtenido la respuesta en la consola, ahora vamos a ver cómo lo\nagregamos a nuestra página a través de jQuery. Primero veamos cómo lo\ntendríamos usando el objeto XHR:
\nfunction addUser() {\n const user = JSON.parse(this.responseText);\n const firstImage = data.results[0];\n\n userContainer.insertAdjacentHTML('afterbegin', `<div class=\"card col-md-6 offset-md-3 col-xs-12\">\n <img class=\"card-img-top\" src=\"${user.avatar_url}\" alt=\"Card image cap\">\n <div class=\"card-body\">\n <h5 class=\"card-title\">${user.name || ''}</h5>\n <h6>@${user.login}</h6>\n <p class=\"card-text\">${user.bio || ''}</p>\n <a href=\"${user.html_url}\" class=\"btn btn-primary\">Stalkear coder</a>\n </div>\n </div>`);\n}\n\n\nNota: En este ejemplo, el HTML que se está agregando es un card de\nBootstrap 4, para fines de este ejemplo, el markup puede tener otra\nestructura y diseño.
\n
Si usamos jQuery, podríamos cambiarlo de la siguiente manera:
\nfunction addUser(user) {\n $userContainer.html(`<div class=\"card col-md-6 offset-md-3 col-xs-12\">\n <img class=\"card-img-top\" src=\"${user.avatar_url}\" alt=\"Card image cap\">\n <div class=\"card-body\">\n <h5 class=\"card-title\">${user.name || ''}</h5>\n <h6>@${user.login}</h6>\n <p class=\"card-text\">${user.bio || ''}</p>\n <a href=\"${user.html_url}\" class=\"btn btn-primary\">Stalkear coder</a>\n </div>\n </div>`);\n}\nJSON.parse()El código que agrega el HTML (plantilla) al contenedor no ha cambiado :).
\nEntra a la documentación de jQuery y revisa qué método (así como .done())\nencadenarías a la petición AJAX para controlar un posible error. Una vez\nencontrado, puedes probarlo metiendo un error dentro de la URL por ejemplo.
El código visto en esta lectura lo puedes encontrar en el siguiente pen:
" + "body": "Dejar que un experto prepare el pastel por ti.
\n\njQuery es una librería muy popular que ya has tenido la oportunidad de usar. El\nuso que le has dado hasta este momento ha sido para manipular y recorrer el DOM\na través de métodos que hacen nuestro código más corto.
\nAhora, usaremos esta ventaja de usar métodos más pequeños y dejar la\nresponsabilidad a jQuery de ver la compatibilidad de navegadores por nosotros\nen la implementación de AJAX.
\nEsto es posible gracias al método .ajax() que jQuery provee para realizar\npeticiones asíncronas.
.ajax()El método .ajax() es el corazón de las peticiones asíncronas en la librería\nde jQuery. Hay 2 formas de usar este método:
$.ajax(<url-a-realizar-la-petición>, <un-objeto-configuración>);\n\n// or\n\n$.ajax(<solo un objeto de configuración>);\nFuente: Documentación de jQuery
\nLa manera más común de usar el método .ajax() es usando solo el objeto de\nconfiguración, esto en parte es debido a que es la forma más antigua que está\ndisponible (versión 1.0, a ver si encuentras de donde obtuvimos este dato\nmirando la documentación), además de que toda la configuración lo puedes poner\nen un solo objeto.
\n\nQué es un objeto de configuración?
\nEs un objeto de JavaScript que se usa para configurar algo.
\nPor ejemplo:
\n\nconst settings = {\n name: 'this is my name',\n colors: ['orange', 'blue'],\n layers: 2,\n isRound: true,\n};\nEl objeto de configuración puede ser pasado como parámetro de una función\nconstructora. Imaginemos la función constructora
\nMakeCake:\nconst myDeliciousCake = MakeCake(settings);\nDe igual manera, el objeto de configuración puede ser pasado directamente:
\n\nconst myDeliciousCake = MakeCake({\n name: 'this is my name',\n colors: ['orange', 'blue'],\n layers: 2,\n isRound: true,\n});\n
El método .ajax() de jQuery tiene que ser increíblemente versátil y poderoso\nsi es lo que le da vida a las peticiones asíncronas de jQuery. Una petición Ajax\nsimple se vería así:
$.ajax({\n url: `https://api.github.com/users/${searchedUser}`\n});\nVamos a probarlo:
\nDeveloper Tools de tu navegadorNetwork y que el botón de grabación está\nencendido
Este request (petición o solicitud) está siendo realizada hacia un recurso en\nGithub (información del usuario). El request puede ser revisado desde el panel\nde redes (pestaña Network en el Dev Tools).
Ya sabemos cómo realizar una petición con .ajax() pero aun no estamos\ncontrolando la respuesta.
Si recordamos cómo podemos lograr esto usando un objeto XHR, el response era\ncontrolado por una función. Para el método .ajax() es exactamente lo mismo,\npodemos encadenar a la ejecución de éste, el método .done(). Vamos a pasar una\nfunción como argumento al método .done() que se ejecutará una vez que la\nllamada Ajax haya terminado:
function handleResponse(data) {\n console.log('the ajax request has finished!');\n console.log(data);\n}\n\n$.ajax({\n url: `https://api.github.com/users/${searchedUser}`\n}).done(handleResponse);\n
La llamada asíncrona es realizada y controlada una vez que termina por el\nmétodo .done(), en este caso, muestra el response en la consola.
Para ponernos a prueba, vamos a convertir esta petición asíncrona que usa XHR\na una llamada con el método .ajax() de jQuery. Esto es lo que tenemos\nactualmente:
const githubRequest = new XMLHttpRequest();\ngithubRequest.onload = addUser;\ngithubRequest.open('GET', `https://api.github.com/users/${searchedUser}`);\ngithubRequest.send();\nMuchas de estas operaciones pueden ser manejadas internamente por jQuery, así\nque el primer paso de la conversión sería así:
\n$.ajax({\n url: `https://api.github.com/users/${searchedUser}`\n}).done(addUser);\nUsando jQuery para peticiones asíncronas:
\nGET, jQuery lo da por\ndefecto y solo tenemos que indicarle la URL del recurso que estamos\nsolicitando.onload, usamos el método .done()La petición debe enviarse correctamente ahora. ¡Gran trabajo! Pero ahora tenemos\nproblemas con el response y cómo se está controlando.
\nYa hemos obtenido la respuesta en la consola, ahora vamos a ver cómo lo\nagregamos a nuestra página a través de jQuery. Primero veamos cómo lo\ntendríamos usando el objeto XHR:
\nfunction addUser() {\n const user = JSON.parse(this.responseText);\n const firstImage = data.results[0];\n\n userContainer.insertAdjacentHTML('afterbegin', `<div class=\"card col-md-6 offset-md-3 col-xs-12\">\n <img class=\"card-img-top\" src=\"${user.avatar_url}\" alt=\"Card image cap\">\n <div class=\"card-body\">\n <h5 class=\"card-title\">${user.name || ''}</h5>\n <h6>@${user.login}</h6>\n <p class=\"card-text\">${user.bio || ''}</p>\n <a href=\"${user.html_url}\" class=\"btn btn-primary\">Stalkear coder</a>\n </div>\n </div>`);\n}\n\n\nNota: En este ejemplo, el HTML que se está agregando es un card de\nBootstrap 4, para fines de este ejemplo, el markup puede tener otra\nestructura y diseño.
\n
Si usamos jQuery, podríamos cambiarlo de la siguiente manera:
\nfunction addUser(user) {\n $userContainer.html(`<div class=\"card col-md-6 offset-md-3 col-xs-12\">\n <img class=\"card-img-top\" src=\"${user.avatar_url}\" alt=\"Card image cap\">\n <div class=\"card-body\">\n <h5 class=\"card-title\">${user.name || ''}</h5>\n <h6>@${user.login}</h6>\n <p class=\"card-text\">${user.bio || ''}</p>\n <a href=\"${user.html_url}\" class=\"btn btn-primary\">Stalkear coder</a>\n </div>\n </div>`);\n}\nJSON.parse()El código que agrega el HTML (plantilla) al contenedor no ha cambiado :).
\nEntra a la documentación de jQuery y revisa qué método (así como .done())\nencadenarías a la petición AJAX para controlar un posible error. Una vez\nencontrado, puedes probarlo metiendo un error dentro de la URL por ejemplo.
El código visto en esta lectura lo puedes encontrar en el siguiente pen:
\nDeixe um profissional preparar a torta para você.
\n
jQuery é uma biblioteca muito popular que você já teve a oportunidade de usar. O\nuso que lhe demos até o momento foi para manipular o DOM por meio de métodos que\nfazem nosso código mais simples.
\nAgora, usaremos esta vantagem de utilizar métodos menores e deixar para o jQuery\na responsabilidade de checar a compatibilidade dos navegadores na implementação\ndo AJAX.
\nIsso é possível graças ao método .ajax() que jQuery fornece para realizar\nrequisições assíncronas.
.ajax()O método.ajax() é o coração das requisições assíncronas na biblioteca de\njQuery. Há duas formas de utilizar esse método:
$.ajax(<url-a-realizar-a-requisicao>, <um-objeto-de-configuracao>);\n\n// or\n\n$.ajax(<só um objeto de configuração>);\nFonte: Documentação de jQuery
\nA maneira mais comum de usar o método.ajax() é usando somente o objeto de\nconfiguração, em parte devido a esta ser a forma mais antiga que está disponível\n(versão 1.0). Além disso, toda a configuração pode estar somente em um objeto.
\n\nÉ um objeto de JavaScript que utilizamos para configurar algo.
\nPor exemplo:
\n\nconst settings = {\n name: 'this is my name',\n colors: ['orange', 'blue'],\n layers: 2,\n isRound: true,\n};\nO objeto de configuração pode ser passado como parâmetro de uma função\nconstrutora. Imaginemos a função construtora
\nMakeCake:\nconst myDeliciousCake = MakeCake(settings);\nDa mesma forma, o objeto de configuração pode ser passado diretamente:
\n\nconst myDeliciousCake = MakeCake({\n name: 'this is my name',\n colors: ['orange', 'blue'],\n layers: 2,\n isRound: true,\n});\n
O método .ajax() de jQuery tem que ser incrivelmente versátil e poderoso se é\no que dá vida às requisições assíncronas. Uma requisição AJAX simples seria\nassim:
$.ajax({\n url: `https://api.github.com/users/${searchedUser}`\n});\nVamos testá-lo:
\nDeveloper Tools do seu navegador.Network e que o botão gravação está ligado.
Esta request (requisição) está sendo realizada para um recurso no GitHub\n(informação do usuário). A requisição pode ser acompanhada no painel de redes\n(aba Networkno Dev Tools).
Já sabemos como realizar uma requisição com .ajax() mas ainda não estamos\ncontrolando a resposta.
Recordando como podemos fazer isso usando um objeto XHR, a response era\ncontrolada por uma função. Para o método .ajax() é exatamente o mesmo. Podemos\nencadear a execução dele com o método .done(). Passaremos uma função como\nargumento do método .done() que será executada quando a chamada AJAX estiver\nterminada:
function handleResponse(data) {\n console.log('the ajax request has finished!');\n console.log(data);\n}\n\n$.ajax({\n url: `https://api.github.com/users/${searchedUser}`\n}).done(handleResponse);\n
A chamada assíncrona é realizada e controlada pelo método .done() assim que é\nfinalizada. Neste caso, exibe a resposta no console.
Para testarmos isso, vamos converter essa requisição assíncrona que usa XHR em\numa chamada com o método .ajax() de jQuery. Isso é que temos agora:
const githubRequest = new XMLHttpRequest();\ngithubRequest.onload = addUser;\ngithubRequest.open('GET', `https://api.github.com/users/${searchedUser}`);\ngithubRequest.send();\nMuitas destas operações podem ser manipuladas internamente por jQuery. O\nprimeiro passo da conversão seria assim:
\n$.ajax({\n url: `https://api.github.com/users/${searchedUser}`\n}).done(addUser);\nUsando jQuery para requisições assíncronas:
\nGET, jQuery o faz por\npadrão e só temos que indicar a URL do recurso que está sendo solicitado..onload, usamos o método .done()A requisição deve ser processada corretamente agora. Bom trabalho! Mas agora\ntemos problemas com a response e como gerenciá-la.
Já obtivemos nossa resposta no console. Agora veremos como a adicionamos em\nnossa página por meio de jQuery. Primeiro vejamos como o faríamos usando o\nobjeto XHR:
\nfunction addUser() {\n const user = JSON.parse(this.responseText);\n const firstImage = data.results[0];\n\n userContainer.insertAdjacentHTML('afterbegin', `<div class=\"card col-md-6 offset-md-3 col-xs-12\">\n <img class=\"card-img-top\" src=\"${user.avatar_url}\" alt=\"Card image cap\">\n <div class=\"card-body\">\n <h5 class=\"card-title\">${user.name || ''}</h5>\n <h6>@${user.login}</h6>\n <p class=\"card-text\">${user.bio || ''}</p>\n <a href=\"${user.html_url}\" class=\"btn btn-primary\">Stalkear coder</a>\n </div>\n </div>`);\n}\n\n\nNota: Nesta exemplo, o HTML que estamos adicionando é um card de\nBootstrap 4. Para a finalidade deste exemplo, você pode usar outra estrutura e\nprojeto.
\n
Se usamos jQuery, poderíamos mudá-lo da seguinte maneira:
\nfunction addUser(user) {\n $userContainer.html(`<div class=\"card col-md-6 offset-md-3 col-xs-12\">\n <img class=\"card-img-top\" src=\"${user.avatar_url}\" alt=\"Card image cap\">\n <div class=\"card-body\">\n <h5 class=\"card-title\">${user.name || ''}</h5>\n <h6>@${user.login}</h6>\n <p class=\"card-text\">${user.bio || ''}</p>\n <a href=\"${user.html_url}\" class=\"btn btn-primary\">Stalkear coder</a>\n </div>\n </div>`);\n}\nJSON.parse().O código que adiciona o HTML (template) no contêiner não mudou :).
\nAcesse a documentação de jQuery e revise qual método (assim como .done()) você\nencadearia na requisição AJAX para controlar um possível erro. Uma vez\nencontrado, você pode testá-lo forçando um erro dentro da URL por exemplo.
O código visto nesta leitura pode ser encontrado aqui:
" + "body": "Deixe um profissional preparar a torta para você.
\n\njQuery é uma biblioteca muito popular que você já teve a oportunidade de usar. O\nuso que lhe demos até o momento foi para manipular o DOM por meio de métodos que\nfazem nosso código mais simples.
\nAgora, usaremos esta vantagem de utilizar métodos menores e deixar para o jQuery\na responsabilidade de checar a compatibilidade dos navegadores na implementação\ndo AJAX.
\nIsso é possível graças ao método .ajax() que jQuery fornece para realizar\nrequisições assíncronas.
.ajax()O método.ajax() é o coração das requisições assíncronas na biblioteca de\njQuery. Há duas formas de utilizar esse método:
$.ajax(<url-a-realizar-a-requisicao>, <um-objeto-de-configuracao>);\n\n// or\n\n$.ajax(<só um objeto de configuração>);\nFonte: Documentação de jQuery
\nA maneira mais comum de usar o método.ajax() é usando somente o objeto de\nconfiguração, em parte devido a esta ser a forma mais antiga que está disponível\n(versão 1.0). Além disso, toda a configuração pode estar somente em um objeto.
\n\nÉ um objeto de JavaScript que utilizamos para configurar algo.
\nPor exemplo:
\n\nconst settings = {\n name: 'this is my name',\n colors: ['orange', 'blue'],\n layers: 2,\n isRound: true,\n};\nO objeto de configuração pode ser passado como parâmetro de uma função\nconstrutora. Imaginemos a função construtora
\nMakeCake:\nconst myDeliciousCake = MakeCake(settings);\nDa mesma forma, o objeto de configuração pode ser passado diretamente:
\n\nconst myDeliciousCake = MakeCake({\n name: 'this is my name',\n colors: ['orange', 'blue'],\n layers: 2,\n isRound: true,\n});\n
O método .ajax() de jQuery tem que ser incrivelmente versátil e poderoso se é\no que dá vida às requisições assíncronas. Uma requisição AJAX simples seria\nassim:
$.ajax({\n url: `https://api.github.com/users/${searchedUser}`\n});\nVamos testá-lo:
\nDeveloper Tools do seu navegador.Network e que o botão gravação está ligado.
Esta request (requisição) está sendo realizada para um recurso no GitHub\n(informação do usuário). A requisição pode ser acompanhada no painel de redes\n(aba Networkno Dev Tools).
Já sabemos como realizar uma requisição com .ajax() mas ainda não estamos\ncontrolando a resposta.
Recordando como podemos fazer isso usando um objeto XHR, a response era\ncontrolada por uma função. Para o método .ajax() é exatamente o mesmo. Podemos\nencadear a execução dele com o método .done(). Passaremos uma função como\nargumento do método .done() que será executada quando a chamada AJAX estiver\nterminada:
function handleResponse(data) {\n console.log('the ajax request has finished!');\n console.log(data);\n}\n\n$.ajax({\n url: `https://api.github.com/users/${searchedUser}`\n}).done(handleResponse);\n
A chamada assíncrona é realizada e controlada pelo método .done() assim que é\nfinalizada. Neste caso, exibe a resposta no console.
Para testarmos isso, vamos converter essa requisição assíncrona que usa XHR em\numa chamada com o método .ajax() de jQuery. Isso é que temos agora:
const githubRequest = new XMLHttpRequest();\ngithubRequest.onload = addUser;\ngithubRequest.open('GET', `https://api.github.com/users/${searchedUser}`);\ngithubRequest.send();\nMuitas destas operações podem ser manipuladas internamente por jQuery. O\nprimeiro passo da conversão seria assim:
\n$.ajax({\n url: `https://api.github.com/users/${searchedUser}`\n}).done(addUser);\nUsando jQuery para requisições assíncronas:
\nGET, jQuery o faz por\npadrão e só temos que indicar a URL do recurso que está sendo solicitado..onload, usamos o método .done()A requisição deve ser processada corretamente agora. Bom trabalho! Mas agora\ntemos problemas com a response e como gerenciá-la.
Já obtivemos nossa resposta no console. Agora veremos como a adicionamos em\nnossa página por meio de jQuery. Primeiro vejamos como o faríamos usando o\nobjeto XHR:
\nfunction addUser() {\n const user = JSON.parse(this.responseText);\n const firstImage = data.results[0];\n\n userContainer.insertAdjacentHTML('afterbegin', `<div class=\"card col-md-6 offset-md-3 col-xs-12\">\n <img class=\"card-img-top\" src=\"${user.avatar_url}\" alt=\"Card image cap\">\n <div class=\"card-body\">\n <h5 class=\"card-title\">${user.name || ''}</h5>\n <h6>@${user.login}</h6>\n <p class=\"card-text\">${user.bio || ''}</p>\n <a href=\"${user.html_url}\" class=\"btn btn-primary\">Stalkear coder</a>\n </div>\n </div>`);\n}\n\n\nNota: Nesta exemplo, o HTML que estamos adicionando é um card de\nBootstrap 4. Para a finalidade deste exemplo, você pode usar outra estrutura e\nprojeto.
\n
Se usamos jQuery, poderíamos mudá-lo da seguinte maneira:
\nfunction addUser(user) {\n $userContainer.html(`<div class=\"card col-md-6 offset-md-3 col-xs-12\">\n <img class=\"card-img-top\" src=\"${user.avatar_url}\" alt=\"Card image cap\">\n <div class=\"card-body\">\n <h5 class=\"card-title\">${user.name || ''}</h5>\n <h6>@${user.login}</h6>\n <p class=\"card-text\">${user.bio || ''}</p>\n <a href=\"${user.html_url}\" class=\"btn btn-primary\">Stalkear coder</a>\n </div>\n </div>`);\n}\nJSON.parse().O código que adiciona o HTML (template) no contêiner não mudou :).
\nAcesse a documentação de jQuery e revise qual método (assim como .done()) você\nencadearia na requisição AJAX para controlar um possível erro. Uma vez\nencontrado, você pode testá-lo forçando um erro dentro da URL por exemplo.
O código visto nesta leitura pode ser encontrado aqui:
\nDebes subir todos tus ejercicios a GitHub y publicarlos en gh-pages. Eres\nlibre de elegir el método que más te acomode para ejecutar las llamadas a estas\nAPI, así descubrirás por ti misma las ventajas y desventajas de cada método.
¿Alguna ves viste Pokemon? Sino, no importa, ahora te enterarás de que trata.\nUn pokedex es un buscador de Pokemons, donde puedes obtener información sobre\nel pokemon que buscas. Usando la API de Pokeapi diseña\ntu propio pokedex. Acá te dejamos unos slides con algunas instrucciones un\npoco más particulares. Recuerda no limitarte y dar más allá de lo propuesto ;)
\nEste reto consiste en hacer literalmente lo que el nombre indica, vamos a darle\nla oportunidad a nuestros usuarios de buscar GIFs y mostrarlo de la manera más\namigable y entretenida posible. Para esto usaremos el\nAPI de Giphy. Notarás que para realizar las\npeticiones te pide un API Key, para obtenerlo tendrás que regitrarte y crear\nuna app. No olvides que las buenas APIs tienen documentación y a pesar de que\nestán en inglés, podemos ingeniárnosla para entenderlo en su mayoría :). Una vez\nlisto tu buscador, ¿qué más se te ocurre poder agregar?
Acá tienes una guía de cómo lograrlo, no te conformes con esto y adáptalo a tu\npropio estilo.
" + "body": "Debes subir todos tus ejercicios a GitHub y publicarlos en gh-pages. Eres\nlibre de elegir el método que más te acomode para ejecutar las llamadas a estas\nAPI, así descubrirás por ti misma las ventajas y desventajas de cada método.
¿Alguna ves viste Pokemon? Sino, no importa, ahora te enterarás de que trata.\nUn pokedex es un buscador de Pokemons, donde puedes obtener información sobre\nel pokemon que buscas. Usando la API de Pokeapi diseña\ntu propio pokedex. Acá te dejamos unos slides con algunas instrucciones un\npoco más particulares. Recuerda no limitarte y dar más allá de lo propuesto ;)
\nEste reto consiste en hacer literalmente lo que el nombre indica, vamos a darle\nla oportunidad a nuestros usuarios de buscar GIFs y mostrarlo de la manera más\namigable y entretenida posible. Para esto usaremos el\nAPI de Giphy. Notarás que para realizar las\npeticiones te pide un API Key, para obtenerlo tendrás que regitrarte y crear\nuna app. No olvides que las buenas APIs tienen documentación y a pesar de que\nestán en inglés, podemos ingeniárnosla para entenderlo en su mayoría :). Una vez\nlisto tu buscador, ¿qué más se te ocurre poder agregar?
Acá tienes una guía de cómo lograrlo, no te conformes con esto y adáptalo a tu\npropio estilo.
\nYa hemos visto muchas veces que el acrónimo de API significa Application\nProgramming Interface (Interfaz de programación de aplicaciones) y que la\npodemos encontrar en distintos lugares como el navegador, la computadora, la\nweb y demás. También hemos escuchado que nos da interoperabilidad entre diversos\nsistemas, en esta unidad nos enfocaremos no en la comunicación con un único\ndispositivo sino entre miles o millones de esto, ¿cómo?. A través de internet,\npor ello, nos enfocaremos en las Web APIs. Alista tu subtítulos cone el\ntraductor automático y mira este video:
\n![\"Web](\"https://img.youtube.com/vi/_49_6pjTXiQ/0.jpg\")
\n\nLos APIs de terceros son APIs provistas por terceros (duh), estos terceros\nson generalmente compañías como Google, Facebook, entre otras - que permiten\nacceder a su funcionalidad a través de un lenguaje de programación (en nuestro\ncaso JavaScript) y usarlo en nuestra web app.
\n
Este es un extracto traducido de un artículo de MDN sobre Third Party APIs.
\n\n\nPros del uso de APIs de terceros
\n\n
\n- Rapidez. El poder integrar en cuestión de segundos mapas, imágenes o\nservicios de autenticación en nuestras aplicaciones nos descarga de gran parte\nde la programación y nos permite centrarnos rápidamente en nuestro dominio de\nnegocio.
\n- Robustez. La mayoría de APIs y servicios más populares están tan sumamente\nextendidos que han sido probados en toda clase de situaciones de estrés, por\nlo que podremos asegurar que su respuesta será adecuada en la inmensa mayoría\nde los casos.
\n- Imagen. Cuando los usuarios usan a menudo un buen servicio, lo acaban\nreconociendo, y el asociar nuestra imagen a la de un grande como Google,\nFacebook o Twitter, puede ayudarnos a contagiarnos de la buena percepción que\nlos usuarios tienen de estos gigantes.
\n- Mantenimiento. Por norma general, las grandes empresas no dejarán que sus\nproductos se deterioren, por lo que es bastante común que los servicios\naccedidos a través de las APIs estén en una constante mejora, que además en\nmuchos casos será totalmente transparente al programador que las usa.
\n- Innovación. Al hilo de lo anterior, es lógico pensar que empresas líderes\ncomo Microsoft, eBay o Amazon no se conformarán con mantener sus aplicaciones\npara que funcionen bien, sino que tratarán de mejorarlas constantemente, con\nlo que los usuarios de sus APIs se verán beneficiados con todas las mejoras\nque se vayan produciendo.
\nContras del uso de APIs de terceros
\n\n
\n- Condiciones cambiantes. Al ligarnos a una tercera empresa por un contrato\ntan débil como es la licencia de uso de una API, normalmente estamos expuestos\na la voluntad de la otra parte, lo que puede suponer recortes en las\nprestaciones, obsolescencia de métodos implementados o pérdida de la gratuidad\ndel servicio, tal y como acaba de ocurrir con Google Maps.
\n- Disponibilidad. Como si no fuera suficiente con preocuparnos de mantener\nen funcionamiento nuestro propio servidor y aplicaciones, caídas de servicios\nexternos, como las ocurridas este año con Amazon, pueden dejar tus servicios\ninutilizados. ¿Os imagináis tener una tienda virtual que funcione a la\nperfección pero sólo admita pagos por PayPal y que éstos no funcionen?
\n- Imagen. Antes lo nombré como una ventaja, ya que podemos favorecernos del\nprestigio de una buena marca al trabajar con ella, pero ¿Qué ocurre cuando la\nreputación de nuestros partners desciende hasta el fango? Desgraciadamente es\nmuy difícil separar por completo la imagen de unos y otros, y nos veremos\nperjudicados por los errores ajenos.
\n- Falta de innovación. Cuando los servicios de terceros que utilizamos van\npor delante en progreso e innovación no suele haber quejas, pero también puede\nocurrir lo contrario: que se estanquen, nuestra aplicación avance más rápido\ny su API ya no pueda cumplir nuestras exigencias. Ante situaciones así se\nplantea la difícil decisión de cambiar de proveedor de servicios o\nimplementarlos por tu cuenta, con el consiguiente sobrecoste.
\n- Privacidad. Las leyes son muy distintas en cada país, y algunas como la\nLey Orgánica de Protección de Datos española (LOPD), que es más restrictiva\nque las equivalentes de otros países, pueden impedirnos legalmente delegar\nciertos datos o servicios para su trato por terceros.
\n
Estos pros y contras son parte de un post de GenbetaDev.\nNosotros nos enfocaremos en las cosas positivas en este momento y sacaremos\nprovecho de todo lo que nos ofrecen las APIs de terceros y hacer apps increíbles.
" + "body": "Ya hemos visto muchas veces que el acrónimo de API significa Application\nProgramming Interface (Interfaz de programación de aplicaciones) y que la\npodemos encontrar en distintos lugares como el navegador, la computadora, la\nweb y demás. También hemos escuchado que nos da interoperabilidad entre diversos\nsistemas, en esta unidad nos enfocaremos no en la comunicación con un único\ndispositivo sino entre miles o millones de esto, ¿cómo?. A través de internet,\npor ello, nos enfocaremos en las Web APIs. Alista tu subtítulos cone el\ntraductor automático y mira este video:
\n\n\n\nLos APIs de terceros son APIs provistas por terceros (duh), estos terceros\nson generalmente compañías como Google, Facebook, entre otras - que permiten\nacceder a su funcionalidad a través de un lenguaje de programación (en nuestro\ncaso JavaScript) y usarlo en nuestra web app.
\n
Este es un extracto traducido de un artículo de MDN sobre Third Party APIs.
\n\n\nPros del uso de APIs de terceros
\n\n
\n- Rapidez. El poder integrar en cuestión de segundos mapas, imágenes o\nservicios de autenticación en nuestras aplicaciones nos descarga de gran parte\nde la programación y nos permite centrarnos rápidamente en nuestro dominio de\nnegocio.
\n- Robustez. La mayoría de APIs y servicios más populares están tan sumamente\nextendidos que han sido probados en toda clase de situaciones de estrés, por\nlo que podremos asegurar que su respuesta será adecuada en la inmensa mayoría\nde los casos.
\n- Imagen. Cuando los usuarios usan a menudo un buen servicio, lo acaban\nreconociendo, y el asociar nuestra imagen a la de un grande como Google,\nFacebook o Twitter, puede ayudarnos a contagiarnos de la buena percepción que\nlos usuarios tienen de estos gigantes.
\n- Mantenimiento. Por norma general, las grandes empresas no dejarán que sus\nproductos se deterioren, por lo que es bastante común que los servicios\naccedidos a través de las APIs estén en una constante mejora, que además en\nmuchos casos será totalmente transparente al programador que las usa.
\n- Innovación. Al hilo de lo anterior, es lógico pensar que empresas líderes\ncomo Microsoft, eBay o Amazon no se conformarán con mantener sus aplicaciones\npara que funcionen bien, sino que tratarán de mejorarlas constantemente, con\nlo que los usuarios de sus APIs se verán beneficiados con todas las mejoras\nque se vayan produciendo.
\nContras del uso de APIs de terceros
\n\n
\n- Condiciones cambiantes. Al ligarnos a una tercera empresa por un contrato\ntan débil como es la licencia de uso de una API, normalmente estamos expuestos\na la voluntad de la otra parte, lo que puede suponer recortes en las\nprestaciones, obsolescencia de métodos implementados o pérdida de la gratuidad\ndel servicio, tal y como acaba de ocurrir con Google Maps.
\n- Disponibilidad. Como si no fuera suficiente con preocuparnos de mantener\nen funcionamiento nuestro propio servidor y aplicaciones, caídas de servicios\nexternos, como las ocurridas este año con Amazon, pueden dejar tus servicios\ninutilizados. ¿Os imagináis tener una tienda virtual que funcione a la\nperfección pero sólo admita pagos por PayPal y que éstos no funcionen?
\n- Imagen. Antes lo nombré como una ventaja, ya que podemos favorecernos del\nprestigio de una buena marca al trabajar con ella, pero ¿Qué ocurre cuando la\nreputación de nuestros partners desciende hasta el fango? Desgraciadamente es\nmuy difícil separar por completo la imagen de unos y otros, y nos veremos\nperjudicados por los errores ajenos.
\n- Falta de innovación. Cuando los servicios de terceros que utilizamos van\npor delante en progreso e innovación no suele haber quejas, pero también puede\nocurrir lo contrario: que se estanquen, nuestra aplicación avance más rápido\ny su API ya no pueda cumplir nuestras exigencias. Ante situaciones así se\nplantea la difícil decisión de cambiar de proveedor de servicios o\nimplementarlos por tu cuenta, con el consiguiente sobrecoste.
\n- Privacidad. Las leyes son muy distintas en cada país, y algunas como la\nLey Orgánica de Protección de Datos española (LOPD), que es más restrictiva\nque las equivalentes de otros países, pueden impedirnos legalmente delegar\nciertos datos o servicios para su trato por terceros.
\n
Estos pros y contras son parte de un post de GenbetaDev.\nNosotros nos enfocaremos en las cosas positivas en este momento y sacaremos\nprovecho de todo lo que nos ofrecen las APIs de terceros y hacer apps increíbles.
" }, "pt": { "title": "Third party APIs", - "body": "Já vimos muitas vezes que o acrônimo de API significa Application Programming\nInterface (Interface de Programação de Aplicações) e que podemos encontrá-las em\ndiferentes lugares como o navegador, no computador, na web e outros. Também\nvimos que elas nos dão interoperabilidade entre diversos sistemas. Nesta unidade\nfocaremos não na comunicação com um único dispositivo, mas sim entre milhares e\nmilhões deles. Como? Por meio da internet, com Web APIs. Ajuste as legendas\nou o tradutor automático e veja este vídeo:
\n
\n\nAs APIs de terceiros são APIs fornecidas por terceiros (duh). Esses terceiros\nsão geralmente companhias (como Google, Facebook e outras) que permitem\nacessar suas funcionalidades por meio de linguagem de programação (no nosso\ncaso, JavaScript) e usá-las em nossa aplicação web.
\n
Este é um trecho traduzido de um artigo da MDN sobre Third Party\nAPIs.
\n\n\nPrós do uso de APIs de terceiros
\n\n
\n- Rapidez. Poder integrar em questão de segundos mapas, imagens ou serviços\nde autenticação em nossas aplicações e concentrar esforços nas regras de\nnegócio.
\n- Robustez. A maioria de APIs e serviços mais populares estão tão bem\ntestadas que podemos garantir que a resposta virá corretamente na maioria dos\ncasos.
\n- Imagem. Quando os usuários costumam usar um bom serviço, acabam\nreconhecendo isso. Associar a nossa imagem a de uma empresa grande como\nGoogle, Facebook ou Twitter pode nos ajudar a contarmos com a boa percepção\nque os usuários têm desses gigantes.
\n- Manutenção. De forma geral, as grandes empresas não deixarão que seus\nprodutos se deteriorem, o que faz com que os serviços acessados por meio das\nAPIs estejam em constante melhora, que na maior parte dos casos é totalmente\ntransparente para a programadora que as utiliza.
\n- Inovação. É lógico pensar que empresas líderes como Microsoft, eBay ou\nAmazon não se satisfazem em manter suas aplicações funcionando bem, mas\ntratam de melhorá-las constantemente, o que fará com que os usuários de suas\nAPIs se vejam beneficiados com todas a melhorias que vão sendo produzidas.
\nContras do uso de APIs de terceiros
\n\n
\n- Condições variáveis. Ao nos associarmos a uma empresa por um contrato tão\nfrágil como é uma licença de uso de uma API, normalmente estamos expostos à\nvontade de outra parte, o que pode levar à interrupção do serviço,\nobsolescência de métodos implementados ou perda da gratuidade do serviço,\ncomo acaba de ocorrer com Google Maps.
\n- Disponibilidade. Como se não fosse suficiente nos preocuparmos em manter\no funcionamento de nosso próprio servidor e aplicações, quedas de serviços\nexternos, como as ocorridas este ano com a Amazon, podem deixar seus serviços\ninutilizados. Você pode imaginar ter uma loja virtual que funciona\nperfeitamente, mas admitindo apenas pagamento por PayPal e este não funciona?
\n- Imagem. Anteriormente apontamos isso como uma vantagem, já que podemos\nnos favorecer do prestígio de uma boa marca ao trabalhar com ela, mas o que\nacontece quando a reputação de nossos parceiros vai à lama? Infelizmente é\nmuito difícil separar por completo a imagem de um e outro e seremos\nprejudicados por erros alheios.
\n- Falta de inovação. Quando os serviços de terceiros que usamos são\natualizados constantemente geralmente não há queixas, mas pode acontecer o\ncontrário também: que fiquem estagnados, nosso aplicativo avance mais rápido\ne sua API possa não atender mais às nossas demandas. Em situações como esta,\nsurge a difícil decisão de mudar de provedor de serviços ou implementá-los\npor conta própria, com consequente custo adicional.
\n- Privacidade. As leis são muito diferentes em cada país. Algumas como a\nLOPD espanhola, que é mais restritiva que as equivalentes em outros países,\npodem nos impedir legalmente de delegar certos dados ou serviços para seu\nprocessamento por terceiros.
\n
Esse prós e contras são parte de um post de\nGenbetaDev\n(em espanhol). Nós focaremos nas coisas positivas neste momento e tiraremos\nproveito de tudo o que nos oferecem as APIs de terceiros para fazermos apps\nincríveis.
" + "body": "Já vimos muitas vezes que o acrônimo de API significa Application Programming\nInterface (Interface de Programação de Aplicações) e que podemos encontrá-las em\ndiferentes lugares como o navegador, no computador, na web e outros. Também\nvimos que elas nos dão interoperabilidade entre diversos sistemas. Nesta unidade\nfocaremos não na comunicação com um único dispositivo, mas sim entre milhares e\nmilhões deles. Como? Por meio da internet, com Web APIs. Ajuste as legendas\nou o tradutor automático e veja este vídeo:
\n\n\n\nAs APIs de terceiros são APIs fornecidas por terceiros (duh). Esses terceiros\nsão geralmente companhias (como Google, Facebook e outras) que permitem\nacessar suas funcionalidades por meio de linguagem de programação (no nosso\ncaso, JavaScript) e usá-las em nossa aplicação web.
\n
Este é um trecho traduzido de um artigo da MDN sobre Third Party\nAPIs.
\n\n\nPrós do uso de APIs de terceiros
\n\n
\n- Rapidez. Poder integrar em questão de segundos mapas, imagens ou serviços\nde autenticação em nossas aplicações e concentrar esforços nas regras de\nnegócio.
\n- Robustez. A maioria de APIs e serviços mais populares estão tão bem\ntestadas que podemos garantir que a resposta virá corretamente na maioria dos\ncasos.
\n- Imagem. Quando os usuários costumam usar um bom serviço, acabam\nreconhecendo isso. Associar a nossa imagem a de uma empresa grande como\nGoogle, Facebook ou Twitter pode nos ajudar a contarmos com a boa percepção\nque os usuários têm desses gigantes.
\n- Manutenção. De forma geral, as grandes empresas não deixarão que seus\nprodutos se deteriorem, o que faz com que os serviços acessados por meio das\nAPIs estejam em constante melhora, que na maior parte dos casos é totalmente\ntransparente para a programadora que as utiliza.
\n- Inovação. É lógico pensar que empresas líderes como Microsoft, eBay ou\nAmazon não se satisfazem em manter suas aplicações funcionando bem, mas\ntratam de melhorá-las constantemente, o que fará com que os usuários de suas\nAPIs se vejam beneficiados com todas a melhorias que vão sendo produzidas.
\nContras do uso de APIs de terceiros
\n\n
\n- Condições variáveis. Ao nos associarmos a uma empresa por um contrato tão\nfrágil como é uma licença de uso de uma API, normalmente estamos expostos à\nvontade de outra parte, o que pode levar à interrupção do serviço,\nobsolescência de métodos implementados ou perda da gratuidade do serviço,\ncomo acaba de ocorrer com Google Maps.
\n- Disponibilidade. Como se não fosse suficiente nos preocuparmos em manter\no funcionamento de nosso próprio servidor e aplicações, quedas de serviços\nexternos, como as ocorridas este ano com a Amazon, podem deixar seus serviços\ninutilizados. Você pode imaginar ter uma loja virtual que funciona\nperfeitamente, mas admitindo apenas pagamento por PayPal e este não funciona?
\n- Imagem. Anteriormente apontamos isso como uma vantagem, já que podemos\nnos favorecer do prestígio de uma boa marca ao trabalhar com ela, mas o que\nacontece quando a reputação de nossos parceiros vai à lama? Infelizmente é\nmuito difícil separar por completo a imagem de um e outro e seremos\nprejudicados por erros alheios.
\n- Falta de inovação. Quando os serviços de terceiros que usamos são\natualizados constantemente geralmente não há queixas, mas pode acontecer o\ncontrário também: que fiquem estagnados, nosso aplicativo avance mais rápido\ne sua API possa não atender mais às nossas demandas. Em situações como esta,\nsurge a difícil decisão de mudar de provedor de serviços ou implementá-los\npor conta própria, com consequente custo adicional.
\n- Privacidade. As leis são muito diferentes em cada país. Algumas como a\nLOPD espanhola, que é mais restritiva que as equivalentes em outros países,\npodem nos impedir legalmente de delegar certos dados ou serviços para seu\nprocessamento por terceiros.
\n
Esse prós e contras são parte de um post de\nGenbetaDev\n(em espanhol). Nós focaremos nas coisas positivas neste momento e tiraremos\nproveito de tudo o que nos oferecem as APIs de terceiros para fazermos apps\nincríveis.
" } } }, @@ -635,11 +635,11 @@ "intl": { "es": { "title": "Web APIs", - "body": "Ya que en esta unidad vamos a trabajar con Web APIs públicas, debemos de saber\ndónde podemos ver cuáles existen. Para ello, te dejamos los siguientes recursos:
\n\nPara el objetivo de esta lectura, vamos a enfocarnos en un recurso que no hemos\nlistado hace un momento: Public APIs.\nEste repositorio a diferencia de los demás, tiene una manera sintetizada de\nmostrar la autenticación que requiere un API (los demás recursos también\nmuestran este detalle pero no están a primera vista).
\n![\"Different](\"https://github.com/ivandevp/curricula-js/blob/378ca9e9ad8d178bf783ebbcea6383d9c44a783b/06-spa/03-working-with-apis/02-web-apis/web-apis.png?raw=true\")
En la imagen anterior, podemos visualizar el apartado de las APIs de Música, en\nla cual, la columna de Auth tiene valores distintos como: NO, apiKey u\nOAuth. Esto nos da un espacio a darles de cierta manera una clasificación a\nlas Web APIs en base a su medio de autenticación. Así que veamos un poco de qué\ntrata.
Éste tipo de APIs es el más sencillo de consumir a través de AJAX y a su vez el\nde mayor uso público debido a que no debes de registrarte para obtener una clave\no algo. simplemente haces una petición al endpoint especificado y listo. Ejemplo\nde estas APIs pueden ser: Pokeapi, Swapi, entre otras. Aquí te dejamos un pen\nmostrando lo que puedes hacer con la API de Lyrics.ovh.
\napiKeyEn estas APIs, su método de autenticación es a través de un API Key que\nacompaña a todas las peticiones que se realizan hacia algún endpoint (recurso).\nEn la mayoría de casos, deberás registrarte para obtener este apiKey. Aquí\nte dejamos un ejemplo con Google Maps.
En algunas ocasiones, los API Keys generados deben de ir en las cabeceras HTTP\nde la petición para que en el backend se haga la verificación del token y pueda\nautenticarse correctamente. Por ejemplo, en la API de CoinAPI.io,\nel token se envía a través del header X-CoinAPI-Key, acá te mostramos un pen\nde cómo se haría la petición en este caso:
OAuthOAuth es un protocolo de autorización que te permite obtener acceso limitado a\naplicaciones de terceros para obtener datos y luego usar dichos datos para el\nregistro o uso de un web service o API. Aquí dejamos un ejemplo para que veas\na qué nos referimos:
\n¿No notaste la diferencia? Si bien esta implementación es similar a las que\nusan un API Key como método de autenticación, para generar ese key que se puede\nver en la URL del GET Request, se debe crear una aplicación en Stack Apps\ny para poder hacerlo, es necesario registrarse, al momento del registro ofrece\nuna opción de realizarlo mediante Facebook. Cuando esto sucede, el usuario\ngarantiza que StackExchange puede obtener ciertos datos de su cuenta de Facebook\ny estos datos son usados para crear la cuenta y configurar la app que se cree\nen Stack Apps. Ese proceso es lo que OAUth permite realizar de manera\nestandarizada.
Otro ejemplo, si pruebas acceder al API de Spotify, tu te puedes conectar a él\nmediante Facebook y obtener acceso a hacer búsquedas de canciones, artistas,\nplaylists y demás.
\nEstos dos términos fueron mencionados a lo largo de esta lectura, es importante\nhacer mención que son 2 aspectos de seguridad que las APIs toman en cuenta al\nmomento del diseño e implementación.
\nLa autenticación es el proceso de verificar que eres el usuario que indicas ser.\nEs decir, en un inicio de sesión, tu usuario y contraseña deben de coincidir con\nlos datos que tiene almacenado el sistema, este es un ejemplo de autenticación.
\nMientas que la autorización, una vez comprobado que eres quien dices ser,\nverifica si tienes acceso o permisos al recurso solicitado.
\nAquí te dejamos un par de videos (lo sabemos, está en inglés pero Google\nTranslate nos puede apoyar, no a la perfección pero seguro podrás entenderlo\nbajo el contexto adecuado).
\n![\"Authorization\"](\"https://img.youtube.com/vi/ATB23YVOSq4/0.jpg\")
![\"Authorization\"](\"https://img.youtube.com/vi/lyHrVjx8MSw/0.jpg\")
Ya que en esta unidad vamos a trabajar con Web APIs públicas, debemos de saber\ndónde podemos ver cuáles existen. Para ello, te dejamos los siguientes recursos:
\n\nPara el objetivo de esta lectura, vamos a enfocarnos en un recurso que no hemos\nlistado hace un momento: Public APIs.\nEste repositorio a diferencia de los demás, tiene una manera sintetizada de\nmostrar la autenticación que requiere un API (los demás recursos también\nmuestran este detalle pero no están a primera vista).
\n
En la imagen anterior, podemos visualizar el apartado de las APIs de Música, en\nla cual, la columna de Auth tiene valores distintos como: NO, apiKey u\nOAuth. Esto nos da un espacio a darles de cierta manera una clasificación a\nlas Web APIs en base a su medio de autenticación. Así que veamos un poco de qué\ntrata.
Éste tipo de APIs es el más sencillo de consumir a través de AJAX y a su vez el\nde mayor uso público debido a que no debes de registrarte para obtener una clave\no algo. simplemente haces una petición al endpoint especificado y listo. Ejemplo\nde estas APIs pueden ser: Pokeapi, Swapi, entre otras. Aquí te dejamos un pen\nmostrando lo que puedes hacer con la API de Lyrics.ovh.
\napiKeyEn estas APIs, su método de autenticación es a través de un API Key que\nacompaña a todas las peticiones que se realizan hacia algún endpoint (recurso).\nEn la mayoría de casos, deberás registrarte para obtener este apiKey. Aquí\nte dejamos un ejemplo con Google Maps.
En algunas ocasiones, los API Keys generados deben de ir en las cabeceras HTTP\nde la petición para que en el backend se haga la verificación del token y pueda\nautenticarse correctamente. Por ejemplo, en la API de CoinAPI.io,\nel token se envía a través del header X-CoinAPI-Key, acá te mostramos un pen\nde cómo se haría la petición en este caso:
OAuthOAuth es un protocolo de autorización que te permite obtener acceso limitado a\naplicaciones de terceros para obtener datos y luego usar dichos datos para el\nregistro o uso de un web service o API. Aquí dejamos un ejemplo para que veas\na qué nos referimos:
\n¿No notaste la diferencia? Si bien esta implementación es similar a las que\nusan un API Key como método de autenticación, para generar ese key que se puede\nver en la URL del GET Request, se debe crear una aplicación en Stack Apps\ny para poder hacerlo, es necesario registrarse, al momento del registro ofrece\nuna opción de realizarlo mediante Facebook. Cuando esto sucede, el usuario\ngarantiza que StackExchange puede obtener ciertos datos de su cuenta de Facebook\ny estos datos son usados para crear la cuenta y configurar la app que se cree\nen Stack Apps. Ese proceso es lo que OAUth permite realizar de manera\nestandarizada.
Otro ejemplo, si pruebas acceder al API de Spotify, tu te puedes conectar a él\nmediante Facebook y obtener acceso a hacer búsquedas de canciones, artistas,\nplaylists y demás.
\nEstos dos términos fueron mencionados a lo largo de esta lectura, es importante\nhacer mención que son 2 aspectos de seguridad que las APIs toman en cuenta al\nmomento del diseño e implementación.
\nLa autenticación es el proceso de verificar que eres el usuario que indicas ser.\nEs decir, en un inicio de sesión, tu usuario y contraseña deben de coincidir con\nlos datos que tiene almacenado el sistema, este es un ejemplo de autenticación.
\nMientas que la autorización, una vez comprobado que eres quien dices ser,\nverifica si tienes acceso o permisos al recurso solicitado.
\nAquí te dejamos un par de videos (lo sabemos, está en inglés pero Google\nTranslate nos puede apoyar, no a la perfección pero seguro podrás entenderlo\nbajo el contexto adecuado).
\n\n\nJá que nesta unidade trabalharemos com Web APIs públicas, devemos saber onde\npodemos encontrá-las. Para tanto, deixamos para você os seguintes recursos:
\n\nPara o objetivo desta leitura, focaremos em um recurso que não vimos até o\nmomentos: Public APIs. Este\nrepositório, diferente dos demais, tem uma maneira sintetizada de mostrar a\nautenticação que uma API necessita (os demais recursos também mostram esse\ndetalhe, mas não à primeira vista).
\n
Na imagem anterior, podemos visualizar a seção das APIs de Música, na qual a\ncoluna Auth tem valores distintos como NO, apikey ou OAuth. É uma\nmaneira de classificar as Web APIs com base em seu meio de autenticação. Vejamos\ndo que se trata.
Este tipo de API é o mais simples de consumir por meio de AJAX e por sua vez é o\nde maior uso público, pois não é preciso se registrar para obter uma chave ou\nlogin. Simplesmente faça uma requisição no endpoint especificado e pronto.\nExemplo destas APIs podem ser: Pokeapi, Swapi, entre outras. Aqui temos um pen\nmostrando o que você pode fazer com a API de\nLyrics.ovh.
\napiKeyNestas APIs, o método de autenticação é por meio de um API Key que acompanha\ntodas as requisições que são feitas a algum endpoint (recurso). Na maioria dos\ncasos, você deverá se registrar para obter essa apiKey. Deixamos aqui um\nexemplo com Google Maps.
Em algumas ocasiões, as API Keys geradas devem ir nos cabeçalhos HTTP da\nrequisição, para que no backend se faça a verificação do token e este possa\nser autenticado corretamente. Por exemplo, na API de\nCoinAPI.io, o token é enviado por meio do header\nX-CoinAPI-Key. Aqui temos um pen de como ser faria a requisição nesse caso:
OAuthOAuth é um protocolo de autorização que permite obter acesso limitado a\naplicações de terceiros para obter dados e em seguida usar esse dados para o\nregistro de um web service ou API. Aqui deixamos um exemplo para que veja do\nque se trata:
\nPercebeu a diferença? Embora esta implementação seja similar às que usam um API\nKey como método de autenticação, para gerar esse key que vemos na URL do GET\nRequest é preciso criar uma aplicação em Stack Apps,\ne para poder fazê-lo é necessário se cadastrar. No momento do cadastro, é\noferecida a opção de cadastrar-se usando o Facebook. Quando você se registra, o\nusuário garantirá que StackExchange pode obter certos dados de sua conta do\nFacebook; esse dados são usados para criar a conta e configurar a aplicação que\nestá no Stack Apps. É esse processo que o OAuth permite realizar de maneira\npadronizada.
Outro exemplo: se testar acessar a API do Spotify, você pode ser conectar com\nele pode meio do Facebook e obter acesso à busca de músicas, artistas, playlists\ne demais itens.
\nEstes dois termos foram mencionados ao longo desta leitura. É importante\nmencionar que são dois aspectos de segurança que as APIs levam em conta no\nmomento do projeto e implementação.
\nA autenticação é o processo de verificar quem é o usuário que você indica ser.\nIsto é, no início da sessão, seu usuário e senha devem coincidir com os dados\nque estão armazenados no sistema. Isso é um exemplo de autenticação.
\nEnquanto que a autorização, uma vez verificado que você é quem diz ser, verifica\nse você tem acesso ou permissão ao recurso solicitado.
\nAqui deixamos duas vídeos (nós sabemos, estão em inglês. Mas o Google Translate\npode nos ajudar, não 100%, mas o suficiente para poder entendê-los no contexto\nadequado).
\n
Já que nesta unidade trabalharemos com Web APIs públicas, devemos saber onde\npodemos encontrá-las. Para tanto, deixamos para você os seguintes recursos:
\n\nPara o objetivo desta leitura, focaremos em um recurso que não vimos até o\nmomentos: Public APIs. Este\nrepositório, diferente dos demais, tem uma maneira sintetizada de mostrar a\nautenticação que uma API necessita (os demais recursos também mostram esse\ndetalhe, mas não à primeira vista).
\n
Na imagem anterior, podemos visualizar a seção das APIs de Música, na qual a\ncoluna Auth tem valores distintos como NO, apikey ou OAuth. É uma\nmaneira de classificar as Web APIs com base em seu meio de autenticação. Vejamos\ndo que se trata.
Este tipo de API é o mais simples de consumir por meio de AJAX e por sua vez é o\nde maior uso público, pois não é preciso se registrar para obter uma chave ou\nlogin. Simplesmente faça uma requisição no endpoint especificado e pronto.\nExemplo destas APIs podem ser: Pokeapi, Swapi, entre outras. Aqui temos um pen\nmostrando o que você pode fazer com a API de\nLyrics.ovh.
\napiKeyNestas APIs, o método de autenticação é por meio de um API Key que acompanha\ntodas as requisições que são feitas a algum endpoint (recurso). Na maioria dos\ncasos, você deverá se registrar para obter essa apiKey. Deixamos aqui um\nexemplo com Google Maps.
Em algumas ocasiões, as API Keys geradas devem ir nos cabeçalhos HTTP da\nrequisição, para que no backend se faça a verificação do token e este possa\nser autenticado corretamente. Por exemplo, na API de\nCoinAPI.io, o token é enviado por meio do header\nX-CoinAPI-Key. Aqui temos um pen de como ser faria a requisição nesse caso:
OAuthOAuth é um protocolo de autorização que permite obter acesso limitado a\naplicações de terceiros para obter dados e em seguida usar esse dados para o\nregistro de um web service ou API. Aqui deixamos um exemplo para que veja do\nque se trata:
\nPercebeu a diferença? Embora esta implementação seja similar às que usam um API\nKey como método de autenticação, para gerar esse key que vemos na URL do GET\nRequest é preciso criar uma aplicação em Stack Apps,\ne para poder fazê-lo é necessário se cadastrar. No momento do cadastro, é\noferecida a opção de cadastrar-se usando o Facebook. Quando você se registra, o\nusuário garantirá que StackExchange pode obter certos dados de sua conta do\nFacebook; esse dados são usados para criar a conta e configurar a aplicação que\nestá no Stack Apps. É esse processo que o OAuth permite realizar de maneira\npadronizada.
Outro exemplo: se testar acessar a API do Spotify, você pode ser conectar com\nele pode meio do Facebook e obter acesso à busca de músicas, artistas, playlists\ne demais itens.
\nEstes dois termos foram mencionados ao longo desta leitura. É importante\nmencionar que são dois aspectos de segurança que as APIs levam em conta no\nmomento do projeto e implementação.
\nA autenticação é o processo de verificar quem é o usuário que você indica ser.\nIsto é, no início da sessão, seu usuário e senha devem coincidir com os dados\nque estão armazenados no sistema. Isso é um exemplo de autenticação.
\nEnquanto que a autorização, uma vez verificado que você é quem diz ser, verifica\nse você tem acesso ou permissão ao recurso solicitado.
\nAqui deixamos duas vídeos (nós sabemos, estão em inglês. Mas o Google Translate\npode nos ajudar, não 100%, mas o suficiente para poder entendê-los no contexto\nadequado).
\n\n\n\n\nExtensible Markup Language (XML) es un formato universal para datos y\ndocumentos estructurados. Los archivos XML tienen una extensión de archivo de\n
\n.xml. Al igual que HTML, XML utiliza etiquetas (palabras delimitadas por los\ncaracteres>y<) para estructurar los datos del documento.\n<?xml version=\"1.0\" encoding=UTF-8\"?>\n<doc>\n <customer id='123'>\n <name>...</name>\n <address>...</address>\n ...\n <order>\n <amount>...</amount>\n <date>...</date>\n <item quant='12'>\n <name>...</name>\n </item>\n <item quant='4'>...</item>\n ...\n </order>\n <order>...</order>\n ...\n <payment>\n <number>...</number>\n <date>...</date>\n </payment>\n <payment>>...</payment>\n ...\n </customer>\n <customer id='124'>...</customer>\n</doc>\n
Fuente: ¿Qué es XML? - IBM
\n\n\nJSON (JavaScript Object Notation) es un formato para el intercambios de datos,\nbásicamente JSON describe los datos con una sintaxis dedicada que se usa para\nidentificar y gestionar los datos. JSON nació como una alternativa a XML, el\nfácil uso en javascript ha generado un gran numero de seguidores de esta\nalternativa. Una de las mayores ventajas que tiene el uso de JSON es que puede\nser leído por cualquier lenguaje de programación. Por lo tanto, puede ser\nusado para el intercambio de información entre distintas tecnologías.
\n
Fuente: ¿Qué es y para qué sirve JSON? - GeekyTheory
\n\n\n\n{\n \"squadName\": \"Super hero squad\",\n \"homeTown\": \"Metro City\",\n \"formed\": 2016,\n \"secretBase\": \"Super tower\",\n \"active\": true,\n \"members\": [\n {\n \"name\": \"Molecule Man\",\n \"age\": 29,\n \"secretIdentity\": \"Dan Jukes\",\n \"powers\": [\n \"Radiation resistance\",\n \"Turning tiny\",\n \"Radiation blast\"\n ]\n },\n {\n \"name\": \"Madame Uppercut\",\n \"age\": 39,\n \"secretIdentity\": \"Jane Wilson\",\n \"powers\": [\n \"Million tonne punch\",\n \"Damage resistance\",\n \"Superhuman reflexes\"\n ]\n },\n {\n \"name\": \"Eternal Flame\",\n \"age\": 1000000,\n \"secretIdentity\": \"Unknown\",\n \"powers\": [\n \"Immortality\",\n \"Heat Immunity\",\n \"Inferno\",\n \"Teleportation\",\n \"Interdimensional travel\"\n ]\n }\n ]\n}\n
Fuente: Ejemplo - Trabajando con JSON - MDN
\nEn el siguiente video, encuentras un resumen de formato de contenidos:
\n![\"Content](\"https://img.youtube.com/vi/hTdYO7tKh_k/0.jpg\")
Si quieres comparar un poco sobre estas 2 estructuras de información, aquí un\nvideo te lo resume:
\n![\"XML](\"https://img.youtube.com/vi/95X-pHvGBnw/0.jpg\")
\n\nSOAP (originalmente las siglas de Simple Object Access Protocol) es un\nprotocolo estándar que define cómo dos objetos en diferentes procesos pueden\ncomunicarse por medio de intercambio de datos XML. Este protocolo deriva de un\nprotocolo creado por Dave Winer en 1998, llamado XML-RPC. SOAP fue creado por\nMicrosoft, IBM y otros. Está actualmente bajo el auspicio de la W3C. Es uno de\nlos protocolos utilizados en los servicios Web.
\n
Fuente: SOAP - Wikipedia
\n\n\n\"Representational State Transfer\" o traducido a \"Transferencia de presentación\nde estado\" es lo que se domina a REST. ¿Y eso es?, una técnica de arquitectura\nde software usada para construir APIs que permitan comunicar a nuestro servidor\ncon sus clientes usando el protocolo HTTP mediante URIs lo suficientemente\ninteligentes para poder satisfacer la necesidad del cliente.
\n\n
\n- REST es STATELESS, es decir que cada petición que reciba nuestra API debe\nperecer. Por ejemplo, no podemos RECORDAR un usuario logeado en el API\nusando una sesión, esto es un PECADO ya que agotaría la memoria RAM de\nnuestro servidor (10 mil usuarios conectados a nuestra API). Lo que correcto\nes pasar un TOKEN para cada petición realizada al API, y el API deberá\nvalidar si esta es correcta o no (por ahora no vamos hablar de técnicas para\ngenerar el TOKEN, pero lo más común es usar una COOKIE).
\n- Se implementan RECURSOS para generar comunicación, es decir crea URIs únicas\nque permiten al cliente entender y utilizar lo que está exponiendo.\nPor ejemplo:\n
\n\n
\n- \n
https://jsonplaceholder.typicode.com/users- \n
https://jsonplaceholder.typicode.com/users/1- Cada petición realizada a nuestra API responde a un verbo, y dicho verbo a\nuna operación en común. Mediante los métodos HTTP hacemos las peticiones, lo\ncomún es GET y POST, PUT y DELETE.\n
\n\n
\n- POST (create): cuando mandamos información para insertar por ejemplo un\nregistro en la base de datos. La información es enviado en el cuerpo de la\npetición, es decir que los datos no son visibles al usuario.\n
\nPOST /users- GET (read): es usado para modo lectura, por ejemplo: cuando queremos\nlistar a todos los usuarios de nuestra base de datos. Los parámetros son\nenviados por la URL.\n
\nGET /users- PUT (update): cuando queremos actualizar un registro. Actualizar la\ninformación de un usuario X.\n
\nPUT /users/:userId- DELETE (delete): cuando queremos eliminar un registro. Borrar un\nusuario X de nuestra base de datos.\n
\nDELETE /uses/:userIdCon esto hemos mencionado algunas caracteristicas básicas de lo que es REST,\nla cual podríamos decir que es un estándar para crear una REST Api o RESTFul.
\n
Lee más: ¿Qué es REST? Conoce su potencia
\nA continuación puedes ver un video que resume SOAP y REST:
\n![\"Web](\"https://img.youtube.com/vi/AyQboo5CycM/0.jpg\")
Por convenciones, cada uno de los estándares usa un formato de contenido\nparticular. En resumen, SOAP transfiere información a través de XML, mientras\nque REST frecuenta transferir datos usando JSON. Aquí tienes un video que resume\neste mensaje:
\n![\"SOAP](\"https://img.youtube.com/vi/aI1DSeZAEMA/0.jpg\")
¿No te quedó claro que son RESTful APIs? Mientras REST es un estándar, la\nimplementación de éste en un API, viene a ser los RESTful APIs. Si bien al\ndiseñar un API hay muchas más cosas que se toman en cuenta, la principal es que\nte enfoques en cómo se obtienen los recursos y así poder identificar los métodos\ny URIs necesarias para consumir el API.
\nEjemplos de RESTful APIs son:
\n\nSi quieres saber más sobre REST, aquí un tutorial\nque te puede ayudar.
" + "body": "\n\nExtensible Markup Language (XML) es un formato universal para datos y\ndocumentos estructurados. Los archivos XML tienen una extensión de archivo de\n
\n.xml. Al igual que HTML, XML utiliza etiquetas (palabras delimitadas por los\ncaracteres>y<) para estructurar los datos del documento.\n<?xml version=\"1.0\" encoding=UTF-8\"?>\n<doc>\n <customer id='123'>\n <name>...</name>\n <address>...</address>\n ...\n <order>\n <amount>...</amount>\n <date>...</date>\n <item quant='12'>\n <name>...</name>\n </item>\n <item quant='4'>...</item>\n ...\n </order>\n <order>...</order>\n ...\n <payment>\n <number>...</number>\n <date>...</date>\n </payment>\n <payment>>...</payment>\n ...\n </customer>\n <customer id='124'>...</customer>\n</doc>\n
Fuente: ¿Qué es XML? - IBM
\n\n\nJSON (JavaScript Object Notation) es un formato para el intercambios de datos,\nbásicamente JSON describe los datos con una sintaxis dedicada que se usa para\nidentificar y gestionar los datos. JSON nació como una alternativa a XML, el\nfácil uso en javascript ha generado un gran numero de seguidores de esta\nalternativa. Una de las mayores ventajas que tiene el uso de JSON es que puede\nser leído por cualquier lenguaje de programación. Por lo tanto, puede ser\nusado para el intercambio de información entre distintas tecnologías.
\n
Fuente: ¿Qué es y para qué sirve JSON? - GeekyTheory
\n\n\n\n{\n \"squadName\": \"Super hero squad\",\n \"homeTown\": \"Metro City\",\n \"formed\": 2016,\n \"secretBase\": \"Super tower\",\n \"active\": true,\n \"members\": [\n {\n \"name\": \"Molecule Man\",\n \"age\": 29,\n \"secretIdentity\": \"Dan Jukes\",\n \"powers\": [\n \"Radiation resistance\",\n \"Turning tiny\",\n \"Radiation blast\"\n ]\n },\n {\n \"name\": \"Madame Uppercut\",\n \"age\": 39,\n \"secretIdentity\": \"Jane Wilson\",\n \"powers\": [\n \"Million tonne punch\",\n \"Damage resistance\",\n \"Superhuman reflexes\"\n ]\n },\n {\n \"name\": \"Eternal Flame\",\n \"age\": 1000000,\n \"secretIdentity\": \"Unknown\",\n \"powers\": [\n \"Immortality\",\n \"Heat Immunity\",\n \"Inferno\",\n \"Teleportation\",\n \"Interdimensional travel\"\n ]\n }\n ]\n}\n
Fuente: Ejemplo - Trabajando con JSON - MDN
\nEn el siguiente video, encuentras un resumen de formato de contenidos:
\n\nSi quieres comparar un poco sobre estas 2 estructuras de información, aquí un\nvideo te lo resume:
\n\n\n\nSOAP (originalmente las siglas de Simple Object Access Protocol) es un\nprotocolo estándar que define cómo dos objetos en diferentes procesos pueden\ncomunicarse por medio de intercambio de datos XML. Este protocolo deriva de un\nprotocolo creado por Dave Winer en 1998, llamado XML-RPC. SOAP fue creado por\nMicrosoft, IBM y otros. Está actualmente bajo el auspicio de la W3C. Es uno de\nlos protocolos utilizados en los servicios Web.
\n
Fuente: SOAP - Wikipedia
\n\n\n\"Representational State Transfer\" o traducido a \"Transferencia de presentación\nde estado\" es lo que se domina a REST. ¿Y eso es?, una técnica de arquitectura\nde software usada para construir APIs que permitan comunicar a nuestro servidor\ncon sus clientes usando el protocolo HTTP mediante URIs lo suficientemente\ninteligentes para poder satisfacer la necesidad del cliente.
\n\n
\n- REST es STATELESS, es decir que cada petición que reciba nuestra API debe\nperecer. Por ejemplo, no podemos RECORDAR un usuario logeado en el API\nusando una sesión, esto es un PECADO ya que agotaría la memoria RAM de\nnuestro servidor (10 mil usuarios conectados a nuestra API). Lo que correcto\nes pasar un TOKEN para cada petición realizada al API, y el API deberá\nvalidar si esta es correcta o no (por ahora no vamos hablar de técnicas para\ngenerar el TOKEN, pero lo más común es usar una COOKIE).
\n- Se implementan RECURSOS para generar comunicación, es decir crea URIs únicas\nque permiten al cliente entender y utilizar lo que está exponiendo.\nPor ejemplo:\n
\n\n
\n- \n
https://jsonplaceholder.typicode.com/users- \n
https://jsonplaceholder.typicode.com/users/1- Cada petición realizada a nuestra API responde a un verbo, y dicho verbo a\nuna operación en común. Mediante los métodos HTTP hacemos las peticiones, lo\ncomún es GET y POST, PUT y DELETE.\n
\n\n
\n- POST (create): cuando mandamos información para insertar por ejemplo un\nregistro en la base de datos. La información es enviado en el cuerpo de la\npetición, es decir que los datos no son visibles al usuario.\n
\nPOST /users- GET (read): es usado para modo lectura, por ejemplo: cuando queremos\nlistar a todos los usuarios de nuestra base de datos. Los parámetros son\nenviados por la URL.\n
\nGET /users- PUT (update): cuando queremos actualizar un registro. Actualizar la\ninformación de un usuario X.\n
\nPUT /users/:userId- DELETE (delete): cuando queremos eliminar un registro. Borrar un\nusuario X de nuestra base de datos.\n
\nDELETE /uses/:userIdCon esto hemos mencionado algunas caracteristicas básicas de lo que es REST,\nla cual podríamos decir que es un estándar para crear una REST Api o RESTFul.
\n
Lee más: ¿Qué es REST? Conoce su potencia
\nA continuación puedes ver un video que resume SOAP y REST:
\n\nPor convenciones, cada uno de los estándares usa un formato de contenido\nparticular. En resumen, SOAP transfiere información a través de XML, mientras\nque REST frecuenta transferir datos usando JSON. Aquí tienes un video que resume\neste mensaje:
\n\n¿No te quedó claro que son RESTful APIs? Mientras REST es un estándar, la\nimplementación de éste en un API, viene a ser los RESTful APIs. Si bien al\ndiseñar un API hay muchas más cosas que se toman en cuenta, la principal es que\nte enfoques en cómo se obtienen los recursos y así poder identificar los métodos\ny URIs necesarias para consumir el API.
\nEjemplos de RESTful APIs son:
\n\nSi quieres saber más sobre REST, aquí un tutorial\nque te puede ayudar.
" }, "pt": { "title": "RESTful APIs", - "body": "\n\nExtensible Markup Language (XML) é um formato universal para dados e\ndocumentos estruturados. Os arquivos XML tem a extensão de arquivo
\n.xml.\nAssim como HTML, XML utiliza tags (palavras delimitadas pelos caracteres<\ne>) para estruturar os dados do documento.\n<?xml version=\"1.0\" encoding=UTF-8\"?>\n<doc>\n <customer id='123'>\n <name>...</name>\n <address>...</address>\n ...\n <order>\n <amount>...</amount>\n <date>...</date>\n <item quant='12'>\n <name>...</name>\n </item>\n <item quant='4'>...</item>\n ...\n </order>\n <order>...</order>\n ...\n <payment>\n <number>...</number>\n <date>...</date>\n </payment>\n <payment>>...</payment>\n ...\n </customer>\n <customer id='124'>...</customer>\n</doc>\n
Fonte: O que é XML? -\nIBM
\n\n\nJSON (JavaScript Object Notation) é um formato de dados. Basicamente, JSON\ndescreve os dados com uma sintaxe própria que se para validar e administrar os\ndados. JSON nasceu como uma alternativa ao XML. O uso fácil em JavaScript\ngerou um grande número de seguidores desta alternativa. Uma das maiores\nvantagens do uso de JSON é poder ser lido por qualquer linguagem de\nprogramação. Assim, pode ser utilizado para trocas de informação entre\ndiferentes tecnologias.
\n
Fonte: O que é e para que serve JSON? -\nGeekyTheory
\n\n\n\n{\n \"squadName\": \"Super hero squad\",\n \"homeTown\": \"Metro City\",\n \"formed\": 2016,\n \"secretBase\": \"Super tower\",\n \"active\": true,\n \"members\": [\n {\n \"name\": \"Molecule Man\",\n \"age\": 29,\n \"secretIdentity\": \"Dan Jukes\",\n \"powers\": [\n \"Radiation resistance\",\n \"Turning tiny\",\n \"Radiation blast\"\n ]\n },\n {\n \"name\": \"Madame Uppercut\",\n \"age\": 39,\n \"secretIdentity\": \"Jane Wilson\",\n \"powers\": [\n \"Million tonne punch\",\n \"Damage resistance\",\n \"Superhuman reflexes\"\n ]\n },\n {\n \"name\": \"Eternal Flame\",\n \"age\": 1000000,\n \"secretIdentity\": \"Unknown\",\n \"powers\": [\n \"Immortality\",\n \"Heat Immunity\",\n \"Inferno\",\n \"Teleportation\",\n \"Interdimensional travel\"\n ]\n }\n ]\n}\n
Fonte: Exemplo - Trabalhando con JSON -\nMDN
\nNo vídeo a seguir, você encontra um resumo do formato de conteúdos:
\n
Se você quiser comparar um pouco essas 2 estruturas de dados, aqui há um vídeo\nde resumo:
\n
\n\nSOAP (originalmente as siglas de Simple Object Access Protocol) é um protocolo\npadrão que define como objetos em diferentes processos podem se comunicar por\nmeio de troca de dados XML. Esse protocolo deriva de um protocolo criado por\nDave Winer em 1998, chamado XML-RPC. SOAP foi criado pela Microsoft, IBM e\noutros. Está atualmente sob o controle da W3C. É um dos protocolos mais\nutilizados nos serviços web.
\n
Fonte: SOAP -\nWikipedia
\n\n\n\"Representational State Transfer\" (ou traduzido para \"Transferência de\nRepresentação de Estado\") é o que se denomina REST. E o que é isso? É uma\ntécnica de arquitetura de software para construir APIs que permitam o nosso\nservidor comunicar-se com seus clientes usando protocolo HTTP mediante URIs\nsuficientemente inteligentes para satisfazer a necessidade do cliente.
\n\n
\n- REST é STATELESS, ou seja, cada requisição que nossa API recebe deve morrer.\nPor exemplo, não podemos LEMBRAR um usuário logado na API usando uma sessão,\nisso é um PECADO já que usaria muita memória RAM de nosso servidor (10 mil\nusuários conectados em nossa API). O que é correto é passar um TOKEN para\ncada requisição realizada na API e a API deverá validar se ela está correta\nou não (por enquanto, não vamos falar de técnicas para gerar o TOKEN, mas o\nmais comum é usar um COOKIE).
\n- São implementados RECURSOS para gerar comunicação, ou seja, criar URIs\núnicas que permitem ao cliente entender e utilizar o que estão expondo. Por\nexemplo:\n
\n\n
\n- \n
https://jsonplaceholder.typicode.com/users- \n
https://jsonplaceholder.typicode.com/users/1- Cada requisição realizada em nossa API responde a um verbo e este a uma\noperação em comum. Por meio dos métodos HTTP, fazemos as requisições. O\ncomum é GET, POST, PUT e DELETE.\n
\n\n
\n- POST (create): quando enviamos informação para inserir um registro na\nbase de dados, por exemplo. A informação é enviada no corpo da requisição,\nou seja, os dados não são visíveis ao usuário.
\nPOST /users- GET (read): é utilizado para o modo de leitura. Por exemplo: quando\nqueremos listar todos os usuários de nossa base de dados. Os parâmetros\nsão enviados pela URL.
\nGET /users- PUT (update): quando queremos atualizar um registro. Atualizar a\ninformação de um usuário X.
\nPUT /users/:userId- DELETE (delete): quando queremos apagar um registro. Eliminar um\nusuário X de nossa base de dados.
\nDELETE /uses/:userIdCom isso mencionamos algumas características básicas do que é REST. Poderíamos\ndizer que são um padrão para criar uma API REST ou RESTFul.
\n
Fonte: O que é REST? Conheça seu poder
\nA seguir você pode ver um vídeo que resume SOAP e REST:
\n
Por convenção, cada um dos padrões usa um formato de conteúdo particular. Em\nresumo, SOAP transfere informação por meio de XML, enquanto REST transfere dados\nusando JSON. Aqui temos um vídeo que resume esta mensagem:
\n
Não ficou claro para você o que são RESTful APIs? Enquanto REST é um padrão, a\nimplementação deste é uma API, que vem a ser as APIs RESTful. Embora ao projetar\numa API haja muitas coisas mais para levar em conta, a principal é que você se\nconcentre em como se obtém os recursos e assim poder identificar os métodos e\nURIs necessárias para consumir a API.
\nExemplos de RESTful APIs são:
\n\nSe você quiser saber mais sobre REST, aqui tem um\ntutorial que pode te ajudar.
" + "body": "\n\nExtensible Markup Language (XML) é um formato universal para dados e\ndocumentos estruturados. Os arquivos XML tem a extensão de arquivo
\n.xml.\nAssim como HTML, XML utiliza tags (palavras delimitadas pelos caracteres<\ne>) para estruturar os dados do documento.\n<?xml version=\"1.0\" encoding=UTF-8\"?>\n<doc>\n <customer id='123'>\n <name>...</name>\n <address>...</address>\n ...\n <order>\n <amount>...</amount>\n <date>...</date>\n <item quant='12'>\n <name>...</name>\n </item>\n <item quant='4'>...</item>\n ...\n </order>\n <order>...</order>\n ...\n <payment>\n <number>...</number>\n <date>...</date>\n </payment>\n <payment>>...</payment>\n ...\n </customer>\n <customer id='124'>...</customer>\n</doc>\n
Fonte: O que é XML? -\nIBM
\n\n\nJSON (JavaScript Object Notation) é um formato de dados. Basicamente, JSON\ndescreve os dados com uma sintaxe própria que se para validar e administrar os\ndados. JSON nasceu como uma alternativa ao XML. O uso fácil em JavaScript\ngerou um grande número de seguidores desta alternativa. Uma das maiores\nvantagens do uso de JSON é poder ser lido por qualquer linguagem de\nprogramação. Assim, pode ser utilizado para trocas de informação entre\ndiferentes tecnologias.
\n
Fonte: O que é e para que serve JSON? -\nGeekyTheory
\n\n\n\n{\n \"squadName\": \"Super hero squad\",\n \"homeTown\": \"Metro City\",\n \"formed\": 2016,\n \"secretBase\": \"Super tower\",\n \"active\": true,\n \"members\": [\n {\n \"name\": \"Molecule Man\",\n \"age\": 29,\n \"secretIdentity\": \"Dan Jukes\",\n \"powers\": [\n \"Radiation resistance\",\n \"Turning tiny\",\n \"Radiation blast\"\n ]\n },\n {\n \"name\": \"Madame Uppercut\",\n \"age\": 39,\n \"secretIdentity\": \"Jane Wilson\",\n \"powers\": [\n \"Million tonne punch\",\n \"Damage resistance\",\n \"Superhuman reflexes\"\n ]\n },\n {\n \"name\": \"Eternal Flame\",\n \"age\": 1000000,\n \"secretIdentity\": \"Unknown\",\n \"powers\": [\n \"Immortality\",\n \"Heat Immunity\",\n \"Inferno\",\n \"Teleportation\",\n \"Interdimensional travel\"\n ]\n }\n ]\n}\n
Fonte: Exemplo - Trabalhando con JSON -\nMDN
\nNo vídeo a seguir, você encontra um resumo do formato de conteúdos:
\n\nSe você quiser comparar um pouco essas 2 estruturas de dados, aqui há um vídeo\nde resumo:
\n\n\n\nSOAP (originalmente as siglas de Simple Object Access Protocol) é um protocolo\npadrão que define como objetos em diferentes processos podem se comunicar por\nmeio de troca de dados XML. Esse protocolo deriva de um protocolo criado por\nDave Winer em 1998, chamado XML-RPC. SOAP foi criado pela Microsoft, IBM e\noutros. Está atualmente sob o controle da W3C. É um dos protocolos mais\nutilizados nos serviços web.
\n
Fonte: SOAP -\nWikipedia
\n\n\n\"Representational State Transfer\" (ou traduzido para \"Transferência de\nRepresentação de Estado\") é o que se denomina REST. E o que é isso? É uma\ntécnica de arquitetura de software para construir APIs que permitam o nosso\nservidor comunicar-se com seus clientes usando protocolo HTTP mediante URIs\nsuficientemente inteligentes para satisfazer a necessidade do cliente.
\n\n
\n- REST é STATELESS, ou seja, cada requisição que nossa API recebe deve morrer.\nPor exemplo, não podemos LEMBRAR um usuário logado na API usando uma sessão,\nisso é um PECADO já que usaria muita memória RAM de nosso servidor (10 mil\nusuários conectados em nossa API). O que é correto é passar um TOKEN para\ncada requisição realizada na API e a API deverá validar se ela está correta\nou não (por enquanto, não vamos falar de técnicas para gerar o TOKEN, mas o\nmais comum é usar um COOKIE).
\n- São implementados RECURSOS para gerar comunicação, ou seja, criar URIs\núnicas que permitem ao cliente entender e utilizar o que estão expondo. Por\nexemplo:\n
\n\n
\n- \n
https://jsonplaceholder.typicode.com/users- \n
https://jsonplaceholder.typicode.com/users/1- Cada requisição realizada em nossa API responde a um verbo e este a uma\noperação em comum. Por meio dos métodos HTTP, fazemos as requisições. O\ncomum é GET, POST, PUT e DELETE.\n
\n\n
\n- POST (create): quando enviamos informação para inserir um registro na\nbase de dados, por exemplo. A informação é enviada no corpo da requisição,\nou seja, os dados não são visíveis ao usuário.
\nPOST /users- GET (read): é utilizado para o modo de leitura. Por exemplo: quando\nqueremos listar todos os usuários de nossa base de dados. Os parâmetros\nsão enviados pela URL.
\nGET /users- PUT (update): quando queremos atualizar um registro. Atualizar a\ninformação de um usuário X.
\nPUT /users/:userId- DELETE (delete): quando queremos apagar um registro. Eliminar um\nusuário X de nossa base de dados.
\nDELETE /uses/:userIdCom isso mencionamos algumas características básicas do que é REST. Poderíamos\ndizer que são um padrão para criar uma API REST ou RESTFul.
\n
Fonte: O que é REST? Conheça seu poder
\nA seguir você pode ver um vídeo que resume SOAP e REST:
\n\nPor convenção, cada um dos padrões usa um formato de conteúdo particular. Em\nresumo, SOAP transfere informação por meio de XML, enquanto REST transfere dados\nusando JSON. Aqui temos um vídeo que resume esta mensagem:
\n\nNão ficou claro para você o que são RESTful APIs? Enquanto REST é um padrão, a\nimplementação deste é uma API, que vem a ser as APIs RESTful. Embora ao projetar\numa API haja muitas coisas mais para levar em conta, a principal é que você se\nconcentre em como se obtém os recursos e assim poder identificar os métodos e\nURIs necessárias para consumir a API.
\nExemplos de RESTful APIs são:
\n\nSe você quiser saber mais sobre REST, aqui tem um\ntutorial que pode te ajudar.
" } } }, @@ -667,11 +667,11 @@ "intl": { "es": { "title": "CRUD", - "body": "¿Te has percatado que casi toda la interacción qué haces en la web tiene que ver\ncon una base de datos? Cuando entras al perfil de la persona que stalkeas, todas\nsus fotos, publicaciones, comentarios y demás está almacenado en algún lugar\n(base de datos), cuando subes una foto en Instagram o envías un e-mail, estás\ncreando un nuevo registro en la database, cuando cambias tu foto de perfil\nen Whatsapp, estás editando algo existente en la BD, por último, cuándo borras\nel mensaje cuando te equivocas de conversación o grupo, estás alterando tu DB.
\n\n\nEl uso de distintas palabras para referirse a base de datos en el párrafo\nanterior fue intencional para saber que hacen referencia a lo mismo.
\n
A todas las acciones descritas anteriormente que tienen interacción con la base\nde datos, tienen un acrónimo en programación: CRUD.
\nCRUD es el acrónimo de \"Crear, Leer, Actualizar y Eliminar\", palabras que\ncorresponden respectivamente a los verbos HTTP más utilizados: POST, GET,\nPUT y DELETE.
\nEstas son las operaciones más comunes que queremos tener en el caso de una API,\nque manipula datos.
\nPara aclararnos vamos a revisar el siguiente vídeo, solo hasta el minuto 3:15.
\n\n\n\nNota: El vídeo dura muchísimo (1:28:04)!!! Los primeros tres minutos muestra\nlo que es un CRUD y que uso tendría en un aplicación con Firebase.\nDespués, inicia con el desarrollo de la aplicación y si lo vas siguiendo\neste es un excelente ejercicio guiado.
\n
Aquí un ejemplo de CRUD para una lista de tareas:
\nSi bien el ejercicio anterior pierde los cambios al recargar la página, ésta\nmuestra el principio de las acciones que implica un CRUD. Al momento de\npracticar (en las siguientes lecciones), ¡lo pondremos en práctica con una base\nde datos real!
" + "body": "¿Te has percatado que casi toda la interacción qué haces en la web tiene que ver\ncon una base de datos? Cuando entras al perfil de la persona que stalkeas, todas\nsus fotos, publicaciones, comentarios y demás está almacenado en algún lugar\n(base de datos), cuando subes una foto en Instagram o envías un e-mail, estás\ncreando un nuevo registro en la database, cuando cambias tu foto de perfil\nen Whatsapp, estás editando algo existente en la BD, por último, cuándo borras\nel mensaje cuando te equivocas de conversación o grupo, estás alterando tu DB.
\n\n\nEl uso de distintas palabras para referirse a base de datos en el párrafo\nanterior fue intencional para saber que hacen referencia a lo mismo.
\n
A todas las acciones descritas anteriormente que tienen interacción con la base\nde datos, tienen un acrónimo en programación: CRUD.
\nCRUD es el acrónimo de \"Crear, Leer, Actualizar y Eliminar\", palabras que\ncorresponden respectivamente a los verbos HTTP más utilizados: POST, GET,\nPUT y DELETE.
\nEstas son las operaciones más comunes que queremos tener en el caso de una API,\nque manipula datos.
\nPara aclararnos vamos a revisar el siguiente vídeo, solo hasta el minuto 3:15.
\n\n\n\nNota: El vídeo dura muchísimo (1:28:04)!!! Los primeros tres minutos muestra\nlo que es un CRUD y que uso tendría en un aplicación con Firebase.\nDespués, inicia con el desarrollo de la aplicación y si lo vas siguiendo\neste es un excelente ejercicio guiado.
\n
Aquí un ejemplo de CRUD para una lista de tareas:
\nSi bien el ejercicio anterior pierde los cambios al recargar la página, ésta\nmuestra el principio de las acciones que implica un CRUD. Al momento de\npracticar (en las siguientes lecciones), ¡lo pondremos en práctica con una base\nde datos real!
" }, "pt": { "title": "CRUD", - "body": "CRUD e como podemos gerar uma aplicação consumindo uma API\nRESTful.Você já notou que quase toda a interação que você faz na web tem a ver com uma\nbase de dados? Quando você entra no perfil de uma pessoa que você segue, todas\nas suas fotos, publicações, comentários e demais itens estão armazenados em\nalgum lugar (database). Quando sobe uma uma foto no Instagram ou envia um\ne-mail, você está criando um novo registro no DB. Quando você muda sua foto de\nperfil no WhatsApp, você está editando algo existente no banco de dados. Por\núltimo, quando você apaga a mensagem de uma conversa ou grupo, você está\nalterando seu DB.
\n\n\nO uso de diferentes palavras para se referir à base de dados no parágrafo\nanterior foi intencional para você saber que fazem referência à mesma coisa.
\n
A todas essas ações descritas anteriormente que têm interação com a base de\ndados, possuem um acrônimo na programação: CRUD.
\nCRUD é o acrônimo de criar, ler, atualizar e apagar, palavras que correspondem\nrespectivamente aos verbos do HTTP mais utilizados: POST, GET, PUT e DELETE.
\nEstas são as operações mais comuns que queremos ter no caso de uma API que\nmanipula dados.
\nAqui um exemplo de CRUD para uma lista de tarefas:
\nEmbora o exercício anterior perca as alterações ao recarregar a página, ele\nmostra o princípio das ações que um CRUD realiza. No momento da prática (nas\nseguintes lições), vamos colocá-lo em prática com uma base de dados reais!
" + "body": "CRUD e como podemos gerar uma aplicação consumindo uma API\nRESTful.Você já notou que quase toda a interação que você faz na web tem a ver com uma\nbase de dados? Quando você entra no perfil de uma pessoa que você segue, todas\nas suas fotos, publicações, comentários e demais itens estão armazenados em\nalgum lugar (database). Quando sobe uma uma foto no Instagram ou envia um\ne-mail, você está criando um novo registro no DB. Quando você muda sua foto de\nperfil no WhatsApp, você está editando algo existente no banco de dados. Por\núltimo, quando você apaga a mensagem de uma conversa ou grupo, você está\nalterando seu DB.
\n\n\nO uso de diferentes palavras para se referir à base de dados no parágrafo\nanterior foi intencional para você saber que fazem referência à mesma coisa.
\n
A todas essas ações descritas anteriormente que têm interação com a base de\ndados, possuem um acrônimo na programação: CRUD.
\nCRUD é o acrônimo de criar, ler, atualizar e apagar, palavras que correspondem\nrespectivamente aos verbos do HTTP mais utilizados: POST, GET, PUT e DELETE.
\nEstas são as operações mais comuns que queremos ter no caso de uma API que\nmanipula dados.
\nAqui um exemplo de CRUD para uma lista de tarefas:
\nEmbora o exercício anterior perca as alterações ao recarregar a página, ele\nmostra o princípio das ações que um CRUD realiza. No momento da prática (nas\nseguintes lições), vamos colocá-lo em prática com uma base de dados reais!
" } } }, @@ -683,7 +683,7 @@ "intl": { "es": { "title": "Jugando con APIs", - "body": "Debes subir todos tus ejercicios a GitHub y publicarlos en gh-pages.
Que la fuerza te acompañe en este ejercicio, revisa las siguientes slides para\nque puedas crear esta fenómenal app para los amantes de Star Wars.
\nSi tú pensabas que LinkedIn solo servía para mantener actualizado tu CV,\nrevisa las siguientes slides para que te sorprendas con todas las posibilidades\nque nos ofrece para crear diferentes productos.
\n¿Has visto que los sistemas operativos móviles vienen con una APP de predicción\ndel clima? ¡Vamos a hacer la nuestra! Para ello, usaremos la API de\nDark Sky y esperemos llegues a usar un API de\nimágenes como Flickr,\nUnsplash u otro. A continuación te dejamos\nunos slides con algunos recursos y guías del flujo de la app. Recuerda que no es\nnecesario que sigas el diseño al pie de la letra, eres completamente libre de\nadaptarlo a tus gustos.
" + "body": "Debes subir todos tus ejercicios a GitHub y publicarlos en gh-pages.
Que la fuerza te acompañe en este ejercicio, revisa las siguientes slides para\nque puedas crear esta fenómenal app para los amantes de Star Wars.
\nSi tú pensabas que LinkedIn solo servía para mantener actualizado tu CV,\nrevisa las siguientes slides para que te sorprendas con todas las posibilidades\nque nos ofrece para crear diferentes productos.
\n¿Has visto que los sistemas operativos móviles vienen con una APP de predicción\ndel clima? ¡Vamos a hacer la nuestra! Para ello, usaremos la API de\nDark Sky y esperemos llegues a usar un API de\nimágenes como Flickr,\nUnsplash u otro. A continuación te dejamos\nunos slides con algunos recursos y guías del flujo de la app. Recuerda que no es\nnecesario que sigas el diseño al pie de la letra, eres completamente libre de\nadaptarlo a tus gustos.
\nSegún The Information Architecture Institute, la\narquitectura de información es la práctica de decidir cómo organizar las partes\nde algo para que sea comprensible.
\nSi tomamos esta definición como base, podemos decir que todo es organizable con\nla arquitectura de la información. Por ejemplo, pensemos en una tienda de ropa.\nEn la tienda tienen muchas pilas de ropa y, si vas a comprar algo,tendrías que\nsumergirte y buscar mucho hasta encontrar lo que deseas. Más aún, si en la pila\nde ropa hay muchos tipos de prendas como pantalones, blusas, shorts, vestidos,\netc.
\nPensando en esa tienda, realiza el siguiente ejercicio: ¿cómo ordenarías la\nropa de mujer de esa tienda para que sea fácil de encontrar?
\nPuedes ver el siguiente:
\n\nPara entender el concepto de Arquitectura de la Información y leer el\nsiguiente artículo\npara profundizar en el concepto. (borrador del artículo, revisar para corregir\ncomentarios y publicar).
\nPara la Arquitectura de la Información es muy importante tener en cuenta estos 3\nconceptos:
\nEl contexto es súper importante. Por ejemplo, será distinta la información que\nbusque o necesite un usuario que está comprando un auto nuevo versus uno que ya\ntiene un auto y está buscando los servicios de la concesionaria. También, el\ncontexto incluye lo objetivos comerciales de la empresa. Por ejemplo, el\nobjetivo puede ser vender más o fidelizar más o mejorar la imagen de una marca.\nOtras variables que tiene en cuenta el contexto son: política, cultura,\ntecnología, restricciones.
\nEl contenido es finalmente lo que le vamos a mostrar al usuario y es igual de\nimportante. En este caso tenemos que tener en cuenta también las estructuras que\nya existen. Por ejemplo, si ya tenemos una base de datos estructurada, qué y\ncómo podemos mostrar los datos que provengan de ahí. El volumen también es\nrelevante. Si tenemos un gran volumen de contenido por mostrar, ¿cómo\npriorizamos? ¿Le mostramos todo al usuario?. También tiene que ver el tipo de\ncontenido que vamos a mostrar. Por ejemplo, es distinto mostrar un texto, que\nuna imagen o una infografía o un video.
\nLos usuarios también son una parte fundamental. Por algo estamos trabajando en\nexperiencia de usuario. Al trabajar la arquitectura de información tenemos que\ntener en cuenta a nuestros usuarios y cuáles son las tareas que espera realizar\ncon nuestro producto, cuáles son sus necesidades, cómo es su comportamiento al\nbuscar información, y qué tan experimentado es con productos digitales.
\n![\"Contexto,](\"https://theblogimages.adobe.com/wp-content/uploads/2017/11/image21-a-beginners-guide-e1510846719140.png\")
Según Lou Rosenfeld y Peter Morville\nlos componentes claves de la AI son:
\nSegún The Information Architecture Institute, la\narquitectura de información es la práctica de decidir cómo organizar las partes\nde algo para que sea comprensible.
\nSi tomamos esta definición como base, podemos decir que todo es organizable con\nla arquitectura de la información. Por ejemplo, pensemos en una tienda de ropa.\nEn la tienda tienen muchas pilas de ropa y, si vas a comprar algo,tendrías que\nsumergirte y buscar mucho hasta encontrar lo que deseas. Más aún, si en la pila\nde ropa hay muchos tipos de prendas como pantalones, blusas, shorts, vestidos,\netc.
\nPensando en esa tienda, realiza el siguiente ejercicio: ¿cómo ordenarías la\nropa de mujer de esa tienda para que sea fácil de encontrar?
\nPuedes ver el siguiente:
\n\nPara entender el concepto de Arquitectura de la Información y leer el\nsiguiente artículo\npara profundizar en el concepto. (borrador del artículo, revisar para corregir\ncomentarios y publicar).
\nPara la Arquitectura de la Información es muy importante tener en cuenta estos 3\nconceptos:
\nEl contexto es súper importante. Por ejemplo, será distinta la información que\nbusque o necesite un usuario que está comprando un auto nuevo versus uno que ya\ntiene un auto y está buscando los servicios de la concesionaria. También, el\ncontexto incluye lo objetivos comerciales de la empresa. Por ejemplo, el\nobjetivo puede ser vender más o fidelizar más o mejorar la imagen de una marca.\nOtras variables que tiene en cuenta el contexto son: política, cultura,\ntecnología, restricciones.
\nEl contenido es finalmente lo que le vamos a mostrar al usuario y es igual de\nimportante. En este caso tenemos que tener en cuenta también las estructuras que\nya existen. Por ejemplo, si ya tenemos una base de datos estructurada, qué y\ncómo podemos mostrar los datos que provengan de ahí. El volumen también es\nrelevante. Si tenemos un gran volumen de contenido por mostrar, ¿cómo\npriorizamos? ¿Le mostramos todo al usuario?. También tiene que ver el tipo de\ncontenido que vamos a mostrar. Por ejemplo, es distinto mostrar un texto, que\nuna imagen o una infografía o un video.
\nLos usuarios también son una parte fundamental. Por algo estamos trabajando en\nexperiencia de usuario. Al trabajar la arquitectura de información tenemos que\ntener en cuenta a nuestros usuarios y cuáles son las tareas que espera realizar\ncon nuestro producto, cuáles son sus necesidades, cómo es su comportamiento al\nbuscar información, y qué tan experimentado es con productos digitales.
\n
Según Lou Rosenfeld y Peter Morville\nlos componentes claves de la AI son:
\nEl card sorting es una técnica que nos permite saber, desde el lado del usuario,\ncuál sería la mejor manera de organizar la información que tenemos. Es una\ntécnica común cuando hablamos de organizar el contenido para un producto\ndigital.
\nExisten 3 tipos de card-sorting:
\nPara realizar una sesión de card sorting primero tenemos que hacer un inventario\ndel contenido que tenemos. Luego de eso, si es que tenemos mucho contenido,\nnecesitamos decidir si le vamos a dar todo el contenido al usuario o si solo\npriorizaremos algunos. Después, podemos escribir estos contenidos en post-its,\nimprimirlos o usar una herramienta como Optimal Workshop\nque nos permite realizar este tipo de técnica de manera remota.
\nPara entender más de card sorting puedes leer este artículo
\nAdemás ver este vídeo:
\n![\"Card](\"https://media.nngroup.com/media/videos/thumbnails/Card-Sorting-Thumbnail-6.jpg.720x405_q95_autocrop_crop-smart_upscale.jpg\")
El card sorting es una técnica que nos permite saber, desde el lado del usuario,\ncuál sería la mejor manera de organizar la información que tenemos. Es una\ntécnica común cuando hablamos de organizar el contenido para un producto\ndigital.
\nExisten 3 tipos de card-sorting:
\nPara realizar una sesión de card sorting primero tenemos que hacer un inventario\ndel contenido que tenemos. Luego de eso, si es que tenemos mucho contenido,\nnecesitamos decidir si le vamos a dar todo el contenido al usuario o si solo\npriorizaremos algunos. Después, podemos escribir estos contenidos en post-its,\nimprimirlos o usar una herramienta como Optimal Workshop\nque nos permite realizar este tipo de técnica de manera remota.
\nPara entender más de card sorting puedes leer este artículo
\nAdemás ver este vídeo:
\n\nCSS significa Cascading Style Sheets\n(en español: hojas de estilo en cascada). Es un lenguaje usado para definir y\ncrear la presentación de un documento escrito en HTML. CSS describe cómo los\nelementos en la estructura del documento deben ser presentados en la\npantalla. Con CSS damos estilo y diseño a las páginas web. Cambiamos colores,\ntamaños, espacios, agregamos animaciones, etc.
\nExisten tres opciones para incluir CSS en un documento HTML:
\nYa hemos visto cómo agregar estilos a nuestros elementos HTML con el atributo\nstyle. Por ejemplo:
\n![\"Pila](\"https://lh3.googleusercontent.com/PCPqvsj2QkC0PZAOw6KdYSzj7QN_Wm-GpkWfUTRjkwCscmHfG1NnJTiycXc3yu7bB7bID2R8HdHVcCWurvdfx19IIBrDh8Iek481U4WpyGFp3YAmLm7NCYcZTqsuYlpmEDIIzJM-QT8\")
<h1 style=\"color: blue;\nbackground-color: yellow;\nborder: 1px solid black;\">¡Hola Mundo!</h1>\nEn el navegador, el titular anterior se vería así:
\n![\"Inline](\"https://github.com/Laboratoria/curricula-js/blob/632783f957accef3442934c87cecd254a202f2db/03-interactive-site/00-html-and-css/02-css/img-inline-style.png?raw=true\")
Esta forma de agregar CSS se llama CSS Inline, pero no es muy recomendada. Su\nmantenimiento es complicado, ya que podríamos tener que\nactualizar la misma información muchas veces a lo largo del documento. Además,\nestamos mezclando la información de estilo con la información estructural del\nHTML, haciendo el CSS difícil de leer y de entender. Manteniendo los distintos\ntipos de código separados y puros facilitará la tarea a aquellos que vayan a\ntrabajar posteriormente en el código. Recuerda que siempre debes pensar en\norganizar tu código de una manera que facilita a otros entender lo que estás\nhaciendo.
\nOtra opción es colocar los estilos dentro de un elemento html <style> que\ncolocamos en el head. Por ejemplo, para representar\nlos mismos estilos del h1 anterior tendríamos lo siguiente:
<!DOCTYPE html>\n<html>\n <head>\n <title>Entendiendo CSS</title>\n <style>\n h1 {\n color: blue;\n background-color: yellow;\n border: 1px solid black;\n }\n </style>\n </head>\n <body>\n <h1>¡Hola Mundo!</h1>\n </body>\n</html>\nEste método continúa siendo ineficiente. ¿Qué pasa si tenemos estilos similares\nen otras páginas de mi sitio web? Tendría que repetir los estilos en cada\npágina. Y recordemos que no nos gusta repetirnos: DRY! :)
\nLa manera ideal de agregar estilos a tu producto web es tener un archivo CSS\nseparado de tu archivo HTML. Todos los estilos se incluyen en este\narchivo de tipo CSS externo, que las páginas HTML enlazan mediante la\netiqueta html <link>.
Cabe mencionar que este link externo puede ser un archivo\nque esta en tu computadora o un link de un archivo externo\nde internet. (una dirección HTTP)
\nEn el caso de nuestro ejemplo anterior con los estilos para el h1, tendríamos\ndos archivos:
index.html<!DOCTYPE html>\n<html>\n <head>\n <title>Entendiendo CSS</title>\n <!--Link a archivo que esta en la misma computadora-->\n <link rel=\"stylesheet\" href=\"style.css\">\n <!--Link a archivo que esta en internet-->\n <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\">\n </head>\n <body>\n <h1>Hello World!</h1>\n </body>\n</html>\n\nstyle.cssh1 {\n color: blue;\n background-color: yellow;\n border: 1px solid black;\n}\n\nLa etiqueta <link> cuenta con el atributo rel para indicar la relación del\ndocumento enlazado con el actual. El uso más común para este atributo es\nespecificar el enlace a una hoja de estilos externa: el atributo rel se\nestablece con valor stylesheet. El atributo href se establece con la\nruta a la hoja de estilos externa para dar formato a la página. En el ejemplo\nanterior, dado que el archivo a linkear se encuentra en nuestro propio\nambiente, simplemente le ponemos el nombre del archivo: style.css.
Como hemos visto en la lección anterior, para especificar el estilo hacemos\nuso de los pares propiedades : valores.
Propiedades: son identificadores que indican\na las personas qué característica de estilo (ancho, color de fondo, fuente)\nqueremos cambiar.
\nValores: a cada propiedad se le da un valor, que indica cómo queremos cambiar\nésta característica (por ejemplo qué fuente, qué ancho o qué color usar).
\nEl par formado por una propiedad y un valor se denomina declaración CSS.\nVarias declaraciones juntas forman un bloque de declaraciones. Para\ndefinir a qué elemento de la página web se debe aplicar el estilo\nque especifica el bloque de declaración utilizamos un selector. El\nselector le indica al navegador a qué elemento (o elementos) de una web debe\naplicar cierto estilo. Por ejemplo, un selector puede ser un título, un\npárrafo, una imagen, etc. Los bloques de declaraciones CSS emparejados con\nselectores forman reglas CSS.
\nPor ejemplo, una regla css sería:
\nselector\n|\np { color: red; font-size: 15px; }\n | | | |\n prop valor prop valor\n ___________ ______________\n | |\n declaración declaración\n ___________________________\n |\n bloque de declaración\n\n/* ejemplo de una regla css */\nLa convención para representar el ejemplo anterior es la siguiente\n(es más fácil de leer cuando colocamos las declaraciones una debajo de la otra):
\np {\n color: red;\n font-size: 15px;\n}\n\nEn resumen, el bloque de declaración indica qué hay que hacer y el selector\nindica a quién hay que aplicárselo. Por lo tanto, los selectores son\nimprescindibles para aplicar de forma correcta los estilos CSS en una\npágina. A un mismo elemento HTML se le pueden aplicar varias reglas CSS y\ncada regla CSS puede aplicarse a un número ilimitado de elementos.
\nExisten múltiples selectores. Lee la siguiente documentación para que aprendas\nmás sobre selectores:
\nAl finalizar tu investigación debes saber qué es y cómo usar:
\nComo hemos visto, diferentes reglas CSS pueden aplicarse a un número ilimitado\nde elementos. Esto puede generar estilos que entran en conflicto:\ndeclaraciones con estilos diferentes afectando el mismo elemento.\nAfortunadamente. CSS cuenta con un mecanismo conocido como la cascada\nque gobierna cómo interactúan los estilos y qué estilos tienen preferencia\ncuando existe un conflicto. De hecho, este mecanismo de cascada es la razón\npor la cual CSS tiene su nombre: Cascading Style Sheets\n(en español: hojas de estilo en cascada).
\nOtra característica de CSS es la herencia de estilos. La herencia es el\nproceso por el cual algunas declaraciones de CSS aplicadas a un elemento pasan\nde forma automática a los elementos que se encuentran anidados\n(sus descendientes).
\nLee los siguientes artículos para entender los conceptos de cascada y herencia\nen CSS:
\n\nAl terminar tu investigación, debes ser capaz de entender los 3 factores que\ndeterminan el mecanismo de cascada. En particular, responde lo siguiente:
\n!important? ¿Por qué NO debemos usarlo a menos que\nsea estrictamente necesario?inherit?Existen una gran variedad de valores CSS,los cuales se pueden expresar con\ndiferentes unidades. Por ejemplo: la altura, el ancho y el margen de un\nelemento pueden ser definidos en milímetros, centímetros, pulgadas\no pixeles. El color podemos definirlo con palabras clave (como red), con\nvalores, o con el modelo RGB.
Haz tu investigación de los siguientes recursos y aprende las múltiples formas\nde representar los valores en CSS:
\n\nAl finalizar esta lectura, debes saber responder las siguientes preguntas:
\nline-height?#ff0000? ¿Qué color representa?rgb(0,0,255)?Así como es buena práctica comentar tu código html y tu código js, es buena\npráctica comentar tu CSS. Los comentarios en CSS se hacen de la siguiente manera:
\n/* * El final del comentario\nse indica mediante */Veamos un ejemplo:
\n/* Comentario en CSS */\nAhora que ya conoces más a profundidad sobre CSS puedes seguir a Michelle en\nel siguiente video donde termina de desarrollar la página de Garce Hopper,\nutilizando una estructura semántica y todas las bondades de CSS para\nrepresentar el diseño lo más fiel posible.
\n![\"Grace](\"https://img.youtube.com/vi/RBeCotNZUq4/0.jpg\")
CSS significa Cascading Style Sheets\n(en español: hojas de estilo en cascada). Es un lenguaje usado para definir y\ncrear la presentación de un documento escrito en HTML. CSS describe cómo los\nelementos en la estructura del documento deben ser presentados en la\npantalla. Con CSS damos estilo y diseño a las páginas web. Cambiamos colores,\ntamaños, espacios, agregamos animaciones, etc.
\nExisten tres opciones para incluir CSS en un documento HTML:
\nYa hemos visto cómo agregar estilos a nuestros elementos HTML con el atributo\nstyle. Por ejemplo:
\n<h1 style=\"color: blue;\nbackground-color: yellow;\nborder: 1px solid black;\">¡Hola Mundo!</h1>\nEn el navegador, el titular anterior se vería así:
\n
Esta forma de agregar CSS se llama CSS Inline, pero no es muy recomendada. Su\nmantenimiento es complicado, ya que podríamos tener que\nactualizar la misma información muchas veces a lo largo del documento. Además,\nestamos mezclando la información de estilo con la información estructural del\nHTML, haciendo el CSS difícil de leer y de entender. Manteniendo los distintos\ntipos de código separados y puros facilitará la tarea a aquellos que vayan a\ntrabajar posteriormente en el código. Recuerda que siempre debes pensar en\norganizar tu código de una manera que facilita a otros entender lo que estás\nhaciendo.
\nOtra opción es colocar los estilos dentro de un elemento html <style> que\ncolocamos en el head. Por ejemplo, para representar\nlos mismos estilos del h1 anterior tendríamos lo siguiente:
<!DOCTYPE html>\n<html>\n <head>\n <title>Entendiendo CSS</title>\n <style>\n h1 {\n color: blue;\n background-color: yellow;\n border: 1px solid black;\n }\n </style>\n </head>\n <body>\n <h1>¡Hola Mundo!</h1>\n </body>\n</html>\nEste método continúa siendo ineficiente. ¿Qué pasa si tenemos estilos similares\nen otras páginas de mi sitio web? Tendría que repetir los estilos en cada\npágina. Y recordemos que no nos gusta repetirnos: DRY! :)
\nLa manera ideal de agregar estilos a tu producto web es tener un archivo CSS\nseparado de tu archivo HTML. Todos los estilos se incluyen en este\narchivo de tipo CSS externo, que las páginas HTML enlazan mediante la\netiqueta html <link>.
Cabe mencionar que este link externo puede ser un archivo\nque esta en tu computadora o un link de un archivo externo\nde internet. (una dirección HTTP)
\nEn el caso de nuestro ejemplo anterior con los estilos para el h1, tendríamos\ndos archivos:
index.html<!DOCTYPE html>\n<html>\n <head>\n <title>Entendiendo CSS</title>\n <!--Link a archivo que esta en la misma computadora-->\n <link rel=\"stylesheet\" href=\"style.css\">\n <!--Link a archivo que esta en internet-->\n <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\">\n </head>\n <body>\n <h1>Hello World!</h1>\n </body>\n</html>\n\nstyle.cssh1 {\n color: blue;\n background-color: yellow;\n border: 1px solid black;\n}\n\nLa etiqueta <link> cuenta con el atributo rel para indicar la relación del\ndocumento enlazado con el actual. El uso más común para este atributo es\nespecificar el enlace a una hoja de estilos externa: el atributo rel se\nestablece con valor stylesheet. El atributo href se establece con la\nruta a la hoja de estilos externa para dar formato a la página. En el ejemplo\nanterior, dado que el archivo a linkear se encuentra en nuestro propio\nambiente, simplemente le ponemos el nombre del archivo: style.css.
Como hemos visto en la lección anterior, para especificar el estilo hacemos\nuso de los pares propiedades : valores.
Propiedades: son identificadores que indican\na las personas qué característica de estilo (ancho, color de fondo, fuente)\nqueremos cambiar.
\nValores: a cada propiedad se le da un valor, que indica cómo queremos cambiar\nésta característica (por ejemplo qué fuente, qué ancho o qué color usar).
\nEl par formado por una propiedad y un valor se denomina declaración CSS.\nVarias declaraciones juntas forman un bloque de declaraciones. Para\ndefinir a qué elemento de la página web se debe aplicar el estilo\nque especifica el bloque de declaración utilizamos un selector. El\nselector le indica al navegador a qué elemento (o elementos) de una web debe\naplicar cierto estilo. Por ejemplo, un selector puede ser un título, un\npárrafo, una imagen, etc. Los bloques de declaraciones CSS emparejados con\nselectores forman reglas CSS.
\nPor ejemplo, una regla css sería:
\nselector\n|\np { color: red; font-size: 15px; }\n | | | |\n prop valor prop valor\n ___________ ______________\n | |\n declaración declaración\n ___________________________\n |\n bloque de declaración\n\n/* ejemplo de una regla css */\nLa convención para representar el ejemplo anterior es la siguiente\n(es más fácil de leer cuando colocamos las declaraciones una debajo de la otra):
\np {\n color: red;\n font-size: 15px;\n}\n\nEn resumen, el bloque de declaración indica qué hay que hacer y el selector\nindica a quién hay que aplicárselo. Por lo tanto, los selectores son\nimprescindibles para aplicar de forma correcta los estilos CSS en una\npágina. A un mismo elemento HTML se le pueden aplicar varias reglas CSS y\ncada regla CSS puede aplicarse a un número ilimitado de elementos.
\nExisten múltiples selectores. Lee la siguiente documentación para que aprendas\nmás sobre selectores:
\nAl finalizar tu investigación debes saber qué es y cómo usar:
\nComo hemos visto, diferentes reglas CSS pueden aplicarse a un número ilimitado\nde elementos. Esto puede generar estilos que entran en conflicto:\ndeclaraciones con estilos diferentes afectando el mismo elemento.\nAfortunadamente. CSS cuenta con un mecanismo conocido como la cascada\nque gobierna cómo interactúan los estilos y qué estilos tienen preferencia\ncuando existe un conflicto. De hecho, este mecanismo de cascada es la razón\npor la cual CSS tiene su nombre: Cascading Style Sheets\n(en español: hojas de estilo en cascada).
\nOtra característica de CSS es la herencia de estilos. La herencia es el\nproceso por el cual algunas declaraciones de CSS aplicadas a un elemento pasan\nde forma automática a los elementos que se encuentran anidados\n(sus descendientes).
\nLee los siguientes artículos para entender los conceptos de cascada y herencia\nen CSS:
\n\nAl terminar tu investigación, debes ser capaz de entender los 3 factores que\ndeterminan el mecanismo de cascada. En particular, responde lo siguiente:
\n!important? ¿Por qué NO debemos usarlo a menos que\nsea estrictamente necesario?inherit?Existen una gran variedad de valores CSS,los cuales se pueden expresar con\ndiferentes unidades. Por ejemplo: la altura, el ancho y el margen de un\nelemento pueden ser definidos en milímetros, centímetros, pulgadas\no pixeles. El color podemos definirlo con palabras clave (como red), con\nvalores, o con el modelo RGB.
Haz tu investigación de los siguientes recursos y aprende las múltiples formas\nde representar los valores en CSS:
\n\nAl finalizar esta lectura, debes saber responder las siguientes preguntas:
\nline-height?#ff0000? ¿Qué color representa?rgb(0,0,255)?Así como es buena práctica comentar tu código html y tu código js, es buena\npráctica comentar tu CSS. Los comentarios en CSS se hacen de la siguiente manera:
\n/* * El final del comentario\nse indica mediante */Veamos un ejemplo:
\n/* Comentario en CSS */\nAhora que ya conoces más a profundidad sobre CSS puedes seguir a Michelle en\nel siguiente video donde termina de desarrollar la página de Garce Hopper,\nutilizando una estructura semántica y todas las bondades de CSS para\nrepresentar el diseño lo más fiel posible.
\n" }, "pt": { "title": "CSS", - "body": "CSS significa Cascading Style Sheets (em português: folhas de estilo em\ncascata). É uma linguagem usada para definir e criar a apresentação de um\ndocumento escrito em HTML. CSS descreve como os elementos na estrutura do\ndocumento devem ser apresentados na tela. Com CSS, damos estilo e design à\npáginas da web. Nós mudamos cores, tamanhos, espaços, adicionamos animações,\netc.
\nExistem três opções para incluir CSS em um documento HTML:
\nJá vimos como adicionar estilos aos nossos elementos HTML com o atributo\nstyle. Por exemplo:
\n<h1 style=\"color: blue;\nbackground-color: yellow;\nborder: 1px solid black;\">Olá Mundo!</h1>\nNo navegador, o título anterior ficaria assim:
\n![\"Estilo](\"https://user-images.githubusercontent.com/11894994/57649406-851c0780-759e-11e9-96b9-e7ff01870593.png\")
Esta maneira de adicionar CSS é chamada de CSS Inline, mas não é muito\nrecomendada. Sua manutenção é complicada, já que poderíamos ter que atualizar as\nmesmas informações várias vezes ao longo do documento. Além disso, estamos\nmisturando informações de estilo com informações HTML estruturais, tornando o\nCSS difícil de ler e entender. Manter os diferentes tipos de código separados e\npuros facilitará a tarefa para aqueles que posteriormente trabalharão no código.\nLembre-se de que você deve sempre pensar em organizar seu código de uma maneira\nque torne mais fácil para os outros entenderem o que você está fazendo.
\nOutra opção é colocar os estilos dentro de um elemento html <style> que\ncolocamos no head. Por exemplo, para representar os mesmos estilos do h1\nanterior, teríamos o seguinte:
<!DOCTYPE html>\n<html>\n <head>\n <title>Entendendo CSS</title>\n <style>\n h1 {\n color: blue;\n background-color: yellow;\n border: 1px solid black;\n }\n </style>\n </head>\n <body>\n <h1>Olá Mundo!</h1>\n </body>\n</html>\nEste método também é ineficiente. O que acontece se tivermos estilos semelhantes\nem outras páginas do meu site? Eu teria que repetir os estilos em cada página. E\nlembre-se que não gostamos de nos repetir: DRY! :)
\nA maneira ideal de adicionar estilos ao seu sítio da Web é ter um arquivo CSS\nseparado do arquivo HTML. Todos os estilos estão incluídos neste arquivo CSS\nexterno, que as páginas HTML vinculam usando a tag html <link>.
Vale ressaltar que este link externo pode ser um arquivo que está no seu\ncomputador ou um link de um arquivo externo da Internet (um endereço HTTP).
\nNo caso do nosso exemplo anterior com os estilos para ele h1, teríamos dois\narquivos:
index.html<!DOCTYPE html>\n<html>\n <head>\n <title>Entendendo CSS</title>\n <!--Link para o arquivo que está no mesmo computador-->\n <link rel=\"stylesheet\" href=\"style.css\">\n <!--Link para o arquivo que está na internet-->\n <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\">\n </head>\n <body>\n <h1>Olá, Mundo!</h1>\n </body>\n</html>\nstyle.cssh1 {\n color: blue;\n background-color: yellow;\n border: 1px solid black;\n}\nA tag <link> tem o atributo rel para indicar o relacionamento do documento\nvinculado ao atual. O uso mais comum desse atributo é especificar o link para\numa folha de estilos externa: o atributo rel é definido com o valor\nstylesheet. O atributo href é definido com o caminho para a folha de estilo\nexterna para formatar a página. No exemplo acima, uma vez que o arquivo para\nligação está em nosso próprio ambiente, nós simplesmente colocar o nome do\narquivo: style.css.
Como vimos na lição anterior, para especificar o estilo, usamos os pares\npropriedades : valores.
O par formado por uma propriedade e um valor é chamado de instrução CSS.\nVárias instruções juntas formam um bloco de instruções. Para definir para\nqual elemento da página da web o estilo especificado pelo bloco de declaração\ndeve ser aplicado, usamos um seletor. O seletor informa ao navegador para\nqual elemento (ou elementos) de uma Web deve aplicar um determinado estilo.\nPor exemplo, um seletor pode ser um título, um parágrafo, uma imagem etc. Blocos\nde declaração CSS combinados com seletores formam regras CSS.
\nPor exemplo, uma regra de css seria:
\nseletor\n|\np { color:red; font-size:15px ; }\n | | | |\n prop valor prop valor\n ___________ ______________\n | |\n declaração declaração\n ___________________________\n |\n bloco de instruções\n\n/ * exemplo de uma regra css * /\nA convenção para representar o exemplo anterior é a seguinte (é mais fácil ler\nquando colocamos as instruções uma abaixo da outra):
\np {\n color: red;\n font-size: 15px ;\n}\nEm resumo, o bloco de instruções indica o que precisa ser feito e o seletor\nindica a quem deve ser aplicado. Portanto, os seletores são essenciais para\naplicar corretamente estilos CSS em uma página. Várias regras CSS podem ser\naplicadas ao mesmo elemento HTML e cada regra CSS pode ser aplicada a um número\nilimitado de elementos.
\nExistem vários seletores. Leia a documentação a seguir para aprender mais sobre\nseletores:
\n\nNo final da sua pesquisa, você deve saber o que é e como usar:
\nOs pseudo seletores são palavras chaves que alteram o estado de um elemento. Os\npseudo seletores não são encontrados sozinhos. Estão sempre acompanhados de um\nseletor e são precedidos por :. Os pseudo seletores ou pseudo classes\napresentam a seguinte sintaxe:
button:hover {\n color: red;\n}\nO :hover é um pseudo seletor que altera o estilo de um elemento quando passamos\no mouse em cima dele. O uso desse pseudo seletor é bastante comum. Não\nprecisamos ir muito longe para ver ele sendo usado na prática. Aqui mesmo no LMS\nao realizarmos o login nos deparamos com o seguinte:
![\"hover\"](\"https://user-images.githubusercontent.com/11894994/57649699-489cdb80-759f-11e9-9af3-9159fa166124.gif\")
Note que ao passar do mouse os elementos adquirem estilos novos. Isso é feito\natravés do :hover.
Esse pseudo seletor é utilizado para alterar o estado de links ativos. Mas o que\nseriam links ativos? Os links se tornam ativos no momento do clique.
\nbutton {\n color: black;\n background-color: yellow;\n}\n\nbutton:active {\n color: white;\n background-color: #ff008f;\n}\n![\"active\"](\"https://user-images.githubusercontent.com/11894994/57649729-59e5e800-759f-11e9-812e-dfaf0184c0f8.gif\")
Perceba que no exemplo, o estilo do botão é apenas alterado quando estamos\nclicando. Quando não está mais ocorrendo o evento de clique o botão assume o\nestilo aplicado sem o pseudo seletor :active.
O :focus é um pseudo seletor que se aplica particularmente aos elementos que\nrecebem eventos como entrada de texto, ou outros inputs de usuário, como por\nexemplo, os inputs e textareas.
input:focus {\n background-color: yellow;\n}\n![\"focus\"](\"https://user-images.githubusercontent.com/11894994/57649768-6f5b1200-759f-11e9-9a09-d62f500aaa5b.gif\")
Como vimos, regras CSS diferentes podem ser aplicadas a um número ilimitado de\nelementos. Isso pode gerar estilos que entram em conflito: instruções com\ndiferentes estilos afetando o mesmo elemento. Felizmente O CSS possui um\nmecanismo conhecido como cascata que rege como os estilos interagem e quais\nestilos têm preferência quando há um conflito. Na verdade, esse mecanismo em\ncascata é a razão pela qual o CSS tem o seu nome: Cascading Style Sheets (em\nportuguês: folhas de estilo em cascata).
\nOutra característica do CSS é a herança de estilos. Herança é o processo\npelo qual algumas instruções CSS aplicadas a um elemento passam automaticamente\npara os elementos que estão aninhados (seus descendentes).
\nLeia o artigo a seguir para entender os conceitos de cascata e herança em CSS:
\n\nQuando você terminar sua pesquisa, você deve ser capaz de entender os 3 fatores\nque determinam o mecanismo de cascata. Em particular, responda o seguinte:
\n!important? Por que não devemos usá-lo a menos que\nseja estritamente necessário?inherit?Existe uma grande variedade de valores de CSS, que podem ser expressos com\ndiferentes unidades. Por exemplo: a altura, largura e margem de um elemento\npodem ser definidas em milímetros, centímetros, polegadas ou pixels. A cor pode\nser definida com palavras-chave (como red), com valores ou com o padrão RGB.
Faça sua pesquisa dos recursos a seguir e aprenda as várias maneiras de\nrepresentar valores em CSS:
\n\nNo final desta leitura, você deve saber como responder às seguintes perguntas:
\nline-height?#ff0000? Que cor representa?rgb(0,0,255)?Como é uma boa prática comentar seu código html e seu código js, é\nrecomendável comentar seu CSS. Comentários em CSS são feitos da seguinte forma:
/*. O fim do comentário é indicado por\n*/Vejamos um exemplo:
\n/ * Comentário no CSS * /\nAgora que você sabe mais sobre a profundidade CSS você pode acompanhar a\nPalomita no vídeo a seguir no qual ela termina de desenvolver a página de Grace\nHopper, usando uma estrutura semântica e todos os benefícios do CSS para\nrepresentar o projeto o mais fiel possível.
\n![\"Grace\nHopper\"](\"https://img.youtube.com/vi/CJtJbWs3qjQ/0.jpg\")
CSS significa Cascading Style Sheets (em português: folhas de estilo em\ncascata). É uma linguagem usada para definir e criar a apresentação de um\ndocumento escrito em HTML. CSS descreve como os elementos na estrutura do\ndocumento devem ser apresentados na tela. Com CSS, damos estilo e design à\npáginas da web. Nós mudamos cores, tamanhos, espaços, adicionamos animações,\netc.
\nExistem três opções para incluir CSS em um documento HTML:
\nJá vimos como adicionar estilos aos nossos elementos HTML com o atributo\nstyle. Por exemplo:
\n<h1 style=\"color: blue;\nbackground-color: yellow;\nborder: 1px solid black;\">Olá Mundo!</h1>\nNo navegador, o título anterior ficaria assim:
\n
Esta maneira de adicionar CSS é chamada de CSS Inline, mas não é muito\nrecomendada. Sua manutenção é complicada, já que poderíamos ter que atualizar as\nmesmas informações várias vezes ao longo do documento. Além disso, estamos\nmisturando informações de estilo com informações HTML estruturais, tornando o\nCSS difícil de ler e entender. Manter os diferentes tipos de código separados e\npuros facilitará a tarefa para aqueles que posteriormente trabalharão no código.\nLembre-se de que você deve sempre pensar em organizar seu código de uma maneira\nque torne mais fácil para os outros entenderem o que você está fazendo.
\nOutra opção é colocar os estilos dentro de um elemento html <style> que\ncolocamos no head. Por exemplo, para representar os mesmos estilos do h1\nanterior, teríamos o seguinte:
<!DOCTYPE html>\n<html>\n <head>\n <title>Entendendo CSS</title>\n <style>\n h1 {\n color: blue;\n background-color: yellow;\n border: 1px solid black;\n }\n </style>\n </head>\n <body>\n <h1>Olá Mundo!</h1>\n </body>\n</html>\nEste método também é ineficiente. O que acontece se tivermos estilos semelhantes\nem outras páginas do meu site? Eu teria que repetir os estilos em cada página. E\nlembre-se que não gostamos de nos repetir: DRY! :)
\nA maneira ideal de adicionar estilos ao seu sítio da Web é ter um arquivo CSS\nseparado do arquivo HTML. Todos os estilos estão incluídos neste arquivo CSS\nexterno, que as páginas HTML vinculam usando a tag html <link>.
Vale ressaltar que este link externo pode ser um arquivo que está no seu\ncomputador ou um link de um arquivo externo da Internet (um endereço HTTP).
\nNo caso do nosso exemplo anterior com os estilos para ele h1, teríamos dois\narquivos:
index.html<!DOCTYPE html>\n<html>\n <head>\n <title>Entendendo CSS</title>\n <!--Link para o arquivo que está no mesmo computador-->\n <link rel=\"stylesheet\" href=\"style.css\">\n <!--Link para o arquivo que está na internet-->\n <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\" integrity=\"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T\" crossorigin=\"anonymous\">\n </head>\n <body>\n <h1>Olá, Mundo!</h1>\n </body>\n</html>\nstyle.cssh1 {\n color: blue;\n background-color: yellow;\n border: 1px solid black;\n}\nA tag <link> tem o atributo rel para indicar o relacionamento do documento\nvinculado ao atual. O uso mais comum desse atributo é especificar o link para\numa folha de estilos externa: o atributo rel é definido com o valor\nstylesheet. O atributo href é definido com o caminho para a folha de estilo\nexterna para formatar a página. No exemplo acima, uma vez que o arquivo para\nligação está em nosso próprio ambiente, nós simplesmente colocar o nome do\narquivo: style.css.
Como vimos na lição anterior, para especificar o estilo, usamos os pares\npropriedades : valores.
O par formado por uma propriedade e um valor é chamado de instrução CSS.\nVárias instruções juntas formam um bloco de instruções. Para definir para\nqual elemento da página da web o estilo especificado pelo bloco de declaração\ndeve ser aplicado, usamos um seletor. O seletor informa ao navegador para\nqual elemento (ou elementos) de uma Web deve aplicar um determinado estilo.\nPor exemplo, um seletor pode ser um título, um parágrafo, uma imagem etc. Blocos\nde declaração CSS combinados com seletores formam regras CSS.
\nPor exemplo, uma regra de css seria:
\nseletor\n|\np { color:red; font-size:15px ; }\n | | | |\n prop valor prop valor\n ___________ ______________\n | |\n declaração declaração\n ___________________________\n |\n bloco de instruções\n\n/ * exemplo de uma regra css * /\nA convenção para representar o exemplo anterior é a seguinte (é mais fácil ler\nquando colocamos as instruções uma abaixo da outra):
\np {\n color: red;\n font-size: 15px ;\n}\nEm resumo, o bloco de instruções indica o que precisa ser feito e o seletor\nindica a quem deve ser aplicado. Portanto, os seletores são essenciais para\naplicar corretamente estilos CSS em uma página. Várias regras CSS podem ser\naplicadas ao mesmo elemento HTML e cada regra CSS pode ser aplicada a um número\nilimitado de elementos.
\nExistem vários seletores. Leia a documentação a seguir para aprender mais sobre\nseletores:
\n\nNo final da sua pesquisa, você deve saber o que é e como usar:
\nOs pseudo seletores são palavras chaves que alteram o estado de um elemento. Os\npseudo seletores não são encontrados sozinhos. Estão sempre acompanhados de um\nseletor e são precedidos por :. Os pseudo seletores ou pseudo classes\napresentam a seguinte sintaxe:
button:hover {\n color: red;\n}\nO :hover é um pseudo seletor que altera o estilo de um elemento quando passamos\no mouse em cima dele. O uso desse pseudo seletor é bastante comum. Não\nprecisamos ir muito longe para ver ele sendo usado na prática. Aqui mesmo no LMS\nao realizarmos o login nos deparamos com o seguinte:
Note que ao passar do mouse os elementos adquirem estilos novos. Isso é feito\natravés do :hover.
Esse pseudo seletor é utilizado para alterar o estado de links ativos. Mas o que\nseriam links ativos? Os links se tornam ativos no momento do clique.
\nbutton {\n color: black;\n background-color: yellow;\n}\n\nbutton:active {\n color: white;\n background-color: #ff008f;\n}\n
Perceba que no exemplo, o estilo do botão é apenas alterado quando estamos\nclicando. Quando não está mais ocorrendo o evento de clique o botão assume o\nestilo aplicado sem o pseudo seletor :active.
O :focus é um pseudo seletor que se aplica particularmente aos elementos que\nrecebem eventos como entrada de texto, ou outros inputs de usuário, como por\nexemplo, os inputs e textareas.
input:focus {\n background-color: yellow;\n}\n
Como vimos, regras CSS diferentes podem ser aplicadas a um número ilimitado de\nelementos. Isso pode gerar estilos que entram em conflito: instruções com\ndiferentes estilos afetando o mesmo elemento. Felizmente O CSS possui um\nmecanismo conhecido como cascata que rege como os estilos interagem e quais\nestilos têm preferência quando há um conflito. Na verdade, esse mecanismo em\ncascata é a razão pela qual o CSS tem o seu nome: Cascading Style Sheets (em\nportuguês: folhas de estilo em cascata).
\nOutra característica do CSS é a herança de estilos. Herança é o processo\npelo qual algumas instruções CSS aplicadas a um elemento passam automaticamente\npara os elementos que estão aninhados (seus descendentes).
\nLeia o artigo a seguir para entender os conceitos de cascata e herança em CSS:
\n\nQuando você terminar sua pesquisa, você deve ser capaz de entender os 3 fatores\nque determinam o mecanismo de cascata. Em particular, responda o seguinte:
\n!important? Por que não devemos usá-lo a menos que\nseja estritamente necessário?inherit?Existe uma grande variedade de valores de CSS, que podem ser expressos com\ndiferentes unidades. Por exemplo: a altura, largura e margem de um elemento\npodem ser definidas em milímetros, centímetros, polegadas ou pixels. A cor pode\nser definida com palavras-chave (como red), com valores ou com o padrão RGB.
Faça sua pesquisa dos recursos a seguir e aprenda as várias maneiras de\nrepresentar valores em CSS:
\n\nNo final desta leitura, você deve saber como responder às seguintes perguntas:
\nline-height?#ff0000? Que cor representa?rgb(0,0,255)?Como é uma boa prática comentar seu código html e seu código js, é\nrecomendável comentar seu CSS. Comentários em CSS são feitos da seguinte forma:
/*. O fim do comentário é indicado por\n*/Vejamos um exemplo:
\n/ * Comentário no CSS * /\nAgora que você sabe mais sobre a profundidade CSS você pode acompanhar a\nPalomita no vídeo a seguir no qual ela termina de desenvolver a página de Grace\nHopper, usando uma estrutura semântica e todos os benefícios do CSS para\nrepresentar o projeto o mais fiel possível.
\n" } } }, @@ -91,7 +91,7 @@ }, "pt": { "title": "Exercícios Livres", - "body": "Aqui estão alguns exercícios práticos que serão resolvidos, passo a passo, pela\nsua equipe de professores em uma sessão presencial (oficina). Sugerimos que\nvocê tente resolver os exercícios sozinho (ou em equipe) antes da sessão\npresencial. Assim, você já virá com dúvidas específicas e estará familiarizada\ncom os desafios. Talvez você possa apresentar sua solução para a turma e assim\najudar o restante de suas colegas :)
Você deve fazer o upload de todos os seus exercícios no GitHub e publicá-los\nem gh-pages.
Pratique seletores CSS por meio deste jogo.
\nReplique as seguintes visualizações, utilizando seu conhecimento de display.\nVocê deve utilizar apenas display, sem usar positioning nem floats.
![\"Box1\"](\"https://user-images.githubusercontent.com/11894994/57651330-581e2380-75a3-11e9-9018-cb94308496f1.png\")
![\"Box2\"](\"https://user-images.githubusercontent.com/11894994/57651332-581e2380-75a3-11e9-8e90-7417a0d7ca49.png\")
![\"Box3\"](\"https://user-images.githubusercontent.com/11894994/57651336-58b6ba00-75a3-11e9-90c9-bca269826f5f.png\")
![\"Box4\"](\"https://user-images.githubusercontent.com/11894994/57651337-58b6ba00-75a3-11e9-908d-aac21930ead0.png\")
Assista ao vídeo do Rafa para e veja uma possível solução para esse exercício:
\n![\"Solução](\"https://img.youtube.com/vi/fhdFSrRR-YQ/0.jpg\")
Aqui estão alguns exercícios práticos que serão resolvidos, passo a passo, pela\nsua equipe de professores em uma sessão presencial (oficina). Sugerimos que\nvocê tente resolver os exercícios sozinho (ou em equipe) antes da sessão\npresencial. Assim, você já virá com dúvidas específicas e estará familiarizada\ncom os desafios. Talvez você possa apresentar sua solução para a turma e assim\najudar o restante de suas colegas :)
Você deve fazer o upload de todos os seus exercícios no GitHub e publicá-los\nem gh-pages.
Pratique seletores CSS por meio deste jogo.
\nReplique as seguintes visualizações, utilizando seu conhecimento de display.\nVocê deve utilizar apenas display, sem usar positioning nem floats.
Assista ao vídeo do Rafa para e veja uma possível solução para esse exercício:
\n" } }, "challenges": [] @@ -120,11 +120,11 @@ "intl": { "es": { "title": "Positioning & Floats", - "body": "\n\nA continuación, la traducción a Español del artículo MDN - Positioning:
\n
Positioning es un tema bastante complejo, por lo que antes de sumergirnos en el\ncódigo vamos a repasar un par de cosas sobre el flujo del documento que hemos\nvisto hasta ahora.
\nEn primer lugar, hemos visto que los elementos individuales son como \"cajas\" que\nse presentan tomando su contenido y añadiéndoles relleno, borde y margen a su\nalrededor - el modelo de la caja que vimos en la lección anterior.
\nTambién hemos visto que, por defecto, el contenido de un elemento de tipo\nbloque es 100% del ancho del elemento padre y tan alto como su contenido.\nPor el contrario, elementos de tipo inline son tan altos y tan amplios como\nsu contenido. No se puede establecer el ancho o la altura para elementos inline
\ndisplay: block;.Eso explica los elementos individuales, pero ¿cómo interactúan los elementos\nentre sí? Hasta ahora hemos visto que el flujo normal (por defecto o de\nmanera predeterminada) es que los elementos de tipo bloque están dispuestos\nverticalmente, uno de debajo del otro: es decir, cada uno aparecerá en una nueva\nlínea debajo de la última y se separarán por cualquier margen que se establezca\nen ellos.
\nLos elementos en línea se comportan de manera diferente: no aparecen en líneas\nnuevas; en su lugar, se sientan en la misma línea que el otro y cualquier\ncontenido de texto adyacente (o envuelto), siempre y cuando haya espacio para\nque lo hagan dentro del ancho del elemento de nivel de bloque padre. Si no hay\nespacio, entonces el texto o los elementos que se desbordan se moverán hacia\nabajo hasta una nueva línea.
\nSi dos elementos adyacentes tienen margen aplicado y los dos márgenes se tocan,\nel más grande de los dos permanece, y el más pequeño desaparece - esto se llama\ncolapso de margen.
\nVeamos un ejemplo:
\n<h1>Basic document flow</h1>\n\n<p>I am a basic block level element. My adjacent block level elements sit on\nnew lines below me.</p>\n\n<p>By default we span 100% of the width of our parent element, and we are as\ntall as our child content. Our total width and height is our content + padding\n+ border width/height.</p>\n\n<p>We are separated by our margins. Because of margin collapsing, we are\nseparated by the width of one of our margins, not both.</p>\n\n<p>inline elements <span>like this one</span> and <span>this one</span> sit on\nthe same line as one another, and adjacent text nodes, if there is space on\nthe same line. Overflowing inline elements will <span>wrap onto a new line if\npossible (like this one containing text)</span>, or just go on to a new line\nif not, much like this image will do: <img\nsrc=\"https://mdn.mozillademos.org/files/13360/long.jpg\"></p>\n\nbody {\n width: 500px;\n margin: 0 auto;\n}\n\np {\n background: aqua;\n border: 3px solid blue;\n padding: 10px;\n margin: 10px;\n}\n\nspan {\n background: red;\n border: 1px solid black;\n}\n![\"Basic](\"https://github.com/Laboratoria/curricula-js/blob/441a522e53ff2f34843e1ca740c01ea526fe8c19/03-interactive-site/00-html-and-css/04-positioning-and-floats/img-normal-flow.png?raw=true\")
El propósito de positioning es permitirnos sobrescribir el comportamiento\nnormal del flujo del documento descrito anteriormente, para producir efectos\ninteresantes. ¿Qué pasa si quieres alterar ligeramente la posición de algunas\ncajas dentro de un diseño para dar una sensación ligeramente peculiar y\nangustiada? El posicionamiento es tu herramienta. ¿O si deseas crear una\ninterfaz de usuario donde un elemento flota sobre la parte superior de otras\npartes de la página y/o siempre se sienta en el mismo lugar dentro de la ventana\ndel navegador sin importar cuánto se despliegue la página? El posicionamiento\nhace posible este trabajo de estructura (layout).
\nLa propiedad position de CSS es de las más utilizadas cuando queremos definir\nla ubicación de un elemento dentro de nuestro documento. Ésta especifica el\ntipo de posicionamiento que tendrá el elemento al que afectaremos. Cabe\ndestacar que todo esto varía según las características que tenga el valor de\nposition que pongamos. Es decir, usaremos un valor distinto según cómo\nqueramos posicionar dicho elemento.
El significado de cada uno de los posibles valores de la propiedad position\nes el siguiente:
Es el posicionamiento normal o estático, el cual es aplicado por el navegador\nde forma predefinida a todos los elementos de una página. Esto quiere decir,\nque aparecen según su orden en HTML, y para mostrar cada elemento sólo se\ntiene en cuenta su display (o sea, si está en linea, en bloque, etc).\nNada nuevo :)
Esto es muy similar al posicionamiento estático, excepto que una vez que el\nelemento posicionado ha tomado su lugar en el flujo de disposición normal,\npodemos modificar su posición final (incluso haciendo que se superponga a otros\nelementos en la página) por medio de las propiedades: top, bottom, left y\nright.
Lee más de position relative aquí:
\n\nUn elemento de posición absoluta ya no existe en el flujo normal del documento.\nEl elemento se sienta en su propia capa separada de todo lo demás. Su posición\nse define en relación a los bordes del primer ancestro no-static que tenga.\nSi no tiene ancestros no-static, su posición se define en relación a los\nbordes del body. Al igual que position relative, podemos modificar la\nposición final del elemento por medio de las propiedades: top, bottom,\nleft y right.
Lee más de position absolute aquí:
\n\nEste valor deja fijo al elemento en el documento. Su eje de coordenadas es en\nrelación a la ventana del navegador. Al hacer scroll el elemento siempre se verá\nen el mismo lugar.
\nFixed funciona de la misma manera que el posicionamiento absoluto, con una\ndiferencia clave: mientras que el posicionamiento absoluto fija un elemento en\nsu lugar con respecto al elemento < html > o su antecesor posicionado más cercano\n, el posicionamiento fijo fija un elemento en relación con la propia ventana\ndel navegador.
\nLee más de position fixed aquí:
\n\nFloat es una propiedad de posicionamiento en CSS, es decir, el cómo se ubican\nlos elementos dentro de un documento HTML. Float hace que los elementos se\najusten alrededor ya sea a la derecha o la izquierda. Está inspirado en las\nrevistas donde los textos se ajustan alrededor de las imágenes.
\nLos elementos flotantes siguen siendo parte del flujo del documento. Esto es\nclaramente distinto a los elementos que utilizan posicionamiento absoluto. Los\nelementos de página con posición absoluta se quitan del flujo de la página web.\nLos elementos de página con posición absoluta no afectarán la posición de otros\nelementos y otros elementos no los afectarán, se toquen o no.
\nLee sobre floats aquí
\n\n\nA continuación, la traducción a Español del artículo MDN - Positioning:
\n
Positioning es un tema bastante complejo, por lo que antes de sumergirnos en el\ncódigo vamos a repasar un par de cosas sobre el flujo del documento que hemos\nvisto hasta ahora.
\nEn primer lugar, hemos visto que los elementos individuales son como \"cajas\" que\nse presentan tomando su contenido y añadiéndoles relleno, borde y margen a su\nalrededor - el modelo de la caja que vimos en la lección anterior.
\nTambién hemos visto que, por defecto, el contenido de un elemento de tipo\nbloque es 100% del ancho del elemento padre y tan alto como su contenido.\nPor el contrario, elementos de tipo inline son tan altos y tan amplios como\nsu contenido. No se puede establecer el ancho o la altura para elementos inline
\ndisplay: block;.Eso explica los elementos individuales, pero ¿cómo interactúan los elementos\nentre sí? Hasta ahora hemos visto que el flujo normal (por defecto o de\nmanera predeterminada) es que los elementos de tipo bloque están dispuestos\nverticalmente, uno de debajo del otro: es decir, cada uno aparecerá en una nueva\nlínea debajo de la última y se separarán por cualquier margen que se establezca\nen ellos.
\nLos elementos en línea se comportan de manera diferente: no aparecen en líneas\nnuevas; en su lugar, se sientan en la misma línea que el otro y cualquier\ncontenido de texto adyacente (o envuelto), siempre y cuando haya espacio para\nque lo hagan dentro del ancho del elemento de nivel de bloque padre. Si no hay\nespacio, entonces el texto o los elementos que se desbordan se moverán hacia\nabajo hasta una nueva línea.
\nSi dos elementos adyacentes tienen margen aplicado y los dos márgenes se tocan,\nel más grande de los dos permanece, y el más pequeño desaparece - esto se llama\ncolapso de margen.
\nVeamos un ejemplo:
\n<h1>Basic document flow</h1>\n\n<p>I am a basic block level element. My adjacent block level elements sit on\nnew lines below me.</p>\n\n<p>By default we span 100% of the width of our parent element, and we are as\ntall as our child content. Our total width and height is our content + padding\n+ border width/height.</p>\n\n<p>We are separated by our margins. Because of margin collapsing, we are\nseparated by the width of one of our margins, not both.</p>\n\n<p>inline elements <span>like this one</span> and <span>this one</span> sit on\nthe same line as one another, and adjacent text nodes, if there is space on\nthe same line. Overflowing inline elements will <span>wrap onto a new line if\npossible (like this one containing text)</span>, or just go on to a new line\nif not, much like this image will do: <img\nsrc=\"https://mdn.mozillademos.org/files/13360/long.jpg\"></p>\n\nbody {\n width: 500px;\n margin: 0 auto;\n}\n\np {\n background: aqua;\n border: 3px solid blue;\n padding: 10px;\n margin: 10px;\n}\n\nspan {\n background: red;\n border: 1px solid black;\n}\n
El propósito de positioning es permitirnos sobrescribir el comportamiento\nnormal del flujo del documento descrito anteriormente, para producir efectos\ninteresantes. ¿Qué pasa si quieres alterar ligeramente la posición de algunas\ncajas dentro de un diseño para dar una sensación ligeramente peculiar y\nangustiada? El posicionamiento es tu herramienta. ¿O si deseas crear una\ninterfaz de usuario donde un elemento flota sobre la parte superior de otras\npartes de la página y/o siempre se sienta en el mismo lugar dentro de la ventana\ndel navegador sin importar cuánto se despliegue la página? El posicionamiento\nhace posible este trabajo de estructura (layout).
\nLa propiedad position de CSS es de las más utilizadas cuando queremos definir\nla ubicación de un elemento dentro de nuestro documento. Ésta especifica el\ntipo de posicionamiento que tendrá el elemento al que afectaremos. Cabe\ndestacar que todo esto varía según las características que tenga el valor de\nposition que pongamos. Es decir, usaremos un valor distinto según cómo\nqueramos posicionar dicho elemento.
El significado de cada uno de los posibles valores de la propiedad position\nes el siguiente:
Es el posicionamiento normal o estático, el cual es aplicado por el navegador\nde forma predefinida a todos los elementos de una página. Esto quiere decir,\nque aparecen según su orden en HTML, y para mostrar cada elemento sólo se\ntiene en cuenta su display (o sea, si está en linea, en bloque, etc).\nNada nuevo :)
Esto es muy similar al posicionamiento estático, excepto que una vez que el\nelemento posicionado ha tomado su lugar en el flujo de disposición normal,\npodemos modificar su posición final (incluso haciendo que se superponga a otros\nelementos en la página) por medio de las propiedades: top, bottom, left y\nright.
Lee más de position relative aquí:
\n\nUn elemento de posición absoluta ya no existe en el flujo normal del documento.\nEl elemento se sienta en su propia capa separada de todo lo demás. Su posición\nse define en relación a los bordes del primer ancestro no-static que tenga.\nSi no tiene ancestros no-static, su posición se define en relación a los\nbordes del body. Al igual que position relative, podemos modificar la\nposición final del elemento por medio de las propiedades: top, bottom,\nleft y right.
Lee más de position absolute aquí:
\n\nEste valor deja fijo al elemento en el documento. Su eje de coordenadas es en\nrelación a la ventana del navegador. Al hacer scroll el elemento siempre se verá\nen el mismo lugar.
\nFixed funciona de la misma manera que el posicionamiento absoluto, con una\ndiferencia clave: mientras que el posicionamiento absoluto fija un elemento en\nsu lugar con respecto al elemento < html > o su antecesor posicionado más cercano\n, el posicionamiento fijo fija un elemento en relación con la propia ventana\ndel navegador.
\nLee más de position fixed aquí:
\n\n\nFloat es una propiedad de posicionamiento en CSS, es decir, el cómo se ubican\nlos elementos dentro de un documento HTML. Float hace que los elementos se\najusten alrededor ya sea a la derecha o la izquierda. Está inspirado en las\nrevistas donde los textos se ajustan alrededor de las imágenes.
\n\nLos elementos flotantes siguen siendo parte del flujo del documento. Esto es\nclaramente distinto a los elementos que utilizan posicionamiento absoluto. Los\nelementos de página con posición absoluta se quitan del flujo de la página web.\nLos elementos de página con posición absoluta no afectarán la posición de otros\nelementos y otros elementos no los afectarán, se toquen o no.
\nLee sobre floats aquí
\n\n\n\nEm seguida, a tradução para o português do artigo MDN -\nPosicionamento:
\n
Positioning é um tema muito complexo, portanto, antes de mergulhar no\ncódigo, analisaremos algumas coisas sobre o fluxo do documento que vimos até\nagora.
\nEm primeiro lugar, vimos que os elementos individuais são como \"caixas\" que são\napresentadas tomando seu conteúdo e adicionando preenchimento, borda e margem em\ntorno deles - o modelo da caixa que vimos na lição anterior.
\nTambém vimos que, por padrão, o conteúdo de um elemento de tipo de bloco é\n100% da largura do elemento pai e tão alto quanto seu conteúdo. Pelo contrário,\nos elementos do tipo inline são tão altos e tão amplos quanto seu conteúdo.\nNão é possível definir a largura ou a altura dos elementos inline
\ndisplay: block;.Isso explica os elementos individuais, mas como os elementos interagem uns\ncom os outros? Até agora vimos que o fluxo normal (por padrão ou\nconfigurado) é que o tipo de elementos de bloco são dispostos verticalmente, um\nabaixo do outro, isto é, cada um aparecerá em uma nova linha abaixo da última e\nseparados por qualquer margem estabelecida neles.
\nOs elementos em linha se comportam de maneira diferente: eles não aparecem em\nnovas linhas; em vez disso, eles ficam na mesma linha que o outro e qualquer\nconteúdo de texto adjacente (ou encapsulado), desde que haja espaço para eles\nfazerem isso na largura do elemento de nível de bloco pai. Se não houver espaço,\no texto ou os elementos que transbordarão serão movidos para uma nova linha.
\nSe dois elementos adjacentes tiverem margem aplicada e as duas margens estiverem\nem contato, o maior dos dois permanecerá e o menor desaparecerá - isso é chamado\nde colapso da margem.
\nVejamos um exemplo:
\n<h1>Basic document flow</h1>\n\n<p>I am a basic block level element. My adjacent block level elements sit on\nnew lines below me.</p>\n\n<p>By default we span 100% of the width of our parent element, and we are as\ntall as our child content. Our total width and height is our content + padding\n+ border width/height.</p>\n\n<p>We are separated by our margins. Because of margin collapsing, we are\nseparated by the width of one of our margins, not both.</p>\n\n<p>inline elements <span>like this one</span> and <span>this one</span> sit on\nthe same line as one another, and adjacent text nodes, if there is space on\nthe same line. Overflowing inline elements will <span>wrap onto a new line if\npossible (like this one containing text)</span>, or just go on to a new line\nif not, much like this image will do: <img\nsrc=\"https://mdn.mozillademos.org/files/13360/long.jpg\"></p>\nbody {\n width: 500px;\n margin: 0 auto;\n}\n\np {\n background: aqua;\n border: 3px solid blue;\n padding: 10px;\n margin: 10px;\n}\n\nspan {\n background: red;\n border: 1px solid black;\n}\n![\"Fluxo](\"https://user-images.githubusercontent.com/25912510/58491471-a3543c80-8134-11e9-8ed5-83bc043d0ee2.png\")
O propósito do positioning é nos permitir sobrescrever o comportamento normal\ndo fluxo do documento descrito acima, para produzir efeitos interessantes. E se\nvocê quiser alterar ligeiramente a posição de algumas caixas dentro de um\ndesenho para dar uma sensação um pouco peculiar e angustiada? Positioning é\nsua ferramenta. Ou se você quiser criar uma interface de usuário, na qual um\nelemento flutua em cima de outras partes da página e/ou sempre fica no mesmo\nlugar dentro da janela do navegador, não importa como a página é exibida? O\npositioning faz com que essa estrutura funcione (layout).
\nA propriedade position do CSS é a mais usada quando queremos definir a\nlocalização de um elemento em nosso documento. Ela especifica o tipo de\nposicionamento que o elemento terá. Deve-se notar que tudo isso varia\ndependendo das características que têm o valor position que colocamos. Ou\nseja, usaremos um valor diferente dependendo de como queremos posicionar esse\nelemento.
O significado de cada um dos valores possíveis da propriedade position é o\nseguinte:
É o posicionamento normal ou estático, que é aplicado pelo navegador de uma\nmaneira predefinida a todos os elementos de uma página. Isto significa que eles\naparecem de acordo com a sua ordem em HTML, e para mostrar cada elemento\nconsidera apenas o seu display (ou seja, em linha, bloco, etc.). Nada novo\n:)
É muito semelhante ao posicionamento estático, exceto que uma vez que o elemento\nposicionado tomou o seu lugar no arranjo de fluxo normal, pode modificar a sua\nposição final (inclusive causando sobreposições com outros elementos da\npágina) por meio das propriedades: top, bottom, left e right.
Leia mais sobre a posição relativa aqui:
\n\nUm elemento de posição absoluta não existe mais no fluxo normal do documento. O\nelemento fica em sua própria camada separada de todo o resto. Sua posição é\ndefinida em relação às arestas do primeiro ancestral no-static que ele\npossui. Se você não tiver ancestrais no-static, sua posição será definida em\nrelação às arestas do body. Como posição relative, podemos modificar a\nposição final do elemento por meio das propriedades: top, bottom, left e\nright.
Leia mais da posição absoluta aqui:
\n\nEsse valor deixa o elemento fixo no documento. Seu eixo de coordenadas está\nrelacionado à janela do navegador. Quando você rola, o elemento estará sempre no\nmesmo lugar.
\nFixed funciona da mesma maneira como o posicionamento absolute, com uma\ndiferença fundamental: enquanto o posicionamento absolute fixa um elemento no\nlugar com relação ao <html> ou seu antecessor posicionado mais próximo, o\nelemento fixed fixa em relação à janela do navegador em si.
\nLeia mais da posição fixed aqui:
\n\nFloat é uma propriedade de posicionamento em CSS, ou seja, como os elementos\nestão localizados em um documento HTML. O float faz os elementos se ajustarem à\ndireita ou à esquerda. É inspirado em revistas nas quais os textos se encaixam\nem torno das imagens.
\nElementos flutuantes ainda fazem parte do fluxo de documentos. Isso é claramente\ndiferente dos elementos que usam posicionamento absoluto. Elementos de página\ncom posição absoluta são removidos do fluxo da página da web. Elementos de\npágina com posição absoluta não afetarão a posição de outros elementos e outros\nelementos não os afetarão, sejam eles tocados ou não.
\nLeia sobre os floats\naqui !
" + "body": "\n\nEm seguida, a tradução para o português do artigo MDN -\nPosicionamento:
\n
Positioning é um tema muito complexo, portanto, antes de mergulhar no\ncódigo, analisaremos algumas coisas sobre o fluxo do documento que vimos até\nagora.
\nEm primeiro lugar, vimos que os elementos individuais são como \"caixas\" que são\napresentadas tomando seu conteúdo e adicionando preenchimento, borda e margem em\ntorno deles - o modelo da caixa que vimos na lição anterior.
\nTambém vimos que, por padrão, o conteúdo de um elemento de tipo de bloco é\n100% da largura do elemento pai e tão alto quanto seu conteúdo. Pelo contrário,\nos elementos do tipo inline são tão altos e tão amplos quanto seu conteúdo.\nNão é possível definir a largura ou a altura dos elementos inline
\ndisplay: block;.Isso explica os elementos individuais, mas como os elementos interagem uns\ncom os outros? Até agora vimos que o fluxo normal (por padrão ou\nconfigurado) é que o tipo de elementos de bloco são dispostos verticalmente, um\nabaixo do outro, isto é, cada um aparecerá em uma nova linha abaixo da última e\nseparados por qualquer margem estabelecida neles.
\nOs elementos em linha se comportam de maneira diferente: eles não aparecem em\nnovas linhas; em vez disso, eles ficam na mesma linha que o outro e qualquer\nconteúdo de texto adjacente (ou encapsulado), desde que haja espaço para eles\nfazerem isso na largura do elemento de nível de bloco pai. Se não houver espaço,\no texto ou os elementos que transbordarão serão movidos para uma nova linha.
\nSe dois elementos adjacentes tiverem margem aplicada e as duas margens estiverem\nem contato, o maior dos dois permanecerá e o menor desaparecerá - isso é chamado\nde colapso da margem.
\nVejamos um exemplo:
\n<h1>Basic document flow</h1>\n\n<p>I am a basic block level element. My adjacent block level elements sit on\nnew lines below me.</p>\n\n<p>By default we span 100% of the width of our parent element, and we are as\ntall as our child content. Our total width and height is our content + padding\n+ border width/height.</p>\n\n<p>We are separated by our margins. Because of margin collapsing, we are\nseparated by the width of one of our margins, not both.</p>\n\n<p>inline elements <span>like this one</span> and <span>this one</span> sit on\nthe same line as one another, and adjacent text nodes, if there is space on\nthe same line. Overflowing inline elements will <span>wrap onto a new line if\npossible (like this one containing text)</span>, or just go on to a new line\nif not, much like this image will do: <img\nsrc=\"https://mdn.mozillademos.org/files/13360/long.jpg\"></p>\nbody {\n width: 500px;\n margin: 0 auto;\n}\n\np {\n background: aqua;\n border: 3px solid blue;\n padding: 10px;\n margin: 10px;\n}\n\nspan {\n background: red;\n border: 1px solid black;\n}\n
O propósito do positioning é nos permitir sobrescrever o comportamento normal\ndo fluxo do documento descrito acima, para produzir efeitos interessantes. E se\nvocê quiser alterar ligeiramente a posição de algumas caixas dentro de um\ndesenho para dar uma sensação um pouco peculiar e angustiada? Positioning é\nsua ferramenta. Ou se você quiser criar uma interface de usuário, na qual um\nelemento flutua em cima de outras partes da página e/ou sempre fica no mesmo\nlugar dentro da janela do navegador, não importa como a página é exibida? O\npositioning faz com que essa estrutura funcione (layout).
\nA propriedade position do CSS é a mais usada quando queremos definir a\nlocalização de um elemento em nosso documento. Ela especifica o tipo de\nposicionamento que o elemento terá. Deve-se notar que tudo isso varia\ndependendo das características que têm o valor position que colocamos. Ou\nseja, usaremos um valor diferente dependendo de como queremos posicionar esse\nelemento.
O significado de cada um dos valores possíveis da propriedade position é o\nseguinte:
É o posicionamento normal ou estático, que é aplicado pelo navegador de uma\nmaneira predefinida a todos os elementos de uma página. Isto significa que eles\naparecem de acordo com a sua ordem em HTML, e para mostrar cada elemento\nconsidera apenas o seu display (ou seja, em linha, bloco, etc.). Nada novo\n:)
É muito semelhante ao posicionamento estático, exceto que uma vez que o elemento\nposicionado tomou o seu lugar no arranjo de fluxo normal, pode modificar a sua\nposição final (inclusive causando sobreposições com outros elementos da\npágina) por meio das propriedades: top, bottom, left e right.
Leia mais sobre a posição relativa aqui:
\n\nUm elemento de posição absoluta não existe mais no fluxo normal do documento. O\nelemento fica em sua própria camada separada de todo o resto. Sua posição é\ndefinida em relação às arestas do primeiro ancestral no-static que ele\npossui. Se você não tiver ancestrais no-static, sua posição será definida em\nrelação às arestas do body. Como posição relative, podemos modificar a\nposição final do elemento por meio das propriedades: top, bottom, left e\nright.
Leia mais da posição absoluta aqui:
\n\nEsse valor deixa o elemento fixo no documento. Seu eixo de coordenadas está\nrelacionado à janela do navegador. Quando você rola, o elemento estará sempre no\nmesmo lugar.
\nFixed funciona da mesma maneira como o posicionamento absolute, com uma\ndiferença fundamental: enquanto o posicionamento absolute fixa um elemento no\nlugar com relação ao <html> ou seu antecessor posicionado mais próximo, o\nelemento fixed fixa em relação à janela do navegador em si.
\nLeia mais da posição fixed aqui:
\n\nFloat é uma propriedade de posicionamento em CSS, ou seja, como os elementos\nestão localizados em um documento HTML. O float faz os elementos se ajustarem à\ndireita ou à esquerda. É inspirado em revistas nas quais os textos se encaixam\nem torno das imagens.
\nElementos flutuantes ainda fazem parte do fluxo de documentos. Isso é claramente\ndiferente dos elementos que usam posicionamento absoluto. Elementos de página\ncom posição absoluta são removidos do fluxo da página da web. Elementos de\npágina com posição absoluta não afetarão a posição de outros elementos e outros\nelementos não os afetarão, sejam eles tocados ou não.
\nLeia sobre os floats\naqui !
\n\n" } } }, @@ -136,11 +136,11 @@ "intl": { "es": { "title": "Tipografías, íconos y sprites", - "body": "Es hora de aprender a alterar la fuente (tipografía) de nuestra página web,\nconocer las que el navegador nos trae por defecto y sobretodo ver cómo podemos\nagregar fuentes externas como las de Google Fonts. Para comenzar puedes leer\nel siguiente artículo:
\nhttps://lenguajecss.com/p/css/propiedades/fuentes-y-tipografias
\nAhora que ya sabes más sobre el tema, puedes ver los pasos a seguir para agregar\nfuentes externas desde Google Fonts en el siguiente video:
\n![\"modificando-tipografía-desde-Google-Fonts\"](\"http://img.youtube.com/vi/Qk4lSk3dSV0/0.jpg\")
¿No te ha llamado la atención agregar íconos a tu sitio web? En el siguiente\nenlace aprende cómo agregar íconos como fuentes usando IcoMoon.
\nhttp://www.falconmasters.com/tutoriales/como-utilizar-iconos-sitio-web-css/
\nSi te gustó la idea de añadir íconos, debes de tener en cuenta que IcoMoon no es\nla única opción, puedes encontrar más como:
\n¿Qué otras has encontrado y te gustaría agregar a tu página web?
\nEn ciertas ocasiones, quieres agregar muchas imágenes relacionadas (por ejemplo,\nun menú con banderas de diferentes países); sin embargo, ¿te has puesto a pensar\nqué tedioso sería estar agregando cada imagen de la bandera de cada país? Para\nesto, hay una técnica llamada CSS sprites que te permitirá manejar de una\nmanera más eficiente este tipo de casos. A continuación puedes conocer un poco\nmás del tema en el siguiente enlace:
http://www.pensandoenweb.es/usar-css-sprites-para-crear-un-boton/
\n¿Te quedaron dudas sobre alguno de estos temas? Tal vez algunos de estos posts\nte pueden ayudar a entenderlos mejor:
\n@font-face: Cómo utilizar cualquier fuente/tipografía en tu webEs hora de aprender a alterar la fuente (tipografía) de nuestra página web,\nconocer las que el navegador nos trae por defecto y sobretodo ver cómo podemos\nagregar fuentes externas como las de Google Fonts. Para comenzar puedes leer\nel siguiente artículo:
\nhttps://lenguajecss.com/p/css/propiedades/fuentes-y-tipografias
\nAhora que ya sabes más sobre el tema, puedes ver los pasos a seguir para agregar\nfuentes externas desde Google Fonts en el siguiente video:
\n\n¿No te ha llamado la atención agregar íconos a tu sitio web? En el siguiente\nenlace aprende cómo agregar íconos como fuentes usando IcoMoon.
\nhttp://www.falconmasters.com/tutoriales/como-utilizar-iconos-sitio-web-css/
\nSi te gustó la idea de añadir íconos, debes de tener en cuenta que IcoMoon no es\nla única opción, puedes encontrar más como:
\n¿Qué otras has encontrado y te gustaría agregar a tu página web?
\nEn ciertas ocasiones, quieres agregar muchas imágenes relacionadas (por ejemplo,\nun menú con banderas de diferentes países); sin embargo, ¿te has puesto a pensar\nqué tedioso sería estar agregando cada imagen de la bandera de cada país? Para\nesto, hay una técnica llamada CSS sprites que te permitirá manejar de una\nmanera más eficiente este tipo de casos. A continuación puedes conocer un poco\nmás del tema en el siguiente enlace:
http://www.pensandoenweb.es/usar-css-sprites-para-crear-un-boton/
\n¿Te quedaron dudas sobre alguno de estos temas? Tal vez algunos de estos posts\nte pueden ayudar a entenderlos mejor:
\n@font-face: Cómo utilizar cualquier fuente/tipografía en tu webÉ hora de aprender a alterar a fonte (tipografia) do nosso site, saber o que o\nnavegador nos traz por padrão e ver como podemos adicionar fontes externas, como\no Google Fonts. Para começar, você pode ler os seguintes artigos:
\n\nAgora que você sabe mais sobre o assunto, é possível ver as etapas a seguir para\nadicionar fontes externas do Google Fonts no seguinte vídeo:
\n![\"modificando-tipografia-de-Google-Fonts\"](\"https://img.youtube.com/vi/G78zXwl2Gu8/hqdefault.jpg\")
Já não lhe ocorreu adicionar ícones ao seu site? No vídeo a baixo, você irá\naprender a transformar ícones em fontes com o IconMoon.
\n![\"Icon](\"https://img.youtube.com/vi/3JpPGX9dp7s/hqdefault.jpg\")
Se você gostou da idéia de adicionar ícones, você deve ter em mente que IcoMoon\nnão é a única opção, você pode encontrar mais como:
\nQuais outros você encontrou e gostaria de adicionar à sua página da web?
\nEm certas ocasiões, você vai querer agregar muitas imagens relacionadas (por\nexemplo, um menu com bandeiras de diferentes países). No entanto, já chegou a\npensar que entediante e trabalhoso seria colocar as imagens uma por uma? Para\nisso, existe uma técnica chamada CSS sprites que te permite lidar de uma\nmaneira mais eficiente este tipo de caso.
Aprenda mais sobre CSS sprites nesse\nlink!
\nÉ hora de aprender a alterar a fonte (tipografia) do nosso site, saber o que o\nnavegador nos traz por padrão e ver como podemos adicionar fontes externas, como\no Google Fonts. Para começar, você pode ler os seguintes artigos:
\n\nAgora que você sabe mais sobre o assunto, é possível ver as etapas a seguir para\nadicionar fontes externas do Google Fonts no seguinte vídeo:
\n\nJá não lhe ocorreu adicionar ícones ao seu site? No vídeo a baixo, você irá\naprender a transformar ícones em fontes com o IconMoon.
\n\nSe você gostou da idéia de adicionar ícones, você deve ter em mente que IcoMoon\nnão é a única opção, você pode encontrar mais como:
\nQuais outros você encontrou e gostaria de adicionar à sua página da web?
\nEm certas ocasiões, você vai querer agregar muitas imagens relacionadas (por\nexemplo, um menu com bandeiras de diferentes países). No entanto, já chegou a\npensar que entediante e trabalhoso seria colocar as imagens uma por uma? Para\nisso, existe uma técnica chamada CSS sprites que te permite lidar de uma\nmaneira mais eficiente este tipo de caso.
Aprenda mais sobre CSS sprites nesse\nlink!
\nhtml y a darle estilos con cssAl igual que hemos hecho antes, es hora de aplicar los conceptos aprendidos\npara resolver problemas reales.
\nImagina que estás creando tu primera web interactiva y quieres hacerle un menú\nde navegación. Tu equipo de diseño te ha pasado estos demos para que repliques:
\n![\"Demo](\"https://fotos.subefotos.com/3b523ebdaaa3e207adb555eaa26b8351o.gif\")
![\"Demo](\"https://fotos.subefotos.com/9da8149c853131e7e7282a30c9dc37e6o.gif\")
A continuación, Lulu te explica cómo resolvió este reto:
\n![\"Vertical\"](\"https://img.youtube.com/vi/tk6DAx5Crn4/0.jpg\")
![\"Horizontal\"](\"https://img.youtube.com/vi/2brqbH94z40/0.jpg\")
html y a darle estilos con cssAl igual que hemos hecho antes, es hora de aplicar los conceptos aprendidos\npara resolver problemas reales.
\nImagina que estás creando tu primera web interactiva y quieres hacerle un menú\nde navegación. Tu equipo de diseño te ha pasado estos demos para que repliques:
\n
A continuación, Lulu te explica cómo resolvió este reto:
\nhtml e dar estilos com cssComo já fizemos antes, é hora de aplicar os conceitos aprendidos para resolver\nproblemas reais.
\nImagine que você está criando seu primeiro site interativo e deseja fazer um\nmenu de navegação. Sua equipe de projeto passou essas demonstrações para você\nreplicar:
\n![\"Menu](\"https://user-images.githubusercontent.com/11894994/57671812-b66ef480-75eb-11e9-8c72-802872bfa5df.gif\")
![\"Menu](\"https://user-images.githubusercontent.com/11894994/57671833-c8509780-75eb-11e9-9621-c0b1de81e027.gif\")
Em seguida, o Rafa explica como resolveu esse desafio:
\n![\"Vertical\"](\"https://img.youtube.com/vi/pQcWM9p65EA/0.jpg\")
![\"Horizontal\"](\"https://img.youtube.com/vi/Tyd-iCYSIsw/0.jpg\")
html e dar estilos com cssComo já fizemos antes, é hora de aplicar os conceitos aprendidos para resolver\nproblemas reais.
\nImagine que você está criando seu primeiro site interativo e deseja fazer um\nmenu de navegação. Sua equipe de projeto passou essas demonstrações para você\nreplicar:
\n
Em seguida, o Rafa explica como resolveu esse desafio:
\nEs una técnica introducida en CSS3, que usa la regla @media para incluir un\nbloque de propiedades CSS que se ejecutarán en nuestro sitio solo si las\ncondiciones dadas al @media son verdaderas.
\n![\"Sintaxis](\"http://ptgmedia.pearsoncmg.com/images/chap4_9780321888938/elementLinks/0429b.jpg\")
Los Media Queries están conformadas por Media Types, Media Features\ny el bloque de código a ejecutar si las condiciones entregadas en el media\ntype y el media feature son verdaderas. Todo esto se conecta gracias a los\noperadores lógicos correspondientes.
\n![\"Media](\"https://internetingishard.com/html-and-css/responsive-design/media-query-terms-137d06.png\")
Los media types corresponden a los distintos dispositivos donde se puede\nvisualizar nuestro sitio web. En la siguiente imagen, se pueden ver los\ndistintos media types que pueden ocuparse.
\n![\"Media](\"https://cdn-images-1.medium.com/max/800/1*5hk74pisbfEcsujBYEa1Mw.png\")
Los media features corresponden a la condición que debe cumplir el\ndispositivo y la cual debe ser verdadera para que se aplique el código contenido\nen nuestra media query.
\nLos media features más comunes son los referidos a las dimensiones de pantalla de\ndispositivo, pudiendo establecer el alto y ancho en el que se aplicarán (con height\ny width), o lo que es más interesante, a partir de qué ancho o alto se aplicarán\n(con min/max-width y min/max-height).
\n![\"Media](\"https://github.com/Laboratoria/curricula-js/blob/40a7995144b1a8e93887180484ae5a1d882fb435/04-social-network/00-rwd/02-media-queries/media_feature.png?raw=true\")
Los operadores lógicos son and, not, only y lista separada por comas\n(que funciona como el operador lógico or de Javascript) y se encargan de unir\nnuestros media types a los media features.
\nEl operador and es usado para combinar múltiples media en un solo Media Query,\nrequiriendo que cada función devuelve true para que el media query también lo\nsea. El operador not se utiliza para negar un media query completo y el\noperador only se usa para aplicar un estilo sólo si el query completo es\ncorrecto.
\nUn elemento que es muy importante y que debemos añadir siempre a nuestro sitio\nsi queremos que sea responsive es la etiqueta meta viewport.
\nLa etiqueta viewport nos permite definir el ancho, alto y escala del área usada\npor el navegador para mostrar contenido.
\nAl fijar el ancho o alto del viewport, podemos usar un número fijo de píxeles o\nusar dos constantes, device-width y device-height respectivamente. Se considera\nuna buena práctica configurar el viewport con algunas de estas dos constantes,\nen lugar de utilizar un ancho o alto fijo.
\nLa configuración más común de viewport es la siguiente:
\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1,\nmaximum-scale=1\">\nSus propiedades son las siguientes:
\nwidth: controla el ancho del área de visualización. Puede ser inicializado\na un número concreto de pixels o con el valor especial device-width, que\nindica el ancho total del dispositivo, en píxeles en una escala del 100%.
\ninitial-scale: controla el nivel de zoom inicial al cargarse la página.\nLas propiedades maximum-scale, minimum-scale, y user-scalable controlan cómo\nel usuario puede realizar zoom sobre la página.
\nPuedes profundizar un poco más en Media Queries y Viewport en:
\nAdemás, en tu tiempo libre puedes leer un poco sobre Device Pixel Ratio o\nDPR cómo también se le conoce ;). Aquí la información.
" + "body": "Es una técnica introducida en CSS3, que usa la regla @media para incluir un\nbloque de propiedades CSS que se ejecutarán en nuestro sitio solo si las\ncondiciones dadas al @media son verdaderas.
\n
Los Media Queries están conformadas por Media Types, Media Features\ny el bloque de código a ejecutar si las condiciones entregadas en el media\ntype y el media feature son verdaderas. Todo esto se conecta gracias a los\noperadores lógicos correspondientes.
\n
Los media types corresponden a los distintos dispositivos donde se puede\nvisualizar nuestro sitio web. En la siguiente imagen, se pueden ver los\ndistintos media types que pueden ocuparse.
\n
Los media features corresponden a la condición que debe cumplir el\ndispositivo y la cual debe ser verdadera para que se aplique el código contenido\nen nuestra media query.
\nLos media features más comunes son los referidos a las dimensiones de pantalla de\ndispositivo, pudiendo establecer el alto y ancho en el que se aplicarán (con height\ny width), o lo que es más interesante, a partir de qué ancho o alto se aplicarán\n(con min/max-width y min/max-height).
\n
Los operadores lógicos son and, not, only y lista separada por comas\n(que funciona como el operador lógico or de Javascript) y se encargan de unir\nnuestros media types a los media features.
\nEl operador and es usado para combinar múltiples media en un solo Media Query,\nrequiriendo que cada función devuelve true para que el media query también lo\nsea. El operador not se utiliza para negar un media query completo y el\noperador only se usa para aplicar un estilo sólo si el query completo es\ncorrecto.
\nUn elemento que es muy importante y que debemos añadir siempre a nuestro sitio\nsi queremos que sea responsive es la etiqueta meta viewport.
\nLa etiqueta viewport nos permite definir el ancho, alto y escala del área usada\npor el navegador para mostrar contenido.
\nAl fijar el ancho o alto del viewport, podemos usar un número fijo de píxeles o\nusar dos constantes, device-width y device-height respectivamente. Se considera\nuna buena práctica configurar el viewport con algunas de estas dos constantes,\nen lugar de utilizar un ancho o alto fijo.
\nLa configuración más común de viewport es la siguiente:
\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1,\nmaximum-scale=1\">\nSus propiedades son las siguientes:
\nwidth: controla el ancho del área de visualización. Puede ser inicializado\na un número concreto de pixels o con el valor especial device-width, que\nindica el ancho total del dispositivo, en píxeles en una escala del 100%.
\ninitial-scale: controla el nivel de zoom inicial al cargarse la página.\nLas propiedades maximum-scale, minimum-scale, y user-scalable controlan cómo\nel usuario puede realizar zoom sobre la página.
\nPuedes profundizar un poco más en Media Queries y Viewport en:
\nAdemás, en tu tiempo libre puedes leer un poco sobre Device Pixel Ratio o\nDPR cómo también se le conoce ;). Aquí la información.
" }, "pt": { "title": "Media Queries e Viewport", @@ -281,11 +281,11 @@ "intl": { "es": { "title": "Responsive Web Design", - "body": "Responsive Web Design se trata de una técnica de diseño y desarrollo web por\nel que se consigue que un único sitio se adapte perfectamente a todos los\ndispositivos desde ordenadores de escritorio a tablets, teléfonos móviles, etc.
\n¿Cómo hace esto? Utilizando HTML y CSS para cambiar el tamaño, ocultar, reducir,\nampliar o mover el contenido para que se vea bien en cualquier pantalla.
\n![\"Ejemplo](\"https://designmodo.com/wp-content/uploads/2011/10/4.jpg\")
Los elementos básicos necesarios para contruir una página con Responsive Web\nDesign, son al menos los tres siguientes:
\nLas ventajas de utilizar Responsive Web Design son:
\nCon una sola versión en HTML y CSS se cubren todas las resoluciones de\npantalla, es decir, el sitio web creado estará optimizado para todo tipo de\ndispositivos. Esto mejora la experiencia de usuario a diferencia de lo que\nocurre, por ejemplo, con sitios web de ancho fijo cuando se acceden desde\ndispositivos móviles.
\nEficiencia en la actualización. El sitio solo se debe actualizar una vez y se\nve reflejado en todas las plataformas. Cuando tenemos los portales\nindependientes para Web y Mobile se debe realizar la actualización dos veces\nlo que crea la necesidad de mayor cantidad de recursos y posibilidad de error.
\nPuedes conocer un poco más sobre Responsive Web Design en los siguientes links:
\nResponsive Web Design se trata de una técnica de diseño y desarrollo web por\nel que se consigue que un único sitio se adapte perfectamente a todos los\ndispositivos desde ordenadores de escritorio a tablets, teléfonos móviles, etc.
\n¿Cómo hace esto? Utilizando HTML y CSS para cambiar el tamaño, ocultar, reducir,\nampliar o mover el contenido para que se vea bien en cualquier pantalla.
\n
Los elementos básicos necesarios para contruir una página con Responsive Web\nDesign, son al menos los tres siguientes:
\nLas ventajas de utilizar Responsive Web Design son:
\nCon una sola versión en HTML y CSS se cubren todas las resoluciones de\npantalla, es decir, el sitio web creado estará optimizado para todo tipo de\ndispositivos. Esto mejora la experiencia de usuario a diferencia de lo que\nocurre, por ejemplo, con sitios web de ancho fijo cuando se acceden desde\ndispositivos móviles.
\nEficiencia en la actualización. El sitio solo se debe actualizar una vez y se\nve reflejado en todas las plataformas. Cuando tenemos los portales\nindependientes para Web y Mobile se debe realizar la actualización dos veces\nlo que crea la necesidad de mayor cantidad de recursos y posibilidad de error.
\nPuedes conocer un poco más sobre Responsive Web Design en los siguientes links:
\nWeb Design Responsivo se trata de uma técnica de projeto e desenvolvimento web\npelo qual se consegue que um único site se adapte perfeitamente a todos os\ndispositivos como computadores de mesa, tablets, smartphones, etc.
\nComo se faz isto? Utilizando HTML e CSS para trocar o tamanho, ocultar, reduzir,\nampliar ou mover o conteúdo para que se veja corretamente em qualquer tela.
\nOs elementos básicos necessários para construir uma página com Web Design\nResponsivo são ao menos os três a seguir:
\nAs vantagens de utilizar um Web Design Responsivo são:
\nCom só uma versão em HTML e CSS são atendidas todas as resoluções de tela, ou\nseja, o site criado estará otimizado para todo tipo de dispositivo. Isso\nmelhora a experiência do usuário que acessa sites com largura fixa, por\ndispositivos móveis.
\nEficiência na atualização, o site só precisa ser atualizado uma vez e\nfuncionará em todas as plataformas. Quando temos os portais independentes para\nWeb e Mobile é necessária a atualização duas vezes, o que cria uma necessidade\nmaior de recursos e maior possibilidade de erros.
\nVocê pode conhecer um pouco mais sobre Web Design Responsivo nos links a seguir:
\nWeb Design Responsivo se trata de uma técnica de projeto e desenvolvimento web\npelo qual se consegue que um único site se adapte perfeitamente a todos os\ndispositivos como computadores de mesa, tablets, smartphones, etc.
\nComo se faz isto? Utilizando HTML e CSS para trocar o tamanho, ocultar, reduzir,\nampliar ou mover o conteúdo para que se veja corretamente em qualquer tela.
\nOs elementos básicos necessários para construir uma página com Web Design\nResponsivo são ao menos os três a seguir:
\nAs vantagens de utilizar um Web Design Responsivo são:
\nCom só uma versão em HTML e CSS são atendidas todas as resoluções de tela, ou\nseja, o site criado estará otimizado para todo tipo de dispositivo. Isso\nmelhora a experiência do usuário que acessa sites com largura fixa, por\ndispositivos móveis.
\nEficiência na atualização, o site só precisa ser atualizado uma vez e\nfuncionará em todas as plataformas. Quando temos os portais independentes para\nWeb e Mobile é necessária a atualização duas vezes, o que cria uma necessidade\nmaior de recursos e maior possibilidade de erros.
\nVocê pode conhecer um pouco mais sobre Web Design Responsivo nos links a seguir:
\nA continuación tienes algunos ejercicios para practicar, te sugerimos\nque intentes resolver los ejercicios por tu cuenta (o en equipo). Así, ya\nestarás familiarizada con los retos. Quizás, puedas tú presentar tu solución\nante la clase y así ayudar al resto de tus compañeras :)
\nDebes subir todos tus ejercicios a GitHub y publicarlos en gh-pages.
Tomando como base la imagen de abajo, replíca la estructura de grid usando las\ndiferentes columnas que nos da un framework.
\n![\"grid\"](\"https://raw.githubusercontent.com/Laboratoria/curricula-js/3f8afb2f9db271342808d21647911c1de5c7d19f/04-social-network/00-rwd/06-guided-exercises/ejercicio-grid-gral.png\")
Ahora que ya sabes hacer una grid en desktop, vamos a hacer un reto más\ndivertido. Te damos tres retos, en cada imagen vas a ver dos versiones: desktop\n(a la izquierda ) y mobile (a la derecha).
\nReplica la estructura desktop y modifícala a mobile como la imagen te lo dice,\n¡tú puedes!
\n![\"desktop](\"https://raw.githubusercontent.com/Laboratoria/curricula-js/3f8afb2f9db271342808d21647911c1de5c7d19f/04-social-network/00-rwd/06-guided-exercises/ex-desktop-mobile.png\")
![\"desktop](\"https://raw.githubusercontent.com/Laboratoria/curricula-js/3f8afb2f9db271342808d21647911c1de5c7d19f/04-social-network/00-rwd/06-guided-exercises/ex-desktop-mobile2.png\")
![\"desktop](\"https://raw.githubusercontent.com/Laboratoria/curricula-js/3f8afb2f9db271342808d21647911c1de5c7d19f/04-social-network/00-rwd/06-guided-exercises/ex-desktop-mobile3.png\")
Crea una página web para amantes de los pandas. Puedes obtener las imágenes en\neste enlace.
\n![\"Love](\"https://raw.githubusercontent.com/Laboratoria/curricula-js/a5233dee21c1cb455bc0c044ad4eb0f6b906f960/04-social-network/00-rwd/05-guided-exercises/love-love-panda.png\")
Replica las siguientes vistas poniendo en práctica tus conocimientos de grid system. Puedes obtener las fotografías en este enlace
![\"Rock](\"https://raw.githubusercontent.com/Laboratoria/curricula-js/a5233dee21c1cb455bc0c044ad4eb0f6b906f960/04-social-network/00-rwd/05-guided-exercises/rock-desktop.png\")
![\"Rock](\"https://raw.githubusercontent.com/Laboratoria/curricula-js/a5233dee21c1cb455bc0c044ad4eb0f6b906f960/04-social-network/00-rwd/05-guided-exercises/rock-movil.png\")
Puedes ver el siguiente video para saber cómo crear y utilizar un grid system:
\n![\"Creando](\"https://img.youtube.com/vi/uUGHF0dM6GA/0.jpg\")
A continuación tienes algunos ejercicios para practicar, te sugerimos\nque intentes resolver los ejercicios por tu cuenta (o en equipo). Así, ya\nestarás familiarizada con los retos. Quizás, puedas tú presentar tu solución\nante la clase y así ayudar al resto de tus compañeras :)
\nDebes subir todos tus ejercicios a GitHub y publicarlos en gh-pages.
Tomando como base la imagen de abajo, replíca la estructura de grid usando las\ndiferentes columnas que nos da un framework.
\n
Ahora que ya sabes hacer una grid en desktop, vamos a hacer un reto más\ndivertido. Te damos tres retos, en cada imagen vas a ver dos versiones: desktop\n(a la izquierda ) y mobile (a la derecha).
\nReplica la estructura desktop y modifícala a mobile como la imagen te lo dice,\n¡tú puedes!
\n
Crea una página web para amantes de los pandas. Puedes obtener las imágenes en\neste enlace.
\n
Replica las siguientes vistas poniendo en práctica tus conocimientos de grid system. Puedes obtener las fotografías en este enlace
Puedes ver el siguiente video para saber cómo crear y utilizar un grid system:
\n" }, "pt": { "title": "Exercícios Livres", - "body": "Aqui estão alguns exercícios para você praticar, sugerimos que tenta resolver\neles sozinha ou em grupo. Assim, você ficará familiarizada com os desafios. E\nse quiser pode apresentar a sua solução para a sala e ajudar as suas\ncompanheiras 😁
\nVocê deve super o seu exercício para o GitHub e publicar no gh-pages.
Tomando como base a imagem abaixo, replique a estrutura de grid.
\n
Agora que você sabe fazer uma grid no desktop, vamos fazer um desafio mais\ndivertido. Apresentamos três desafios. Em cada imagem, verá duas versões:\ndesktop (à esquerda) e mobile (à direita).
\nReplique a estrutura desktop e modifique-a para mobile como a imagem indica. Você\nconsegue!
\n
Crie uma página web para os amantes dos pandas. Para obter as imagens use este\nlink.
\n
Replique as imagens a seguir colocando em prática seus conhecimentos de grid system. Para obter as imagens este\nlink
No vídeo abaixo você irá ver como usar o CSS grid:
\n![\"CSS\ngrid\"](\"https://img.youtube.com/vi/TIsxYzen6Ws/0.jpg\")
Aqui estão alguns exercícios para você praticar, sugerimos que tenta resolver\neles sozinha ou em grupo. Assim, você ficará familiarizada com os desafios. E\nse quiser pode apresentar a sua solução para a sala e ajudar as suas\ncompanheiras 😁
\nVocê deve super o seu exercício para o GitHub e publicar no gh-pages.
Tomando como base a imagem abaixo, replique a estrutura de grid.
\n
Agora que você sabe fazer uma grid no desktop, vamos fazer um desafio mais\ndivertido. Apresentamos três desafios. Em cada imagem, verá duas versões:\ndesktop (à esquerda) e mobile (à direita).
\nReplique a estrutura desktop e modifique-a para mobile como a imagem indica. Você\nconsegue!
\n
Crie uma página web para os amantes dos pandas. Para obter as imagens use este\nlink.
\n
Replique as imagens a seguir colocando em prática seus conhecimentos de grid system. Para obter as imagens este\nlink
No vídeo abaixo você irá ver como usar o CSS grid:
\n" } }, "challenges": [] @@ -361,11 +361,11 @@ "intl": { "es": { "title": "Frameworks", - "body": "Antes que nada debemos tener claro que existen frameworks tan variados como\nsabores de helados. Hay frameworks para JavaScript, para CSS, para PHP, etc.
\nLos frameworks se definen como un conjunto estandarizado de conceptos, prácticas\ny criterios (marco de trabajo); que sirven de referencia para resolver problemas\nsemejantes(¡como los popups que avisan cuando una compra es exitosa!).
\nLos frameworks sirven como esqueletos que puedes modificar para obtener los\nresultados que deseas. Te dan las herramientas y también te dicen la forma\ncorrecta de utilizarlas.
\nPor ahora nos vamos a enfocar en los frameworks CSS, que son un conjunto de\nherramientas preprogramadas de estilos genéricos que podemos usar para\ndesarrollar nuestros sitios de una manera más sencilla, rápida y responsive.
Porque a veces hacer estructuras con CSS puede ser algo complicado y toma mucho\ntiempo trabajar sus estilos, los frameworks aparecen allí para acortar un poco\nel tiempo y esfuerzo de creación, después de todo ¿Por qué reinventar la rueda,\nsi puedes diseñar un mejor auto?
\nEso no significa que son un sustituto para entender CSS o que ya no\nocuparemos CSS en nuestros proyectos, al contrario, ¡nos sobrará más\ntiempo para tener diseños y estilos increíbles y totalmente personalizados\ny conocer mucho mejor CSS!
\nAquí te dejamos unos vídeos introductorios a algunos frameworks:
\nAlgunas de las herramientas que podemos encontrar en los frameworks de CSS son:
\n![\"componentes](\"https://lh3.googleusercontent.com/-VklSSe3lPpE/WXeOFf__wqI/AAAAAAAAGbI/RnPVJQHJbDoc-NHkJYSGzE-jBtYXMjL2QCLcBGAs/s620/bootstrap-02.png\")
\n\nUsar un framework es solo una buena idea si hace lo que quieres que tu sitio\nhaga.
\n
Algunos de los frameworks más conocidos son:
\n\n\n" + "body": "Lee la documentación de estos frameworks y practica los componentes que\nprefieras,así te volverás una master en frameworks CSS y crearás increíbles\nproductos en poco tiempo.
\n
Antes que nada debemos tener claro que existen frameworks tan variados como\nsabores de helados. Hay frameworks para JavaScript, para CSS, para PHP, etc.
\nLos frameworks se definen como un conjunto estandarizado de conceptos, prácticas\ny criterios (marco de trabajo); que sirven de referencia para resolver problemas\nsemejantes(¡como los popups que avisan cuando una compra es exitosa!).
\nLos frameworks sirven como esqueletos que puedes modificar para obtener los\nresultados que deseas. Te dan las herramientas y también te dicen la forma\ncorrecta de utilizarlas.
\nPor ahora nos vamos a enfocar en los frameworks CSS, que son un conjunto de\nherramientas preprogramadas de estilos genéricos que podemos usar para\ndesarrollar nuestros sitios de una manera más sencilla, rápida y responsive.
Porque a veces hacer estructuras con CSS puede ser algo complicado y toma mucho\ntiempo trabajar sus estilos, los frameworks aparecen allí para acortar un poco\nel tiempo y esfuerzo de creación, después de todo ¿Por qué reinventar la rueda,\nsi puedes diseñar un mejor auto?
\nEso no significa que son un sustituto para entender CSS o que ya no\nocuparemos CSS en nuestros proyectos, al contrario, ¡nos sobrará más\ntiempo para tener diseños y estilos increíbles y totalmente personalizados\ny conocer mucho mejor CSS!
\nAquí te dejamos unos vídeos introductorios a algunos frameworks:
\nAlgunas de las herramientas que podemos encontrar en los frameworks de CSS son:
\n
\n\nUsar un framework es solo una buena idea si hace lo que quieres que tu sitio\nhaga.
\n
Algunos de los frameworks más conocidos son:
\n\n\n" }, "pt": { "title": "Frameworks", - "body": "Lee la documentación de estos frameworks y practica los componentes que\nprefieras,así te volverás una master en frameworks CSS y crearás increíbles\nproductos en poco tiempo.
\n
Primeiramente devemos ter claro que existem frameworks tão variados como\nsabores de sorvete. Existem frameworks para JavaScript, para CSS, para PHP, etc.
\nOs frameworks são definidos como um conjunto padrão de conceitos, práticas e\ncritérios (quadro de trabalho) que servem de referência para resolver problemas\nsemelhantes (como os popups que avisam quando uma compra foi feita com\nsucesso!).
\nOs frameworks servem como esqueletos que você pode modificar para obter os\nresultados que deseja. Eles fornecem ferramentas e também dizem a forma correta\nde utilizá-las.
\nPor enquanto vamos nos focar nos frameworks CSS, que são um conjunto de\nferramentas pré-programadas de estilos genéricos que podemos implementar\npara desenvolver nossos sítios web de uma maneira mais simples, rápida e\nresponsiva.
Porque às vezes fazer estruturas com CSS pode ser algo complicado e toma muito\ntempo trabalhar seus estilos. Os frameworks surgem então para reduzir o tempo e\nesforço de criação e responder à pergunta _Por que reinventar a roda se você\npode projetar um carro melhor?
\nIsso não significa que são substitutos para entender CSS ou que não mexeremos\ncom CSS em nosso projetos. Ao contrário, sobrará mais tempo para termos projetos\ne estilos incríveis e totalmente personalizados, e conhecer muito melhor CSS!
\nAqui deixamos alguns vídeos introdutórios a alguns frameworks.
\nAlgumas das ferramentas que podemos encontrar nos frameworks de CSS são:
\n“Resetar” os estilos padrão que os navegadores aplicam.
\nManipular corretamente os textos, conseguindo assim que todos os conteúdos se\nvisualizem exatamente iguais em navegadores diferentes e que se adaptem a\neles.
\nCriar leiautes de maneira simples garantindo que funcionará e será visualizado\ncorretamente em qualquer versão de qualquer navegador existente.
\n\n\nUtilizar um framework só é uma boa ideia se ele faz o que você quer no sítio\nque você fizer.
\n
Alguns dos frameworks mais conhecidos são:
\n\n\n" + "body": "Leia a documentação desses frameworks e pratique os componentes que preferir.\nDessa maneira, você será uma mestre em frameworks CSS e criará produtos\nincríveis em pouco tempo.
\n
Primeiramente devemos ter claro que existem frameworks tão variados como\nsabores de sorvete. Existem frameworks para JavaScript, para CSS, para PHP, etc.
\nOs frameworks são definidos como um conjunto padrão de conceitos, práticas e\ncritérios (quadro de trabalho) que servem de referência para resolver problemas\nsemelhantes (como os popups que avisam quando uma compra foi feita com\nsucesso!).
\nOs frameworks servem como esqueletos que você pode modificar para obter os\nresultados que deseja. Eles fornecem ferramentas e também dizem a forma correta\nde utilizá-las.
\nPor enquanto vamos nos focar nos frameworks CSS, que são um conjunto de\nferramentas pré-programadas de estilos genéricos que podemos implementar\npara desenvolver nossos sítios web de uma maneira mais simples, rápida e\nresponsiva.
Porque às vezes fazer estruturas com CSS pode ser algo complicado e toma muito\ntempo trabalhar seus estilos. Os frameworks surgem então para reduzir o tempo e\nesforço de criação e responder à pergunta _Por que reinventar a roda se você\npode projetar um carro melhor?
\nIsso não significa que são substitutos para entender CSS ou que não mexeremos\ncom CSS em nosso projetos. Ao contrário, sobrará mais tempo para termos projetos\ne estilos incríveis e totalmente personalizados, e conhecer muito melhor CSS!
\nAqui deixamos alguns vídeos introdutórios a alguns frameworks.
\nAlgumas das ferramentas que podemos encontrar nos frameworks de CSS são:
\n“Resetar” os estilos padrão que os navegadores aplicam.
\nManipular corretamente os textos, conseguindo assim que todos os conteúdos se\nvisualizem exatamente iguais em navegadores diferentes e que se adaptem a\neles.
\nCriar leiautes de maneira simples garantindo que funcionará e será visualizado\ncorretamente em qualquer versão de qualquer navegador existente.
\n\n\nUtilizar um framework só é uma boa ideia se ele faz o que você quer no sítio\nque você fizer.
\n
Alguns dos frameworks mais conhecidos são:
\n\n\n" } } }, @@ -381,7 +381,7 @@ }, "pt": { "title": "Bootstrap", - "body": "Leia a documentação desses frameworks e pratique os componentes que preferir.\nDessa maneira, você será uma mestre em frameworks CSS e criará produtos\nincríveis em pouco tempo.
\n
Bootstrap é um incrível framework que torna o desenvolvimento web front-end muito\nmais rápido e mais fácil.
\nInicialmente foi criado como uma solução interna para o Twitter e posteriormente\nfoi liberado ao público em agosto de 2011 como um projeto open source no\nGitHub.
\nFoi feito para que possa ser utilizado por pessoas de todos os níveis, por\ndispositivos de todas as formas e projetos de todos os tamanhos.
\nBootstrap tem várias versões. A mais popular é a versão 4 e é a que\naprenderemos. Podemos encontrar o Bootstrap aqui.
\nPodemos utilizar o Bootstrap em nossos projetos de diferentes formas, seja\nadicionando o código CDN ao nosso HTML para usá-lo de maneira remota ou baixando\no Bootstrap na sua página web.
\n![\"Bootstrap\"](\"https://raw.githubusercontent.com/Laboratoria/curricula-js/c6232fc0a639688fc216c72d17e325a588abae9d/04-social-network/01-css-frameworks/02-bootstrap/bcdn.png\")
Se utilizarmos as opções de baixar o Bootstrap, devemos descompactar e adicionar\nos arquivos do framework ao projeto. Além disso, devemos linkar todos no HTML\npara que funcione.
\nFalando em CDN, precisamos entender: O que é CDN?
\nImagine que você queira usar o CSS de Bootstrap ou de alguma outra biblioteca.\nPoderíamos simplesmente baixar o arquivo .css ou .js e adicioná-lo a nosso HTML.\nMas, o que acontece se esse arquivo NÃO está no nosso computador e sim em\nalgum lugar da internet?
\nQuando temos o arquivo em algum lugar da internet, na verdade está em outro\ncomputador em algum lugar do mundo.
\nO que acontecerá se este computador estiver no outro lado do mundo? Na China?\nCoreia?
\nVocê acha que a distância do nosso computador (que vai utilizar o arquivo) e o\ncomputador que tem o arquivo afeta o carregamento da página?
\nSim, afeta muito.
\nIsto é porque conectar-se a um computador do outro lado do mundo é mais demorado\nque conectar-se ao computador que está ao nosso lado.
\nCDN significa Content Delivery Network (Rede de distribuição de conteúdo).
\nImaginemos que o computador que tem o arquivo bootstrap.css está inicialmente na\nChina.
\nUtilizando a CDN você não vai se conectar à China.
\nVocê se conecta a algum lugar mais próximo. Como os Estado Unidos.
\nAnalise a imagem a seguir:
\nSe estiver na África, não se conecta à Europa. Conecta-se à África.
\nSe estiver na Austrália, não se conecta à Europa. Conecta-se à Austrália.
\nIsto faz com que os arquivos demorem menos para carregar (e sua página\ntambém).
\nSigamos com Bootstrap.
\nAgora sim, já que está adicionado ao nosso projeto, podemos começar a testar um\npouco de tudo o que nos oferece:
\nUma grid, ícones, botões, barras de navegação, etc.
\nA grid de Bootstrap é composta por 12 colunas e conta com os elementos típicos\nde um grid system (como rows e columns). Também possui tipos de\ncontêineres (container-fluid e container) e colunas para diferentes tamanhos\nde telas.
\n| Classe | Dispositivo | Medida |\n| :-------: | :------: | :-----: |\n| col-xs- | móvel | < 768 px |\n| col-sm- | tablets | >= 768 px|\n| col-md- | desktop | >= 992 px |\n| col-lg- | Desktop maior| >= 1200 px |
\nAlém da grid e do que mencionamos antes, Bootstrap conta com muitos componentes\nque podemos reutilizar todas as vezes que sejam necessários.
\nPara utilizar o que já nos oferece nosso framework, só necessitamos ir à sua\npágina, procurar o componente que queremos utilizar e copiar e colar em nosso\nHTML o código.
\n![\"Bootstrap-btn\"](\"https://raw.githubusercontent.com/Laboratoria/curricula-js/f659ee55eeb322341c314d7d080bb22468e9a576/04-social-network/01-css-frameworks/02-bootstrap/btn-example.PNG\")
E assim fácil e maravilhosamente já temos nossos botões.
\nSe quisermos saber um pouco mais sobre Bootstrap e como funciona\naqui\nhá uma série de vídeos, mas sempre é mais divertido testá-lo nós mesmas.
" + "body": "Bootstrap é um incrível framework que torna o desenvolvimento web front-end muito\nmais rápido e mais fácil.
\nInicialmente foi criado como uma solução interna para o Twitter e posteriormente\nfoi liberado ao público em agosto de 2011 como um projeto open source no\nGitHub.
\nFoi feito para que possa ser utilizado por pessoas de todos os níveis, por\ndispositivos de todas as formas e projetos de todos os tamanhos.
\nBootstrap tem várias versões. A mais popular é a versão 4 e é a que\naprenderemos. Podemos encontrar o Bootstrap aqui.
\nPodemos utilizar o Bootstrap em nossos projetos de diferentes formas, seja\nadicionando o código CDN ao nosso HTML para usá-lo de maneira remota ou baixando\no Bootstrap na sua página web.
\n
Se utilizarmos as opções de baixar o Bootstrap, devemos descompactar e adicionar\nos arquivos do framework ao projeto. Além disso, devemos linkar todos no HTML\npara que funcione.
\nFalando em CDN, precisamos entender: O que é CDN?
\nImagine que você queira usar o CSS de Bootstrap ou de alguma outra biblioteca.\nPoderíamos simplesmente baixar o arquivo .css ou .js e adicioná-lo a nosso HTML.\nMas, o que acontece se esse arquivo NÃO está no nosso computador e sim em\nalgum lugar da internet?
\nQuando temos o arquivo em algum lugar da internet, na verdade está em outro\ncomputador em algum lugar do mundo.
\nO que acontecerá se este computador estiver no outro lado do mundo? Na China?\nCoreia?
\nVocê acha que a distância do nosso computador (que vai utilizar o arquivo) e o\ncomputador que tem o arquivo afeta o carregamento da página?
\nSim, afeta muito.
\nIsto é porque conectar-se a um computador do outro lado do mundo é mais demorado\nque conectar-se ao computador que está ao nosso lado.
\nCDN significa Content Delivery Network (Rede de distribuição de conteúdo).
\nImaginemos que o computador que tem o arquivo bootstrap.css está inicialmente na\nChina.
\nUtilizando a CDN você não vai se conectar à China.
\nVocê se conecta a algum lugar mais próximo. Como os Estado Unidos.
\nAnalise a imagem a seguir:
\nSe estiver na África, não se conecta à Europa. Conecta-se à África.
\nSe estiver na Austrália, não se conecta à Europa. Conecta-se à Austrália.
\nIsto faz com que os arquivos demorem menos para carregar (e sua página\ntambém).
\nSigamos com Bootstrap.
\nAgora sim, já que está adicionado ao nosso projeto, podemos começar a testar um\npouco de tudo o que nos oferece:
\nUma grid, ícones, botões, barras de navegação, etc.
\nA grid de Bootstrap é composta por 12 colunas e conta com os elementos típicos\nde um grid system (como rows e columns). Também possui tipos de\ncontêineres (container-fluid e container) e colunas para diferentes tamanhos\nde telas.
\n| Classe | Dispositivo | Medida |\n| :-------: | :------: | :-----: |\n| col-xs- | móvel | < 768 px |\n| col-sm- | tablets | >= 768 px|\n| col-md- | desktop | >= 992 px |\n| col-lg- | Desktop maior| >= 1200 px |
\nAlém da grid e do que mencionamos antes, Bootstrap conta com muitos componentes\nque podemos reutilizar todas as vezes que sejam necessários.
\nPara utilizar o que já nos oferece nosso framework, só necessitamos ir à sua\npágina, procurar o componente que queremos utilizar e copiar e colar em nosso\nHTML o código.
\n
E assim fácil e maravilhosamente já temos nossos botões.
\nSe quisermos saber um pouco mais sobre Bootstrap e como funciona\n\nhá uma série de vídeos, mas sempre é mais divertido testá-lo nós mesmas.
" } } }, @@ -393,11 +393,11 @@ "intl": { "es": { "title": "Materialize y otros", - "body": "Bootstrap no podía ser el único framework en existir. Aquí veremos otros que\nson bastante populares y fuertes competidores de Bootstrap:
\n![\"Materializecss\"](\"https://i.pinimg.com/originals/11/32/de/1132de743af11b94448b08e4e69e7bdf.jpg\")
Materialize es un framework de CSS basado en Material Design. Cuenta con\nuna serie de herramientas y componentes predefinidos como modales, botones,\nmenús, formularios, preloaders entre otros. Además posee un sistema de grillas\nque facilita el desarrollo para distintos tamaños y dispositivos e integra la\nfuente Roboto propuesta por Google en su estilo de diseño.
\nMaterialize también posee cuatro tipos diferentes\nde columnas: s, m, l y xl.
\n![\"Foundation\"](\"https://i3.ytimg.com/vi/lFrpnk0Oo_8/maxresdefault.jpg\")
Foundation es un framework responsive que incluye componentes de\ntipografía, formularios, botones, barras de navegación y otros, así como\nextensiones de Javascript opcionales. Foundation\nestá mantenida por zurb.com y es un proyecto de código abierto.\nFoundation también posee un framework para email responsive.
\nAquí es a consideración de cada una y la única manera de saber cuál nos\nfunciona o gusta más es haciendo uso de ellos. Probar y variar, a prueba y\nerror!
\nSi quieres practicar un poco sobre como funcionan estos 2 frameworks, acá te\ndejamos unos pequeños cursos que podrás hacer en tu tiempo libre ;)
\nBootstrap no podía ser el único framework en existir. Aquí veremos otros que\nson bastante populares y fuertes competidores de Bootstrap:
\n
Materialize es un framework de CSS basado en Material Design. Cuenta con\nuna serie de herramientas y componentes predefinidos como modales, botones,\nmenús, formularios, preloaders entre otros. Además posee un sistema de grillas\nque facilita el desarrollo para distintos tamaños y dispositivos e integra la\nfuente Roboto propuesta por Google en su estilo de diseño.
\nMaterialize también posee cuatro tipos diferentes\nde columnas: s, m, l y xl.
\n
Foundation es un framework responsive que incluye componentes de\ntipografía, formularios, botones, barras de navegación y otros, así como\nextensiones de Javascript opcionales. Foundation\nestá mantenida por zurb.com y es un proyecto de código abierto.\nFoundation también posee un framework para email responsive.
\nAquí es a consideración de cada una y la única manera de saber cuál nos\nfunciona o gusta más es haciendo uso de ellos. Probar y variar, a prueba y\nerror!
\nSi quieres practicar un poco sobre como funcionan estos 2 frameworks, acá te\ndejamos unos pequeños cursos que podrás hacer en tu tiempo libre ;)
\nBootstrap não poderia ser o único framework a existir. Aqui veremos outros que\nsão bastante populares e fortes competidores de Bootstrap:
\nMaterialize é um framework de CSS baseado em Material Design. Com uma\nsérie de ferramentas e componentes predefinidos como boas práticas, botões,\nmenus, formulários entre outros. Ele também tem um sistema de grid que\nfacilita o desenvolvimento para diferentes tamanhos e dispositivos e integra o\nfonte Roboto proposto pelo Google em seu estilo de projeto.
\nMaterialize também possui quatro tipos diferentes\nde colunas: s, m, l y, xl.
\nFoundation é um framework responsivo que inclui componentes de tipografia,\nformulários, botões, barras de navegação e outros, assim como extensões\nJavascript opcionais. Foundation é mantida por\nzurb.com e é um projeto de código aberto. Foundation também possui um framework\npara e-mail responsivo.
\nAqui é uma escolha de cada uma e a única maneira de saber qual nos funciona ou\ngostamos mais é fazendo uso deles. Testar e variar, testar e errar!
\nSe quiser praticar um pouco sobre como funcionam esses dois frameworks, aqui\ndeixamos pequenos cursos que poderá fazer em seu tempo livre
\nBootstrap não poderia ser o único framework a existir. Aqui veremos outros que\nsão bastante populares e fortes competidores de Bootstrap:
\nMaterialize é um framework de CSS baseado em Material Design. Com uma\nsérie de ferramentas e componentes predefinidos como boas práticas, botões,\nmenus, formulários entre outros. Ele também tem um sistema de grid que\nfacilita o desenvolvimento para diferentes tamanhos e dispositivos e integra o\nfonte Roboto proposto pelo Google em seu estilo de projeto.
\nMaterialize também possui quatro tipos diferentes\nde colunas: s, m, l y, xl.
\nFoundation é um framework responsivo que inclui componentes de tipografia,\nformulários, botões, barras de navegação e outros, assim como extensões\nJavascript opcionais. Foundation é mantida por\nzurb.com e é um projeto de código aberto. Foundation também possui um framework\npara e-mail responsivo.
\nAqui é uma escolha de cada uma e a única maneira de saber qual nos funciona ou\ngostamos mais é fazendo uso deles. Testar e variar, testar e errar!
\nSe quiser praticar um pouco sobre como funcionam esses dois frameworks, aqui\ndeixamos pequenos cursos que poderá fazer em seu tempo livre
\nLas funciones puras tienen aplicaciones en muchos ámbitos, entre ellos la\nprogramación funcional. También facilitan la concurrencia, y como veremos en\nsiguientes etapas serán muy empleadas en aplicaciones basadas en React+Redux.
\nAnteriormente mencionamos que una función es básicamente un proceso que toma una\nentrada o argumentos, y produce una salida o valor de retorno. También hemos\nvisto que las funciones se emplean con ciertos propósitos:
\nUna vez vistas las diversas aplicaciones de las funciones procedamos a dejar\nclaro que significa una función pura.
\n\n\nToda función que dados los mismos inputs siempre retorna lo mismo, y sin\nefectos secundarios, es una función pura.
\n
En programación funcional, el comportamiento de las funciones depende de una\ny solo una cosa: los argumentos pasados explícitamente a la función. Esto quiere\ndecir que si proporcionas los mismos datos como argumentos o entrada, la función\nsiempre debe producir el mismo valor de retorno. A esta propiedad se le conoce\ncomo transparencia referencial.
\nLo mencionado en el párrafo anterior, hace que en las funciones puras sea más\nfácil apreciar todas las circunstancias que pueden presentarse, incluyendo\naquellos escenarios que resultan en errores. Escribir funciones que solo\ndependen de sus argumentos para definir su comportamiento también facilita\nreplicar bugs o poner en práctica Test-Driven Development (TDD por sus\nsiglas en inglés).
\nComencemos desarrollando nuestros casos de pruebas:
\nlowercaser.test.js.
\nconst lowerCaser = require('./lowercaser')\n\ntest('Should take an input string and returns it lowercased', () => {\n expect(lowerCaser('LOREM IPSUM')).toBe('lorem ipsum')\n})\nNOTA:
\nA lo largo del curso usaremos Jest como framework para la ejecución de\npruebas unitarias. Puedes instalar Jest por medio de npm al ejecutar el\nsiguiente comando:
npm install --save-dev jest\nO también puedes usar yarn al ejecutar:
yarn add --dev jest\nPara correr las pruebas haremos:
\nyarn run jest -- fichero.test.js\nAhora, pasemos a implementar lo especificado en nuestros casos de pruebas:
\nlowercaser.js.
\nconst lowerCaser = input => input.toString().toLowerCase()\n\nmodule.exports = lowerCaser\nUna vez completada nuestra implementación inicial, corroboremos nuestro trabajo\npor medio de la ejecución de las pruebas:
\n$ yarn run jest -- lowercaser.test.js\n\nPASS ./lowercaser.test.js\n ✓ Should take an input string and returns it lowercased (15ms)\n\n Test Suites: 1 passed, 1 total\n Tests: 1 passed, 1 total\n Snapshots: 0 total\n Time: 0.859s, estimated 1s\n Ran all test suites matching \"lowercaser.test.js\".\nParece que todo funciona como se espera. Continuemos.
\nCon nuestra función lowerCaser(), podemos reemplazar la llamada de la función\npor el resultado, y el código tendrá el mismo significado lowerCaser('LOREM IPSUM') siempre será lo mismo que lorem ipsum en su programa, sin importar el\ncontexto, cuántas veces lo llame o cuándo lo llame.
Pero no se puede decir lo mismo de todas las funciones. Algunas funciones se\nbasan en información distinta de los argumentos que se transmiten para producir\nresultados. Considera este ejemplo:
\nMath.random() // => 0.4011148700956255\nMath.random() // => 0.8533405303023756\nMath.random() // => 0.3550692005082965\nA pesar de que no pasamos ningún argumento en ninguna de las llamadas a la\nfunción, todos produjeron resultados diferentes, lo que significa que\nMath.random() no es una función pura. Math.random() produce un nuevo\nnúmero aleatorio entre 0 y 1 cada vez que lo ejecutas, entonces es obvio que no\nse podría simplemente reemplazarlo por 0.4011148700956255 sin cambiar el\nsignificado del programa.
Eso produciría el mismo resultado cada vez que se ejecute el programa. Cuando le\npedimos a la computadora un número aleatorio, por lo general significa que\nqueremos un resultado diferente al que obtuvimos la última vez. ¿Cuál es el\nsentido de un par de dados con los mismos números impresos en todas las caras? A\nveces tenemos que preguntarle a la computadora por la hora actual. No vamos a\nentrar en detalles de cómo funcionan las funciones de tiempo. Por ahora,\nsimplemente copia este código:
\nconst time = () => new Date().toLocaleTimeString()\ntime() // => \"5:15:45 PM\"\n¿Qué sucedería si reemplazo la llamada de la función time() con la hora\nactual? Siempre diría que es la misma hora: la hora con la cual la llamada a la\nfunción se reemplazó. En otras palabras, solo podría producir la salida correcta\nuna vez al día, y solo si se ejecuta el programa en el momento exacto en que la\nhora se reemplazó por la función.
Entonces, claramente, time() no es como la función lowerCaser().
Una función solo es pura si, dada la misma entrada, siempre producirá la misma\nsalida. Tal vez recuerdes esta regla de la clase de álgebra: los mismos valores\nde entrada se asignarán siempre al mismo valor de salida. Sin embargo, muchos\nvalores de entrada se pueden asignar al mismo valor de salida. Por ejemplo, la\nsiguiente función es pura:
\nconst highpass = (cutoff, value) => value >= cutoff;\nLos mismos valores de entrada se asignarán siempre al mismo valor de salida:
\nhighpass(5, 5) // => true\nhighpass(5, 5) // => true\nhighpass(5, 5) // => true\nMuchos valores de entrada tal vez se pueden asignar al mismo valor de salida:
\nhighpass(5, 123) // true\nhighpass(5, 6) // true\nhighpass(5, 18) // true\nhighpass(5, 1) // false\nhighpass(5, 3) // false\nhighpass(5, 4) // false\nEn este punto cabe aclarar que las funciones puras no producen efectos\ncolaterales o side-effects, pues el propósito de vida de una función pura es\núnicamente calcular el valor de retorno, solo eso y nada más.
\nEn las ciencias de la computación, una función o expresión se dice que tiene\nefectos colaterales si modifica algún estado fuera de su ámbito (scope), o si\ntiene interacciones observables con la función que la invocó, o si modifica el\nmundo exterior aparte de retornar el valor esperado. Por ejemplo, una función\nparticular podría modificar una variable global (estado fuera de su ámbito),\nmodificar uno de los argumentos mutables (interactuar con la función la invocó),\nlevantar una excepción, escribir datos a un fichero o llamar a otra función que\nsi tiene efectos colaterales. Ten en cuenta que ante la presencia de funciones\ncon efectos colaterales, el comportamiento de un programa podría depender de su\nhistoria, esto quiere decir que el orden de evaluación importa. Por lo tanto, la\ncomprensión y análisis de una función con efectos colaterales requiere\nconocimientos acerca de su contexto y su posible historia, lo cual hace más\ndifícil la corrección de errores. En la programación funcional, los efectos\ncolaterales se usan con moderación.
\nVeamos un ejemplo de efecto colateral y cómo podemos evitarlo.
\nSupongamos que deseamos crear una función que concatene dos arrays que pueden\ncontener elementos anidados, tratemos de emular el siguiente comportamiento:
\nconcat.test.js.
\nconst concat = require('./concat')\n\ntest('should concatenate array on the right with array on the left', () => {\n const left = [1, [2], 3]\n const right = [[4], 5, [6, 7], 8]\n const expected = [1, [2], 3, [4], 5, [6, 7], 8]\n\n expect(concat(left, right)).toEqual(expected)\n})\nUna implementación inicial puede ser la siguiente:
\nconcat.js.
\nconst concat = (left, right) => {\n const result = left\n\n right.map(item => {\n result.push(item)\n })\n\n return result\n}\n\nmodule.exports = concat\n\n\nNota
\nTen en cuenta que esta implementación es a modo de ejemplo, en realidad\npodríamos usar Array.prototype.concat() directamente.
\n
Comprobemos nuestro trabajo:
\n$ yarn run jest -- concat.test.js\n\n PASS ./concat.test.js\n ✓ should concatenate the array on the right with the array on the left (3ms)\n\n Test Suites: 1 passed, 1 total\n Tests: 1 passed, 1 total\n Snapshots: 0 total\n Time: 0.67s, estimated 1s\n Ran all test suites matching \"concat.test.js\".\nTodo parece indicar que nuestra función tiene un comportamiento correcto, ahora\nagreguemos un caso de prueba para comprobar que no estamos alterando el contexto\nexterno:
\nconcat.test.js.
\nconst concat = require('./concat')\n\ntest('should concatenate array on the right with array on the left', () => {\n const left = [1, [2], 3]\n const right = [[4], 5, [6, 7], 8]\n const expected = [1, [2], 3, [4], 5, [6, 7], 8]\n\n expect(concat(left, right)).toEqual(expected)\n})\n\ntest('should not mutate external context', () => {\n const left = [1, [2], 3]\n const right = [[4], 5, [6, 7], 8]\n const backup = Object.assign([], left)\n\n concat(left, right)\n\n expect(left).toEqual(backup)\n})\nAl ejecutar las pruebas obtenemos lo siguiente:
\n$ yarn run jest -- concat.test.js\n FAIL ./concat.test.js\n ● should not mutate external context\n\n expect(received).toEqual(expected)\n\n Expected value to equal:\n [1, [2], 3]\n Received:\n [1, [2], 3, [4], 5, [6, 7], 8]\n\n ...\n\n ✓ should concatenate the array on the right with the array on the left (4ms)\n ✕ should not mutate external context (6ms)\n\nTest Suites: 1 failed, 1 total\nTests: 1 failed, 1 passed, 2 total\nSnapshots: 0 total\nTime: 1.011s\nRan all test suites matching \"concat.test.js\".\nOuch!, con esto se demuestra que nuestra función no es pura, pues\nestamos alterando el contexto externo, lo cual es un tipo de efecto colateral.
\nEl comportamiento anterior sucede porque los objetos o arreglos pasados a las\nfunciones como argumento se pasan por referencia, no por copia, lo que significa\nque si una función muta una propiedad en un objeto o arreglo, supondría que\ndicha mutación sería accesible desde afuera de la función. Las funciones puras\nno deben alterar el estado externo.
\nSi bien el valor de retorno de nuestra función es el esperado, el problema con\nla implementación actual es que hemos mutado un estado compartido. Imagina por\nun momento que otras funciones pueden depender del estado del arreglo u objeto\nasumiendo que su estado es el original (antes de llamar a nuestra función\nconcat), y ahora que hemos mutado ese estado compartido, tenemos que\npreocuparnos por el impacto que tendrá dicho cambio en la lógica del programa si\ncambiamos el orden en que se han llamado las funciones. Refactorizar el código\npodría resultar en errores apareciendo aquí y allá, lo que podría arruinar la\nlógica general de nuestra aplicación, y como resultado muchos clientes\ndisgustados.
Veamos ahora cómo podemos corregir esta situación:
\nconcat.js.
\nconst concat = (left, right) => {\n const result = Object.assign([], left)\n\n right.map(item => {\n result.push(item)\n })\n\n return result\n}\n\nmodule.exports = concat\nAhora al ejecutar las pruebas obtenemos lo siguiente:
\n$ yarn run jest -- concat.test.js\n PASS ./concat.test.js\n ✓ should concatenate the array on the right with the array on the left (5ms)\n ✓ should not mutate external context (1ms)\n\nTest Suites: 1 passed, 1 total\nTests: 2 passed, 2 total\nSnapshots: 0 total\nTime: 0.977s\nRan all test suites matching \"concat.test.js\".\n¿Recuerdas que antes habíamos mencionado que podíamos haber usado\nArray.prototype.concat directamente?, pues veamos una simplificación del\ncódigo:
concat.js.
\nconst concat = (left, right) => {\n return left.concat(right)\n}\n\nmodule.exports = concat\nSi ejecutas de nuevo las pruebas unitarias verás que cumplimos con todas las\ncondiciones.
\nNOTA: Es común usar métodos como Array#slice, Array#map o Array#filter\nademás de Array#concat para crear copias de arreglos. En ES6 también\ntenemos el spread operator que nos permite copiar las propiedades enumerables\nde un arreglo u objeto de esta forma:
const array = [1, 2, 3];\nconst arrayCopy = [...a]; // `b` es un nuevo arreglo con los elementos de `a`.\n\nconst obj = { foo: 'bar' };\nconst objCopy = {...obj};\nUna vez analizadas las funciones puras, volvamos a repasar los beneficios que\nofrecen, tal como vimos en la apertura de esta unidad:
\nPor las razones antes mencionadas, recomendamos favorecer la implementación de\nfunciones puras. Por lo tanto, siempre que sea práctico implementar los\nrequerimientos de un programa usando funciones puras, debes darle preferencia\nsobre otras opciones.
\nfilter() o\nmap() sobre ellos.Las funciones puras tienen aplicaciones en muchos ámbitos, entre ellos la\nprogramación funcional. También facilitan la concurrencia, y como veremos en\nsiguientes etapas serán muy empleadas en aplicaciones basadas en React+Redux.
\nAnteriormente mencionamos que una función es básicamente un proceso que toma una\nentrada o argumentos, y produce una salida o valor de retorno. También hemos\nvisto que las funciones se emplean con ciertos propósitos:
\nUna vez vistas las diversas aplicaciones de las funciones procedamos a dejar\nclaro que significa una función pura.
\n\n\nToda función que dados los mismos inputs siempre retorna lo mismo, y sin\nefectos secundarios, es una función pura.
\n
En programación funcional, el comportamiento de las funciones depende de una\ny solo una cosa: los argumentos pasados explícitamente a la función. Esto quiere\ndecir que si proporcionas los mismos datos como argumentos o entrada, la función\nsiempre debe producir el mismo valor de retorno. A esta propiedad se le conoce\ncomo transparencia referencial.
\nLo mencionado en el párrafo anterior, hace que en las funciones puras sea más\nfácil apreciar todas las circunstancias que pueden presentarse, incluyendo\naquellos escenarios que resultan en errores. Escribir funciones que solo\ndependen de sus argumentos para definir su comportamiento también facilita\nreplicar bugs o poner en práctica Test-Driven Development (TDD por sus\nsiglas en inglés).
\nComencemos desarrollando nuestros casos de pruebas:
\nlowercaser.test.js.
\nconst lowerCaser = require('./lowercaser')\n\ntest('Should take an input string and returns it lowercased', () => {\n expect(lowerCaser('LOREM IPSUM')).toBe('lorem ipsum')\n})\nNOTA:
\nA lo largo del curso usaremos Jest como framework para la ejecución de\npruebas unitarias. Puedes instalar Jest por medio de npm al ejecutar el\nsiguiente comando:
npm install --save-dev jest\nO también puedes usar yarn al ejecutar:
yarn add --dev jest\nPara correr las pruebas haremos:
\nyarn run jest -- fichero.test.js\nAhora, pasemos a implementar lo especificado en nuestros casos de pruebas:
\nlowercaser.js.
\nconst lowerCaser = input => input.toString().toLowerCase()\n\nmodule.exports = lowerCaser\nUna vez completada nuestra implementación inicial, corroboremos nuestro trabajo\npor medio de la ejecución de las pruebas:
\n$ yarn run jest -- lowercaser.test.js\n\nPASS ./lowercaser.test.js\n ✓ Should take an input string and returns it lowercased (15ms)\n\n Test Suites: 1 passed, 1 total\n Tests: 1 passed, 1 total\n Snapshots: 0 total\n Time: 0.859s, estimated 1s\n Ran all test suites matching \"lowercaser.test.js\".\nParece que todo funciona como se espera. Continuemos.
\nCon nuestra función lowerCaser(), podemos reemplazar la llamada de la función\npor el resultado, y el código tendrá el mismo significado lowerCaser('LOREM IPSUM') siempre será lo mismo que lorem ipsum en su programa, sin importar el\ncontexto, cuántas veces lo llame o cuándo lo llame.
Pero no se puede decir lo mismo de todas las funciones. Algunas funciones se\nbasan en información distinta de los argumentos que se transmiten para producir\nresultados. Considera este ejemplo:
\nMath.random() // => 0.4011148700956255\nMath.random() // => 0.8533405303023756\nMath.random() // => 0.3550692005082965\nA pesar de que no pasamos ningún argumento en ninguna de las llamadas a la\nfunción, todos produjeron resultados diferentes, lo que significa que\nMath.random() no es una función pura. Math.random() produce un nuevo\nnúmero aleatorio entre 0 y 1 cada vez que lo ejecutas, entonces es obvio que no\nse podría simplemente reemplazarlo por 0.4011148700956255 sin cambiar el\nsignificado del programa.
Eso produciría el mismo resultado cada vez que se ejecute el programa. Cuando le\npedimos a la computadora un número aleatorio, por lo general significa que\nqueremos un resultado diferente al que obtuvimos la última vez. ¿Cuál es el\nsentido de un par de dados con los mismos números impresos en todas las caras? A\nveces tenemos que preguntarle a la computadora por la hora actual. No vamos a\nentrar en detalles de cómo funcionan las funciones de tiempo. Por ahora,\nsimplemente copia este código:
\nconst time = () => new Date().toLocaleTimeString()\ntime() // => \"5:15:45 PM\"\n¿Qué sucedería si reemplazo la llamada de la función time() con la hora\nactual? Siempre diría que es la misma hora: la hora con la cual la llamada a la\nfunción se reemplazó. En otras palabras, solo podría producir la salida correcta\nuna vez al día, y solo si se ejecuta el programa en el momento exacto en que la\nhora se reemplazó por la función.
Entonces, claramente, time() no es como la función lowerCaser().
Una función solo es pura si, dada la misma entrada, siempre producirá la misma\nsalida. Tal vez recuerdes esta regla de la clase de álgebra: los mismos valores\nde entrada se asignarán siempre al mismo valor de salida. Sin embargo, muchos\nvalores de entrada se pueden asignar al mismo valor de salida. Por ejemplo, la\nsiguiente función es pura:
\nconst highpass = (cutoff, value) => value >= cutoff;\nLos mismos valores de entrada se asignarán siempre al mismo valor de salida:
\nhighpass(5, 5) // => true\nhighpass(5, 5) // => true\nhighpass(5, 5) // => true\nMuchos valores de entrada tal vez se pueden asignar al mismo valor de salida:
\nhighpass(5, 123) // true\nhighpass(5, 6) // true\nhighpass(5, 18) // true\nhighpass(5, 1) // false\nhighpass(5, 3) // false\nhighpass(5, 4) // false\nEn este punto cabe aclarar que las funciones puras no producen efectos\ncolaterales o side-effects, pues el propósito de vida de una función pura es\núnicamente calcular el valor de retorno, solo eso y nada más.
\nEn las ciencias de la computación, una función o expresión se dice que tiene\nefectos colaterales si modifica algún estado fuera de su ámbito (scope), o si\ntiene interacciones observables con la función que la invocó, o si modifica el\nmundo exterior aparte de retornar el valor esperado. Por ejemplo, una función\nparticular podría modificar una variable global (estado fuera de su ámbito),\nmodificar uno de los argumentos mutables (interactuar con la función la invocó),\nlevantar una excepción, escribir datos a un fichero o llamar a otra función que\nsi tiene efectos colaterales. Ten en cuenta que ante la presencia de funciones\ncon efectos colaterales, el comportamiento de un programa podría depender de su\nhistoria, esto quiere decir que el orden de evaluación importa. Por lo tanto, la\ncomprensión y análisis de una función con efectos colaterales requiere\nconocimientos acerca de su contexto y su posible historia, lo cual hace más\ndifícil la corrección de errores. En la programación funcional, los efectos\ncolaterales se usan con moderación.
\nVeamos un ejemplo de efecto colateral y cómo podemos evitarlo.
\nSupongamos que deseamos crear una función que concatene dos arrays que pueden\ncontener elementos anidados, tratemos de emular el siguiente comportamiento:
\nconcat.test.js.
\nconst concat = require('./concat')\n\ntest('should concatenate array on the right with array on the left', () => {\n const left = [1, [2], 3]\n const right = [[4], 5, [6, 7], 8]\n const expected = [1, [2], 3, [4], 5, [6, 7], 8]\n\n expect(concat(left, right)).toEqual(expected)\n})\nUna implementación inicial puede ser la siguiente:
\nconcat.js.
\nconst concat = (left, right) => {\n const result = left\n\n right.map(item => {\n result.push(item)\n })\n\n return result\n}\n\nmodule.exports = concat\n\n\nNota
\nTen en cuenta que esta implementación es a modo de ejemplo, en realidad\npodríamos usar Array.prototype.concat() directamente.
\n
Comprobemos nuestro trabajo:
\n$ yarn run jest -- concat.test.js\n\n PASS ./concat.test.js\n ✓ should concatenate the array on the right with the array on the left (3ms)\n\n Test Suites: 1 passed, 1 total\n Tests: 1 passed, 1 total\n Snapshots: 0 total\n Time: 0.67s, estimated 1s\n Ran all test suites matching \"concat.test.js\".\nTodo parece indicar que nuestra función tiene un comportamiento correcto, ahora\nagreguemos un caso de prueba para comprobar que no estamos alterando el contexto\nexterno:
\nconcat.test.js.
\nconst concat = require('./concat')\n\ntest('should concatenate array on the right with array on the left', () => {\n const left = [1, [2], 3]\n const right = [[4], 5, [6, 7], 8]\n const expected = [1, [2], 3, [4], 5, [6, 7], 8]\n\n expect(concat(left, right)).toEqual(expected)\n})\n\ntest('should not mutate external context', () => {\n const left = [1, [2], 3]\n const right = [[4], 5, [6, 7], 8]\n const backup = Object.assign([], left)\n\n concat(left, right)\n\n expect(left).toEqual(backup)\n})\nAl ejecutar las pruebas obtenemos lo siguiente:
\n$ yarn run jest -- concat.test.js\n FAIL ./concat.test.js\n ● should not mutate external context\n\n expect(received).toEqual(expected)\n\n Expected value to equal:\n [1, [2], 3]\n Received:\n [1, [2], 3, [4], 5, [6, 7], 8]\n\n ...\n\n ✓ should concatenate the array on the right with the array on the left (4ms)\n ✕ should not mutate external context (6ms)\n\nTest Suites: 1 failed, 1 total\nTests: 1 failed, 1 passed, 2 total\nSnapshots: 0 total\nTime: 1.011s\nRan all test suites matching \"concat.test.js\".\nOuch!, con esto se demuestra que nuestra función no es pura, pues\nestamos alterando el contexto externo, lo cual es un tipo de efecto colateral.
\nEl comportamiento anterior sucede porque los objetos o arreglos pasados a las\nfunciones como argumento se pasan por referencia, no por copia, lo que significa\nque si una función muta una propiedad en un objeto o arreglo, supondría que\ndicha mutación sería accesible desde afuera de la función. Las funciones puras\nno deben alterar el estado externo.
\nSi bien el valor de retorno de nuestra función es el esperado, el problema con\nla implementación actual es que hemos mutado un estado compartido. Imagina por\nun momento que otras funciones pueden depender del estado del arreglo u objeto\nasumiendo que su estado es el original (antes de llamar a nuestra función\nconcat), y ahora que hemos mutado ese estado compartido, tenemos que\npreocuparnos por el impacto que tendrá dicho cambio en la lógica del programa si\ncambiamos el orden en que se han llamado las funciones. Refactorizar el código\npodría resultar en errores apareciendo aquí y allá, lo que podría arruinar la\nlógica general de nuestra aplicación, y como resultado muchos clientes\ndisgustados.
Veamos ahora cómo podemos corregir esta situación:
\nconcat.js.
\nconst concat = (left, right) => {\n const result = Object.assign([], left)\n\n right.map(item => {\n result.push(item)\n })\n\n return result\n}\n\nmodule.exports = concat\nAhora al ejecutar las pruebas obtenemos lo siguiente:
\n$ yarn run jest -- concat.test.js\n PASS ./concat.test.js\n ✓ should concatenate the array on the right with the array on the left (5ms)\n ✓ should not mutate external context (1ms)\n\nTest Suites: 1 passed, 1 total\nTests: 2 passed, 2 total\nSnapshots: 0 total\nTime: 0.977s\nRan all test suites matching \"concat.test.js\".\n¿Recuerdas que antes habíamos mencionado que podíamos haber usado\nArray.prototype.concat directamente?, pues veamos una simplificación del\ncódigo:
concat.js.
\nconst concat = (left, right) => {\n return left.concat(right)\n}\n\nmodule.exports = concat\nSi ejecutas de nuevo las pruebas unitarias verás que cumplimos con todas las\ncondiciones.
\nNOTA: Es común usar métodos como Array#slice, Array#map o Array#filter\nademás de Array#concat para crear copias de arreglos. En ES6 también\ntenemos el spread operator que nos permite copiar las propiedades enumerables\nde un arreglo u objeto de esta forma:
const array = [1, 2, 3];\nconst arrayCopy = [...a]; // `b` es un nuevo arreglo con los elementos de `a`.\n\nconst obj = { foo: 'bar' };\nconst objCopy = {...obj};\nUna vez analizadas las funciones puras, volvamos a repasar los beneficios que\nofrecen, tal como vimos en la apertura de esta unidad:
\nPor las razones antes mencionadas, recomendamos favorecer la implementación de\nfunciones puras. Por lo tanto, siempre que sea práctico implementar los\nrequerimientos de un programa usando funciones puras, debes darle preferencia\nsobre otras opciones.
\nfilter() o\nmap() sobre ellos.La técnica de definir funciones atadas a múltiples parámetros como una serie de\nfunciones anidadas que solo esperan un parámetro fue popularizada por el\nmatemático Haskell Curry, aunque inicialmente observada por Frege en\n1893, a dicha cadena de funciones anidadas se les llama funciones curry o\ncurried functions.
\nEn pocas palabras, currying es una técnica que traduce la evaluación de una\nfunción que toma múltiples argumentos en una evaluación de una secuencia de\nfunciones, cada una de funciones de la secuencia espera un único argumento.\nCurrying está relacionado con el concepto de aplicación\nparcial, pero no es lo mismo.
\nUna función curry es una que retorna progresivamente una función más específica\npor cada uno de los argumentos dados hasta que ya no sean necesarios más\nparámetros. Una función parcialmente aplicada, por otra parte, es una función\nque es \"parcialmente\" ejecutada y está lista para su inmediata ejecución una vez\ndado el resto de los parámetros esperados.
\nEl currying es elemental en la mayoría de los lenguajes de programación\nfuncional, por ejemplo Haskell o Scala. A pesar que JavaScript ofrece soporte\npara algunas características funcionales, al menos en las versiones actuales, el\ncurrying no es una de ellas. Sin embargo, podemos emular este patrón con las\ncaracterísticas actuales del lenguaje.
\nPara darte una idea de cómo este concepto podría funcionar, vamos a crear\nnuestra primera función curry en JavaScript, utilizando la sintaxis familiar\npara construir la funcionalidad currying que queremos. Como ejemplo,\nimaginemos una función que salude a alguien por su nombre. Todos sabemos cómo\ncrear una función simple de saludo que toma un nombre y un saludo, y registra el\nsaludo con el nombre:
\nconst greet = (greeting, name) => `${greeting}, ${name}`\n\ntest('Should say Hello', () => {\n expect(greet('Hello', 'Heidi')).toBe('Hello, Heidi')\n})\nEsta función requiere que el nombre y el saludo se pasen como argumentos para\nque funcione correctamente. Pero podríamos reescribir la función usando\ncurrying anidado simple, de modo que la función básica sólo requiera un\nsaludo, y devuelve otra función que toma el nombre de la persona que queremos\nsaludar.
\nconst greetCurried = greeting => name => `${greeting}, ${name}`\nEste pequeño ajuste a la forma en que escribimos la función anterior nos permite\ncrear una nueva función para cualquier tipo de saludo, y pasar a esa nueva\nfunción el nombre de la persona que queremos saludar:
\ntest('Should allow to reuse functions', () => {\n const greetHello = greetCurried('Hello')\n\n expect(greetHello('Heidi')).toBe('Hello, Heidi')\n expect(greetHello('Eddie')).toBe('Hello, Eddie')\n})\nTambién podemos llamar a la función en modo curry original directamente,\nsimplemente pasando cada uno de los parámetros en un conjunto separado de\nparéntesis, uno después del otro:
\ntest('Should work with all the parameters', () => {\n expect(greetCurried('Hi there')('Howard')).toBe('Hi there, Howard')\n})\nLo bueno es que ahora que hemos aprendido a modificar nuestra función\ntradicional para usar este enfoque para manejar los argumentos, podemos hacerlo\ncon tantos argumentos como queramos:
\nconst greetDeeplyCurried = greeting =>\n separator =>\n emphasis =>\n name =>\n `${greeting}${separator}${name}${emphasis}`\nTenemos la misma flexibilidad con cuatro argumentos que con dos. No importa lo\nlejos que vaya el anidamiento, podemos crear nuevas funciones personalizadas\npara saludar a tantas personas como escojamos de tantas maneras como nos\nconvenga:
\ntest('Should allow nested calls', () => {\n const greetAwkwardly = greetDeeplyCurried('Hello')('...')('?')\n\n expect(greetAwkwardly('Heidi')).toBe('Hello...Heidi?')\n expect(greetAwkwardly('Eddie')).toBe('Hello...Eddie?')\n})\nAdemás, podemos pasar tantos parámetros como quisiéramos al crear variaciones\npersonalizadas de nuestra función curry original, creando nuevas funciones que\nson capaces de tomar el número apropiado de parámetros adicionales, cada uno se\npasa por separado en su propio conjunto de paréntesis:
\ntest('Other variations', () => {\n const sayHello = greetDeeplyCurried('Hello')(', ')\n\n expect(sayHello('.')('Heidi')).toBe('Hello, Heidi.')\n expect(sayHello('.')('Eddie')).toBe('Hello, Eddie.')\nY se pueden definir variaciones subordinadas:
\n const askHello = sayHello('?')\n\n expect(askHello('Heidi')).toBe('Hello, Heidi?')\n expect(askHello('Eddie')).toBe('Hello, Eddie?')\n})\nPuedes ver lo poderoso que es este enfoque, especialmente si necesitas crear\nmuchas funciones personalizadas muy detalladas. El único problema es la\nsintaxis, pues a medida que construyes estas funciones con curry, debes\nmantener las funciones devueltas anidadas, y llamarlas con nuevas funciones que\nrequieran varios conjuntos de paréntesis, cada uno conteniendo su propio\nargumento aislado. Se puede poner difícil y enredado.
\nAntes de abordar la implementación de nuestra función curry, consideremos por\nejemplo que para toda función f(x, y), existe una función f' tal que\nf'(x) es una función que puede ser aplicada a y que obtenga\n(f'(x))(y) = f(x, y).
La función f' del ejemplo anterior es llamada forma curried de la función.\nDesde una perspectiva de programación funcional, currying puede ser descrita\npor la función: curry : ((a, b) -> c) -> (a -> b -> c)
Ahora bien, un enfoque es crear una función de orden superior (Higher\nOrder Function en inglés) que tome como argumento una función existente que\nfue escrita sin todas las devoluciones anidadas (uncurried form). Nuestra\nfunción de orden superior debe retornar otra función que espera un solo\nargumento,...
\nconst curryIt = f => x => {\n // ...\n}\nLuego que se suministra dicho argumento se procede a verificar si el número de\nargumentos esperados (Function.length) por la función uncurried es igual o\nmenor a 1, de ser así ejecuta dicha función, esta condición particular también\nnos servirá como condición de parada en nuestra llamada recursiva.
const curryIt = f => x => {\n if (f.length <= 1) {\n f(x)\n } else {\n // ...\n }\n}\nEn cambio, si el número de parámetros esperados es mayor a 1 debemos recurrir a\nla recursión y aplicar de nuevo nuestra función de orden superior, en este\núltimo caso pasaremos como argumento una nueva función equivalente, por medio\nde Function.prototype.bind(), a la función uncurried excepto por su\nparámetro inicial. Algo similar a los siguiente:
// función uncurried\nconst greet = (greeting, name) => `${greeting}, ${name}`\n// función equivalente a excepción del argumento inicial\nconst greetWithGreeting = greet.bind(null, 'Hello') // [Function: bound greet]\ngreetWithGreeting('Heidi')\n// => 'Hello, Heidi'\nSin mayor preámbulo veamos el resultado final de nuestra función curryIt:
const curryIt = f => x => f.length <= 1 ? f(x) : curryIt(f.bind(null, x))\nPara usar esto, le pasamos una referencia a una función que toma cualquier\nnúmero de argumentos, junto con tantos de los argumentos como queremos\npre-poblar. Lo que recuperamos es una función que está a la espera de los\nargumentos restantes:
\nconst greeter = (greeting, separator, emphasis, name) =>\n `${greeting}${separator}${name}${emphasis}`\n\ntest('should return a curried equivalent of the provided function', () => {\n const greetHello = curryIt(greeter)('Hello')(', ')('.')\n\n expect(greetHello('Heidi')).toBe('Hello, Heidi.')\n expect(greetHello('Eddie')).toBe('Hello, Eddie.')\nY al igual que antes, no estamos limitados en términos del número de argumentos\nque queremos utilizar al construir funciones derivadas de nuestra función\noriginal que usa curry:
\n const greetGoodbye = curryIt(greeter)('Goodbye')(', ')\n\n expect(greetGoodbye('.')('Joe')).toBe('Goodbye, Joe.')\n})\nNuestra pequeña función curryIt no puede manejar todos los casos de borde,\ncomo los parámetros faltantes u opcionales, pero hace un trabajo razonable\nsiempre y cuando permanezcamos estrictos sobre la sintaxis para pasar\nargumentos.
Algunas bibliotecas funcionales de JavaScript como Ramda tienen funciones de\ncurry más flexibles que pueden dividir los parámetros requeridos para una\nfunción y permiten pasarlos individualmente o en grupos para crear variaciones\ncurry personalizadas. Si deseas aplicar curry extensivamente, este es\nprobablemente el camino a seguir.
\nIndependientemente de cómo elijas añadir curry a tu programación, ya sea que\ndesee utilizar paréntesis anidados o prefieras incluir una función de transporte\nmás robusta, llegar a una convención de nomenclatura coherente para sus\nfunciones curry ayudará a hacer tu código más legible. Te recomiendo que cada\nvariación derivada de una función tenga un nombre que deje claro cómo se\ncomporta, y qué argumentos está esperando.
\nUna cosa que es importante tener en cuenta al momento de implementar curry es\nel orden de los argumentos. Usando el enfoque que hemos descrito, obviamente lo\nque tú deseas es que el argumento que es más probable que sea reemplazado de\nuna variación a la siguiente sea el último argumento pasado a la función\noriginal.
\nPensar con antelación sobre el orden de los argumentos hará que sea más fácil\ndiseñar un algoritmo para ser implementado con curry y aplicarlo a tu\ntrabajo. Tener en cuenta el orden de tus argumentos en términos de menor a mayor\nprobabilidades de cambiar es un buen hábito al momento de diseñar funciones.
\nCurry es una técnica increíblemente útil en JavaScript funcional. Te permitirá\ngenerar una biblioteca de funciones pequeñas y fácilmente configuradas que se\ncomportan consistentemente, son rápidas de usar y que se pueden entender al leer\nsu código. Agregar curry a tu práctica de codificación alentará el uso de\nfunciones parcialmente aplicadas a través de tu código, evitando una gran\ncantidad de repeticiones, y puede ayudarte a obtener mejores hábitos sobre cómo\nnombrar y manejar los argumentos de la función.
\nLa técnica de definir funciones atadas a múltiples parámetros como una serie de\nfunciones anidadas que solo esperan un parámetro fue popularizada por el\nmatemático Haskell Curry, aunque inicialmente observada por Frege en\n1893, a dicha cadena de funciones anidadas se les llama funciones curry o\ncurried functions.
\nEn pocas palabras, currying es una técnica que traduce la evaluación de una\nfunción que toma múltiples argumentos en una evaluación de una secuencia de\nfunciones, cada una de funciones de la secuencia espera un único argumento.\nCurrying está relacionado con el concepto de aplicación\nparcial, pero no es lo mismo.
\nUna función curry es una que retorna progresivamente una función más específica\npor cada uno de los argumentos dados hasta que ya no sean necesarios más\nparámetros. Una función parcialmente aplicada, por otra parte, es una función\nque es \"parcialmente\" ejecutada y está lista para su inmediata ejecución una vez\ndado el resto de los parámetros esperados.
\nEl currying es elemental en la mayoría de los lenguajes de programación\nfuncional, por ejemplo Haskell o Scala. A pesar que JavaScript ofrece soporte\npara algunas características funcionales, al menos en las versiones actuales, el\ncurrying no es una de ellas. Sin embargo, podemos emular este patrón con las\ncaracterísticas actuales del lenguaje.
\nPara darte una idea de cómo este concepto podría funcionar, vamos a crear\nnuestra primera función curry en JavaScript, utilizando la sintaxis familiar\npara construir la funcionalidad currying que queremos. Como ejemplo,\nimaginemos una función que salude a alguien por su nombre. Todos sabemos cómo\ncrear una función simple de saludo que toma un nombre y un saludo, y registra el\nsaludo con el nombre:
\nconst greet = (greeting, name) => `${greeting}, ${name}`\n\ntest('Should say Hello', () => {\n expect(greet('Hello', 'Heidi')).toBe('Hello, Heidi')\n})\nEsta función requiere que el nombre y el saludo se pasen como argumentos para\nque funcione correctamente. Pero podríamos reescribir la función usando\ncurrying anidado simple, de modo que la función básica sólo requiera un\nsaludo, y devuelve otra función que toma el nombre de la persona que queremos\nsaludar.
\nconst greetCurried = greeting => name => `${greeting}, ${name}`\nEste pequeño ajuste a la forma en que escribimos la función anterior nos permite\ncrear una nueva función para cualquier tipo de saludo, y pasar a esa nueva\nfunción el nombre de la persona que queremos saludar:
\ntest('Should allow to reuse functions', () => {\n const greetHello = greetCurried('Hello')\n\n expect(greetHello('Heidi')).toBe('Hello, Heidi')\n expect(greetHello('Eddie')).toBe('Hello, Eddie')\n})\nTambién podemos llamar a la función en modo curry original directamente,\nsimplemente pasando cada uno de los parámetros en un conjunto separado de\nparéntesis, uno después del otro:
\ntest('Should work with all the parameters', () => {\n expect(greetCurried('Hi there')('Howard')).toBe('Hi there, Howard')\n})\nLo bueno es que ahora que hemos aprendido a modificar nuestra función\ntradicional para usar este enfoque para manejar los argumentos, podemos hacerlo\ncon tantos argumentos como queramos:
\nconst greetDeeplyCurried = greeting =>\n separator =>\n emphasis =>\n name =>\n `${greeting}${separator}${name}${emphasis}`\nTenemos la misma flexibilidad con cuatro argumentos que con dos. No importa lo\nlejos que vaya el anidamiento, podemos crear nuevas funciones personalizadas\npara saludar a tantas personas como escojamos de tantas maneras como nos\nconvenga:
\ntest('Should allow nested calls', () => {\n const greetAwkwardly = greetDeeplyCurried('Hello')('...')('?')\n\n expect(greetAwkwardly('Heidi')).toBe('Hello...Heidi?')\n expect(greetAwkwardly('Eddie')).toBe('Hello...Eddie?')\n})\nAdemás, podemos pasar tantos parámetros como quisiéramos al crear variaciones\npersonalizadas de nuestra función curry original, creando nuevas funciones que\nson capaces de tomar el número apropiado de parámetros adicionales, cada uno se\npasa por separado en su propio conjunto de paréntesis:
\ntest('Other variations', () => {\n const sayHello = greetDeeplyCurried('Hello')(', ')\n\n expect(sayHello('.')('Heidi')).toBe('Hello, Heidi.')\n expect(sayHello('.')('Eddie')).toBe('Hello, Eddie.')\nY se pueden definir variaciones subordinadas:
\n const askHello = sayHello('?')\n\n expect(askHello('Heidi')).toBe('Hello, Heidi?')\n expect(askHello('Eddie')).toBe('Hello, Eddie?')\n})\nPuedes ver lo poderoso que es este enfoque, especialmente si necesitas crear\nmuchas funciones personalizadas muy detalladas. El único problema es la\nsintaxis, pues a medida que construyes estas funciones con curry, debes\nmantener las funciones devueltas anidadas, y llamarlas con nuevas funciones que\nrequieran varios conjuntos de paréntesis, cada uno conteniendo su propio\nargumento aislado. Se puede poner difícil y enredado.
\nAntes de abordar la implementación de nuestra función curry, consideremos por\nejemplo que para toda función f(x, y), existe una función f' tal que\nf'(x) es una función que puede ser aplicada a y que obtenga\n(f'(x))(y) = f(x, y).
La función f' del ejemplo anterior es llamada forma curried de la función.\nDesde una perspectiva de programación funcional, currying puede ser descrita\npor la función: curry : ((a, b) -> c) -> (a -> b -> c)
Ahora bien, un enfoque es crear una función de orden superior (Higher\nOrder Function en inglés) que tome como argumento una función existente que\nfue escrita sin todas las devoluciones anidadas (uncurried form). Nuestra\nfunción de orden superior debe retornar otra función que espera un solo\nargumento,...
\nconst curryIt = f => x => {\n // ...\n}\nLuego que se suministra dicho argumento se procede a verificar si el número de\nargumentos esperados (Function.length) por la función uncurried es igual o\nmenor a 1, de ser así ejecuta dicha función, esta condición particular también\nnos servirá como condición de parada en nuestra llamada recursiva.
const curryIt = f => x => {\n if (f.length <= 1) {\n f(x)\n } else {\n // ...\n }\n}\nEn cambio, si el número de parámetros esperados es mayor a 1 debemos recurrir a\nla recursión y aplicar de nuevo nuestra función de orden superior, en este\núltimo caso pasaremos como argumento una nueva función equivalente, por medio\nde Function.prototype.bind(), a la función uncurried excepto por su\nparámetro inicial. Algo similar a los siguiente:
// función uncurried\nconst greet = (greeting, name) => `${greeting}, ${name}`\n// función equivalente a excepción del argumento inicial\nconst greetWithGreeting = greet.bind(null, 'Hello') // [Function: bound greet]\ngreetWithGreeting('Heidi')\n// => 'Hello, Heidi'\nSin mayor preámbulo veamos el resultado final de nuestra función curryIt:
const curryIt = f => x => f.length <= 1 ? f(x) : curryIt(f.bind(null, x))\nPara usar esto, le pasamos una referencia a una función que toma cualquier\nnúmero de argumentos, junto con tantos de los argumentos como queremos\npre-poblar. Lo que recuperamos es una función que está a la espera de los\nargumentos restantes:
\nconst greeter = (greeting, separator, emphasis, name) =>\n `${greeting}${separator}${name}${emphasis}`\n\ntest('should return a curried equivalent of the provided function', () => {\n const greetHello = curryIt(greeter)('Hello')(', ')('.')\n\n expect(greetHello('Heidi')).toBe('Hello, Heidi.')\n expect(greetHello('Eddie')).toBe('Hello, Eddie.')\nY al igual que antes, no estamos limitados en términos del número de argumentos\nque queremos utilizar al construir funciones derivadas de nuestra función\noriginal que usa curry:
\n const greetGoodbye = curryIt(greeter)('Goodbye')(', ')\n\n expect(greetGoodbye('.')('Joe')).toBe('Goodbye, Joe.')\n})\nNuestra pequeña función curryIt no puede manejar todos los casos de borde,\ncomo los parámetros faltantes u opcionales, pero hace un trabajo razonable\nsiempre y cuando permanezcamos estrictos sobre la sintaxis para pasar\nargumentos.
Algunas bibliotecas funcionales de JavaScript como Ramda tienen funciones de\ncurry más flexibles que pueden dividir los parámetros requeridos para una\nfunción y permiten pasarlos individualmente o en grupos para crear variaciones\ncurry personalizadas. Si deseas aplicar curry extensivamente, este es\nprobablemente el camino a seguir.
\nIndependientemente de cómo elijas añadir curry a tu programación, ya sea que\ndesee utilizar paréntesis anidados o prefieras incluir una función de transporte\nmás robusta, llegar a una convención de nomenclatura coherente para sus\nfunciones curry ayudará a hacer tu código más legible. Te recomiendo que cada\nvariación derivada de una función tenga un nombre que deje claro cómo se\ncomporta, y qué argumentos está esperando.
\nUna cosa que es importante tener en cuenta al momento de implementar curry es\nel orden de los argumentos. Usando el enfoque que hemos descrito, obviamente lo\nque tú deseas es que el argumento que es más probable que sea reemplazado de\nuna variación a la siguiente sea el último argumento pasado a la función\noriginal.
\nPensar con antelación sobre el orden de los argumentos hará que sea más fácil\ndiseñar un algoritmo para ser implementado con curry y aplicarlo a tu\ntrabajo. Tener en cuenta el orden de tus argumentos en términos de menor a mayor\nprobabilidades de cambiar es un buen hábito al momento de diseñar funciones.
\nCurry es una técnica increíblemente útil en JavaScript funcional. Te permitirá\ngenerar una biblioteca de funciones pequeñas y fácilmente configuradas que se\ncomportan consistentemente, son rápidas de usar y que se pueden entender al leer\nsu código. Agregar curry a tu práctica de codificación alentará el uso de\nfunciones parcialmente aplicadas a través de tu código, evitando una gran\ncantidad de repeticiones, y puede ayudarte a obtener mejores hábitos sobre cómo\nnombrar y manejar los argumentos de la función.
\nEl texto a continuación es una traducción al español, con ciertos ajustes, del\ncapítulo 5 de JavaScript for kids,\nNick Morgan, 2015; y de Eloquent JavaScript,\nde Marijn Haverbeke, 2014.
\nHTML (HyperText Markup Language) es el lenguaje utilizado para crear la\nestructura de un sitio web. Para crear este sitio, se empieza creando un\ndocumento en formato HTML. Esto es muy parecido a crear un documento con formato\nword, excel o powerpoint.
\nUn documento HTML simple se ve así (no te asustes si no entiendes todo lo que\ndice, te lo explicaremos paso a paso más abajo):
\n<!DOCTYPE html>\n<html>\n <head>\n <title>Mi primera web</title>\n </head>\n <body>\n <h1>¡Hola Mundo!</h1>\n <p>Esta es mi primera web</p>\n </body>\n</html>\nAl abrir este mismo documento HTML en un navegador (como Chrome), se ve lo\nsiguiente:
\n![\"Vista](\"https://user-images.githubusercontent.com/25912510/35747209-7899e2de-0817-11e8-9ae7-fcfe96122470.png\")
El navegador \"lee\" el archivo HTML (el texto y las etiquetas que están adentro)\ny las presenta según las reglas del lenguaje. Por ejemplo, los textos que están\ndentro de las etiquetas <h1> </h1> son considerados encabezados o titulares,\nmientras que los textos dentro de las etiquetas <p> </p> son considerados\npárrafos. Por eso, el texto ¡Hola Mundo! se visualiza mucho más grande que el\ntexto Esta es mi primera web.
Como ya lo dijimos, la mejor manera de aprender es haciendo. Por eso, es\nhora de que tú misma crees una web y aprendas HTML.
\nMichelle te explica por qué necesitarás un editor de texto para los ejercicios:
\n![\"Editor](\"https://img.youtube.com/vi/wQKn1fh3pAM/0.jpg\")
En el siguiente video, Michelle te guiará a través de los siguientes pasos para\nque crees tu primera web:
\nindex.htmlAquí el video:
\n![\"Mi](\"https://img.youtube.com/vi/QP9FF9eoh-k/0.jpg\")
Los documentos HTML se componen de elementos. Salvo algunas excepciones (por\nejemplo <!DOCTYPE html>), los elementos comienzan con una etiqueta de inicio\ny terminan con una etiqueta de fin. Por ejemplo, en nuestro documento tenemos\nel elemento p, que comienza con la etiqueta de inicio <p> y termina con la\netiqueta de finalización </p>. El texto que se encuentra entre las etiquetas\nde apertura y de cierre es el contenido del elemento.
\n\nEl elemento
\np(párrafo) como ejemplo:\n
Hagamos un recorrido por todos los elementos de nuestro documento:
\n![\"Ejemplo](\"https://user-images.githubusercontent.com/25912510/35747217-7bb85acc-0817-11e8-9248-5b00951cf963.png\")
<!DOCTYPE html> (que como vimos, no\ntiene inicio o cierre). Su función es hacerle saber al navegador que\ninterprete el documento como HTML moderno, en contraposición a varios\ndialectos que estaban en uso en el pasado.<html> (la etiqueta de cierre\n</ html> está al final). Por estándar, todos los documentos HTML deben\ntener un elemento html que \"englobe\" todo lo demás.html hay dos elementos: el head (cabeza en Español) y\nel body (cuerpo en Español). El head contiene información sobre el\ndocumento, y el body contiene el documento en sí.head está el elemento title (con su etiqueta de\ninicio y de cierre), que contiene el título del documento. Es por eso que al\nvisualizar el archivo en el navegador, el título en la pestaña del navegador\ndice: \"Mi primera web\". Es importante que notemos que el elemento title\nestá contenido dentro del elemento head; el cual, a su vez, está\ncontenido dentro del elemento html.body (entre su etiqueta de inicio y de\ncierre) que contiene el contenido que se mostrará en el navegador. En este\ncaso, dentro del body tenemos dos elementos adicionales: el h1 (encabezado)\ny el p (párrafo).Existen muchos más elementos y etiquetas HTML, que aprenderás en su momento. Por\nel momento, es hora de regresar a JavaScript.
\nEs importante que entiendas que HTML no es un lenguaje de programación;\nes un lenguaje de marcado de texto. Como hemos visto, con HTML le damos una\nestructura a nuestra página. Sin embargo, si queremos darle comportamiento o\ninteracción a nuestra web, necesitamos usar un lenguaje de programación. Y\nel único lenguaje de programación para correr en los navegadores web es\nJavaScript. Con JavaScript logramos que las páginas web puedan responder a las\nacciones de usuario, volviéndolas interactivas.
Para incluir JavaScript en un documento HTML puedes utilizar el elemento\nscript y colocar tu código JavaScript entre sus etiquetas de inicio\n(<script>) y cierre (</script>), tal como lo muestra\nel siguiente ejemplo:
<!DOCTYPE html>\n<html>\n <head>\n <title>Mi primera web</title>\n </head>\n <body>\n <h1>¡Hola Mundo!</h1>\n <p>Esta es mi primera web</p>\n\n <script>\n alert('¡Hola Mundo!');\n </script>\n\n </body>\n</html>\nMuchas veces tu código JavaScript es tan extenso que no quieres que esté ubicado\nen el mismo documento HTML. Para eso, la solución es crear un nuevo documento,\nesta vez de formato JavaScript - utilizando la extensión .js - y \"linkear\"\nambos documentos a través del mismo elemento script, de la siguiente manera:
<script src=\"nombre-del-documento.js\"></script>\nEl mismo elemento script tiene un \"atributo\" llamado src (de source, que\nsignifica fuente en inglés), al cual se le puede asignar la ruta de tu\ndocumento JavaScript.
¡Ahora te toca a tí! Continúa con Michelle siguiendo los pasos para agregarle\ninteracción a tu sitio web:
\nLos pasos a seguir son:
\nscript al final del body de tu documento HTMLscript, escribe una línea de código JavaScript (por ejemplo, algo con\nalert(), document.write() o prompt())app.js en la misma carpeta donde está\ntu HTMLsrc al elemento script con la ruta de tu archivo\napp.jsAquí el video de Michelle:
\n![\"Mi](\"https://img.youtube.com/vi/SSiWsDoK4GE/0.jpg\")
El texto a continuación es una traducción al español, con ciertos ajustes, del\ncapítulo 5 de JavaScript for kids,\nNick Morgan, 2015; y de Eloquent JavaScript,\nde Marijn Haverbeke, 2014.
\nHTML (HyperText Markup Language) es el lenguaje utilizado para crear la\nestructura de un sitio web. Para crear este sitio, se empieza creando un\ndocumento en formato HTML. Esto es muy parecido a crear un documento con formato\nword, excel o powerpoint.
\nUn documento HTML simple se ve así (no te asustes si no entiendes todo lo que\ndice, te lo explicaremos paso a paso más abajo):
\n<!DOCTYPE html>\n<html>\n <head>\n <title>Mi primera web</title>\n </head>\n <body>\n <h1>¡Hola Mundo!</h1>\n <p>Esta es mi primera web</p>\n </body>\n</html>\nAl abrir este mismo documento HTML en un navegador (como Chrome), se ve lo\nsiguiente:
\n
El navegador \"lee\" el archivo HTML (el texto y las etiquetas que están adentro)\ny las presenta según las reglas del lenguaje. Por ejemplo, los textos que están\ndentro de las etiquetas <h1> </h1> son considerados encabezados o titulares,\nmientras que los textos dentro de las etiquetas <p> </p> son considerados\npárrafos. Por eso, el texto ¡Hola Mundo! se visualiza mucho más grande que el\ntexto Esta es mi primera web.
Como ya lo dijimos, la mejor manera de aprender es haciendo. Por eso, es\nhora de que tú misma crees una web y aprendas HTML.
\nMichelle te explica por qué necesitarás un editor de texto para los ejercicios:
\n\nEn el siguiente video, Michelle te guiará a través de los siguientes pasos para\nque crees tu primera web:
\nindex.htmlAquí el video:
\n\nLos documentos HTML se componen de elementos. Salvo algunas excepciones (por\nejemplo <!DOCTYPE html>), los elementos comienzan con una etiqueta de inicio\ny terminan con una etiqueta de fin. Por ejemplo, en nuestro documento tenemos\nel elemento p, que comienza con la etiqueta de inicio <p> y termina con la\netiqueta de finalización </p>. El texto que se encuentra entre las etiquetas\nde apertura y de cierre es el contenido del elemento.
\n\nEl elemento
\np(párrafo) como ejemplo:\n
Hagamos un recorrido por todos los elementos de nuestro documento:
\n<!DOCTYPE html> (que como vimos, no\ntiene inicio o cierre). Su función es hacerle saber al navegador que\ninterprete el documento como HTML moderno, en contraposición a varios\ndialectos que estaban en uso en el pasado.<html> (la etiqueta de cierre\n</ html> está al final). Por estándar, todos los documentos HTML deben\ntener un elemento html que \"englobe\" todo lo demás.html hay dos elementos: el head (cabeza en Español) y\nel body (cuerpo en Español). El head contiene información sobre el\ndocumento, y el body contiene el documento en sí.head está el elemento title (con su etiqueta de\ninicio y de cierre), que contiene el título del documento. Es por eso que al\nvisualizar el archivo en el navegador, el título en la pestaña del navegador\ndice: \"Mi primera web\". Es importante que notemos que el elemento title\nestá contenido dentro del elemento head; el cual, a su vez, está\ncontenido dentro del elemento html.body (entre su etiqueta de inicio y de\ncierre) que contiene el contenido que se mostrará en el navegador. En este\ncaso, dentro del body tenemos dos elementos adicionales: el h1 (encabezado)\ny el p (párrafo).Existen muchos más elementos y etiquetas HTML, que aprenderás en su momento. Por\nel momento, es hora de regresar a JavaScript.
\n\nEs importante que entiendas que HTML no es un lenguaje de programación;\nes un lenguaje de marcado de texto. Como hemos visto, con HTML le damos una\nestructura a nuestra página. Sin embargo, si queremos darle comportamiento o\ninteracción a nuestra web, necesitamos usar un lenguaje de programación. Y\nel único lenguaje de programación para correr en los navegadores web es\nJavaScript. Con JavaScript logramos que las páginas web puedan responder a las\nacciones de usuario, volviéndolas interactivas.
Para incluir JavaScript en un documento HTML puedes utilizar el elemento\nscript y colocar tu código JavaScript entre sus etiquetas de inicio\n(<script>) y cierre (</script>), tal como lo muestra\nel siguiente ejemplo:
<!DOCTYPE html>\n<html>\n <head>\n <title>Mi primera web</title>\n </head>\n <body>\n <h1>¡Hola Mundo!</h1>\n <p>Esta es mi primera web</p>\n\n <script>\n alert('¡Hola Mundo!');\n </script>\n\n </body>\n</html>\nMuchas veces tu código JavaScript es tan extenso que no quieres que esté ubicado\nen el mismo documento HTML. Para eso, la solución es crear un nuevo documento,\nesta vez de formato JavaScript - utilizando la extensión .js - y \"linkear\"\nambos documentos a través del mismo elemento script, de la siguiente manera:
<script src=\"nombre-del-documento.js\"></script>\nEl mismo elemento script tiene un \"atributo\" llamado src (de source, que\nsignifica fuente en inglés), al cual se le puede asignar la ruta de tu\ndocumento JavaScript.
¡Ahora te toca a tí! Continúa con Michelle siguiendo los pasos para agregarle\ninteracción a tu sitio web:
\nLos pasos a seguir son:
\nscript al final del body de tu documento HTMLscript, escribe una línea de código JavaScript (por ejemplo, algo con\nalert(), document.write() o prompt())app.js en la misma carpeta donde está\ntu HTMLsrc al elemento script con la ruta de tu archivo\napp.jsAquí el video de Michelle:
\n\n" }, "pt": { "title": "Sua primeira página Web", - "body": "O texto abaixo é uma tradução para o português, com alguns ajustes, do capítulo\n5 de JavaScript for\nkids,\nNick Morgan, 2015; e de Eloquent JavaScript,\nde Marijn Haverbeke, 2014.
\nHTML (HyperText Markup Language) é uma linguagem utilizada para criar a\nestrutura de um site web. Para criar esse site, começamos criando um arquivo em\nformato HTML. Isto é muito parecido com criar um arquivo com formato word, excel\nou powerpoint.
\nUm arquivo HTML simples se vê a seguir (não se assuste se não entender tudo, te\nexplicaremos passo a passo mais abaixo):
\n<!DOCTYPE html>\n<html>\n <head>\n <title>Minha primeira página Web</title>\n </head>\n <body>\n <h1>Olá Mundo!</h1>\n <p>Esta é minha primeira página Web</p>\n </body>\n</html>\nAo abrir este mesmo arquivo HTML em um navegador (como Chrome), se vê o\nseguinte:
\n![\"Visualização](\"https://user-images.githubusercontent.com/11894994/57495168-425ae680-72a3-11e9-96e2-7f1d33a7865c.png\")
O navegador \"lê\" o arquivo HTML (o texto e as tags que estão dentro) e o\napresenta segundo as regras da linguagem. Por exemplo, os textos que estão\ndentro das tags <h1> </h1> são considerados cabeçalhos ou títulos, enquanto os\ntextos que dentro da etiqueta <p> </p> são considerados parágrafos. Por isso,\no texto Olá Mundo! é visualizado muito maior que o texto Esta é minha\nprimeira página Web.
Como já dissemos, a melhor maneira de aprender é fazendo. Por isso, é hora\nde você mesma criar uma página web e aprender HTML.
\nA seguir um vídeo que explica o porquê você precisa de um editor de texto para\nos exercícios:
\n![\"Editor](\"https://img.youtube.com/vi/96usU1K0gwY/0.jpg\")
No próximo vídeo, você será guiada através dos seguintes passos para criar sua\nprimeira página web:
\nindex.html<h1> e um\nparágrafo <p>)Aqui o vídeo:
\n![\"Minha](\"https://img.youtube.com/vi/OR0tpt3zftA/0.jpg\")
Os arquivo HTML são compostos por elementos. Salvo algumas exceções (por\nexemplo <!DOCTYPE html>), os elementos começam com uma tag de abertura e\nterminam com uma tag de fechamento. Por exemplo, no nosso documento teremos o\nelemento p, que começa com a tag de abertura <p>e termina com uma tag de\nfechamento </p>. O texto que se encontra entre as etiquetas de abertura e de\nfechamento é chamado de conteúdo do elemento.
\n\no elemento
\np(parágrafo) como exemplo:
Vamos dar uma passada por todos os elementos do nosso arquivo:
\n<!DOCTYPE html> (que como vimos, não tem\nabertura e fechamento). Sua função é fazer com que o navegador interprete o\narquivo como a última versão do HTML, em contraposição a várias versões\nque estavam em uso no passado.<html> (a tag de fechamento </ html>\nestá ao final). Por convenção, todos os arquivos HTML devem ter o elemento\nhtml que englobe todos os demais.html estão dois elementos: o head (cabeça, em\nportuguês) e o body (corpo, em português). O head contem informações\nsobre o arquivo e o body contem o arquivo em si.head está o elemento title (com sua tag de abertura e\nfechamento), que contem o título do arquivo. É por isso que ao visualizar o\naquivo em um navegador, o título que aparece na aba do navegador é: \"Minha\nprimeira página Web\". É importante que notemos que o elemento title está\ncontido dentro do elemento head, o qual, por sua vez, está contido\ndentro do elemento html.body que contem o conteúdo que se mostrará no\nnavegador. Neste caso, dentro do body temos dois elementos adicionais: o h1\n(cabeçalho) e o p (parágrafo).Existem muito mais elementos e tags HTML que você vai aprender. Por agora, é\nhora de regressar ao JavaScript.
\nÉ importante que você entenda que HTML não é uma linguagem de programação, mas sim uma linguagem de marcação. Como já vimos, com HTML\ndamos uma estrutura a nosso site. No entanto, se queremos dar a ele\ncomportamento ou interação, necessitamos usar uma linguagem de programação. E a única linguagem de programação que roda nos navegadores web\né o JavaScript. Com JavaScript conseguimos que os sites possam responder as\nações dos usuários, tornado-os interativos.
Para incluir JavaScript em um arquivo HTML você pode utilizar o elemento\nscript e colocar seu código JavaScript entre as tags de abertura e fechamento,\ntal como mostra o seguinte exemplo:
<!DOCTYPE html>\n<html>\n <head>\n <title>Minha primeira página Web</title>\n </head>\n <body>\n <h1>Olá Mundo!</h1>\n <p>Esta é minha primeira página Web</p>\n\n <script type=\"text/javascript\">\n alert('Olá Mundo!');\n </script>\n\n </body>\n</html>\nMuitas vezes o código JavaScript é tão extenso que você vai querer que ele não\nesteja escrito no mesmo arquivo HTML. Para isso, a solução é criar um novo\narquivo, em formato JavaScript - usando a extensão .js - e \"linkar\" ambos\narquivos por meio do elemento script da seguinte maneira:
<script src=\"nome-do-arquivo.js\"></script>\nO elemento script tem um \"atributo\" chamado src (de source, que significa\nfonte em inglês), no qual você pode colocar a caminho do seu arquivo JavaScript.
Agora é sua vez! Continue assistindo os vídeos e seguindo os passos para agregar\ninteração ao seu site.
\nOs passos são os seguintes:
\nscript ao final do body de teu arquivo HTMLscript, escreva uma linha de código JavaScript (por exemplo, algo com\nalert(), document.write() ou prompt())app.js na mesma pasta onde está o seu\nHTMLsrc ao elemento script com o caminho do arquivo\napp.jsA seguir o vídeo:
\n![\"Minha](\"https://img.youtube.com/vi/pJ4aYTUjpME/0.jpg\")
O texto abaixo é uma tradução para o português, com alguns ajustes, do capítulo\n5 de JavaScript for\nkids,\nNick Morgan, 2015; e de Eloquent JavaScript,\nde Marijn Haverbeke, 2014.
\nHTML (HyperText Markup Language) é uma linguagem utilizada para criar a\nestrutura de um site web. Para criar esse site, começamos criando um arquivo em\nformato HTML. Isto é muito parecido com criar um arquivo com formato word, excel\nou powerpoint.
\nUm arquivo HTML simples se vê a seguir (não se assuste se não entender tudo, te\nexplicaremos passo a passo mais abaixo):
\n<!DOCTYPE html>\n<html>\n <head>\n <title>Minha primeira página Web</title>\n </head>\n <body>\n <h1>Olá Mundo!</h1>\n <p>Esta é minha primeira página Web</p>\n </body>\n</html>\nAo abrir este mesmo arquivo HTML em um navegador (como Chrome), se vê o\nseguinte:
\n
O navegador \"lê\" o arquivo HTML (o texto e as tags que estão dentro) e o\napresenta segundo as regras da linguagem. Por exemplo, os textos que estão\ndentro das tags <h1> </h1> são considerados cabeçalhos ou títulos, enquanto os\ntextos que dentro da etiqueta <p> </p> são considerados parágrafos. Por isso,\no texto Olá Mundo! é visualizado muito maior que o texto Esta é minha\nprimeira página Web.
Como já dissemos, a melhor maneira de aprender é fazendo. Por isso, é hora\nde você mesma criar uma página web e aprender HTML.
\nA seguir um vídeo que explica o porquê você precisa de um editor de texto para\nos exercícios:
\n\nNo próximo vídeo, você será guiada através dos seguintes passos para criar sua\nprimeira página web:
\nindex.html<h1> e um\nparágrafo <p>)Aqui o vídeo:
\n\nOs arquivo HTML são compostos por elementos. Salvo algumas exceções (por\nexemplo <!DOCTYPE html>), os elementos começam com uma tag de abertura e\nterminam com uma tag de fechamento. Por exemplo, no nosso documento teremos o\nelemento p, que começa com a tag de abertura <p>e termina com uma tag de\nfechamento </p>. O texto que se encontra entre as etiquetas de abertura e de\nfechamento é chamado de conteúdo do elemento.
\n\no elemento
\np(parágrafo) como exemplo:
Vamos dar uma passada por todos os elementos do nosso arquivo:
\n<!DOCTYPE html> (que como vimos, não tem\nabertura e fechamento). Sua função é fazer com que o navegador interprete o\narquivo como a última versão do HTML, em contraposição a várias versões\nque estavam em uso no passado.<html> (a tag de fechamento </ html>\nestá ao final). Por convenção, todos os arquivos HTML devem ter o elemento\nhtml que englobe todos os demais.html estão dois elementos: o head (cabeça, em\nportuguês) e o body (corpo, em português). O head contem informações\nsobre o arquivo e o body contem o arquivo em si.head está o elemento title (com sua tag de abertura e\nfechamento), que contem o título do arquivo. É por isso que ao visualizar o\naquivo em um navegador, o título que aparece na aba do navegador é: \"Minha\nprimeira página Web\". É importante que notemos que o elemento title está\ncontido dentro do elemento head, o qual, por sua vez, está contido\ndentro do elemento html.body que contem o conteúdo que se mostrará no\nnavegador. Neste caso, dentro do body temos dois elementos adicionais: o h1\n(cabeçalho) e o p (parágrafo).Existem muito mais elementos e tags HTML que você vai aprender. Por agora, é\nhora de regressar ao JavaScript.
\nÉ importante que você entenda que HTML não é uma linguagem de programação, mas sim uma linguagem de marcação. Como já vimos, com HTML\ndamos uma estrutura a nosso site. No entanto, se queremos dar a ele\ncomportamento ou interação, necessitamos usar uma linguagem de programação. E a única linguagem de programação que roda nos navegadores web\né o JavaScript. Com JavaScript conseguimos que os sites possam responder as\nações dos usuários, tornado-os interativos.
Para incluir JavaScript em um arquivo HTML você pode utilizar o elemento\nscript e colocar seu código JavaScript entre as tags de abertura e fechamento,\ntal como mostra o seguinte exemplo:
<!DOCTYPE html>\n<html>\n <head>\n <title>Minha primeira página Web</title>\n </head>\n <body>\n <h1>Olá Mundo!</h1>\n <p>Esta é minha primeira página Web</p>\n\n <script type=\"text/javascript\">\n alert('Olá Mundo!');\n </script>\n\n </body>\n</html>\nMuitas vezes o código JavaScript é tão extenso que você vai querer que ele não\nesteja escrito no mesmo arquivo HTML. Para isso, a solução é criar um novo\narquivo, em formato JavaScript - usando a extensão .js - e \"linkar\" ambos\narquivos por meio do elemento script da seguinte maneira:
<script src=\"nome-do-arquivo.js\"></script>\nO elemento script tem um \"atributo\" chamado src (de source, que significa\nfonte em inglês), no qual você pode colocar a caminho do seu arquivo JavaScript.
Agora é sua vez! Continue assistindo os vídeos e seguindo os passos para agregar\ninteração ao seu site.
\nOs passos são os seguintes:
\nscript ao final do body de teu arquivo HTMLscript, escreva uma linha de código JavaScript (por exemplo, algo com\nalert(), document.write() ou prompt())app.js na mesma pasta onde está o seu\nHTMLsrc ao elemento script com o caminho do arquivo\napp.jsA seguir o vídeo:
\n" } } }, @@ -117,11 +117,11 @@ "intl": { "es": { "title": "HTML", - "body": "Anteriormente aprendiste a crear un archivo HTML y a vincularlo con tu archivo\nJavaScript. En esta lectura profundizaremos más en HTML.
\nRevisando directamente la documentación del Mozilla Developer Network\ntenemos lo siguiente:
\n\n\nHTML (HyperText Markup Language) no es un lenguaje de programación, es un\nlenguaje de marcado, usado para decirle a tu navegador cómo estructurar las\npáginas que visitas. Puede ser tan complejo o tan simple como desee el\ndesarollador web.
\nHTML consiste en una serie de elementos, que puedes utilizar para encerrar,\nenvolver, o marcar partes diferentes del contenido para hacer que aparezcan de\nuna cierta manera, o actúen de determinada forma. Las etiquetas que envuelven\nun trozo de contenido pueden hacer que dicho contenido enlace con otra página,\nponga una palabra en cursiva, etcétera.
\n
HTML5 es la última versión de HTML. El término representa dos conceptos\ndiferentes:
\nDiseñado para ser utilizable por todos los desarrolladores de Open Web, esta\npágina referencía numerosos recursos sobre las tecnologías de HTML5,\nclasificados en varios grupos según su función.
\n\n\nEste es un extracto de la documentación de MDN\nque podemos encontrar sobre HTML5.
\n
Recordemos que salvo algunas excepciones (por ejemplo <!DOCTYPE html>), los\nelementos html comienzan con una etiqueta de apertura (o inicio) y terminan\ncon una etiqueta de cierre (o fin). Por ejemplo, el elemento p comienza\ncon la etiqueta de inicio <p> y termina con la etiqueta de cierre </p>. El\ntexto que se encuentra entre las etiquetas de apertura y de cierre es el\ncontenido del elemento.
![\"Ejemplo](\"https://user-images.githubusercontent.com/25906896/39716065-df4e7158-51f4-11e8-9a4c-90f1e82bcd09.png\")
Un elemento puede contener en su contenido otros elementos o etiquetas HTML.\nEsto se llama anidamiento.
\nRecordemos la estructura básica de un documento html que hemos venido usando\nen la mayoría de nuestros ejercicios y agreguemos un par de elementos\nadicionales:
\n<!DOCTYPE html>\n<html>\n <head>\n <title>HTML anidado</title>\n </head>\n <body>\n <h1>Laboratoria</h1>\n <p>Código <em>que</em> <strong>transforma</strong></p>\n </body>\n</html>\nFíjate cómo ciertos elementos \"anidan\" otros. Es decir, algunos\nelementos están \"contenidos\" dentro de otros. Por ejemplo, el elemento body\ntiene dos elementos anidados (o hijos) que son el título h1 y el\npárrafo p. A su vez, el párrafo p contiene dos elementos adicionales\n(otros hijos): em y strong.
Podemos visualizar este concepto de anidamiento html de la siguiente manera:
\n![\"Anidamiento](\"http://www.mrinitialman.com/Library/HTML/Pictures/HTML-Markup_Basics/html_nesting.png\")
En este ejemplo vemos elementos que ya deberían ser familiares para ti. Ya\nconoces sobre la etiqueta DOCTYPE, los elementos head, body, title, h1\ny p. Un par de elementos adicionales que hemos añandido son: em que hace que\nsu contenido se visualice como texto en cursiva y strong que hace que su\ncontenido se visualice como texto en negrita.
Al abrir este documento en el navegador tendremos lo siguiente:
\n![\"HTML](\"https://user-images.githubusercontent.com/25906896/39716135-1c508578-51f5-11e8-97e4-074490066dac.png\")
Regresemos a la lectura de HTML del Mozilla Developer Network.\nNos dice:
\n\n\nExisten dos importantes categorías de elementos en HTML: elementos a nivel de\nbloque y elementos en línea.
\nLos elementos a nivel de bloque forman un bloque visible en una página —\naparecerán en una nueva línea de cualquier contenido que haya venido antes,\ny cualquier contenido que venga después también aparecerá en una nueva línea.\nLos elementos a nivel de bloque tienden a ser elementos estructurales en la\npágina que representan por ejemplo párrafos, listas, menús de navegación,\npies de página, etc. Un elemento a nivel de bloque no estaría anidado dentro\nde un elemento en línea, pero podría estar anidado dentro de otro elemento\na nivel de bloque.
\nLos elementos en línea son aquellos que están contenidos dentro de\nelementos a nivel de bloque y rodean solo pequeñas partes del contenido\ndel documento, no párrafos enteros ni agrupaciones de contenido. Un elemento\nen línea no causará que una nueva línea aparezca en el documento:\nnormalmente aparecen dentro de un párrafo o texto, por ejemplo elementos de\nénfasis como
\nemostrong.
Veamos un ejemplo:
\n<!DOCTYPE html>\n<html>\n <head>\n <title>HTML anidado</title>\n </head>\n <body>\n <em>primero</em><strong>segundo</strong><em>tercero</em>\n <p>cuarto</p><p>quinto</p><p>sexto</p>\n </body>\n</html>\nAl visualizar el documento anterior en el navegador tendremos:
\n![\"Block](\"https://user-images.githubusercontent.com/25906896/39716266-7376cd4e-51f5-11e8-9169-229c007eaacb.png\")
Tanto em como strong son elementos en línea. Por lo tanto, los tres\nprimeros elementos se sitúan en la misma línea uno tras otros sin espacio\nentre ellos. Por otro lado, p es un elemento a nivel de bloque, así que\ncada elemento aparece en una nueva línea, con espacio sobre y debajo de\ncada p.
Tienes a tu disposición múltiples elementos HTML para construir productos en\nla web. Investiga por tu cuenta (utilizando tu gran aliado Google) y aprende\ncómo agregar lo siguiente a una web:
\nPara cada elemento anterior entiende si se comporta como inline o como\nblock.
En tu investigación seguro te topaste con\nel elemento a para agregar un link a tu web:\ny habrás notado que en la etiqueta de apertura aparece una serie de información:
<a href=\"http://laboratoria.la/\" target=\"_blank\" title=\"Página de inicio de Laboratoria\">Ir a Laboratoria</a>\nEsa información son atributos. Los atributos nos dan información adicional\nsobre el contenido de un elemento que no queremos que aparezca en el\ncontenido actual. En algunos casos agregan características\ny/o comportamiento a tu elemento HTML. Los atributos aparencen en la\netiqueta de apertura del elemento y consisten de dos partes: un nombre\ny un valor, separados por un signo de igual (=).
En el caso del ejemplo anterior, podemos visualizar tres\natributos: el atributo href, el atributo target y el atributo title.
El atributo href especifica la dirección web que quieres que el enlace\napunte; es decir, donde el navegador navega cuando se le hace clic. En este\nejemplo vemos que apunta a la página de inicio de Laboratoria:\nhttp://laboratoria.la/
El atributo target especifica el contexto de navegación que será usado\npara mostrar el enlace. Por ejemplo, target=\"_blank\" mostrará el enlace en\nuna nueva pestaña. Si quieres mostrar el enlace en la pestaña actual solo\nomite este atributo.
El atributo title especifica información extra sobre el enlace, como qué\npágina es la que estás enlazando. En nuestro ejemplo dice \"Página de inicio\nde Laboratoria\". Esto aparecera como información cuando se pase el mouse\npor encima del link.
Existen muchos atributos comunes a todos los elementos html y existen atributos\nespecíficos que son asociados a un elemento en particular. Un atributo que\naplica a casi todos los elementos html es el atributo style lo cual\npermite darle estilos a tu elemento. Por ejemplo, si queremos que el contenido\ndentro de un elemento p sea de color rojo sobre fondo amarillo y con un borde\nnegro, hacemos:
<p style=\"color:red; background-color: yellow; border: 1px solid black;\">Código\n <em>que</em>\n <strong>transforma</strong>\n</p>\nAl visualizar el documento anterior en el navegador tendremos:
\n![\"Style](\"https://user-images.githubusercontent.com/25906896/39716433-f7d20fa4-51f5-11e8-820d-79dca1dbd781.png\")
Un atributo de estilo puede contener una o más declaraciones. Cada declaración\nestá compuesta por una\npropiedad (como el color) seguida de dos puntos y un valor\n(como rojo). Cuando tenemos más de una declaración, cada una debe estar\nseparada por punto y coma (;). Por ejemplo: \"color:red; background-color: yellow;\".
Hay un montón de aspectos que pueden ser influenciados por el estilo. Por\nejemplo, la propiedad display controla si un elemento se muestra como un\nbloque o en línea, o inclusive no mostrarlo:
<p>\n Un texto se puede mostrar <strong>en línea</strong>,\n <strong style=\"display: block\">como bloque</strong>, y\n <strong style=\"display: none\">no visualizarse</strong>.\n</p>\nLa vista en el navegador de esto sería:
\n![\"Style](\"https://user-images.githubusercontent.com/25906896/39716464-0fad0926-51f6-11e8-8ad6-011543112229.png\")
El texto \"en línea\" se muestra inline (es decir, en la misma línea del texto\nanterior \"Un texto se puede mostrar\") porque recordemos que el elemento strong\nes de tipo inline. El texto \"como bloque\" terminará en su propia línea, ya que\nlos elementos de tipo bloque no se muestran en línea con el texto que los\nrodea. Recuerda que cuando un elemento es de tipo bloque aparecerá en una\nnueva línea de cualquier contenido que haya venido antes,\ny cualquier contenido que venga después también aparecerá en una nueva\nlínea. El texto \"no visualizarse\" no se muestra porque al asignar el valor de\nnone para display impide que un elemento aparezca en la pantalla. Esta es\nuna forma de ocultar elementos.
En tu investigación seguro también te topaste con\nel elemento <img> para agregar una imagen a tu web\ny habrás notado que no tiene una etiqueta de cierre y, por lo tanto, no tiene\n\"contenido\":
<img src=\"http://cde.2.trome.pe/ima/0/1/1/8/5/1185397.jpg\">\nAlgunas etiquetas no tienen directamente contenido; más bien reciben una fuente\nde la cual obtener el contenido. Esto es lo que sucede con\nel elemento img. El atributo src brinda la ruta del contenido. En este caso,\nal ir a la ruta http://cde.2.trome.pe/ima/0/1/1/8/5/1185397.jpg encontraremos\nla foto de Mariana con Mark y Barack :)
![\"Foto](\"http://cde.2.trome.pe/ima/0/1/1/8/5/1185397.jpg\")
Otro elemento que no tiene etiqueta de cierre es br. Lee la documentación\nde MDN sobre br.\n¿Para qué sirve br?
Así como podemos comentar nuestro código javascript para hacerlo más\nentendible, también podemos agregar comentarios a nuestro código html.\nPara definir un comentario en un archivo html, usamos las etiquetas <!-- para\narbrir el comentario y --> para cerrarlo.
<!-- Esto es un comentario. No se verá en la web, pero sí en mi código. -->\nAhora que tienes una idea de los elementos html más comunes, su\ncomportamiento (inline vs block) y sus atributos principales, Michelle te\nexplicará cómo construir una réplica de la página de Grace Hopper de wikipedia:
![\"Grace](\"https://img.youtube.com/vi/9w5ITAr2hlQ/0.jpg\")
div y spanMuchas veces al crear nuestra estructura HTML se vuelve necesario \"agrupar\"\nelementos para dividir nuestra web en secciones o partes lógicas. Por ejemplo,\nsi en el footer (o pie de página) de nuestra web queremos mostrar los íconos\nde nuestras redes sociales junto a links de contacto, es útil agrupar todos\nlos íconos en una sección y los links en otra sección, y que ambos grupos estén\ncontenidos dentro del footer.
\nPara realizar estas agrupaciones, podemos utilizar los elementos div y\nspan. Los elementos div y span son como \"contenedores\" vacíos que\nllenamos de otros elementos y contenido.
El elemento div define una división o una sección en un documento\nHTML. Se utiliza para agrupar elementos de bloque. Frecuentemente se\nutiliza como un contenedor para otros elementos. Un div es un bloque, lo\nque significa que tiene un salto de línea antes y después.
El elemento span se utiliza como un contenedor para textos. Es de\ntipo inline; es decir, aparece entre líneas, como parte de un párrafo.
Veamos un ejemplo:
\n<!DOCTYPE html>\n<html>\n <body>\n <div style=\"background-color: green; color: white\">\n <h2>Ciudad de México</h2>\n <p>La Ciudad de México, anteriormente conocida como el Distrito Federal,\n es una de las 32 entidades federativas de México, así como la capital\n de los <span style =\"color: yellow\">Estados Unidos Mexicanos</span>.\n </p>\n </div>\n <div style=\"background-color: red; color: white\">\n <h2>Lima</h2>\n <p>Lima es la capital de la <span style =\"color: yellow\">República del\n Perú</span> y de la provincia homónima. Se sitúa en la costa central\n del país, a orillas del océano Pacífico, conformando una extensa y\n populosa área urbana conocida como Lima Metropolitana, flanqueada por\n el desierto costero y extendida sobre los valles de los ríos Chillón,\n Rímac y Lurín.\n </p>\n </div>\n <div style=\"background-color: blue; color: white\">\n <h2>Santiago</h2>\n <p>Santiago, llamada también Santiago de Chile, es la capital de\n <span style =\"color: yellow\">Chile</span> y de la región Metropolitana\n de Santiago. Es el principal núcleo urbano del país y su área\n metropolitana se conoce también con el nombre de Gran Santiago.\n </p>\n </div>\n </body>\n</html>\nAl visualizar el ejemplo anterior en el navegador tenemos:
\n![\"Div](\"https://user-images.githubusercontent.com/25906896/39716525-376456d6-51f6-11e8-8ade-2f9cb65a0ea1.png\")
Fíjate cómo hemos agrupado todo lo relacionado a un país en un div. Esto es\nútil porque crea secciones que siguen un orden lógico. Pero, más importante\naún, tener estas secciones separadas permite darle estilos diferentes a cada\nsección: el color de fondo y el color de la fuente varían para cada\npaís. Lo mismo sucede con las palabras que mostramos en amarillo. Gracias a span\npodemos hacer que ciertos pedazos de texto tengan un estilo diferente.
Anteriormente aprendiste a crear un archivo HTML y a vincularlo con tu archivo\nJavaScript. En esta lectura profundizaremos más en HTML.
\nRevisando directamente la documentación del Mozilla Developer Network\ntenemos lo siguiente:
\n\n\nHTML (HyperText Markup Language) no es un lenguaje de programación, es un\nlenguaje de marcado, usado para decirle a tu navegador cómo estructurar las\npáginas que visitas. Puede ser tan complejo o tan simple como desee el\ndesarollador web.
\nHTML consiste en una serie de elementos, que puedes utilizar para encerrar,\nenvolver, o marcar partes diferentes del contenido para hacer que aparezcan de\nuna cierta manera, o actúen de determinada forma. Las etiquetas que envuelven\nun trozo de contenido pueden hacer que dicho contenido enlace con otra página,\nponga una palabra en cursiva, etcétera.
\n
HTML5 es la última versión de HTML. El término representa dos conceptos\ndiferentes:
\nDiseñado para ser utilizable por todos los desarrolladores de Open Web, esta\npágina referencía numerosos recursos sobre las tecnologías de HTML5,\nclasificados en varios grupos según su función.
\n\n\nEste es un extracto de la documentación de MDN\nque podemos encontrar sobre HTML5.
\n
Recordemos que salvo algunas excepciones (por ejemplo <!DOCTYPE html>), los\nelementos html comienzan con una etiqueta de apertura (o inicio) y terminan\ncon una etiqueta de cierre (o fin). Por ejemplo, el elemento p comienza\ncon la etiqueta de inicio <p> y termina con la etiqueta de cierre </p>. El\ntexto que se encuentra entre las etiquetas de apertura y de cierre es el\ncontenido del elemento.
Un elemento puede contener en su contenido otros elementos o etiquetas HTML.\nEsto se llama anidamiento.
\nRecordemos la estructura básica de un documento html que hemos venido usando\nen la mayoría de nuestros ejercicios y agreguemos un par de elementos\nadicionales:
\n<!DOCTYPE html>\n<html>\n <head>\n <title>HTML anidado</title>\n </head>\n <body>\n <h1>Laboratoria</h1>\n <p>Código <em>que</em> <strong>transforma</strong></p>\n </body>\n</html>\nFíjate cómo ciertos elementos \"anidan\" otros. Es decir, algunos\nelementos están \"contenidos\" dentro de otros. Por ejemplo, el elemento body\ntiene dos elementos anidados (o hijos) que son el título h1 y el\npárrafo p. A su vez, el párrafo p contiene dos elementos adicionales\n(otros hijos): em y strong.
Podemos visualizar este concepto de anidamiento html de la siguiente manera:
\n
En este ejemplo vemos elementos que ya deberían ser familiares para ti. Ya\nconoces sobre la etiqueta DOCTYPE, los elementos head, body, title, h1\ny p. Un par de elementos adicionales que hemos añandido son: em que hace que\nsu contenido se visualice como texto en cursiva y strong que hace que su\ncontenido se visualice como texto en negrita.
Al abrir este documento en el navegador tendremos lo siguiente:
\n
Regresemos a la lectura de HTML del Mozilla Developer Network.\nNos dice:
\n\n\nExisten dos importantes categorías de elementos en HTML: elementos a nivel de\nbloque y elementos en línea.
\nLos elementos a nivel de bloque forman un bloque visible en una página —\naparecerán en una nueva línea de cualquier contenido que haya venido antes,\ny cualquier contenido que venga después también aparecerá en una nueva línea.\nLos elementos a nivel de bloque tienden a ser elementos estructurales en la\npágina que representan por ejemplo párrafos, listas, menús de navegación,\npies de página, etc. Un elemento a nivel de bloque no estaría anidado dentro\nde un elemento en línea, pero podría estar anidado dentro de otro elemento\na nivel de bloque.
\nLos elementos en línea son aquellos que están contenidos dentro de\nelementos a nivel de bloque y rodean solo pequeñas partes del contenido\ndel documento, no párrafos enteros ni agrupaciones de contenido. Un elemento\nen línea no causará que una nueva línea aparezca en el documento:\nnormalmente aparecen dentro de un párrafo o texto, por ejemplo elementos de\nénfasis como
\nemostrong.
Veamos un ejemplo:
\n<!DOCTYPE html>\n<html>\n <head>\n <title>HTML anidado</title>\n </head>\n <body>\n <em>primero</em><strong>segundo</strong><em>tercero</em>\n <p>cuarto</p><p>quinto</p><p>sexto</p>\n </body>\n</html>\nAl visualizar el documento anterior en el navegador tendremos:
\n
Tanto em como strong son elementos en línea. Por lo tanto, los tres\nprimeros elementos se sitúan en la misma línea uno tras otros sin espacio\nentre ellos. Por otro lado, p es un elemento a nivel de bloque, así que\ncada elemento aparece en una nueva línea, con espacio sobre y debajo de\ncada p.
Tienes a tu disposición múltiples elementos HTML para construir productos en\nla web. Investiga por tu cuenta (utilizando tu gran aliado Google) y aprende\ncómo agregar lo siguiente a una web:
\nPara cada elemento anterior entiende si se comporta como inline o como\nblock.
En tu investigación seguro te topaste con\nel elemento a para agregar un link a tu web:\ny habrás notado que en la etiqueta de apertura aparece una serie de información:
<a href=\"http://laboratoria.la/\" target=\"_blank\" title=\"Página de inicio de Laboratoria\">Ir a Laboratoria</a>\nEsa información son atributos. Los atributos nos dan información adicional\nsobre el contenido de un elemento que no queremos que aparezca en el\ncontenido actual. En algunos casos agregan características\ny/o comportamiento a tu elemento HTML. Los atributos aparencen en la\netiqueta de apertura del elemento y consisten de dos partes: un nombre\ny un valor, separados por un signo de igual (=).
En el caso del ejemplo anterior, podemos visualizar tres\natributos: el atributo href, el atributo target y el atributo title.
El atributo href especifica la dirección web que quieres que el enlace\napunte; es decir, donde el navegador navega cuando se le hace clic. En este\nejemplo vemos que apunta a la página de inicio de Laboratoria:\nhttp://laboratoria.la/
El atributo target especifica el contexto de navegación que será usado\npara mostrar el enlace. Por ejemplo, target=\"_blank\" mostrará el enlace en\nuna nueva pestaña. Si quieres mostrar el enlace en la pestaña actual solo\nomite este atributo.
El atributo title especifica información extra sobre el enlace, como qué\npágina es la que estás enlazando. En nuestro ejemplo dice \"Página de inicio\nde Laboratoria\". Esto aparecera como información cuando se pase el mouse\npor encima del link.
Existen muchos atributos comunes a todos los elementos html y existen atributos\nespecíficos que son asociados a un elemento en particular. Un atributo que\naplica a casi todos los elementos html es el atributo style lo cual\npermite darle estilos a tu elemento. Por ejemplo, si queremos que el contenido\ndentro de un elemento p sea de color rojo sobre fondo amarillo y con un borde\nnegro, hacemos:
<p style=\"color:red; background-color: yellow; border: 1px solid black;\">Código\n <em>que</em>\n <strong>transforma</strong>\n</p>\nAl visualizar el documento anterior en el navegador tendremos:
\n
Un atributo de estilo puede contener una o más declaraciones. Cada declaración\nestá compuesta por una\npropiedad (como el color) seguida de dos puntos y un valor\n(como rojo). Cuando tenemos más de una declaración, cada una debe estar\nseparada por punto y coma (;). Por ejemplo: \"color:red; background-color: yellow;\".
Hay un montón de aspectos que pueden ser influenciados por el estilo. Por\nejemplo, la propiedad display controla si un elemento se muestra como un\nbloque o en línea, o inclusive no mostrarlo:
<p>\n Un texto se puede mostrar <strong>en línea</strong>,\n <strong style=\"display: block\">como bloque</strong>, y\n <strong style=\"display: none\">no visualizarse</strong>.\n</p>\nLa vista en el navegador de esto sería:
\n
El texto \"en línea\" se muestra inline (es decir, en la misma línea del texto\nanterior \"Un texto se puede mostrar\") porque recordemos que el elemento strong\nes de tipo inline. El texto \"como bloque\" terminará en su propia línea, ya que\nlos elementos de tipo bloque no se muestran en línea con el texto que los\nrodea. Recuerda que cuando un elemento es de tipo bloque aparecerá en una\nnueva línea de cualquier contenido que haya venido antes,\ny cualquier contenido que venga después también aparecerá en una nueva\nlínea. El texto \"no visualizarse\" no se muestra porque al asignar el valor de\nnone para display impide que un elemento aparezca en la pantalla. Esta es\nuna forma de ocultar elementos.
En tu investigación seguro también te topaste con\nel elemento <img> para agregar una imagen a tu web\ny habrás notado que no tiene una etiqueta de cierre y, por lo tanto, no tiene\n\"contenido\":
<img src=\"http://cde.2.trome.pe/ima/0/1/1/8/5/1185397.jpg\">\nAlgunas etiquetas no tienen directamente contenido; más bien reciben una fuente\nde la cual obtener el contenido. Esto es lo que sucede con\nel elemento img. El atributo src brinda la ruta del contenido. En este caso,\nal ir a la ruta http://cde.2.trome.pe/ima/0/1/1/8/5/1185397.jpg encontraremos\nla foto de Mariana con Mark y Barack :)
Otro elemento que no tiene etiqueta de cierre es br. Lee la documentación\nde MDN sobre br.\n¿Para qué sirve br?
Así como podemos comentar nuestro código javascript para hacerlo más\nentendible, también podemos agregar comentarios a nuestro código html.\nPara definir un comentario en un archivo html, usamos las etiquetas <!-- para\narbrir el comentario y --> para cerrarlo.
<!-- Esto es un comentario. No se verá en la web, pero sí en mi código. -->\nAhora que tienes una idea de los elementos html más comunes, su\ncomportamiento (inline vs block) y sus atributos principales, Michelle te\nexplicará cómo construir una réplica de la página de Grace Hopper de wikipedia:
div y spanMuchas veces al crear nuestra estructura HTML se vuelve necesario \"agrupar\"\nelementos para dividir nuestra web en secciones o partes lógicas. Por ejemplo,\nsi en el footer (o pie de página) de nuestra web queremos mostrar los íconos\nde nuestras redes sociales junto a links de contacto, es útil agrupar todos\nlos íconos en una sección y los links en otra sección, y que ambos grupos estén\ncontenidos dentro del footer.
\nPara realizar estas agrupaciones, podemos utilizar los elementos div y\nspan. Los elementos div y span son como \"contenedores\" vacíos que\nllenamos de otros elementos y contenido.
El elemento div define una división o una sección en un documento\nHTML. Se utiliza para agrupar elementos de bloque. Frecuentemente se\nutiliza como un contenedor para otros elementos. Un div es un bloque, lo\nque significa que tiene un salto de línea antes y después.
El elemento span se utiliza como un contenedor para textos. Es de\ntipo inline; es decir, aparece entre líneas, como parte de un párrafo.
Veamos un ejemplo:
\n<!DOCTYPE html>\n<html>\n <body>\n <div style=\"background-color: green; color: white\">\n <h2>Ciudad de México</h2>\n <p>La Ciudad de México, anteriormente conocida como el Distrito Federal,\n es una de las 32 entidades federativas de México, así como la capital\n de los <span style =\"color: yellow\">Estados Unidos Mexicanos</span>.\n </p>\n </div>\n <div style=\"background-color: red; color: white\">\n <h2>Lima</h2>\n <p>Lima es la capital de la <span style =\"color: yellow\">República del\n Perú</span> y de la provincia homónima. Se sitúa en la costa central\n del país, a orillas del océano Pacífico, conformando una extensa y\n populosa área urbana conocida como Lima Metropolitana, flanqueada por\n el desierto costero y extendida sobre los valles de los ríos Chillón,\n Rímac y Lurín.\n </p>\n </div>\n <div style=\"background-color: blue; color: white\">\n <h2>Santiago</h2>\n <p>Santiago, llamada también Santiago de Chile, es la capital de\n <span style =\"color: yellow\">Chile</span> y de la región Metropolitana\n de Santiago. Es el principal núcleo urbano del país y su área\n metropolitana se conoce también con el nombre de Gran Santiago.\n </p>\n </div>\n </body>\n</html>\nAl visualizar el ejemplo anterior en el navegador tenemos:
\n
Fíjate cómo hemos agrupado todo lo relacionado a un país en un div. Esto es\nútil porque crea secciones que siguen un orden lógico. Pero, más importante\naún, tener estas secciones separadas permite darle estilos diferentes a cada\nsección: el color de fondo y el color de la fuente varían para cada\npaís. Lo mismo sucede con las palabras que mostramos en amarillo. Gracias a span\npodemos hacer que ciertos pedazos de texto tengan un estilo diferente.
Anteriormente você aprendeu a criar um arquivo HTML e vinculá-lo ao seu arquivo\nJavaScript. Nesta lição, nos aprofundaremos no HTML.
\nAnalisando diretamente a documentação da Mozilla Developer\nNetwork,\ntemos o seguinte:
\n\n\nHTML (HyperText Markup Language) não é uma linguagem de programação, é uma\nlinguagem de marcação utilizada para dizer ao seu navegador como estruturar a\npágina web que você visita. A página pode ser tão complicada ou tão simples\nquanto o desenvolvedor web desejar que seja.
\nO HTML consiste em uma série de elementos que você usa para anexar, envolver ou\nmarcar diferentes partes do conteúdo para que apareça ou aja de uma certa\nmaneira. O fechamento das tags pode transformar uma parte do conteúdo dentro do\nelemento em um link para direcionar à uma outra página web, colocar as palavras\nem itálico, e assim por diante.
\n
HTML5 é a última versão do HTML. Ele apresenta dois conceitos diferentes:
\nDesenhado de forma a ser utilizado por todos os desenvolvedores de Open Web,\nesta página referencia numerosos recursos sobre as tecnologias de HTML5,\nclassificados em grupos segundo sua função.
\n\n\nEste é um extrato da documentação do\nMDN que podemos encontrar\nsobre HTML5.
\n
Lembre-se de que, com algumas exceções (por exemplo <!DOCTYPE html>), os\nelementos html começam com um tag de abertura ou início e terminam com um\ntag de fechamento (ou fim). Por exemplo, o elemento p começa com a tag\ninicial <p> e termina com a tag final </p>. O texto entre as tags de\nabertura e fechamento é o conteúdo do elemento.
![\"Tag](\"https://user-images.githubusercontent.com/11894994/57495817-43414780-72a6-11e9-9fb5-8ee6cab80f08.jpg\")
Um elemento pode conter outros elementos ou tags HTML em seu conteúdo. Isso é\nchamado de aninhamento.
\nLembre-se da estrutura básica de um documento HTML que estamos usando na maioria\ndos nossos exercícios e inclua alguns elementos adicionais:
\n<!DOCTYPE html>\n<html>\n <head>\n <title>HTML Aninhado</title>\n </head>\n <body>\n <h1>Laboratoria</h1>\n <p>Código <em>que</em> <strong>transforma</strong></p>\n </body>\n</html>\nObserve como certos elementos \"aninham\" outros. Ou seja, alguns elementos estão\n\"contidos\" nos outros. Por exemplo, o elemento body tem dois elementos\naninhados (ou filhos) que são o título h1 e o parágrafo p. Por sua vez, o\nparágrafo p contém dois elementos adicionais (outras crianças): em ou\nstrong.
Podemos visualizar esse conceito de aninhamento de html da seguinte maneira:
\nNeste exemplo, vemos elementos que já devem ser familiares para você. Você sabe\nsobre a tag DOCTYPE, elementos head, body, title, h1 e p. Alguns\nelementos adicionais que adicionamos são: o em que faz com que seu conteúdo\nseja exibido como texto em itálico e strong que faz com que seu conteúdo\nseja exibido como texto em negrito.
Ao abrir este documento no navegador, teremos o seguinte:
\n
Vamos voltar para a leitura sobre HTML da Mozilla Developer\nNetwork:
\n\n\nHá duas categorias importantes no HTML, que você precisa conhecer — elementos\nem bloco e elementos inline.
\nElementos em bloco formam um bloco visível na página. Eles aparecerão em\numa nova linha logo após qualquer elemento que venha antes dele, e qualquer\nconteúdo depois de um elemento em bloco também aparecerá em uma nova linha.\nElementos em bloco geralmente são elementos estruturais na página que\nrepresentam, por exemplo: parágrafos, listas, menus de navegação, rodapés etc.\nUm elemento em bloco não seria aninhado dentro de um elemento inline, mas pode\nser aninhado dentro de outro elemento em bloco.
\nElementos inline (na linha) são aqueles que estão contidos dentro de\nelementos em bloco, envolvem apenas pequenas partes do conteúdo do documento e\nnão parágrafos inteiros ou agrupamentos de conteúdo. Um elemento inline não\nfará com que uma nova linha apareça no documento: os elementos inline\ngeralmente aparecem dentro de um parágrafo de texto, por exemplo: um elemento\n
\n<a>(hyperlink) ou elementos de ênfase como<em>ou<strong>.
Vamos ver um exemplo:
\n<!DOCTYPE html>\n<html>\n <head>\n <title>HTML Aninhado</title>\n </head>\n <body>\n <em>primeiro</em><strong>segundo</strong><em>terceiro</em>\n <p>quarto</p><p>quinto</p><p>sexto</p>\n </body>\n</html>\nAo visualizar o documento anterior no navegador, teremos:
\n![\"Bloco](\"https://user-images.githubusercontent.com/11894994/57496406-21958f80-72a9-11e9-8333-1c869f793a4d.png\")
Tanto em quanto eles strong são elementos inline. Portanto, os primeiros\ntrês elementos são colocados na mesma linha, um após o outro, sem espaço entre\neles. Por outro lado, p é um elemento no nível do bloco, então cada elemento\naparece em uma nova linha, com espaço acima e abaixo de cada um p.
Você tem à sua disposição vários elementos HTML para criar sites na web.\nInvestigue você mesmo (usando seu excelente parceiro do Google) e saiba como\nadicionar o seguinte a um website:
\nPara cada elemento anterior, entenda se ele se comporta como inline ou como\nblock.
Em sua pesquisa, você certamente se deparou com o elemento a para adicionar\num link ao seu\nsite: e você deve\nter notado que uma série de informações aparece na tag de abertura:
<a href=\"http://laboratoria.la/\" target=\"_blank\" title=\"Página inicial da Laboratoria\">Ir para Laboratoria</a>\nEssas informações são atributos. Os atributos nos fornecem informações\nadicionais sobre o conteúdo de um elemento que não queremos que apareça no\nconteúdo atual. Em alguns casos, eles adicionam recursos e/ou comportamento ao\nseu elemento HTML. Os atributos aparecem na tag de abertura do elemento e\nconsistem em duas partes: um nome e um valor, separados por um sinal de igual\n(=).
No caso do exemplo anterior, podemos visualizar três atributos: o atributo\nhref, o atributo target e o atributo title.
O atributo href especifica o endereço da web para o qual você deseja que o\nlink aponte; isto é, aonde o navegador navega quando é clicado. Neste exemplo,\nvemos que aponta para a página inicial da Laboratoria:\nhttp://laboratoria.la/
O atributo target especifica o contexto de navegação que será usado para\nexibir o link. Por exemplo, target=\"_blank\" mostrará o link em uma nova\nguia. Se você quiser mostrar o link na aba atual, apenas omita este atributo.
O atributo title especifica informações extras sobre o link, como qual\npágina você está vinculando. No nosso exemplo, diz \"Página inicial da\nLaboratoria\". Isso aparecerá como informação quando o mouse estiver sobre o\nlink.
Existem muitos atributos comuns a todos os elementos html e existem atributos\nespecíficos associados a um determinado elemento. Um atributo que se aplica a\nquase todos os elementos html é o atributo style que permite dar estilos ao\nseu elemento. Por exemplo, se quisermos que o conteúdo dentro de um elemento p\nseja vermelho em um fundo amarelo e com uma borda preta, fazemos:
<p style=\"color:red; background-color: yellow; border: 1px solid black;\">\n Código <em>que</em> <strong>transforma</strong>\n</p>\nAo visualizar o documento anterior no navegador, teremos:
\n![\"Exemplo](\"https://github.com/Laboratoria/curricula-js/raw/632783f957accef3442934c87cecd254a202f2db/03-interactive-site/00-html-and-css/01-html/img-style-attribute.png?raw=true\")
Um atributo de estilo pode conter uma ou mais instruções. Cada instrução é\ncomposta de uma propriedade (como cor) seguida por dois pontos e um\nvalor (como vermelho). Quando temos mais de uma declaração, cada uma deve\nser separada por ponto e vírgula (;). Por exemplo: \"color:red; background-color: yellow;\".
Há muitos aspectos que podem ser influenciados pelo estilo. Por exemplo, a\npropriedade display controla se um item é exibido como um bloco ou em linha,\nou até mesmo não exibido:
<p>\n Um texto pode ser <strong>em linha</strong>,\n <strong style=\"display: block\">como bloco</strong>,\n <strong style=\"display: none\">ou oculto</strong>.\n</p>\nA visão no navegador disto seria:
\n![\"Exemplo](\"https://user-images.githubusercontent.com/11894994/57496514-da5bce80-72a9-11e9-986d-1042beb95efd.png\")
O texto \"em linha\" é exibido em linha (ou seja, na mesma linha do texto\nanterior \"Um texto pode ser exibido\" ) porque lembramos que o elemento\nstrong é do tipo em linha. O texto \"como um bloco\" terminará em sua própria\nlinha, uma vez que os elementos do tipo bloco não são mostrados de acordo com o\ntexto ao redor. Lembre-se de que quando um item é do tipo bloco, ele aparecerá\nem uma nova linha de qualquer conteúdo que tenha vindo antes, e qualquer\nconteúdo que vier depois também aparecerá em uma nova linha. O texto \"ou\noculto\" não é exibido porque é atribuído o valor de none para display\nimpedir que um item apareça na tela. Esta é uma maneira de esconder elementos.
Na próxima lição sobre css aprofundaremos o conceito de estilizar seus\nelementos html.
Em sua pesquisa, você certamente se deparou com o elemento <img> para\nadicionar uma imagem ao seu\nsite e você\nnotou que ele não tem uma tag de fechamento e, portanto, não tem \"conteúdo\":
<img src=\"http://cde.2.trome.pe/ima/0/1/1/8/5/1185397.jpg\">\nAlgumas tags não contêm conteúdo diretamente; em vez disso, eles recebem uma\nfonte da qual obter o conteúdo. Isto é o que acontece com o elemento img. O\natributo src fornece o caminho do conteúdo. Neste caso, ao ir para o endereço\nhttp://cde.2.trome.pe/ima/0/1/1/8/5/1185397.jpg\nvamos encontrar a foto de Mariana com Mark e Barack 😀
Outro item que não tem uma tag de fechamento é br. Leia a documentação do MDN\nsobre br. Para\nque serve br?
Assim como podemos comentar nosso código javascript para torná-lo mais\ncompreensível, também podemos adicionar comentários ao nosso código HTML. Para\ndefinir um comentário em um arquivo HTML, usamos os marcadores <!-- para abrir\no comentário e --> para fechá-lo.
<!-- Isto é um comentário. Não será visto na página, mas sim em meu código. -->\nAgora que você tem uma ideia dos elementos html mais comuns, seu comportamento\n(em linha ou em bloco) e seus principais atributos, a Paloma explicará como\nconstruir uma réplica da página da Wikipédia de Grace\nHopper :
![\"Grace\nHopper\"](\"https://img.youtube.com/vi/FM9aK638ICA/0.jpg\")
divespanMuitas vezes, ao criar nossa estrutura HTML, torna-se necessário \"agrupar\"\nelementos para dividir nossa página web em seções ou partes lógicas. Por\nexemplo, se no footer (ou rodapé) do nosso site, queremos mostrar os ícones de\nnossas redes sociais com links de contato, é útil agrupar todos os ícones em uma\nseção e os links em outra seção, e que ambos os grupos estejam contidos no\nfooter.
\nPara fazer esses agrupamentos, podemos usar os elementos div e span. Os\nelementos div e span são como \"contêineres\" vazios que preenchemos com\noutros elementos e conteúdo.
div é um bloco, o que significa que há uma quebra\nde linha antes e depois.span é usado como um contêiner para textos. É do tipo em\nlinha; isto é, aparece entre as linhas, como parte de um parágrafo.Vejamos um exemplo:
\n<!DOCTYPE html>\n<html>\n <body>\n <div style=\"background-color: green; color: white\">\n <h2>Cidade do México</h2>\n <p>A Cidade do México, anteriormente conhecida como Distrito Federal,\n é uma das 32 unidades federativas do México, assim como a capital\n dos <span style=\"color: yellow\">Estados Unidos Mexicanos</span>.\n </p>\n </div>\n <div style=\"background-color: red; color: white\">\n <h2>Lima</h2>\n <p>Lima é a capital da <span style=\"color: yellow\">República do\n Perú</span> e da província homônima. Situa-se na costa central do país,\n às magens do Oceano Pacífico, contendo uma extensa e populosa\n área urbana conhecida como Lima Metropolitana, cercada pelo\n deserto costeiro e extendida sobre os vales dos rios Chillón,\n Rímac e Lurín.\n </p>\n </div>\n <div style=\"background-color: blue; color: white\">\n <h2>Santiago</h2>\n <p>Santiago, chamada também de Santiago do Chile, é a capidal do\n <span style=\"color: yellow\">Chile</span> e da região Metropolitana\n de Santiago. É o principal núcleo urbano do país e sua área\n metropolitana também é conhecida pelo nome de Grande Santiago.\n </p>\n </div>\n </body>\n</html>\nAo visualizar o exemplo anterior no navegador, temos:
\n![\"Div](\"https://user-images.githubusercontent.com/11894994/57496615-52c28f80-72aa-11e9-9b69-c2a5d5c33ea3.png\")
Veja como agrupamos tudo relacionado a um país em um div. Isso é útil porque\nele cria seções que seguem uma ordem lógica. Mas, mais importante, ter essas\nseções separadas permite que você forneça estilos diferentes para cada seção: a\ncor do plano de fundo e a cor da fonte variam para cada país. O mesmo acontece\ncom as palavras que mostramos em amarelo. Graças a span nós podemos fazer com\nque certas partes do texto tenham um estilo diferente.
Anteriormente você aprendeu a criar um arquivo HTML e vinculá-lo ao seu arquivo\nJavaScript. Nesta lição, nos aprofundaremos no HTML.
\nAnalisando diretamente a documentação da Mozilla Developer\nNetwork,\ntemos o seguinte:
\n\n\nHTML (HyperText Markup Language) não é uma linguagem de programação, é uma\nlinguagem de marcação utilizada para dizer ao seu navegador como estruturar a\npágina web que você visita. A página pode ser tão complicada ou tão simples\nquanto o desenvolvedor web desejar que seja.
\nO HTML consiste em uma série de elementos que você usa para anexar, envolver ou\nmarcar diferentes partes do conteúdo para que apareça ou aja de uma certa\nmaneira. O fechamento das tags pode transformar uma parte do conteúdo dentro do\nelemento em um link para direcionar à uma outra página web, colocar as palavras\nem itálico, e assim por diante.
\n
HTML5 é a última versão do HTML. Ele apresenta dois conceitos diferentes:
\nDesenhado de forma a ser utilizado por todos os desenvolvedores de Open Web,\nesta página referencia numerosos recursos sobre as tecnologias de HTML5,\nclassificados em grupos segundo sua função.
\n\n\nEste é um extrato da documentação do\nMDN que podemos encontrar\nsobre HTML5.
\n
Lembre-se de que, com algumas exceções (por exemplo <!DOCTYPE html>), os\nelementos html começam com um tag de abertura ou início e terminam com um\ntag de fechamento (ou fim). Por exemplo, o elemento p começa com a tag\ninicial <p> e termina com a tag final </p>. O texto entre as tags de\nabertura e fechamento é o conteúdo do elemento.
Um elemento pode conter outros elementos ou tags HTML em seu conteúdo. Isso é\nchamado de aninhamento.
\nLembre-se da estrutura básica de um documento HTML que estamos usando na maioria\ndos nossos exercícios e inclua alguns elementos adicionais:
\n<!DOCTYPE html>\n<html>\n <head>\n <title>HTML Aninhado</title>\n </head>\n <body>\n <h1>Laboratoria</h1>\n <p>Código <em>que</em> <strong>transforma</strong></p>\n </body>\n</html>\nObserve como certos elementos \"aninham\" outros. Ou seja, alguns elementos estão\n\"contidos\" nos outros. Por exemplo, o elemento body tem dois elementos\naninhados (ou filhos) que são o título h1 e o parágrafo p. Por sua vez, o\nparágrafo p contém dois elementos adicionais (outras crianças): em ou\nstrong.
Podemos visualizar esse conceito de aninhamento de html da seguinte maneira:
\nNeste exemplo, vemos elementos que já devem ser familiares para você. Você sabe\nsobre a tag DOCTYPE, elementos head, body, title, h1 e p. Alguns\nelementos adicionais que adicionamos são: o em que faz com que seu conteúdo\nseja exibido como texto em itálico e strong que faz com que seu conteúdo\nseja exibido como texto em negrito.
Ao abrir este documento no navegador, teremos o seguinte:
\n
Vamos voltar para a leitura sobre HTML da Mozilla Developer\nNetwork:
\n\n\nHá duas categorias importantes no HTML, que você precisa conhecer — elementos\nem bloco e elementos inline.
\nElementos em bloco formam um bloco visível na página. Eles aparecerão em\numa nova linha logo após qualquer elemento que venha antes dele, e qualquer\nconteúdo depois de um elemento em bloco também aparecerá em uma nova linha.\nElementos em bloco geralmente são elementos estruturais na página que\nrepresentam, por exemplo: parágrafos, listas, menus de navegação, rodapés etc.\nUm elemento em bloco não seria aninhado dentro de um elemento inline, mas pode\nser aninhado dentro de outro elemento em bloco.
\nElementos inline (na linha) são aqueles que estão contidos dentro de\nelementos em bloco, envolvem apenas pequenas partes do conteúdo do documento e\nnão parágrafos inteiros ou agrupamentos de conteúdo. Um elemento inline não\nfará com que uma nova linha apareça no documento: os elementos inline\ngeralmente aparecem dentro de um parágrafo de texto, por exemplo: um elemento\n
\n<a>(hyperlink) ou elementos de ênfase como<em>ou<strong>.
Vamos ver um exemplo:
\n<!DOCTYPE html>\n<html>\n <head>\n <title>HTML Aninhado</title>\n </head>\n <body>\n <em>primeiro</em><strong>segundo</strong><em>terceiro</em>\n <p>quarto</p><p>quinto</p><p>sexto</p>\n </body>\n</html>\nAo visualizar o documento anterior no navegador, teremos:
\n
Tanto em quanto eles strong são elementos inline. Portanto, os primeiros\ntrês elementos são colocados na mesma linha, um após o outro, sem espaço entre\neles. Por outro lado, p é um elemento no nível do bloco, então cada elemento\naparece em uma nova linha, com espaço acima e abaixo de cada um p.
Você tem à sua disposição vários elementos HTML para criar sites na web.\nInvestigue você mesmo (usando seu excelente parceiro do Google) e saiba como\nadicionar o seguinte a um website:
\nPara cada elemento anterior, entenda se ele se comporta como inline ou como\nblock.
Em sua pesquisa, você certamente se deparou com o elemento a para adicionar\num link ao seu\nsite: e você deve\nter notado que uma série de informações aparece na tag de abertura:
<a href=\"http://laboratoria.la/\" target=\"_blank\" title=\"Página inicial da Laboratoria\">Ir para Laboratoria</a>\nEssas informações são atributos. Os atributos nos fornecem informações\nadicionais sobre o conteúdo de um elemento que não queremos que apareça no\nconteúdo atual. Em alguns casos, eles adicionam recursos e/ou comportamento ao\nseu elemento HTML. Os atributos aparecem na tag de abertura do elemento e\nconsistem em duas partes: um nome e um valor, separados por um sinal de igual\n(=).
No caso do exemplo anterior, podemos visualizar três atributos: o atributo\nhref, o atributo target e o atributo title.
O atributo href especifica o endereço da web para o qual você deseja que o\nlink aponte; isto é, aonde o navegador navega quando é clicado. Neste exemplo,\nvemos que aponta para a página inicial da Laboratoria:\nhttp://laboratoria.la/
O atributo target especifica o contexto de navegação que será usado para\nexibir o link. Por exemplo, target=\"_blank\" mostrará o link em uma nova\nguia. Se você quiser mostrar o link na aba atual, apenas omita este atributo.
O atributo title especifica informações extras sobre o link, como qual\npágina você está vinculando. No nosso exemplo, diz \"Página inicial da\nLaboratoria\". Isso aparecerá como informação quando o mouse estiver sobre o\nlink.
Existem muitos atributos comuns a todos os elementos html e existem atributos\nespecíficos associados a um determinado elemento. Um atributo que se aplica a\nquase todos os elementos html é o atributo style que permite dar estilos ao\nseu elemento. Por exemplo, se quisermos que o conteúdo dentro de um elemento p\nseja vermelho em um fundo amarelo e com uma borda preta, fazemos:
<p style=\"color:red; background-color: yellow; border: 1px solid black;\">\n Código <em>que</em> <strong>transforma</strong>\n</p>\nAo visualizar o documento anterior no navegador, teremos:
\n
Um atributo de estilo pode conter uma ou mais instruções. Cada instrução é\ncomposta de uma propriedade (como cor) seguida por dois pontos e um\nvalor (como vermelho). Quando temos mais de uma declaração, cada uma deve\nser separada por ponto e vírgula (;). Por exemplo: \"color:red; background-color: yellow;\".
Há muitos aspectos que podem ser influenciados pelo estilo. Por exemplo, a\npropriedade display controla se um item é exibido como um bloco ou em linha,\nou até mesmo não exibido:
<p>\n Um texto pode ser <strong>em linha</strong>,\n <strong style=\"display: block\">como bloco</strong>,\n <strong style=\"display: none\">ou oculto</strong>.\n</p>\nA visão no navegador disto seria:
\n
O texto \"em linha\" é exibido em linha (ou seja, na mesma linha do texto\nanterior \"Um texto pode ser exibido\" ) porque lembramos que o elemento\nstrong é do tipo em linha. O texto \"como um bloco\" terminará em sua própria\nlinha, uma vez que os elementos do tipo bloco não são mostrados de acordo com o\ntexto ao redor. Lembre-se de que quando um item é do tipo bloco, ele aparecerá\nem uma nova linha de qualquer conteúdo que tenha vindo antes, e qualquer\nconteúdo que vier depois também aparecerá em uma nova linha. O texto \"ou\noculto\" não é exibido porque é atribuído o valor de none para display\nimpedir que um item apareça na tela. Esta é uma maneira de esconder elementos.
Na próxima lição sobre css aprofundaremos o conceito de estilizar seus\nelementos html.
Em sua pesquisa, você certamente se deparou com o elemento <img> para\nadicionar uma imagem ao seu\nsite e você\nnotou que ele não tem uma tag de fechamento e, portanto, não tem \"conteúdo\":
<img src=\"http://cde.2.trome.pe/ima/0/1/1/8/5/1185397.jpg\">\nAlgumas tags não contêm conteúdo diretamente; em vez disso, eles recebem uma\nfonte da qual obter o conteúdo. Isto é o que acontece com o elemento img. O\natributo src fornece o caminho do conteúdo. Neste caso, ao ir para o endereço\nhttp://cde.2.trome.pe/ima/0/1/1/8/5/1185397.jpg\nvamos encontrar a foto de Mariana com Mark e Barack 😀
Outro item que não tem uma tag de fechamento é br. Leia a documentação do MDN\nsobre br. Para\nque serve br?
Assim como podemos comentar nosso código javascript para torná-lo mais\ncompreensível, também podemos adicionar comentários ao nosso código HTML. Para\ndefinir um comentário em um arquivo HTML, usamos os marcadores <!-- para abrir\no comentário e --> para fechá-lo.
<!-- Isto é um comentário. Não será visto na página, mas sim em meu código. -->\nAgora que você tem uma ideia dos elementos html mais comuns, seu comportamento\n(em linha ou em bloco) e seus principais atributos, a Paloma explicará como\nconstruir uma réplica da página da Wikipédia de Grace\nHopper :
divespanMuitas vezes, ao criar nossa estrutura HTML, torna-se necessário \"agrupar\"\nelementos para dividir nossa página web em seções ou partes lógicas. Por\nexemplo, se no footer (ou rodapé) do nosso site, queremos mostrar os ícones de\nnossas redes sociais com links de contato, é útil agrupar todos os ícones em uma\nseção e os links em outra seção, e que ambos os grupos estejam contidos no\nfooter.
\nPara fazer esses agrupamentos, podemos usar os elementos div e span. Os\nelementos div e span são como \"contêineres\" vazios que preenchemos com\noutros elementos e conteúdo.
div é um bloco, o que significa que há uma quebra\nde linha antes e depois.span é usado como um contêiner para textos. É do tipo em\nlinha; isto é, aparece entre as linhas, como parte de um parágrafo.Vejamos um exemplo:
\n<!DOCTYPE html>\n<html>\n <body>\n <div style=\"background-color: green; color: white\">\n <h2>Cidade do México</h2>\n <p>A Cidade do México, anteriormente conhecida como Distrito Federal,\n é uma das 32 unidades federativas do México, assim como a capital\n dos <span style=\"color: yellow\">Estados Unidos Mexicanos</span>.\n </p>\n </div>\n <div style=\"background-color: red; color: white\">\n <h2>Lima</h2>\n <p>Lima é a capital da <span style=\"color: yellow\">República do\n Perú</span> e da província homônima. Situa-se na costa central do país,\n às magens do Oceano Pacífico, contendo uma extensa e populosa\n área urbana conhecida como Lima Metropolitana, cercada pelo\n deserto costeiro e extendida sobre os vales dos rios Chillón,\n Rímac e Lurín.\n </p>\n </div>\n <div style=\"background-color: blue; color: white\">\n <h2>Santiago</h2>\n <p>Santiago, chamada também de Santiago do Chile, é a capidal do\n <span style=\"color: yellow\">Chile</span> e da região Metropolitana\n de Santiago. É o principal núcleo urbano do país e sua área\n metropolitana também é conhecida pelo nome de Grande Santiago.\n </p>\n </div>\n </body>\n</html>\nAo visualizar o exemplo anterior no navegador, temos:
\n
Veja como agrupamos tudo relacionado a um país em um div. Isso é útil porque\nele cria seções que seguem uma ordem lógica. Mas, mais importante, ter essas\nseções separadas permite que você forneça estilos diferentes para cada seção: a\ncor do plano de fundo e a cor da fonte variam para cada país. O mesmo acontece\ncom as palavras que mostramos em amarelo. Graças a span nós podemos fazer com\nque certas partes do texto tenham um estilo diferente.
Sí y no. Es cierto que HTML5 es la última versión de HTML, pero además engloba\nun conjunto de tecnologías que define el estándar en relación a la web, tales\ncomo CSS3 y un término que ahora escucharás muy seguido: APIs. Este último\nnos dará a conocer los superpoderes del navegador y entenderemos porqué el\nnavegador se ha potenciado mucho desde sus inicios.
\nEn realidad ya se está trabajando en el primer borrador de la revisión del\nestándar HTML5.3 :scream:. En este blog de la W3C\npuedes encontrar información al respecto.
\nAdemás, si quieres ir conociendo un poco más acerca de lo que HTML5 trae consigo,\npuedes revisar el siguiente video de nuestros amigos de Platzi, que si bien el\nvideo ya tiene varios años en internet, todavía nos puede dar una gran\nperspectiva del impacto que tuvo la llegada de este nuevo estándar.
\n![\"HTML5\"](\"https://img.youtube.com/vi/RBbviZLKEG0/0.jpg\")
Sí y no. Es cierto que HTML5 es la última versión de HTML, pero además engloba\nun conjunto de tecnologías que define el estándar en relación a la web, tales\ncomo CSS3 y un término que ahora escucharás muy seguido: APIs. Este último\nnos dará a conocer los superpoderes del navegador y entenderemos porqué el\nnavegador se ha potenciado mucho desde sus inicios.
\nEn realidad ya se está trabajando en el primer borrador de la revisión del\nestándar HTML5.3 :scream:. En este blog de la W3C\npuedes encontrar información al respecto.
\nAdemás, si quieres ir conociendo un poco más acerca de lo que HTML5 trae consigo,\npuedes revisar el siguiente video de nuestros amigos de Platzi, que si bien el\nvideo ya tiene varios años en internet, todavía nos puede dar una gran\nperspectiva del impacto que tuvo la llegada de este nuevo estándar.
\n\nEntender la importancia del proceso de sketch durante la creación de un proyecto\ndigital.
\nEs un dibujo o esbozo de la solución del proyecto que queremos realizar de una\nmanera simple y ordenada. En él se encuentran todos los elementos necesarios\npara la planeación de un proyecto/plataforma digital.
\n![\"Sketch\"](\"https://image.ibb.co/hyZVfo/sketch.jpg\")
Cuando te dan un proyecto a realizar ¿no te ha pasado que en automático tu\ncerebro comienza a trabajar e idear? Y no ves la hora de comenzar a trabajar, ya\nsea en el diseño o el desarrollo. Pero ¡alto! Te estás saltando varios pasos\nimportantes en la planeación de un proyecto digital. No te preocupes, es normal,\ntodas nos enfrentamos a eso. Y por eso, ahora te vamos a contar más\ndetalladamente sobre este paso tan importante.
\nAntes que nada debes tener en cuenta que para comenzar a planear un producto\ndigital hay un flujo de trabajo:
\nCuando estás en ese momento entre lo que quieres proponer y el cómo lo vas a\nhacer, la mejor estrategia es hacer uno o varios sketches.
\n![\"Sketching\"](\"https://image.ibb.co/c1sVD8/sketch_hand.jpg\")
Este es el momento para aterrizar tus ideas ya que es un método flexible,\nportable, accesible y fácil de testear. Al ser fácil de testear, te permite\nhacer cambios en un corto tiempo y a bajo costo. Incluso te permite distribuir\nelementos gráficos sin el uso directo de ellos, utilizando ‘‘the big ‘x’\nimage’’.
\nPor lo anterior mencionado, sin duda el proceso de sketching te va a ahorrar\nmuchos recursos a la hora de desarrollo y te va a dar una idea clara de cómo y\nhacia dónde ir. Además de que son tus primeras ideas materializadas en búsqueda\nde la mejor solución, con esa flexibilidad en prueba y error puedes comenzar a\nidear.
\n‘No hay nada más simple que papel y lápiz para aterrizar ideas’.
\nHerramientas necesarias: Dos herramientas indispensables: papel y lápiz.
\n¿Cuento con todos los elementos necesarios para comenzar? Debes pensar en\ntodo: la información a transmitir (en este punto te recomiendo hacer listas de\nlos contenidos necesarios por transmitir en cada punto de tu vista de página o\ntarea), para quién lo vas a hacer (usuarios), de parte de quién (clientes) y\ncon qué recursos lo vas a lograr(Landing Page, formulario, etc).
\n¿Cómo lo voy a hacer? Aquí es donde comienza la magia. Debes planear una\nestrategia para comunicarle a tu usuario lo que tu cliente necesita transmitir.\nDebes pensar cómo lo harás y de qué manera, pensando en que tu usuario\ninteractúa con tu plataforma y que al entrar a un sitio necesita informarse o\nrealizar una tarea, entonces va a necesitar seguir un flujo dentro de la\naplicación. También es importante comenzar a pensar en la priorización de\nelementos o información que queremos incluir y pensar en dónde lo vamos a\nhacer. Cuando estés haciendo las listas de contenidos, te recomiendo\nacomodarlas según el orden de importancia con la respectiva información interna\na cada punto de información.
\n![\"sketch](\"https://image.ibb.co/iUP5fo/sketch_flow_2.jpg\")
Como has podido ver, el hacer un sketch es un proceso totalmente creativo que\nrequiere de un momento de mucho análisis para transmitir lo que queremos y de la\nmejor forma posible. Y sobre todo, para tener el esqueleto de lo que vamos a\ndesarrollar antes de hacerlo, y no tener que ir improvisando.
\nRecuerda: En este proceso no es importante el grado de fidelidad. Lo\nimportante es comenzar a pensar en el contenido a transmitir, la distribución de\néste y de los elementos que van a ir dentro de tu propuesta de solución.
\nConsejo: Practica, practica y practica.
\nMira el siguiente video para ejemplificar mejor este proceso:
\n" + "body": "Entender la importancia del proceso de sketch durante la creación de un proyecto\ndigital.
\nEs un dibujo o esbozo de la solución del proyecto que queremos realizar de una\nmanera simple y ordenada. En él se encuentran todos los elementos necesarios\npara la planeación de un proyecto/plataforma digital.
\n
Cuando te dan un proyecto a realizar ¿no te ha pasado que en automático tu\ncerebro comienza a trabajar e idear? Y no ves la hora de comenzar a trabajar, ya\nsea en el diseño o el desarrollo. Pero ¡alto! Te estás saltando varios pasos\nimportantes en la planeación de un proyecto digital. No te preocupes, es normal,\ntodas nos enfrentamos a eso. Y por eso, ahora te vamos a contar más\ndetalladamente sobre este paso tan importante.
\nAntes que nada debes tener en cuenta que para comenzar a planear un producto\ndigital hay un flujo de trabajo:
\nCuando estás en ese momento entre lo que quieres proponer y el cómo lo vas a\nhacer, la mejor estrategia es hacer uno o varios sketches.
\n
Este es el momento para aterrizar tus ideas ya que es un método flexible,\nportable, accesible y fácil de testear. Al ser fácil de testear, te permite\nhacer cambios en un corto tiempo y a bajo costo. Incluso te permite distribuir\nelementos gráficos sin el uso directo de ellos, utilizando ‘‘the big ‘x’\nimage’’.
\nPor lo anterior mencionado, sin duda el proceso de sketching te va a ahorrar\nmuchos recursos a la hora de desarrollo y te va a dar una idea clara de cómo y\nhacia dónde ir. Además de que son tus primeras ideas materializadas en búsqueda\nde la mejor solución, con esa flexibilidad en prueba y error puedes comenzar a\nidear.
\n‘No hay nada más simple que papel y lápiz para aterrizar ideas’.
\nHerramientas necesarias: Dos herramientas indispensables: papel y lápiz.
\n¿Cuento con todos los elementos necesarios para comenzar? Debes pensar en\ntodo: la información a transmitir (en este punto te recomiendo hacer listas de\nlos contenidos necesarios por transmitir en cada punto de tu vista de página o\ntarea), para quién lo vas a hacer (usuarios), de parte de quién (clientes) y\ncon qué recursos lo vas a lograr(Landing Page, formulario, etc).
\n¿Cómo lo voy a hacer? Aquí es donde comienza la magia. Debes planear una\nestrategia para comunicarle a tu usuario lo que tu cliente necesita transmitir.\nDebes pensar cómo lo harás y de qué manera, pensando en que tu usuario\ninteractúa con tu plataforma y que al entrar a un sitio necesita informarse o\nrealizar una tarea, entonces va a necesitar seguir un flujo dentro de la\naplicación. También es importante comenzar a pensar en la priorización de\nelementos o información que queremos incluir y pensar en dónde lo vamos a\nhacer. Cuando estés haciendo las listas de contenidos, te recomiendo\nacomodarlas según el orden de importancia con la respectiva información interna\na cada punto de información.
\n
Como has podido ver, el hacer un sketch es un proceso totalmente creativo que\nrequiere de un momento de mucho análisis para transmitir lo que queremos y de la\nmejor forma posible. Y sobre todo, para tener el esqueleto de lo que vamos a\ndesarrollar antes de hacerlo, y no tener que ir improvisando.
\nRecuerda: En este proceso no es importante el grado de fidelidad. Lo\nimportante es comenzar a pensar en el contenido a transmitir, la distribución de\néste y de los elementos que van a ir dentro de tu propuesta de solución.
\nConsejo: Practica, practica y practica.
\nMira el siguiente video para ejemplificar mejor este proceso:
\n" } } } @@ -139,7 +139,7 @@ "intl": { "es": { "title": "Clase de Conceptos", - "body": "affordances, signifiers,\ndiscoverability y feedback.En su libro y curso The Design of Everyday Things\n, Don Norman nos habla de distintos principios de diseño que revisaremos en esta\nlección.
\nPara empezar miremos estos videos:
\n\n\n\nAffordances (acciones posibles) son las relaciones que existen entre un objeto\ny una entidad (una persona). Los affordances permiten las interacciones entre\nestos objetos y las personas. La presencia de un affordance está determinada\npor las propiedades de un objeto y las habilidades de la persona que está\ninteractuando con la persona.
\n
Ejemplo:
\n\n\n\nSignifiers son señales que te indican las posibles acciones que puedes hacer\ncon un objeto y donde o en qué parte. Los signifiers, normalmente, son visibles.
\n
Ejemplo:
\n\nConceptual models y system images
\n\n\nLos modelos conceptuales son explicaciones de cómo algo debe funcionar. Son\nútiles para que el usuario pueda predecir cómo es que un objeto funcionará y qué\nse puede hacer en caso algo salga mal.\nLas personas forman modelos conceptuales todo el tiempo. Una vez que\ninteractúas con un objeto, formas un modelo conceptual de cómo funciona. Es\nresponsabilidad del diseñador ayudar al usuario a formar un modelo útil. Los\nmejores modelos conceptuales a menudo se pueden deducir de un objeto en sí\nmismo.\nLos diseñadores tienen un modelo conceptual claro al diseñar el producto, pero\nlos usuarios no pueden hablar con el diseñador para comprender su modelo de\ndiseño, por lo que confían en la imagen del sistema del producto para formar\nun modelo de usuario. Una imagen del sistema es cualquier información que\ntransmita el producto. Información como su forma, forma, significantes,\naccesos y documentación en los manuales.\nPara que las personas utilicen un producto con éxito, deben tener el mismo\nmodelo mental (el modelo del usuario) que el del diseñador (el modelo del\ndiseñador). Pero el diseñador solo habla con el usuario a través del producto\nmismo, por lo que toda la comunicación debe tener lugar a través de la \"imagen\ndel sistema\": la información transmitida por el producto en sí.
\n
\n\nGolfo de ejecución: el estado mental donde los usuarios descubren cómo\nejecutar. Este lleva al concepto de descubribilidad (discoverability) ¿Cómo sé\nlo que puedo hacer? ¿Qué acciones son posibles? ¿Cuáles son mis alternativas?\n¿Qué puedo hacer ahora? ¿Cómo lo hago?\nGolfo de evaluación: el estado mental donde los usuarios averiguan la\nrespuesta a una acción tomada. Lleva al concepto de retroalimentación(feedback\n) ¿Cómo sé lo que pasó? ¿Que pasó? ¿Funcionó? Qué significa eso? ¿Esta bien?\n¿He logrado mi objetivo?
\n
![\"itau](\"https://lh5.googleusercontent.com/zYKvjSGgc6rwLt3Y24VPOlDmyb4C1sTmn2xfboy73HFjbP6FV7t-4xchymGuboRf8qAiOGh0ah_yw4TGsj7YAGjQrWbB_IUe5G6H6cQ1YgwrdN9RmmpiATzCNoYg8CKMD1z8_5jSKRo\")
affordances, signifiers,\ndiscoverability y feedback.En su libro y curso The Design of Everyday Things\n, Don Norman nos habla de distintos principios de diseño que revisaremos en esta\nlección.
\nPara empezar miremos estos videos:
\n\n.
\n\n\nAffordances (acciones posibles) son las relaciones que existen entre un objeto\ny una entidad (una persona). Los affordances permiten las interacciones entre\nestos objetos y las personas. La presencia de un affordance está determinada\npor las propiedades de un objeto y las habilidades de la persona que está\ninteractuando con la persona.
\n
Ejemplo:
\n\n\n\nSignifiers son señales que te indican las posibles acciones que puedes hacer\ncon un objeto y donde o en qué parte. Los signifiers, normalmente, son visibles.
\n
Ejemplo:
\n\n
\n\n\nLos modelos conceptuales son explicaciones de cómo algo debe funcionar. Son\nútiles para que el usuario pueda predecir cómo es que un objeto funcionará y qué\nse puede hacer en caso algo salga mal.\nLas personas forman modelos conceptuales todo el tiempo. Una vez que\ninteractúas con un objeto, formas un modelo conceptual de cómo funciona. Es\nresponsabilidad del diseñador ayudar al usuario a formar un modelo útil. Los\nmejores modelos conceptuales a menudo se pueden deducir de un objeto en sí\nmismo.\nLos diseñadores tienen un modelo conceptual claro al diseñar el producto, pero\nlos usuarios no pueden hablar con el diseñador para comprender su modelo de\ndiseño, por lo que confían en la imagen del sistema del producto para formar\nun modelo de usuario. Una imagen del sistema es cualquier información que\ntransmita el producto. Información como su forma, forma, significantes,\naccesos y documentación en los manuales.\nPara que las personas utilicen un producto con éxito, deben tener el mismo\nmodelo mental (el modelo del usuario) que el del diseñador (el modelo del\ndiseñador). Pero el diseñador solo habla con el usuario a través del producto\nmismo, por lo que toda la comunicación debe tener lugar a través de la \"imagen\ndel sistema\": la información transmitida por el producto en sí.
\n
\n\nGolfo de ejecución: el estado mental donde los usuarios descubren cómo\nejecutar. Este lleva al concepto de descubribilidad (discoverability) ¿Cómo sé\nlo que puedo hacer? ¿Qué acciones son posibles? ¿Cuáles son mis alternativas?\n¿Qué puedo hacer ahora? ¿Cómo lo hago?\nGolfo de evaluación: el estado mental donde los usuarios averiguan la\nrespuesta a una acción tomada. Lleva al concepto de retroalimentación(feedback\n) ¿Cómo sé lo que pasó? ¿Que pasó? ¿Funcionó? Qué significa eso? ¿Esta bien?\n¿He logrado mi objetivo?
\n
Mira este video y reflexiona sobre el concepto de accesibilidad video
\nAccesibilidad según la W3org:
\n\n\nLa accesibilidad web significa que los sitios web, las herramientas y las\ntecnologías están diseñados y desarrollados para que las personas con\ncapacidades diferentes puedan usarlos. Más específicamente, las personas\npueden:
\n
La accesibilidad incluye todas las capacidades diferentes que están relacionadas\ncon la interacción con productos digitales y la web:
\nAhora, mira este:
\n\nY revisemos algunas consideraciones sobre accesibilidad.
\nRecuerda que hay usuarios que no distinguen todos los colores. (En este\nartículo\npuedes ver los distintos problemas de visión que existen.) Un buen ejemplo es no\nusar solo el color rojo para dar a entender que hay un error. Siempre es bueno\nexplicarle al usuario cuál fue el error con un mensaje explícito.
\nRecuerda los conceptos de Visual Design. Siempre revisa el contraste de color\nentre el texto y el fondo. Utiliza esta herramienta\npara asegurarte que el contraste cumpla los estándares mínimos.
\nLos subtítulos y/o transcripciones ayudan a las personas que tienen dificultades\nde audición o cuando no puedes ejecutar un video en un lugar muy silencioso.\nIntenta agregar subtítulo y/o transcripciones cuando tengas videos o audios.
\nLos labels nos ayudan a enfocarnos en los campos que vamos a llenar del\nformulario. Cuando usamos solo placeholders corremos el riesgo de confundir al\nusuario y de hacer su experiencia menos fluida. Puedes leer estos artículos:\nInglés/Español\npara entender un poco más sobre esto.
\nLos textos alt en las imágenes ayudan a los screen-readers a decirles a los\nusuarios qué hay en una imagen. Si bien es una tarea que puedas ver relacionada\ncon un programador. Es importante darle las herramientas e instrucciones\nnecesarias a los stakeholders para que incluyan los alt en las imágenes de sus\nposts. Por ejemplo, si en la empresa en que trabajes utilizan un CMS deberías\nasegurarte de que hay la opción de agregar alt cuando los editores estén\ningresando/editando contenido. También, cuando hagas un prototipo y se lo pases\na un developer, podrías darle en un archivo aparte los alt texts que deberá\nutilizar para cada imagen. Adicionalmente, los alt texts te ayudan para el\nSEO también.
Mira este video y reflexiona sobre el concepto de accesibilidad
\nAccesibilidad según la W3org:
\n\n\nLa accesibilidad web significa que los sitios web, las herramientas y las\ntecnologías están diseñados y desarrollados para que las personas con\ncapacidades diferentes puedan usarlos. Más específicamente, las personas\npueden:
\n
La accesibilidad incluye todas las capacidades diferentes que están relacionadas\ncon la interacción con productos digitales y la web:
\nAhora, mira este:
\n\nY revisemos algunas consideraciones sobre accesibilidad.
\nRecuerda que hay usuarios que no distinguen todos los colores. (En este\nartículo\npuedes ver los distintos problemas de visión que existen.) Un buen ejemplo es no\nusar solo el color rojo para dar a entender que hay un error. Siempre es bueno\nexplicarle al usuario cuál fue el error con un mensaje explícito.
\nRecuerda los conceptos de Visual Design. Siempre revisa el contraste de color\nentre el texto y el fondo. Utiliza esta herramienta\npara asegurarte que el contraste cumpla los estándares mínimos.
\nLos subtítulos y/o transcripciones ayudan a las personas que tienen dificultades\nde audición o cuando no puedes ejecutar un video en un lugar muy silencioso.\nIntenta agregar subtítulo y/o transcripciones cuando tengas videos o audios.
\nLos labels nos ayudan a enfocarnos en los campos que vamos a llenar del\nformulario. Cuando usamos solo placeholders corremos el riesgo de confundir al\nusuario y de hacer su experiencia menos fluida. Puedes leer estos artículos:\nInglés/Español\npara entender un poco más sobre esto.
\nLos textos alt en las imágenes ayudan a los screen-readers a decirles a los\nusuarios qué hay en una imagen. Si bien es una tarea que puedas ver relacionada\ncon un programador. Es importante darle las herramientas e instrucciones\nnecesarias a los stakeholders para que incluyan los alt en las imágenes de sus\nposts. Por ejemplo, si en la empresa en que trabajes utilizan un CMS deberías\nasegurarte de que hay la opción de agregar alt cuando los editores estén\ningresando/editando contenido. También, cuando hagas un prototipo y se lo pases\na un developer, podrías darle en un archivo aparte los alt texts que deberá\nutilizar para cada imagen. Adicionalmente, los alt texts te ayudan para el\nSEO también.
Para empezar, es bueno saber qué entendemos por UX. Para ello mira este video,\nen el que Don Norman, primero en\nusar el término, nos explica qué es UX.
\n![\"UX\"](\"https://i.ytimg.com/vi/9BdtGjoIN4E/0.jpg\")
UX = User Experience son todas las experiencias que vive/experimenta una persona\nal usar un producto. Una silla, una mesa y un computador, todos tienen una\nexperiencia al usarlos.
\nUna web, un app o cualquier producto digital también tienen distintas\nexperiencias para el usuario. Estas experiencias no siempre son iguales, en\nmuchos casos pueden variar dependiendo del entorno en el que son usados. Por\nejemplo, la experiencia de uso de Youtube puede variar dependiendo de la\nvelocidad de la conexión a internet que estemos usando, o de las publicidades\nque se nos interpongan antes o durante la ejecución del contenido que queremos\nver.
\n\n\nUX Design es el trabajo de los profesionales \"UX Designers\". Es el proceso\nmediante el cual se diseñan las experiencias que vivirá un usuario al usar un\nproducto.
\n
El proceso creativo y analítico para determinar qué y cómo será una web, un app,\nun software o un gadget, teniendo en cuenta siempre las necesidades, deseos y\nmetas de los usuarios. Pero, sin dejar de lado las metas de los negocios.
\nPara entender un poco más sobre el proceso de UX Design mira este video:
\n![\"User](\"https://img.youtube.com/vi/wmmVhVIxW-A/0.jpg\")
Usualmente vamos a querer que los usuarios de nuestros productos (digitales o\nfísicos) estén felices cuando consumen lo que ofrecemos.
\nLa experiencia al usar nuestros productos es directamente proporcional a su\nconsumo.
\nAl tener una mejor UX tenemos más consumo.
\nY viceversa.
\nPara poder entender la diferencia, similitud y relación entre UI y UX, lee el\nsiguiente artículo: UX vs UI.
\nLuego de leer este artículo, intenta responder las siguientes preguntas:
\nPara dedicarnos a ser UX o UI Designer tenemos que tener ciertas características\nque puedes ver en el siguiente video:
\n![\"UX](\"https://img.youtube.com/vi/ft5TzxG-LAc/0.jpg\")
Ahora, intenta responer estas preguntas:
\nAdicionalmente el autor Golden Krishna en su libro The best interface is not interface\nnos deja estos términos comunes usados en UX y en UI para resaltar que son\ntérminos distintos.
\n\n\nNavegación, subnavegación, menús, desplegables, botones, enlaces / ligas /\nlinks, ventanas, esquinas redondeadas, sombreado, mensajes de error, alertas,\nactualizaciones, checkboxes, campos de contraseña, campos de búsqueda,\nentradas de texto, selectores de radio, áreas de texto, estados de hover,\nestados de selección, estados presionados, información sobre herramientas,\nanuncios de banner, videos incrustados, animaciones de desplazamiento,\ndesplazamiento, clics, iconografía, colores, listas, presentaciones de\ndiapositivas, texto alternativo, insignias, notificaciones, degradados,\nventanas emergentes, carruseles, OK / Cancelar, etc., etc., etc.
\n
\n\nGente, felicidad, resolución de problemas, entender necesidades, amor,\neficiencia, entretenimiento, placer, deleitar, sonrisas, alma, calidez,\npersonalidad, alegría, satisfacción, gratificación, exaltación, euforia,\nconveniencia, eficacia, etc., etc., etc.
\n
Empatía: es una de las características principales de UX Designer. Para\npoder crear productos exitosos, es necesario entender a nuestros usuarios, y\npara ello necesitamos empatizar con ellos para poder entender sus problemas\ndesde su perspectiva.
\nTrabajo en equipo: un UX Designer no solo va a tener relación con sus\nusuarios, sino que también va a trabajar con un equipo de desarrollo de\nproducto que puede incluir product managers, visual designers,\ndesarrolladores, QAs y analistas de negocio. Para ello, trabajar en equipo es\nclave para un UX Designer.
\nNegociador: el trabajo en equipo trae consigo también mucha negociación,\npor temas de recursos, principalmente.
\nProblem solver: los UX Designers tienen pasión por resolver problemas, los\nde sus usuarios y los de sus negocios.
\nProblem checker: muchas veces los UX Designers van a recibir de las áreas\nde negocio o escuchar de sus usuarios 'problemas' que no necesariamente lo\nson. Su curiosidad y pensamiento crítico lo ayudan a poder validar si esos\nproblemas realmente existen. No queremos perder valioso tiempo de desarrollo,\ntrabajando sobre problemas que no existen.
\nProblem finder: durante la validación de problemas o durante el proceso de\ndiseño en general el UX Designer tiene que ser capaz de indentificar problemas\no necesidades que existen tanto para el usuario como para el negocio.
\nDiseño, negocios y tecnología: se dice que los product / ux designers más\nexitosos entienden de estos 3 temas. Diseño porque son quienes lideran el\nproceso de diseño y porque esto les ayuda a entender a los usuarios. Negocios\nporque no solo tiene que ayudar a crear productos deseables, sino también\nrentables. Y de tecnología porque tiene que tener cierta idea de la\nfactilbilidad de desarrollo de los productos que propone.
\nLas personas con habilidades en T (en inglés T-shaped people) aquellas que\ntienen conocimiento profundo en una o dos áreas, combinado con una comprensión\nrazonable de una variedad de otras áreas relevantes.
\n![\"T-shaped](\"https://fotos.subefotos.com/96bdd078734baef5f177c55bc9c05a78o.png\")
Por ejemplo un UX designer pueder ser un experto en UX research y prototipado y\ntener conocimiento no necesariamente tan profundo en UX writing y arquitectura\nde información.
\n![\"Puestos](\"https://fotos.subefotos.com/8e6469bf296f6e99f434ab723e68534do.jpg\")
En las empresas grandes los puestos tienden a ser más especializados y en las\nempresas más pequeñas combinan diferentes especialidades.
" + "body": "Para empezar, es bueno saber qué entendemos por UX. Para ello mira este video,\nen el que Don Norman, primero en\nusar el término, nos explica qué es UX.
\n\nUX = User Experience son todas las experiencias que vive/experimenta una persona\nal usar un producto. Una silla, una mesa y un computador, todos tienen una\nexperiencia al usarlos.
\nUna web, un app o cualquier producto digital también tienen distintas\nexperiencias para el usuario. Estas experiencias no siempre son iguales, en\nmuchos casos pueden variar dependiendo del entorno en el que son usados. Por\nejemplo, la experiencia de uso de Youtube puede variar dependiendo de la\nvelocidad de la conexión a internet que estemos usando, o de las publicidades\nque se nos interpongan antes o durante la ejecución del contenido que queremos\nver.
\n\n\nUX Design es el trabajo de los profesionales \"UX Designers\". Es el proceso\nmediante el cual se diseñan las experiencias que vivirá un usuario al usar un\nproducto.
\n
El proceso creativo y analítico para determinar qué y cómo será una web, un app,\nun software o un gadget, teniendo en cuenta siempre las necesidades, deseos y\nmetas de los usuarios. Pero, sin dejar de lado las metas de los negocios.
\nPara entender un poco más sobre el proceso de UX Design mira este video:
\n\nUsualmente vamos a querer que los usuarios de nuestros productos (digitales o\nfísicos) estén felices cuando consumen lo que ofrecemos.
\nLa experiencia al usar nuestros productos es directamente proporcional a su\nconsumo.
\nAl tener una mejor UX tenemos más consumo.
\nY viceversa.
\nPara poder entender la diferencia, similitud y relación entre UI y UX, lee el\nsiguiente artículo: UX vs UI.
\nLuego de leer este artículo, intenta responder las siguientes preguntas:
\nPara dedicarnos a ser UX o UI Designer tenemos que tener ciertas características\nque puedes ver en el siguiente video:
\n\nAhora, intenta responer estas preguntas:
\nAdicionalmente el autor Golden Krishna en su libro The best interface is not interface\nnos deja estos términos comunes usados en UX y en UI para resaltar que son\ntérminos distintos.
\n\n\nNavegación, subnavegación, menús, desplegables, botones, enlaces / ligas /\nlinks, ventanas, esquinas redondeadas, sombreado, mensajes de error, alertas,\nactualizaciones, checkboxes, campos de contraseña, campos de búsqueda,\nentradas de texto, selectores de radio, áreas de texto, estados de hover,\nestados de selección, estados presionados, información sobre herramientas,\nanuncios de banner, videos incrustados, animaciones de desplazamiento,\ndesplazamiento, clics, iconografía, colores, listas, presentaciones de\ndiapositivas, texto alternativo, insignias, notificaciones, degradados,\nventanas emergentes, carruseles, OK / Cancelar, etc., etc., etc.
\n
\n\nGente, felicidad, resolución de problemas, entender necesidades, amor,\neficiencia, entretenimiento, placer, deleitar, sonrisas, alma, calidez,\npersonalidad, alegría, satisfacción, gratificación, exaltación, euforia,\nconveniencia, eficacia, etc., etc., etc.
\n
Empatía: es una de las características principales de UX Designer. Para\npoder crear productos exitosos, es necesario entender a nuestros usuarios, y\npara ello necesitamos empatizar con ellos para poder entender sus problemas\ndesde su perspectiva.
\nTrabajo en equipo: un UX Designer no solo va a tener relación con sus\nusuarios, sino que también va a trabajar con un equipo de desarrollo de\nproducto que puede incluir product managers, visual designers,\ndesarrolladores, QAs y analistas de negocio. Para ello, trabajar en equipo es\nclave para un UX Designer.
\nNegociador: el trabajo en equipo trae consigo también mucha negociación,\npor temas de recursos, principalmente.
\nProblem solver: los UX Designers tienen pasión por resolver problemas, los\nde sus usuarios y los de sus negocios.
\nProblem checker: muchas veces los UX Designers van a recibir de las áreas\nde negocio o escuchar de sus usuarios 'problemas' que no necesariamente lo\nson. Su curiosidad y pensamiento crítico lo ayudan a poder validar si esos\nproblemas realmente existen. No queremos perder valioso tiempo de desarrollo,\ntrabajando sobre problemas que no existen.
\nProblem finder: durante la validación de problemas o durante el proceso de\ndiseño en general el UX Designer tiene que ser capaz de indentificar problemas\no necesidades que existen tanto para el usuario como para el negocio.
\nDiseño, negocios y tecnología: se dice que los product / ux designers más\nexitosos entienden de estos 3 temas. Diseño porque son quienes lideran el\nproceso de diseño y porque esto les ayuda a entender a los usuarios. Negocios\nporque no solo tiene que ayudar a crear productos deseables, sino también\nrentables. Y de tecnología porque tiene que tener cierta idea de la\nfactilbilidad de desarrollo de los productos que propone.
\nLas personas con habilidades en T (en inglés T-shaped people) aquellas que\ntienen conocimiento profundo en una o dos áreas, combinado con una comprensión\nrazonable de una variedad de otras áreas relevantes.
\n
Por ejemplo un UX designer pueder ser un experto en UX research y prototipado y\ntener conocimiento no necesariamente tan profundo en UX writing y arquitectura\nde información.
\n
En las empresas grandes los puestos tienden a ser más especializados y en las\nempresas más pequeñas combinan diferentes especialidades.
" } } } @@ -78,7 +78,7 @@ "intl": { "es": { "title": "Clase de Conceptos", - "body": "Cuando trabajamos en UX Design, y en tecnologia, hay muchos términos de\nmetodologías y frameworks que vamos a escuchar o leer seguido. Entre ellos\ndesign thinking o human centered design, lean startup, lean UX,\ndesign sprints, entre otros.
En realidad ninguna metodología es independiente a la otra, sino que son\ncomplementarias. Y de hecho, tienen una gran cosa en común: aprender
\nEn estas metodología, aprendemos a través de un experimento, prototipo o MVP,\n“saliendo del edificio” y probando con usuarios reales. En general aprendemos\nde:
\nEs una metodología para generar ideas innovadoras que centra su eficacia en\nentender y dar solución a las necesidades reales de los usuarios. Se\nempezó a desarrollar de forma teórica en la Universidad de Stanford en\nCalifornia (EEUU) a partir de los años 70, y su primera aplicabilidad con fines\nlucrativos como \"Design Thinking\" la llevó a cabo la consultora de diseño IDEO,\nsiendo hoy en día su principal precursora.
\nFases del proceso:
\nLa experimentación en el design thinking se basa en siempre mostrarle algo\n(un prototipo) al usuario para obtener su feedback.
Adicionalmente, puedes ver este video de cómo IDEO ideó un nuevo carrito de\nsupermercado en una semana.
\n\nEsta metodología se enfoca en crear un MVP rápidamente para poder aprender de\nlos usuarios y poder evolucionar o corregir el producto. Su ideal es tener la\nmayor cantidad de “validated learning” con el menor esfuerzo posible.
\n![\"Círculo](\"https://image.slidesharecdn.com/presentacinfinal-defensav2-140327151051-phpapp01/95/diseo-de-un-marco-de-referencia-para-el-emprendimiento-de-ti-basado-en-la-filosofa-lean-startup-15-638.jpg?cb=1395933204\")
Puedes ver también, este video sobre Lean Startup de One Month
\nLean UX combina ideas de design thinking, lean startup y agile en el campo\ndel UX. Busca hacer el trabajo de UX más rápido, enfocándose más en los\nresultados que en los “entregables”.
Fases:
\nMetodología creada en GV (Google Ventures) que busca probar una idea en 5 días.\nDentro del proceso se sugiere que el equipo que participa el design sprint\ntenga como máximo 7 personas y que dentro de este número estén incluidos uno o\ndos decisores. Al final de los 5 días se tiene uno o más prototipos probados con\n5 usuarios reales.
![\"Imagen](\"https://zapier.cachefly.net/storage/photos/ebde1b47795447d66f88d80d28dcd7b9.png\")
Etapas del proceso:
\nPuedes ver también como en Gimlet Media crearon y validaron un prototipo usando\nesta metodología.\nvideo
\nComo algo opcional, puedes mirar esta entrevista a Jake Knapp, Tim Brown y\nEric Ries hablando sobre Sprint, Design Thinking y Lean Startup respectivamente.
\n" + "body": "Cuando trabajamos en UX Design, y en tecnologia, hay muchos términos de\nmetodologías y frameworks que vamos a escuchar o leer seguido. Entre ellos\ndesign thinking o human centered design, lean startup, lean UX,\ndesign sprints, entre otros.
En realidad ninguna metodología es independiente a la otra, sino que son\ncomplementarias. Y de hecho, tienen una gran cosa en común: aprender
\nEn estas metodología, aprendemos a través de un experimento, prototipo o MVP,\n“saliendo del edificio” y probando con usuarios reales. En general aprendemos\nde:
\nEs una metodología para generar ideas innovadoras que centra su eficacia en\nentender y dar solución a las necesidades reales de los usuarios. Se\nempezó a desarrollar de forma teórica en la Universidad de Stanford en\nCalifornia (EEUU) a partir de los años 70, y su primera aplicabilidad con fines\nlucrativos como \"Design Thinking\" la llevó a cabo la consultora de diseño IDEO,\nsiendo hoy en día su principal precursora.
\nFases del proceso:
\nLa experimentación en el design thinking se basa en siempre mostrarle algo\n(un prototipo) al usuario para obtener su feedback.
Adicionalmente, puedes ver este video de cómo IDEO ideó un nuevo carrito de\nsupermercado en una semana.
\n\nEsta metodología se enfoca en crear un MVP rápidamente para poder aprender de\nlos usuarios y poder evolucionar o corregir el producto. Su ideal es tener la\nmayor cantidad de “validated learning” con el menor esfuerzo posible.
\n
Puedes ver también, este
\nLean UX combina ideas de design thinking, lean startup y agile en el campo\ndel UX. Busca hacer el trabajo de UX más rápido, enfocándose más en los\nresultados que en los “entregables”.
Fases:
\nMetodología creada en GV (Google Ventures) que busca probar una idea en 5 días.\nDentro del proceso se sugiere que el equipo que participa el design sprint\ntenga como máximo 7 personas y que dentro de este número estén incluidos uno o\ndos decisores. Al final de los 5 días se tiene uno o más prototipos probados con\n5 usuarios reales.
Etapas del proceso:
\nPuedes ver también como en Gimlet Media crearon y validaron un prototipo usando\nesta metodología.\nvideo
\nComo algo opcional, puedes mirar esta entrevista a Jake Knapp, Tim Brown y\nEric Ries hablando sobre Sprint, Design Thinking y Lean Startup respectivamente.
\n" } } } @@ -101,7 +101,7 @@ "intl": { "es": { "title": "Clase de Conceptos", - "body": "![\"Design](\"https://lh4.googleusercontent.com/NBcmNGSddfAfeKGla95NnHTHin0eAvP1cdo8NNxmtCOLyjYcedxCWnrQACTwkFG2J4VD81qpJuIiu9GY7wH4NVg86iqOrrkEt_8HQIb9dzr6jBnoaFCiFNg-sxSZiw9fJFuobcmIUyc\")
![\"Fases](\"https://lh6.googleusercontent.com/vCUr-V61KB-dV1TgdwoMpI1shFPEszjOifuIFTSeZbW21QpaJFVnKY23VIqNYrSOWUFUpCsFHIYRHj25l5ivebaqLADZAgXuh2rqoQreWC9Ea4yAsc4QATmFdJ4mCwv0o3Bmalhzsb8\")
Design DisruptorsDocumental creado por Invision en el que nos muestran\nel estado actual del diseño de productos y de experiencia de usario en las\ncompañías líderes de tecnología a nivel mundial.
\nTe recomendamos coordinar con los coaches de tu sede para que puedan emitir el\ndocumental en la sala de clases, ya que el documental está alojado en un link\nespecial con acceso restringido.
\n![\"design](\"http://s3.amazonaws.com/blog.invisionapp.com/uploads/2015/09/dd-thumb.jpg\")
Design DisruptorsDocumental creado por Invision en el que nos muestran\nel estado actual del diseño de productos y de experiencia de usario en las\ncompañías líderes de tecnología a nivel mundial.
\nTe recomendamos coordinar con los coaches de tu sede para que puedan emitir el\ndocumental en la sala de clases, ya que el documental está alojado en un link\nespecial con acceso restringido.
\n" } } } diff --git a/dist/topics/javascript.json b/dist/topics/javascript.json index e40d6b866..fb26a2ae0 100644 --- a/dist/topics/javascript.json +++ b/dist/topics/javascript.json @@ -2,9 +2,9 @@ "slug": "javascript", "repo": "Laboratoria/bootcamp", "path": "topics/javascript", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:37.787Z", + "createdAt": "2023-05-17T20:37:28.374Z", "track": "web-dev", "intl": { "es": { @@ -87,7 +87,7 @@ "intl": { "es": { "title": "Ejercicios Guiados", - "body": "Ahora que ya conoces ciertos conceptos base de la programación, es hora de que\nveas las cosas que puedes crear en la práctica.
\nLos proyectos a crear son:
\nprompt(), y devuelva su edad en segundos, utilizando\ndocument.write().prompt(), y devuelva, en la\nconsola, la temperatura en grados Farenheit (°F) utilizando console.log().\nLa fórmula matemática para pasar de °C a °F es: T(°F) = ( T(°C) × 1.8 ) + 32.A continuación, Michelle te explica cómo resolvió cada uno de los ejercicios\nanteriores.
\n\n\nNOTA: En los siguientes videos Michelle hace uso de
\nvaren vez delety\nconstpara declarar variables, así como otras características un poco\nantiguas de JavaScript. Estas son válidas y parte del lenguaje, aunque hoy\nen día preferiríamos usar características/features más modernos y apropiados\ncomo es el caso deletyconst. En este caso estos videos se grabaron hace\nya un tiempo... ;-)
![\"Solution](\"https://i.ytimg.com/vi/1IZT_7EfRMw/0.jpg\")
![\"Solution](\"https://i.ytimg.com/vi/Ix6VLiBcABw/0.jpg\")
![\"Solution](\"https://i.ytimg.com/vi/2WtBw8eC0us/0.jpg\")
![\"Solution](\"https://i.ytimg.com/vi/E5ozw3b6iM4/0.jpg\")
Ahora que ya conoces ciertos conceptos base de la programación, es hora de que\nveas las cosas que puedes crear en la práctica.
\nLos proyectos a crear son:
\nprompt(), y devuelva su edad en segundos, utilizando\ndocument.write().prompt(), y devuelva, en la\nconsola, la temperatura en grados Farenheit (°F) utilizando console.log().\nLa fórmula matemática para pasar de °C a °F es: T(°F) = ( T(°C) × 1.8 ) + 32.A continuación, Michelle te explica cómo resolvió cada uno de los ejercicios\nanteriores.
\n\n\nNOTA: En los siguientes videos Michelle hace uso de
\nvaren vez delety\nconstpara declarar variables, así como otras características un poco\nantiguas de JavaScript. Estas son válidas y parte del lenguaje, aunque hoy\nen día preferiríamos usar características/features más modernos y apropiados\ncomo es el caso deletyconst. En este caso estos videos se grabaron hace\nya un tiempo... ;-)
estructuras condicionales y cómo afectan el flujo del\nprogramaestructuras repetitivas y cómo afectan el flujo del\nprogramaEl texto a continuación se basa en gran medida, con ciertos ajustes, en el\ncapítulo 2 de Eloquent JavaScript,de Marijn\nHaverbeke, 2014. Traducción en Español\ndisponible gracias a hectorip, y del capítulo 6 de\nJavaScript for kids,\nNick Morgan, 2015;
\nLa razón por la cual creamos programas de computación es para resolver\nproblemas. Un programa, hemos visto, es simplemente un conjunto de\n\"instrucciones\" que las computadoras siguen. Ese conjunto de instrucciones\nresuelven un problema. Hasta ahora hemos aprendido a obtener, representar,\nmanipular y almacenar data en variables. Con esto, hemos podido crear\nprogramas que resuleven problemas muy sencillos. Esto es el caso, por ejempo,\ndel programa que hicimos para transformar la temperatura en Celsius (°C) a\nFarenheit (°F). Sin embargo, para crear programas más complejos, es necesario\nexpandir nuestro conocimiento sobre el control de flujo de un programa y las\nestructuras que existen para modificar este flujo.
Para utilizar la terminología correcta de JavaScript, de ahora en adelante,\nsustituiremos la palabra \"instrucciones\" por la palabra \"sentencias\". Una\nsentencia JavaScript es el equivalente a una oración en un leguaje humano.\nEntendemos, por lo tanto, que un programa en JavaScript es una lista de\n\"sentencias JavaScript\"; es decir, un conjunto de oraciones que le dicen al\ncomputador qué hacer.
\nCuando un programa contiene más de una sentencia, éstas son ejecutadas de arriba\nhacia abajo, una por una. Por ejemplo, el siguiente programa tiene tres\nsentencias: la primera le declara una variable llamada name con el valor del\nstring 'Michelle'; la segunda, imprime en la consola un mensaje personalizado de\nsaludo 'Hola Michelle'; y la tercera, imprime en la consola un mensaje que dice\n'Qué nombre tan largo tienes!'.
const name = 'Michelle';\nconsole.log('Hola ' + name);\nconsole.log('Qué nombre tan largo tienes!');\n// returns > Hola Michelle\n// Qué nombre tan largo tienes!\nUna representación trivial esquemática de un flujo de control recto sería:
\n![\"Flujo](\"http://eloquentjavascript.net/img/controlflow-straight.svg\")
Ejecutar sentencias en línea recta no es la única opción que tenemos. Una\nalternativa es la ejecución condicional, en donde escogemos entre dos rutas\ndiferentes basados en un valor Boolean, así:
![\"Flujo](\"http://eloquentjavascript.net/img/controlflow-if.svg\")
La ejecución condicional se escribe con el keyword if en JavaScript. La\ninstrucción if es la más simple de las estructuras de control de JavaScript.\nSe utiliza para ejecutar código si y sólo si una condición es verdadera. Un\ncondicional dice: \"Si algo es verdad, haz esto\". Por ejemplo, si hiciste tu\ntarea (true), recibes un helado, pero si no hiciste tu tarea (false),\nno recibes el helado.
Como muestra el ejemplo a continuación, una sentencia if tiene 2 partes\nprincipales: la condición y el cuerpo. La condición debe ser un valor Boolean\nque va entre paréntesis. El cuerpo consiste en una o más sentencias JavaScript\nque se ejecutarán si, y solo si, la condición es verdadera (Boolean igual a\ntrue).
if (condición) {\n // Conjunto de sentencias a ejecutar\n}\nCuando necesitamos ejecutar múltiples sentencias, podemos encerrarlas en llaves\n({ y }). Las llaves agrupan las sentencias, haciéndolos valer por una sola. Una\nsecuencia de sentencias encerradas en llaves es llamada un bloque (de\ncódigo). Muchos programadores de JavaScript encierran cada cuerpo de un if (y\nen los bucles, como verás más adelante), en llaves. Lo hacen en nombre de la\nconsistencia y para evitar tener que añadir o quitar las llaves cuando el número\nde sentencias en el cuerpo cambie. Otros, valoran la brevedad y en el caso del\nif no utilizan las llaves. En este curso, siempre usaremos las llaves para\nayudarnos a organizar nuestro código.
Volvamos al ejemplo anterior y agreguemos una condición antes de la sentencia\nque imprime el segundo mensaje:
\nconst name = 'Michelle';\nconsole.log('Hola ' + name);\nif (name.length > 7) {\n console.log('Qué nombre tan largo tienes!');\n}\n// imprime > Hola Michelle\n// Qué nombre tan largo tienes!\nCon esta modificación, antes de imprimir en la consola el segundo mensaje ('Qué\nnombre tan largo tienes!'), el programa verifica si la longitud del string\nname es mayor a 7. De ser así, se imprime el segundo mensaje. De no ser así,\nno se ejecuta esa sentencia. En este caso, dado que Michelle tiene 8\ncaracteres (letras), la condición es true. Por lo tanto, se imprime el segundo\nmensaje.
Cambiemos un poco este ejemplo, modificando el valor de name a 'Ana'.
const name = 'Ana';\nconsole.log('Hola ' + name);\nif (name.length > 7) {\n console.log('Qué nombre tan largo tienes!');\n}\n// returns > Hola Ana\nEn esta ocasión, la condición no es true (es false) porque la longitud\ndel nombre es 3, lo cual no es mayor a 7. Por lo tanto, el cuerpo del if\nno se ejecuta. De tal manera, únicamente se ejecuta el primer mensaje 'Hola\nAna'.
if... elseA menudo no sólo tendrás código que se ejecute cuando una condición sea\nverdadera, sino también que maneje el otro caso. Este camino alternativo es\nrepresentado por la segunda flecha en el diagrama de flujo. La palabra clave\nelse puede ser usada, junto con if, para crear dos rutas de ejecución\nseparadas y alternativas.
Agregemos una sentencia else a nuestro ejemplo:
const name = 'Ana';\nconsole.log('Hola ' + name);\nif (name.length > 7) {\n console.log('Qué nombre tan largo tienes!');\n} else {\n console.log('Tu nombre no es muy largo');\n}\n\n// returns > Hola Ana\n// Tu nombre no es muy largo\nComo ves, el resultado de este caso es similar al anterior, solo que si name\nno tiene una logitud mayor a 7, existe un \"mensaje alternativo\" que se\nejecuta.
Como muestra el ejemplo a continuación, las sentencias if ... else son\nsimilares a las sentencias if, pero incluyen 2 cuerpos. Si la condición es\ntrue, se ejecutan las sentencias del primer cuerpo; de lo contrario, se\nejecutan las sentencias del segundo cuerpo.
if (condición) {\n Sentencias a ejecutar si condición es VERDADERA\n} else {\n Sentencias a ejecutar si condición es FALSA\n}\nSi tenemos más de dos caminos a escoger, varios pares de if...else pueden ser\n\"encadenados\". Aquí hay un ejemplo:
const num = parseInt(prompt('Dame un número', '0'));\n\nif (num < 10) {\n alert('Diste un número Pequeño');\n} else if (num < 100) {\n alert('Diste un número Mediano');\n} else {\n alert('Diste un número Grande');\n}\nEl programa primero revisará si num es menor que 10. Si lo es, escoge ese\ncamino, muestra 'Diste un número Pequeño' en un alert box y termina. Si no lo\nes, toma el camino del else, que en sí mismo contiene un segundo if. Si la\nsegunda condición (< 100) se cumple, significa que el número está entre 10 y\n100, y se muestra 'Diste un número Mediano' en un alert box. Si no lo es, el\nsegundo y último else es escogido, mostrando 'Diste un número Grande'.
El diagrama de flujo para este programa es algo así:
\n![\"Flujo](\"http://eloquentjavascript.net/img/controlflow-nested-if.svg\")
Veamos otro ejemplo de la aplicación de la sentencia if...else. Esta vez, con\nun video de otra profesora estrella de Laboratoria, Alexandra :)
![\"ejercicio](\"https://img.youtube.com/vi/-rNwUIEQJnc/0.jpg\")
Es común ver código así:
\nif (variable == 'valor1') {\n accion1();\n} else if (variable == 'valor2') {\n accion2();\n} else if (variable == 'valor3') {\n accion3();\n} else {\n accionDefault();\n}\nExiste una estructura llamada switch que está hecha para \"despachar\" de un\nmodo más directo. Desafortunadamente, la sintaxis que JavaScript usa para esto\n(que es heredada de la línea de lenguajes de programación de C/Java) es un poco\nincómoda; una cadena de sentencias if a menudo luce mejor. Aquí hay un\nejemplo:
switch (prompt('¿Cómo está el clima?')) {\n case 'lluvioso':\n console.log('Recuerda llevar un paraguas.');\n break;\n case 'soleado':\n console.log('Viste ligero.');\n case 'nublado':\n console.log('Sal a la calle.');\n break;\n default:\n console.log('Tipo de Clima desconocido.');\n break;\n}\nPuedes poner cualquier cantidad de etiquetas case dentro del bloque switch.\nEl programa saltará a la etiqueta que corresponda al valor que se le dio al\nswitch o al default si no se encuentra valor que corresponda. Se empiezan a\nejecutar las sentencias desde ahí, incluso si están bajo otra etiqueta, hasta\nque se llegue a una sentencia break (que en español significa \"detener\").
En algunos casos, como en el caso de 'soleado' en el ejemplo, esto puede ser\nusado para compartir código entre casos (recomienda salir a la calle tanto para\nclima soleado como para nublado). Pero cuidado: es fácil olvidar el break, lo\ncuál causará que el programa ejecute código que no quieres que se ejecute.
\nA continuación Michelle te ayuda a entender este caso un poco mejor:
\n![\"ejemplo](\"https://img.youtube.com/vi/Aa0JhU6KZXs/0.jpg\")
Otra forma de modificar el flujo de un programa es estructuras repetitivas,\ntambién llamadas bucles (\"loops\" en inglés). Tal como hemos visto, los\ncondicionales permiten ejecutar un conjunto de sentencias una vez si una\ncondición es verdadera. Los bucles, permiten ejecutar un código varias\nveces, dependiendo de si una condición sigue siendo verdadera.
\nPiensa en un programa que imprima todos los números pares del 1 al 12. Una\nmanera de escribirlo sería como sigue:
\nconsole.log(0);\nconsole.log(2);\nconsole.log(4);\nconsole.log(6);\nconsole.log(8);\nconsole.log(10);\nconsole.log(12);\n// → 0\n// → 2\n// … etcetera\nEso funciona, pero la idea de escribir un programa es trabajar menos, no más. Si\nnecesitamos todos los números menores que 1,000, lo anterior sería imposible de\ntrabajar. Lo que necesitamos es una forma de repetir algo de código. Esta forma\nde control de flujo es llamada bucle. El control de flujo por bucles nos\npermite regresar a cierto punto en el programa en el que estuvimos antes y\nrepetirlo con nuestro estado actual, tal como lo describe el siguiente diagrama:
\n![\"Flujo](\"http://eloquentjavascript.net/img/controlflow-loop.svg\")
whileEl bucle más sencillo es el bucle while (que significa \"mientras\" en español).\nUn bucle while ejecuta repetidamente una serie de sentencias hasta que una\ncondición particular deja de ser verdadera. Al escribir un bucle while, estás\ndiciendo: \"Sigue haciendo esto mientras esta condición sea verdadera. Detente\ncuando la condición se vuelva falsa.\"
Como muestra el ejemplo a continuación, una sentencia que comienza con el\nkeyword while crea un bucle. Después de while viene una expresión en\nparéntesis que representa la condición y después un conjunto de sentencias (muy\nparecido al caso del if). Sin embargo, a diferencia del if, el bucle ejecuta\nla sentencia mientras la condición produzca un valor que sea true. Por eso es\nmuy importante que el conjunto de sentencias incluya algo que \"cambia\" para\nque la condición eventualmente sea falsa. De lo contrario, terminarás con un\nciclo infinito que nunca se detendrá, y eso usualmente es malo.
while (condición) {\n // Conjunto de sentencias, donde\n // se incluye algo que \"cambia\" para\n // que la condición eventualmente sea FALSA\n}\nRegresemos al problema de imprimir todos los números pares del 1 al 12, y\ncreemos un programa que utilice un bucle while:
let number = 0;\nwhile (number <= 12) {\n console.log(number);\n number = number + 2;\n}\n// → 0\n// → 2\n// … etcetera hasta 12\nEn este caso, como queremos imprimir los números pares del 1 al 12, creamos una\nvariable number (es importante preguntarse ¿cuántas veces necesitamos\ncrear la variable number?), la inicializamos con el valor 0, y la\nutilizamos en la condición. Queremos que el bloque dentro del while corra\nmientras el valor de number sea igual o menor a 12. El cuerpo del while\nincluye dos sentencias: la primera, imprime el número (con console.log), y la\nsegunda incrementa number en 2 (porque queremos imprimir los pares\núnicamente). La variable number demuestra la forma en que una variable puede\ndar seguimiento al progreso de un programa. Cada vez que el bucle se repite,\nnumber se incrementa en 2. Entonces, al principio de cada repetición, el\nvalor de la variable number es comparado con el número 12 para decidir si el\nprograma ha hecho todo el trabajo que tenía que hacer. Es importante que\nentendamos que si no modificamos el valor de number con la segunda sentencia,\nla condición (number <= 12) siempre será true y tendremos un ciclo infinito\nque nunca se detendrá. Esto puede causar que tu computadora tenga problemas y se\ncongele.
Si creas un bucle infinito en uno de los ejemplos, usualmente se te preguntará\nsi quieres detener el script después de unos cuantos segundos. Si eso falla,\ntendrás que cerrar la pestaña en la que estás trabajando, o, en otros\nnavegadores, cerrar el navegador entero para recuperarte.
\nVeamos algunas variantes de este mismo problema para asegurarnos que entendemos\nbien cómo funciona el ciclo while:
number sea <= 100.let number = 0;\nwhile (number <= 100) {\n console.log(number);\n number = number + 2;\n}\n// → 0\n// → 2\n// … etcetera hasta 100\nnumber con el valor de 1 (en lugar de 0).let number = 1;\nwhile (number <= 12) {\n console.log(number);\n number = number + 2;\n}\n// → 1\n// → 3\n// … etcetera hasta 11\nnumber en 1 (en lugar\nde 2) cada ciclo.let number = 0;\nwhile (number <= 12) {\n console.log(number);\n number = number + 1;\n}\n// → 0\n// → 1\n// → 2\n// … etcetera hasta 12\ndoEl bucle do es una estructura de control similar al bucle while. Se\ndiferencia en sólo un punto: un bucle do siempre ejecuta su cuerpo por lo\nmenos una vez y empieza a verificar si debería parar sólo después de la\nprimera ejecución. Para reflejar esto, la condición aparece después del cuerpo\ndel bucle. Veamos un ejemplo:
do {\n const yourName = prompt('¿Quién eres?');\n} while (!yourName);\n\nconsole.log('tu nombre es ' + yourName);\nEste programa te obligará a introducir un nombre. Preguntará una y otra vez\nhasta que obtenga algo que no sea una cadena vacía. Aplicar el operador !\nconvierte un valor a Boolean negándolo y todas las cadenas excepto '' se\nconvierten a true. Esto significa que el bucle continúa corriendo hasta que\ndes un nombre que no sea una cadena vacía.
forMuchos bucles siguen el patrón de los ejemplos previos del while. Primero, una\nvariable “contador” es creada para dar seguimiento al progreso del bucle. Luego\nviene el bucle while, cuya expresión condicional normalmente verifica si el\ncontador ha alcanzado cierto límite. El final del cuerpo del bucle, el contador\nes actualizado para dar seguimiento al progreso.
Debido a que este patrón es tan común, JavaScript y otros lenguajes similares\nproveen una versión un poco más corta y más completa: el bucle for.
for (let number = 0; number <= 12; number = number + 2) {\n console.log(number);\n}\n// → 0\n// → 2\n// … etc.\nEste programa es exactamente equivalente al ejemplo previo de impresión de\nnúmeros pares. El único cambio es que todas las sentencias que están\nrelacionadas con el \"estado\" del bucle están agrupadas.
\nLos paréntesis después del keyword for tienen que contener dos puntos y coma\n(;). La parte que está antes del primer punto y coma inicializa el bucle,\nnormalmente al definir una variable. La segunda parte es la expresión que\nverifica si el bucle tiene que continuar. La parte final actualiza el estado\ndel bucle antes de cada iteración. En la mayoría de los casos, esto es más corto\ny claro que una construcción con while.
Aquí está un código que calcula 2^10 (2 exponencial 10), usando el bucle for:
let result = 1;\nfor (let counter = 0; counter < 10; counter = counter + 1) {\n result = result * 2;\n}\nconsole.log(result);\n// → 1024\nLa representación general del bucle for es la siguiente:
for (initial setup; condition; increment){\n Bloque de código a ejecutar\n}\nEl initial setup (por ejemplo: let counter = 0) se ejecuta antes de que se\ninicie el bucle. Generalmente se usa para crear una variable que rastrea el\nnúmero de veces que se ha ejecutado el bucle. La condition (counter < 10) se\ncomprueba antes de cada ejecución del cuerpo de bucle. Si la condición es\nverdadera, el cuerpo es ejecutado; si es falsa, el bucle se detiene. En este\ncaso, el bucle se detendrá una vez que counter ya no sea inferior a 10. El\nincrement (counter = counter + 1) se ejecuta después de cada ejecución del\ncuerpo de bucle. Generalmente se utiliza para actualizar la variable de bucle.\nEn nuestro ejemplo, lo usamos para agregar 1 a counter cada vez que se ejecuta\nel bucle.
\nA continuación Alexandra te ayuda a entender el flujo de un bucle for que\nimprime el texto 'Hola mundo!' varias veces:
![\"bucle](\"https://img.youtube.com/vi/lKwx1RAxTfo/0.jpg\")
Hacer que la condición del bucle produzca false no es la única forma de que un\nbucle termine. Podemos usar la sentencia especial break, utilizada en\nswitch, que tiene el efecto de salir inmediatamente del bucle que la esté\nencerrando.
El siguiente programa ilustra el uso de la sentencia break para salir de un\nbucle. Queremos hacer un programa que encuentre el primer número que es más\ngrande o igual que 20 y divisible por 7.
for (let current = 20; ; current++) {\n if (current % 7 == 0)\n break;\n}\nconsole.log(current);\n// → 21\nUsar el operador de sobrante o módulo (%) es una forma fácil de probar si un\nnúmero es divisible por otro. Si lo es, el sobrante de la división es cero.\nTambién recuerda que current++ es lo mismo que current = current + 1.
El for en este ejemplo no tiene la parte que verifica si el bucle debe\nterminar. Esto significa que el loop nunca terminará hasta que la sentencia\nbreak que está adentro sea ejecutada.
Como, hemos visto, si dejaras afuera esa sentencia break o accidentalmente\nescribieras una condición que siempre produzca true, tu programa se quedaría\natorado en un bucle infinito.
La palabra clave continue es similar a break en que influencia el progreso\ndel bucle. Cuando se encuentra continue en el cuerpo de un bucle, el control\nsale del curpo del bucle inmediatamente y continúa en la próxima iteración del\nbucle.
A continuación Michelle te ayuda explica, con un ejemplo, las aplicaciones de\nbreak y continue dentro de un for:\n![\"ejemplo](\"https://img.youtube.com/vi/C5rIORzHOgg/0.jpg\")
for y whilePuntualmente, se usa el for cuando sabes por adelantado cuantas repeticiones\nvas a realizar y el while cuando no lo sabes.
Si decimos, \"gira el ventilador 10 veces\", de ante mano sabes que vamos a girar\nel ventilador 10 veces, por tal, el for seria buena idea.
Si decimos: \"mientras haga calor gira el ventilador\". En realidad no sabemos de\nante mano cuantas veces vamos a girar el ventilador por que no sabemos cuanto\ntiempo tendremos calor, por ende, usar un while sería buena idea.
estructuras condicionales y cómo afectan el flujo del\nprogramaestructuras repetitivas y cómo afectan el flujo del\nprogramaEl texto a continuación se basa en gran medida, con ciertos ajustes, en el\ncapítulo 2 de Eloquent JavaScript,de Marijn\nHaverbeke, 2014. Traducción en Español\ndisponible gracias a hectorip, y del capítulo 6 de\nJavaScript for kids,\nNick Morgan, 2015;
\nLa razón por la cual creamos programas de computación es para resolver\nproblemas. Un programa, hemos visto, es simplemente un conjunto de\n\"instrucciones\" que las computadoras siguen. Ese conjunto de instrucciones\nresuelven un problema. Hasta ahora hemos aprendido a obtener, representar,\nmanipular y almacenar data en variables. Con esto, hemos podido crear\nprogramas que resuleven problemas muy sencillos. Esto es el caso, por ejempo,\ndel programa que hicimos para transformar la temperatura en Celsius (°C) a\nFarenheit (°F). Sin embargo, para crear programas más complejos, es necesario\nexpandir nuestro conocimiento sobre el control de flujo de un programa y las\nestructuras que existen para modificar este flujo.
Para utilizar la terminología correcta de JavaScript, de ahora en adelante,\nsustituiremos la palabra \"instrucciones\" por la palabra \"sentencias\". Una\nsentencia JavaScript es el equivalente a una oración en un leguaje humano.\nEntendemos, por lo tanto, que un programa en JavaScript es una lista de\n\"sentencias JavaScript\"; es decir, un conjunto de oraciones que le dicen al\ncomputador qué hacer.
\nCuando un programa contiene más de una sentencia, éstas son ejecutadas de arriba\nhacia abajo, una por una. Por ejemplo, el siguiente programa tiene tres\nsentencias: la primera le declara una variable llamada name con el valor del\nstring 'Michelle'; la segunda, imprime en la consola un mensaje personalizado de\nsaludo 'Hola Michelle'; y la tercera, imprime en la consola un mensaje que dice\n'Qué nombre tan largo tienes!'.
const name = 'Michelle';\nconsole.log('Hola ' + name);\nconsole.log('Qué nombre tan largo tienes!');\n// returns > Hola Michelle\n// Qué nombre tan largo tienes!\nUna representación trivial esquemática de un flujo de control recto sería:
\n
Ejecutar sentencias en línea recta no es la única opción que tenemos. Una\nalternativa es la ejecución condicional, en donde escogemos entre dos rutas\ndiferentes basados en un valor Boolean, así:
La ejecución condicional se escribe con el keyword if en JavaScript. La\ninstrucción if es la más simple de las estructuras de control de JavaScript.\nSe utiliza para ejecutar código si y sólo si una condición es verdadera. Un\ncondicional dice: \"Si algo es verdad, haz esto\". Por ejemplo, si hiciste tu\ntarea (true), recibes un helado, pero si no hiciste tu tarea (false),\nno recibes el helado.
Como muestra el ejemplo a continuación, una sentencia if tiene 2 partes\nprincipales: la condición y el cuerpo. La condición debe ser un valor Boolean\nque va entre paréntesis. El cuerpo consiste en una o más sentencias JavaScript\nque se ejecutarán si, y solo si, la condición es verdadera (Boolean igual a\ntrue).
if (condición) {\n // Conjunto de sentencias a ejecutar\n}\nCuando necesitamos ejecutar múltiples sentencias, podemos encerrarlas en llaves\n({ y }). Las llaves agrupan las sentencias, haciéndolos valer por una sola. Una\nsecuencia de sentencias encerradas en llaves es llamada un bloque (de\ncódigo). Muchos programadores de JavaScript encierran cada cuerpo de un if (y\nen los bucles, como verás más adelante), en llaves. Lo hacen en nombre de la\nconsistencia y para evitar tener que añadir o quitar las llaves cuando el número\nde sentencias en el cuerpo cambie. Otros, valoran la brevedad y en el caso del\nif no utilizan las llaves. En este curso, siempre usaremos las llaves para\nayudarnos a organizar nuestro código.
Volvamos al ejemplo anterior y agreguemos una condición antes de la sentencia\nque imprime el segundo mensaje:
\nconst name = 'Michelle';\nconsole.log('Hola ' + name);\nif (name.length > 7) {\n console.log('Qué nombre tan largo tienes!');\n}\n// imprime > Hola Michelle\n// Qué nombre tan largo tienes!\nCon esta modificación, antes de imprimir en la consola el segundo mensaje ('Qué\nnombre tan largo tienes!'), el programa verifica si la longitud del string\nname es mayor a 7. De ser así, se imprime el segundo mensaje. De no ser así,\nno se ejecuta esa sentencia. En este caso, dado que Michelle tiene 8\ncaracteres (letras), la condición es true. Por lo tanto, se imprime el segundo\nmensaje.
Cambiemos un poco este ejemplo, modificando el valor de name a 'Ana'.
const name = 'Ana';\nconsole.log('Hola ' + name);\nif (name.length > 7) {\n console.log('Qué nombre tan largo tienes!');\n}\n// returns > Hola Ana\nEn esta ocasión, la condición no es true (es false) porque la longitud\ndel nombre es 3, lo cual no es mayor a 7. Por lo tanto, el cuerpo del if\nno se ejecuta. De tal manera, únicamente se ejecuta el primer mensaje 'Hola\nAna'.
if... elseA menudo no sólo tendrás código que se ejecute cuando una condición sea\nverdadera, sino también que maneje el otro caso. Este camino alternativo es\nrepresentado por la segunda flecha en el diagrama de flujo. La palabra clave\nelse puede ser usada, junto con if, para crear dos rutas de ejecución\nseparadas y alternativas.
Agregemos una sentencia else a nuestro ejemplo:
const name = 'Ana';\nconsole.log('Hola ' + name);\nif (name.length > 7) {\n console.log('Qué nombre tan largo tienes!');\n} else {\n console.log('Tu nombre no es muy largo');\n}\n\n// returns > Hola Ana\n// Tu nombre no es muy largo\nComo ves, el resultado de este caso es similar al anterior, solo que si name\nno tiene una logitud mayor a 7, existe un \"mensaje alternativo\" que se\nejecuta.
Como muestra el ejemplo a continuación, las sentencias if ... else son\nsimilares a las sentencias if, pero incluyen 2 cuerpos. Si la condición es\ntrue, se ejecutan las sentencias del primer cuerpo; de lo contrario, se\nejecutan las sentencias del segundo cuerpo.
if (condición) {\n Sentencias a ejecutar si condición es VERDADERA\n} else {\n Sentencias a ejecutar si condición es FALSA\n}\nSi tenemos más de dos caminos a escoger, varios pares de if...else pueden ser\n\"encadenados\". Aquí hay un ejemplo:
const num = parseInt(prompt('Dame un número', '0'));\n\nif (num < 10) {\n alert('Diste un número Pequeño');\n} else if (num < 100) {\n alert('Diste un número Mediano');\n} else {\n alert('Diste un número Grande');\n}\nEl programa primero revisará si num es menor que 10. Si lo es, escoge ese\ncamino, muestra 'Diste un número Pequeño' en un alert box y termina. Si no lo\nes, toma el camino del else, que en sí mismo contiene un segundo if. Si la\nsegunda condición (< 100) se cumple, significa que el número está entre 10 y\n100, y se muestra 'Diste un número Mediano' en un alert box. Si no lo es, el\nsegundo y último else es escogido, mostrando 'Diste un número Grande'.
El diagrama de flujo para este programa es algo así:
\n
Veamos otro ejemplo de la aplicación de la sentencia if...else. Esta vez, con\nun video de otra profesora estrella de Laboratoria, Alexandra :)
Es común ver código así:
\nif (variable == 'valor1') {\n accion1();\n} else if (variable == 'valor2') {\n accion2();\n} else if (variable == 'valor3') {\n accion3();\n} else {\n accionDefault();\n}\nExiste una estructura llamada switch que está hecha para \"despachar\" de un\nmodo más directo. Desafortunadamente, la sintaxis que JavaScript usa para esto\n(que es heredada de la línea de lenguajes de programación de C/Java) es un poco\nincómoda; una cadena de sentencias if a menudo luce mejor. Aquí hay un\nejemplo:
switch (prompt('¿Cómo está el clima?')) {\n case 'lluvioso':\n console.log('Recuerda llevar un paraguas.');\n break;\n case 'soleado':\n console.log('Viste ligero.');\n case 'nublado':\n console.log('Sal a la calle.');\n break;\n default:\n console.log('Tipo de Clima desconocido.');\n break;\n}\nPuedes poner cualquier cantidad de etiquetas case dentro del bloque switch.\nEl programa saltará a la etiqueta que corresponda al valor que se le dio al\nswitch o al default si no se encuentra valor que corresponda. Se empiezan a\nejecutar las sentencias desde ahí, incluso si están bajo otra etiqueta, hasta\nque se llegue a una sentencia break (que en español significa \"detener\").
En algunos casos, como en el caso de 'soleado' en el ejemplo, esto puede ser\nusado para compartir código entre casos (recomienda salir a la calle tanto para\nclima soleado como para nublado). Pero cuidado: es fácil olvidar el break, lo\ncuál causará que el programa ejecute código que no quieres que se ejecute.
\nA continuación Michelle te ayuda a entender este caso un poco mejor:
\n
Otra forma de modificar el flujo de un programa es estructuras repetitivas,\ntambién llamadas bucles (\"loops\" en inglés). Tal como hemos visto, los\ncondicionales permiten ejecutar un conjunto de sentencias una vez si una\ncondición es verdadera. Los bucles, permiten ejecutar un código varias\nveces, dependiendo de si una condición sigue siendo verdadera.
\nPiensa en un programa que imprima todos los números pares del 1 al 12. Una\nmanera de escribirlo sería como sigue:
\nconsole.log(0);\nconsole.log(2);\nconsole.log(4);\nconsole.log(6);\nconsole.log(8);\nconsole.log(10);\nconsole.log(12);\n// → 0\n// → 2\n// … etcetera\nEso funciona, pero la idea de escribir un programa es trabajar menos, no más. Si\nnecesitamos todos los números menores que 1,000, lo anterior sería imposible de\ntrabajar. Lo que necesitamos es una forma de repetir algo de código. Esta forma\nde control de flujo es llamada bucle. El control de flujo por bucles nos\npermite regresar a cierto punto en el programa en el que estuvimos antes y\nrepetirlo con nuestro estado actual, tal como lo describe el siguiente diagrama:
\n
whileEl bucle más sencillo es el bucle while (que significa \"mientras\" en español).\nUn bucle while ejecuta repetidamente una serie de sentencias hasta que una\ncondición particular deja de ser verdadera. Al escribir un bucle while, estás\ndiciendo: \"Sigue haciendo esto mientras esta condición sea verdadera. Detente\ncuando la condición se vuelva falsa.\"
Como muestra el ejemplo a continuación, una sentencia que comienza con el\nkeyword while crea un bucle. Después de while viene una expresión en\nparéntesis que representa la condición y después un conjunto de sentencias (muy\nparecido al caso del if). Sin embargo, a diferencia del if, el bucle ejecuta\nla sentencia mientras la condición produzca un valor que sea true. Por eso es\nmuy importante que el conjunto de sentencias incluya algo que \"cambia\" para\nque la condición eventualmente sea falsa. De lo contrario, terminarás con un\nciclo infinito que nunca se detendrá, y eso usualmente es malo.
while (condición) {\n // Conjunto de sentencias, donde\n // se incluye algo que \"cambia\" para\n // que la condición eventualmente sea FALSA\n}\nRegresemos al problema de imprimir todos los números pares del 1 al 12, y\ncreemos un programa que utilice un bucle while:
let number = 0;\nwhile (number <= 12) {\n console.log(number);\n number = number + 2;\n}\n// → 0\n// → 2\n// … etcetera hasta 12\nEn este caso, como queremos imprimir los números pares del 1 al 12, creamos una\nvariable number (es importante preguntarse ¿cuántas veces necesitamos\ncrear la variable number?), la inicializamos con el valor 0, y la\nutilizamos en la condición. Queremos que el bloque dentro del while corra\nmientras el valor de number sea igual o menor a 12. El cuerpo del while\nincluye dos sentencias: la primera, imprime el número (con console.log), y la\nsegunda incrementa number en 2 (porque queremos imprimir los pares\núnicamente). La variable number demuestra la forma en que una variable puede\ndar seguimiento al progreso de un programa. Cada vez que el bucle se repite,\nnumber se incrementa en 2. Entonces, al principio de cada repetición, el\nvalor de la variable number es comparado con el número 12 para decidir si el\nprograma ha hecho todo el trabajo que tenía que hacer. Es importante que\nentendamos que si no modificamos el valor de number con la segunda sentencia,\nla condición (number <= 12) siempre será true y tendremos un ciclo infinito\nque nunca se detendrá. Esto puede causar que tu computadora tenga problemas y se\ncongele.
Si creas un bucle infinito en uno de los ejemplos, usualmente se te preguntará\nsi quieres detener el script después de unos cuantos segundos. Si eso falla,\ntendrás que cerrar la pestaña en la que estás trabajando, o, en otros\nnavegadores, cerrar el navegador entero para recuperarte.
\nVeamos algunas variantes de este mismo problema para asegurarnos que entendemos\nbien cómo funciona el ciclo while:
number sea <= 100.let number = 0;\nwhile (number <= 100) {\n console.log(number);\n number = number + 2;\n}\n// → 0\n// → 2\n// … etcetera hasta 100\nnumber con el valor de 1 (en lugar de 0).let number = 1;\nwhile (number <= 12) {\n console.log(number);\n number = number + 2;\n}\n// → 1\n// → 3\n// … etcetera hasta 11\nnumber en 1 (en lugar\nde 2) cada ciclo.let number = 0;\nwhile (number <= 12) {\n console.log(number);\n number = number + 1;\n}\n// → 0\n// → 1\n// → 2\n// … etcetera hasta 12\ndoEl bucle do es una estructura de control similar al bucle while. Se\ndiferencia en sólo un punto: un bucle do siempre ejecuta su cuerpo por lo\nmenos una vez y empieza a verificar si debería parar sólo después de la\nprimera ejecución. Para reflejar esto, la condición aparece después del cuerpo\ndel bucle. Veamos un ejemplo:
do {\n const yourName = prompt('¿Quién eres?');\n} while (!yourName);\n\nconsole.log('tu nombre es ' + yourName);\nEste programa te obligará a introducir un nombre. Preguntará una y otra vez\nhasta que obtenga algo que no sea una cadena vacía. Aplicar el operador !\nconvierte un valor a Boolean negándolo y todas las cadenas excepto '' se\nconvierten a true. Esto significa que el bucle continúa corriendo hasta que\ndes un nombre que no sea una cadena vacía.
forMuchos bucles siguen el patrón de los ejemplos previos del while. Primero, una\nvariable “contador” es creada para dar seguimiento al progreso del bucle. Luego\nviene el bucle while, cuya expresión condicional normalmente verifica si el\ncontador ha alcanzado cierto límite. El final del cuerpo del bucle, el contador\nes actualizado para dar seguimiento al progreso.
Debido a que este patrón es tan común, JavaScript y otros lenguajes similares\nproveen una versión un poco más corta y más completa: el bucle for.
for (let number = 0; number <= 12; number = number + 2) {\n console.log(number);\n}\n// → 0\n// → 2\n// … etc.\nEste programa es exactamente equivalente al ejemplo previo de impresión de\nnúmeros pares. El único cambio es que todas las sentencias que están\nrelacionadas con el \"estado\" del bucle están agrupadas.
\nLos paréntesis después del keyword for tienen que contener dos puntos y coma\n(;). La parte que está antes del primer punto y coma inicializa el bucle,\nnormalmente al definir una variable. La segunda parte es la expresión que\nverifica si el bucle tiene que continuar. La parte final actualiza el estado\ndel bucle antes de cada iteración. En la mayoría de los casos, esto es más corto\ny claro que una construcción con while.
Aquí está un código que calcula 2^10 (2 exponencial 10), usando el bucle for:
let result = 1;\nfor (let counter = 0; counter < 10; counter = counter + 1) {\n result = result * 2;\n}\nconsole.log(result);\n// → 1024\nLa representación general del bucle for es la siguiente:
for (initial setup; condition; increment){\n Bloque de código a ejecutar\n}\nEl initial setup (por ejemplo: let counter = 0) se ejecuta antes de que se\ninicie el bucle. Generalmente se usa para crear una variable que rastrea el\nnúmero de veces que se ha ejecutado el bucle. La condition (counter < 10) se\ncomprueba antes de cada ejecución del cuerpo de bucle. Si la condición es\nverdadera, el cuerpo es ejecutado; si es falsa, el bucle se detiene. En este\ncaso, el bucle se detendrá una vez que counter ya no sea inferior a 10. El\nincrement (counter = counter + 1) se ejecuta después de cada ejecución del\ncuerpo de bucle. Generalmente se utiliza para actualizar la variable de bucle.\nEn nuestro ejemplo, lo usamos para agregar 1 a counter cada vez que se ejecuta\nel bucle.
\nA continuación Alexandra te ayuda a entender el flujo de un bucle for que\nimprime el texto 'Hola mundo!' varias veces:
Hacer que la condición del bucle produzca false no es la única forma de que un\nbucle termine. Podemos usar la sentencia especial break, utilizada en\nswitch, que tiene el efecto de salir inmediatamente del bucle que la esté\nencerrando.
El siguiente programa ilustra el uso de la sentencia break para salir de un\nbucle. Queremos hacer un programa que encuentre el primer número que es más\ngrande o igual que 20 y divisible por 7.
for (let current = 20; ; current++) {\n if (current % 7 == 0)\n break;\n}\nconsole.log(current);\n// → 21\nUsar el operador de sobrante o módulo (%) es una forma fácil de probar si un\nnúmero es divisible por otro. Si lo es, el sobrante de la división es cero.\nTambién recuerda que current++ es lo mismo que current = current + 1.
El for en este ejemplo no tiene la parte que verifica si el bucle debe\nterminar. Esto significa que el loop nunca terminará hasta que la sentencia\nbreak que está adentro sea ejecutada.
Como, hemos visto, si dejaras afuera esa sentencia break o accidentalmente\nescribieras una condición que siempre produzca true, tu programa se quedaría\natorado en un bucle infinito.
La palabra clave continue es similar a break en que influencia el progreso\ndel bucle. Cuando se encuentra continue en el cuerpo de un bucle, el control\nsale del curpo del bucle inmediatamente y continúa en la próxima iteración del\nbucle.
A continuación Michelle te ayuda explica, con un ejemplo, las aplicaciones de\nbreak y continue dentro de un for:\n
for y whilePuntualmente, se usa el for cuando sabes por adelantado cuantas repeticiones\nvas a realizar y el while cuando no lo sabes.
Si decimos, \"gira el ventilador 10 veces\", de ante mano sabes que vamos a girar\nel ventilador 10 veces, por tal, el for seria buena idea.
Si decimos: \"mientras haga calor gira el ventilador\". En realidad no sabemos de\nante mano cuantas veces vamos a girar el ventilador por que no sabemos cuanto\ntiempo tendremos calor, por ende, usar un while sería buena idea.
estruturas condicionais e como eles afetam o fluxo do\nprogramaestruturas repetitivas e como afetam o fluxo do programaO texto a seguir se baseia em grande medida, com alguns ajustes, ao capítulo 2\ndo Eloquent JavaScript,de Marijn Haverbeke,\n2014. Tradução em\nPortuguês,\ne ao capítulo 6 do JavaScript for\nkids,\nNick Morgan, 2015;
\nA razão pela qual criamos programas de computador é para resolver problemas.\nUm programa, como vimos, é simplemente um conjunto de \"instruções\" que os\ncomputadores seguem. Esse conjunto de instruções resolve um problema. Até agora,\naprendemos a obter, representar, manipular e armazenar dados em variáveis. Com\nisso, conseguimos criar programas que resolvem problemas muito simples. Este é o\ncaso, por exemplo, do programa que fizemos para transformar a temperatura de\ngraus Celsius (°C) para Farenheit (°F). No entanto, para criar programas mais\ncomplexos, é necessário expandir nosso conhecimento sobre o controle de fluxo\nde um programa e as estruturas existentes para modificar esse fluxo.
Para usar a terminologia correta de JavaScript, a partir de agora,\nsubstituiremos a palavra \"instruções\" pela palavra \"sentenças\". Uma instrução\nJavaScript é o equivalente a uma sentença em linguagem humana. Entendemos,\nportanto, que um programa em JavaScript é uma lista de \"instruções JavaScript\",\nisto é, um conjunto de sentenças que informa ao computador o que fazer.
\nQuando um programa contém mais de uma frase, elas são executadas de cima para\nbaixo, uma por uma. Por exemplo, o programa a seguir tem três sentenças: a\nprimeira declara uma variável chamada name com o valor do string 'Samanta'; a\nsegunda exibe no terminal uma mensagem de saudação personalizada: \"Olá\nSamanta\"; e a terceira exibe \"Que nome longo você tem!\".
const name = 'Samanta';\nconsole.log('Olá ' + name);\nconsole.log('Que nome lindo você tem!');\n// returns Olá Samanta\n// Que nome lindo você tem!\nUma representação trivial esquemática de um fluxo de controle direto seria:
\nA execução de frases em linha reta não é a única opção que temos. Uma\nalternativa é a execução condicional, em que escolhemos entre duas rotas\ndiferentes com base em um valor Boolean, assim:
A execução condicional é escrita com a palavra-chave if en JavaScript. A\ninstrução if é a mais simples das estruturas de controle dessa linguagem. Ela\né usada para executar código se, e somente se, uma condição for verdadeira. Uma\ncondicional diz: \"Se algo é verdade, faça isso\". Por exemplo, se você fez sua\nlição de casa, recebe um sorvete, mas se você não fez sua lição, não o recebe.
Como o exemplo abaixo mostra, uma sentença if em duas partes principais: a\ncondição e o corpo. A condição deve ser um valor Boolean entre parênteses. O\ncorpo consiste em uma ou mais instruções JavaScript que serão executadas se, e\nsomente se, a condição for verdadeira (Boolean igual a true).
if (condição) {\n // Conjunto de sentenças a executar\n}\nQuando precisamos executar várias instruções, podemos colocá-las entre chaves\n({ e }). As chaves agrupam as sentenças, tornando-as apenas uma. Uma sequência\nde sentenças entre chaves é chamada de bloco (de código). Muitos\nprogramadores JavaScript incluem chaves em todo corpo de if (e nos loops,\ncomo você verá mais adiante). Eles fazem isso em nome da consistência e para não\nter que adicionar ou remover as chaves quando o número de sentenças no corpo\nmudar. Outros, valorizam a brevidade e no caso do if não utilizam as chaves.\nNeste curso, sempre usaremos as chaves para nos ajudar a organizar nosso código.
Vamos voltar ao exemplo anterior e adicionar uma condição antes da frase que\nimprime a segunda mensagem:
\nconst name = 'Samanta';\nconsole.log('Olá ' + name);\nif(name.length > 6) {\n console.log('Que nome grande você tem!');\n}\n// returns Olá Samanta\n// Que nome grande você tem!\nCom esta modificação, antes de imprimir no terminal a segunda mensagem ('Que\nnome longo você tem!'), o programa verifica se o tamanho da string name é\nmaior que 6. Se sim, a segunda mensagem é impressa. Caso contrário, essa\nsentença não é executada. Neste caso, como Samanta tem 7 caracteres, a condição\né true. Portanto, a segunda mensagem é impressa.
Vamos mudar um pouco este exemplo, modificando o valor de name para 'Ana'.
const name = 'Ana';\nconsole.log('Olá ' + name);\nif (name.length > 6) {\n console.log('Que nome grande você tem!');\n}\n// returns Olá Ana\nNesta ocasião, a condição não é true (é false) porque o comprimento do\nnome é 3, que não é maior que 6. Portanto, o corpo do if não se\nexecuta. Desta forma, apenas a primeira mensagem 'Olá Ana' é executada.
if... elseMuitas vezes, você não só terá o código que é executado quando uma condição é\nverdadeira, mas também quando acontece o outro caso. Esse caminho alternativo é\nrepresentado pela segunda seta no diagrama de fluxo. A palavra-chave else pode\nser usada, junto com if, para criar dois caminhos de execução separados e\nalternativos.
Adicionemos uma sentença else ao nosso exemplo:
const name = 'Ana';\nconsole.log('Olá ' + name);\nif (name.length > 6) {\n console.log('Que nome grande você tem!');\n} else {\n console.log('Não nome não é muito grande');\n}\n// returns Olá Ana\n// Não nome não é muito grande\nComo você pode ver, o resultado deste caso é similar ao anterior, mas se name\nnão tiver um comprimento maior que 6, existe uma \"mensagem alternativa\" que\né executada.
Como o exemplo abaixo mostra, as sentenças if ... else são semelhantes à\nsentenças if, mas incluem dois corpos. Se a condição é true, as sentenças do\nprimeiro corpo são executadas; caso contrário, as sentenças do segundo corpo são\nexecutadas.
if (condição) {\n Sentenças para execução se a condição for VERDADEIRA\n} else {\n Sentenças para execução se a condição for FALSA\n}\nSe tivermos mais de dois caminhos para escolher, vários pares if... else podem\nser \"encadeados\". Aqui está um exemplo:
\nconst num = parseInt(prompt('Digite um número', '0'));\n\nif (num < 10){\n alert('Você digitou um número pequeno');\n}\nelse if (num < 100){\n alert('Você digitou um número médio');\n}\nelse {\n alert('Você digitou um número grande');\n}\nO programa primeiro verificará se num é menor que 10. Se for, ele escolhe esse\ncaminho, mostra \"Você digitou um número pequeno\" em uma caixa de alerta e\ntermina. Se não for, toma o caminho do else, que em si mesmo contém um\nsegundo if. Se a segunda condição (< 100) for atendida, significa que o número\nestá entre 10 e 100, e \"Você digitou um número médio\" é exibido em uma caixa de\nalerta. Se não for, o segundo e último else é escolhido, mostrando \"Você\ndigitou um número grande\".
O fluxograma deste programa é algo assim:
\nVamos ver outro exemplo de como usar if...else. Dessa vez com um vídeo da Paloma:
![\"if](\"https://img.youtube.com/vi/wQ_s9sso9b0/0.jpg\")
É comum ver o código assim:
\nif (variable == 'valor1') {\n accion1();\n}\nelse if (variable == 'valor2') {\n accion2();\n}\nelse if (variable == 'valor3') {\n accion3();\n}\nelse {\n accionDefault();\n}\nExiste uma estrutura chamada switch que serve para \"decidir\" de maneira mais\ndireta. Infelizmente, a sintaxe que o JavaScript usa para isso (que é herdada da\nlinha da linguagem de programação C/Java) é um pouco estranha. Uma sequência de\nfrases if geralmente parece melhor. Aqui está um exemplo:
switch (prompt('Como está o clima?')) {\n case 'chuvoso':\n console.log('Lembre-se de levar um guarda-chuva.');\n break;\n case 'ensolarado':\n console.log('Vista roupas leves.');\n case 'nublado':\n console.log('Saia para a rua.');\n break;\n default:\n console.log('Tipo de tempo desconhecido.');\n break;\n}\nVocê pode colocar qualquer número de etiquetas case dentro do bloco switch.\nO programa irá pular para o rótulo correspondente ao valor que foi dado ao\nswitch ou ao default se não houver nenhum valor igual. Daí, eles começam a\nexecutar as sentenças, incluindo os abaixo de outro rótulo, até que uma sentença\nbreak seja alcançada (o que em português significa \"pare\").
Em alguns casos, como no caso de \"ensolarado\" no exemplo, é possível\ncompartilhar o código entre os casos (é recomendado ir ao ar livre tanto para\ntempo ensolarado quanto nublado). Mas cuidado: é fácil esquecer o break, o que\nfará com que o programa execute um código que você não deseja executar.
\nA seguir o Daniel te ajudará entender este caso um pouco melhor:
\n![\"Switch\"](\"https://img.youtube.com/vi/CbBTrBwzQfQ/0.jpg\")
Outra forma de modificar o fluxo de um programa é por meio de estruturas\nrepetitivas, também chamadas \"loops\" em inglês. Como já estamos vendo, as\ncondicionais permitem executar um conjunto de sentenças uma vez se uma condição\né verdadeira. Os loops permitem executar um código várias vezes,\ndependendo se uma condição continua sendo verdadeira.
\nImagine um programa que imprima todos os números pares do 1 ao 12. Uma maneira\nde escrevê-lo seria assim:
\nconsole.log(0);\nconsole.log(2);\nconsole.log(4);\nconsole.log(6);\nconsole.log(8);\nconsole.log(10);\nconsole.log(12);\n// → 0\n// → 2\n// … etcetera\nIsso funciona, mas a ideia de escrever um programa é trabalhar menos, e não\nmais. Se necessitamos todos os números menores que 1,000, o modo anterior seria\nimpossível de trabalhar. O que necessitamos é uma forma de repetir partes de\ncódigo. Esta forma de controle de fluxo é chamada loop. O controle de fluxo\npor loops nos permite voltar a certo ponto no programa em que estivemos antes e\nrepetí-lo com nosso estado atual, como descreve o seguinte diagrama:
\nwhileO loop mais simples é o loop while (que significa \"enquanto\" em português). Um\nloop while executa repetidamente uma série de sentenças até que uma condição\nparticular deixe de ser verdadeira. Ao escrever um loop while, você está\ndizendo: \"Continue fazendo isto enquanto esta condição seja verdadeira. Pare\nquando a condição se tornar falsa.\"
Como revela o exemplo a seguir, uma sentença que começa com a keyword while\ncria um loop. Depois de while vem uma expressão em parênteses que representa a\ncondição e depois um conjunto de sentenças (muito parecido ao caso do if).\nPorém, diferentemente do if, o loop executa a sentença enquanto a condição\nproduza um valor que seja true. Por isso é muito importante que o conjunto de\nsentenças inclua algo que \"muda\" para que a condição eventualmente seja falsa.\nDo contrário, criaria um ciclo infinito que nunca termina, e isto usualmente é\nruim.
while (condição) {\n // Conjunto de sentenças, onde\n // se inclui algo que \"muda\" para\n // que a condição eventualmente seja FALSA\n}\nVamos voltar agora ao problema de imprimir todos os números pares do 1 ao 12, e\ncriar um programa que utilize um loop while:
let number = 0;\nwhile (number <= 12) {\n console.log(number);\n number = number + 2;\n}\n// → 0\n// → 2\n// … etcetera até 12\nNeste caso, como queremos imprimir os números pares do 1 ao 12, criamos uma\nvariável number, inicializamos com o valor 0, e a utilizamos na condição.\nQueremos que o bloco dentro do while funcione enquanto o valor de number\nseja igual ou menor a 12. O corpo do while inclui duas sentenças: a primeira\nimprime o número (com console.log), e a segunda incrementa number em 2 (porque\nqueremos imprimir os pares unicamente). A variável number demonstra a forma em\nque uma variável pode dar seguimento ao progresso de um programa. Cada vez que o\nloop se repete, number se incrementa em 2. Então, no início de cada repetição,\no valor da variável number é comparado com o número 12 para decidir se o\nprograma fez todo o trabalho que deveria fazer. É importante que entendamos que\nse não modificamos o valor de number com a segunda sentença, a condição\n(number <=12) sempre será true e teremos um ciclo infinito que nunca se\ndeterá. Isto pode causar que o seu computador tenha problemas e trave.
Se você cria um loop infinito em um dos exemplos, usualmente será perguntado se\nvocê quer deter o script depois de alguns segundos. Se isso falha, você terá que\nfechar a aba na qual está trabalhando, ou, em outros navegadores, fechar o\nnavegador inteiro para se recuperar.
\nVejamos algumas variantes deste mesmo problema para assegurar que entendemos bem\ncomo funciona o ciclo while:
number seja <= 100.let number = 0;\nwhile (number <= 100) {\n console.log(number);\n number = number + 2;\n}\n// → 0\n// → 2\n// … etcetera até 100\nnumber com o valor de 1 (ao invés de 0).let number = 1;\nwhile (number <= 12) {\n console.log(number);\n number = number + 2;\n}\n// → 1\n// → 3\n// … etcetera até 11\nnumber em 1 (no lugar de\n 2) a cada ciclo.let number = 0;\nwhile (number <= 12) {\n console.log(number);\n number = number + 1;\n}\n// → 0\n// → 1\n// → 2\n// … etcetera até 12\ndoO loop do é uma estrutura de controle similar ao loop while. A diferença\nestá em um só ponto: um loop do sempre executa seu corpo pelo menos uma\nvez e começa a verificar se deveria parar somente depois da primeira execução.\nPara refletir isto, a condição aparece depois do corpo do loop. Vejamos um\nexemplo:
let yourName;\ndo {\n yourName = prompt('Qual é seu nome?');\n} while (!yourName);\n\nconsole.log('seu nome é ' + yourName);\nEste programa te obrigará a introduzir um nome. Perguntará uma e outra vez até\nque obtenha algo que não seja uma cadeia vazia. Aplicar o operador ! converte\num valor a Boolean negando-o e todas as cadeias exceto '' se convertem a\ntrue. Isto significa que ele continua rodando até que você dê um nome que não\nseja uma cadeia vazia.
forMuitos loops seguem um padrão dos exemplos prévios do while. Primeiro, uma\nvariável “contador” é criada para dar seguimento ao progresso do loop. Logo\ndepois vem o loop while, cuja expressão condicional normalmente verifica se o\ncontador alcançou certo limite. Ao final do corpo do loop, o contador é\natualizado para dar seguimento ao progresso.
Devido ao fato de que este padrão é muito comum, JavaScript e outras linguagens\nsimilares proporcionam uma versão um pouco mais curta e mais completa: o loop\nfor.
for (let number = 0; number <= 12; number = number + 2){\n console.log(number);\n}\n// → 0\n// → 2\n// … etc.\nEste programa é exatamente equivalente ao exemplo prévio de impressão de números\npares. A única mudança é que todas as sentenças que estão relacionadas com o\n\"estado\" do ciclo estão agrupadas.
\nOs parênteses depois do keyword for devem conter ponto e vírgula (;). A\nparte que está antes do primeiro ponto e vírgula inicia o loop, normalmente ao\ndefinir uma variável. A segunda parte é a expressão que verifica se o loop tem\nque continuar. A parte final atualiza o estado do loop antes de cada iteração.\nNa maioria dos casos, isto é mais curto e claro que uma construção com while.
A seguir mostramos um código que calcula 2^10 (2 exponencial 10), usando o loop\nfor:
let result = 1;\nfor (let counter = 0; counter < 10; counter = counter + 1){\n result = result * 2\n}\nconsole.log(result);\n// → 1024\nA representação geral do loop for é a seguinte:
for (initial setup; condition; increment){\n Bloco de código a executar\n}\nO initial setup (por exemplo: let counter = 0) se executa antes de que se\ninicie o loop. Geralmente se usa para criar uma variável que rastreia o número\nde vezes que foi executado o loop. A condition (counter < 10) se comprova\nantes de cada execução do corpo do loop. Se a condição é verdadeira, o corpo é\nexecutado; se é falsa, o loop se detém. Neste caso, o loop se deterá uma vez que\ncounter já não seja inferior a 10. O increment (counter = counter + 1) se\nexecuta depois de cada execução do corpo do loop. Geralmente se utiliza para\natualizar a variável do loop. No nosso exemplo, utilizamos para agregar 1 a\ncounter cada vez que se executa o loop.
A seguir Paloma te ajudará a entender o fluxo do loop for:
\n![\"For\"](\"https://img.youtube.com/vi/6iZEpRhzDKI/0.jpg\")
Fazer com que a condição do loop produza false não é a única forma para que um\nloop termine. Podemos usar a sentença especial break, utilizada en switch,\nque tem o efeito de sair inmediatamente do loop que o esta fechando.
O programa a seguir ilustra o uso da sentença break para sair de um loop.\nQueremos fazer um programa que encontre o primeiro número que é maior ou igual a\n20 e divisível por 7.
for (let current = 20; current++) {\n if (current % 7 == 0)\n break;\n}\nconsole.log(current);\n// → 21\nUsar o operador de resto ou módulo (%) é uma forma fácil de provar se o número é\ndivisível por outro. Se for, o resto da divisão é zero. Também lembre-se que\ncurrent++ é o mesmo que current = current + 1.
O for neste exemplo não tem a parte que verifica se o loop deve terminar. Isto\nsignifica que o loop nunca terminará até que a sentença break que está dentro\nseja executada.
Como já estamos aprendendo, se você deixasse fora essa sentença break ou\nacidentalmente escrevesse uma condição que sempre produza true, o seu programa\nse ficaria travado em um loop infinito.
A palavra chave continue é parecida ao break pois influencia o progresso do\nloop. Quando se encontra continue no corpo de um loop, o controle sai do corpo\ndo loop imediatamente e continua na próxima iteração do loop.
A seguir Rafael te explicará, com um exemplo, as aplicações de break and\ncontinue dentro de um for:
![\"Break](\"https://img.youtube.com/vi/1B6pwKRDWgE/0.jpg\")
for e whilePontualmente, se usa o for quando se save quantas repetições vão ser\nrealizadas e o while quando não se sabe.
Se dissermos, \"gire o ventilador 10 vezes\", você já sabe que vamos girar o\nventilador 10 vezes, então seria uma boa ideal usar o for.
Se dissermos, \"enquanto estiver calor gire o ventilador\". Não sabemos quantas\nvezes vamos girar o ventilador até ficar frio, então usar o while nesse caso é\nmelhor.
estruturas condicionais e como eles afetam o fluxo do\nprogramaestruturas repetitivas e como afetam o fluxo do programaO texto a seguir se baseia em grande medida, com alguns ajustes, ao capítulo 2\ndo Eloquent JavaScript,de Marijn Haverbeke,\n2014. Tradução em\nPortuguês,\ne ao capítulo 6 do JavaScript for\nkids,\nNick Morgan, 2015;
\nA razão pela qual criamos programas de computador é para resolver problemas.\nUm programa, como vimos, é simplemente um conjunto de \"instruções\" que os\ncomputadores seguem. Esse conjunto de instruções resolve um problema. Até agora,\naprendemos a obter, representar, manipular e armazenar dados em variáveis. Com\nisso, conseguimos criar programas que resolvem problemas muito simples. Este é o\ncaso, por exemplo, do programa que fizemos para transformar a temperatura de\ngraus Celsius (°C) para Farenheit (°F). No entanto, para criar programas mais\ncomplexos, é necessário expandir nosso conhecimento sobre o controle de fluxo\nde um programa e as estruturas existentes para modificar esse fluxo.
Para usar a terminologia correta de JavaScript, a partir de agora,\nsubstituiremos a palavra \"instruções\" pela palavra \"sentenças\". Uma instrução\nJavaScript é o equivalente a uma sentença em linguagem humana. Entendemos,\nportanto, que um programa em JavaScript é uma lista de \"instruções JavaScript\",\nisto é, um conjunto de sentenças que informa ao computador o que fazer.
\nQuando um programa contém mais de uma frase, elas são executadas de cima para\nbaixo, uma por uma. Por exemplo, o programa a seguir tem três sentenças: a\nprimeira declara uma variável chamada name com o valor do string 'Samanta'; a\nsegunda exibe no terminal uma mensagem de saudação personalizada: \"Olá\nSamanta\"; e a terceira exibe \"Que nome longo você tem!\".
const name = 'Samanta';\nconsole.log('Olá ' + name);\nconsole.log('Que nome lindo você tem!');\n// returns Olá Samanta\n// Que nome lindo você tem!\nUma representação trivial esquemática de um fluxo de controle direto seria:
\nA execução de frases em linha reta não é a única opção que temos. Uma\nalternativa é a execução condicional, em que escolhemos entre duas rotas\ndiferentes com base em um valor Boolean, assim:
A execução condicional é escrita com a palavra-chave if en JavaScript. A\ninstrução if é a mais simples das estruturas de controle dessa linguagem. Ela\né usada para executar código se, e somente se, uma condição for verdadeira. Uma\ncondicional diz: \"Se algo é verdade, faça isso\". Por exemplo, se você fez sua\nlição de casa, recebe um sorvete, mas se você não fez sua lição, não o recebe.
Como o exemplo abaixo mostra, uma sentença if em duas partes principais: a\ncondição e o corpo. A condição deve ser um valor Boolean entre parênteses. O\ncorpo consiste em uma ou mais instruções JavaScript que serão executadas se, e\nsomente se, a condição for verdadeira (Boolean igual a true).
if (condição) {\n // Conjunto de sentenças a executar\n}\nQuando precisamos executar várias instruções, podemos colocá-las entre chaves\n({ e }). As chaves agrupam as sentenças, tornando-as apenas uma. Uma sequência\nde sentenças entre chaves é chamada de bloco (de código). Muitos\nprogramadores JavaScript incluem chaves em todo corpo de if (e nos loops,\ncomo você verá mais adiante). Eles fazem isso em nome da consistência e para não\nter que adicionar ou remover as chaves quando o número de sentenças no corpo\nmudar. Outros, valorizam a brevidade e no caso do if não utilizam as chaves.\nNeste curso, sempre usaremos as chaves para nos ajudar a organizar nosso código.
Vamos voltar ao exemplo anterior e adicionar uma condição antes da frase que\nimprime a segunda mensagem:
\nconst name = 'Samanta';\nconsole.log('Olá ' + name);\nif(name.length > 6) {\n console.log('Que nome grande você tem!');\n}\n// returns Olá Samanta\n// Que nome grande você tem!\nCom esta modificação, antes de imprimir no terminal a segunda mensagem ('Que\nnome longo você tem!'), o programa verifica se o tamanho da string name é\nmaior que 6. Se sim, a segunda mensagem é impressa. Caso contrário, essa\nsentença não é executada. Neste caso, como Samanta tem 7 caracteres, a condição\né true. Portanto, a segunda mensagem é impressa.
Vamos mudar um pouco este exemplo, modificando o valor de name para 'Ana'.
const name = 'Ana';\nconsole.log('Olá ' + name);\nif (name.length > 6) {\n console.log('Que nome grande você tem!');\n}\n// returns Olá Ana\nNesta ocasião, a condição não é true (é false) porque o comprimento do\nnome é 3, que não é maior que 6. Portanto, o corpo do if não se\nexecuta. Desta forma, apenas a primeira mensagem 'Olá Ana' é executada.
if... elseMuitas vezes, você não só terá o código que é executado quando uma condição é\nverdadeira, mas também quando acontece o outro caso. Esse caminho alternativo é\nrepresentado pela segunda seta no diagrama de fluxo. A palavra-chave else pode\nser usada, junto com if, para criar dois caminhos de execução separados e\nalternativos.
Adicionemos uma sentença else ao nosso exemplo:
const name = 'Ana';\nconsole.log('Olá ' + name);\nif (name.length > 6) {\n console.log('Que nome grande você tem!');\n} else {\n console.log('Não nome não é muito grande');\n}\n// returns Olá Ana\n// Não nome não é muito grande\nComo você pode ver, o resultado deste caso é similar ao anterior, mas se name\nnão tiver um comprimento maior que 6, existe uma \"mensagem alternativa\" que\né executada.
Como o exemplo abaixo mostra, as sentenças if ... else são semelhantes à\nsentenças if, mas incluem dois corpos. Se a condição é true, as sentenças do\nprimeiro corpo são executadas; caso contrário, as sentenças do segundo corpo são\nexecutadas.
if (condição) {\n Sentenças para execução se a condição for VERDADEIRA\n} else {\n Sentenças para execução se a condição for FALSA\n}\nSe tivermos mais de dois caminhos para escolher, vários pares if... else podem\nser \"encadeados\". Aqui está um exemplo:
\nconst num = parseInt(prompt('Digite um número', '0'));\n\nif (num < 10){\n alert('Você digitou um número pequeno');\n}\nelse if (num < 100){\n alert('Você digitou um número médio');\n}\nelse {\n alert('Você digitou um número grande');\n}\nO programa primeiro verificará se num é menor que 10. Se for, ele escolhe esse\ncaminho, mostra \"Você digitou um número pequeno\" em uma caixa de alerta e\ntermina. Se não for, toma o caminho do else, que em si mesmo contém um\nsegundo if. Se a segunda condição (< 100) for atendida, significa que o número\nestá entre 10 e 100, e \"Você digitou um número médio\" é exibido em uma caixa de\nalerta. Se não for, o segundo e último else é escolhido, mostrando \"Você\ndigitou um número grande\".
O fluxograma deste programa é algo assim:
\nVamos ver outro exemplo de como usar if...else. Dessa vez com um vídeo da Paloma:
É comum ver o código assim:
\nif (variable == 'valor1') {\n accion1();\n}\nelse if (variable == 'valor2') {\n accion2();\n}\nelse if (variable == 'valor3') {\n accion3();\n}\nelse {\n accionDefault();\n}\nExiste uma estrutura chamada switch que serve para \"decidir\" de maneira mais\ndireta. Infelizmente, a sintaxe que o JavaScript usa para isso (que é herdada da\nlinha da linguagem de programação C/Java) é um pouco estranha. Uma sequência de\nfrases if geralmente parece melhor. Aqui está um exemplo:
switch (prompt('Como está o clima?')) {\n case 'chuvoso':\n console.log('Lembre-se de levar um guarda-chuva.');\n break;\n case 'ensolarado':\n console.log('Vista roupas leves.');\n case 'nublado':\n console.log('Saia para a rua.');\n break;\n default:\n console.log('Tipo de tempo desconhecido.');\n break;\n}\nVocê pode colocar qualquer número de etiquetas case dentro do bloco switch.\nO programa irá pular para o rótulo correspondente ao valor que foi dado ao\nswitch ou ao default se não houver nenhum valor igual. Daí, eles começam a\nexecutar as sentenças, incluindo os abaixo de outro rótulo, até que uma sentença\nbreak seja alcançada (o que em português significa \"pare\").
Em alguns casos, como no caso de \"ensolarado\" no exemplo, é possível\ncompartilhar o código entre os casos (é recomendado ir ao ar livre tanto para\ntempo ensolarado quanto nublado). Mas cuidado: é fácil esquecer o break, o que\nfará com que o programa execute um código que você não deseja executar.
\nA seguir o Daniel te ajudará entender este caso um pouco melhor:
\n\nOutra forma de modificar o fluxo de um programa é por meio de estruturas\nrepetitivas, também chamadas \"loops\" em inglês. Como já estamos vendo, as\ncondicionais permitem executar um conjunto de sentenças uma vez se uma condição\né verdadeira. Os loops permitem executar um código várias vezes,\ndependendo se uma condição continua sendo verdadeira.
\nImagine um programa que imprima todos os números pares do 1 ao 12. Uma maneira\nde escrevê-lo seria assim:
\nconsole.log(0);\nconsole.log(2);\nconsole.log(4);\nconsole.log(6);\nconsole.log(8);\nconsole.log(10);\nconsole.log(12);\n// → 0\n// → 2\n// … etcetera\nIsso funciona, mas a ideia de escrever um programa é trabalhar menos, e não\nmais. Se necessitamos todos os números menores que 1,000, o modo anterior seria\nimpossível de trabalhar. O que necessitamos é uma forma de repetir partes de\ncódigo. Esta forma de controle de fluxo é chamada loop. O controle de fluxo\npor loops nos permite voltar a certo ponto no programa em que estivemos antes e\nrepetí-lo com nosso estado atual, como descreve o seguinte diagrama:
\nwhileO loop mais simples é o loop while (que significa \"enquanto\" em português). Um\nloop while executa repetidamente uma série de sentenças até que uma condição\nparticular deixe de ser verdadeira. Ao escrever um loop while, você está\ndizendo: \"Continue fazendo isto enquanto esta condição seja verdadeira. Pare\nquando a condição se tornar falsa.\"
Como revela o exemplo a seguir, uma sentença que começa com a keyword while\ncria um loop. Depois de while vem uma expressão em parênteses que representa a\ncondição e depois um conjunto de sentenças (muito parecido ao caso do if).\nPorém, diferentemente do if, o loop executa a sentença enquanto a condição\nproduza um valor que seja true. Por isso é muito importante que o conjunto de\nsentenças inclua algo que \"muda\" para que a condição eventualmente seja falsa.\nDo contrário, criaria um ciclo infinito que nunca termina, e isto usualmente é\nruim.
while (condição) {\n // Conjunto de sentenças, onde\n // se inclui algo que \"muda\" para\n // que a condição eventualmente seja FALSA\n}\nVamos voltar agora ao problema de imprimir todos os números pares do 1 ao 12, e\ncriar um programa que utilize um loop while:
let number = 0;\nwhile (number <= 12) {\n console.log(number);\n number = number + 2;\n}\n// → 0\n// → 2\n// … etcetera até 12\nNeste caso, como queremos imprimir os números pares do 1 ao 12, criamos uma\nvariável number, inicializamos com o valor 0, e a utilizamos na condição.\nQueremos que o bloco dentro do while funcione enquanto o valor de number\nseja igual ou menor a 12. O corpo do while inclui duas sentenças: a primeira\nimprime o número (com console.log), e a segunda incrementa number em 2 (porque\nqueremos imprimir os pares unicamente). A variável number demonstra a forma em\nque uma variável pode dar seguimento ao progresso de um programa. Cada vez que o\nloop se repete, number se incrementa em 2. Então, no início de cada repetição,\no valor da variável number é comparado com o número 12 para decidir se o\nprograma fez todo o trabalho que deveria fazer. É importante que entendamos que\nse não modificamos o valor de number com a segunda sentença, a condição\n(number <=12) sempre será true e teremos um ciclo infinito que nunca se\ndeterá. Isto pode causar que o seu computador tenha problemas e trave.
Se você cria um loop infinito em um dos exemplos, usualmente será perguntado se\nvocê quer deter o script depois de alguns segundos. Se isso falha, você terá que\nfechar a aba na qual está trabalhando, ou, em outros navegadores, fechar o\nnavegador inteiro para se recuperar.
\nVejamos algumas variantes deste mesmo problema para assegurar que entendemos bem\ncomo funciona o ciclo while:
number seja <= 100.let number = 0;\nwhile (number <= 100) {\n console.log(number);\n number = number + 2;\n}\n// → 0\n// → 2\n// … etcetera até 100\nnumber com o valor de 1 (ao invés de 0).let number = 1;\nwhile (number <= 12) {\n console.log(number);\n number = number + 2;\n}\n// → 1\n// → 3\n// … etcetera até 11\nnumber em 1 (no lugar de\n 2) a cada ciclo.let number = 0;\nwhile (number <= 12) {\n console.log(number);\n number = number + 1;\n}\n// → 0\n// → 1\n// → 2\n// … etcetera até 12\ndoO loop do é uma estrutura de controle similar ao loop while. A diferença\nestá em um só ponto: um loop do sempre executa seu corpo pelo menos uma\nvez e começa a verificar se deveria parar somente depois da primeira execução.\nPara refletir isto, a condição aparece depois do corpo do loop. Vejamos um\nexemplo:
let yourName;\ndo {\n yourName = prompt('Qual é seu nome?');\n} while (!yourName);\n\nconsole.log('seu nome é ' + yourName);\nEste programa te obrigará a introduzir um nome. Perguntará uma e outra vez até\nque obtenha algo que não seja uma cadeia vazia. Aplicar o operador ! converte\num valor a Boolean negando-o e todas as cadeias exceto '' se convertem a\ntrue. Isto significa que ele continua rodando até que você dê um nome que não\nseja uma cadeia vazia.
forMuitos loops seguem um padrão dos exemplos prévios do while. Primeiro, uma\nvariável “contador” é criada para dar seguimento ao progresso do loop. Logo\ndepois vem o loop while, cuja expressão condicional normalmente verifica se o\ncontador alcançou certo limite. Ao final do corpo do loop, o contador é\natualizado para dar seguimento ao progresso.
Devido ao fato de que este padrão é muito comum, JavaScript e outras linguagens\nsimilares proporcionam uma versão um pouco mais curta e mais completa: o loop\nfor.
for (let number = 0; number <= 12; number = number + 2){\n console.log(number);\n}\n// → 0\n// → 2\n// … etc.\nEste programa é exatamente equivalente ao exemplo prévio de impressão de números\npares. A única mudança é que todas as sentenças que estão relacionadas com o\n\"estado\" do ciclo estão agrupadas.
\nOs parênteses depois do keyword for devem conter ponto e vírgula (;). A\nparte que está antes do primeiro ponto e vírgula inicia o loop, normalmente ao\ndefinir uma variável. A segunda parte é a expressão que verifica se o loop tem\nque continuar. A parte final atualiza o estado do loop antes de cada iteração.\nNa maioria dos casos, isto é mais curto e claro que uma construção com while.
A seguir mostramos um código que calcula 2^10 (2 exponencial 10), usando o loop\nfor:
let result = 1;\nfor (let counter = 0; counter < 10; counter = counter + 1){\n result = result * 2\n}\nconsole.log(result);\n// → 1024\nA representação geral do loop for é a seguinte:
for (initial setup; condition; increment){\n Bloco de código a executar\n}\nO initial setup (por exemplo: let counter = 0) se executa antes de que se\ninicie o loop. Geralmente se usa para criar uma variável que rastreia o número\nde vezes que foi executado o loop. A condition (counter < 10) se comprova\nantes de cada execução do corpo do loop. Se a condição é verdadeira, o corpo é\nexecutado; se é falsa, o loop se detém. Neste caso, o loop se deterá uma vez que\ncounter já não seja inferior a 10. O increment (counter = counter + 1) se\nexecuta depois de cada execução do corpo do loop. Geralmente se utiliza para\natualizar a variável do loop. No nosso exemplo, utilizamos para agregar 1 a\ncounter cada vez que se executa o loop.
A seguir Paloma te ajudará a entender o fluxo do loop for:
\n\nFazer com que a condição do loop produza false não é a única forma para que um\nloop termine. Podemos usar a sentença especial break, utilizada en switch,\nque tem o efeito de sair inmediatamente do loop que o esta fechando.
O programa a seguir ilustra o uso da sentença break para sair de um loop.\nQueremos fazer um programa que encontre o primeiro número que é maior ou igual a\n20 e divisível por 7.
for (let current = 20; current++) {\n if (current % 7 == 0)\n break;\n}\nconsole.log(current);\n// → 21\nUsar o operador de resto ou módulo (%) é uma forma fácil de provar se o número é\ndivisível por outro. Se for, o resto da divisão é zero. Também lembre-se que\ncurrent++ é o mesmo que current = current + 1.
O for neste exemplo não tem a parte que verifica se o loop deve terminar. Isto\nsignifica que o loop nunca terminará até que a sentença break que está dentro\nseja executada.
Como já estamos aprendendo, se você deixasse fora essa sentença break ou\nacidentalmente escrevesse uma condição que sempre produza true, o seu programa\nse ficaria travado em um loop infinito.
A palavra chave continue é parecida ao break pois influencia o progresso do\nloop. Quando se encontra continue no corpo de um loop, o controle sai do corpo\ndo loop imediatamente e continua na próxima iteração do loop.
A seguir Rafael te explicará, com um exemplo, as aplicações de break and\ncontinue dentro de um for:
for e whilePontualmente, se usa o for quando se save quantas repetições vão ser\nrealizadas e o while quando não se sabe.
Se dissermos, \"gire o ventilador 10 vezes\", você já sabe que vamos girar o\nventilador 10 vezes, então seria uma boa ideal usar o for.
Se dissermos, \"enquanto estiver calor gire o ventilador\". Não sabemos quantas\nvezes vamos girar o ventilador até ficar frio, então usar o while nesse caso é\nmelhor.
estructuras condicionales y estructuras repetitivas para la resolución de\nproblemasAl igual que hemos hecho antes, es hora de aplicar los conceptos aprendidos para\nresolver problemas.
\nA continuación tendrás varios problemas que debemos resolver. Intenta\nresolverlos primero por tu cuenta. Más abajo encontrarás las soluciones de\nMichelle. Después de haberlo intentado, compara tus soluciones con las de\nMichelle.
\nEscribe un programa que use console.log para imprimir todos los números del 1\nal 100, con dos excepciones:
Cuando tengas eso funcionando, modifica tu programa para imprimir \"FizzBuzz\"\npara los números que sean divisibles tanto por 3 como por 5 (y que siga\nimprimiendo \"Fizz\" o \"Buzz\" para números divisibles por sólo uno de ellos).
\nCrea un programa que cree un string que represente una cuadrícula de 8x8,\nusando el salto de línea como separador. En cada posición de la cuadrícula debe\nhaber un espacio o un carácter \"#\". Los caracteres deberían formar un tablero de\najedrez.
Pasar ese string a console.log debería mostrar algo como esto:
# # # #\n# # # #\n # # # #\n# # # #\n # # # #\n# # # #\n # # # #\n# # # #\nCuando tengas un programa que genere este patrón, define una variable size = 8\ny cambia el programa de tal manera que trabaje para cualquier tamaño, que sea\nproporcionado por un prompt() produciendo una cuadrícula del ancho y alto\ndado.
A continuación, Michelle te explica cómo resolvió cada uno de los ejercicios\nanteriores.
\n![\"FizzBuzz](\"https://img.youtube.com/vi/jmKiCMKM33A/0.jpg\")
![\"Tablero\"](\"https://img.youtube.com/vi/ckaXH2IhUrw/0.jpg\")
estructuras condicionales y estructuras repetitivas para la resolución de\nproblemasAl igual que hemos hecho antes, es hora de aplicar los conceptos aprendidos para\nresolver problemas.
\nA continuación tendrás varios problemas que debemos resolver. Intenta\nresolverlos primero por tu cuenta. Más abajo encontrarás las soluciones de\nMichelle. Después de haberlo intentado, compara tus soluciones con las de\nMichelle.
\nEscribe un programa que use console.log para imprimir todos los números del 1\nal 100, con dos excepciones:
Cuando tengas eso funcionando, modifica tu programa para imprimir \"FizzBuzz\"\npara los números que sean divisibles tanto por 3 como por 5 (y que siga\nimprimiendo \"Fizz\" o \"Buzz\" para números divisibles por sólo uno de ellos).
\nCrea un programa que cree un string que represente una cuadrícula de 8x8,\nusando el salto de línea como separador. En cada posición de la cuadrícula debe\nhaber un espacio o un carácter \"#\". Los caracteres deberían formar un tablero de\najedrez.
Pasar ese string a console.log debería mostrar algo como esto:
# # # #\n# # # #\n # # # #\n# # # #\n # # # #\n# # # #\n # # # #\n# # # #\nCuando tengas un programa que genere este patrón, define una variable size = 8\ny cambia el programa de tal manera que trabaje para cualquier tamaño, que sea\nproporcionado por un prompt() produciendo una cuadrícula del ancho y alto\ndado.
A continuación, Michelle te explica cómo resolvió cada uno de los ejercicios\nanteriores.
\nestruturas condicionais e estruturas repetitivas para a resolução de problemasComo fizemos antes, é hora de aplicar os conceitos aprendidos para resolver\nproblemas.
\nEscreva um programa que use console.log para imprimir todos os números de 1 a\n100, com duas exceções:
Quando isto esteja funcionando, modifique o seu programa para imprimir\n\"FizzBuzz\" para os números que sejam divisíveis tanto por 3 como por 5 (e que\ncontinue imprimindo \"Fizz\" ou \"Buzz\" para números divisíveis por somente um\ndeles).
\nElabore um programa que crie um string que represente um quadrado de 8x8,\npulando uma linha como separador. Em cada posição do quadrado deve haver um\nespaço ou um caracter \"#\". Os caracteres devem formar um tabuleiro de xadrez.
Passar este string a console.log deve mostrar algo assim:
# # # #\n# # # #\n # # # #\n# # # #\n # # # #\n# # # #\n # # # #\n# # # #\nQuando você tiver um programa que gere este padrão, defina uma variável size =\n8 e mude o programa de tal forma que trabalhe para qualquer tamanho, que seja\nproporcionado por um prompt() produzindo um quadrado com as medidas indicadas.
A seguir, o Rafael irá te explicar como ele resolveu cada um dos exercícios\nanteriores.
\n![\"FizzBuzz\"](\"https://img.youtube.com/vi/AwweNciBXZo/0.jpg\")
![\"Tabuleiro\"](\"https://img.youtube.com/vi/Ji_fnG3IYbE/0.jpg\")
estruturas condicionais e estruturas repetitivas para a resolução de problemasComo fizemos antes, é hora de aplicar os conceitos aprendidos para resolver\nproblemas.
\nEscreva um programa que use console.log para imprimir todos os números de 1 a\n100, com duas exceções:
Quando isto esteja funcionando, modifique o seu programa para imprimir\n\"FizzBuzz\" para os números que sejam divisíveis tanto por 3 como por 5 (e que\ncontinue imprimindo \"Fizz\" ou \"Buzz\" para números divisíveis por somente um\ndeles).
\nElabore um programa que crie um string que represente um quadrado de 8x8,\npulando uma linha como separador. Em cada posição do quadrado deve haver um\nespaço ou um caracter \"#\". Os caracteres devem formar um tabuleiro de xadrez.
Passar este string a console.log deve mostrar algo assim:
# # # #\n# # # #\n # # # #\n# # # #\n # # # #\n# # # #\n # # # #\n# # # #\nQuando você tiver um programa que gere este padrão, defina uma variável size =\n8 e mude o programa de tal forma que trabalhe para qualquer tamanho, que seja\nproporcionado por um prompt() produzindo um quadrado com as medidas indicadas.
A seguir, o Rafael irá te explicar como ele resolveu cada um dos exercícios\nanteriores.
\nreturn de las funcionesEl texto a continuación se basa en gran medida, con ciertos ajustes, en los\ncapítulos 2 y 3 de Eloquent JavaScript,de Marijn\nHaverbeke, 2014. Traducción en Español\ndisponible gracias a hectorip, y del capítulo 8 de\nJavaScript for kids,\nNick Morgan, 2015;
\nEn la programación existe un concepto que escucharás más de una vez. Dice así:\n\"Don't Repeat Yourself\", y es comunmente conocido como DRY. En español\nsignifica \"no te repitas\". Si estás copiando y pegando pedazos de código, o si\ntienes sentencias de código similares a lo largo de tu programa, significa que\nte estás repitiendo. Ya hemos visto este concepto en práctica con el uso de\nestructuras repetitivas (bucles): en lugar de tener un mismo bloque de código\nrepetido, puedes sustituirlo por un for o un while. Con las funciones puedes\nalcanzar el mismo objetivo. Veamos qué son las funciones, cómo usarlas y por\nqué son importantes.
Una función es una forma de agrupar código para que pueda ser reutilizado. Las\nfunciones nos permiten ejecutar la misma pieza de código en varios lugares de un\nprograma sin tener que copiar y pegar el código repetidamente. Dicho de otra\nmanera, una función es un pedazo de programa envuelto en un valor. Ese valor\npuede ser \"llamado\" varias veces, en diferentes lugares de tu programa, para que\nejecute el código que tiene dentro.
\nA lo largo de este curso hemos venido utilizando funciones, solo que las venimos\nllamando \"comandos\". Los comandos como alert(), prompt() y console.log()\nson realmente funciones.
Las funciones son el pan de cada día en la programación con JavaScript.
\nLa aplicación más obvia de las funciones es la de definir un nuevo vocabulario.\nCrear nuevas palabras en un lenguaje humano común (como el español o el inglés)\nes típicamente algo de mal gusto. Sin embargo, en la programación es\nindispensable.
\nUn adulto promedio tiene unas 20,000 palabras en su vocabulario. Pocos lenguajes\nde programación tienen 20,000 comandos incorporados. Y el vocabulario que sí\nestá disponible tiende a ser definido de forma más precisa, y por ende menos\nflexible, que en un lenguaje humano. En consecuencia, usualmente tenemos que\nañadir algo de nuestro propio vocabulario para evitar repetirnos demasiado.
\nAgrupando fragmentos de código en una función con un nombre fácil de\nentender (dado que será parte del vocabulario que estás construyendo) podemos\nestructurar mejor nuestro código. Esto porque nos enfocamos en organizar las\nfunciones, en lugar de cada línea de código que las componen. Al dividir nuestro\ncódigo en piezas más pequeñas - y por ende - más manejables, podemos tener una\nmirada más completa de lo que estamos haciendo. Nos permite elevarnos a un nivel\nsuperior de abstracción. Como dicen el refrán: podemos visualizar el bosque\ncompleto, viendo más allá de los árboles.
\nLa definición de una función es simplemente una definición regular de una\nvariable, pero donde el valor dado a la variable es una función. Por ejemplo, el\nsiguiente código define la variable square para referirse a la función que\nproduce el cuadrado de un número dado:
const square = function (num) {\n return num * num;\n};\nLa misma función usando la síntaxis de función flecha (arrow function):
\nconst square = num => num * num;\nUna función es creada por una expresión que empieza con el keyword function,\no alternativamente usando la síntaxis de función flecha. Las funciones tienen\nun conjunto de parámetros (en el ejemplo anterior solo tenemos un\nparámetro: num) y un cuerpo, que contiene las sentencias a ser ejecutadas.\nLos parámetros sirven para \"pasarle\" valores a la función y por ende, cambiar su\ncomportamiento según los valores brindados. Cuando declaramos una función usando\nel keyword function el cuerpo de la función tiene que estar siempre\nencerrado en llaves, incluso cuando consista de una sola instrucción (como en el\nejemplo previo), mientras que en las funciones flecha podemos hacer retorno\nimplícito cuando el cuerpo consta de solo una expresión (que será\nimplícitamente el valor de retorno).
Para correr el código dentro de una función, necesitamos \"invocar, llamar, o\naplicar\" la función. Esto se hace escribiendo el nombre de la función\ninmediatamente seguido por unos paréntesis (). Dentro de los paréntesis se\nincluye lo que le quieres \"pasar\" a la función para usar como parámetro. Los\nvalores que se pasan a la función para usar como parámetros son llamados\nargumentos.
Agregando al ejemplo anterior un llamado a la función square pasando como\nargumento el valor 12 vemos que nos devuelve 144 (es decir, 12 al cuadrado).
const square = function (num) {\n return num * num;\n};\n\nsquare(12);\n// → 144\nAsí como los argumentos son los valores de \"entrada\" (input) que utiliza una\nfunción al ser llamada, el valor de retorno es el valor de salida (output) que\ndevuelve la función (el 144 del ejemplo anterior), y que puede ser utilizado\nen cualquier lugar del programa. Si una función no especifica el valor de\nretorno, entonces, la función retorna undefined.
El valor de retorno se especifica con el keyword return. En el ejemplo\nanterior, se especifica que el valor de retorno es el parámetro multiplicado por\nsí mismo; es decir, el parámetro al cuadrado. El keyword return sin una\nexpresión después de él, también hará que la función devuelva undefined.
Agreguemos una sentencia adicional al ejemplo anterior en la que se utilice el\nvalor de retorno de la función square:
const square = function (num) {\n return num * num;\n};\n\nconsole.log('El cuadrado de 12 es ' + square(12));\n// → El cuadrado de 12 es 144\nCon esta modificación sucede lo siguiente: el valor de retorno que se obtiene al\nllamar (o invocar) la función square con el valor 12 de argumento es: 144.\nÉste se concatena con el texto 'El cuadrado de 12 es ' para formar\n'El cuadrado de 12 es 144'; lo cual, a su vez, se pasa como argumento a la\nfunción console.log para que lo imprima en la consola.
Una función puede tener varios parámetros o puede no tener ninguno. En el\nsiguiente ejemplo makeNoise no tiene parámetros, mientras que power tiene\ndos:
const makeNoise = function () {\n console.log('Pling!');\n};\n\nmakeNoise();\n// → Pling!\n\nconst power = function (base, exponent) {\n let result = 1;\n for (let count = 0; count < exponent; count++) {\n result *= base;\n }\n return result;\n};\n\nconsole.log(power(2, 10));\n// → 1024\nA continuación Michelle te explica funciones con un ejemplo del libro JavaScript\nfor Kids.
\n![\"ejercicio](\"https://img.youtube.com/vi/Y0NgsjdumS8/0.jpg\")
returnCuando el intérprete JavaScript se topa con un return dentro de una función,\ninmediatamente salta fuera de la función actual y pasa el valor retornado al\ncódigo que la llamó. Es decir, cualquier sentencia que coloquemos después\ndel return en una función, no será ejecutada.
Una forma común de utilizar return es para salir de la función de manera\ntemprana si alguno de los argumentos brindados no son válidos; es decir, si no\nson el tipo de argumentos que la función necesita para funcionar correctamente.\nPor ejemplo, la siguiente función devuelve una cadena que indica el quinto\ncaracter de tu nombre. Si el nombre pasado a la función tiene menos de cinco\ncaracteres, la función utiliza return para dejar la función inmediatamente.\nEsto significa que la declaración de devolución al final, que te dice la quinta\nletra de tu nombre, nunca se ejecuta.
const fifthLetter = function (name) {\n if (name.length < 5) {\n return;\n }\n return 'La quinta letra de tu nombre es ' + name[4] + '.';\n};\nLas funciones también afectan el control de flujo de nuestro programa. Con\nfunciones podemos crear estructuras repetitivas (con algo que se llama\nrecursividad) y estructuras condicionales (con, por ejemplo, múltiples valores\nde return). De hecho, las funciones son tan versátiles para armar la\nestructura de un programa que existe todo un paradigma de programación basado\nen funciones. Es decir, existe toda una manera de pensar en la programación\nbasada en funciones. Esto se llama el paradigma de programación funcional.\nMás adelante estudiaremos a mayor profundidad funciones y el paradigma de\nprogramación funcional. Por ahora, lo importante es entender que las funciones\nson una forma de agrupar código para que pueda ser reutilizado.
Veamos un ejemplo de crear una estructura condicional con funciones:
\nreturn en lugar de if... elsePodemos usar varios return dentro de diferentes sentencias if en el cuerpo\nde una función para que la función devuelva un valor diferente, dependiendo del\nargumento brindado. Por ejemplo, digamos que estás escribiendo un juego que\notorga medallas a los jugadores basándose en su puntuación. Una puntuación menor\na 3 es una medalla de bronce, una puntuación de 7 o más es oro, y lo que está en\nel medio es plata. Podrías utilizar una función como medalForScore para\nevaluar una puntuación y devolver el tipo de medalla, como se muestra aquí:
const medalForScore = function (score) {\n if (score < 3) {\n return 'Bronze';\n }\n if (score < 7) {\n return 'Silver';\n }\n return 'Gold';\n};\nAunque estamos comprobando múltiples condiciones, no necesitamos usar sentencias\nif ... else encadenadas. Utilizamos las sentencias if ... else para\ngarantizar que sólo una de las sentencias se ejecute. Sin embargo, cuando cada\nuna de las opciones tiene su propia sentencia de return, garantizamos que se\nejecute sólo una de las opciones --- porque, recuerda, las funciones sólo\npueden devolver una vez.
return de las funcionesEl texto a continuación se basa en gran medida, con ciertos ajustes, en los\ncapítulos 2 y 3 de Eloquent JavaScript,de Marijn\nHaverbeke, 2014. Traducción en Español\ndisponible gracias a hectorip, y del capítulo 8 de\nJavaScript for kids,\nNick Morgan, 2015;
\nEn la programación existe un concepto que escucharás más de una vez. Dice así:\n\"Don't Repeat Yourself\", y es comunmente conocido como DRY. En español\nsignifica \"no te repitas\". Si estás copiando y pegando pedazos de código, o si\ntienes sentencias de código similares a lo largo de tu programa, significa que\nte estás repitiendo. Ya hemos visto este concepto en práctica con el uso de\nestructuras repetitivas (bucles): en lugar de tener un mismo bloque de código\nrepetido, puedes sustituirlo por un for o un while. Con las funciones puedes\nalcanzar el mismo objetivo. Veamos qué son las funciones, cómo usarlas y por\nqué son importantes.
Una función es una forma de agrupar código para que pueda ser reutilizado. Las\nfunciones nos permiten ejecutar la misma pieza de código en varios lugares de un\nprograma sin tener que copiar y pegar el código repetidamente. Dicho de otra\nmanera, una función es un pedazo de programa envuelto en un valor. Ese valor\npuede ser \"llamado\" varias veces, en diferentes lugares de tu programa, para que\nejecute el código que tiene dentro.
\nA lo largo de este curso hemos venido utilizando funciones, solo que las venimos\nllamando \"comandos\". Los comandos como alert(), prompt() y console.log()\nson realmente funciones.
Las funciones son el pan de cada día en la programación con JavaScript.
\nLa aplicación más obvia de las funciones es la de definir un nuevo vocabulario.\nCrear nuevas palabras en un lenguaje humano común (como el español o el inglés)\nes típicamente algo de mal gusto. Sin embargo, en la programación es\nindispensable.
\nUn adulto promedio tiene unas 20,000 palabras en su vocabulario. Pocos lenguajes\nde programación tienen 20,000 comandos incorporados. Y el vocabulario que sí\nestá disponible tiende a ser definido de forma más precisa, y por ende menos\nflexible, que en un lenguaje humano. En consecuencia, usualmente tenemos que\nañadir algo de nuestro propio vocabulario para evitar repetirnos demasiado.
\nAgrupando fragmentos de código en una función con un nombre fácil de\nentender (dado que será parte del vocabulario que estás construyendo) podemos\nestructurar mejor nuestro código. Esto porque nos enfocamos en organizar las\nfunciones, en lugar de cada línea de código que las componen. Al dividir nuestro\ncódigo en piezas más pequeñas - y por ende - más manejables, podemos tener una\nmirada más completa de lo que estamos haciendo. Nos permite elevarnos a un nivel\nsuperior de abstracción. Como dicen el refrán: podemos visualizar el bosque\ncompleto, viendo más allá de los árboles.
\nLa definición de una función es simplemente una definición regular de una\nvariable, pero donde el valor dado a la variable es una función. Por ejemplo, el\nsiguiente código define la variable square para referirse a la función que\nproduce el cuadrado de un número dado:
const square = function (num) {\n return num * num;\n};\nLa misma función usando la síntaxis de función flecha (arrow function):
\nconst square = num => num * num;\nUna función es creada por una expresión que empieza con el keyword function,\no alternativamente usando la síntaxis de función flecha. Las funciones tienen\nun conjunto de parámetros (en el ejemplo anterior solo tenemos un\nparámetro: num) y un cuerpo, que contiene las sentencias a ser ejecutadas.\nLos parámetros sirven para \"pasarle\" valores a la función y por ende, cambiar su\ncomportamiento según los valores brindados. Cuando declaramos una función usando\nel keyword function el cuerpo de la función tiene que estar siempre\nencerrado en llaves, incluso cuando consista de una sola instrucción (como en el\nejemplo previo), mientras que en las funciones flecha podemos hacer retorno\nimplícito cuando el cuerpo consta de solo una expresión (que será\nimplícitamente el valor de retorno).
Para correr el código dentro de una función, necesitamos \"invocar, llamar, o\naplicar\" la función. Esto se hace escribiendo el nombre de la función\ninmediatamente seguido por unos paréntesis (). Dentro de los paréntesis se\nincluye lo que le quieres \"pasar\" a la función para usar como parámetro. Los\nvalores que se pasan a la función para usar como parámetros son llamados\nargumentos.
Agregando al ejemplo anterior un llamado a la función square pasando como\nargumento el valor 12 vemos que nos devuelve 144 (es decir, 12 al cuadrado).
const square = function (num) {\n return num * num;\n};\n\nsquare(12);\n// → 144\nAsí como los argumentos son los valores de \"entrada\" (input) que utiliza una\nfunción al ser llamada, el valor de retorno es el valor de salida (output) que\ndevuelve la función (el 144 del ejemplo anterior), y que puede ser utilizado\nen cualquier lugar del programa. Si una función no especifica el valor de\nretorno, entonces, la función retorna undefined.
El valor de retorno se especifica con el keyword return. En el ejemplo\nanterior, se especifica que el valor de retorno es el parámetro multiplicado por\nsí mismo; es decir, el parámetro al cuadrado. El keyword return sin una\nexpresión después de él, también hará que la función devuelva undefined.
Agreguemos una sentencia adicional al ejemplo anterior en la que se utilice el\nvalor de retorno de la función square:
const square = function (num) {\n return num * num;\n};\n\nconsole.log('El cuadrado de 12 es ' + square(12));\n// → El cuadrado de 12 es 144\nCon esta modificación sucede lo siguiente: el valor de retorno que se obtiene al\nllamar (o invocar) la función square con el valor 12 de argumento es: 144.\nÉste se concatena con el texto 'El cuadrado de 12 es ' para formar\n'El cuadrado de 12 es 144'; lo cual, a su vez, se pasa como argumento a la\nfunción console.log para que lo imprima en la consola.
Una función puede tener varios parámetros o puede no tener ninguno. En el\nsiguiente ejemplo makeNoise no tiene parámetros, mientras que power tiene\ndos:
const makeNoise = function () {\n console.log('Pling!');\n};\n\nmakeNoise();\n// → Pling!\n\nconst power = function (base, exponent) {\n let result = 1;\n for (let count = 0; count < exponent; count++) {\n result *= base;\n }\n return result;\n};\n\nconsole.log(power(2, 10));\n// → 1024\nA continuación Michelle te explica funciones con un ejemplo del libro JavaScript\nfor Kids.
\n\nreturnCuando el intérprete JavaScript se topa con un return dentro de una función,\ninmediatamente salta fuera de la función actual y pasa el valor retornado al\ncódigo que la llamó. Es decir, cualquier sentencia que coloquemos después\ndel return en una función, no será ejecutada.
Una forma común de utilizar return es para salir de la función de manera\ntemprana si alguno de los argumentos brindados no son válidos; es decir, si no\nson el tipo de argumentos que la función necesita para funcionar correctamente.\nPor ejemplo, la siguiente función devuelve una cadena que indica el quinto\ncaracter de tu nombre. Si el nombre pasado a la función tiene menos de cinco\ncaracteres, la función utiliza return para dejar la función inmediatamente.\nEsto significa que la declaración de devolución al final, que te dice la quinta\nletra de tu nombre, nunca se ejecuta.
const fifthLetter = function (name) {\n if (name.length < 5) {\n return;\n }\n return 'La quinta letra de tu nombre es ' + name[4] + '.';\n};\nLas funciones también afectan el control de flujo de nuestro programa. Con\nfunciones podemos crear estructuras repetitivas (con algo que se llama\nrecursividad) y estructuras condicionales (con, por ejemplo, múltiples valores\nde return). De hecho, las funciones son tan versátiles para armar la\nestructura de un programa que existe todo un paradigma de programación basado\nen funciones. Es decir, existe toda una manera de pensar en la programación\nbasada en funciones. Esto se llama el paradigma de programación funcional.\nMás adelante estudiaremos a mayor profundidad funciones y el paradigma de\nprogramación funcional. Por ahora, lo importante es entender que las funciones\nson una forma de agrupar código para que pueda ser reutilizado.
Veamos un ejemplo de crear una estructura condicional con funciones:
\nreturn en lugar de if... elsePodemos usar varios return dentro de diferentes sentencias if en el cuerpo\nde una función para que la función devuelva un valor diferente, dependiendo del\nargumento brindado. Por ejemplo, digamos que estás escribiendo un juego que\notorga medallas a los jugadores basándose en su puntuación. Una puntuación menor\na 3 es una medalla de bronce, una puntuación de 7 o más es oro, y lo que está en\nel medio es plata. Podrías utilizar una función como medalForScore para\nevaluar una puntuación y devolver el tipo de medalla, como se muestra aquí:
const medalForScore = function (score) {\n if (score < 3) {\n return 'Bronze';\n }\n if (score < 7) {\n return 'Silver';\n }\n return 'Gold';\n};\nAunque estamos comprobando múltiples condiciones, no necesitamos usar sentencias\nif ... else encadenadas. Utilizamos las sentencias if ... else para\ngarantizar que sólo una de las sentencias se ejecute. Sin embargo, cuando cada\nuna de las opciones tiene su propia sentencia de return, garantizamos que se\nejecute sólo una de las opciones --- porque, recuerda, las funciones sólo\npueden devolver una vez.
return das funçõesO texto a seguir se baseia em grande medida, com alguns ajustes, ao capítulo 2 e\n3do Eloquent JavaScript,de Marijn Haverbeke,\n2014. Tradução em\nPortuguês.
\nNa programação, existe um conceito que você escutará mais de uma vez. Ele diz o\nseguinte: \"Don't Repeat Yourself\", e é comumente conhecido como DRY. Em\nportuguês significa \"não se repita\". Se você estiver copiando e colando\npedaços de código, ou se tiver sentenças de código similares ao longo do seu\nprograma, significa que você está se repetindo. Já vimos este conceito em\nprática com o uso de estruturas repetitivas (loop): ao invés de ter um mesmo\nbloco de código repetido, você pode sustituí-lo por um for ou um while. Com\nas funções você pode alcançar o mesmo objetivo. Vejamos quais são as funções,\ncomo usá-las e por que são importantes.
Uma função é uma forma de agrupar código para que ele possa ser reutilizado. As\nfunções nos permitem executar a mesma peça de código em vários lugares de um\nprograma sem ter que copiar e colar o código repetidamente. Dito de outra\nmaneira, uma função é um pedaço de programa embrulhado em um valor. Esse\nvalor pode ser \"chamado\" várias vezes, em diferentes lugares do teu programa,\npara que execute o código que está ali dentro.
\nAo longo deste curso temos utilizado funções, porém temos chamado de\n\"comandos\". Os comandos como alert(), prompt() e console.log() são de\nfato funções.
As funções são o pão de cada dia na programação com JavaScript.
\nA aplicação mais óbvia das funções é a de definir um novo vocabulário. Criar\nnovas palavras em uma linguagem humana comum (como o português, inglês ou o\nespanhol) é tipicamente algo de mal gosto. Contudo, na programação isto é\nindispensável.
\nUm adulto médio possui umas 20.000 palavras em seu vocabulário. Poucas\nlinguagens de programação possuem 20.000 comandos incorporados. E o vocabulário\nque está disponível na programação tende a ser definido de forma mais precisa, e\nportanto menos flexível que em uma linguagem humana. Como consequência,\nusualmente precisamos agregar algo do nosso próprio vocabulário para evitar\nmuitas repetições.
\nAgrupando fragmentos de código em uma função com um nome fácil de entender\n(dado que será parte do vocabulário que você está construindo) podemos\nestruturar melhor nosso código. Isto porque nos enfocamos em organizar as\nfunções, ao invés de cada linha de código que as compõem. Ao dividir nosso\ncódigo em peças menores e portanto mais fáceis de lidar, podemos ter uma visão\nmais completa do que estamos fazendo. Nos permite elevar-nos a um nível superior\nde abstração. Como diz o ditado: podemos visualizar a floresta completa, vendo\nalém das árvores.
\nA definição de uma função é simplesmente uma definição regular de uma variável,\nmas onde o valor dado à variável é uma função. Por exemplo, o código a seguir\ndefine a variável square para se referir à função que produz o quadrado de\num número dado:
const square = function (num) {\n return num * num;\n};\nA mesma função usando a sintaxe de função flecha (arrow function):
\nconst square = num => num * num;\nUma função é criada por uma expressão que começa com o keyword function, ou\npode ser usando a sintaxe de arrow function. As funções possuem um conjunto de\nparâmetros (no exemplo anterior só temos um parâmetro: num) e um\ncorpo, que contêm as sentenças a serem executadas. Os parâmetros servem para\n\"transmitir\" valores à função e, assim, mudar seu comportamento segundo os\nvalores oferecidos. O corpo da função, usando a keyword function, precisa\nestar sempre fechado em chaves, inclusive quando houver uma única instrução\n(como no exemplo anterior), enquanto funções usando arrow function podemos\nfazer o retorno implícito quando o corpo possui apenas uma expressão. (que será\nimplícitamente o valor do retorno).
Para rodar o código dentro de uma função, necessitamos \"invocar, chamar, ou\naplicar\" a função. Isto se faz escrevendo o nome da função imediatamente\nseguido por parênteses (). Dentro dos parênteses se inclui o que você quer\n\"transmitir\" à função para usar como parâmetro. Os valores que se transmitem à\nfunção para usar como parâmetros são chamados argumentos.
Agregando ao exemplo anterior um chamado à função square transmitindo-lhe como\nargumento o valor 12 vemos que nos devolve 144 (ou seja, 12 ao quadrado).
const square = function (num) {\n return num * num;\n};\n\nsquare(12);\n// → 144\nAssim como os argumentos são os valores de \"entrada\" (input) que utiliza uma\nfunção ao ser chamada, o valor de retorno é o valor de saída (output) que\ndevolve a função (o 144 do exemplo anterior), e que pode ser utilizado em\nqualquer lugar do programa. Se uma função não especifica o valor de retorno,\nentão a função retorna undefined.
O valor de retorno se especifica com o keyword return. No exemplo anterior,\nse especifica que o valor de retorno é o parâmetro multiplicado por si mesmo;\nisto é, o parâmetro ao quadrado. O keyword return sem uma expressão depois\ndele também fará com que a função devolva undefined.
Adicionemos uma outra sentença ao exemplo anterior na qual se utilize o valor de\nretorno da função square:
const square = function (num) {\n return num * num;\n};\n\nconsole.log('El cuadrado de 12 es ' + square(12));\n// → El cuadrado de 12 es 144\nCom esta mudança acontece o seguinte: o valor de retorno que se obtém ao chamar\n(ou invocar) a função square com o valor 12 de argumento é: 144. Este se\nconcatena com o texto 'O quadrado de 12 é ' para formar 'O quadrado de 12 é 144'; o qual, por sua vez, se transmite como argumento à função console.log\npara que o imprima no painel de comando.
Uma função pode ter vários parâmetros ou pode não ter nenhum. No seguinte\nexemplo, makeNoise não tem parâmetros, enquanto power tem dois:
const makeNoise = function () {\n console.log('Pling!');\n};\n\nmakeNoise();\n// → Pling!\n\nconst power = function (base, exponent) {\n let result = 1;\n for (let count = 0; count < exponent; count++) {\n result *= base;\n }\n return result;\n};\n\nconsole.log(power(2, 10));\n// → 1024\nA seguir Daniel te explica mais sobre funções:\n![\"Funções\"](\"https://img.youtube.com/vi/68743wkEjiw/0.jpg\")
returnQuando o intérprete JavaScript observa um return dentro de uma função,\nimediatamente pula fora da função atual e passa o valor retornado ao código que\na chamou. Isto é, qualquer sentença que coloquemos depois do return em uma\nfunção, não será executada.
Uma forma comum de utilizar return é para sair da função antecipadamente caso\nalgum dos argumentos brindados não seja válido; isto é, se não forem o tipo de\nargumentos que a função necessita para funcionar corretamente. Por exemplo, a\nseguinte função devolve uma cadeia que indica o quinto caracter do seu nome. Se\no nome transmitido à função tem menos de cinco caracteres, a função utiliza\nreturn para deixar a função imediatamente. Isto significa que a declaração de\ndevolução ao final, que te diz a quinta letra do seu nome, nunca se executa.
const fifthLetter = function (name) {\n if (name.length < 5) {\n return;\n }\n return 'A quinta letra do seu nome é' + name[4] + '.';\n};\nA funções também afetam o controle de fluxo do nosso programa. Com funções\npodemos criar estruturas repetitivas (com algo que se chama recursividade) e\nestruturas condicionais (com, por exemplo, múltiplos valores de return). De\nfato, as funções são tão versáteis para armar a estrutura de um programa que\nexiste todo um paradigma de programação baseado em funções. Isto é, existe uma\nmaneira de pensar na programação que está baseada em funções. Isto se chama o\nparadigma de programação funcional. Mais adiante estudaremos com mais\nprofundidade funções e o paradigma de programação funcional. Por enquanto, o\nimportante é entender que as funções são uma forma de agrupar código para que\npossa ser reutilizado.
return no lugar de if... elsePodemos usar vários return dentro de diferentes sentenças if no corpo de uma\nfunção para que a função devolva um valor diferente, dependendo do argumento\noferecido. Por exemplo, digamos que você está escrevendo um jogo que dá medalhas\naos jogadores conforme a sua pontuação. Uma pontuação menor a 3 é uma medalha de\nbronze, uma pontuação de 7 ou mais é ouro, e o que está no meio é prata. Você\npoderia utilizar uma função como medalForScore para avaliar uma pontuação e\ndar o tipo de medalha, como se mostra aqui:
const medalForScore = function (score) {\n if (score < 3) {\n return 'Bronze';\n }\n if (score < 7) {\n return 'Silver';\n }\n return 'Gold';\n};\nEmbora estejamos comprovando múltiplas condições, não necessitamos usar\nsentenças if ... else encadeadas. Utilizamos as sentenças if ... else para\ngarantir que somente uma das sentenças se execute. Quando cada uma das opções\npossui sua própria sentença de return, garantimos que se execute somente uma\ndas opções --- porque, lembre-se, as funções só podem devolver uma vez.
return das funçõesO texto a seguir se baseia em grande medida, com alguns ajustes, ao capítulo 2 e\n3do Eloquent JavaScript,de Marijn Haverbeke,\n2014. Tradução em\nPortuguês.
\nNa programação, existe um conceito que você escutará mais de uma vez. Ele diz o\nseguinte: \"Don't Repeat Yourself\", e é comumente conhecido como DRY. Em\nportuguês significa \"não se repita\". Se você estiver copiando e colando\npedaços de código, ou se tiver sentenças de código similares ao longo do seu\nprograma, significa que você está se repetindo. Já vimos este conceito em\nprática com o uso de estruturas repetitivas (loop): ao invés de ter um mesmo\nbloco de código repetido, você pode sustituí-lo por um for ou um while. Com\nas funções você pode alcançar o mesmo objetivo. Vejamos quais são as funções,\ncomo usá-las e por que são importantes.
Uma função é uma forma de agrupar código para que ele possa ser reutilizado. As\nfunções nos permitem executar a mesma peça de código em vários lugares de um\nprograma sem ter que copiar e colar o código repetidamente. Dito de outra\nmaneira, uma função é um pedaço de programa embrulhado em um valor. Esse\nvalor pode ser \"chamado\" várias vezes, em diferentes lugares do teu programa,\npara que execute o código que está ali dentro.
\nAo longo deste curso temos utilizado funções, porém temos chamado de\n\"comandos\". Os comandos como alert(), prompt() e console.log() são de\nfato funções.
As funções são o pão de cada dia na programação com JavaScript.
\nA aplicação mais óbvia das funções é a de definir um novo vocabulário. Criar\nnovas palavras em uma linguagem humana comum (como o português, inglês ou o\nespanhol) é tipicamente algo de mal gosto. Contudo, na programação isto é\nindispensável.
\nUm adulto médio possui umas 20.000 palavras em seu vocabulário. Poucas\nlinguagens de programação possuem 20.000 comandos incorporados. E o vocabulário\nque está disponível na programação tende a ser definido de forma mais precisa, e\nportanto menos flexível que em uma linguagem humana. Como consequência,\nusualmente precisamos agregar algo do nosso próprio vocabulário para evitar\nmuitas repetições.
\nAgrupando fragmentos de código em uma função com um nome fácil de entender\n(dado que será parte do vocabulário que você está construindo) podemos\nestruturar melhor nosso código. Isto porque nos enfocamos em organizar as\nfunções, ao invés de cada linha de código que as compõem. Ao dividir nosso\ncódigo em peças menores e portanto mais fáceis de lidar, podemos ter uma visão\nmais completa do que estamos fazendo. Nos permite elevar-nos a um nível superior\nde abstração. Como diz o ditado: podemos visualizar a floresta completa, vendo\nalém das árvores.
\nA definição de uma função é simplesmente uma definição regular de uma variável,\nmas onde o valor dado à variável é uma função. Por exemplo, o código a seguir\ndefine a variável square para se referir à função que produz o quadrado de\num número dado:
const square = function (num) {\n return num * num;\n};\nA mesma função usando a sintaxe de função flecha (arrow function):
\nconst square = num => num * num;\nUma função é criada por uma expressão que começa com o keyword function, ou\npode ser usando a sintaxe de arrow function. As funções possuem um conjunto de\nparâmetros (no exemplo anterior só temos um parâmetro: num) e um\ncorpo, que contêm as sentenças a serem executadas. Os parâmetros servem para\n\"transmitir\" valores à função e, assim, mudar seu comportamento segundo os\nvalores oferecidos. O corpo da função, usando a keyword function, precisa\nestar sempre fechado em chaves, inclusive quando houver uma única instrução\n(como no exemplo anterior), enquanto funções usando arrow function podemos\nfazer o retorno implícito quando o corpo possui apenas uma expressão. (que será\nimplícitamente o valor do retorno).
Para rodar o código dentro de uma função, necessitamos \"invocar, chamar, ou\naplicar\" a função. Isto se faz escrevendo o nome da função imediatamente\nseguido por parênteses (). Dentro dos parênteses se inclui o que você quer\n\"transmitir\" à função para usar como parâmetro. Os valores que se transmitem à\nfunção para usar como parâmetros são chamados argumentos.
Agregando ao exemplo anterior um chamado à função square transmitindo-lhe como\nargumento o valor 12 vemos que nos devolve 144 (ou seja, 12 ao quadrado).
const square = function (num) {\n return num * num;\n};\n\nsquare(12);\n// → 144\nAssim como os argumentos são os valores de \"entrada\" (input) que utiliza uma\nfunção ao ser chamada, o valor de retorno é o valor de saída (output) que\ndevolve a função (o 144 do exemplo anterior), e que pode ser utilizado em\nqualquer lugar do programa. Se uma função não especifica o valor de retorno,\nentão a função retorna undefined.
O valor de retorno se especifica com o keyword return. No exemplo anterior,\nse especifica que o valor de retorno é o parâmetro multiplicado por si mesmo;\nisto é, o parâmetro ao quadrado. O keyword return sem uma expressão depois\ndele também fará com que a função devolva undefined.
Adicionemos uma outra sentença ao exemplo anterior na qual se utilize o valor de\nretorno da função square:
const square = function (num) {\n return num * num;\n};\n\nconsole.log('El cuadrado de 12 es ' + square(12));\n// → El cuadrado de 12 es 144\nCom esta mudança acontece o seguinte: o valor de retorno que se obtém ao chamar\n(ou invocar) a função square com o valor 12 de argumento é: 144. Este se\nconcatena com o texto 'O quadrado de 12 é ' para formar 'O quadrado de 12 é 144'; o qual, por sua vez, se transmite como argumento à função console.log\npara que o imprima no painel de comando.
Uma função pode ter vários parâmetros ou pode não ter nenhum. No seguinte\nexemplo, makeNoise não tem parâmetros, enquanto power tem dois:
const makeNoise = function () {\n console.log('Pling!');\n};\n\nmakeNoise();\n// → Pling!\n\nconst power = function (base, exponent) {\n let result = 1;\n for (let count = 0; count < exponent; count++) {\n result *= base;\n }\n return result;\n};\n\nconsole.log(power(2, 10));\n// → 1024\nA seguir Daniel te explica mais sobre funções:\n
\nreturnQuando o intérprete JavaScript observa um return dentro de uma função,\nimediatamente pula fora da função atual e passa o valor retornado ao código que\na chamou. Isto é, qualquer sentença que coloquemos depois do return em uma\nfunção, não será executada.
Uma forma comum de utilizar return é para sair da função antecipadamente caso\nalgum dos argumentos brindados não seja válido; isto é, se não forem o tipo de\nargumentos que a função necessita para funcionar corretamente. Por exemplo, a\nseguinte função devolve uma cadeia que indica o quinto caracter do seu nome. Se\no nome transmitido à função tem menos de cinco caracteres, a função utiliza\nreturn para deixar a função imediatamente. Isto significa que a declaração de\ndevolução ao final, que te diz a quinta letra do seu nome, nunca se executa.
const fifthLetter = function (name) {\n if (name.length < 5) {\n return;\n }\n return 'A quinta letra do seu nome é' + name[4] + '.';\n};\nA funções também afetam o controle de fluxo do nosso programa. Com funções\npodemos criar estruturas repetitivas (com algo que se chama recursividade) e\nestruturas condicionais (com, por exemplo, múltiplos valores de return). De\nfato, as funções são tão versáteis para armar a estrutura de um programa que\nexiste todo um paradigma de programação baseado em funções. Isto é, existe uma\nmaneira de pensar na programação que está baseada em funções. Isto se chama o\nparadigma de programação funcional. Mais adiante estudaremos com mais\nprofundidade funções e o paradigma de programação funcional. Por enquanto, o\nimportante é entender que as funções são uma forma de agrupar código para que\npossa ser reutilizado.
return no lugar de if... elsePodemos usar vários return dentro de diferentes sentenças if no corpo de uma\nfunção para que a função devolva um valor diferente, dependendo do argumento\noferecido. Por exemplo, digamos que você está escrevendo um jogo que dá medalhas\naos jogadores conforme a sua pontuação. Uma pontuação menor a 3 é uma medalha de\nbronze, uma pontuação de 7 ou mais é ouro, e o que está no meio é prata. Você\npoderia utilizar uma função como medalForScore para avaliar uma pontuação e\ndar o tipo de medalha, como se mostra aqui:
const medalForScore = function (score) {\n if (score < 3) {\n return 'Bronze';\n }\n if (score < 7) {\n return 'Silver';\n }\n return 'Gold';\n};\nEmbora estejamos comprovando múltiplas condições, não necessitamos usar\nsentenças if ... else encadeadas. Utilizamos as sentenças if ... else para\ngarantir que somente uma das sentenças se execute. Quando cada uma das opções\npossui sua própria sentença de return, garantimos que se execute somente uma\ndas opções --- porque, lembre-se, as funções só podem devolver uma vez.
arrays y para qué sirvenarrayEl texto a continuación se basa en gran medida, con ciertos ajustes, en el\ncapítulo 4 de Eloquent JavaScript, de Marijn\nHaverbeke, 2014. Traducción en Español\ndisponible gracias a hectorip, y del capítulo 3\nde JavaScript for kids,\nNick Morgan, 2015.
\nComo hemos visto, gran parte de la programación consiste en agrupar y manipular\ndata. Esto nos permite transformar datos en información y utilizar esa información\npara resolver problemas. Hasta ahora hemos podido agrupar y manipular data haciendo\nuso de tipos de datos simples como: numbers,booleans y strings. Sobre ellos\nhemos creado una serie de programas sencillos. También hemos aprendido a modificar\nel control de flujo de estos programas, por medio de estructuras repetitivas,\nestructuras condicionales y funciones, lo cual nos ha permitido crear productos\nun poco más complejos. Sin embargo, nuestros programas han estado seriamente limitados\ndebido a que operan únicamente con tipos de datos simples. Para resolver problemas\nmás complejos necesitamos poder agrupar y manipular data de una manera más interesante.\nAfortunadamente, un entorno JavaScript nos permite lograr esto brindándonos arrays\ny objects.
Digamos, por poner un ejemplo, que queremos representar una colección de\nnúmeros: 2, 3, 5, 7 y 11.
Una opción para representar esto sería:
\nconst firstNumber = 2;\nconst secondNumber = 3;\nconst thirdNumber = 5;\nconst fourthNumber = 7;\n\nEsta lista es bien extraña y engorrosa. Implica tener una variable para cada\nelemento de nuestra lista. Cuando en realidad sólo deberíamos tener una sola\nvariable que \"contenga\" a cada una.¡Imagina que luego quieres tener una lista\nde 1,000 elementos!
\nOtra opción -más creativa- sería utilizar un string. Después de todo, los\nstrings pueden ser de cualquier longitud, así que podemos poner mucha información\nen ellos. Podríamos usar un string con los números intercalados por un\nespacio, así:
const listOfNumbers = '2 3 5 7 11';\nSin embargo, esto también resulta engorroso. Tendríamos que buscar la manera de\nextraer cada elemento del string (contando los espacios entre ellos) y además,\ntendríamos que convertirlos de vuelta a number para acceder y manipular cada\nnúmero de manera individual.
Afortunadamente, Javascript proporciona un tipo de dato específico para almacenar\nsecuencias de valores. Se llama array (arreglo en español) y se escribe como una\nlista de valores entre corchetes, separados por comas.
const listOfNumbers = [2, 3, 5, 7, 11];\n\nLos arrays son tremendamente útiles para agrupar y manipular data. Es como\ncuando vamos al mercado y tenemos nuestra \"lista de compras\". Podríamos tener\nuna hoja de papel para cada artículo que queremos comprar. Por ejemplo, podríamos\ntener una hoja de papel que dice \"huevos\", otra hoja que dice \"pan\", y otra hoja\nque dice \"naranjas\". Sin embargo, la mayoría de la gente escribe la lista completa\nde cosas a comprar en una sola hoja de papel.
Antes de comenzar, vamos a generar una pequeña función utilitaria,\nque nos permita decir si dos string son iguales. La colocaremos\nen el prototype de Array.
const equal = (one, other) => JSON.stringify(one) === JSON.stringify(other);\n\nconsole.assert(equal([1, 2, 3], [1, 2, 3]));\nconsole.assert(!equal([1, 2, 3], ['a', 'b', 'c']));\nconsole.assert(!equal([1, 2, 3], [3, 2, 1]));\n\nPara obtener un elemento dentro de un array, se utiliza la notación con corchetes,\ncon el index (índice en español) del elemento que se desea. Veamos un ejemplo:
listOfNumbers = [2, 3, 5, 7, 11];\n\nconsole.assert(listOfNumbers[1] === 3);\nconsole.assert(listOfNumbers[1 - 1] === 2);\n\nEl index es el número que corresponde a (o que coincide con) el punto del array\ndonde se almacena el valor. Al igual que con los strings, el primer elemento\nde un array está en el index 0, el segundo está en el index 1, el tercero\nen el index 2, y así sucesivamente. Es por eso que pedir index 1 - 1\n(es decir, 0) del array anterior devuelve el número 2.
![\"image\"](\"https://user-images.githubusercontent.com/211721/40194836-51eebf22-59d1-11e8-8de8-8b29feb3bbf7.png\")
Si no tienes antecedentes en programación, acostumbrarte a esta convención puede\ntomarte algún tiempo. Pero el conteo con base cero tiene una larga tradición en\ntecnología y mientras la convención se siga de manera consistente (que se ha hecho\nen Javascript), funciona bien.
\nPodemos utilizar los indexes entre corchetes para establecer, cambiar o incluso\nagregar elementos a un array. Por ejemplo, para reemplazar el primer elemento del\narray listOfNumbers por el número 1, podríamos hacer lo siguiente:
listOfNumbers = [2, 3, 5, 7, 11];\nlistOfNumbers[0] = 1;\n\nconsole.assert(\n equal(listOfNumbers, [1, 3, 5, 7, 11]),\n);\n\nTambién podemos utilizar los indexes entre corchetes para agregar elementos en\nun array. Por ejemplo, para agregar el número 13 al array listOfNumbers,\nharíamos lo siguiente:
listOfNumbers = [2, 3, 5, 7, 11];\nlistOfNumbers[5] = 13;\n\nconsole.assert(\n equal(listOfNumbers, [2, 3, 5, 7, 11, 13]),\n);\n\nDe hecho, podemos crear un array vacío y luego definir cada elemento de forma\nindividual, así:
listOfNumbers = [];\nlistOfNumbers[0] = 2;\nlistOfNumbers[1] = 3;\nlistOfNumbers[2] = 5;\nlistOfNumbers[3] = 7;\nlistOfNumbers[4] = 11;\n\nconsole.assert(\n equal(listOfNumbers, [2, 3, 5, 7, 11]),\n);\n\nLos elementos de un array no tienen que ser todos del mismo tipo de dato.\nPodemos, por ejemplo, tener un array que contenga un number (el número 3),\nun string (\"hola mundo\") y otro number (el número 3627.5):
const mixedArray = [3, 'hola mundo', 3627.5];\nconsole.assert(mixedArray[0] === 3);\nconsole.assert(mixedArray[1] === 'hola mundo');\nconsole.assert(mixedArray[2] === 3627.5);\n\nInclusive podemos tener un array dentro de otro array (algo que mucha gente\nllama arrays de 2 dimensiones). Por ejemplo, para organizar la data de preguntas\ny respuestas de un quiz, podemos utilizar un array en el que cada elemento es,\na su vez, un array que tiene dos elementos: una pregunta y una respuesta.
let questions = [\n ['¿En cuántos países opera Laboratoria?', 4],\n ['¿Cuál es la capital de Perú?', 'Lima'],\n ['¿Cuál es baile típico Chileno?', 'Cueca'],\n ['¿Cuál es la moneda de México?', 'Peso'],\n];\n\nPara acceder a elementos individuales de los arrays internos simplemente se añade\nun nuevo par de corchetes con el index correspondiente. Por ejemplo, para obtener\nla respuesta a la pregunta '¿Cuál es la moneda de México?' haríamos:
\nquestions = [\n ['¿En cuántos países opera Laboratoria?', 4],\n ['¿Cuál es la capital de Perú?', 'Lima'],\n ['¿Cuál es baile típico Chileno?', 'Cueca'],\n ['¿Cuál es la moneda de México?', 'Peso'],\n];\nconsole.assert(questions[3][1] === 'Peso');\n\nVamos a hacerlo de nuevo paso a paso
\nquestions = [\n ['¿En cuántos países opera Laboratoria?', 4],\n ['¿Cuál es la capital de Perú?', 'Lima'],\n ['¿Cuál es baile típico Chileno?', 'Cueca'],\n ['¿Cuál es la moneda de México?', 'Peso'],\n];\nconst quest3 = questions[3];\nconsole.assert(\n equal(quest3, ['¿Cuál es la moneda de México?', 'Peso']),\n);\nconsole.assert(quest3[1] === 'Peso');\n\nA continuación Michelle nos explica los conceptos principales de arrays con un\nejemplo:
![\"ejemplo](\"https://img.youtube.com/vi/-hLSzYr3z44/0.jpg\")
arrays y para qué sirvenarrayEl texto a continuación se basa en gran medida, con ciertos ajustes, en el\ncapítulo 4 de Eloquent JavaScript, de Marijn\nHaverbeke, 2014. Traducción en Español\ndisponible gracias a hectorip, y del capítulo 3\nde JavaScript for kids,\nNick Morgan, 2015.
\nComo hemos visto, gran parte de la programación consiste en agrupar y manipular\ndata. Esto nos permite transformar datos en información y utilizar esa información\npara resolver problemas. Hasta ahora hemos podido agrupar y manipular data haciendo\nuso de tipos de datos simples como: numbers,booleans y strings. Sobre ellos\nhemos creado una serie de programas sencillos. También hemos aprendido a modificar\nel control de flujo de estos programas, por medio de estructuras repetitivas,\nestructuras condicionales y funciones, lo cual nos ha permitido crear productos\nun poco más complejos. Sin embargo, nuestros programas han estado seriamente limitados\ndebido a que operan únicamente con tipos de datos simples. Para resolver problemas\nmás complejos necesitamos poder agrupar y manipular data de una manera más interesante.\nAfortunadamente, un entorno JavaScript nos permite lograr esto brindándonos arrays\ny objects.
Digamos, por poner un ejemplo, que queremos representar una colección de\nnúmeros: 2, 3, 5, 7 y 11.
Una opción para representar esto sería:
\nconst firstNumber = 2;\nconst secondNumber = 3;\nconst thirdNumber = 5;\nconst fourthNumber = 7;\n\nEsta lista es bien extraña y engorrosa. Implica tener una variable para cada\nelemento de nuestra lista. Cuando en realidad sólo deberíamos tener una sola\nvariable que \"contenga\" a cada una.¡Imagina que luego quieres tener una lista\nde 1,000 elementos!
\nOtra opción -más creativa- sería utilizar un string. Después de todo, los\nstrings pueden ser de cualquier longitud, así que podemos poner mucha información\nen ellos. Podríamos usar un string con los números intercalados por un\nespacio, así:
const listOfNumbers = '2 3 5 7 11';\nSin embargo, esto también resulta engorroso. Tendríamos que buscar la manera de\nextraer cada elemento del string (contando los espacios entre ellos) y además,\ntendríamos que convertirlos de vuelta a number para acceder y manipular cada\nnúmero de manera individual.
Afortunadamente, Javascript proporciona un tipo de dato específico para almacenar\nsecuencias de valores. Se llama array (arreglo en español) y se escribe como una\nlista de valores entre corchetes, separados por comas.
const listOfNumbers = [2, 3, 5, 7, 11];\n\nLos arrays son tremendamente útiles para agrupar y manipular data. Es como\ncuando vamos al mercado y tenemos nuestra \"lista de compras\". Podríamos tener\nuna hoja de papel para cada artículo que queremos comprar. Por ejemplo, podríamos\ntener una hoja de papel que dice \"huevos\", otra hoja que dice \"pan\", y otra hoja\nque dice \"naranjas\". Sin embargo, la mayoría de la gente escribe la lista completa\nde cosas a comprar en una sola hoja de papel.
Antes de comenzar, vamos a generar una pequeña función utilitaria,\nque nos permita decir si dos string son iguales. La colocaremos\nen el prototype de Array.
const equal = (one, other) => JSON.stringify(one) === JSON.stringify(other);\n\nconsole.assert(equal([1, 2, 3], [1, 2, 3]));\nconsole.assert(!equal([1, 2, 3], ['a', 'b', 'c']));\nconsole.assert(!equal([1, 2, 3], [3, 2, 1]));\n\nPara obtener un elemento dentro de un array, se utiliza la notación con corchetes,\ncon el index (índice en español) del elemento que se desea. Veamos un ejemplo:
listOfNumbers = [2, 3, 5, 7, 11];\n\nconsole.assert(listOfNumbers[1] === 3);\nconsole.assert(listOfNumbers[1 - 1] === 2);\n\nEl index es el número que corresponde a (o que coincide con) el punto del array\ndonde se almacena el valor. Al igual que con los strings, el primer elemento\nde un array está en el index 0, el segundo está en el index 1, el tercero\nen el index 2, y así sucesivamente. Es por eso que pedir index 1 - 1\n(es decir, 0) del array anterior devuelve el número 2.
Si no tienes antecedentes en programación, acostumbrarte a esta convención puede\ntomarte algún tiempo. Pero el conteo con base cero tiene una larga tradición en\ntecnología y mientras la convención se siga de manera consistente (que se ha hecho\nen Javascript), funciona bien.
\nPodemos utilizar los indexes entre corchetes para establecer, cambiar o incluso\nagregar elementos a un array. Por ejemplo, para reemplazar el primer elemento del\narray listOfNumbers por el número 1, podríamos hacer lo siguiente:
listOfNumbers = [2, 3, 5, 7, 11];\nlistOfNumbers[0] = 1;\n\nconsole.assert(\n equal(listOfNumbers, [1, 3, 5, 7, 11]),\n);\n\nTambién podemos utilizar los indexes entre corchetes para agregar elementos en\nun array. Por ejemplo, para agregar el número 13 al array listOfNumbers,\nharíamos lo siguiente:
listOfNumbers = [2, 3, 5, 7, 11];\nlistOfNumbers[5] = 13;\n\nconsole.assert(\n equal(listOfNumbers, [2, 3, 5, 7, 11, 13]),\n);\n\nDe hecho, podemos crear un array vacío y luego definir cada elemento de forma\nindividual, así:
listOfNumbers = [];\nlistOfNumbers[0] = 2;\nlistOfNumbers[1] = 3;\nlistOfNumbers[2] = 5;\nlistOfNumbers[3] = 7;\nlistOfNumbers[4] = 11;\n\nconsole.assert(\n equal(listOfNumbers, [2, 3, 5, 7, 11]),\n);\n\nLos elementos de un array no tienen que ser todos del mismo tipo de dato.\nPodemos, por ejemplo, tener un array que contenga un number (el número 3),\nun string (\"hola mundo\") y otro number (el número 3627.5):
const mixedArray = [3, 'hola mundo', 3627.5];\nconsole.assert(mixedArray[0] === 3);\nconsole.assert(mixedArray[1] === 'hola mundo');\nconsole.assert(mixedArray[2] === 3627.5);\n\nInclusive podemos tener un array dentro de otro array (algo que mucha gente\nllama arrays de 2 dimensiones). Por ejemplo, para organizar la data de preguntas\ny respuestas de un quiz, podemos utilizar un array en el que cada elemento es,\na su vez, un array que tiene dos elementos: una pregunta y una respuesta.
let questions = [\n ['¿En cuántos países opera Laboratoria?', 4],\n ['¿Cuál es la capital de Perú?', 'Lima'],\n ['¿Cuál es baile típico Chileno?', 'Cueca'],\n ['¿Cuál es la moneda de México?', 'Peso'],\n];\n\nPara acceder a elementos individuales de los arrays internos simplemente se añade\nun nuevo par de corchetes con el index correspondiente. Por ejemplo, para obtener\nla respuesta a la pregunta '¿Cuál es la moneda de México?' haríamos:
\nquestions = [\n ['¿En cuántos países opera Laboratoria?', 4],\n ['¿Cuál es la capital de Perú?', 'Lima'],\n ['¿Cuál es baile típico Chileno?', 'Cueca'],\n ['¿Cuál es la moneda de México?', 'Peso'],\n];\nconsole.assert(questions[3][1] === 'Peso');\n\nVamos a hacerlo de nuevo paso a paso
\nquestions = [\n ['¿En cuántos países opera Laboratoria?', 4],\n ['¿Cuál es la capital de Perú?', 'Lima'],\n ['¿Cuál es baile típico Chileno?', 'Cueca'],\n ['¿Cuál es la moneda de México?', 'Peso'],\n];\nconst quest3 = questions[3];\nconsole.assert(\n equal(quest3, ['¿Cuál es la moneda de México?', 'Peso']),\n);\nconsole.assert(quest3[1] === 'Peso');\n\nA continuación Michelle nos explica los conceptos principales de arrays con un\nejemplo:
O texto a seguir se baseia em grande medida, com alguns ajustes, ao capítulo 4\ndo Eloquent JavaScript,de Marijn Haverbeke,\n2014. Tradução em\nPortuguês,\ne ao capítulo 3 do JavaScript for\nkids,\nNick Morgan, 2015;
\nComo vimos, grande parte da programação consiste em agrupar e manipular dados.\nIsso nos permite transformar dados em informações e usar essas informações para\nresolver problemas. Até agora, pudemos agrupar e manipular dados usando tipos de\ndados simples, tais como: numbers, booleans e strings. Com eles, criamos\numa série de programas simples. Também aprendemos a modificar o fluxo desses\nprogramas, através de estruturas repetitivas, condicionais e funcionais, as\nquais nos permitiram criar produtos um pouco mais complexos. No entanto, nossos\nprogramas tinham muitas limitações porque operávamos apenas com tipos de dados\nsimples.
\nPara resolver problemas mais complexos, precisamos ser capazes de agrupar e\nmanipular dados de uma maneira mais interessante. Felizmente, um ambiente\nJavaScript nos permite alcançar isso através de arrays e objects.
\nDigamos, por exemplo, que queiramos representar um conjunto de números: 2,\n3, 5, 7 e 11
Uma opção para representar isso seria:
\nconst firstNumber = 2;\nconst secondNumber = 3;\nconst thirdNumber = 5;\nconst fourthNumber = 7;\nEsta lista é bem estranha e trabalhosa. Isso implica em ter uma variável para\ncada elemento da nossa lista. Quando, na realidade, devemos ter apenas uma única\nvariável que \"contenha\" cada um. Imagine se você quiser uma lista de 1.000\nelementos!
\nOutra opção - mais criativa - seria usar uma string. Afinal, as strings\npodem ser de qualquer tamanho, e então podemos colocar muita informação nelas.\nPoderíamos usar uma cadeia de caracteres (string) com os números\nintercalados por um espaço, como esta:
const listOfNumbers = '2 3 5 7 11';\nNo entanto, isso também é complicado. Teríamos que encontrar uma maneira de\nextrair cada elemento de uma string (considerando os espaços entre eles) e\ntambém teríamos que convertê-los para number a fim de acessar e manipular cada\num dos números.
Felizmente, o Javascript fornece um tipo específico de dados para armazenar\nsequência de valores. É chamado de array (arranjo ou vetor/matriz) e é\nescrito como uma lista de valores entre colchetes, separados por vírgulas.
const listOfNumbers = [2, 3, 5, 7, 11];\nOs arranjos são extremamente úteis para agrupar e manipular dados. É como quando\nvamos ao mercado e temos nossa \"lista de compras\". Poderíamos ter uma folha de\npapel para cada item que queremos comprar. Por exemplo, poderíamos ter uma folha\nde papel que diz \"ovos\", outra folha que diz \"pão\" e outra folha que diz\n\"laranjas\". No entanto, a maioria das pessoas escreve todos os itens para\ncomprar em uma única folha de papel.
\nAntes de começar, vamos gerar uma pequena função utilitária, que nos permite\ndescobrir se duas strings são iguais.
const equal = (one, other) => JSON.stringify(one) === JSON.stringify(other);\n\nconsole.assert(equal([1, 2, 3], [1, 2, 3]));\nconsole.assert(!equal([1, 2, 3], ['a', 'b', 'c']));\nconsole.assert(!equal([1, 2, 3], [3, 2, 1]));\nPara obter um elemento de um array, a notação com colchetes é usada contento o\níndice (index) do elemento desejado. Veja o exemplo abaixo:
const listOfNumbers = [2, 3, 5, 7, 11];\n\nconsole.assert(listOfNumbers[1] === 3);\nconsole.assert(listOfNumbers[1 - 1] === 2);\nÍndice é o número que corresponde a (ou coincide com) a posição em que o valor\né armazenado. Assim como nas strings, o primeiro elemento de um vetor está no\níndice 0, o segundo no 1, o terceiro no 2, e assim por diante. É por isso\nque acessar o índice 1 - 1 no vetor acima, ou seja, devolve o número 2\n(índice 0).
Se você não tem experiência em programação, habituar-se com essa convenção pode\nlevar algum tempo. Mas a contagem baseada em zero tem uma longa tradição em\ntecnologia e, desde que a convenção seja seguida consistentemente (o que é\nfeito em JavaScript), ela funciona bem. Tome muito cuidado, pois esse descuido\né a causa de muitos bugs, inclusive para programadores um pouco mais\nexperientes.
\nPodemos usar os índices entre colchetes para definir, alterar ou adicionar\nelementos a um vetor. Por exemplo, para substituir o primeiro elemento de\narraylistOfNumbers pelo número 1, poderíamos fazer o seguinte:
listOfNumbers[0] = 1;\n\nconsole.assert(\n equal(listOfNumbers, [1, 3, 5, 7, 11]),\n);\n\nTambém podemos usar os índices entre colchetes para adicionar elementos em um\nvetor. Por exemplo, para adicionar o número 13 ao array listOfNumbers,\nfaríamos assim:
listOfNumbers[5] = 13;\n\nconsole.assert(\n equal(listOfNumbers, [1, 3, 5, 7, 11, 13]),\n);\n\nAinda, podemos criar um vetor vazio e definir cada elemento individualmente a\nseguir, da seguinte maneira:
\nconst listOfNumbers = [];\nlistOfNumbers[0] = 2;\nlistOfNumbers[1] = 3;\nlistOfNumbers[2] = 5;\nlistOfNumbers[3] = 7;\nlistOfNumbers[4] = 11;\n\nconsole.assert(\n equal(listOfNumbers, [2, 3, 5, 7, 11]),\n);\n\nOs elementos de um array não precisam ser todos do mesmo tipo de dados.\nPodemos, por exemplo, ter um vetor que contenha um number (o número 3), uma\nstring (\"dinossauros\") e outro number (o número 3627.5):
const mixedArray = [3, 'hola mundo', 3627.5];\nconsole.assert(mixedArray[0] === 3);\nconsole.assert(mixedArray[1] === 'hola mundo');\nconsole.assert(mixedArray[2] === 3627.5);\n\nPodemos até ter um vetor dentro de outro (algo que muitas pessoas chamam de\nmatriz ou array de 2 dimensões). Por exemplo, para organizar os dados de\nperguntas e respostas de um questionário, podemos usar um arranjo no qual cada\nelemento é um vetor com dois elementos: uma pergunta e uma resposta.
\nlet questions = [\n ['Em quantos países a Laboratoria opera?', 4],\n ['Qual é a capital do Peru?', 'Lima'],\n ['O que é dança chilena típica?', 'Cueca'],\n ['Qual é a moeda do México?', 'Peso']\n];\n\nPara acessar elementos individuais dos vetores internos, basta adicionar um novo\npar de colchetes com o índice correspondente. Por exemplo, para obter a resposta\npara a pergunta \"Qual é a moeda do México?\", nós faríamos:
\nquestions = [\n ['Em quantos países a Laboratoria opera?', 4],\n ['Qual é a capital do Peru?', 'Lima'],\n ['O que é dança chilena típica?', 'Cueca'],\n ['Qual é a moeda do México?', 'Peso']\n];\nconsole.assert(questions[3][1] === 'Peso');\n\nVamos fazer de novo passo a passo:
\nquestions = [\n ['Em quantos países a Laboratoria opera?', 4],\n ['Qual é a capital do Peru?', 'Lima'],\n ['O que é dança chilena típica?', 'Cueca'],\n ['Qual é a moeda do México?', 'Peso']\n];\nconst quest3 = questions[3];\nconsole.assert(\n equal(quest3, ['Qual é a moeda do México?', 'Peso']),\n);\nconsole.assert(quest3[1] === 'Peso');\n\nA seguir Juliana nos explica os conceitos principais de arrays con um\nexemplo:
![\"Arrays\"](\"https://img.youtube.com/vi/joMxeCl6ppg/0.jpg\")
O texto a seguir se baseia em grande medida, com alguns ajustes, ao capítulo 4\ndo Eloquent JavaScript,de Marijn Haverbeke,\n2014. Tradução em\nPortuguês,\ne ao capítulo 3 do JavaScript for\nkids,\nNick Morgan, 2015;
\nComo vimos, grande parte da programação consiste em agrupar e manipular dados.\nIsso nos permite transformar dados em informações e usar essas informações para\nresolver problemas. Até agora, pudemos agrupar e manipular dados usando tipos de\ndados simples, tais como: numbers, booleans e strings. Com eles, criamos\numa série de programas simples. Também aprendemos a modificar o fluxo desses\nprogramas, através de estruturas repetitivas, condicionais e funcionais, as\nquais nos permitiram criar produtos um pouco mais complexos. No entanto, nossos\nprogramas tinham muitas limitações porque operávamos apenas com tipos de dados\nsimples.
\nPara resolver problemas mais complexos, precisamos ser capazes de agrupar e\nmanipular dados de uma maneira mais interessante. Felizmente, um ambiente\nJavaScript nos permite alcançar isso através de arrays e objects.
\nDigamos, por exemplo, que queiramos representar um conjunto de números: 2,\n3, 5, 7 e 11
Uma opção para representar isso seria:
\nconst firstNumber = 2;\nconst secondNumber = 3;\nconst thirdNumber = 5;\nconst fourthNumber = 7;\nEsta lista é bem estranha e trabalhosa. Isso implica em ter uma variável para\ncada elemento da nossa lista. Quando, na realidade, devemos ter apenas uma única\nvariável que \"contenha\" cada um. Imagine se você quiser uma lista de 1.000\nelementos!
\nOutra opção - mais criativa - seria usar uma string. Afinal, as strings\npodem ser de qualquer tamanho, e então podemos colocar muita informação nelas.\nPoderíamos usar uma cadeia de caracteres (string) com os números\nintercalados por um espaço, como esta:
const listOfNumbers = '2 3 5 7 11';\nNo entanto, isso também é complicado. Teríamos que encontrar uma maneira de\nextrair cada elemento de uma string (considerando os espaços entre eles) e\ntambém teríamos que convertê-los para number a fim de acessar e manipular cada\num dos números.
Felizmente, o Javascript fornece um tipo específico de dados para armazenar\nsequência de valores. É chamado de array (arranjo ou vetor/matriz) e é\nescrito como uma lista de valores entre colchetes, separados por vírgulas.
const listOfNumbers = [2, 3, 5, 7, 11];\nOs arranjos são extremamente úteis para agrupar e manipular dados. É como quando\nvamos ao mercado e temos nossa \"lista de compras\". Poderíamos ter uma folha de\npapel para cada item que queremos comprar. Por exemplo, poderíamos ter uma folha\nde papel que diz \"ovos\", outra folha que diz \"pão\" e outra folha que diz\n\"laranjas\". No entanto, a maioria das pessoas escreve todos os itens para\ncomprar em uma única folha de papel.
\nAntes de começar, vamos gerar uma pequena função utilitária, que nos permite\ndescobrir se duas strings são iguais.
const equal = (one, other) => JSON.stringify(one) === JSON.stringify(other);\n\nconsole.assert(equal([1, 2, 3], [1, 2, 3]));\nconsole.assert(!equal([1, 2, 3], ['a', 'b', 'c']));\nconsole.assert(!equal([1, 2, 3], [3, 2, 1]));\nPara obter um elemento de um array, a notação com colchetes é usada contento o\níndice (index) do elemento desejado. Veja o exemplo abaixo:
const listOfNumbers = [2, 3, 5, 7, 11];\n\nconsole.assert(listOfNumbers[1] === 3);\nconsole.assert(listOfNumbers[1 - 1] === 2);\nÍndice é o número que corresponde a (ou coincide com) a posição em que o valor\né armazenado. Assim como nas strings, o primeiro elemento de um vetor está no\níndice 0, o segundo no 1, o terceiro no 2, e assim por diante. É por isso\nque acessar o índice 1 - 1 no vetor acima, ou seja, devolve o número 2\n(índice 0).
Se você não tem experiência em programação, habituar-se com essa convenção pode\nlevar algum tempo. Mas a contagem baseada em zero tem uma longa tradição em\ntecnologia e, desde que a convenção seja seguida consistentemente (o que é\nfeito em JavaScript), ela funciona bem. Tome muito cuidado, pois esse descuido\né a causa de muitos bugs, inclusive para programadores um pouco mais\nexperientes.
\nPodemos usar os índices entre colchetes para definir, alterar ou adicionar\nelementos a um vetor. Por exemplo, para substituir o primeiro elemento de\narraylistOfNumbers pelo número 1, poderíamos fazer o seguinte:
listOfNumbers[0] = 1;\n\nconsole.assert(\n equal(listOfNumbers, [1, 3, 5, 7, 11]),\n);\n\nTambém podemos usar os índices entre colchetes para adicionar elementos em um\nvetor. Por exemplo, para adicionar o número 13 ao array listOfNumbers,\nfaríamos assim:
listOfNumbers[5] = 13;\n\nconsole.assert(\n equal(listOfNumbers, [1, 3, 5, 7, 11, 13]),\n);\n\nAinda, podemos criar um vetor vazio e definir cada elemento individualmente a\nseguir, da seguinte maneira:
\nconst listOfNumbers = [];\nlistOfNumbers[0] = 2;\nlistOfNumbers[1] = 3;\nlistOfNumbers[2] = 5;\nlistOfNumbers[3] = 7;\nlistOfNumbers[4] = 11;\n\nconsole.assert(\n equal(listOfNumbers, [2, 3, 5, 7, 11]),\n);\n\nOs elementos de um array não precisam ser todos do mesmo tipo de dados.\nPodemos, por exemplo, ter um vetor que contenha um number (o número 3), uma\nstring (\"dinossauros\") e outro number (o número 3627.5):
const mixedArray = [3, 'hola mundo', 3627.5];\nconsole.assert(mixedArray[0] === 3);\nconsole.assert(mixedArray[1] === 'hola mundo');\nconsole.assert(mixedArray[2] === 3627.5);\n\nPodemos até ter um vetor dentro de outro (algo que muitas pessoas chamam de\nmatriz ou array de 2 dimensões). Por exemplo, para organizar os dados de\nperguntas e respostas de um questionário, podemos usar um arranjo no qual cada\nelemento é um vetor com dois elementos: uma pergunta e uma resposta.
\nlet questions = [\n ['Em quantos países a Laboratoria opera?', 4],\n ['Qual é a capital do Peru?', 'Lima'],\n ['O que é dança chilena típica?', 'Cueca'],\n ['Qual é a moeda do México?', 'Peso']\n];\n\nPara acessar elementos individuais dos vetores internos, basta adicionar um novo\npar de colchetes com o índice correspondente. Por exemplo, para obter a resposta\npara a pergunta \"Qual é a moeda do México?\", nós faríamos:
\nquestions = [\n ['Em quantos países a Laboratoria opera?', 4],\n ['Qual é a capital do Peru?', 'Lima'],\n ['O que é dança chilena típica?', 'Cueca'],\n ['Qual é a moeda do México?', 'Peso']\n];\nconsole.assert(questions[3][1] === 'Peso');\n\nVamos fazer de novo passo a passo:
\nquestions = [\n ['Em quantos países a Laboratoria opera?', 4],\n ['Qual é a capital do Peru?', 'Lima'],\n ['O que é dança chilena típica?', 'Cueca'],\n ['Qual é a moeda do México?', 'Peso']\n];\nconst quest3 = questions[3];\nconsole.assert(\n equal(quest3, ['Qual é a moeda do México?', 'Peso']),\n);\nconsole.assert(quest3[1] === 'Peso');\n\nA seguir Juliana nos explica os conceitos principais de arrays con um\nexemplo:
Já vimos alguns dos métodos de uso mais comuns para arrays, porém\nArray.prototype nos fornece vários outros métodos úteis.
Para facilitar um pouco a vida, os dividimos da seguinte forma:
\npush, pop, shift, unshift, slice,\nsplice e concat.indexOf, lastIndexOf, includes,\nfind, findIndex e filter.map,reduce, sort, reverse, split e join.Agora focaremos nos quatro métodos que consideramos mais utilizados: filter,\nmap sort e reduce.
Para conhecer em detalhes cada um destes métodos, visite a documentação no\nMDN
\nVamos usar uma função para comparar arrays.
\nconst equal = (one, other) => JSON.stringify(one) === JSON.stringify(other);\n\nAbaixo segue um conjunto de dados que utilizaremos como exemplo para nossos\nexemplos :)
\nconst inventors = [\n {\n first: 'Ada',\n last: 'Lovelace',\n year: 1815,\n passed: 1852,\n },\n {\n first: 'Lise',\n last: 'Meitner',\n year: 1878,\n passed: 1968,\n },\n {\n first: 'Caroline',\n last: 'Herschel',\n year: 1750,\n passed: 1848,\n },\n {\n first: 'Hanna',\n last: 'Hammarström',\n year: 1829,\n passed: 1909,\n },\n];\n\nAgora que já temos o que precisamos, vamos começar.
\nArray.prototype.filterfilter nos permite obter um subconjunto dos elementos da array, desde que\ncumpram uma certa condição.
const deadBeforeSXX = inventors.filter(inventor => (inventor.passed < 1900));\nconsole.assert(\n equal(deadBeforeSXX, [\n {\n first: 'Ada',\n last: 'Lovelace',\n year: 1815,\n passed: 1852,\n },\n {\n first: 'Caroline',\n last: 'Herschel',\n year: 1750,\n passed: 1848,\n },\n ]),\n);\n\nA seguir o Dani explica mais a fundo como o método filter funciona:
![\"Filtrando](\"https://img.youtube.com/vi/M0sG5YTRiII/0.jpg\")
Array.prototype.mapmap nos permite visitar cada um dos elementos da array, coletando neste\nprocesso um valor de retorno para cada elemento visitado.
Por exemplo, supondo que queremos uma lista de nomes e sobrenomes da nossa base\nde dados.
\nconst fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);\nconsole.assert(\n equal(fullNames, [\n 'Ada Lovelace',\n 'Lise Meitner',\n 'Caroline Herschel',\n 'Hanna Hammarström',\n ]),\n);\n\nOu quantos anos cada uma viveu.
\nconst yearAlive = inventors.map(({\n first, last, passed, year,\n}) => [`${first} ${last}`, passed - year]);\nconsole.assert(\n equal(yearAlive, [\n ['Ada Lovelace', 37],\n ['Lise Meitner', 90],\n ['Caroline Herschel', 98],\n ['Hanna Hammarström', 80],\n ]),\n);\n\nArray.prototype.sortOrdena a array in place (ou seja, dentro da própria array).
\nlet arr = [1, 2, 15];\narr.sort();\nconsole.assert(equal(arr, [1, 15, 2]));\n\nSe olhar bem, vai perceber que algo está estranho: por padrão, sort ordena a\narray convertendo todos os elementos em strings. Por isso 15 apareceu antes\nde 2.
Como resolvemos isso?
\nconst compareNumeric = (a, b) => {\n if (a > b) return 1;\n if (a === b) return 0;\n /* if (a < b) */\n return -1;\n};\narr = [1, 2, 15];\narr.sort(compareNumeric);\nconsole.assert(\n equal(arr, [1, 2, 15]),\n);\n\nVejamos alguns exemplos mais interessantes.
\nlet ordered = inventors.sort((a, b) => {\n if (a.year > b.year) {\n return 1;\n }\n return -1;\n});\nconsole.assert(equal(\n ordered,\n [\n {\n first: 'Caroline',\n last: 'Herschel',\n year: 1750,\n passed: 1848,\n },\n {\n first: 'Ada',\n last: 'Lovelace',\n year: 1815,\n passed: 1852,\n },\n {\n first: 'Hanna',\n last: 'Hammarström',\n year: 1829,\n passed: 1909,\n },\n {\n first: 'Lise',\n last: 'Meitner',\n year: 1878,\n passed: 1968,\n },\n ],\n));\n\nPoderíamos escrever a função de comparação usando um operador ternário, obtendo\no mesmo resultado.
\nordered = inventors.sort((a, b) => (a.year > b.year ? 1 : -1));\n\nconst moreYearsAlive = inventors.sort((a, b) => {\n const last = a.passed - a.year;\n const next = b.passed - b.year;\n return last > next ? -1 : 1;\n});\nconsole.assert(equal(\n moreYearsAlive,\n [\n {\n first: 'Caroline',\n last: 'Herschel',\n year: 1750,\n passed: 1848,\n },\n {\n first: 'Lise',\n last: 'Meitner',\n year: 1878,\n passed: 1968,\n },\n {\n first: 'Hanna',\n last: 'Hammarström',\n year: 1829,\n passed: 1909,\n },\n {\n first: 'Ada',\n last: 'Lovelace',\n year: 1815,\n passed: 1852,\n },\n ],\n));\n\nArray.prototype.reduceQuando queremos iterar uma array, usamos forEach. Agora, para fazer o mesmo,\nmas coletando uma lista de valores, com um valor de cada elemento, usamos map.
reduce é similar ao map, porém o utilizamos para iterar uma array e obter um\núnico valor que contenha um consolidado de todos os elementos.
Façamos o seguinte:
\nlet initial = 0;\nconst value = arr.reduce((previousValue, item, index, array) => {\n /* aqui tu codigo */\n}, initial);\n\nOnde
\nitem -- é o elemento atual que estamos iterando
index -- é o índice atual
array -- é a array atual
Até aqui tudo mais ou menos normal, porém adicionamos um parâmetro:
\nvalorPrevio -- que é o resultado da chamada anterior da função. Na primeira\nchamada da função, o valor de valorPrevio é inicial.Vejamos um exemplo simples: somar todos os elementos de uma array.
\narr = [1, 2, 3, 4, 5];\ninitial = 0;\nconst arrSum = arr.reduce((sum, current) => sum + current, initial);\nconsole.assert(arrSum === 15);\n\nAqui usamos a variante mais comum de reduce, que só utiliza os dois primeiros\nparâmetros.
Vejamos com mais detalhes o que está acontecendo:
\nsoma tem o valor de inicial (o segundo argumento de\nreduce), que é 0. E atual é o primeiro elemento da array, que é 1.\nEntão o resultado é 1.sum === 1, somamos o segundo elemento da array (2) e\ndevolvemos.sum === 3 e somamos ao terceiro elemento (3) ...E assim segue:
\n![\"image\"](\"https://user-images.githubusercontent.com/211721/40194646-c88004e4-59d0-11e8-8ba2-71e6afeef003.png\")
Se passarmos para uma tabela, onde cada fila representa uma chamada da função\nsobre o próximo elemento da array:
\n| |soma|atual|resultado|\n|----------------|------|-------|-----------|\n|primeira chamada| 0 | 1 | 1 |\n|segunda chamada | 1 | 2 | 3 |\n|terceira chamada| 3 | 3 | 6 |\n|quarta chamada | 6 | 4 | 10 |\n|quinta chamada | 10 | 5 | 15 |
Como podemos ver, o resultado da chamada anterior se converte no primeiro\nparâmetro da próxima chamada.
\nFinalizando, apenas vamos mencionar que reduceRight faz a mesma coisa, porém\ncomeçando pelo final da array.
Vejamos agora dois exemplos:
\nconst totalYears = inventors.reduce(\n (total, inventor) => total + (inventor.passed - inventor.year),\n 0,\n);\nconsole.assert(totalYears === 305);\n\nVamos mudar de base de dados.
\nconst transportationData = [\n 'car', 'car', 'truck', 'truck', 'bike', 'walk',\n 'car', 'van', 'bike', 'walk', 'car', 'van',\n 'car', 'truck',\n];\n\nconst transportReduceFn = (obj, item) => {\n const result = {\n ...obj,\n };\n /* si es la primera vez que encuentro este medio de transporte */\n if (!obj[item]) {\n result[item] = 0; /* inicializo en 0 */\n }\n result[item] += 1;\n return result;\n};\n\nlet transportation = transportationData.reduce(transportReduceFn, {});\nconsole.assert(equal(\n transportation,\n {\n car: 5, truck: 3, bike: 2, walk: 2, van: 2,\n },\n));\n\ntransportationData.push('pogostick');\ntransportation = transportationData.reduce(transportReduceFn, {});\nconsole.assert(equal(\n transportation,\n {\n car: 5, truck: 3, bike: 2, walk: 2, van: 2, pogostick: 1,\n },\n));\n\nNesta leitura vimos alguns exemplos de métodos de arrays que, uma vez que se\naprende a dominá-los, são super úteis.
\nJá vimos alguns dos métodos de uso mais comuns para arrays, porém\nArray.prototype nos fornece vários outros métodos úteis.
Para facilitar um pouco a vida, os dividimos da seguinte forma:
\npush, pop, shift, unshift, slice,\nsplice e concat.indexOf, lastIndexOf, includes,\nfind, findIndex e filter.map,reduce, sort, reverse, split e join.Agora focaremos nos quatro métodos que consideramos mais utilizados: filter,\nmap sort e reduce.
Para conhecer em detalhes cada um destes métodos, visite a documentação no\nMDN
\nVamos usar uma função para comparar arrays.
\nconst equal = (one, other) => JSON.stringify(one) === JSON.stringify(other);\n\nAbaixo segue um conjunto de dados que utilizaremos como exemplo para nossos\nexemplos :)
\nconst inventors = [\n {\n first: 'Ada',\n last: 'Lovelace',\n year: 1815,\n passed: 1852,\n },\n {\n first: 'Lise',\n last: 'Meitner',\n year: 1878,\n passed: 1968,\n },\n {\n first: 'Caroline',\n last: 'Herschel',\n year: 1750,\n passed: 1848,\n },\n {\n first: 'Hanna',\n last: 'Hammarström',\n year: 1829,\n passed: 1909,\n },\n];\n\nAgora que já temos o que precisamos, vamos começar.
\nArray.prototype.filterfilter nos permite obter um subconjunto dos elementos da array, desde que\ncumpram uma certa condição.
const deadBeforeSXX = inventors.filter(inventor => (inventor.passed < 1900));\nconsole.assert(\n equal(deadBeforeSXX, [\n {\n first: 'Ada',\n last: 'Lovelace',\n year: 1815,\n passed: 1852,\n },\n {\n first: 'Caroline',\n last: 'Herschel',\n year: 1750,\n passed: 1848,\n },\n ]),\n);\n\nA seguir o Dani explica mais a fundo como o método filter funciona:
Array.prototype.mapmap nos permite visitar cada um dos elementos da array, coletando neste\nprocesso um valor de retorno para cada elemento visitado.
Por exemplo, supondo que queremos uma lista de nomes e sobrenomes da nossa base\nde dados.
\nconst fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);\nconsole.assert(\n equal(fullNames, [\n 'Ada Lovelace',\n 'Lise Meitner',\n 'Caroline Herschel',\n 'Hanna Hammarström',\n ]),\n);\n\nOu quantos anos cada uma viveu.
\nconst yearAlive = inventors.map(({\n first, last, passed, year,\n}) => [`${first} ${last}`, passed - year]);\nconsole.assert(\n equal(yearAlive, [\n ['Ada Lovelace', 37],\n ['Lise Meitner', 90],\n ['Caroline Herschel', 98],\n ['Hanna Hammarström', 80],\n ]),\n);\n\nArray.prototype.sortOrdena a array in place (ou seja, dentro da própria array).
\nlet arr = [1, 2, 15];\narr.sort();\nconsole.assert(equal(arr, [1, 15, 2]));\n\nSe olhar bem, vai perceber que algo está estranho: por padrão, sort ordena a\narray convertendo todos os elementos em strings. Por isso 15 apareceu antes\nde 2.
Como resolvemos isso?
\nconst compareNumeric = (a, b) => {\n if (a > b) return 1;\n if (a === b) return 0;\n /* if (a < b) */\n return -1;\n};\narr = [1, 2, 15];\narr.sort(compareNumeric);\nconsole.assert(\n equal(arr, [1, 2, 15]),\n);\n\nVejamos alguns exemplos mais interessantes.
\nlet ordered = inventors.sort((a, b) => {\n if (a.year > b.year) {\n return 1;\n }\n return -1;\n});\nconsole.assert(equal(\n ordered,\n [\n {\n first: 'Caroline',\n last: 'Herschel',\n year: 1750,\n passed: 1848,\n },\n {\n first: 'Ada',\n last: 'Lovelace',\n year: 1815,\n passed: 1852,\n },\n {\n first: 'Hanna',\n last: 'Hammarström',\n year: 1829,\n passed: 1909,\n },\n {\n first: 'Lise',\n last: 'Meitner',\n year: 1878,\n passed: 1968,\n },\n ],\n));\n\nPoderíamos escrever a função de comparação usando um operador ternário, obtendo\no mesmo resultado.
\nordered = inventors.sort((a, b) => (a.year > b.year ? 1 : -1));\n\nconst moreYearsAlive = inventors.sort((a, b) => {\n const last = a.passed - a.year;\n const next = b.passed - b.year;\n return last > next ? -1 : 1;\n});\nconsole.assert(equal(\n moreYearsAlive,\n [\n {\n first: 'Caroline',\n last: 'Herschel',\n year: 1750,\n passed: 1848,\n },\n {\n first: 'Lise',\n last: 'Meitner',\n year: 1878,\n passed: 1968,\n },\n {\n first: 'Hanna',\n last: 'Hammarström',\n year: 1829,\n passed: 1909,\n },\n {\n first: 'Ada',\n last: 'Lovelace',\n year: 1815,\n passed: 1852,\n },\n ],\n));\n\nArray.prototype.reduceQuando queremos iterar uma array, usamos forEach. Agora, para fazer o mesmo,\nmas coletando uma lista de valores, com um valor de cada elemento, usamos map.
reduce é similar ao map, porém o utilizamos para iterar uma array e obter um\núnico valor que contenha um consolidado de todos os elementos.
Façamos o seguinte:
\nlet initial = 0;\nconst value = arr.reduce((previousValue, item, index, array) => {\n /* aqui tu codigo */\n}, initial);\n\nOnde
\nitem -- é o elemento atual que estamos iterando
index -- é o índice atual
array -- é a array atual
Até aqui tudo mais ou menos normal, porém adicionamos um parâmetro:
\nvalorPrevio -- que é o resultado da chamada anterior da função. Na primeira\nchamada da função, o valor de valorPrevio é inicial.Vejamos um exemplo simples: somar todos os elementos de uma array.
\narr = [1, 2, 3, 4, 5];\ninitial = 0;\nconst arrSum = arr.reduce((sum, current) => sum + current, initial);\nconsole.assert(arrSum === 15);\n\nAqui usamos a variante mais comum de reduce, que só utiliza os dois primeiros\nparâmetros.
Vejamos com mais detalhes o que está acontecendo:
\nsoma tem o valor de inicial (o segundo argumento de\nreduce), que é 0. E atual é o primeiro elemento da array, que é 1.\nEntão o resultado é 1.sum === 1, somamos o segundo elemento da array (2) e\ndevolvemos.sum === 3 e somamos ao terceiro elemento (3) ...E assim segue:
\n
Se passarmos para uma tabela, onde cada fila representa uma chamada da função\nsobre o próximo elemento da array:
\n| |soma|atual|resultado|\n|----------------|------|-------|-----------|\n|primeira chamada| 0 | 1 | 1 |\n|segunda chamada | 1 | 2 | 3 |\n|terceira chamada| 3 | 3 | 6 |\n|quarta chamada | 6 | 4 | 10 |\n|quinta chamada | 10 | 5 | 15 |
Como podemos ver, o resultado da chamada anterior se converte no primeiro\nparâmetro da próxima chamada.
\nFinalizando, apenas vamos mencionar que reduceRight faz a mesma coisa, porém\ncomeçando pelo final da array.
Vejamos agora dois exemplos:
\nconst totalYears = inventors.reduce(\n (total, inventor) => total + (inventor.passed - inventor.year),\n 0,\n);\nconsole.assert(totalYears === 305);\n\nVamos mudar de base de dados.
\nconst transportationData = [\n 'car', 'car', 'truck', 'truck', 'bike', 'walk',\n 'car', 'van', 'bike', 'walk', 'car', 'van',\n 'car', 'truck',\n];\n\nconst transportReduceFn = (obj, item) => {\n const result = {\n ...obj,\n };\n /* si es la primera vez que encuentro este medio de transporte */\n if (!obj[item]) {\n result[item] = 0; /* inicializo en 0 */\n }\n result[item] += 1;\n return result;\n};\n\nlet transportation = transportationData.reduce(transportReduceFn, {});\nconsole.assert(equal(\n transportation,\n {\n car: 5, truck: 3, bike: 2, walk: 2, van: 2,\n },\n));\n\ntransportationData.push('pogostick');\ntransportation = transportationData.reduce(transportReduceFn, {});\nconsole.assert(equal(\n transportation,\n {\n car: 5, truck: 3, bike: 2, walk: 2, van: 2, pogostick: 1,\n },\n));\n\nNesta leitura vimos alguns exemplos de métodos de arrays que, uma vez que se\naprende a dominá-los, são super úteis.
\nfunciones y arrays para la resolución de problemas.Al igual que hemos hecho antes, es hora de aplicar los conceptos aprendidos para\nresolver problemas.
\nA continuación tendrás varios problemas que debemos resolver. Intenta\nresolverlos primero por tu cuenta. Más abajo encontrarás las soluciones de\nLourdes, otra instructora estrella de Laboratoria. Después de haberlo intentado,\ncompara tus soluciones con las de Lourdes.
\nCrea una función que invierta el orden de los elementos de un array. Completa\neste reto de dos maneras: en una, el array invertido es un nuevo array;\nen la segunda, modifica el mismo array que se proporciona como argumento.\nInvestiga sobre el método reverse.\n¿Qué puedes concluir?
Crea una función que busque un elemento en un array, devolviendo su posición\n(index) e imprima el valor en la consola. Tip: utiliza el algoritmo de linear search. Con este ejercicio\nintroducimos el concepto de algoritmo. Para entender qué es un algoritmo,\nrevisa los siguientes videos:
A continuación, Lourdes te explica cómo resolvió cada uno de los ejercicios\nanteriores.
\n![\"Solution](\"https://img.youtube.com/vi/BgcnOdIrUdo/0.jpg\")
![\"Solution](\"https://img.youtube.com/vi/JjcDSIShTm0/0.jpg\")
funciones y arrays para la resolución de problemas.Al igual que hemos hecho antes, es hora de aplicar los conceptos aprendidos para\nresolver problemas.
\nA continuación tendrás varios problemas que debemos resolver. Intenta\nresolverlos primero por tu cuenta. Más abajo encontrarás las soluciones de\nLourdes, otra instructora estrella de Laboratoria. Después de haberlo intentado,\ncompara tus soluciones con las de Lourdes.
\nCrea una función que invierta el orden de los elementos de un array. Completa\neste reto de dos maneras: en una, el array invertido es un nuevo array;\nen la segunda, modifica el mismo array que se proporciona como argumento.\nInvestiga sobre el método reverse.\n¿Qué puedes concluir?
Crea una función que busque un elemento en un array, devolviendo su posición\n(index) e imprima el valor en la consola. Tip: utiliza el algoritmo de linear search. Con este ejercicio\nintroducimos el concepto de algoritmo. Para entender qué es un algoritmo,\nrevisa los siguientes videos:
A continuación, Lourdes te explica cómo resolvió cada uno de los ejercicios\nanteriores.
\nfunções e\narrays para a resolução de problemas.Como já fizemos anteriormente, agora é hora de aplicar os conceitos aprendidos\npara resolver problemas.
\nA seguir, você verá vários problemas a serem resolvidos. Tente resolvê-los\nprimeiro por conta própria. Mais abaixo, você encontrará as soluções da nossa\nequipe. Depois que você tentar, compare suas soluções a nossa.
\nCrie uma função que inverta a ordem dos elementos de um vetor (array).\nComplete este desafio de duas maneiras: em uma, o vetor invertido é um novo\nvetor; na segunda, modifique o mesmo array que é fornecido como argumento\n(in place). Pesquise o método\nreverse.\nO que você pode concluir?
Crie uma função que procure um elemento em um vetor, retorne sua posição\n(índice - index) e imprima o valor no console. Dica: use o algoritmo de\nbusca linear. Nesse exercício,\nintroduzimos o conceito de algoritmo. Para entender o que é um algoritmo,\nconfira os seguintes vídeos:
\nA seguir, Rafael lhe explicará como ele resolveu cada um dos exercícios\nanteriores.
\n![\"Solução](\"https://img.youtube.com/vi/ErS_iFp8eFc&t/0.jpg\")
![\"Solução](\"https://img.youtube.com/vi/AJCWkJgTCj0/0.jpg\")
funções e\narrays para a resolução de problemas.Como já fizemos anteriormente, agora é hora de aplicar os conceitos aprendidos\npara resolver problemas.
\nA seguir, você verá vários problemas a serem resolvidos. Tente resolvê-los\nprimeiro por conta própria. Mais abaixo, você encontrará as soluções da nossa\nequipe. Depois que você tentar, compare suas soluções a nossa.
\nCrie uma função que inverta a ordem dos elementos de um vetor (array).\nComplete este desafio de duas maneiras: em uma, o vetor invertido é um novo\nvetor; na segunda, modifique o mesmo array que é fornecido como argumento\n(in place). Pesquise o método\nreverse.\nO que você pode concluir?
Crie uma função que procure um elemento em um vetor, retorne sua posição\n(índice - index) e imprima o valor no console. Dica: use o algoritmo de\nbusca linear. Nesse exercício,\nintroduzimos o conceito de algoritmo. Para entender o que é um algoritmo,\nconfira os seguintes vídeos:
\n\nA seguir, Rafael lhe explicará como ele resolveu cada um dos exercícios\nanteriores.
\nobjects y para qué sirvenobjectarray y un objectEl texto a continuación se basa en gran medida, con ciertos ajustes, en el\ncapítulo 4 de Eloquent JavaScript,de Marijn\nHaverbeke, 2014. Traducción en Español\ndisponible gracias a hectorip, y del capítulo 3\nde JavaScript for kids,\nNick Morgan, 2015.
\nLos objects en JavaScript son muy similares a los arrays, pero con dos\nimportantes diferencias:
Como hemos visto, para acceder a información dentro de un array utilizamos\nun número correspondiente al index; es decir, la posición en la que se\nubica el valor. Los objects, por su parte, utilizan strings en lugar de\nnúmeros para acceder a los diferentes elementos. Estos strings se denominan\nkeys (llaves) o propiedades, y los elementos a los que apuntan son llamados\nvalores. Juntas, estas piezas de información se llaman pares key-value.
Dado que en los arrays se requiere del index para acceder a la\ninformación, es importante mantener un determinado orden de los valores. En\nel caso de los objects los pares key-value de información pueden estar en\ncualquier orden.
Mientras que los arrays se utilizan sobre todo para representar listas de\ncosas múltiples, los objetos son a menudo usado para representar cosas simples\npero con múltiples características, o atributos. Por ejemplo, si quisiéramos\nagrupar los títulos de nuestras películas preferidas, utilizaríamos un array,\nasí:
const favoriteMovies = [\n 'The Big Fish',\n 'The Lord of the Rings',\n 'The Empire Strikes Back',\n 'The Artist',\n 'The Godfather',\n 'Back to the Future',\n];\n\n¿Pero qué sucede si quisiéramos almacenar diferentes piezas de información sobre\nuna misma película? Aquí es donde entra la utilidad de un object.
Almacenemos diferentes piezas de información de la película Back to the Future\nen un solo lugar, por medio de un object:
let movie = {\n title: 'Back to the Future',\n director: 'Robert Zemeckis',\n stars: ['Michael J. Fox', 'Christopher Lloyd', 'Lea Thompson'],\n plot: 'Marty McFly, a 17-year-old high school student, ' +\n 'is accidentally sent 30 years into the past in a time-traveling DeLorean ' +\n 'invented by his close friend, the maverick scientist Doc Brown.',\n oscar: 1,\n tags: ['Adventure', 'Comedy', 'Sci-Fi'],\n};\n\nEn el ejemplo anterior hemos creado una variable llamada movie y le hemos\nasignado un objeto con 6 pares key-value. Para crear un objeto utilizamos las\nllaves {}, en lugar de los corchetes [] que usamos para crear arrays.\nDentro de las llaves colocamos los pares key-value separados por una coma.\nComo se muestra en el ejemplo, no necesitamos colocar una coma después del\núltimo par key-value.
La sintaxis de cada par key-value es la siguiente:
\n{ key : value }\nCuando se crea un object, el key va antes de los dos puntos :, y el\nvalue va después. Los dos puntos actúan un poco como un signo igual (=); es\ndecir, los valores de la derecha se asignan a los nombres de la izquierda, al\nigual que cuando se crean variables.
Como hemos visto, los keys son strings. Como muestra el ejemplo anterior, no\nes necesario colocar los keys entre comillas. Esto es porque Javascript sabe\nque los keys son strings. Sin embargo, es también válido colocar los keys\nentre comillas. Por ejemplo, el objeto a continuación también es válido:
const person = {\n age: 18,\n name: 'Michelle',\n friends: ['Alexandra', 'Ana'],\n};\n\nSi no colocamos las comillas, los keys deben seguir las mismas reglas de\nnombramiento de variables. Por ejemplo, no deben tener espacios. Pero si\ncolocamos los keys entre comillas, entonces sí podemos usar el nombre que\nqueramos. Por ejemplo, si queremos agregar un key del año en que salió la\npelícula ('year of release'), haríamos:
\nmovie = {\n title: 'Back to the Future',\n director: 'Robert Zemeckis',\n stars: ['Michael J. Fox', 'Christopher Lloyd', 'Lea Thompson'],\n plot: 'Marty McFly, a 17-year-old high school student, ' +\n 'is accidentally sent 30 years into the past in a time-traveling DeLorean ' +\n 'invented by his close friend, the maverick scientist Doc Brown.',\n oscar: 1,\n tags: ['Adventure', 'Comedy', 'Sci-Fi'],\n};\n\nEs importante resaltar que aunque los keys son siempre strings, los values\npueden ser cualquier valor JavaScript - inclusive pueden ser una variable que\ncontiene, o mejor dicho \"agarra\" (con sus tentáculos) un valor.
Podemos acceder a los valores de un object de dos maneras:
[], tal como lo hacemos para los\narrays. La única diferencia es que, en lugar de usar el index (un\nnumber), utilizamos el key (un string), siempre entre comillas..) con el nombre del key inmediatamente\ndespués, sin comillas. A esto se le llama dot notation. Al igual que en\nla declaración de los keys, si utilizamos dot notation, el key debe\nobligatoriamente cumplir con las reglas de nombres válidos (por ejemplo, no\ndeben contener espacios).Veamos algunos ejemplos para aclarar cuándo se usa una o la otra:
\nmovie = {\n title: 'Back to the Future',\n director: 'Robert Zemeckis',\n stars: ['Michael J. Fox', 'Christopher Lloyd', 'Lea Thompson'],\n};\n\nconsole.assert(movie['title'] === 'Back to the Future');\nconsole.assert(movie.title === movie['title']);\n\nlet error = false;\ntry {\n console.assert(movie[title] === 'Back to the Future');\n} catch (e) {\n error = e.message;\n}\nconsole.assert(error === 'title is not defined');\n\nconsole.assert(movie.'title' === 'Back to the Future');\n// → Uncaught SyntaxError: Unexpected string\nAnalicemos los dos errores:
\nUncaught ReferenceError: title is not defineddot notation con comillas, JavaScript nos devuleve un\nerror de sintaxis, dado que dot notation no se debe utilizar con un\nstring. Por eso nos devuelve: Uncaught SyntaxError: Unexpected string.¿Qué pasa cuando le pedimos un key que no tiene el object? JavaScript nos\ndevuelve undefined. Veamos un ejemplo:
movie = {\n title: 'Back to the Future',\n director: 'Robert Zemeckis',\n stars: ['Michael J. Fox', 'Christopher Lloyd', 'Lea Thompson'],\n plot: 'Marty McFly, a 17-year-old high school student, ' +\n 'is accidentally sent 30 years into the past in a time-traveling DeLorean ' +\n 'invented by his close friend, the maverick scientist Doc Brown.',\n oscar: 1,\n tags: ['Adventure', 'Comedy', 'Sci-Fi'],\n};\n\nconsole.assert(movie['producer'] === undefined);\n\n¿Y cómo hacemos para obtener uno de los actores (stars) de la película? Para\nesto tenemos que entrar a la key 'stars' del object movie, que nos va a\ndevolver un array y luego acceder a uno de los elementos del array a través\nde los corchetes [] y el index. Veamos un ejemplo:
movie = {\n title: 'Back to the Future',\n stars: ['Michael J. Fox', 'Christopher Lloyd', 'Lea Thompson'],\n};\n\nconsole.assert(movie.stars[0] === 'Michael J. Fox');\nconsole.assert(movie['stars'][1] === 'Christopher Lloyd');\nconsole.assert(movie.stars[2] === 'Lea Thompson');\n\nFíjate que hemos usado movie.stars y movie['stars'] para hacer énfasis de\nque ambas maneras funcionan, como parte de la experiencia educativa. Pero\ncuidado, esto no es una buena práctica. Solo lo hemos hecho por dar el\nejemplo. Cuando escribamos programas, sean los retos de código, nuestros\nejercicios de clase o en proyectos personales, lo correcto es escoger una opción\ny ser consistente a lo largo del código. Recomendamos, en particular,\nmovie.stars ya que es más corto y fácil de leer. Recuerda que lo mismo sucede\ncon las comillas de los strings, se pueden usar simples o dobles, pero de\nmanera consistente.
Al igual que con los arrays, podemos añadir o cambiar los elementos de un\nobject utilizando los corchetes y keys o dot notation.
Veamos un ejemplo que empieza con un object vacío y se le va añadiendo y\nmodificando elementos.
/* creando un object vacío */\nconst student = {};\n\n/* añadiendo elementos al object con corchetes y comillas */\nstudent['name'] = 'Carolina';\nstudent['points'] = 2500;\n\n/* añadiendo elementos al object con dot notation */\nstudent.courses = ['Intro a JS', 'Intro a UX'];\nstudent.isActive = true;\n\n/* resucitamos nuestra función comparadora */\n\nconst equal = (one, other) => JSON.stringify(one) === JSON.stringify(other);\n\nconsole.assert(equal(\n student,\n {\n name: 'Carolina',\n points: 2500,\n courses: ['Intro a JS', 'Intro a UX'],\n isActive: true,\n },\n));\n\n/* actualizando los puntos */\nstudent['points'] = 3500;\n\nconsole.assert(equal(\n student,\n {\n name: 'Carolina',\n points: 3500,\n courses: ['Intro a JS', 'Intro a UX'],\n isActive: true,\n },\n));\n\nA continuación Michelle nos explica los conceptos principales de objects con\nun ejemplo:
![\"ejemplo](\"https://img.youtube.com/vi/J6U0gDzWsUg/0.jpg\")
objects y para qué sirvenobjectarray y un objectEl texto a continuación se basa en gran medida, con ciertos ajustes, en el\ncapítulo 4 de Eloquent JavaScript,de Marijn\nHaverbeke, 2014. Traducción en Español\ndisponible gracias a hectorip, y del capítulo 3\nde JavaScript for kids,\nNick Morgan, 2015.
\nLos objects en JavaScript son muy similares a los arrays, pero con dos\nimportantes diferencias:
Como hemos visto, para acceder a información dentro de un array utilizamos\nun número correspondiente al index; es decir, la posición en la que se\nubica el valor. Los objects, por su parte, utilizan strings en lugar de\nnúmeros para acceder a los diferentes elementos. Estos strings se denominan\nkeys (llaves) o propiedades, y los elementos a los que apuntan son llamados\nvalores. Juntas, estas piezas de información se llaman pares key-value.
Dado que en los arrays se requiere del index para acceder a la\ninformación, es importante mantener un determinado orden de los valores. En\nel caso de los objects los pares key-value de información pueden estar en\ncualquier orden.
Mientras que los arrays se utilizan sobre todo para representar listas de\ncosas múltiples, los objetos son a menudo usado para representar cosas simples\npero con múltiples características, o atributos. Por ejemplo, si quisiéramos\nagrupar los títulos de nuestras películas preferidas, utilizaríamos un array,\nasí:
const favoriteMovies = [\n 'The Big Fish',\n 'The Lord of the Rings',\n 'The Empire Strikes Back',\n 'The Artist',\n 'The Godfather',\n 'Back to the Future',\n];\n\n¿Pero qué sucede si quisiéramos almacenar diferentes piezas de información sobre\nuna misma película? Aquí es donde entra la utilidad de un object.
Almacenemos diferentes piezas de información de la película Back to the Future\nen un solo lugar, por medio de un object:
let movie = {\n title: 'Back to the Future',\n director: 'Robert Zemeckis',\n stars: ['Michael J. Fox', 'Christopher Lloyd', 'Lea Thompson'],\n plot: 'Marty McFly, a 17-year-old high school student, ' +\n 'is accidentally sent 30 years into the past in a time-traveling DeLorean ' +\n 'invented by his close friend, the maverick scientist Doc Brown.',\n oscar: 1,\n tags: ['Adventure', 'Comedy', 'Sci-Fi'],\n};\n\nEn el ejemplo anterior hemos creado una variable llamada movie y le hemos\nasignado un objeto con 6 pares key-value. Para crear un objeto utilizamos las\nllaves {}, en lugar de los corchetes [] que usamos para crear arrays.\nDentro de las llaves colocamos los pares key-value separados por una coma.\nComo se muestra en el ejemplo, no necesitamos colocar una coma después del\núltimo par key-value.
La sintaxis de cada par key-value es la siguiente:
\n{ key : value }\nCuando se crea un object, el key va antes de los dos puntos :, y el\nvalue va después. Los dos puntos actúan un poco como un signo igual (=); es\ndecir, los valores de la derecha se asignan a los nombres de la izquierda, al\nigual que cuando se crean variables.
Como hemos visto, los keys son strings. Como muestra el ejemplo anterior, no\nes necesario colocar los keys entre comillas. Esto es porque Javascript sabe\nque los keys son strings. Sin embargo, es también válido colocar los keys\nentre comillas. Por ejemplo, el objeto a continuación también es válido:
const person = {\n age: 18,\n name: 'Michelle',\n friends: ['Alexandra', 'Ana'],\n};\n\nSi no colocamos las comillas, los keys deben seguir las mismas reglas de\nnombramiento de variables. Por ejemplo, no deben tener espacios. Pero si\ncolocamos los keys entre comillas, entonces sí podemos usar el nombre que\nqueramos. Por ejemplo, si queremos agregar un key del año en que salió la\npelícula ('year of release'), haríamos:
\nmovie = {\n title: 'Back to the Future',\n director: 'Robert Zemeckis',\n stars: ['Michael J. Fox', 'Christopher Lloyd', 'Lea Thompson'],\n plot: 'Marty McFly, a 17-year-old high school student, ' +\n 'is accidentally sent 30 years into the past in a time-traveling DeLorean ' +\n 'invented by his close friend, the maverick scientist Doc Brown.',\n oscar: 1,\n tags: ['Adventure', 'Comedy', 'Sci-Fi'],\n};\n\nEs importante resaltar que aunque los keys son siempre strings, los values\npueden ser cualquier valor JavaScript - inclusive pueden ser una variable que\ncontiene, o mejor dicho \"agarra\" (con sus tentáculos) un valor.
Podemos acceder a los valores de un object de dos maneras:
[], tal como lo hacemos para los\narrays. La única diferencia es que, en lugar de usar el index (un\nnumber), utilizamos el key (un string), siempre entre comillas..) con el nombre del key inmediatamente\ndespués, sin comillas. A esto se le llama dot notation. Al igual que en\nla declaración de los keys, si utilizamos dot notation, el key debe\nobligatoriamente cumplir con las reglas de nombres válidos (por ejemplo, no\ndeben contener espacios).Veamos algunos ejemplos para aclarar cuándo se usa una o la otra:
\nmovie = {\n title: 'Back to the Future',\n director: 'Robert Zemeckis',\n stars: ['Michael J. Fox', 'Christopher Lloyd', 'Lea Thompson'],\n};\n\nconsole.assert(movie['title'] === 'Back to the Future');\nconsole.assert(movie.title === movie['title']);\n\nlet error = false;\ntry {\n console.assert(movie[title] === 'Back to the Future');\n} catch (e) {\n error = e.message;\n}\nconsole.assert(error === 'title is not defined');\n\nconsole.assert(movie.'title' === 'Back to the Future');\n// → Uncaught SyntaxError: Unexpected string\nAnalicemos los dos errores:
\nUncaught ReferenceError: title is not defineddot notation con comillas, JavaScript nos devuleve un\nerror de sintaxis, dado que dot notation no se debe utilizar con un\nstring. Por eso nos devuelve: Uncaught SyntaxError: Unexpected string.¿Qué pasa cuando le pedimos un key que no tiene el object? JavaScript nos\ndevuelve undefined. Veamos un ejemplo:
movie = {\n title: 'Back to the Future',\n director: 'Robert Zemeckis',\n stars: ['Michael J. Fox', 'Christopher Lloyd', 'Lea Thompson'],\n plot: 'Marty McFly, a 17-year-old high school student, ' +\n 'is accidentally sent 30 years into the past in a time-traveling DeLorean ' +\n 'invented by his close friend, the maverick scientist Doc Brown.',\n oscar: 1,\n tags: ['Adventure', 'Comedy', 'Sci-Fi'],\n};\n\nconsole.assert(movie['producer'] === undefined);\n\n¿Y cómo hacemos para obtener uno de los actores (stars) de la película? Para\nesto tenemos que entrar a la key 'stars' del object movie, que nos va a\ndevolver un array y luego acceder a uno de los elementos del array a través\nde los corchetes [] y el index. Veamos un ejemplo:
movie = {\n title: 'Back to the Future',\n stars: ['Michael J. Fox', 'Christopher Lloyd', 'Lea Thompson'],\n};\n\nconsole.assert(movie.stars[0] === 'Michael J. Fox');\nconsole.assert(movie['stars'][1] === 'Christopher Lloyd');\nconsole.assert(movie.stars[2] === 'Lea Thompson');\n\nFíjate que hemos usado movie.stars y movie['stars'] para hacer énfasis de\nque ambas maneras funcionan, como parte de la experiencia educativa. Pero\ncuidado, esto no es una buena práctica. Solo lo hemos hecho por dar el\nejemplo. Cuando escribamos programas, sean los retos de código, nuestros\nejercicios de clase o en proyectos personales, lo correcto es escoger una opción\ny ser consistente a lo largo del código. Recomendamos, en particular,\nmovie.stars ya que es más corto y fácil de leer. Recuerda que lo mismo sucede\ncon las comillas de los strings, se pueden usar simples o dobles, pero de\nmanera consistente.
Al igual que con los arrays, podemos añadir o cambiar los elementos de un\nobject utilizando los corchetes y keys o dot notation.
Veamos un ejemplo que empieza con un object vacío y se le va añadiendo y\nmodificando elementos.
/* creando un object vacío */\nconst student = {};\n\n/* añadiendo elementos al object con corchetes y comillas */\nstudent['name'] = 'Carolina';\nstudent['points'] = 2500;\n\n/* añadiendo elementos al object con dot notation */\nstudent.courses = ['Intro a JS', 'Intro a UX'];\nstudent.isActive = true;\n\n/* resucitamos nuestra función comparadora */\n\nconst equal = (one, other) => JSON.stringify(one) === JSON.stringify(other);\n\nconsole.assert(equal(\n student,\n {\n name: 'Carolina',\n points: 2500,\n courses: ['Intro a JS', 'Intro a UX'],\n isActive: true,\n },\n));\n\n/* actualizando los puntos */\nstudent['points'] = 3500;\n\nconsole.assert(equal(\n student,\n {\n name: 'Carolina',\n points: 3500,\n courses: ['Intro a JS', 'Intro a UX'],\n isActive: true,\n },\n));\n\nA continuación Michelle nos explica los conceptos principales de objects con\nun ejemplo:
objects e para que servemobjectarray e umobjectO texto a seguir se baseia em grande medida, com alguns ajustes, ao capítulo 4\ndo Eloquent JavaScript,de Marijn Haverbeke,\n2014. Tradução em\nPortuguês,\ne ao capítulo 3 do JavaScript for\nkids,\nNick Morgan, 2015;
\nOs objetos em JavaScript são muito similares ao arrays, mas com alguns\ndiferenciais:
array, nós usamos um\nnúmero correspondente ao índice; isto é, a posição em que o valor está\nlocalizado. Os objects, por outro lado, utilizam stringsao invés de\nnúmeros para acessar os diferentes elementos. Essas strings são chamadas de\nchaves (keys) ou propriedades, e os elementos para os quais eles apontam\nsão chamados de valores (values). Juntas, essas informações são\nchamadas de pares de chave-valor.arrays é necessário o índice para acessar informações, é\nimportante manter uma determinada ordem de seus valores. No caso dos pares\nde chave-valor, as informações podem estar em qualquer ordem.Enquanto os arrays são usados principalmente para representar listas de\nvárias coisas, os objetos costumam ser usados para representar elementos\nsimples, mas com várias características ou atributos. Por exemplo, se\nquiséssemos agrupar os títulos dos nossos filmes favoritos, usaríamos um array\nassim:
let favoriteMovies = [\n 'The Big Fish',\n 'The Lord of the Rings',\n 'The Empire Strikes Back',\n 'The Artist',\n 'The Godfather',\n 'Back to the Future'\n];\nMas o que aconteceria se quiséssemos armazenar diferentes informações sobre o\nmesmo filme? É aí que entra a utilidade de um object.
Nós armazenamos diferentes informações sobre o filme De Volta para o Futuro em\num só lugar, por meio de umobject:
let movie = {\n title: 'Back to the Future',\n director: 'Robert Zemeckis',\n stars: ['Michael J. Fox', 'Christopher Lloyd', 'Lea Thompson'],\n plot: 'Marty McFly, a 17-year-old high school student, is accidentally sent 30 years into the past in a time-traveling DeLorean invented by his close friend, the maverick scientist Doc Brown.',\n oscar: 1,\n tags: ['Adventure', 'Comedy', 'Sci-Fi']\n};\nNo exemplo anterior, criamos uma variável chamada moviee atribuímos a ela um\nobjeto com seis pares de chave-valor. Para criar um objeto, usamos as chaves\n{} ao invés dos colchetes [] que usamos para criar arrays. Dentro das\nchaves, colocamos os pares de chave-valor separados por uma vírgula. Conforme\nmostrado no exemplo, não precisamos colocar uma vírgula após o último par de\nchave-valor.
A sintaxe de cada par de valores-chave é a seguinte:
\n{chave: valor}\nQuando criamos um object, a chave (key) é colocada antes dos dois pontos\n:, e o valor (value), depois. Os dois pontos agem um pouco como um sinal\nde igual ( =), isto é, os valores à direita são atribuídos aos nomes à\nesquerda, assim como quando variáveis são criadas.
Como vimos, as chaves são strings. Como mostra o exemplo anterior, não é\nnecessário colocar as chaves entre aspas. Isso ocorre porque o JavaScript sabe\nque as chaves são strings. No entanto, também é válido colocar as chaves entre\naspas. Por exemplo, o objeto abaixo também é válido:
const person = {\n 'age': 18,\n 'name': 'Michelle',\n 'friends': ['Alexandra','Ana']\n };\nSe não colocarmos as aspas, as chaves devem seguir as mesmas regras para nomear\nvariáveis. Por exemplo, elas não devem ter espaços. Mas se colocarmos as chaves\nentre aspas, podemos usar o nome que quisermos. Por exemplo, se quisermos\nadicionar uma chave do ano em que o filme saiu (\"ano de lançamento\"),\nfaríamos:
\nmovie = {\n title: 'Back to the Future',\n director: 'Robert Zemeckis',\n stars: ['Michael J. Fox', 'Christopher Lloyd', 'Lea Thompson'],\n 'year of release': 1984,\n plot: 'Marty McFly, a 17-year-old high school student, is accidentally sent 30 years into the past in a time-traveling DeLorean invented by his close friend, the maverick scientist Doc Brown.',\n oscar: 1,\n tags: ['Adventure', 'Comedy', 'Sci-Fi'],\n 'other awards': ['best sound']\n };\nÉ importante notar que, embora as keys sejam sempre strings, os values\npodem ser qualquer valor JavaScript - eles podem até ser uma variável que\ncontenha, ou melhor, \"agarre\" (com seus tentáculos) um valor.
Podemos acessar os valores de um objectde duas maneiras:
[], assim como fazemos com arrays. A única\ndiferença é que, em vez de usar o índice (um number), usamos a chave\n(uma string), sempre entre aspas..) com o nome da chave imediatamente depois,\nsem aspas. Isso é chamado notação de ponto (dot notation). Como na\ndeclaração das chaves, se usarmos notação de ponto, a chave deve obedecer às\nregras de nomes válidos (por exemplo, elas não devem conter espaços).Vamos ver alguns exemplos para esclarecer quando um ou outro é usado:
\nmovie = {\n title: 'Back to the Future',\n director: 'Robert Zemeckis',\n stars: ['Michael J. Fox', 'Christopher Lloyd', 'Lea Thompson'],\n};\n\nconsole.assert(movie['title'] === 'Back to the Future');\nconsole.assert(movie.title === movie['title']);\n\nlet error = false;\ntry {\n console.assert(movie[title] === 'Back to the Future');\n} catch (e) {\n error = e.message;\n}\nconsole.assert(error === 'title is not defined');\n\nconsole.assert(movie.'title' === 'Back to the Future');\n// → Uncaught SyntaxError: Unexpected string\nVamos analisar os dois erros:
\nUncaught ReferenceError: titulo is not defineddot notation com aspas, o JavaScript devolve um erro de\nsintaxe, uma vez que dot notationnão deve ser usada com string. Por isso,\ndevolve-nos: Uncaught SyntaxError: Unexpected string.O que acontece quando pedimos uma chave que o object não tem? JavaScript nos\nretorna undefined. Vamos ver um exemplo:
movie = {\n title: 'Back to the Future',\n director: 'Robert Zemeckis',\n stars: ['Michael J. Fox', 'Christopher Lloyd', 'Lea Thompson'],\n plot: 'Marty McFly, a 17-year-old high school student, ' +\n 'is accidentally sent 30 years into the past in a time-traveling DeLorean ' +\n 'invented by his close friend, the maverick scientist Doc Brown.',\n oscar: 1,\n tags: ['Adventure', 'Comedy', 'Sci-Fi'],\n};\n\nconsole.assert(movie['producer'] === undefined);\nE como conseguimos um dos atores (stars) do filme? Para isso, temos que\nacessar a chave 'stars' do objeto movie, que devolverá um array, para em\nseguida acessar um dos elementos através de colchetes [] e o índice. Vejamos\num exemplo:
movie = {\n title: 'Back to the Future',\n stars: ['Michael J. Fox', 'Christopher Lloyd', 'Lea Thompson'],\n};\n\nconsole.assert(movie.stars[0] === 'Michael J. Fox');\nconsole.assert(movie['stars'][1] === 'Christopher Lloyd');\nconsole.assert(movie.stars[2] === 'Lea Thompson');\nObserve que usamos movie.starse movie['stars']para enfatizar que as duas\nformas funcionam, por motivos didáticos. Mas tenha cuidado, isso não é uma\nboa prática. Nós só fizemos isso para dar o exemplo. Quando escrevemos\nprogramas, seja nos desafios de código, nossos exercícios de classe ou projetos\npessoais, a coisa certa a fazer é escolher uma opção e ser consistente em todo o\ncódigo. Recomendamos, em particular, movie.starsuma vez que é mais curto e\nmais fácil de ler. Lembre-se que a mesma coisa acontece com as aspas das\nstrings: você pode usar simples ou dupla, mas de forma consistente.
Assim como com arrays, podemos adicionar ou alterar os elementos de um\nobjectusando os colchetes e chaves ou notação de ponto.
Vamos ver um exemplo que começa com um objectvazio e segue adicionando e\nmodificando elementos.
/* criando um objeto vazio */\nconst student = {};\n\n/* adicionando elementos ao objeto */\nstudent['name'] = 'Carolina';\nstudent['points'] = 2500;\n\n/* adicionando elementos ao objeto */\nstudent.courses = ['Intro a JS', 'Intro a UX'];\nstudent.isActive = true;\n\n/* ressucitamos a nossa função comparadora */\n\nconst equal = (one, other) => JSON.stringify(one) === JSON.stringify(other);\n\nconsole.assert(equal(\n student,\n {\n name: 'Carolina',\n points: 2500,\n courses: ['Intro a JS', 'Intro a UX'],\n isActive: true,\n },\n));\n\n/* atualiando os pontos */\nstudent['points'] = 3500;\n\nconsole.assert(equal(\n student,\n {\n name: 'Carolina',\n points: 3500,\n courses: ['Intro a JS', 'Intro a UX'],\n isActive: true,\n },\n));\n\nA seguir Daniel nos explica os conceitos principais de objects com um\nexemplo:
![\"Arrays\"](\"https://img.youtube.com/vi/_P1kAhq7W38/0.jpg\")
objects e para que servemobjectarray e umobjectO texto a seguir se baseia em grande medida, com alguns ajustes, ao capítulo 4\ndo Eloquent JavaScript,de Marijn Haverbeke,\n2014. Tradução em\nPortuguês,\ne ao capítulo 3 do JavaScript for\nkids,\nNick Morgan, 2015;
\nOs objetos em JavaScript são muito similares ao arrays, mas com alguns\ndiferenciais:
array, nós usamos um\nnúmero correspondente ao índice; isto é, a posição em que o valor está\nlocalizado. Os objects, por outro lado, utilizam stringsao invés de\nnúmeros para acessar os diferentes elementos. Essas strings são chamadas de\nchaves (keys) ou propriedades, e os elementos para os quais eles apontam\nsão chamados de valores (values). Juntas, essas informações são\nchamadas de pares de chave-valor.arrays é necessário o índice para acessar informações, é\nimportante manter uma determinada ordem de seus valores. No caso dos pares\nde chave-valor, as informações podem estar em qualquer ordem.Enquanto os arrays são usados principalmente para representar listas de\nvárias coisas, os objetos costumam ser usados para representar elementos\nsimples, mas com várias características ou atributos. Por exemplo, se\nquiséssemos agrupar os títulos dos nossos filmes favoritos, usaríamos um array\nassim:
let favoriteMovies = [\n 'The Big Fish',\n 'The Lord of the Rings',\n 'The Empire Strikes Back',\n 'The Artist',\n 'The Godfather',\n 'Back to the Future'\n];\nMas o que aconteceria se quiséssemos armazenar diferentes informações sobre o\nmesmo filme? É aí que entra a utilidade de um object.
Nós armazenamos diferentes informações sobre o filme De Volta para o Futuro em\num só lugar, por meio de umobject:
let movie = {\n title: 'Back to the Future',\n director: 'Robert Zemeckis',\n stars: ['Michael J. Fox', 'Christopher Lloyd', 'Lea Thompson'],\n plot: 'Marty McFly, a 17-year-old high school student, is accidentally sent 30 years into the past in a time-traveling DeLorean invented by his close friend, the maverick scientist Doc Brown.',\n oscar: 1,\n tags: ['Adventure', 'Comedy', 'Sci-Fi']\n};\nNo exemplo anterior, criamos uma variável chamada moviee atribuímos a ela um\nobjeto com seis pares de chave-valor. Para criar um objeto, usamos as chaves\n{} ao invés dos colchetes [] que usamos para criar arrays. Dentro das\nchaves, colocamos os pares de chave-valor separados por uma vírgula. Conforme\nmostrado no exemplo, não precisamos colocar uma vírgula após o último par de\nchave-valor.
A sintaxe de cada par de valores-chave é a seguinte:
\n{chave: valor}\nQuando criamos um object, a chave (key) é colocada antes dos dois pontos\n:, e o valor (value), depois. Os dois pontos agem um pouco como um sinal\nde igual ( =), isto é, os valores à direita são atribuídos aos nomes à\nesquerda, assim como quando variáveis são criadas.
Como vimos, as chaves são strings. Como mostra o exemplo anterior, não é\nnecessário colocar as chaves entre aspas. Isso ocorre porque o JavaScript sabe\nque as chaves são strings. No entanto, também é válido colocar as chaves entre\naspas. Por exemplo, o objeto abaixo também é válido:
const person = {\n 'age': 18,\n 'name': 'Michelle',\n 'friends': ['Alexandra','Ana']\n };\nSe não colocarmos as aspas, as chaves devem seguir as mesmas regras para nomear\nvariáveis. Por exemplo, elas não devem ter espaços. Mas se colocarmos as chaves\nentre aspas, podemos usar o nome que quisermos. Por exemplo, se quisermos\nadicionar uma chave do ano em que o filme saiu (\"ano de lançamento\"),\nfaríamos:
\nmovie = {\n title: 'Back to the Future',\n director: 'Robert Zemeckis',\n stars: ['Michael J. Fox', 'Christopher Lloyd', 'Lea Thompson'],\n 'year of release': 1984,\n plot: 'Marty McFly, a 17-year-old high school student, is accidentally sent 30 years into the past in a time-traveling DeLorean invented by his close friend, the maverick scientist Doc Brown.',\n oscar: 1,\n tags: ['Adventure', 'Comedy', 'Sci-Fi'],\n 'other awards': ['best sound']\n };\nÉ importante notar que, embora as keys sejam sempre strings, os values\npodem ser qualquer valor JavaScript - eles podem até ser uma variável que\ncontenha, ou melhor, \"agarre\" (com seus tentáculos) um valor.
Podemos acessar os valores de um objectde duas maneiras:
[], assim como fazemos com arrays. A única\ndiferença é que, em vez de usar o índice (um number), usamos a chave\n(uma string), sempre entre aspas..) com o nome da chave imediatamente depois,\nsem aspas. Isso é chamado notação de ponto (dot notation). Como na\ndeclaração das chaves, se usarmos notação de ponto, a chave deve obedecer às\nregras de nomes válidos (por exemplo, elas não devem conter espaços).Vamos ver alguns exemplos para esclarecer quando um ou outro é usado:
\nmovie = {\n title: 'Back to the Future',\n director: 'Robert Zemeckis',\n stars: ['Michael J. Fox', 'Christopher Lloyd', 'Lea Thompson'],\n};\n\nconsole.assert(movie['title'] === 'Back to the Future');\nconsole.assert(movie.title === movie['title']);\n\nlet error = false;\ntry {\n console.assert(movie[title] === 'Back to the Future');\n} catch (e) {\n error = e.message;\n}\nconsole.assert(error === 'title is not defined');\n\nconsole.assert(movie.'title' === 'Back to the Future');\n// → Uncaught SyntaxError: Unexpected string\nVamos analisar os dois erros:
\nUncaught ReferenceError: titulo is not defineddot notation com aspas, o JavaScript devolve um erro de\nsintaxe, uma vez que dot notationnão deve ser usada com string. Por isso,\ndevolve-nos: Uncaught SyntaxError: Unexpected string.O que acontece quando pedimos uma chave que o object não tem? JavaScript nos\nretorna undefined. Vamos ver um exemplo:
movie = {\n title: 'Back to the Future',\n director: 'Robert Zemeckis',\n stars: ['Michael J. Fox', 'Christopher Lloyd', 'Lea Thompson'],\n plot: 'Marty McFly, a 17-year-old high school student, ' +\n 'is accidentally sent 30 years into the past in a time-traveling DeLorean ' +\n 'invented by his close friend, the maverick scientist Doc Brown.',\n oscar: 1,\n tags: ['Adventure', 'Comedy', 'Sci-Fi'],\n};\n\nconsole.assert(movie['producer'] === undefined);\nE como conseguimos um dos atores (stars) do filme? Para isso, temos que\nacessar a chave 'stars' do objeto movie, que devolverá um array, para em\nseguida acessar um dos elementos através de colchetes [] e o índice. Vejamos\num exemplo:
movie = {\n title: 'Back to the Future',\n stars: ['Michael J. Fox', 'Christopher Lloyd', 'Lea Thompson'],\n};\n\nconsole.assert(movie.stars[0] === 'Michael J. Fox');\nconsole.assert(movie['stars'][1] === 'Christopher Lloyd');\nconsole.assert(movie.stars[2] === 'Lea Thompson');\nObserve que usamos movie.starse movie['stars']para enfatizar que as duas\nformas funcionam, por motivos didáticos. Mas tenha cuidado, isso não é uma\nboa prática. Nós só fizemos isso para dar o exemplo. Quando escrevemos\nprogramas, seja nos desafios de código, nossos exercícios de classe ou projetos\npessoais, a coisa certa a fazer é escolher uma opção e ser consistente em todo o\ncódigo. Recomendamos, em particular, movie.starsuma vez que é mais curto e\nmais fácil de ler. Lembre-se que a mesma coisa acontece com as aspas das\nstrings: você pode usar simples ou dupla, mas de forma consistente.
Assim como com arrays, podemos adicionar ou alterar os elementos de um\nobjectusando os colchetes e chaves ou notação de ponto.
Vamos ver um exemplo que começa com um objectvazio e segue adicionando e\nmodificando elementos.
/* criando um objeto vazio */\nconst student = {};\n\n/* adicionando elementos ao objeto */\nstudent['name'] = 'Carolina';\nstudent['points'] = 2500;\n\n/* adicionando elementos ao objeto */\nstudent.courses = ['Intro a JS', 'Intro a UX'];\nstudent.isActive = true;\n\n/* ressucitamos a nossa função comparadora */\n\nconst equal = (one, other) => JSON.stringify(one) === JSON.stringify(other);\n\nconsole.assert(equal(\n student,\n {\n name: 'Carolina',\n points: 2500,\n courses: ['Intro a JS', 'Intro a UX'],\n isActive: true,\n },\n));\n\n/* atualiando os pontos */\nstudent['points'] = 3500;\n\nconsole.assert(equal(\n student,\n {\n name: 'Carolina',\n points: 3500,\n courses: ['Intro a JS', 'Intro a UX'],\n isActive: true,\n },\n));\n\nA seguir Daniel nos explica os conceitos principais de objects com um\nexemplo:
arrays y objectsEl texto a continuación se basa en gran medida, con ciertos ajustes, en 4 de\nJavaScript for kids,\nNick Morgan, 2015.
\nYa hemos visto el caso de tener un array como valor de una propiedad\ndentro de un object (por ejemplo, un array de los protagonistas de un\nobject movie), pero otra combinación bastante común para agrupar data es\ntener un array de objects.Veamos un ejemplo:
Imaginemos que tenemos data de 3 estudiantes de Laboratoria y queremos\nestructurarla en nuestro programa. Para cada estudiante, tenemos cierta data: su\nnombre, sus puntos, los cursos que ha completado y si la estudiante ha\nabandonado o sigue cursando el programa.
\nUna manera de estructurar esta data sería crear un object para cada estudiante\n, cada uno con su información, y luego un array que contenga los 3 objects.
Veamos:
\n\nconst michelle = {\n name: 'Michelle',\n points: 2000,\n isActive: true,\n courses: ['Intro JS', 'JS avanzado', 'JS master']\n};\n\nconst alexandra = {\n name: 'Alexandra',\n points: 4100,\n isActive: true,\n courses: ['Intro JS', 'Intro UX', 'UX master']\n};\n\nconst andrea = {\n name: 'Andrea',\n points: 800,\n isActive: false,\n courses: ['Intro JS', 'JS avanzado']\n};\n\nconst students = [michelle, alexandra, andrea];\n\nFíjate que para cada propiedad de los objects hemos utilizado un tipo de dato\ndiferente:
stringnumberboolean, donde true significa que está activa (es decir, estudiando)array.Qué lindo cuando ya vemos todo lo que hemos aprendido aplicado en un solo bloque\nde código, ¿no? :) Lo mejor de todo es que con esta estrutura podemos acceder a\nla data de manera sencilla.
\nA continuación Michelle te explica cómo utilizar funciones, estructuras repetitivas y estructuras condicionales para imprimir en la consola:
![\"video\"](\"https://img.youtube.com/vi/M4vXJ62IIlI/0.jpg\")
arrays y objectsEl texto a continuación se basa en gran medida, con ciertos ajustes, en 4 de\nJavaScript for kids,\nNick Morgan, 2015.
\nYa hemos visto el caso de tener un array como valor de una propiedad\ndentro de un object (por ejemplo, un array de los protagonistas de un\nobject movie), pero otra combinación bastante común para agrupar data es\ntener un array de objects.Veamos un ejemplo:
Imaginemos que tenemos data de 3 estudiantes de Laboratoria y queremos\nestructurarla en nuestro programa. Para cada estudiante, tenemos cierta data: su\nnombre, sus puntos, los cursos que ha completado y si la estudiante ha\nabandonado o sigue cursando el programa.
\nUna manera de estructurar esta data sería crear un object para cada estudiante\n, cada uno con su información, y luego un array que contenga los 3 objects.
Veamos:
\n\nconst michelle = {\n name: 'Michelle',\n points: 2000,\n isActive: true,\n courses: ['Intro JS', 'JS avanzado', 'JS master']\n};\n\nconst alexandra = {\n name: 'Alexandra',\n points: 4100,\n isActive: true,\n courses: ['Intro JS', 'Intro UX', 'UX master']\n};\n\nconst andrea = {\n name: 'Andrea',\n points: 800,\n isActive: false,\n courses: ['Intro JS', 'JS avanzado']\n};\n\nconst students = [michelle, alexandra, andrea];\n\nFíjate que para cada propiedad de los objects hemos utilizado un tipo de dato\ndiferente:
stringnumberboolean, donde true significa que está activa (es decir, estudiando)array.Qué lindo cuando ya vemos todo lo que hemos aprendido aplicado en un solo bloque\nde código, ¿no? :) Lo mejor de todo es que con esta estrutura podemos acceder a\nla data de manera sencilla.
\nA continuación Michelle te explica cómo utilizar funciones, estructuras repetitivas y estructuras condicionales para imprimir en la consola:
array e objectO texto abaixo é amplamente baseado, com alguns ajustes, em 4 de JavaScript for\nKids ,\nNick Morgan, 2015.
\nJá vimos o caso de ter um arraycomo valor de uma propriedade dentro de um\nobject (por exemplo, um array do elenco de um object movie), mas outra\ncombinação bem comum para agrupar dados é ter um array de objects. Vejamos\num exemplo:
Imagine que temos dados de 3 estudantes da Laboratoria e queremos estruturá-los\nem nosso programa. Para cada aluna, temos os dados: seu nome, sua pontuação, os\ncursos que ela completou e se a aluna deixou ou continua com o programa.
\nUma maneira de estruturar esses dados seria criar um object para cada aluna,\ncada um com suas informações e, em seguida, um array que contenha todos os\ntrês objects.
Vamos ver:
\n\nconst michelle = {\n name: 'Michelle',\n points: 2000,\n isActive: true,\n courses: ['Intro JS', 'JS avanzado', 'JS master']\n};\n\nconst alexandra = {\n name: 'Alexandra',\n points: 4100,\n isActive: true,\n courses: ['Intro JS', 'Intro UX', 'UX master']\n};\n\nconst andrea = {\n name: 'Andrea',\n points: 800,\n isActive: false,\n courses: ['Intro JS', 'JS avanzado']\n};\n\nconst students = [michelle, alexandra, andrea];\n\nObserve que, para cada propriedade dos objects, usamos um tipo diferente de\ndados:
stringnumberboolean, onde true quer dizer que ela está ativa (ou seja, estudando)array.Que legal quando vemos tudo o que aprendemos aplicado em um único bloco de\ncódigo, né? :) A melhor parte é que, com essa estrutura, podemos acessar os\ndados de maneira simples.
\nEm seguida, Daniel dirá como usar funções, estruturas de repetição e estruturas condicionais para imprimir no console:
![\"Vídeo](\"https://img.youtube.com/vi/mU8FjHZcE0Y/0.jpg\")
array e objectO texto abaixo é amplamente baseado, com alguns ajustes, em 4 de JavaScript for\nKids ,\nNick Morgan, 2015.
\nJá vimos o caso de ter um arraycomo valor de uma propriedade dentro de um\nobject (por exemplo, um array do elenco de um object movie), mas outra\ncombinação bem comum para agrupar dados é ter um array de objects. Vejamos\num exemplo:
Imagine que temos dados de 3 estudantes da Laboratoria e queremos estruturá-los\nem nosso programa. Para cada aluna, temos os dados: seu nome, sua pontuação, os\ncursos que ela completou e se a aluna deixou ou continua com o programa.
\nUma maneira de estruturar esses dados seria criar um object para cada aluna,\ncada um com suas informações e, em seguida, um array que contenha todos os\ntrês objects.
Vamos ver:
\n\nconst michelle = {\n name: 'Michelle',\n points: 2000,\n isActive: true,\n courses: ['Intro JS', 'JS avanzado', 'JS master']\n};\n\nconst alexandra = {\n name: 'Alexandra',\n points: 4100,\n isActive: true,\n courses: ['Intro JS', 'Intro UX', 'UX master']\n};\n\nconst andrea = {\n name: 'Andrea',\n points: 800,\n isActive: false,\n courses: ['Intro JS', 'JS avanzado']\n};\n\nconst students = [michelle, alexandra, andrea];\n\nObserve que, para cada propriedade dos objects, usamos um tipo diferente de\ndados:
stringnumberboolean, onde true quer dizer que ela está ativa (ou seja, estudando)array.Que legal quando vemos tudo o que aprendemos aplicado em um único bloco de\ncódigo, né? :) A melhor parte é que, com essa estrutura, podemos acessar os\ndados de maneira simples.
\nEm seguida, Daniel dirá como usar funções, estruturas de repetição e estruturas condicionais para imprimir no console:
funciones, arrays y objetos para la resolución de problemasAl igual que hemos hecho antes, es hora de aplicar los conceptos aprendidos para\nresolver problemas.
\nA continuación tendrás un problema que resolver. Intenta resolverlo primero por\ntu cuenta. Más abajo encontrarás la solución de Lourdes, otra instructora\nestrella de Laboratoria. Después de haberlo intentado, compara tus solución con\nla de Lourdes.
\nEscribe una función que tome un array 2D y devuelva un objeto con cada par de\nelementos en el array como un par key-value. Por ejemplo:
[['make', 'Ford'], ['model', 'Mustang'], ['year', 1964]]\n{\n make : 'Ford',\n model : 'Mustang',\n year : 1964\n}\nTambién escribe una función que haga lo contrario. Transforme los pares\nkey-value de un object en un array 2D.
A continuación, Lourdes te explica cómo resolvió el ejercicio:
\n![\"Solution](\"https://img.youtube.com/vi/41ZJrHO6BsE/0.jpg\")
funciones, arrays y objetos para la resolución de problemasAl igual que hemos hecho antes, es hora de aplicar los conceptos aprendidos para\nresolver problemas.
\nA continuación tendrás un problema que resolver. Intenta resolverlo primero por\ntu cuenta. Más abajo encontrarás la solución de Lourdes, otra instructora\nestrella de Laboratoria. Después de haberlo intentado, compara tus solución con\nla de Lourdes.
\nEscribe una función que tome un array 2D y devuelva un objeto con cada par de\nelementos en el array como un par key-value. Por ejemplo:
[['make', 'Ford'], ['model', 'Mustang'], ['year', 1964]]\n{\n make : 'Ford',\n model : 'Mustang',\n year : 1964\n}\nTambién escribe una función que haga lo contrario. Transforme los pares\nkey-value de un object en un array 2D.
A continuación, Lourdes te explica cómo resolvió el ejercicio:
\nfunções,\narrays e objetos para resolução de problemasComo já fizemos antes, é hora de aplicar os conceitos aprendidos para resolver\nproblemas.
\nEm seguida, você terá um problema para resolver. Tente resolvê-lo primeiro\nsozinha. Abaixo, você encontrará a solução de Lourdes, outra excelente\ninstrutora da Laboratoria. Depois de tentar resolvê-lo, compare sua solução com\na de Lourdes.
\nEscreva uma função que receba um array 2D (vetor) e retorne um objeto com\ncada par de elementos do array como um par chave-valor . Por exemplo:
[['make', 'Ford'], ['model', 'Mustang'], ['year', 1964]]\n{\n make : 'Ford',\n model : 'Mustang',\n year : 1964\n}\nEscreva também uma função que faça o contrário. Transforme os pares de\nkey-value de um object em um array 2D.
A seguir, Daniel explica como ele resolveu o exercício:
\n![\"Solução\nArrayToObject\"](\"https://img.youtube.com/vi/yQcNA41PMco/0.jpg\")
funções,\narrays e objetos para resolução de problemasComo já fizemos antes, é hora de aplicar os conceitos aprendidos para resolver\nproblemas.
\nEm seguida, você terá um problema para resolver. Tente resolvê-lo primeiro\nsozinha. Abaixo, você encontrará a solução de Lourdes, outra excelente\ninstrutora da Laboratoria. Depois de tentar resolvê-lo, compare sua solução com\na de Lourdes.
\nEscreva uma função que receba um array 2D (vetor) e retorne um objeto com\ncada par de elementos do array como um par chave-valor . Por exemplo:
[['make', 'Ford'], ['model', 'Mustang'], ['year', 1964]]\n{\n make : 'Ford',\n model : 'Mustang',\n year : 1964\n}\nEscreva também uma função que faça o contrário. Transforme os pares de\nkey-value de um object em um array 2D.
A seguir, Daniel explica como ele resolveu o exercício:
\nCuando hablamos de tests (pruebas), podríamos ponernos a pensar en\nherramientas de testing, como Mocha, Jest, Jasmine, ... o metodologías de\ndesarrollo como TDD o BDD. Todo esto puede ser super confuso. En esta unidad\ntrataremos de desmitificar un poco este tema empezando desde el principio. Para\nello pensemos en pruebas simplemente como el acto de ejecutar algo en la\ncomputadora y después comprobar que efectivamente ocurrió lo que esperábamos.
El test más sencillo posible:
\nconst a = 5;\nconsole.log(a);\nPodríamos decir que nuestro amigo console.log es la herramienta de testing más\nbásica de todas. Al imprimir un valor a la consola, lo podemos ver con nuestros\nojos y comprobar qué es ese valor (de una forma visual). Estamos probando (o\ncomprobando) que efectivamente la variable a tomó el valor 5, que era\nexactamente lo que esperábamos.
Este proceso nos permite ir viendo qué está ocurriendo en el código mientras lo\nescribimos. Usa console.log, y úsalo mucho. Pero obviamente tiene sus\nlimitaciones. En este caso dependemos de que una persona ejecute el comando, vea\nel output (salida) y en su cabeza haga la comprobación. Muy útil para uno\nmismo, pero no es automatizable ni escalable.
Por suerte, somos programadorxs, así que podemos escribir un poco de código (y/o\nusar código de otrxs) para atacar estos problemas :rocket:
\nPara seguir esta unidad, te recomendamos que crees una carpeta en algún lugar de\ntu computadora y vayas creando los archivos y codeando mientras avanzamos. Todo\nel código de esta lección lo puedes ejecutar con node.
Ahora imaginemos que queremos una función que dado un caracter, nos diga si es\nuna vocal o no (debería retornar true para las vocales y false para\ncualquier otro caracter). Antes de implementar la función podríamos plantear\nunos tests. Crea un archivo con el nombre isVowel.spec.js y escribe el\nsiguiente código:
// Archivo `isVowel.spec.js`:\n\nconst isVowel = require('./isVowel');\n\nconsole.log('debería devolver true para letra a');\nif (isVowel('a') === true) {\n console.log('✓ ok');\n} else {\n console.error('✗ fail');\n}\n\nconsole.log('debería devolver false para letra b');\nif (isVowel('b') === false) {\n console.log('✓ ok');\n} else {\n console.error('✗ fail');\n}\nEjecutemos nuestros tests con node en la línea de comando:
$ node ./isVowel.spec.js\nmodule.js:557\n throw err;\n ^\n\nError: Cannot find module './isVowel'\n at Function.Module._resolveFilename (module.js:555:15)\n at Function.Module._load (module.js:482:25)\n at Module.require (module.js:604:17)\n at require (internal/module.js:11:18)\n at Object.<anonymous> (/Users/lupo/work/laboratoria/curricula-js/05-deep-dive/03-testing/01-basics/files/isVowel.spec.js:1:79)\n at Module._compile (module.js:660:30)\n at Object.Module._extensions..js (module.js:671:10)\n at Module.load (module.js:573:32)\n at tryModuleLoad (module.js:513:12)\n at Function.Module._load (module.js:505:3)\nComo vemos recibimos un error: Error: Cannot find module './isVowel'. Los\nerrores pueden ser un poco crípticos al principio, y hay que aprender a\nleerlos. El mensaje de error en sí dice que no se pudo encontrar el módulo\n./isVowel, y debajo tenemos una serie de líneas con el\nstack trace,\nque nos muestra la pila de llamadas donde ocurrió el error. En este caso podemos\nver que se menciona nuestro script (/Users/lupo/work/laboratoria/curricula-js/05-deep-dive/03-testing/01-basics/files/isVowel.spec.js:1:79),\ny al final de la ruta al archivo vemos que aparecen dos números separados por\ndos puntos (:). Estos números nos dicen en qué línea y qué columna (posición\ndentro de la línea) está el código en cuestión. La línea 1 contiene\nrequire('./isVowel'), que es la responsable del error.
Esto es porque hemos tratado de importar un modulo del archivo ./isVowel.js en\nel mismo directorio que nuestro script con los tests, pero obviamente no existe,\nasí que creémoslo y declaremos una función con el nombre isVowel:
// Archivo `isVowel.js`\n\nconst isVowel = function (char) {\n // ...\n};\nSi volvemos a ejecutar los tests, ahora el output mostrado en la consola debería\nverse algo así:
\n$ node ./isVowel.spec.js\ndebería devolver true para letra a\n/Users/lupo/work/laboratoria/curricula-js/05-deep-dive/03-testing/01-basics/files/isVowel.spec.js:4\nif (isVowel('a') !== true) {\n ^\n\nTypeError: isVowel is not a function\n at Object.<anonymous> (/Users/lupo/work/laboratoria/curricula-js/05-deep-dive/03-testing/01-basics/files/isVowel.spec.js:6:5)\n at Module._compile (module.js:660:30)\n at Object.Module._extensions..js (module.js:671:10)\n at Module.load (module.js:573:32)\n at tryModuleLoad (module.js:513:12)\n at Function.Module._load (module.js:505:3)\n at Function.Module.runMain (module.js:701:10)\n at startup (bootstrap_node.js:194:16)\n at bootstrap_node.js:618:3\nEsto quiere decir que ahora sí se ha podido cargar el módulo (el error de antes\nya no aparece), pero ahora recibimos un nuevo error: TypeError: isVowel is not a function. Si nos fijamos en la línea justo abajo del mensaje de error, vemos\nque el error se produjo en el archivo isVowel.spec.js en la línea 6 y\ncolumna 5). Si nos fijamos en el código, veremos que línea 6 y columna 5\nes donde está isVowel('a'). En esta línea es la primera vez que invocamos la\nfunción isVowel, y parece que no es lo que esperábamos (una función, doh!).
El motivo por el que vemos este error es porque a pesar de que hemos creado el\narchivo isVowel.js y hemos declarado una función con el nombre isVowel, no\nla hemos exportado.
Más adelante veremos más detalles sobre como exportar usando tanto CommonJS\n(require, module, module.exports) como módulos de ES6 (import,\nexport). Por ahora no vamos a detenernos con estos detalles. Lo importante por\nahora es saber que estamos ejecutando nuestro código con node, con lo cual\nvamos a usar el sistema de módulos de node (CommonJS). Cuando usamos este\nsistema, podemos exportar cualquier valor asignándolo a la propiedad exports\ndel objeto global module (module.exports). Node.js se encarga de que el\nobjeto module exista en el ámbito global.
// Archivo `isVowel.js`\n\nconst isVowel = function (char) {\n // ...\n};\n\nmodule.exports = isVowel;\nEjecutemos los tests una vez más:
\n$ node ./isVowel.spec.js\ndebería devolver true para letra a\n✗ fail\ndebería devolver false para letra b\n✗ fail\nYay! Finalmente nuestro script de tests corre sin errores, pero vemos que la\nimplementación de isVowel() todavía no pasa ninguno de los dos tests que\nescribimos.
Ahora sí, implementamos la funcionalidad esperada en isVowel():
// Archivo `isVowel.js`\n\nconst isVowel = function (char) {\n return ['a', 'e', 'i', 'o', 'u'].indexOf(char) > -1;\n};\n\nmodule.exports = isVowel;\nY volvemos a ejecutar los tests una vez más:
\n$ node ./isVowel.spec.js\ndebería devolver true para letra a\n✓ ok\ndebería devolver false para letra b\n✓ ok\nCuando hablamos de tests (pruebas), podríamos ponernos a pensar en\nherramientas de testing, como Mocha, Jest, Jasmine, ... o metodologías de\ndesarrollo como TDD o BDD. Todo esto puede ser super confuso. En esta unidad\ntrataremos de desmitificar un poco este tema empezando desde el principio. Para\nello pensemos en pruebas simplemente como el acto de ejecutar algo en la\ncomputadora y después comprobar que efectivamente ocurrió lo que esperábamos.
El test más sencillo posible:
\nconst a = 5;\nconsole.log(a);\nPodríamos decir que nuestro amigo console.log es la herramienta de testing más\nbásica de todas. Al imprimir un valor a la consola, lo podemos ver con nuestros\nojos y comprobar qué es ese valor (de una forma visual). Estamos probando (o\ncomprobando) que efectivamente la variable a tomó el valor 5, que era\nexactamente lo que esperábamos.
Este proceso nos permite ir viendo qué está ocurriendo en el código mientras lo\nescribimos. Usa console.log, y úsalo mucho. Pero obviamente tiene sus\nlimitaciones. En este caso dependemos de que una persona ejecute el comando, vea\nel output (salida) y en su cabeza haga la comprobación. Muy útil para uno\nmismo, pero no es automatizable ni escalable.
Por suerte, somos programadorxs, así que podemos escribir un poco de código (y/o\nusar código de otrxs) para atacar estos problemas :rocket:
\nPara seguir esta unidad, te recomendamos que crees una carpeta en algún lugar de\ntu computadora y vayas creando los archivos y codeando mientras avanzamos. Todo\nel código de esta lección lo puedes ejecutar con node.
Ahora imaginemos que queremos una función que dado un caracter, nos diga si es\nuna vocal o no (debería retornar true para las vocales y false para\ncualquier otro caracter). Antes de implementar la función podríamos plantear\nunos tests. Crea un archivo con el nombre isVowel.spec.js y escribe el\nsiguiente código:
// Archivo `isVowel.spec.js`:\n\nconst isVowel = require('./isVowel');\n\nconsole.log('debería devolver true para letra a');\nif (isVowel('a') === true) {\n console.log('✓ ok');\n} else {\n console.error('✗ fail');\n}\n\nconsole.log('debería devolver false para letra b');\nif (isVowel('b') === false) {\n console.log('✓ ok');\n} else {\n console.error('✗ fail');\n}\nEjecutemos nuestros tests con node en la línea de comando:
$ node ./isVowel.spec.js\nmodule.js:557\n throw err;\n ^\n\nError: Cannot find module './isVowel'\n at Function.Module._resolveFilename (module.js:555:15)\n at Function.Module._load (module.js:482:25)\n at Module.require (module.js:604:17)\n at require (internal/module.js:11:18)\n at Object.<anonymous> (/Users/lupo/work/laboratoria/curricula-js/05-deep-dive/03-testing/01-basics/files/isVowel.spec.js:1:79)\n at Module._compile (module.js:660:30)\n at Object.Module._extensions..js (module.js:671:10)\n at Module.load (module.js:573:32)\n at tryModuleLoad (module.js:513:12)\n at Function.Module._load (module.js:505:3)\nComo vemos recibimos un error: Error: Cannot find module './isVowel'. Los\nerrores pueden ser un poco crípticos al principio, y hay que aprender a\nleerlos. El mensaje de error en sí dice que no se pudo encontrar el módulo\n./isVowel, y debajo tenemos una serie de líneas con el\nstack trace,\nque nos muestra la pila de llamadas donde ocurrió el error. En este caso podemos\nver que se menciona nuestro script (/Users/lupo/work/laboratoria/curricula-js/05-deep-dive/03-testing/01-basics/files/isVowel.spec.js:1:79),\ny al final de la ruta al archivo vemos que aparecen dos números separados por\ndos puntos (:). Estos números nos dicen en qué línea y qué columna (posición\ndentro de la línea) está el código en cuestión. La línea 1 contiene\nrequire('./isVowel'), que es la responsable del error.
Esto es porque hemos tratado de importar un modulo del archivo ./isVowel.js en\nel mismo directorio que nuestro script con los tests, pero obviamente no existe,\nasí que creémoslo y declaremos una función con el nombre isVowel:
// Archivo `isVowel.js`\n\nconst isVowel = function (char) {\n // ...\n};\nSi volvemos a ejecutar los tests, ahora el output mostrado en la consola debería\nverse algo así:
\n$ node ./isVowel.spec.js\ndebería devolver true para letra a\n/Users/lupo/work/laboratoria/curricula-js/05-deep-dive/03-testing/01-basics/files/isVowel.spec.js:4\nif (isVowel('a') !== true) {\n ^\n\nTypeError: isVowel is not a function\n at Object.<anonymous> (/Users/lupo/work/laboratoria/curricula-js/05-deep-dive/03-testing/01-basics/files/isVowel.spec.js:6:5)\n at Module._compile (module.js:660:30)\n at Object.Module._extensions..js (module.js:671:10)\n at Module.load (module.js:573:32)\n at tryModuleLoad (module.js:513:12)\n at Function.Module._load (module.js:505:3)\n at Function.Module.runMain (module.js:701:10)\n at startup (bootstrap_node.js:194:16)\n at bootstrap_node.js:618:3\nEsto quiere decir que ahora sí se ha podido cargar el módulo (el error de antes\nya no aparece), pero ahora recibimos un nuevo error: TypeError: isVowel is not a function. Si nos fijamos en la línea justo abajo del mensaje de error, vemos\nque el error se produjo en el archivo isVowel.spec.js en la línea 6 y\ncolumna 5). Si nos fijamos en el código, veremos que línea 6 y columna 5\nes donde está isVowel('a'). En esta línea es la primera vez que invocamos la\nfunción isVowel, y parece que no es lo que esperábamos (una función, doh!).
El motivo por el que vemos este error es porque a pesar de que hemos creado el\narchivo isVowel.js y hemos declarado una función con el nombre isVowel, no\nla hemos exportado.
Más adelante veremos más detalles sobre como exportar usando tanto CommonJS\n(require, module, module.exports) como módulos de ES6 (import,\nexport). Por ahora no vamos a detenernos con estos detalles. Lo importante por\nahora es saber que estamos ejecutando nuestro código con node, con lo cual\nvamos a usar el sistema de módulos de node (CommonJS). Cuando usamos este\nsistema, podemos exportar cualquier valor asignándolo a la propiedad exports\ndel objeto global module (module.exports). Node.js se encarga de que el\nobjeto module exista en el ámbito global.
// Archivo `isVowel.js`\n\nconst isVowel = function (char) {\n // ...\n};\n\nmodule.exports = isVowel;\nEjecutemos los tests una vez más:
\n$ node ./isVowel.spec.js\ndebería devolver true para letra a\n✗ fail\ndebería devolver false para letra b\n✗ fail\nYay! Finalmente nuestro script de tests corre sin errores, pero vemos que la\nimplementación de isVowel() todavía no pasa ninguno de los dos tests que\nescribimos.
Ahora sí, implementamos la funcionalidad esperada en isVowel():
// Archivo `isVowel.js`\n\nconst isVowel = function (char) {\n return ['a', 'e', 'i', 'o', 'u'].indexOf(char) > -1;\n};\n\nmodule.exports = isVowel;\nY volvemos a ejecutar los tests una vez más:
\n$ node ./isVowel.spec.js\ndebería devolver true para letra a\n✓ ok\ndebería devolver false para letra b\n✓ ok\n![\"video\"](\"https://user-images.githubusercontent.com/12631491/223459795-f51091b0-4fda-4bdc-baad-520a66d041c4.png\")
![\"video\"](\"https://user-images.githubusercontent.com/12631491/223459911-847f24eb-26b6-4cbd-9421-259c41d86de9.png\")
![\"video\"](\"https://user-images.githubusercontent.com/12631491/223460131-568bbbd7-80ef-4814-a605-7fb93bb577af.png\")
![\"video\"](\"https://user-images.githubusercontent.com/12631491/223460583-fac68825-5f98-43f4-a068-ecfcef17dd14.png\")
![\"video\"](\"https://user-images.githubusercontent.com/12631491/223460683-74465513-ab93-46c5-b9d2-5f372bf2865d.png\")
También te compartimos los siguientes recursos adicionales por si te interesa\nprofundizar sobre el tema.
\nTambién te compartimos los siguientes recursos adicionales por si te interesa\nprofundizar sobre el tema.
\n![\"Paradigmas](\"https://embedwistia-a.akamaihd.net/deliveries/96a1ed02f6e5165d6d7d76ad22b7c9b359630123.jpg?image_play_button_size=2x&image_crop_resized=960x540&image_play_button=1&image_play_button_color=f7b617e0\")
Los Paradigmas de Programación (Programming Paradigms) son formas\ndiferentes de pensar en cómo se organiza un programa basado en una serie de\nprincipios, los cuales resultan en estilos muy distintos y lenguajes muy\ndiversos.
\nConsideremos la siguiente función:
\nfunction sum(array) {\n let total = 0;\n for (let i = 0; i < array.length; i++) {\n total += array[i];\n }\n return total;\n}\nLa función sum(array) recibe un array de números y retorna la suma de todos\nlos elementos del array. Para llevar a cabo la suma, usamos la variable total,\nla cual vamos a ir actualizando (mutando) mientras vamos recorriendo el arreglo\ncon un bucle (for en este caso). Estas características son típicas del estilo\nimperativo.
Ahora, podemos implementar exactamente la misma funcionalidad usando un enfoque\ncompletamente distinto.
\nfunction sum(array) {\n if (!array.length) {\n return 0;\n }\n return array[0] + sum(array.slice(1));\n};\nEn esta segunda implementación, la función sum(array) sigue teniendo la misma\ninterfaz (recibe los mismos argumentos y retorna lo mismo), pero claramente\npodemos ver que la lógica se expresa de una manera muy diferente. En la versión\nrecursiva hemos reemplazado el bucle for por recursión, y además podemos ver\nque no hay asignación ni mutación de variables, el \"cómputo\" se hace por\naplicación de argumentos a funciones. Este tipo de características son propias\ndel paradigma funcional.
PRO TIP:
\nHaciendo uso de ES2015 podemos refactorizar la versión funcional de sum de\nesta manera:
const sum = array => !array.length ? 0 : array[0] + sum(array.slice(1));\nCuando hablamos de Paradigmas de Programación inevitablemente tenemos que\nhablar de lenguajes de programación. Algunos lenguajes, como JavaScript, son\nmulti-paradigma, lo que quiere decir que nos permiten programar en diferentes\nparadigmas, mientras que otros se enfocan específicamente en uno.
\nJavaScript es un leguage híbrido, por decirlo de alguna forma, y contiene\nelementos propios de lenguajes funcionales (por ejemplo funciones como objetos\nde primera clase, lambdas, ...) pero no estamos limitados al paradigma\nfuncional. JavaScript nos permite programar de forma funcional, orientado a\nobjetos, orientado a eventos, por procedimientos, ...
\nTambién veremos que los \"paradigmas\" son \"estilos\" de programación que no son\nnecesariamente exclusivos. De hecho, algunos son complementarios o evoluciones\nde paradigmas más antiguos o con un nivel de abstracción más bajo. Así, la\nprogramación procedural y orientada a objetos, por ejemplo, ambas son\nimperativas, ya que comparten una raíz común.
\nBlog posts:
\nVideos:
\n10:43, Computerphile,\n30 Aug 20138:27, Computerphile,\nJun 28 20165:15, José Dimas Luján Castillo, video2brain,\n8 Mar 2017Otros recursos:
\n
Los Paradigmas de Programación (Programming Paradigms) son formas\ndiferentes de pensar en cómo se organiza un programa basado en una serie de\nprincipios, los cuales resultan en estilos muy distintos y lenguajes muy\ndiversos.
\nConsideremos la siguiente función:
\nfunction sum(array) {\n let total = 0;\n for (let i = 0; i < array.length; i++) {\n total += array[i];\n }\n return total;\n}\nLa función sum(array) recibe un array de números y retorna la suma de todos\nlos elementos del array. Para llevar a cabo la suma, usamos la variable total,\nla cual vamos a ir actualizando (mutando) mientras vamos recorriendo el arreglo\ncon un bucle (for en este caso). Estas características son típicas del estilo\nimperativo.
Ahora, podemos implementar exactamente la misma funcionalidad usando un enfoque\ncompletamente distinto.
\nfunction sum(array) {\n if (!array.length) {\n return 0;\n }\n return array[0] + sum(array.slice(1));\n};\nEn esta segunda implementación, la función sum(array) sigue teniendo la misma\ninterfaz (recibe los mismos argumentos y retorna lo mismo), pero claramente\npodemos ver que la lógica se expresa de una manera muy diferente. En la versión\nrecursiva hemos reemplazado el bucle for por recursión, y además podemos ver\nque no hay asignación ni mutación de variables, el \"cómputo\" se hace por\naplicación de argumentos a funciones. Este tipo de características son propias\ndel paradigma funcional.
PRO TIP:
\nHaciendo uso de ES2015 podemos refactorizar la versión funcional de sum de\nesta manera:
const sum = array => !array.length ? 0 : array[0] + sum(array.slice(1));\nCuando hablamos de Paradigmas de Programación inevitablemente tenemos que\nhablar de lenguajes de programación. Algunos lenguajes, como JavaScript, son\nmulti-paradigma, lo que quiere decir que nos permiten programar en diferentes\nparadigmas, mientras que otros se enfocan específicamente en uno.
\nJavaScript es un leguage híbrido, por decirlo de alguna forma, y contiene\nelementos propios de lenguajes funcionales (por ejemplo funciones como objetos\nde primera clase, lambdas, ...) pero no estamos limitados al paradigma\nfuncional. JavaScript nos permite programar de forma funcional, orientado a\nobjetos, orientado a eventos, por procedimientos, ...
\nTambién veremos que los \"paradigmas\" son \"estilos\" de programación que no son\nnecesariamente exclusivos. De hecho, algunos son complementarios o evoluciones\nde paradigmas más antiguos o con un nivel de abstracción más bajo. Así, la\nprogramación procedural y orientada a objetos, por ejemplo, ambas son\nimperativas, ya que comparten una raíz común.
\nBlog posts:
\nVideos:
\n10:43, Computerphile,\n30 Aug 20138:27, Computerphile,\nJun 28 20165:15, José Dimas Luján Castillo, video2brain,\n8 Mar 2017Otros recursos:
\n![\"Paradigmas](\"https://embedwistia-a.akamaihd.net/deliveries/9e9d7f42e688950f919c2ea4b08fbe4a6f6b93ea.jpg?image_play_button_size=2x&image_crop_resized=960x540&image_play_button=1&image_play_button_color=f7b617e0\")
Hemos mencionado que los primeros lenguajes de programación eran imperativos, y\nque se centraban en el \"cómo\" más que en el \"qué\". Como contrapartida, el estilo\ndeclarativo se caracteriza por lo contrario, enfocarse más en \"qué\" queremos\nhacer, desde el punto de vista de un ser humano, en vez de cómo lo debe ejecutar\nla computadora. Por ende, cuanto más declarativo, más alejado del hardware.
\nAlgunos paradigmas son más imperativos y otros más declarativos. Por ejemplo,\nla programación orientada a procedimientos, o la programación orientada objetos,\nvan a tener un caracter imperativo, mientras que la programación funcional tiene\nun caracter mucho más declarativo.
\nImáginemos que tenemos la siguiente data en un array de objetos:
\nconst array = [\n {id: 'uno', name: 'el primero'},\n {id: 'dos', name: 'el segundo'},\n {name: 'no tengo id'},\n];\nA partir de esta data, ahora nos piden extraer los id de cada un de los\nobjetos y amacenarlos en un nuevo arreglo (ids). Si nos planteamos el\nproblema desde un enfoque imperativo, podríamos implementar una solución así:
const ids = [];\n\nfor (let i = 0; i < array.length; i++) {\n if (array[i].id) {\n ids.push(array[i].id);\n }\n}\n\nconsole.log(ids); // ['uno', 'dos']\nEn el código anterior, probablemente puedas identificar claramente el estilo\nimperativo. Las variables como \"contadores\" y \"acumuladores\", son típicos del\nestilo imperativo. En este estilo el principal mecanismo de cómputo se lleva a\ncabo a través de la asignación de valores en variables. Veremos así uso de\nvariables globales y mutación de los valores asignados a variables a través del\ntiempo.
\nJavaScript nos ofrece utilidades para afrontar este tipo problemas desde el\nenfoque funcional. Así, los arrays (gracias a Array.prototype) tienen una\nserie de métodos para manipular su data a través de \"higher order functions\",\nque en este caso son funciones que aceptan otra función como argumento, como por\nejemplo Array.prototype.filter o Array.prototype.map. Veamos cómo podemos\nusar estas herramientas para implementar la misma lógica:
const ids = array\n .filter(item => typeof item.id === 'string')\n .map(item => item.id);\n\nconsole.log(ids); // ['uno', 'dos']\nEn esta nueva versión hacemos lo siguiente:
\nArray#filter para crear un nuevo arreglo sólo con aquellos elementos\nque tengan un id que sea un string (typeof item.id === 'string').Array#map para transformar cada elemento del arreglo y crear un\nnuevo arreglo con los resultados.De esta forma los detalles de la iteración quedan escondidos detrás de\nArray#filter y Array#map, haciendo nuestro código más declarativo.
También podemos ver cómo \"encadenamos\" (method chaining) las invocaciones de\nfilter y map ya que ambas retornan un array, que a su vez tiene todos los\nmétodos de Array.prototype.
El estilo declarativo depende de que el lenguaje (o librerías) nos ofrezcan este\ntipo de herramientas o abstracciones con las que poder expresar nuestra lógica\nsin preocuparnos tanto sobre los detalles de implementación.
\nPara terminar esta sección, cabe mencionar que HTML es un lenguaje declarativo!\nMuchos se quejarían diciendo que HTML no es un lenguaje de programación, sino un\nlenguaje de marcado (markup language). Pero podemos considerear a HTML como un\nlenguaje declarativo muy restringido, no de uso general, donde sólo podemos\ncrear un árbol de nodos a partir de una estructura de etiquetas (tags) con una\nsintáxis y semántica predefinida. Es declarativo en el sentido de que no le\nestamos diciendo a la computadora cómo convertir nuestro código en\ninstrucciones, sino que describimos de formal declarativa lo que queremos que\nocurra (el compilador o intérprete se encarga del resto).
\nVideos:
\n8:27, Computerphile,\nJun 28 2016Otros recursos:
\n" + "body": "
Hemos mencionado que los primeros lenguajes de programación eran imperativos, y\nque se centraban en el \"cómo\" más que en el \"qué\". Como contrapartida, el estilo\ndeclarativo se caracteriza por lo contrario, enfocarse más en \"qué\" queremos\nhacer, desde el punto de vista de un ser humano, en vez de cómo lo debe ejecutar\nla computadora. Por ende, cuanto más declarativo, más alejado del hardware.
\nAlgunos paradigmas son más imperativos y otros más declarativos. Por ejemplo,\nla programación orientada a procedimientos, o la programación orientada objetos,\nvan a tener un caracter imperativo, mientras que la programación funcional tiene\nun caracter mucho más declarativo.
\nImáginemos que tenemos la siguiente data en un array de objetos:
\nconst array = [\n {id: 'uno', name: 'el primero'},\n {id: 'dos', name: 'el segundo'},\n {name: 'no tengo id'},\n];\nA partir de esta data, ahora nos piden extraer los id de cada un de los\nobjetos y amacenarlos en un nuevo arreglo (ids). Si nos planteamos el\nproblema desde un enfoque imperativo, podríamos implementar una solución así:
const ids = [];\n\nfor (let i = 0; i < array.length; i++) {\n if (array[i].id) {\n ids.push(array[i].id);\n }\n}\n\nconsole.log(ids); // ['uno', 'dos']\nEn el código anterior, probablemente puedas identificar claramente el estilo\nimperativo. Las variables como \"contadores\" y \"acumuladores\", son típicos del\nestilo imperativo. En este estilo el principal mecanismo de cómputo se lleva a\ncabo a través de la asignación de valores en variables. Veremos así uso de\nvariables globales y mutación de los valores asignados a variables a través del\ntiempo.
\nJavaScript nos ofrece utilidades para afrontar este tipo problemas desde el\nenfoque funcional. Así, los arrays (gracias a Array.prototype) tienen una\nserie de métodos para manipular su data a través de \"higher order functions\",\nque en este caso son funciones que aceptan otra función como argumento, como por\nejemplo Array.prototype.filter o Array.prototype.map. Veamos cómo podemos\nusar estas herramientas para implementar la misma lógica:
const ids = array\n .filter(item => typeof item.id === 'string')\n .map(item => item.id);\n\nconsole.log(ids); // ['uno', 'dos']\nEn esta nueva versión hacemos lo siguiente:
\nArray#filter para crear un nuevo arreglo sólo con aquellos elementos\nque tengan un id que sea un string (typeof item.id === 'string').Array#map para transformar cada elemento del arreglo y crear un\nnuevo arreglo con los resultados.De esta forma los detalles de la iteración quedan escondidos detrás de\nArray#filter y Array#map, haciendo nuestro código más declarativo.
También podemos ver cómo \"encadenamos\" (method chaining) las invocaciones de\nfilter y map ya que ambas retornan un array, que a su vez tiene todos los\nmétodos de Array.prototype.
El estilo declarativo depende de que el lenguaje (o librerías) nos ofrezcan este\ntipo de herramientas o abstracciones con las que poder expresar nuestra lógica\nsin preocuparnos tanto sobre los detalles de implementación.
\nPara terminar esta sección, cabe mencionar que HTML es un lenguaje declarativo!\nMuchos se quejarían diciendo que HTML no es un lenguaje de programación, sino un\nlenguaje de marcado (markup language). Pero podemos considerear a HTML como un\nlenguaje declarativo muy restringido, no de uso general, donde sólo podemos\ncrear un árbol de nodos a partir de una estructura de etiquetas (tags) con una\nsintáxis y semántica predefinida. Es declarativo en el sentido de que no le\nestamos diciendo a la computadora cómo convertir nuestro código en\ninstrucciones, sino que describimos de formal declarativa lo que queremos que\nocurra (el compilador o intérprete se encarga del resto).
\nVideos:
\n8:27, Computerphile,\nJun 28 2016Otros recursos:
\n" } } }, @@ -88,7 +88,7 @@ "slug": "print-primes", "prefix": "01", "path": "topics/paradigms/01-paradigms/04-imperative-exercise/01-print-primes", - "createdAt": "2023-04-04T20:28:39.926Z", + "createdAt": "2023-05-17T20:37:26.463Z", "env": "cjs", "intl": { "es": { @@ -144,7 +144,7 @@ "slug": "get-primes", "prefix": "01", "path": "topics/paradigms/01-paradigms/07-procedural-exercise/01-get-primes", - "createdAt": "2023-04-04T20:28:39.926Z", + "createdAt": "2023-05-17T20:37:26.463Z", "env": "cjs", "intl": { "es": { @@ -188,7 +188,7 @@ "slug": "notes", "prefix": "01", "path": "topics/paradigms/01-paradigms/09-oop-exercise/01-notes", - "createdAt": "2023-04-04T20:28:39.926Z", + "createdAt": "2023-05-17T20:37:26.463Z", "env": "cjs", "intl": { "es": { @@ -232,7 +232,7 @@ "slug": "notes", "prefix": "01", "path": "topics/paradigms/01-paradigms/11-fp-exercise/01-notes", - "createdAt": "2023-04-04T20:28:39.926Z", + "createdAt": "2023-05-17T20:37:26.464Z", "env": "cjs", "intl": { "es": { @@ -303,7 +303,7 @@ "intl": { "es": { "title": "Object.create()", - "body": "![\"Paradigmas](\"https://embedwistia-a.akamaihd.net/deliveries/276361587ebe2506d327117feaee304949c0601f.jpg?image_play_button_size=2x&image_crop_resized=960x540&image_play_button=1&image_play_button_color=f7b617e0\")
En JavaScript todo objeto tiene un \"prototipo\", aunque no lo especifiquemos.\nCuando creamos un objeto literal, el prototipo del objeto por defecto es\nObject.prototype.
console.log(Object.prototype.isPrototypeOf({})); // true\nconsole.log({} instanceof Object); // true\nEn la lección anterior vimos como podemos usar constructores para crear\nobjetos con un prototipo determinado. Cuando usamos un constructor los objetos\nnuevos tendrán como prototipo la propiedad prototype del constructor.
function Robot(name) {\n this.name = name;\n}\n\nRobot.prototype.say = function () {\n console.log('Hi! I\\'m ' + this.name + '!');\n};\n\nconst ada = new Robot('ada');\nada.say(); // Hi! I'm ada!\n\nconsole.log(ada instanceof Robot); // true\nconsole.log(Robot.prototype.isPrototypeOf(ada)); // true\nLos constructores son comunes porque se parecen a las \"clases\" que hay en otros\nlenguajes, pero no son la única manera de crear objetos con un prototipo\ndeterminado. Hay una manera más simple y más natural para el modelo prototipal:\nObject.create().
// otra manera de asignar el prototipo: `Object.create()`\nconst robot = {\n say: function () {\n console.log('Hi! I\\'m ' + this.name + '!');\n }\n};\n\nconst johnny = Object.create(robot);\njohnny.name = 'johnny';\njohnny.say(); // Hi! I'm johnny!\n\nconst betty = Object.create(robot);\nbetty.name = 'betty';\nbetty.say(); // Hi! I'm betty!\n\nconsole.log(robot.isPrototypeOf(johnny)); // true\nconsole.log(robot.isPrototypeOf(betty)); // true\nJavaScript implementa \"herencia\" a través de prototipos, lo que quiere decir que\nno heredamos de una clase, sino de un objeto. Así que podemos concentrarnos en\nlos prototipos sin necesidad de un constructor, new y Function#prototype.
A diferencia de los constructores, cuando usamos directamente Object.create no\ntenemos dónde escribir lógica de inicialización. Para solventar esto podríamos\nrefactorizar el constructor anterior en una función que explícitamente crea un\nnuevo objeto usando Object.create() y le asigna la propiedad name.
function createRobot(name) {\n const obj = Object.create(robot);\n obj.name = name;\n return obj;\n}\nComo alternativa, una convención común cuando necesitamos lógica de constructor\nes añadir un método init que se encargue de inicializar el objeto:
const robot = {\n init: function (name) {\n this.name = name;\n },\n say: function () {\n console.log('Hi! I\\'m ' + this.name + '!');\n }\n};\nPRO TIP:
\nSi nuestro métodod init retorna una referencia a this, podemos encadenar las\ninvocaciones:
const robot = {\n init: function (name) {\n this.name = name;\n return this;\n },\n say: function () {\n console.log('Hi! I\\'m ' + this.name + '!');\n }\n};\n\nconst johnny = Object.create(robot).init('johnny');\nPor ahora hemos invocado Object.create() con un solo argumento: el prototipo\nque queremos que tenga el nuevo objeto. Pero Object.create() nos ofrece la\nposibilidad de pasar un segundo argumento: un objeto cuyas propiedades serán\nagregadas al objeto recién creado, con los nombres de propiedad\ncorrespondientes. Estas propiedades corresponden al segundo argumento de\nObject.defineProperties.
function createRobot(name) {\n return Object.create(robot, {\n name: {\n value: name,\n enumerable: true\n }\n });\n}\n\nconst grace = createRobot('grace');\ngrace.say(); // Hi! I'm grace!\nconsole.log(grace); // { name: 'grace' }\nBONUS FACT:
\nObject.create() fue originalmente implementada y popularizada por Douglas\nCrockford, el abuelito gruñón\ndel JavaScript, con la intención de aclarar los malos entendidos que generan los\nconstructores, que parecen clases pero no lo son, y en cambio se centra en los\nprototipos. Hoy en día Object.create() ya es parte del lenguaje en sí.
Videos:
\n19:19, funfunfunction,\n22 ago. 2016Otros recursos:
\n" + "body": "
En JavaScript todo objeto tiene un \"prototipo\", aunque no lo especifiquemos.\nCuando creamos un objeto literal, el prototipo del objeto por defecto es\nObject.prototype.
console.log(Object.prototype.isPrototypeOf({})); // true\nconsole.log({} instanceof Object); // true\nEn la lección anterior vimos como podemos usar constructores para crear\nobjetos con un prototipo determinado. Cuando usamos un constructor los objetos\nnuevos tendrán como prototipo la propiedad prototype del constructor.
function Robot(name) {\n this.name = name;\n}\n\nRobot.prototype.say = function () {\n console.log('Hi! I\\'m ' + this.name + '!');\n};\n\nconst ada = new Robot('ada');\nada.say(); // Hi! I'm ada!\n\nconsole.log(ada instanceof Robot); // true\nconsole.log(Robot.prototype.isPrototypeOf(ada)); // true\nLos constructores son comunes porque se parecen a las \"clases\" que hay en otros\nlenguajes, pero no son la única manera de crear objetos con un prototipo\ndeterminado. Hay una manera más simple y más natural para el modelo prototipal:\nObject.create().
// otra manera de asignar el prototipo: `Object.create()`\nconst robot = {\n say: function () {\n console.log('Hi! I\\'m ' + this.name + '!');\n }\n};\n\nconst johnny = Object.create(robot);\njohnny.name = 'johnny';\njohnny.say(); // Hi! I'm johnny!\n\nconst betty = Object.create(robot);\nbetty.name = 'betty';\nbetty.say(); // Hi! I'm betty!\n\nconsole.log(robot.isPrototypeOf(johnny)); // true\nconsole.log(robot.isPrototypeOf(betty)); // true\nJavaScript implementa \"herencia\" a través de prototipos, lo que quiere decir que\nno heredamos de una clase, sino de un objeto. Así que podemos concentrarnos en\nlos prototipos sin necesidad de un constructor, new y Function#prototype.
A diferencia de los constructores, cuando usamos directamente Object.create no\ntenemos dónde escribir lógica de inicialización. Para solventar esto podríamos\nrefactorizar el constructor anterior en una función que explícitamente crea un\nnuevo objeto usando Object.create() y le asigna la propiedad name.
function createRobot(name) {\n const obj = Object.create(robot);\n obj.name = name;\n return obj;\n}\nComo alternativa, una convención común cuando necesitamos lógica de constructor\nes añadir un método init que se encargue de inicializar el objeto:
const robot = {\n init: function (name) {\n this.name = name;\n },\n say: function () {\n console.log('Hi! I\\'m ' + this.name + '!');\n }\n};\nPRO TIP:
\nSi nuestro métodod init retorna una referencia a this, podemos encadenar las\ninvocaciones:
const robot = {\n init: function (name) {\n this.name = name;\n return this;\n },\n say: function () {\n console.log('Hi! I\\'m ' + this.name + '!');\n }\n};\n\nconst johnny = Object.create(robot).init('johnny');\nPor ahora hemos invocado Object.create() con un solo argumento: el prototipo\nque queremos que tenga el nuevo objeto. Pero Object.create() nos ofrece la\nposibilidad de pasar un segundo argumento: un objeto cuyas propiedades serán\nagregadas al objeto recién creado, con los nombres de propiedad\ncorrespondientes. Estas propiedades corresponden al segundo argumento de\nObject.defineProperties.
function createRobot(name) {\n return Object.create(robot, {\n name: {\n value: name,\n enumerable: true\n }\n });\n}\n\nconst grace = createRobot('grace');\ngrace.say(); // Hi! I'm grace!\nconsole.log(grace); // { name: 'grace' }\nBONUS FACT:
\nObject.create() fue originalmente implementada y popularizada por Douglas\nCrockford, el abuelito gruñón\ndel JavaScript, con la intención de aclarar los malos entendidos que generan los\nconstructores, que parecen clases pero no lo son, y en cambio se centra en los\nprototipos. Hoy en día Object.create() ya es parte del lenguaje en sí.
Videos:
\n19:19, funfunfunction,\n22 ago. 2016Otros recursos:
\n" } } }, @@ -315,7 +315,7 @@ "intl": { "es": { "title": "Herencia prototipal", - "body": "![\"Paradigmas](\"https://embedwistia-a.akamaihd.net/deliveries/14abe4ad4d31440501e622abd03b433d842aed94.jpg?image_play_button_size=2x&image_crop_resized=960x540&image_play_button=1&image_play_button_color=f7b617e0\")
Hasta ahora nos hemos concetrado en el concepto de prototipo y cómo crear\nobjetos con un prototipo determinado. También hemos mencionado el concepto\nde cadena de prototipos y cómo JavaScript \"resuleve\" (busca) las propiedades\nde un objeto empezando por aquellas definidas directamente sobre la instacia,\ndespués el prototipo, de ahí el prototipo del prototipo y así sucesivamente.
\nTambién hemos hablado de cómo el concepto de \"herencia\" y las \"jerarquías de\nherencia\" son fundamentales en la programación orientada a objetos. Ahora es la\nhora de ver cómo usamos lo que hemos aprendido de prototipos y Object.create\npara implementar una jerarquía de herencia, donde un objeto hereda de otro\nobjeto que a su vez hereda de otro.
Para heredar de un objeto existente, podemos crear un nuevo constructor y\na su prototipo asignarle un objeto que tenga como prototipo el prototipo del\nconstructor que queremos \"extender\". Para crear ese objeto que podamos usar como\nprototipo del nuevo constructor vamos a usar Object.create(), que nos permite\ncrear un nuevo objeto especificando su prototipo.
Continuando con el ejemplo de la lección anterior, implementemos un nuevo tipo\nde nota que herede de Note.
//\n// Note (constructor base que vamos a extender, copiado de la lección anterior)\n//\nfunction Note(text) {\n this.text = text || '';\n this.createdAt = new Date();\n this.completed = false;\n}\n\nNote.prototype.toString = function () {\n let str = '[' + (this.completed ? 'X' : ' ') + ']';\n str += ' | ' + this.createdAt.toDateString();\n str += ' | ' + this.text;\n return str;\n};\n\n//\n// ImageNote (constructor que hereda de Note)\n//\nfunction ImageNote(url) {\n this.url = url;\n}\n\n// Heredamos de `Note.prototype`\nImageNote.prototype = Object.create(Note.prototype);\n\nconsole.log(new ImageNote('http://foo.com/bar.png'));\n// Note { url: 'http://foo.com/bar.png' }\nHemos creado un constructor ImageNote, y antes de fijarnos en el cuerpo del\nconstructor veamos primero el mecanismo de herencia. A ImageNote.prototype le\nasignamos un objeto nuevo que tiene Note.prototype como prototipo usando\nObject.create().
Nuestra implementación de ImageNote todavía está incompleta, pero ya podemos\nver cómo hemos preparado el escenario para que herede de Note.prototype. En el\ncaso de Note, habíamos asignado propiedades a Note.prototype, pero no\nhabíamos asignado el objeto Note.prototype en sí. Ahora en ImageNote hacemos\nalgo muy distinto: usamos Object.create() para crear un nuevo objeto que tenga\ncomo prototipo Note.prototype, y éste nuevo objeto lo asignamos a\nImageNote.prototype. Lo que estamos haciendo es construir una cadena de\nprototipos. Los objetos creados con new ImageNote() tendrán como prototipo un\nobjeto que a su vez tiene Note.prototype como prototipo. Esto puede sonar\nbastante confuso al principio. Tómate tu tiempo para entender lo que está\npasando.
Hemos dicho que nuestra implementación no está completa. Si nos fijamos en el\nconstructor Note vemos que inicializa el nuevo objeto con tres propiedades:\ntext, createdAt y completed. Podríamos \"duplicar\" la lógica dentro del\nconstructor ImageNote, pero si estamos usando herencia, es precisamente para\npoder reusar código y evitar repetición!
Antes hemos visto como podemos usar bind para definir de forma explícita el\nvalor de this. Ahora veamos cómo otro método de las funciones nos permite\n\"invocar\" una función asignando this a lo que queramos.
function ImageNote(url) {\n this.url = url;\n Note.call(this, 'an image note');\n}\n\n// Heredamos de `Note.prototype`\nImageNote.prototype = Object.create(Note.prototype);\n\nconsole.log(new ImageNote('http://foo.com/bar.png'));\nEn la consola deberías ver algo así:
\nNote {\n url: 'http://foo.com/bar.png',\n text: 'an image note',\n createdAt: 2017-06-22T15:05:21.013Z,\n completed: false }\nDentro de nuestro constructor ImageNote hemos añadido una invocación al\nconstructor Note. De esa forma podemos reusar la lógica del constructor\nNote, y para asegurarnos de que Note opera sobre el this de la nueva nota\ncreada con ImageNote usamos call(). Function.prototype.call es muy\nparecida a Function.prototype.bind, pero en vez de retornar una función con\nel contexto fijado, lo que hace es invocar la función con el contexto deseado.
También podemos ver, al hacer console.log, que el objeto aparece como de\n\"tipo\" Note y no ImageNote. Eso es porque el prototipo de una función guarda\nuna referencia a su constructor en una propiedad llamada constructor. Al\nreemplazar el prototipo de ImageNote con el objeto creado con Object.create,\nla propiedad constructor ahora resuleve al constructor de Note. Podemos\ncorregir esto explícitamente asignando ImageNote.prototype.constructor:
function ImageNote(url) {\n this.url = url;\n Note.call(this, 'an image note');\n}\n\n// Heredamos de `Note.prototype`\nImageNote.prototype = Object.create(Note.prototype);\n// Asignamos constructor al nuevo prototipo\nImageNote.prototype.constructor = ImageNote;\n\nconsole.log(new ImageNote('http://foo.com/bar.png'));\nEn la consola deberías ver algo así:
\nImageNote {\n url: 'http://foo.com/bar.png',\n text: 'an image note',\n createdAt: 2017-06-22T15:12:40.163Z,\n completed: false }\nYay! Ya tenemos un constructor que hereda de Note! Ahora vamos a modificar la\nfuncionalidad del método Note#toString para que se adapte a ImageNote y nos\nmuestre la url de la imagen:
function ImageNote(url) {\n this.url = url;\n Note.call(this, 'an image note');\n}\n\n// Heredamos de `Note.prototype`\nImageNote.prototype = Object.create(Note.prototype);\nImageNote.prototype.constructor = ImageNote;\n\n// Sobreescribimos el método `toString` para instancias de `ImageNote`\nImageNote.prototype.toString = function () {\n return Note.prototype.toString.call(this) + ' | ' + this.url;\n};\nHemos declarado un nuevo método toString sobre el prototipo de ImageNote, y\nen la implementación de ese método estamos reusando Note.prototype.toString,\nhaciendo uso de Function#call otra vez ;-)
Ahora instanciemos nuestro objeto y veamos como se comporta:
\nconst imageNote = new ImageNote('http://foo.bar/baz.jpg');\n\nconsole.log(imageNote);\nconsole.log(imageNote.toString());\n// [ ] | Thu Jun 22 2017 | an image note | http://foo.bar/baz.jpg\n\nconsole.log(note instanceof ImageNote); // false\nconsole.log(imageNote instanceof Note); // true\nconsole.log(imageNote instanceof ImageNote); // true\n\nconsole.log(Note.prototype.isPrototypeOf(imageNote)); // true\nconsole.log(ImageNote.prototype.isPrototypeOf(note)); // false\nconsole.log(ImageNote.prototype.isPrototypeOf(imageNote)); // true\nCapítulos de libros:
\n\nBlog posts:
\nVideos:
\n8:52, Justin Meyer, Frontend Mastersaprox. 3h, funfunfunction,\n201611:55, funfunfunction,\n25 Jan 201619:19, funfunfunction,\n22 ago. 2016Otros recursos:
\n
Hasta ahora nos hemos concetrado en el concepto de prototipo y cómo crear\nobjetos con un prototipo determinado. También hemos mencionado el concepto\nde cadena de prototipos y cómo JavaScript \"resuleve\" (busca) las propiedades\nde un objeto empezando por aquellas definidas directamente sobre la instacia,\ndespués el prototipo, de ahí el prototipo del prototipo y así sucesivamente.
\nTambién hemos hablado de cómo el concepto de \"herencia\" y las \"jerarquías de\nherencia\" son fundamentales en la programación orientada a objetos. Ahora es la\nhora de ver cómo usamos lo que hemos aprendido de prototipos y Object.create\npara implementar una jerarquía de herencia, donde un objeto hereda de otro\nobjeto que a su vez hereda de otro.
Para heredar de un objeto existente, podemos crear un nuevo constructor y\na su prototipo asignarle un objeto que tenga como prototipo el prototipo del\nconstructor que queremos \"extender\". Para crear ese objeto que podamos usar como\nprototipo del nuevo constructor vamos a usar Object.create(), que nos permite\ncrear un nuevo objeto especificando su prototipo.
Continuando con el ejemplo de la lección anterior, implementemos un nuevo tipo\nde nota que herede de Note.
//\n// Note (constructor base que vamos a extender, copiado de la lección anterior)\n//\nfunction Note(text) {\n this.text = text || '';\n this.createdAt = new Date();\n this.completed = false;\n}\n\nNote.prototype.toString = function () {\n let str = '[' + (this.completed ? 'X' : ' ') + ']';\n str += ' | ' + this.createdAt.toDateString();\n str += ' | ' + this.text;\n return str;\n};\n\n//\n// ImageNote (constructor que hereda de Note)\n//\nfunction ImageNote(url) {\n this.url = url;\n}\n\n// Heredamos de `Note.prototype`\nImageNote.prototype = Object.create(Note.prototype);\n\nconsole.log(new ImageNote('http://foo.com/bar.png'));\n// Note { url: 'http://foo.com/bar.png' }\nHemos creado un constructor ImageNote, y antes de fijarnos en el cuerpo del\nconstructor veamos primero el mecanismo de herencia. A ImageNote.prototype le\nasignamos un objeto nuevo que tiene Note.prototype como prototipo usando\nObject.create().
Nuestra implementación de ImageNote todavía está incompleta, pero ya podemos\nver cómo hemos preparado el escenario para que herede de Note.prototype. En el\ncaso de Note, habíamos asignado propiedades a Note.prototype, pero no\nhabíamos asignado el objeto Note.prototype en sí. Ahora en ImageNote hacemos\nalgo muy distinto: usamos Object.create() para crear un nuevo objeto que tenga\ncomo prototipo Note.prototype, y éste nuevo objeto lo asignamos a\nImageNote.prototype. Lo que estamos haciendo es construir una cadena de\nprototipos. Los objetos creados con new ImageNote() tendrán como prototipo un\nobjeto que a su vez tiene Note.prototype como prototipo. Esto puede sonar\nbastante confuso al principio. Tómate tu tiempo para entender lo que está\npasando.
Hemos dicho que nuestra implementación no está completa. Si nos fijamos en el\nconstructor Note vemos que inicializa el nuevo objeto con tres propiedades:\ntext, createdAt y completed. Podríamos \"duplicar\" la lógica dentro del\nconstructor ImageNote, pero si estamos usando herencia, es precisamente para\npoder reusar código y evitar repetición!
Antes hemos visto como podemos usar bind para definir de forma explícita el\nvalor de this. Ahora veamos cómo otro método de las funciones nos permite\n\"invocar\" una función asignando this a lo que queramos.
function ImageNote(url) {\n this.url = url;\n Note.call(this, 'an image note');\n}\n\n// Heredamos de `Note.prototype`\nImageNote.prototype = Object.create(Note.prototype);\n\nconsole.log(new ImageNote('http://foo.com/bar.png'));\nEn la consola deberías ver algo así:
\nNote {\n url: 'http://foo.com/bar.png',\n text: 'an image note',\n createdAt: 2017-06-22T15:05:21.013Z,\n completed: false }\nDentro de nuestro constructor ImageNote hemos añadido una invocación al\nconstructor Note. De esa forma podemos reusar la lógica del constructor\nNote, y para asegurarnos de que Note opera sobre el this de la nueva nota\ncreada con ImageNote usamos call(). Function.prototype.call es muy\nparecida a Function.prototype.bind, pero en vez de retornar una función con\nel contexto fijado, lo que hace es invocar la función con el contexto deseado.
También podemos ver, al hacer console.log, que el objeto aparece como de\n\"tipo\" Note y no ImageNote. Eso es porque el prototipo de una función guarda\nuna referencia a su constructor en una propiedad llamada constructor. Al\nreemplazar el prototipo de ImageNote con el objeto creado con Object.create,\nla propiedad constructor ahora resuleve al constructor de Note. Podemos\ncorregir esto explícitamente asignando ImageNote.prototype.constructor:
function ImageNote(url) {\n this.url = url;\n Note.call(this, 'an image note');\n}\n\n// Heredamos de `Note.prototype`\nImageNote.prototype = Object.create(Note.prototype);\n// Asignamos constructor al nuevo prototipo\nImageNote.prototype.constructor = ImageNote;\n\nconsole.log(new ImageNote('http://foo.com/bar.png'));\nEn la consola deberías ver algo así:
\nImageNote {\n url: 'http://foo.com/bar.png',\n text: 'an image note',\n createdAt: 2017-06-22T15:12:40.163Z,\n completed: false }\nYay! Ya tenemos un constructor que hereda de Note! Ahora vamos a modificar la\nfuncionalidad del método Note#toString para que se adapte a ImageNote y nos\nmuestre la url de la imagen:
function ImageNote(url) {\n this.url = url;\n Note.call(this, 'an image note');\n}\n\n// Heredamos de `Note.prototype`\nImageNote.prototype = Object.create(Note.prototype);\nImageNote.prototype.constructor = ImageNote;\n\n// Sobreescribimos el método `toString` para instancias de `ImageNote`\nImageNote.prototype.toString = function () {\n return Note.prototype.toString.call(this) + ' | ' + this.url;\n};\nHemos declarado un nuevo método toString sobre el prototipo de ImageNote, y\nen la implementación de ese método estamos reusando Note.prototype.toString,\nhaciendo uso de Function#call otra vez ;-)
Ahora instanciemos nuestro objeto y veamos como se comporta:
\nconst imageNote = new ImageNote('http://foo.bar/baz.jpg');\n\nconsole.log(imageNote);\nconsole.log(imageNote.toString());\n// [ ] | Thu Jun 22 2017 | an image note | http://foo.bar/baz.jpg\n\nconsole.log(note instanceof ImageNote); // false\nconsole.log(imageNote instanceof Note); // true\nconsole.log(imageNote instanceof ImageNote); // true\n\nconsole.log(Note.prototype.isPrototypeOf(imageNote)); // true\nconsole.log(ImageNote.prototype.isPrototypeOf(note)); // false\nconsole.log(ImageNote.prototype.isPrototypeOf(imageNote)); // true\nCapítulos de libros:
\n\nBlog posts:
\nVideos:
\n8:52, Justin Meyer, Frontend Mastersaprox. 3h, funfunfunction,\n201611:55, funfunfunction,\n25 Jan 201619:19, funfunfunction,\n22 ago. 2016Otros recursos:
\nUn wireframe es un esquema simplificado de baja fidelidad de tu producto. Puedes\nreconocerlos por sus diseños distintivos de bloques, el uso de líneas para\nrepresentar texto y cuadrados \"✕\" que indican marcadores de posición para\nimágenes futuras.
\nLos wireframes de baja fidelidad son el punto de partida de un diseñador UX para\ntrabajar en la estructura, contenido y jerarquía. Esta herramienta nos provee de\nuna visión simple en bloques de cómo debe estar organizado el espacio para\nimágenes y contenido.
\n![\"Low-fidelity](\"https://cdn-images-1.medium.com/max/720/1*DsewIjSZe2quBs1OPuQ-VQ.jpeg\")
Un wireframe de alta fidelidad tiene contenido real y dimensiones exactas en\nimágenes y elementos. Puede ser diseñado usando tonos de grises para representar\nel contraste al momento de usar color. Sirven de puente entre wireframes y los\nprototipos de alta fidelidad.
\n![\"High-fidelity](\"https://think360studio.com/wp-content/uploads/2017/01/High-fidelity-wireframes.jpg\")
Un wireframe es un esquema simplificado de baja fidelidad de tu producto. Puedes\nreconocerlos por sus diseños distintivos de bloques, el uso de líneas para\nrepresentar texto y cuadrados \"✕\" que indican marcadores de posición para\nimágenes futuras.
\nLos wireframes de baja fidelidad son el punto de partida de un diseñador UX para\ntrabajar en la estructura, contenido y jerarquía. Esta herramienta nos provee de\nuna visión simple en bloques de cómo debe estar organizado el espacio para\nimágenes y contenido.
\n
Un wireframe de alta fidelidad tiene contenido real y dimensiones exactas en\nimágenes y elementos. Puede ser diseñado usando tonos de grises para representar\nel contraste al momento de usar color. Sirven de puente entre wireframes y los\nprototipos de alta fidelidad.
\n
Ya tenemos instaladoGit en nuestro equipo, ahora personalizaremos nuestro\nentorno de Git.
\n\nRecuerda que si quieres ejecutar comandos de Git y te encuentras en Mac OS X o\nLinux deberás ejecutarlos en la línea de comandos, en cambio, si tu\nsistema operativo es Windows abriremos Git Bash para ejecutar los\ncomandos de Git.
\n
Lo primero que debemos de hacer es establecer nuestro username y\ndirección de correo debido a que Git utilizará estos datos para la\nconfirmación de cambios (o como los conoceremos más adelante: commits),\npodemos configurar estos datos por medio del comando git config, este nos\npermite obtener y establecer variables de configuración que controlan el\naspecto y funcionamiento de Git, como por ejemplo si ejecuto el comando\ngit config --list en mi terminal me devuelve esto:
user.name = michellesegv\nuser.email = michelle@laboratoria.la\n(Que vienen a ser los datos que ya he configurado)
\nAhora nosotras vamos configurar nuestro entorno de Git:
Para configurar nuestro username debemos escribir la siguiente línea que\ndebe de tener nuestros datos, y luego presionaremos la tecla \"enter\":
\ngit config --global user.name Tu-username\nPara configurar nuestro correo electrónico debemos escribir la siguiente\nlínea con nuestros datos y luego presionaremos la tecla \"enter\":
\ngit config --global user.email tucorreo@gmail.com\nLos datos con los que llenes las líneas anteriores deben de ser los mismos que\nusaste al crear tu cuenta de Github, porque como te comentaba con ellos se\nregistrarán los commits que hagas en Git y que luego pasarán al historial\nde nuestro proyecto en Github.
![\"Subiendo](\"https://img.youtube.com/vi/g9iNK_11KV4/0.jpg\")
Ya tenemos instaladoGit en nuestro equipo, ahora personalizaremos nuestro\nentorno de Git.
\n\nRecuerda que si quieres ejecutar comandos de Git y te encuentras en Mac OS X o\nLinux deberás ejecutarlos en la línea de comandos, en cambio, si tu\nsistema operativo es Windows abriremos Git Bash para ejecutar los\ncomandos de Git.
\n
Lo primero que debemos de hacer es establecer nuestro username y\ndirección de correo debido a que Git utilizará estos datos para la\nconfirmación de cambios (o como los conoceremos más adelante: commits),\npodemos configurar estos datos por medio del comando git config, este nos\npermite obtener y establecer variables de configuración que controlan el\naspecto y funcionamiento de Git, como por ejemplo si ejecuto el comando\ngit config --list en mi terminal me devuelve esto:
user.name = michellesegv\nuser.email = michelle@laboratoria.la\n(Que vienen a ser los datos que ya he configurado)
\nAhora nosotras vamos configurar nuestro entorno de Git:
Para configurar nuestro username debemos escribir la siguiente línea que\ndebe de tener nuestros datos, y luego presionaremos la tecla \"enter\":
\ngit config --global user.name Tu-username\nPara configurar nuestro correo electrónico debemos escribir la siguiente\nlínea con nuestros datos y luego presionaremos la tecla \"enter\":
\ngit config --global user.email tucorreo@gmail.com\nLos datos con los que llenes las líneas anteriores deben de ser los mismos que\nusaste al crear tu cuenta de Github, porque como te comentaba con ellos se\nregistrarán los commits que hagas en Git y que luego pasarán al historial\nde nuestro proyecto en Github.
Com o Git já instalado em nosso computador, vamos agora personalizar o ambiente\ndo Git.
\n\n\nLembre-se de que se você quiser executar comandos Git e estiver no Mac OS X ou\nLinux, deverá executá-los na linha de comandos. Porém, se seu sistema\noperacional é Windows, utilizará o Git Bash para executar os mesmos comandos\nde Git.
\n
A primeira coisa a fazer é definir nosso nome de usuário (username) e e-mail\nque o Git utilizará para gravar as alterações de código (o que veremos mais\nadiante: commits). Podemos configurar esses dados através do comando git config, o qual nos permite visualizar e configurar variáveis que controlam a\naparência e funcionamento do Git. Por exemplo, se executo o comando git config --list em meu terminal, obtenho o seguinte resultado:
user.name = michellesegv\nuser.email = michelle@laboratoria.la\n(Esses são os dados que eu já havia configurado)
\nAgora, vamos definir o nosso ambiente de Git:
Para definir seu username (nome de usuário), substitua seu-username na\nseguinte linha e depois pressione a tecla \"enter\":
git config --global user.name seu-username\nPara definir seu e-mail, escreva o comando abaixo, pressionando \"enter\" em\nseguida:
\ngit config --global user.email seuemail@gmail.com\nOs dados das linhas acima devem ser os mesmos que você usou ao criar a sua conta\nno GitHub, pois eles ficarão gravados nos commits que você fizer no Git e\nfarão parte do histórico do projeto que está armazenado no GitHub.
![\"Configurando\ngit\"](\"https://img.youtube.com/vi/fB5auBqxLtM/0.jpg\")
Com o Git já instalado em nosso computador, vamos agora personalizar o ambiente\ndo Git.
\n\n\nLembre-se de que se você quiser executar comandos Git e estiver no Mac OS X ou\nLinux, deverá executá-los na linha de comandos. Porém, se seu sistema\noperacional é Windows, utilizará o Git Bash para executar os mesmos comandos\nde Git.
\n
A primeira coisa a fazer é definir nosso nome de usuário (username) e e-mail\nque o Git utilizará para gravar as alterações de código (o que veremos mais\nadiante: commits). Podemos configurar esses dados através do comando git config, o qual nos permite visualizar e configurar variáveis que controlam a\naparência e funcionamento do Git. Por exemplo, se executo o comando git config --list em meu terminal, obtenho o seguinte resultado:
user.name = michellesegv\nuser.email = michelle@laboratoria.la\n(Esses são os dados que eu já havia configurado)
\nAgora, vamos definir o nosso ambiente de Git:
Para definir seu username (nome de usuário), substitua seu-username na\nseguinte linha e depois pressione a tecla \"enter\":
git config --global user.name seu-username\nPara definir seu e-mail, escreva o comando abaixo, pressionando \"enter\" em\nseguida:
\ngit config --global user.email seuemail@gmail.com\nOs dados das linhas acima devem ser os mesmos que você usou ao criar a sua conta\nno GitHub, pois eles ficarão gravados nos commits que você fizer no Git e\nfarão parte do histórico do projeto que está armazenado no GitHub.
GithubGit de Githubremote, push y pullGithub es conocida como la \"red social\" de los developers debido a que una\ngran cantidad de ellos suben sus proyectos aquí. Esto les permite crear\nrepositorios remotos que guardarán siempre una copia de su código y a la cual\npodrán acceder fácilmente mediante Git que es el controlador de versiones.
Pero Github no solo sirve para \"subir\" nuestro código, él también contribuirá\nal desarrollo colaborativo del proyecto brindándonos herramientas como por\nejemplo:
sistema de seguimiento de problemas que permite a los miembros de un\nequipo detallar un problema o una sugerencia que deseen hacer del proyecto.herramienta de revisión de código, donde se pueden añadir anotaciones\nen cualquier punto del proyecto y debatir sobre un cambio en específico.visor de versiones donde se puede comparar el progreso del proyecto en\nlas distintas versiones.En resumen, se podría decir que Github es como Dropbox pero para developers.
Git y Github se complementan pero no son iguales.
Github utiliza a Git como Sistema de Control de Versiones. Gracias a\nGit podremos guardar localmente los diferentes avances (estados) de nuestro\nproyecto y gracias a Github podremos subir esos avances a la nube y\ncomenzar un trabajo colaborativo o trabajar en nuestros proyectos personales\nsin depender de la computadora donde se encuentre el proyecto o tener que estar\nguardándolo en un usb para copiarlo a otra computadora.
La programación se da, en su mayoría de veces, en equipos. Varias empresas\ntienen un equipo que se complementa para cada proyecto. Ante esta situación\nte preguntarás:
\n\n\n¿Cómo se organizan para trabajar todos en un solo proyecto? Tal vez tienen\ntodo en un usb y se lo turnan para poder trabajar, o trabajan cada uno por su\nlado y al momento de tener que unir las partes tienen que ver detalladamente\nsi se repiten o no alguna parte.
\n
Esto no sería para nada eficiente, porque no se podría trabajar al mismo tiempo\nen algo en específico y se tendría que depender del avance de otro para que\nnosotros podamos avanzar.
\nPara estos casos existen herramientas como Git y Github, los cuales nos\nayudan al momento de un trabajo colaborativo. Github es el lugar perfecto\npara trabajar conjuntamente en un proyecto con uno o varios compañeros, podrás\ncrear un proyecto y añadir como colaboradores a los miembros de tu equipo;\nademás, podrás traer a tu repositorio local los cambios que tus compañeros\nhayan subido al repositorio remoto y podrás ver automáticamente lo que acaba de\nañadir tu compañero.
Para crear tu cuenta de Github debemos seguir los siguientes pasos:
Github; luego haz\nclic en continue.¡Y listo! Al hacer todos estos pasos ya tendríamos nuestra cuenta de Github\ncreada.
Ahora Michelle, siguiendo los pasos anteriores, creará su cuenta en Github.
![\"creando](\"https://img.youtube.com/vi/1r9ixrSftaI/0.jpg\")
Sigue los pasos de Michelle para crear un repositorio en Github:
![\"Creando](\"https://img.youtube.com/vi/KCLpcq9BPcc/0.jpg\")
Por último tenemos la pantalla donde encontrarmos la url de nuestro\nrepositorio remoto, con la cual (más adelante) vincularemos nuestro\nrepositorio remoto con nuestro repositorio local.
Hemos leído las ventajas que nos pueden brindar Git y Github, con ellos\npodremos subir un repositorio local a uno remoto, trabajar con versiones y\ncolaborativamente, etc. Ahora hagamos la \"magia\" de trabajar con Git y\nGithub, vamos a subir nuestro repositorio local a uno remoto y trabajar\ncolaborativamente.
remote: Con remote vincularemos nuestro repositorio local con nuestro\nrepositorio que se encuentra en la \"nube\" por medio de la url.\nEste paso no se debe de hacer cada vez que creemos una nueva versión, solo\ncuando queramos especificar el repositorio remoto que tendremos.\nEntonces, para enlazar nuestro repositorio local con nuestro repositorio\nremoto debemos de ejecutar el siguiente comando:
git remote add nombre-remoto url\nNormalmente, la mayoría de los developers, como nombre-remoto utiliza\norigin y url es la \"ruta\" (url) de nuestro repositorio en Github.\nPor ejemplo, hace un momento he creado el repositorio \"prueba\" en Github y\nsi quiero vincular mi repositorio local con ese repositorio remoto tendría\nque ejecutar la siguiente línea de comando:
git remote add origin https://github.com/michellesegv/prueba.git\npush: Por medio de push enviaremos nuestra nueva versión que\nconfirmamos en el commit a nuestro repositorio remoto. El comando es el\nsiguiente:
git push nombre-remoto master\nEn nombre-remoto pondremos el mismo nombre-remoto que le hemos asignado\nal momento de añadir la url de nuestro proyecto (en nuestro caso sería\norigin) y seguido pondremos master, más adelante conoceremos el\ntrabajo en \"ramas\" que tiene Github. Las ramas son una copia paralela\nque podemos crear de nuestro código. Por defecto, los repositorios traen una\n\"rama\" llamada master y ahora trabajaremos solo en ella, así que\nsubiremos nuestros cambios a ella especificando master como el nombre de\nla rama a la que queremos subir nuestra versión, entonces el comando a\nejecutar sería:
git push origin master\npull: Sirve para actualizar nuestro repositorio local al últimocommit que\ntengamos registrado en el repositorio remoto. Este comando nos servirá mucho\nal momento de trabajar colaborativamente porque podremos tener los avances\nque nuestros colaboradores han subido al repositorio remotro a nuestro\nrepositorio local y mantenerlo actualizado. El comando es el siguiente:
git pull nombre-remoto master\nEn nuestro caso, como nuestro nombre-remoto ya lo declaramos como\norigin y la rama en la que estamos trabajando se llama master, el\ncomando sería:
\ngit pull origin master\nAhora veamos cómo Michelle utiliza Git y Github para manejar el control de\nversiones de sus proyectos y colaborar con otras coaches de Laboratoria.
![\"Subiendo](\"https://img.youtube.com/vi/Af51B0tI8Zs/0.jpg\")
Recomendamos los siguientes recursos:
\nGithubGit de Githubremote, push y pullGithub es conocida como la \"red social\" de los developers debido a que una\ngran cantidad de ellos suben sus proyectos aquí. Esto les permite crear\nrepositorios remotos que guardarán siempre una copia de su código y a la cual\npodrán acceder fácilmente mediante Git que es el controlador de versiones.
Pero Github no solo sirve para \"subir\" nuestro código, él también contribuirá\nal desarrollo colaborativo del proyecto brindándonos herramientas como por\nejemplo:
sistema de seguimiento de problemas que permite a los miembros de un\nequipo detallar un problema o una sugerencia que deseen hacer del proyecto.herramienta de revisión de código, donde se pueden añadir anotaciones\nen cualquier punto del proyecto y debatir sobre un cambio en específico.visor de versiones donde se puede comparar el progreso del proyecto en\nlas distintas versiones.En resumen, se podría decir que Github es como Dropbox pero para developers.
Git y Github se complementan pero no son iguales.
Github utiliza a Git como Sistema de Control de Versiones. Gracias a\nGit podremos guardar localmente los diferentes avances (estados) de nuestro\nproyecto y gracias a Github podremos subir esos avances a la nube y\ncomenzar un trabajo colaborativo o trabajar en nuestros proyectos personales\nsin depender de la computadora donde se encuentre el proyecto o tener que estar\nguardándolo en un usb para copiarlo a otra computadora.
La programación se da, en su mayoría de veces, en equipos. Varias empresas\ntienen un equipo que se complementa para cada proyecto. Ante esta situación\nte preguntarás:
\n\n\n¿Cómo se organizan para trabajar todos en un solo proyecto? Tal vez tienen\ntodo en un usb y se lo turnan para poder trabajar, o trabajan cada uno por su\nlado y al momento de tener que unir las partes tienen que ver detalladamente\nsi se repiten o no alguna parte.
\n
Esto no sería para nada eficiente, porque no se podría trabajar al mismo tiempo\nen algo en específico y se tendría que depender del avance de otro para que\nnosotros podamos avanzar.
\nPara estos casos existen herramientas como Git y Github, los cuales nos\nayudan al momento de un trabajo colaborativo. Github es el lugar perfecto\npara trabajar conjuntamente en un proyecto con uno o varios compañeros, podrás\ncrear un proyecto y añadir como colaboradores a los miembros de tu equipo;\nademás, podrás traer a tu repositorio local los cambios que tus compañeros\nhayan subido al repositorio remoto y podrás ver automáticamente lo que acaba de\nañadir tu compañero.
Para crear tu cuenta de Github debemos seguir los siguientes pasos:
Github; luego haz\nclic en continue.¡Y listo! Al hacer todos estos pasos ya tendríamos nuestra cuenta de Github\ncreada.
Ahora Michelle, siguiendo los pasos anteriores, creará su cuenta en Github.
Sigue los pasos de Michelle para crear un repositorio en Github:
Por último tenemos la pantalla donde encontrarmos la url de nuestro\nrepositorio remoto, con la cual (más adelante) vincularemos nuestro\nrepositorio remoto con nuestro repositorio local.
Hemos leído las ventajas que nos pueden brindar Git y Github, con ellos\npodremos subir un repositorio local a uno remoto, trabajar con versiones y\ncolaborativamente, etc. Ahora hagamos la \"magia\" de trabajar con Git y\nGithub, vamos a subir nuestro repositorio local a uno remoto y trabajar\ncolaborativamente.
remote: Con remote vincularemos nuestro repositorio local con nuestro\nrepositorio que se encuentra en la \"nube\" por medio de la url.\nEste paso no se debe de hacer cada vez que creemos una nueva versión, solo\ncuando queramos especificar el repositorio remoto que tendremos.\nEntonces, para enlazar nuestro repositorio local con nuestro repositorio\nremoto debemos de ejecutar el siguiente comando:
git remote add nombre-remoto url\nNormalmente, la mayoría de los developers, como nombre-remoto utiliza\norigin y url es la \"ruta\" (url) de nuestro repositorio en Github.\nPor ejemplo, hace un momento he creado el repositorio \"prueba\" en Github y\nsi quiero vincular mi repositorio local con ese repositorio remoto tendría\nque ejecutar la siguiente línea de comando:
git remote add origin https://github.com/michellesegv/prueba.git\npush: Por medio de push enviaremos nuestra nueva versión que\nconfirmamos en el commit a nuestro repositorio remoto. El comando es el\nsiguiente:
git push nombre-remoto master\nEn nombre-remoto pondremos el mismo nombre-remoto que le hemos asignado\nal momento de añadir la url de nuestro proyecto (en nuestro caso sería\norigin) y seguido pondremos master, más adelante conoceremos el\ntrabajo en \"ramas\" que tiene Github. Las ramas son una copia paralela\nque podemos crear de nuestro código. Por defecto, los repositorios traen una\n\"rama\" llamada master y ahora trabajaremos solo en ella, así que\nsubiremos nuestros cambios a ella especificando master como el nombre de\nla rama a la que queremos subir nuestra versión, entonces el comando a\nejecutar sería:
git push origin master\npull: Sirve para actualizar nuestro repositorio local al últimocommit que\ntengamos registrado en el repositorio remoto. Este comando nos servirá mucho\nal momento de trabajar colaborativamente porque podremos tener los avances\nque nuestros colaboradores han subido al repositorio remotro a nuestro\nrepositorio local y mantenerlo actualizado. El comando es el siguiente:
git pull nombre-remoto master\nEn nuestro caso, como nuestro nombre-remoto ya lo declaramos como\norigin y la rama en la que estamos trabajando se llama master, el\ncomando sería:
\ngit pull origin master\nAhora veamos cómo Michelle utiliza Git y Github para manejar el control de\nversiones de sus proyectos y colaborar con otras coaches de Laboratoria.
Recomendamos los siguientes recursos:
\nGitHubGit e GitHubinit,status, add, commit,\npush e pullGitHub é conhecido como a \"rede social\" dos desenvolvedores, pois muitos deles\nenviam seus projetos para lá. Ele permite criar repositórios remotos que\nsempre terão uma cópia do seu código facilmente acessível pelo Git, o\ncontrolador de versões.
Mas o GitHub não serve apenas para guardar o nosso código. Ele também\ncontribuirá para o desenvolvimento colaborativo do projeto fornecendo\nferramentas como:
Um sistema de acompanhamento de problemas que permite aos membros da equipe\ndetalhar um problema ou sugerir alterações no projeto.
\nUma ferramenta de revisão código, através da qual é possível adicionar\nanotações em qualquer ponto do projeto e discutir sobre uma alteração em\nespecífico.
\nUm visualizador de versões para comparar o progresso do projeto ao longo das\ndiferentes versões.
\nResumindo, poderíamos dizer que GitHub é como o Dropbox, mas para\ndesenvolvedores.
\nGit e GitHub se complementam, mas não são iguais.
GitHub utiliza Git como sistema de controle de versões. Graças ao Git,\npodemos salvar localmente os diferentes progressos (estado) do nosso projeto\ne, graças ao GitHub, podemos enviá-los à nuvem e iniciar um trabalho\ncolaborativo ou trabalhar em nossos projetos pessoais sem depender do computador\nonde se encontra o projeto ou de um pen drive para copiá-lo a outra máquina.
A programação é feita, na maioria das vezes, em equipes. Várias empresas têm uma\nequipe que se complementa para cada projeto. Diante dessa situação, você pode se\nperguntar:
\n\n\nComo se organizam para trabalhar todos em um único projeto? Talvez eles tenham\ntudo em um USB e se revezam para poderem trabalhar, ou cada um trabalha por si\ne, na hora de juntar todas as partes, precisam analisar detalhadamente se\nrepetiram ou não algum pedaço.
\n
Isso não seria nada eficiente, pois não seria possível trabalhar ao mesmo tempo\nem algo específico e dependeríamos do progresso de outra pessoa para que\npudéssemos avançar.
\nPara esses casos, existem ferramentas como o Git e GitHub que nos ajudam a\ntrabalhar de forma colaborativa. GitHub é o lugar perfeito para trabalhar em\nconjunto num projeto com um ou vários companheiros, pois você poderá: criar um\nprojeto e adicionar os membros de sua equipe como colaboradores; trazer ao seu\nrepositório local as alterações que seus companheiros enviaram ao repositório\nremoto; ver automaticamente o que seu companheiro acabou de adicionar.
Para criar sua conta no GitHub, siga estes passos:
\nUma vez na página, clique em \"Sign up\"
\nDigite um nome de usuário (username) que pode ser um que você já tenha.\nPor exemplo, se você já criou um username para um jogo online, poderá usar\nele mesmo. Há infinitas possibilidades para criar um novo, mas tenha em mente\nque seu username será visível para o mundo todo e poderá ser solicitado\nquando alguém for incluí-la no time de colaboradores de um projeto. Portanto,\ntenha cuidado com sua escolha de username. Em seguida, digite seu e-mail,\nsenha e clique em \"Create an account\".
\nNa próxima tela, certifique-se de marcar a opção \"Unlimited public\nrepositories for free\", a versão \"free\" do GitHub. Em seguida, clique em\n\"continue\"
\nNo terceiro passo do registro, você pode completar com seus dados e clicar em\n\"Submit\", ou somente clicar em \"Skip this step\"
\nE pronto! Ao finalizar essas etapas, teremos nossa conta GitHub criada.
\nAgora Juliana, seguindo os passos anteriores, criará\nsua conta no Github.
![\"Criando](\"https://img.youtube.com/vi/UciuMoszpp8/0.jpg\")
Siga os passos a seguir para criar um repositório no Github:
![\"Criando](\"https://img.youtube.com/vi/ZPoYWdQdJRs/0.jpg\")
Por último temos a tela onde encontramos a url do nosso repositório remoto,\ncom o qual (mais adiante) vincularemos nosso repositório remoto com nosso\nrepositório local.
Já lemos as vantagens que Git e GitHub podem nos oferecer: com eles, podemos\nfazer upload de um repositório local a outro remoto, trabalhar com versões e de\nforma colaborativa, etc. Agora, vamos a \"mágica\" do Git com GitHub: enviar nosso\nrepositório local a um repositório remoto e trabalhar colaborativamente.
remote: Com remote, vincularemos nosso repositório local ao nosso\nrepositório localizado na \"nuvem\" por meio de uma URL. Este passo não é\nfeito a cada versão criada, mas somente uma vez para especificarmos o\nrepositório remoto que temos à disposição. Para ligar o nosso repositório\nlocal com nosso repositório remoto, devemos executar o seguinte comando:
git remote add nome-remoto url\nNormalmente, a maioria dos desenvolvedores utilizam origin (origem) como\nnome-remoto e url é o endereço do repositório no GitHub. Por exemplo,\ncriei um repositório \"teste\" no GitHub há pouco tempo atrás e, para vincular\nmeu repositório local a esse repositório remoto, eu devo executar a seguinte\nlinha de comando:
git remote add origin https://github.com/michellesegv/teste.git\npush: Através do push, enviaremos nossa nova versão, confirmada pelo\ncommit, ao nosso repositório remoto. O comando é o seguinte:
git push nome-remoto master\nO nome-remoto é aquele atribuído com o comando anterior (remote add) e,\nno nosso caso, é origin. Em seguida, digitamos master, o nome da branch.\nVeremos mais adiante como trabalhar com branches (ramos). Os ramos são uma\ncópia paralela que podemos criar do nosso código. Por padrão, os repositórios\npossuem um ramo chamado master (mestre) e, por enquanto, trabalharemos\nsomente nele. Dessa forma, para enviar as mudanças ao ramo remoto master,\nexecutamos:
git push origin master\npull: Permite atualizar nosso repositório local para o último commit\nregistrado no repositório remoto. Este comando irá nos ajudar muito ao\ntrabalharmos de forma colaborativa, pois poderemos trazer o progresso que\nnossos colaboradores enviaram ao repositório remoto para o repositório local,\nmantendo-o atualizado. O comando é o seguinte:
git pull nome-remoto master\nNo nosso caso, como já declaramos o nome do repositório remoto como origin e\nestamos trabalhando no ramo master (padrão), o comando seria:
\ngit pull origin master\nAgora vamos ver como Juliana utiliza Git e Github para manejar o controle\nde versões de ses projetos e colaborar com outras coaches de Laboratoria.
![\"Subindo](\"https://img.youtube.com/vi/rfb3abnbkxM/0.jpg\")
A seguir, temos uma lista de comandos do Git usados nesta aula:
\n| Comando | Descrição |\n| --- | --- |\n| git config --global user.name seu-username | Configura o nome do usuário |\n| git config --global user.email seu@email.com | Configura o e-mail |\n| git init | Inicia o monitoramento do diretório indicado |\n| git add arquivo | Passa o arquivo do working directory à staging area |\n| git add . | Passa tudo do working directory à staging area |\n| git commit -m 'Comentário' | Confirma os arquivos para serem salvos |\n| git remote add nome-remoto URL | Vincula o repositório local com remoto |\n| git push nome-remoto master | Envia o conteúdo local no repositório remoto|\n| git status | Mostra o estado dos arquivos do diretório local |\n| git pull nome-remoto master | Atualiza o repositório local |
Recomendamos as seguintes leituras:
\n" + "body": "GitHubGit e GitHubinit,status, add, commit,\npush e pullGitHub é conhecido como a \"rede social\" dos desenvolvedores, pois muitos deles\nenviam seus projetos para lá. Ele permite criar repositórios remotos que\nsempre terão uma cópia do seu código facilmente acessível pelo Git, o\ncontrolador de versões.
Mas o GitHub não serve apenas para guardar o nosso código. Ele também\ncontribuirá para o desenvolvimento colaborativo do projeto fornecendo\nferramentas como:
Um sistema de acompanhamento de problemas que permite aos membros da equipe\ndetalhar um problema ou sugerir alterações no projeto.
\nUma ferramenta de revisão código, através da qual é possível adicionar\nanotações em qualquer ponto do projeto e discutir sobre uma alteração em\nespecífico.
\nUm visualizador de versões para comparar o progresso do projeto ao longo das\ndiferentes versões.
\nResumindo, poderíamos dizer que GitHub é como o Dropbox, mas para\ndesenvolvedores.
\nGit e GitHub se complementam, mas não são iguais.
GitHub utiliza Git como sistema de controle de versões. Graças ao Git,\npodemos salvar localmente os diferentes progressos (estado) do nosso projeto\ne, graças ao GitHub, podemos enviá-los à nuvem e iniciar um trabalho\ncolaborativo ou trabalhar em nossos projetos pessoais sem depender do computador\nonde se encontra o projeto ou de um pen drive para copiá-lo a outra máquina.
A programação é feita, na maioria das vezes, em equipes. Várias empresas têm uma\nequipe que se complementa para cada projeto. Diante dessa situação, você pode se\nperguntar:
\n\n\nComo se organizam para trabalhar todos em um único projeto? Talvez eles tenham\ntudo em um USB e se revezam para poderem trabalhar, ou cada um trabalha por si\ne, na hora de juntar todas as partes, precisam analisar detalhadamente se\nrepetiram ou não algum pedaço.
\n
Isso não seria nada eficiente, pois não seria possível trabalhar ao mesmo tempo\nem algo específico e dependeríamos do progresso de outra pessoa para que\npudéssemos avançar.
\nPara esses casos, existem ferramentas como o Git e GitHub que nos ajudam a\ntrabalhar de forma colaborativa. GitHub é o lugar perfeito para trabalhar em\nconjunto num projeto com um ou vários companheiros, pois você poderá: criar um\nprojeto e adicionar os membros de sua equipe como colaboradores; trazer ao seu\nrepositório local as alterações que seus companheiros enviaram ao repositório\nremoto; ver automaticamente o que seu companheiro acabou de adicionar.
Para criar sua conta no GitHub, siga estes passos:
\nUma vez na página, clique em \"Sign up\"
\nDigite um nome de usuário (username) que pode ser um que você já tenha.\nPor exemplo, se você já criou um username para um jogo online, poderá usar\nele mesmo. Há infinitas possibilidades para criar um novo, mas tenha em mente\nque seu username será visível para o mundo todo e poderá ser solicitado\nquando alguém for incluí-la no time de colaboradores de um projeto. Portanto,\ntenha cuidado com sua escolha de username. Em seguida, digite seu e-mail,\nsenha e clique em \"Create an account\".
\nNa próxima tela, certifique-se de marcar a opção \"Unlimited public\nrepositories for free\", a versão \"free\" do GitHub. Em seguida, clique em\n\"continue\"
\nNo terceiro passo do registro, você pode completar com seus dados e clicar em\n\"Submit\", ou somente clicar em \"Skip this step\"
\nE pronto! Ao finalizar essas etapas, teremos nossa conta GitHub criada.
\nAgora Juliana, seguindo os passos anteriores, criará\nsua conta no Github.
Siga os passos a seguir para criar um repositório no Github:
Por último temos a tela onde encontramos a url do nosso repositório remoto,\ncom o qual (mais adiante) vincularemos nosso repositório remoto com nosso\nrepositório local.
Já lemos as vantagens que Git e GitHub podem nos oferecer: com eles, podemos\nfazer upload de um repositório local a outro remoto, trabalhar com versões e de\nforma colaborativa, etc. Agora, vamos a \"mágica\" do Git com GitHub: enviar nosso\nrepositório local a um repositório remoto e trabalhar colaborativamente.
remote: Com remote, vincularemos nosso repositório local ao nosso\nrepositório localizado na \"nuvem\" por meio de uma URL. Este passo não é\nfeito a cada versão criada, mas somente uma vez para especificarmos o\nrepositório remoto que temos à disposição. Para ligar o nosso repositório\nlocal com nosso repositório remoto, devemos executar o seguinte comando:
git remote add nome-remoto url\nNormalmente, a maioria dos desenvolvedores utilizam origin (origem) como\nnome-remoto e url é o endereço do repositório no GitHub. Por exemplo,\ncriei um repositório \"teste\" no GitHub há pouco tempo atrás e, para vincular\nmeu repositório local a esse repositório remoto, eu devo executar a seguinte\nlinha de comando:
git remote add origin https://github.com/michellesegv/teste.git\npush: Através do push, enviaremos nossa nova versão, confirmada pelo\ncommit, ao nosso repositório remoto. O comando é o seguinte:
git push nome-remoto master\nO nome-remoto é aquele atribuído com o comando anterior (remote add) e,\nno nosso caso, é origin. Em seguida, digitamos master, o nome da branch.\nVeremos mais adiante como trabalhar com branches (ramos). Os ramos são uma\ncópia paralela que podemos criar do nosso código. Por padrão, os repositórios\npossuem um ramo chamado master (mestre) e, por enquanto, trabalharemos\nsomente nele. Dessa forma, para enviar as mudanças ao ramo remoto master,\nexecutamos:
git push origin master\npull: Permite atualizar nosso repositório local para o último commit\nregistrado no repositório remoto. Este comando irá nos ajudar muito ao\ntrabalharmos de forma colaborativa, pois poderemos trazer o progresso que\nnossos colaboradores enviaram ao repositório remoto para o repositório local,\nmantendo-o atualizado. O comando é o seguinte:
git pull nome-remoto master\nNo nosso caso, como já declaramos o nome do repositório remoto como origin e\nestamos trabalhando no ramo master (padrão), o comando seria:
\ngit pull origin master\nAgora vamos ver como Juliana utiliza Git e Github para manejar o controle\nde versões de ses projetos e colaborar com outras coaches de Laboratoria.
A seguir, temos uma lista de comandos do Git usados nesta aula:
\n| Comando | Descrição |\n| --- | --- |\n| git config --global user.name seu-username | Configura o nome do usuário |\n| git config --global user.email seu@email.com | Configura o e-mail |\n| git init | Inicia o monitoramento do diretório indicado |\n| git add arquivo | Passa o arquivo do working directory à staging area |\n| git add . | Passa tudo do working directory à staging area |\n| git commit -m 'Comentário' | Confirma os arquivos para serem salvos |\n| git remote add nome-remoto URL | Vincula o repositório local com remoto |\n| git push nome-remoto master | Envia o conteúdo local no repositório remoto|\n| git status | Mostra o estado dos arquivos do diretório local |\n| git pull nome-remoto master | Atualiza o repositório local |
Recomendamos as seguintes leituras:
\n" } } } diff --git a/dist/topics/shell.json b/dist/topics/shell.json index add27d060..fcaad1195 100644 --- a/dist/topics/shell.json +++ b/dist/topics/shell.json @@ -2,9 +2,9 @@ "slug": "shell", "repo": "Laboratoria/bootcamp", "path": "topics/shell", - "version": "6.2.0", + "version": "6.3.0", "parserVersion": "5.0.0-alpha.4", - "createdAt": "2023-04-04T20:28:41.835Z", + "createdAt": "2023-05-17T20:37:33.164Z", "track": "web-dev", "intl": { "es": { @@ -39,11 +39,11 @@ "intl": { "es": { "title": "Shell de UNIX", - "body": "\n\nUna Shell de Unix o también shell, es el término usado en informática para\nreferirse a un intérprete de comandos, el cual consiste en la interfaz de\nusuario tradicional de los sistemas operativos basados en Unix y similares\ncomo GNU/Linux.
\nFuente: Shell de Unix - Wikipedia
\n
Básicamente, la shell es el intérprete que se encarga de ejecutar los comandos\nque escribimos en el terminal (o emulador de terminal). Así como el motor de\nJavaScript (ya sea del navegador, Node.js, ...) es el responsable en interpretar\ny ejecutar nuestro código JavaScript, la shell se encarga de los comandos que\nescribimos en la línea de comando.
\nLa shell más común es problemente bash (Bourne Again SHell),\npero no está de más mencionar que existen muchas shells distintas, que comparten\ngran parte de sus características, pero cada una con sus peculiaridades. Otras\nshells comunes son: zsh, ksh, csh, ash, dash, ...
Dentro de un emulador de terminal podemos ejecutar diferentes shells, así como\nconfigurar tu shell por defecto (ver comando chsh).
\nLa línea de comandos es también conocida como
\nUna de las herramientas que más nos acompañará en nuestro camino del código\nserá la línea de comandos. En esta lección conoceremos y aprenderemos cómo\nusar esa famosa pantalla negra que los \"hackers\" usan; pero tranquila, no\nvamos a \"hackear\" nada, ni haremos nada ilegal :)
Puede parecer un poco aterrador al principio pero solo es una pantalla que\nespera a que le des órdenes.
\nLa línea de comandos es una aplicación que nos permite ver, manejar y\nmanipular archivos de nuestra computadora por medio de comandos. Es como el\nExplorador de Windows o Finder en Mac, pero sin la \"interfaz\".
Por lo tanto, nos da un control que es rápido y automatizado de las\ncomputadoras.
\nPresionamos la tecla \"windows\" + r:
\n![\"teclas\"](\"https://fotos.subefotos.com/5b80f161eee85749b3825fc14406872eo.png\")
Ahora nos aparecerá una pequeña pantalla en la parte inferior izquierda en la que\nescribiremos cmd.exe
\n![\"run\"](\"https://fotos.subefotos.com/98de3a4aec5f117f023ba85addc08298o.png\")
Hacemos clic en el botón OK y estaremos abriendo nuestra terminal. Al abrir\nla aplicación nos aparecerá una nueva ventana con un fondo negro y letras así:
\n![\"línea](\"https://fotos.subefotos.com/4fda00e92300cda89ff141f0265d6227o.png\")
Launchpad → Terminal
\nActividades → Terminal
\nAhora tendremos una pantalla negra que está esperando nuestras órdenes.
\nSi nos encontramos en Windows debe de aparecernos una primera línea que termina\ncon el símbolo >
C: \\Users\\Michelle >\nSi no te aparece \"Michelle\" no te preocupes, está bien, ahí debería de\naparecer tu nombre de usuario.
\nSi te encuentras en Linux, te aparecerá una primera línea que termina con el\nsímbolo $
[Laboratoria@Michelle ~] $\nEn tu computadora, \"Laboratoria\" y \"Michelle\" serán reemplazados por tus datos.
\nSi tienes una Mac, la primera línea estará compuesta por los datos de tu\ncomputadora y terminará con el símbolo $
Laboratoria-MacBook-Air:~ Michelle$\nPara finalizar, cabe mencionar que así como uno puede configurar su escritorio,\ncon tu propia imagen de fondo, shortcuts, ... los shells también permiten un\nmontón de personalización. Los detalles de cómo personalizar tu shell quedan\nfuera del scope de este curso, pero te invitamos a que explores lo siguiente:
\n.profile.bashrc.bash_historyoh-my-zsh\n\nUna Shell de Unix o también shell, es el término usado en informática para\nreferirse a un intérprete de comandos, el cual consiste en la interfaz de\nusuario tradicional de los sistemas operativos basados en Unix y similares\ncomo GNU/Linux.
\nFuente: Shell de Unix - Wikipedia
\n
Básicamente, la shell es el intérprete que se encarga de ejecutar los comandos\nque escribimos en el terminal (o emulador de terminal). Así como el motor de\nJavaScript (ya sea del navegador, Node.js, ...) es el responsable en interpretar\ny ejecutar nuestro código JavaScript, la shell se encarga de los comandos que\nescribimos en la línea de comando.
\nLa shell más común es problemente bash (Bourne Again SHell),\npero no está de más mencionar que existen muchas shells distintas, que comparten\ngran parte de sus características, pero cada una con sus peculiaridades. Otras\nshells comunes son: zsh, ksh, csh, ash, dash, ...
Dentro de un emulador de terminal podemos ejecutar diferentes shells, así como\nconfigurar tu shell por defecto (ver comando chsh).
\nLa línea de comandos es también conocida como
\nUna de las herramientas que más nos acompañará en nuestro camino del código\nserá la línea de comandos. En esta lección conoceremos y aprenderemos cómo\nusar esa famosa pantalla negra que los \"hackers\" usan; pero tranquila, no\nvamos a \"hackear\" nada, ni haremos nada ilegal :)
Puede parecer un poco aterrador al principio pero solo es una pantalla que\nespera a que le des órdenes.
\nLa línea de comandos es una aplicación que nos permite ver, manejar y\nmanipular archivos de nuestra computadora por medio de comandos. Es como el\nExplorador de Windows o Finder en Mac, pero sin la \"interfaz\".
Por lo tanto, nos da un control que es rápido y automatizado de las\ncomputadoras.
\nPresionamos la tecla \"windows\" + r:
\n
Ahora nos aparecerá una pequeña pantalla en la parte inferior izquierda en la que\nescribiremos cmd.exe
\n
Hacemos clic en el botón OK y estaremos abriendo nuestra terminal. Al abrir\nla aplicación nos aparecerá una nueva ventana con un fondo negro y letras así:
\n
Launchpad → Terminal
\nActividades → Terminal
\nAhora tendremos una pantalla negra que está esperando nuestras órdenes.
\nSi nos encontramos en Windows debe de aparecernos una primera línea que termina\ncon el símbolo >
C: \\Users\\Michelle >\nSi no te aparece \"Michelle\" no te preocupes, está bien, ahí debería de\naparecer tu nombre de usuario.
\nSi te encuentras en Linux, te aparecerá una primera línea que termina con el\nsímbolo $
[Laboratoria@Michelle ~] $\nEn tu computadora, \"Laboratoria\" y \"Michelle\" serán reemplazados por tus datos.
\nSi tienes una Mac, la primera línea estará compuesta por los datos de tu\ncomputadora y terminará con el símbolo $
Laboratoria-MacBook-Air:~ Michelle$\nPara finalizar, cabe mencionar que así como uno puede configurar su escritorio,\ncon tu propia imagen de fondo, shortcuts, ... los shells también permiten un\nmontón de personalización. Los detalles de cómo personalizar tu shell quedan\nfuera del scope de este curso, pero te invitamos a que explores lo siguiente:
\n.profile.bashrc.bash_historyoh-my-zsh\n\nUma Shell de Unix ou também shell, é o terminal usado na informática\npara se referir a um intérprete de comandos, o qual consiste na interface de\nusuário tradicional dos sistemas operacionais baseados em Unix e similares\ncomo GNU/Linux.
\nFonte: Shell de Unix -\nWikipédia
\n
Basicamente, o shell é um intérprete que é encarregado de executar os comandos\nque escrevemos no terminal (ou emulador de terminal). Assim como o motor do\nJavaScript (seja o do navegador, Node.js, ...) é o responsável por interpretar e\nexecutar nosso código JavaScript, a shell se encarrega dos comandos que\nescrevemos na linha de comando.
\nA shell mais comum é provavelmente bash (Bourne Again\nSHell), mas não é demais mencionar que\nexistem muitas shells distintas que compartilham grande parte de suas\ncaracterísticas, mas cada uma com suas peculiaridades. Outras shells comuns são:\nzsh, ksh, csh, ash, dash, ...
Dentro de um emulador do terminal podemos executar diferentes shells, assim como\nconfigurar sua shell por padrão (ver comando\nchsh).
\nA linha de comandos também é conhecida como:
\nUma das ferramentas que mais nos acompanhará será a linha de comandos. Nessa\nlição conheceremos e aprenderemos como usar essa famosa tela preta que os\n\"hackers\" usam. Mas fique tranquila! Não vamos \"hackear\" nada, nem faremos nada\nilegal.
Pode parecer um pouco assustador no começo, mas é apenas uma tela esperando\npelas suas ordens.
\nA linha de comandos é uma aplicação que nos permite visualizar, gerenciar e\nmanipular arquivos de nosso computador através de comandos. É como o Windows\nExplorer ou Finder do Mac, mas sem a interface gráfica.
\nDessa forma, a linha de comandos nos dá um controle rápido e automatizado dos\ncomputadores.
\nPressione as teclas \"Windows\" + r:
\n![\"Teclas](\"https://user-images.githubusercontent.com/11894994/58904749-80023200-86de-11e9-8743-97f5829a213f.png\")
Uma pequena tela aparecerá na parte inferior esquerda. Nela, escreveremos\ncmd.exe.
![\"Executar\"](\"https://user-images.githubusercontent.com/11894994/58904748-80023200-86de-11e9-84ba-5b6e471f4d43.png\")
Ao clicar no botão \"OK\", abriremos nosso terminal. Ao abrir a aplicação,\naparecerá uma nova janela aparecer com um fundo preto e letras como abaixo:
\n![\"Linha](\"https://user-images.githubusercontent.com/11894994/58904746-80023200-86de-11e9-93a9-753e119e00e6.png\")
Launchpad → Terminal
\nAtividades → Terminal (pode variar conforme sua distribuição e configuração)
\nAgora temos uma tela preta que está esperando por nossas ordens.
\nSe estiver no Windows, a primeira linha deve terminar com o símbolo >:
C:\\Users\\Michelle>\nSe não aparecer Michelle, não se preocupe, está tudo certo: aqui deve\naparecer o seu próprio nome de usuário.
No Linux, a primeira linha terminará com o símbolo $:
[Laboratoria@Michelle ~]$\nNo seu computador, \"Laboratoria\" e \"Michelle\" serão substituídos pelos seus\ndados.
\nSe você tem um Mac, a primeira linha será composta pelos dados do seu\ncomputador terminando com o símbolo $:
Laboratoria-MacBook-Air:~ Michelle$\nPara finalizar, cabe mencionar que assim como alguém pode configurar sua área de\ntrabalho com sua própria imagem de fundo, atalhos, ... os shells também permitem\numa grande quantidade de personalização. Os detalhes de como personalizar seu\nshell estão fora do escopo deste curso, mas convidamos você a explorar o\nseguinte:
\n.profile.bashrc.bash_historyoh-my-zsh\n\nUma Shell de Unix ou também shell, é o terminal usado na informática\npara se referir a um intérprete de comandos, o qual consiste na interface de\nusuário tradicional dos sistemas operacionais baseados em Unix e similares\ncomo GNU/Linux.
\nFonte: Shell de Unix -\nWikipédia
\n
Basicamente, o shell é um intérprete que é encarregado de executar os comandos\nque escrevemos no terminal (ou emulador de terminal). Assim como o motor do\nJavaScript (seja o do navegador, Node.js, ...) é o responsável por interpretar e\nexecutar nosso código JavaScript, a shell se encarrega dos comandos que\nescrevemos na linha de comando.
\nA shell mais comum é provavelmente bash (Bourne Again\nSHell), mas não é demais mencionar que\nexistem muitas shells distintas que compartilham grande parte de suas\ncaracterísticas, mas cada uma com suas peculiaridades. Outras shells comuns são:\nzsh, ksh, csh, ash, dash, ...
Dentro de um emulador do terminal podemos executar diferentes shells, assim como\nconfigurar sua shell por padrão (ver comando\nchsh).
\nA linha de comandos também é conhecida como:
\nUma das ferramentas que mais nos acompanhará será a linha de comandos. Nessa\nlição conheceremos e aprenderemos como usar essa famosa tela preta que os\n\"hackers\" usam. Mas fique tranquila! Não vamos \"hackear\" nada, nem faremos nada\nilegal.
Pode parecer um pouco assustador no começo, mas é apenas uma tela esperando\npelas suas ordens.
\nA linha de comandos é uma aplicação que nos permite visualizar, gerenciar e\nmanipular arquivos de nosso computador através de comandos. É como o Windows\nExplorer ou Finder do Mac, mas sem a interface gráfica.
\nDessa forma, a linha de comandos nos dá um controle rápido e automatizado dos\ncomputadores.
\nPressione as teclas \"Windows\" + r:
\n
Uma pequena tela aparecerá na parte inferior esquerda. Nela, escreveremos\ncmd.exe.
Ao clicar no botão \"OK\", abriremos nosso terminal. Ao abrir a aplicação,\naparecerá uma nova janela aparecer com um fundo preto e letras como abaixo:
\n
Launchpad → Terminal
\nAtividades → Terminal (pode variar conforme sua distribuição e configuração)
\nAgora temos uma tela preta que está esperando por nossas ordens.
\nSe estiver no Windows, a primeira linha deve terminar com o símbolo >:
C:\\Users\\Michelle>\nSe não aparecer Michelle, não se preocupe, está tudo certo: aqui deve\naparecer o seu próprio nome de usuário.
No Linux, a primeira linha terminará com o símbolo $:
[Laboratoria@Michelle ~]$\nNo seu computador, \"Laboratoria\" e \"Michelle\" serão substituídos pelos seus\ndados.
\nSe você tem um Mac, a primeira linha será composta pelos dados do seu\ncomputador terminando com o símbolo $:
Laboratoria-MacBook-Air:~ Michelle$\nPara finalizar, cabe mencionar que assim como alguém pode configurar sua área de\ntrabalho com sua própria imagem de fundo, atalhos, ... os shells também permitem\numa grande quantidade de personalização. Os detalhes de como personalizar seu\nshell estão fora do escopo deste curso, mas convidamos você a explorar o\nseguinte:
\n.profile.bashrc.bash_historyoh-my-zshLas entrevistas con usuarios son una herramienta muy importante para poder\nobtener más datos sobre cómo se sienten los usuarios con un producto o servicio.\nPara realizar una buena entrevista debemos hacer un buen planeamiento y seguir\nalgunos tips.
\n![\"curiosity\"](\"https://www.jpl.nasa.gov/images/msl/20160613/pia20602-16.jpg\")
La foto de la presentación, es una foto del explorador \"Curiosity\" de Marte,\nque fue lanzado por la NASA en el 2011 con la meta de determinar si Marte algún\ndía sería capaz de sostener vida microscópica. La segunda meta del explorador\nera recolectar data sobre Marte y comprender cómo era el ambiente y ecosistema.\nDemoró más de una semana de investigación, desarrollo y prueba poder construir\nun explorador que trabajaría en otro planeta.
\nTal como los astrofísicos que diseñaron el explorador de Marte, como\ninvestigadores tenemos que poner a prueba nuestros diseños continuamente para\nasegurarnos de que podemos generar soluciones \"de otro mundo\" para nuestros\nclientes.
\nY como el nombre de esta nave, \"Curiosidad\", debemos tener curiosidad por\nrecolectar data y preguntar las preguntas correctas a nuestros usuarios para\nasegurar que estamos diseñando productos que cumplen con sus necesidades.
\nPara este curso, hicimos una mini investigación preguntándole a personas que han\ntrabajado en investigación por décadas (gente que trabaja para Google Ventures,\nFacebook, WeWork e incluso bancos y corporaciones internacionales). Les\npreguntamos cuál era la característica más importante que tenía que tener\nalguien que sobresalía en el mundo de la investigación.
\nLa respuesta más común fue que los investigadores necesitan tener curiosidad.\nTienen que estar interesados en entender el motor que mueve a sus usuarios y a\nlos seres humanos en general.
\nDeben cuestionar todo y preguntarse constantemente:
\nNunca recibimos respuestas que dijeran que un investigador debe ser\nextrovertido, creemos que ese es un mito que no está basado en la realidad.\nLos grandes investigadores pueden ser introvertidos o extrovertidos, pero tienen\nque ser inquisitivos y buscar siempre formas de aprender más sobre la gente.
Ahora, en una situación de entrevista con usuarios, lo más probable es que no\npreguntemos \"por qué\" 5 veces seguidas. Esto es porque sería muy molesto para el\nusuario y probablemente no nos ayudaría a lograr nuestros objetivos de\ninvestigación.
\nAsí que no solo tenemos que ser curiosos, tenemos que aprender a hacer mejores\npreguntas.
\nHacer las preguntas correctas es realmente importante por 2 razones:
\nUna cosa por mencionar, es que, como investigador, estás representando a la\ncompañía para la que trabajas, y hay una política en la que nos debemos\nconcentrar durante las sesiones de investigación, sobre todas las cosas:\nNunca hagas daño. Si una entrevista va mal y sientes que no has aprendido nada\nde lo que saliste a buscar, como mínimo deberías asegurarte que el participante\ndebería salir de la sesión sintiendo que su punto de vista fue apreciado y\nescuchado. Lo peor que puede pasar en un estudio es que el participante sienta\nque fue puesto a prueba y se equivocó en todas las respuestas, o peor aún, que\nse lleve una imagen negativa de la empresa por la forma en que lo trataste.
Vamos a discutir algunas tácticas para evitar esto después, podría sonar como\nsentido común, pero son cosas importantes para tener en mente. Es especialmente\nimportante si trabajas con stakeholders de la empresa con un interés en el\nresultado de la investigación, y que podrían intentar jalar la conversación con\nusuarios en una dirección particular.
\nSiempre debes poner la comodidad y necesidades de tus usuarios primero, y los\nobjetivos de la investigación en un cercano segundo lugar.
\nMuchos investigadores mencionan el arco de una entrevista, que básicamente es la\nforma en que la entrevista progresa a través del tiempo que tienes con los\nparticipantes. En el eje horizontal tienes el tiempo y en el eje vertical tienes\nun promedio de cuánto es probable que aprendas durante ese momento.
\nTípicamente en los primeros cinco minutos vas a pasar la mayoría del tiempo\ntratando de hacer que tu participante se sienta cómodo, y ponerlo en contexto\ncon el proyecto. Puedes empezar por presentarte y explicar por qué lo has\nelegido como participante a él o ella.
\nEl siguiente paso se llama construir rapport, que básicamente significa hacer\nque la otra persona se sienta cómoda y sienta que puede confiar en ti. En esta\nfase en verdad no vas a aprender mucho. Eso está bien, porque todo el tiempo que\ninviertas en hacer que tu participante se sienta cómodo es increíblemente\nimportante. Si se sienten cómodos, hay mucha más probabilidad de que te de sus\nopiniones y pensamientos honestos. Puedes charlar un rato con el participante -\npreguntarle por su día o conversar sobre un tema neutral.
Durante el calentamiento, te concentrarás en una lista de preguntas que te darán\nun mejor entendimiento sobre la persona que estás entrevistando, así como de\ntodo el contexto en el que usa el producto. Como verás, en este punto ya estás\nempezando a aprender un poco más.
\nUna vez que has hecho algunas preguntas de fondo, puedes pasar a la \"carnecita\"\nde la entrevista. Si estás haciendo una investigación de observación o de\nusabilidad, este es el momento en que todas tus preguntas de ese tipo irán. En\neste momento en la entrevista generalmente será cuando más aprendes sobre el\ntema o producto particular para el que hiciste la investigación.
\nLuego de completar las preguntas detalladas, puedes hacer unas cuantas preguntas\nde resumen. Esta parte es muy importante porque los usuarios típicamente te\ndarán buenos insights y citas acerca de su experiencia en general. Como verás,\nlos aprendizajes en el arco de la entrevista se disparan justo al final, porque\npedirle a la gente que resuma su experiencia los hace reflexionar y conectar los\npuntos un poquito. (Algunas veces la gente necesita un poco de tiempo para\npensar antes de poder articular lo que funcionó y lo que no funcionó.)
\nAlgunos ejemplos de preguntas de informe:
\nMuchos investigadores hablan de la importancia de \"construir rapport\", que\nesencialmente significa generar confianza y un espacio seguro donde tu\nparticipante sienta que realmente puede abrirse y compartir sus experiencias.
\nEs importante que no empieces inmediatamente con preguntas detalladas para la\nentrevista. Por ejemplo, nunca saltes directo a preguntas de testeo de\nusabilidad porque realmente necesitas que tu usuario se acostumbre y se sienta\ncómodo contigo primero. Usa los primeros minutos para preguntarle un poco sobre\nsí mismo.
\nAlgunos consejos que pueden ayudarte mientras te preparas para entrevistar\nusuarios:
\n¿Qué entendiste de esta frase?
\nUno de los retos de la investigación cualitativa en general es que la gente\nsuele sub-reportar el mal comportamiento. No es porque sean malas personas, o\nestén tratando de engañarte, pero los humanos en general quieren ser vistos como\nbuenas personas. Solemos racionalizar el mal comportamiento convenciéndonos de\nque lo hacemos mucho menos de lo que en verdad hacemos.
\nPor ejemplo, podríamos observar a las personas en lugar de preguntarles por su\ncomportamiento.
\nEsta foto es un ejemplo de un tipo de mal comportamiento que la gente\nsub-reporta. Cuando se trata de contraseñas, mucha gente no usa claves seguras y\nelige algo como 123456 siempre que no hay requerimientos obligatorios de\nseguridad. Muchas personas también guardan sus contraseñas escritas en post-its\nen su escritorio. La mayoría de personas saben que no es seguro hacer esto, pero\nlo hacen porque es seguro y conveniente.
\nEn una entrevista, si preguntamos a las personas si siempre usan contraseñas\nseguras, es posible que digan que sí, pero esto no necesariamente representa lo\nque en verdad hacen. Este es un ejemplo clave de cómo las personas no siempre\nhacen lo que dicen que harán, y vice versa.
\nPara evitar este problema potencial, podríamos pedir para observar a alguien\nmientras entra a una página web con su contraseña, en lugar de preguntarle si\nusa una contraseña segura.
\n...pero esto no es una buena representación de su comportamiento real
\nEl segundo problema común es que muchas veces en entrevistas hacemos preguntas\nhipotéticas sobre lo que la gente haría en una situación particular, pero esto\nno siempre es una buena representación de cómo actuarían en verdad. Los humanos\nen general no son buenos para explicar su comportamiento potencial en el futuro,\nporque muchísimo de nuestro comportamiento depende del contexto específico en el\nque nos encontramos.
\nUna táctica bastante útil es pedir a tus participantes que te cuenten sobre\nexperiencias reales y anécdotas relacionadas al tema que estás investigando.
\nUna mala pregunta que le encanta a los investigadores es \"Pagarías por este\nproducto?\" o \"Crees que usarías este producto en el futuro?\" Estas no son\npreguntas valiosas en una entrevista.
\nEn el caso de \"Pagarías por este producto?\" podrías preguntarle por otros\nproductos por los que han pagado en el pasado que puedan compararse, y en esos\ncasos cuánto pagaron y por qué. También puedes intentar de hacer preguntas más\ngenerales sobre otros productos que han usado y seguir esas preguntas con otras\nsobre el precio.
\nApégate al dicho \"Mostrar, no contar\" siempre que puedas, porque el feedback que\nrecibas será mucho más rico y valioso.
\nOtro problema frecuente que vemos como investigadores es que la gente normalmente\nno tiene tan buena memoria para recordar cualquier cosa que haya pasado hace más\nde una semana.
\nUna opción para evitar este problema es hacer preguntas sobre una experiencia\nmuy específica. Por ejemplo, en lugar de preguntarle de manera general si leyó\nlos Términos y Condiciones, podrías preguntarle acerca de la última vez que tuvo\nque registrarse para un servicio como AirBnB y cómo lo hicieron. Puedes seguir\nesas preguntas con una acerca de si leyeron los términos o no, y por qué no.
\nNuevamente, sería mucho mejor si tienes la opción de observar gente pasando por\nun flujo de registro.
\n...y no están calificados para dar feedback sobre el diseño o saber exactamente\nqué quieren en un producto
\nOtro problema común que pasa muy seguido en entrevistas de investigación es que\nlos investigadores tienden a preguntar a los usuarios qué pensaron de un diseño.\nLa mayoría de veces los usuarios no son diseñadores y no deberían tener que\ndarte feedback sobre un diseño para que puedas interpretar formas de mejorar sus\nexperiencias.
\nOtro error común es preguntar a los usuarios exactamente qué quieren tener en un\nproducto. Como puedes ver en la cita de Steve Jobs:
\n\n\nNo es trabajo del cliente saber lo que quiere.\"
\n
Esta cita es súper importante y la deberían recordar. Como investigadores,\nnosotros deberíamos intentar entender mejor los problemas o desafíos que tiene\nun usuario, en lugar de preguntarles lo que quieren. Es el trabajo de tu equipo\ndescubrir qué necesitan los usuarios en base a los descubrimientos de las\nentrevistas con usuarios.
\nComo mencionamos, una forma de evitar preguntar qué quieren las personas es\nhacer más preguntas acerca del contexto de usar el producto.
\nAquí hay 3 preguntas fáciles que te pueden ayudar a llegar al objetivo de\nidentificar lo que los usuarios necesitan o quieren:
\nResponde a preguntas con preguntas
\nAlgunos consejos para tener en mente:
\nLas entrevistas con usuarios son una herramienta muy importante para poder\nobtener más datos sobre cómo se sienten los usuarios con un producto o servicio.\nPara realizar una buena entrevista debemos hacer un buen planeamiento y seguir\nalgunos tips.
\n
La foto de la presentación, es una foto del explorador \"Curiosity\" de Marte,\nque fue lanzado por la NASA en el 2011 con la meta de determinar si Marte algún\ndía sería capaz de sostener vida microscópica. La segunda meta del explorador\nera recolectar data sobre Marte y comprender cómo era el ambiente y ecosistema.\nDemoró más de una semana de investigación, desarrollo y prueba poder construir\nun explorador que trabajaría en otro planeta.
\nTal como los astrofísicos que diseñaron el explorador de Marte, como\ninvestigadores tenemos que poner a prueba nuestros diseños continuamente para\nasegurarnos de que podemos generar soluciones \"de otro mundo\" para nuestros\nclientes.
\nY como el nombre de esta nave, \"Curiosidad\", debemos tener curiosidad por\nrecolectar data y preguntar las preguntas correctas a nuestros usuarios para\nasegurar que estamos diseñando productos que cumplen con sus necesidades.
\nPara este curso, hicimos una mini investigación preguntándole a personas que han\ntrabajado en investigación por décadas (gente que trabaja para Google Ventures,\nFacebook, WeWork e incluso bancos y corporaciones internacionales). Les\npreguntamos cuál era la característica más importante que tenía que tener\nalguien que sobresalía en el mundo de la investigación.
\nLa respuesta más común fue que los investigadores necesitan tener curiosidad.\nTienen que estar interesados en entender el motor que mueve a sus usuarios y a\nlos seres humanos en general.
\nDeben cuestionar todo y preguntarse constantemente:
\nNunca recibimos respuestas que dijeran que un investigador debe ser\nextrovertido, creemos que ese es un mito que no está basado en la realidad.\nLos grandes investigadores pueden ser introvertidos o extrovertidos, pero tienen\nque ser inquisitivos y buscar siempre formas de aprender más sobre la gente.
Ahora, en una situación de entrevista con usuarios, lo más probable es que no\npreguntemos \"por qué\" 5 veces seguidas. Esto es porque sería muy molesto para el\nusuario y probablemente no nos ayudaría a lograr nuestros objetivos de\ninvestigación.
\nAsí que no solo tenemos que ser curiosos, tenemos que aprender a hacer mejores\npreguntas.
\nHacer las preguntas correctas es realmente importante por 2 razones:
\nUna cosa por mencionar, es que, como investigador, estás representando a la\ncompañía para la que trabajas, y hay una política en la que nos debemos\nconcentrar durante las sesiones de investigación, sobre todas las cosas:\nNunca hagas daño. Si una entrevista va mal y sientes que no has aprendido nada\nde lo que saliste a buscar, como mínimo deberías asegurarte que el participante\ndebería salir de la sesión sintiendo que su punto de vista fue apreciado y\nescuchado. Lo peor que puede pasar en un estudio es que el participante sienta\nque fue puesto a prueba y se equivocó en todas las respuestas, o peor aún, que\nse lleve una imagen negativa de la empresa por la forma en que lo trataste.
Vamos a discutir algunas tácticas para evitar esto después, podría sonar como\nsentido común, pero son cosas importantes para tener en mente. Es especialmente\nimportante si trabajas con stakeholders de la empresa con un interés en el\nresultado de la investigación, y que podrían intentar jalar la conversación con\nusuarios en una dirección particular.
\nSiempre debes poner la comodidad y necesidades de tus usuarios primero, y los\nobjetivos de la investigación en un cercano segundo lugar.
\nMuchos investigadores mencionan el arco de una entrevista, que básicamente es la\nforma en que la entrevista progresa a través del tiempo que tienes con los\nparticipantes. En el eje horizontal tienes el tiempo y en el eje vertical tienes\nun promedio de cuánto es probable que aprendas durante ese momento.
\nTípicamente en los primeros cinco minutos vas a pasar la mayoría del tiempo\ntratando de hacer que tu participante se sienta cómodo, y ponerlo en contexto\ncon el proyecto. Puedes empezar por presentarte y explicar por qué lo has\nelegido como participante a él o ella.
\nEl siguiente paso se llama construir rapport, que básicamente significa hacer\nque la otra persona se sienta cómoda y sienta que puede confiar en ti. En esta\nfase en verdad no vas a aprender mucho. Eso está bien, porque todo el tiempo que\ninviertas en hacer que tu participante se sienta cómodo es increíblemente\nimportante. Si se sienten cómodos, hay mucha más probabilidad de que te de sus\nopiniones y pensamientos honestos. Puedes charlar un rato con el participante -\npreguntarle por su día o conversar sobre un tema neutral.
Durante el calentamiento, te concentrarás en una lista de preguntas que te darán\nun mejor entendimiento sobre la persona que estás entrevistando, así como de\ntodo el contexto en el que usa el producto. Como verás, en este punto ya estás\nempezando a aprender un poco más.
\nUna vez que has hecho algunas preguntas de fondo, puedes pasar a la \"carnecita\"\nde la entrevista. Si estás haciendo una investigación de observación o de\nusabilidad, este es el momento en que todas tus preguntas de ese tipo irán. En\neste momento en la entrevista generalmente será cuando más aprendes sobre el\ntema o producto particular para el que hiciste la investigación.
\nLuego de completar las preguntas detalladas, puedes hacer unas cuantas preguntas\nde resumen. Esta parte es muy importante porque los usuarios típicamente te\ndarán buenos insights y citas acerca de su experiencia en general. Como verás,\nlos aprendizajes en el arco de la entrevista se disparan justo al final, porque\npedirle a la gente que resuma su experiencia los hace reflexionar y conectar los\npuntos un poquito. (Algunas veces la gente necesita un poco de tiempo para\npensar antes de poder articular lo que funcionó y lo que no funcionó.)
\nAlgunos ejemplos de preguntas de informe:
\nMuchos investigadores hablan de la importancia de \"construir rapport\", que\nesencialmente significa generar confianza y un espacio seguro donde tu\nparticipante sienta que realmente puede abrirse y compartir sus experiencias.
\nEs importante que no empieces inmediatamente con preguntas detalladas para la\nentrevista. Por ejemplo, nunca saltes directo a preguntas de testeo de\nusabilidad porque realmente necesitas que tu usuario se acostumbre y se sienta\ncómodo contigo primero. Usa los primeros minutos para preguntarle un poco sobre\nsí mismo.
\nAlgunos consejos que pueden ayudarte mientras te preparas para entrevistar\nusuarios:
\n¿Qué entendiste de esta frase?
\nUno de los retos de la investigación cualitativa en general es que la gente\nsuele sub-reportar el mal comportamiento. No es porque sean malas personas, o\nestén tratando de engañarte, pero los humanos en general quieren ser vistos como\nbuenas personas. Solemos racionalizar el mal comportamiento convenciéndonos de\nque lo hacemos mucho menos de lo que en verdad hacemos.
\nPor ejemplo, podríamos observar a las personas en lugar de preguntarles por su\ncomportamiento.
\nEsta foto es un ejemplo de un tipo de mal comportamiento que la gente\nsub-reporta. Cuando se trata de contraseñas, mucha gente no usa claves seguras y\nelige algo como 123456 siempre que no hay requerimientos obligatorios de\nseguridad. Muchas personas también guardan sus contraseñas escritas en post-its\nen su escritorio. La mayoría de personas saben que no es seguro hacer esto, pero\nlo hacen porque es seguro y conveniente.
\nEn una entrevista, si preguntamos a las personas si siempre usan contraseñas\nseguras, es posible que digan que sí, pero esto no necesariamente representa lo\nque en verdad hacen. Este es un ejemplo clave de cómo las personas no siempre\nhacen lo que dicen que harán, y vice versa.
\nPara evitar este problema potencial, podríamos pedir para observar a alguien\nmientras entra a una página web con su contraseña, en lugar de preguntarle si\nusa una contraseña segura.
\n...pero esto no es una buena representación de su comportamiento real
\nEl segundo problema común es que muchas veces en entrevistas hacemos preguntas\nhipotéticas sobre lo que la gente haría en una situación particular, pero esto\nno siempre es una buena representación de cómo actuarían en verdad. Los humanos\nen general no son buenos para explicar su comportamiento potencial en el futuro,\nporque muchísimo de nuestro comportamiento depende del contexto específico en el\nque nos encontramos.
\nUna táctica bastante útil es pedir a tus participantes que te cuenten sobre\nexperiencias reales y anécdotas relacionadas al tema que estás investigando.
\nUna mala pregunta que le encanta a los investigadores es \"Pagarías por este\nproducto?\" o \"Crees que usarías este producto en el futuro?\" Estas no son\npreguntas valiosas en una entrevista.
\nEn el caso de \"Pagarías por este producto?\" podrías preguntarle por otros\nproductos por los que han pagado en el pasado que puedan compararse, y en esos\ncasos cuánto pagaron y por qué. También puedes intentar de hacer preguntas más\ngenerales sobre otros productos que han usado y seguir esas preguntas con otras\nsobre el precio.
\nApégate al dicho \"Mostrar, no contar\" siempre que puedas, porque el feedback que\nrecibas será mucho más rico y valioso.
\nOtro problema frecuente que vemos como investigadores es que la gente normalmente\nno tiene tan buena memoria para recordar cualquier cosa que haya pasado hace más\nde una semana.
\nUna opción para evitar este problema es hacer preguntas sobre una experiencia\nmuy específica. Por ejemplo, en lugar de preguntarle de manera general si leyó\nlos Términos y Condiciones, podrías preguntarle acerca de la última vez que tuvo\nque registrarse para un servicio como AirBnB y cómo lo hicieron. Puedes seguir\nesas preguntas con una acerca de si leyeron los términos o no, y por qué no.
\nNuevamente, sería mucho mejor si tienes la opción de observar gente pasando por\nun flujo de registro.
\n...y no están calificados para dar feedback sobre el diseño o saber exactamente\nqué quieren en un producto
\nOtro problema común que pasa muy seguido en entrevistas de investigación es que\nlos investigadores tienden a preguntar a los usuarios qué pensaron de un diseño.\nLa mayoría de veces los usuarios no son diseñadores y no deberían tener que\ndarte feedback sobre un diseño para que puedas interpretar formas de mejorar sus\nexperiencias.
\nOtro error común es preguntar a los usuarios exactamente qué quieren tener en un\nproducto. Como puedes ver en la cita de Steve Jobs:
\n\n\nNo es trabajo del cliente saber lo que quiere.\"
\n
Esta cita es súper importante y la deberían recordar. Como investigadores,\nnosotros deberíamos intentar entender mejor los problemas o desafíos que tiene\nun usuario, en lugar de preguntarles lo que quieren. Es el trabajo de tu equipo\ndescubrir qué necesitan los usuarios en base a los descubrimientos de las\nentrevistas con usuarios.
\nComo mencionamos, una forma de evitar preguntar qué quieren las personas es\nhacer más preguntas acerca del contexto de usar el producto.
\nAquí hay 3 preguntas fáciles que te pueden ayudar a llegar al objetivo de\nidentificar lo que los usuarios necesitan o quieren:
\nResponde a preguntas con preguntas
\nAlgunos consejos para tener en mente:
\nEn los tests de usabilidad probamos nuestros productos en cualquier versión\n(muchas veces prototipos) para ver hasta qué nivel los usuarios pueden completar\ntareas en ellos. Durante esta etapa vemos cómo los usuarios interactuan con los\nproductos y qué problemas pueden tener para completar las tareas.
\nMira este video de Jakob Nielsen contando por qué y cómo testear con usuarios:
\n\nLas UX Designers estamos constantemente haciendo testeos de los productos con\nlos que trabajamos. Testeamos en distintos tipos de fidelidad, desde nuestros\nprimeros wireframes o sketches en papel, nuestros prototipos interactivos y\ntambién el producto \"final\" (como estamos constantemente mejorando, rara vez\nun producto es el final) en código. Para empezar, miira los siguientes ejemplos\nde cómo se pueden hacer tests de usabilidad con un prototipo en papel e incluso\ncon frutas. Intenta anotar todos los aprendizajes que se van teniendo con esta\ntécnica.
\n\n\nMira este video de NNgroup contándonos valiosos tips para facilitar tests de\nusabilidad:
\n" + "body": "En los tests de usabilidad probamos nuestros productos en cualquier versión\n(muchas veces prototipos) para ver hasta qué nivel los usuarios pueden completar\ntareas en ellos. Durante esta etapa vemos cómo los usuarios interactuan con los\nproductos y qué problemas pueden tener para completar las tareas.
\nMira este video de Jakob Nielsen contando por qué y cómo testear con usuarios:
\n\nLas UX Designers estamos constantemente haciendo testeos de los productos con\nlos que trabajamos. Testeamos en distintos tipos de fidelidad, desde nuestros\nprimeros wireframes o sketches en papel, nuestros prototipos interactivos y\ntambién el producto \"final\" (como estamos constantemente mejorando, rara vez\nun producto es el final) en código. Para empezar, miira los siguientes ejemplos\nde cómo se pueden hacer tests de usabilidad con un prototipo en papel e incluso\ncon frutas. Intenta anotar todos los aprendizajes que se van teniendo con esta\ntécnica.
\n\n\nMira este video de NNgroup contándonos valiosos tips para facilitar tests de\nusabilidad:
\n" } } }, @@ -247,7 +247,7 @@ "intl": { "es": { "title": "User personas", - "body": "Un User Persona es un personaje de ejemplo que representa al grupo de usuarios\nde tu producto. Se crea luego de haber realizado una investigación. Este\nartefacto es creado para entender mejor las metas, deseos y limitaciones de los\nprincipales grupos de usuarios de un producto. Además el User Persona es un\nproducto vivo que iremos actualizando según vamos conociendo mejor a nuestro\nusuario.
\n\nHay que tener en cuenta que un User Persona es un arquetipo no un estereotipo.
\nAquí otros ejemplos:
\nAlan Cooper nos cuente por qué son\nimportantes en este video:
\n\nUsuario elástico: cuando se tienen que tomar decisiones, el usuario se\nvuelve elástico. Ej. “A veces es power user, a veces es super tech, a veces no\nsabe nada de tech, a veces compra mucho por internet, otras no.”
\nDiseño autoreferenciado: cuando diseñadores y desarrolladores proyectan\nsus propias metas, motivaciones, habilidades y modelos mentales en el diseño\ndel producto.
\nEj. Caso del rediseño del app de nike que eliminó una función que era muy\nutilizada por los usuarios: \"el correr por metas\"
\nCasos extremos: los user personas evitan diseñar para casos extremos\n(situaciones que probablemente no le sucedan a la mayoría de los usuarios).\nLos casos extremos no deberían ser el centro del diseño. Ej: crear un api para\ntu producto, agregar Bitcoin como medio de pago.
\nUna primary persona es el target principal para diseñar el producto y su\ninterfaz. El producto solo debería tener una persona primaria.
\nUna secondary persona, representa a un grupo de usuarios que estará satisfecho\ncon la mayor parte del producto creado para la persona primaria. Sin embargo,\nesta persona tiene otras necesidades adicionales que se pueden ir agregando al\nproducto de acuerdo al tiempo y costo del proyecto.
\nCustomer persona, representa las necesidades de personas que no necesariamente\nson usuarios, pero sí influyen al comprar un producto. Es clásico el ejemplo de\nlas personas que trabajan en el área de compras de alguna empresa, ellos son los\nencargados de pedir cotizaciones, de negociar, etc. sin embargo, no serán los\nusuarios finales de los productos que compran. Al tener a este tipo de personas,\nbuscamos entender sus necesidades, para así poder satisfacerlas, ya que su\nsatisfacción se verá reflejada en el éxito del producto.
\nEn este video de Udacity nos muestran un ejemplo de este tipo de personas:
\n\nServed persona, representan las necesidades de personas que serán atendidas con\nun producto. Por ejemplo, si estamos trabajando en un aplicativo para tomar\npedidos en un restaurante, no solo tenemos que pensar en el mesero que utilizará\nel app sino también en los comensales a quienes se atenderá con este aplicativo.\n¿Qué pasa si el uso del aplicativo les restringe los cambios que pueden hacer\na su pedido? o ¿Si el uso del aplicativo hace más lenta la toma del pedido?
\nNegative persona, representan a las personas para quienes NO irá dirigido el\nproducto. Por ejemplo, criminales, muchas veces tenemos que pensar en formas\nde evitar que personas con motivaciones negativas utilicen nuestros productos\ncomo un app bancaria o un app de chat encriptado.
\nIMPORTANTE: siempre debemos enfocarnos en resolver las necesidades de nuestro\nuser persona primario
\nSi no hubiera un usuario primario y tomaramos en cuenta las necesidades de todos\npasaría esto:
\nSin embargo, si entendemos que los usuarios son distintos, con distintas\nnecesidades, podríamos llegar a soluciones como estas:
\nSi no tienes en cuenta quién es tu usuario real mientras creas un producto,\nte podrían pasar cosas como esta:
\n\nUn User Persona es un personaje de ejemplo que representa al grupo de usuarios\nde tu producto. Se crea luego de haber realizado una investigación. Este\nartefacto es creado para entender mejor las metas, deseos y limitaciones de los\nprincipales grupos de usuarios de un producto. Además el User Persona es un\nproducto vivo que iremos actualizando según vamos conociendo mejor a nuestro\nusuario.
\n\nHay que tener en cuenta que un User Persona es un arquetipo no un estereotipo.
\nAquí otros ejemplos:
\nAlan Cooper nos cuente por qué son\nimportantes en este video:
\n\nUsuario elástico: cuando se tienen que tomar decisiones, el usuario se\nvuelve elástico. Ej. “A veces es power user, a veces es super tech, a veces no\nsabe nada de tech, a veces compra mucho por internet, otras no.”
\nDiseño autoreferenciado: cuando diseñadores y desarrolladores proyectan\nsus propias metas, motivaciones, habilidades y modelos mentales en el diseño\ndel producto.
\nEj. Caso del rediseño del app de nike que eliminó una función que era muy\nutilizada por los usuarios: \"el correr por metas\"
\nCasos extremos: los user personas evitan diseñar para casos extremos\n(situaciones que probablemente no le sucedan a la mayoría de los usuarios).\nLos casos extremos no deberían ser el centro del diseño. Ej: crear un api para\ntu producto, agregar Bitcoin como medio de pago.
\nUna primary persona es el target principal para diseñar el producto y su\ninterfaz. El producto solo debería tener una persona primaria.
\nUna secondary persona, representa a un grupo de usuarios que estará satisfecho\ncon la mayor parte del producto creado para la persona primaria. Sin embargo,\nesta persona tiene otras necesidades adicionales que se pueden ir agregando al\nproducto de acuerdo al tiempo y costo del proyecto.
\nCustomer persona, representa las necesidades de personas que no necesariamente\nson usuarios, pero sí influyen al comprar un producto. Es clásico el ejemplo de\nlas personas que trabajan en el área de compras de alguna empresa, ellos son los\nencargados de pedir cotizaciones, de negociar, etc. sin embargo, no serán los\nusuarios finales de los productos que compran. Al tener a este tipo de personas,\nbuscamos entender sus necesidades, para así poder satisfacerlas, ya que su\nsatisfacción se verá reflejada en el éxito del producto.
\nEn este video de Udacity nos muestran un ejemplo de este tipo de personas:
\n\nServed persona, representan las necesidades de personas que serán atendidas con\nun producto. Por ejemplo, si estamos trabajando en un aplicativo para tomar\npedidos en un restaurante, no solo tenemos que pensar en el mesero que utilizará\nel app sino también en los comensales a quienes se atenderá con este aplicativo.\n¿Qué pasa si el uso del aplicativo les restringe los cambios que pueden hacer\na su pedido? o ¿Si el uso del aplicativo hace más lenta la toma del pedido?
\nNegative persona, representan a las personas para quienes NO irá dirigido el\nproducto. Por ejemplo, criminales, muchas veces tenemos que pensar en formas\nde evitar que personas con motivaciones negativas utilicen nuestros productos\ncomo un app bancaria o un app de chat encriptado.
\nIMPORTANTE: siempre debemos enfocarnos en resolver las necesidades de nuestro\nuser persona primario
\nSi no hubiera un usuario primario y tomaramos en cuenta las necesidades de todos\npasaría esto:
\nSin embargo, si entendemos que los usuarios son distintos, con distintas\nnecesidades, podríamos llegar a soluciones como estas:
\nSi no tienes en cuenta quién es tu usuario real mientras creas un producto,\nte podrían pasar cosas como esta:
\n\nEl customer journey map, es una herramienta de Design Thinking que permite\nplasmar en un mapa, cada una de las etapas, interacciones, canales y elementos\npor los que atraviesa nuestro cliente desde un punto a otro de nuestro servicio.
\nLos elementos necesarios para elaborar un buen customer journey map son los\nsiguientes:
\nMira esta forma distinta de mostrar un journey map en video:
\n\nEl customer journey map, es una herramienta de Design Thinking que permite\nplasmar en un mapa, cada una de las etapas, interacciones, canales y elementos\npor los que atraviesa nuestro cliente desde un punto a otro de nuestro servicio.
\nLos elementos necesarios para elaborar un buen customer journey map son los\nsiguientes:
\nMira esta forma distinta de mostrar un journey map en video:
\n\nMira este video sobre qué es storytelling (recuerda activar los subtítulos):
\n\nComo dicen en el video todos queremos escuchar historias y todos sabemos contar\nhistorias. ¿No estás segura? Júntate con tus compañeras de mesa y hagan este\nejercicio:
\nLa primera crea una oración que empiece con \"había una vez\". Luego la segunda,\ncomplementa empezando la siguiente oración con \"y todos los días\", y así hasta\nque usen todas las siguientes frases o algunas adicionales que quieran probar:
\nPara terminar utilicen las siguientes frases:
\nCon este ejercicio te darás cuenta que todos somos buenos para contar historias.\nHemos nacido con esa capacidad y es algo que hacemos todos los días.
\nPero, ¿cómo podríamos utilizar esa capacidad que tenemos para enganchar a\nnuestros usuarios y clientes?
\n\"La narrativa es como esculpir, donde tienes que ir tallando hasta que revelas\nalgo hermoso.\" Esta es una cita de la clase de narrativa de IDEO.
\nLa idea principal aquí es que para una buena narrativa no tienes que revelar las\npartes más importantes de la historia desde el inicio. Debes generar expectativa\npara lo más importante e ir enganchando a tu audiencia desde el principio.
\nAlgunos consejos de técnicas narrativas que deberían servirles al pensar en cómo\ncontar la historia de lo que han aprendido durante el proyecto:
\nAlgunos consejos adicionales:
\n“Crear conciencia en las historias se trata de desencadenar reacciones\nemocionales. Alegría 😀, sorpresa 😯, tristeza 😟, ira 😡, miedo 😱,\ndisgusto 😖.”
\nPuedes usar esta plantilla para ayudarte a crear la historia que quieres contar
\nMira este video sobre qué es storytelling (recuerda activar los subtítulos):
\n\nComo dicen en el video todos queremos escuchar historias y todos sabemos contar\nhistorias. ¿No estás segura? Júntate con tus compañeras de mesa y hagan este\nejercicio:
\nLa primera crea una oración que empiece con \"había una vez\". Luego la segunda,\ncomplementa empezando la siguiente oración con \"y todos los días\", y así hasta\nque usen todas las siguientes frases o algunas adicionales que quieran probar:
\nPara terminar utilicen las siguientes frases:
\nCon este ejercicio te darás cuenta que todos somos buenos para contar historias.\nHemos nacido con esa capacidad y es algo que hacemos todos los días.
\nPero, ¿cómo podríamos utilizar esa capacidad que tenemos para enganchar a\nnuestros usuarios y clientes?
\n\"La narrativa es como esculpir, donde tienes que ir tallando hasta que revelas\nalgo hermoso.\" Esta es una cita de la clase de narrativa de IDEO.
\nLa idea principal aquí es que para una buena narrativa no tienes que revelar las\npartes más importantes de la historia desde el inicio. Debes generar expectativa\npara lo más importante e ir enganchando a tu audiencia desde el principio.
\nAlgunos consejos de técnicas narrativas que deberían servirles al pensar en cómo\ncontar la historia de lo que han aprendido durante el proyecto:
\nAlgunos consejos adicionales:
\n“Crear conciencia en las historias se trata de desencadenar reacciones\nemocionales. Alegría 😀, sorpresa 😯, tristeza 😟, ira 😡, miedo 😱,\ndisgusto 😖.”
\nPuedes usar esta plantilla para ayudarte a crear la historia que quieres contar
\nTe lo explicamos con dos gráficos muy parecidos.
\nEl primero nos dice que un producto digital exitoso es una mezcla de Diseño,\nTecnología y Negocios.
\nEl segundo gráfico del libro AboutFace\nva un poco más allá y nos dice que un producto exitoso tiene que ser deseable\n(diseño), viable (negocios) y posible (tecnología).
\nUn producto no será exitoso si es que tiene pérdidas económicas para una\nempresa. Por otro lado, si un producto no es factible de ser construido por el\nequipo técnico de una empresa, este no verá la luz nunca. Y por último, si una\nempresa construye un producto sin pensar en el usuario, es posible que no sea\nexitoso tampoco.
\nEl libro nos da unos ejemplos adicionales (que están cambiando/actualizándose):
\nEs por eso que buscamos que todas las UX Designers de Laboratoria conozcan un\npoco de cada una de estas disciplinas.
\nDe todos modos, como te estarás preguntando, en algunos casos el componente de\ndiseño es mayor, en otros el de tecnología y en otros el de negocio. Como\nmuestra este gráfico (puedes leer más en este artículo):
\n![\"distintos](\"https://cdn-images-1.medium.com/max/1600/1*HlaP27dGpKAqFbWm8-kBOQ.png\")
Aquí un artículo adicional que habla sobre estos 3 aspectos
\nAntes de empezar a hablar de negocios, hablaremos de las empresas en las que\ntrabajaremos y luego conoceremos un poco más de c/u de sus negocios.
\nCómo ya te hemos mencionado en distintas charlas, al salir de Laboratoria\nentrerás a trabajar en alguna organzación de estas categorías:
\nMira este video:
\n\nLos equipos de producto dentro de empresas o algunas startups que siguen viendo\na la startup como una versión pequeña de una compañia están trabajando de esta\nmanera:
\nPorque toman mucho tiempo y dinero en cosas que es probable no resultan (y sobre\ntodo sin conocer a sus usuarios).
\nLas empresas que están liderando el mundo digital están siguiendo estas 4\nestrategias:
\nEn lugar de apostar millones de dólares en soluciones que no llegan a tener\ntracción, los líderes de hoy están apostando por procesos de desarrollo\niterativos, basados en la experimentación.
\nPuedes ver un video más detallado aquí.
\nLíderes de hoy están abiertos a poner en las manos de terceros la capacidad de\ncrear propuestas de valor.
\nPuedes ver un video más detallado aquí.
\nLas empresas que ganan en digital tienen la capacidad de convertir data en\nconocimiento y utilizar ese conocimiento para diseñar mejores experiencias e\nimpulsar el negocio.
\nPuedes ver un video más detallado aquí.
\nLas empresas que ganan en digital reconocen que sus usuarios exigen que la\nexperiencia a través de canales sea consistente, integrada y fluida.
\nPuedes ver un video más detallado aquí.
\nTodas estas estrategias y cambios que ha traido la tecnología a los negocios,\nvienen acompañados también de un cambio en la cultura y organización en las\nempresas. Para eso miremos lo que nos cuentan en Spotify y Facebook sobre eso.
\nVideo de la cultura en spotify
\nLas cosas que se rescatan de este video son:
\nLas cosas que se rescatan de esta entrevista son:
\nTe lo explicamos con dos gráficos muy parecidos.
\nEl primero nos dice que un producto digital exitoso es una mezcla de Diseño,\nTecnología y Negocios.
\nEl segundo gráfico del libro AboutFace\nva un poco más allá y nos dice que un producto exitoso tiene que ser deseable\n(diseño), viable (negocios) y posible (tecnología).
\nUn producto no será exitoso si es que tiene pérdidas económicas para una\nempresa. Por otro lado, si un producto no es factible de ser construido por el\nequipo técnico de una empresa, este no verá la luz nunca. Y por último, si una\nempresa construye un producto sin pensar en el usuario, es posible que no sea\nexitoso tampoco.
\nEl libro nos da unos ejemplos adicionales (que están cambiando/actualizándose):
\nEs por eso que buscamos que todas las UX Designers de Laboratoria conozcan un\npoco de cada una de estas disciplinas.
\nDe todos modos, como te estarás preguntando, en algunos casos el componente de\ndiseño es mayor, en otros el de tecnología y en otros el de negocio. Como\nmuestra este gráfico (puedes leer más en este artículo):
\n
Aquí un artículo adicional que habla sobre estos 3 aspectos
\nAntes de empezar a hablar de negocios, hablaremos de las empresas en las que\ntrabajaremos y luego conoceremos un poco más de c/u de sus negocios.
\nCómo ya te hemos mencionado en distintas charlas, al salir de Laboratoria\nentrerás a trabajar en alguna organzación de estas categorías:
\nMira este video:
\n\nLos equipos de producto dentro de empresas o algunas startups que siguen viendo\na la startup como una versión pequeña de una compañia están trabajando de esta\nmanera:
\nPorque toman mucho tiempo y dinero en cosas que es probable no resultan (y sobre\ntodo sin conocer a sus usuarios).
\nLas empresas que están liderando el mundo digital están siguiendo estas 4\nestrategias:
\nEn lugar de apostar millones de dólares en soluciones que no llegan a tener\ntracción, los líderes de hoy están apostando por procesos de desarrollo\niterativos, basados en la experimentación.
\nPuedes ver un video más detallado aquí.
\nLíderes de hoy están abiertos a poner en las manos de terceros la capacidad de\ncrear propuestas de valor.
\nPuedes ver un video más detallado aquí.
\nLas empresas que ganan en digital tienen la capacidad de convertir data en\nconocimiento y utilizar ese conocimiento para diseñar mejores experiencias e\nimpulsar el negocio.
\nPuedes ver un video más detallado aquí.
\nLas empresas que ganan en digital reconocen que sus usuarios exigen que la\nexperiencia a través de canales sea consistente, integrada y fluida.
\nPuedes ver un video más detallado aquí.
\nTodas estas estrategias y cambios que ha traido la tecnología a los negocios,\nvienen acompañados también de un cambio en la cultura y organización en las\nempresas. Para eso miremos lo que nos cuentan en Spotify y Facebook sobre eso.
\nLas cosas que se rescatan de este video son:
\nLas cosas que se rescatan de esta entrevista son:
\nEl primer paso para entender a los que serán nuestros clientes como Diseñadoras\nUX es entender porqué las empresas existen. Todas empresas existen con un fin,\nun fin que tiene que ver con el negocio que hay detrás, el objetivo que hay\ndetrás de lo que quieren que haga el usuario final, y que les supone un\nbeneficio y suele estar asociado con sus ganancias monetarias.
\nSin un modelo de negocio, o si éste no está bien resuelto, no tendrían\nganancias, y sin ganancias tendrían que cerrar sus puertas. Lo mismo ha pasado\ncon las empresas que no han sabido adaptar su modelo de negocio a los nuevos\ntiempos (por ejemplo BlockBuster, o Kodak).
\nEs cómo una empresa crea valor para sí misma mientras entrega productos o\nservicios para sus clientes.
\nSaber y entender la existencia de Modelos de negocios, te van a ayudar a abrir\ntu mente a muchas formas de ver o plantear una idea y no sólo eso, sino llevarla\na cabo y entender todos los factores relacionados para ello.
\nY al momento de trabajar para una empresa, esto te va a ayudar a entender para\nquién trabajas, dónde estás parada y hacia donde debes ir. Pero no sólo eso,\nsino entender si lo que estás proponiendo es factible.
\nLa intención de entender el contexto de la empresas y sus objetivos de negocio\nes para estar en sincronía con la empresa y así, lo que se quiera hacer o\nproponer esté alineado con sus objetivos, canales, partners, actividades, etc.
\nAlgunas empresas y startups usan una herramienta llamada Business Model Canvas.
\nEl BMC es una herramientas con la cual vamos a contextualizar nuestra propuesta\nde valor y ver la “big picture”. Nos va a llevar a un entendimiento más completo\nde todos los factores que intervienen en el negocio de la empresa.
\n![\"BMC\"](\"https://cdn-images-1.medium.com/max/800/1*tbwlCEiKyXVEdSM6X74kmA.jpeg\")
Está dividido en secciones específicas, las cuales te van a orientar a que\naterrices una serie de elementos importantes a considerar como: propuesta de\nvalor, relaciones con los clientes, segmentos de los clientes, canales de\ndistribución, actividades clave, recursos clave, socios clave, estructura de\ncostos y flujos de ingresos o ganancias.
\nTe recomiendo ver los siguientes videos enlazados para entender de manera visual\nlo anterior, así como podrás ver algunas aplicaciones.
\nVideos para profundizar o ejemplificar:\nEjemplo 1 -\nEjemplo 2
\nMira estos ejemplos:\nNetflix -\nSpotify -\nDisney
\nEs interesante analizar y tener en mente si lo que vamos a diseñar es un\nproducto que satisface o genera una necesidad, esto nos da una perspectiva\nclara de hacia dónde debe ir orientado nuestro mensaje.
\n![\"necesidad](\"https://image.ibb.co/bRMOjJ/need.jpg\")
Como UX Designers, necesitamos entender el modelo de negocio de la empresa en\ngeneral y específicamente entender los objetivos y metas del área que nos\ncontrata y del proyecto que quieren que hagamos: cómo lo ligamos a las\nnecesidades de los usuarios y las métricas del proyecto que tenemos entre manos.
\nEl Scope Canvas está inspirado en el BMC con el objetivo de conectar las\nnecesidades de los usuarios con los objetivos de negocio de la organización.
\nEl Scope Canvas, como tal, es una manera visual de ordenar los conceptos\nbásicos. Nos ayuda a tener siempre en mente y presentes las motivaciones,\nnecesidades, objetivos y dolores del usuario a la hora de aterrizar el proyecto\nUX.
\n![\"scope](\"https://image.ibb.co/hO4CBy/scope_canvas_es.png\")
Te recomiendo ver el siguiente link donde podrás saber de primera fuente acerca\ndel SC - scope canvas
\nRecuerda que la práctica hace a la maestra, ahora tienes estas herramientas con\nlas que puedes comenzar y practicar para ver desde el mundo de las empresas.
" + "body": "El primer paso para entender a los que serán nuestros clientes como Diseñadoras\nUX es entender porqué las empresas existen. Todas empresas existen con un fin,\nun fin que tiene que ver con el negocio que hay detrás, el objetivo que hay\ndetrás de lo que quieren que haga el usuario final, y que les supone un\nbeneficio y suele estar asociado con sus ganancias monetarias.
\nSin un modelo de negocio, o si éste no está bien resuelto, no tendrían\nganancias, y sin ganancias tendrían que cerrar sus puertas. Lo mismo ha pasado\ncon las empresas que no han sabido adaptar su modelo de negocio a los nuevos\ntiempos (por ejemplo BlockBuster, o Kodak).
\nEs cómo una empresa crea valor para sí misma mientras entrega productos o\nservicios para sus clientes.
\nSaber y entender la existencia de Modelos de negocios, te van a ayudar a abrir\ntu mente a muchas formas de ver o plantear una idea y no sólo eso, sino llevarla\na cabo y entender todos los factores relacionados para ello.
\nY al momento de trabajar para una empresa, esto te va a ayudar a entender para\nquién trabajas, dónde estás parada y hacia donde debes ir. Pero no sólo eso,\nsino entender si lo que estás proponiendo es factible.
\nLa intención de entender el contexto de la empresas y sus objetivos de negocio\nes para estar en sincronía con la empresa y así, lo que se quiera hacer o\nproponer esté alineado con sus objetivos, canales, partners, actividades, etc.
\nAlgunas empresas y startups usan una herramienta llamada Business Model Canvas.
\nEl BMC es una herramientas con la cual vamos a contextualizar nuestra propuesta\nde valor y ver la “big picture”. Nos va a llevar a un entendimiento más completo\nde todos los factores que intervienen en el negocio de la empresa.
\n
Está dividido en secciones específicas, las cuales te van a orientar a que\naterrices una serie de elementos importantes a considerar como: propuesta de\nvalor, relaciones con los clientes, segmentos de los clientes, canales de\ndistribución, actividades clave, recursos clave, socios clave, estructura de\ncostos y flujos de ingresos o ganancias.
\nTe recomiendo ver los siguientes videos enlazados para entender de manera visual\nlo anterior, así como podrás ver algunas aplicaciones.
\nVideos para profundizar o ejemplificar:\n -\n
\nMira estos ejemplos:\n -\n -\n
\nEs interesante analizar y tener en mente si lo que vamos a diseñar es un\nproducto que satisface o genera una necesidad, esto nos da una perspectiva\nclara de hacia dónde debe ir orientado nuestro mensaje.
\n
Como UX Designers, necesitamos entender el modelo de negocio de la empresa en\ngeneral y específicamente entender los objetivos y metas del área que nos\ncontrata y del proyecto que quieren que hagamos: cómo lo ligamos a las\nnecesidades de los usuarios y las métricas del proyecto que tenemos entre manos.
\nEl Scope Canvas está inspirado en el BMC con el objetivo de conectar las\nnecesidades de los usuarios con los objetivos de negocio de la organización.
\nEl Scope Canvas, como tal, es una manera visual de ordenar los conceptos\nbásicos. Nos ayuda a tener siempre en mente y presentes las motivaciones,\nnecesidades, objetivos y dolores del usuario a la hora de aterrizar el proyecto\nUX.
\n
Te recomiendo ver el siguiente link donde podrás saber de primera fuente acerca\ndel SC - scope canvas
\nRecuerda que la práctica hace a la maestra, ahora tienes estas herramientas con\nlas que puedes comenzar y practicar para ver desde el mundo de las empresas.
" } } }, diff --git a/package.json b/package.json index 668dd6bad..025d421cc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bootcamp", - "version": "6.2.0", + "version": "6.3.0", "description": "Proyectos y tópicos del Bootcamp de @Laboratoria", "repository": "Laboratoria/bootcamp", "keywords": [![\"ejemplo](\"https://lh5.googleusercontent.com/jBXLdsvtzd1grMS_Jw04O__5kN6K6nyPkXXQt0UBmwgS7mNCjFEIOdKUsdXx0vS_7UYF37pSYReRmB5CVLDfUKJ50RLUSfgpEE4zUUXIAuc_I4mUWtkGs_D8weQfRzUejxZ2WHSO8Ng\")
![\"user](\"https://lh6.googleusercontent.com/IHbNO1auP8meG012DbRB1ojUMQmEnegcxvCxXT_ljCcWHwJnsX1cMqfU_eg6KOdU6LptcPzNXK-G8grfSBwhMaHakg_2OVBEAmk0xNO_brEoXxmAzUCw5GeVjofFdmkYIVg2Io-Ty0I\")
![\"user](\"https://lh3.googleusercontent.com/Pdo4V0P6d_Kp1X-EOWVoEzpsynDJkdvDzSFNPtF5S4JrRhQn32wj5jI4OWJTlqhFoxzZWX51s42r7BKxm3YZjBFHqcfKx_AiOsgeQr67vDp_3gIseaXqIvHgKkTUp6OvdxhnZwjbV_4\")
![\"caso](\"https://lh6.googleusercontent.com/3sBkn4owUMKXrjvZE3uaB3vAxlj3cxGWBzJRrrlqs2PxtD4ZyavD_g6U04Q52wyBTexoW6HSUFjbjywn-qlGSHkHJedVr0bp6uECvH962N2LQ6SYdI3C8wpZuikyk20vMgEj0B-FcnY\")
![\"auto](\"https://lh3.googleusercontent.com/S1NajGC6Evx_jz1kus1LZOwQKqB37qCkirRU6dRlAoKwyVlm82puazdQt0yOweADwaWDESX2TPAFHjLx_KamW_dmW9qU2gJ8c7-uLvmNpsgLF-4eaX1aEDQNcXCPD9mPJUE8ZpLM0Yw\")
![\"auto](\"https://lh6.googleusercontent.com/tN3Y9d3hm1Kz-0edbykBmN8eiM0f3_dKGpmtgPX6pOeKlpj8rLZihBe44AXInvOLoWuzyuw6cqg_SzG_cfSFmjNH2RdzmWLEpfdTChYClM3iPeyHWFrEH6YZpKMrPQyY1zQnkzk_ONU\")
![\"Ejemplo](\"https://lh4.googleusercontent.com/YVWF9L1-hQ-IKqL-CUVvelZSS9itA0jrTdOteNvvGk0JTAWefCRISryr3mWHcf0_0KdgEi6NZVOGGrNun7ySPWTIfo3BiC4jnULqJ60sMn3EieGmJBVw6_j867FjqwIZcN_PF7ybBpw\")
![\"plantilla](\"https://lh4.googleusercontent.com/kxUw1gkoNNlIh476EiMYF91faz2t1mKI5ukBq8qlK_s41AN_QZR8zNFdaFmKsiMq9pHL5AkvGSRBCWAjzrzY1hAbM9rpAss0O_duRvy8FmP-84BSBjW-ikV_5kHvnBCsmL03cskH_cc\")
![\"succesul](\"https://lh4.googleusercontent.com/EigZnNr6llXzx9v0DIxDObubSES4CVDyppnIBFjEfZNFJnFPGndJwoCjdY_Tozs6WO1LrJ42ee90hGSZRq8OcJZF_N4FVd_Uq0JOEQd7aNirYm8P_POSItcjhKDMuCx0iaKStFo7S84\")
![\"overall](\"https://lh3.googleusercontent.com/5264A7D9H-6W5lKlReph2ljW4gpP4BbyO9ufbS_WzI2EfZdaympBnt-ZIITXOgqbLj8K_88vLLQKZdfhymI4y7HzXAXrBNkfHSmMlRXkKQ6CcYUNT77jqpM7hve3apOpKtLEEdsn414\")