Digital Kids

Această pagină poate fi doar citită. Poți vedea sursa, dar nu poți modifica pagina. Consultă administratorul dacă ești de părere că ceva este în neregulă.
===== Lecția 1: Browser-ul: intermediar între utilizator și Internet =====

În această lecție vom învăța cum să ne configurăm browser-ul și să căutăm informații pe Internet.

{{ :module:02-aplicatii-internet:poza1.jpg?nolink&450 |}}

<note important> Înainte de a începe exercițiile din lecția curentă, nu uitați să chemați trainerul pentru a se uita pe exercițiile pe care voi le-ați rezolvat acasă. </note>

==== Exerciții recapitulative ====

1. În folderul **Digital Kids** de pe Desktop, faceți un nou folder cu numele **Lecția 3**.
2. În folderul **Lecția 3**, creați un fișier cu numele **Recapitulare**.
3. În fișierul creat la exercițiul 2, folosind diacritice, scrieți, pe linii separate, răspunsurile la următoarele întrebări:
  * Care este combinația de taste pe care o folosim pentru **copiere** (Copy)?
  * Care este combinația de taste pe care o folosim pentru **lipire** (Paste)?
<note tip>Răspunsul să fie de forma: **Tasta1 + Tasta2**. 

**//__Indiciu:__//**

**Tasta1** este una din următoarele: {**Shift**,  **Ctrl**,  **Alt Gr**,  **Enter**}. 
**Tasta2** este una din următoarele: {**C**,  **V**,  **X**,  **A**}  </note>
4. Arhivați fișierul **Recapitulare** din folderul **Lecția 3** într-o arhivă cu numele **Exercitiul 4** și cu extensia **zip**.
5. Intrați pe site-ul [[http://www.google.com/intl/ro/chrome/browser/|Browserul Chrome]] și descărcați aplicația **Google Chrome** (click-stânga pe butonul  {{:module:02-aplicatii-internet:browser_chrome.jpg?nolink&200|}} ). 
<note>Dacă vă apare fereastra de mai jos, apăsați butonul {{:module:02-aplicatii-internet:poza3.jpg?nolink&200|}}</note>
{{ :module:02-aplicatii-internet:poza2.jpg?nolink&400 |}}
6. Instalați aplicația pe care ați descărcat-o. Așteptați să se finalizeze instalarea.
==== Tutorial browser ====
=== 1. Ce este un browser? ===
<note important> **Recapitulare**

O **aplicație** este un program care realizează niște operații specifice. Tipuri de aplicații:
* player de muzică
* editor de text
* editor de poze
* **browser pentru navigarea pe Internet**: Chrome, Mozzila Firefox, Internet Explorer
* fiecare joc
</note>

Așadar, un **browser** este o **aplicație** cu care navigăm pe Internet.

La ultimul exercițiu recapitulativ ați instalat browserul **Chrome**. în continuare, toate exercițiile le vom realiza folosind browserul **Chrome**.
=== 2. Despre URL și link ===

<note>Un **URL** este un șir de caractere, având o formă specifică, prin care se reprezintă **adresa web** a unui site.</note>

<note warning>Atenție: într-un **URL** nu pot exista spații! (caracterul spațiu).</note>

**URL**-ul este format din 5 părți principale:

 1. ''http://,'' sau ''https://.'' Dacă URL-ul începe cu http://, această parte este, în general, ascunsă și nu se vede
 2. ''www.'' care este opțională și unele URL-uri nu o au
 3. numele adresei efective, eventual formată din mai multe cuvinte separate prin caracterul ''.'' (punct)
 4. ''.ro'', ''.com'', ''.org'' sau altceva (se numește domeniu. **Atenție!** Nu confundați cu extensia unui fișier.)
 5. (opțional) diverse șiruri de caractere care ne permit să fim mai specifici, toate separate prin caracterul ''/'' (slash)

Exemplu de **URL**-uri:
  * https://www.google.ro
  * http://koala.cs.pub.ro/dk/
  * www.wikipedia.org/
  * etc.

<note>Un **link** (prescurtarea de la **hiperlink**) este o **legătură** către un site, un document (documentul este acel fișier în care scriem), sau o parte a unui site sau document.</note> 

**Linkul** este reprezentat printr-un șir de cuvinte, dar poate să aibă orice formă. Uneori are aceeași formă cu un URL, iar în acest caz el este o legătură spre site-ul a cărui adresă este acel URL.

<note warning>Nu confundați **linkul** cu **URL**-ul! Linkul este acel șir de cuvinte pe care putem să dăm click și ni se deschide un site, a cărui adresă este un URL.</note>
=== 3. Configurare browser ===
== Parole ==
* Există site-uri pe care le putem folosi în întregime numai dacă avem un **cont** creat pentru ele (Yahoo Mail, GMail, Facebook, etc). Pentru a ne autentifica pe acele conturi avem nevoie de un **nume de utilizator** (denumit și username) și o **parolă** (denumită și password).

<note tip>Browser-ul poate fi setat să "țină minte" parola și numele de utilizator ca să nu fim nevoiți să le scriem de fiecare dată.</note>

* **Pașii** necesari pentru a seta browser-ul să țină minte parola și numele de utilizator sunt următorii:
  - Dați click pe **meniul Chrome** {{:module:02-aplicatii-internet:poza4.jpg?nolink|}}, aflat în colțul din dreapta-sus a browser-ului Chrome
  - Din meniul care vi se deschide, selectați **Setări** (Settings)
  - În partea de jos a paginii care vi s-a deschis aveți opțiunea **Afişaţi setările avansate** (Show advanced settings). Dați click pe opțiune. Vă vor apărea mai multe secțiuni.
  - Căutați secțiunea **Parole și formulare** (Passwords and forms)
  - Sub această secțiune sunt două opțiuni. Bifați a doua opțiune: **Oferă salvarea parolelor introduse pe web** (Offer to save passwords I enter on the web)
  - Dacă ați urmat toți acești pași, browser-ul Chrome vă va solicita salvarea parolei de fiecare dată când vă conectați la un site nou. {{:module:02-aplicatii-internet:poza5.jpg?nolink|}}

== Folder pentru download ==
* Ați observat săptămâna trecută că fișierele descărcate de pe Internet se găseau într-un anumit folder.

<note tip>Browser-ul poate fi setat să descarce toate fișierele de pe Internet într-un anumit folder specificat de noi.</note>
* **Pașii** necesari pentru a seta browser-ul să descarce fișierele într-un anumit folder sunt următorii:
  - Primii 3 pași sunt aceiași cu primii 3 pași de mai sus: **meniul Chrome** -> **Setări** -> **Afişaţi setările avansate**
  - Căutați secțiunea **Descărcări** (Downloads)
  - Sub această secțiune este calea actuală către folderul în care se descarcă fișierele. Pentru a o modifica, faceți click-stânga pe butonul **Răsfoiți** (Change)
  - Din fereastra care vă apare puteți selecta un alt folder în care să se facă descărcarea fișierelor

== Pagina de pornire ==
* Ați observat că atunci când aveți deschis un site oarecare ales de voi și închideți browserul, în general, atunci când îl deschideți din nou, nu mai este deschis și site-ul pe care erați înainte. 
<note>**Exemplu**: de fiecare dată când închideți browserul în timpul lecției de la Digital Kids, atunci când deschideți din nou browserul trebuie să intrați încă o dată pe site-ul http://koala.cs.pub.ro/dk/ :-D</note>

<note tip>Browser-ul poate fi setat ca atunci când îl deschidem să ne deschidă la rândul lui site-ul nostru preferat.</note>
* **Pașii** necesari pentru a seta browser-ul să ne deschidă de fiecare dată un anumit site sunt următorii:
  - Primii 2 pași sunt aceiași cu primii 2 pași de mai sus: **meniul Chrome** -> **Setări** (nu mai este nevoie să dăm click pe opțiunea **Afişaţi setările avansate**)
  - Căutați secțiunea **La pornire** (On startup)
  - Sub această secțiune sunt trei opțiuni. Bifați ultima opțiune: **Deschideți o anumită pagină sau un set de pagini** (Deschideți o anumită pagină sau un set de pagini)
  - În dreptul acestei opțiuni, dați click pe **Setați paginile** (Set pages) (Observație: putem seta mai multe pagini de pornire și se vor deschide toate la pornirea browserului)
  - În fereastra care apare introducem URL-ul paginii. Introduceți următorul URL http://koala.cs.pub.ro/dk/ și apăsați **Ok**
  - Închideți browserul și redeschideți-l. Observați că se deschid două site-uri.

== Marcaje ==
* Se poate să dorim ca browserul să țină minte foarte multe site-uri. În acest caz ar fi foarte greu să-l setăm să le deschidă pe toate de fiecare dată.

<note tip>Browser-ul poate fi setat să păstreze **linkuri** către toate site-urile noastre preferate.</note>
* **Pașii** necesari pentru a păstra în browser site-urile preferate sunt următorii:
  - Deschidem site-ul al cărui link vrem să-l memorăm
  - În dreptul URL-ului, în partea dreaptă observăm conturul unei steluțe cu 5 colțuri
  - Facem click pe steluță și observăm că ea devine galbenă și sub ea ne apare o fereastră. În dreptul lui **Dosar** (Folder) alegem **Bara de marcaje** (Bookmarks bar) {{:module:02-aplicatii-internet:poza6.jpg?nolink&250|}} {{:module:02-aplicatii-internet:poza7.jpg?nolink&250|}}
  - Apăsăm **Terminat** (Done) și observăm ca ne-a apărut un **marcaj** pe bara gri de sub URL {{:module:02-aplicatii-internet:poza8.jpg?nolink&500|}}
  - De acum înainte putem să deschidem site-ul Digital Kids prin click pe acest **marcaj**
=== 4. Ce este o extensie de browser? ===
<note>O **extensie de browser** este o **aplicație** care se instalează din browser și este __folosită numai de către browser__. Extensiile sunt utile pentru că adaugă tot felul de funcționalități noi browserului.</note> 

<note tip>Pentru browserul Chrome, site-ul pe care găsim extensii se află la această adresă : [[https://chrome.google.com/webstore/category/extensions?hl=ro|Extensii pentru Chrome]]</note>

* Vrem să instalăm o extensie care ne elimină reclamele neplăcute din site-uri (numele ei este AdBlock Plus). **Pașii** necesari pentru a instala o extensie de browser sunt următorii:
  - întrăm pe site-ul cu extensii pentru browserul Chrome (click pe **linkul** din caseta verde de mai sus)
  - În caseta din colțul stânga-sus scriem numele extensiei pe care o vrem, în cazul nostru **AdBlock Plus**, și apăsăm tasta **Enter**
  - Observăm că se deschide o pagină pe care sunt mai multe nume de aplicații și extensii. Din secțiunea **Extensii** alegem extensia pe care o dorim, în cazul nostru prima, și facem click pe butonul albastru pe care scrie **Gratuit** {{:module:02-aplicatii-internet:poza11.jpg?nolink&800|}}
  - În fereastra care ne apare, facem click pe **Adăugați** (Add) {{:module:02-aplicatii-internet:poza12.jpg?nolink&300|}}
  - Așteptăm să se finalizeze instalarea și apoi observăm ca ne-a apărut un mic mesaj de confirmare în colțul din dreapta-sus al browserului, indicând spre iconița corespunzătoare extensiei {{:module:02-aplicatii-internet:poza_13.jpg?nolink&400|}}
  - Acum suntem protejați de reclamele nedorite din site-uri :-)
==== Tutorial căutare pe Internet ====
<note important>În această secțiune vom învăța cum să căutăm eficient pe Internet.</note>

Voi cum căutați informații pe Internet? Folosiți Google? Google este și el un site. Cum intrați pe site-ul www.google.ro?

=== 1. Bara de adrese ===

<note>**Bara de adrese** este acea casetuță din browser unde este scris **URL**-ul unui site.</note>

În Chrome, **bara de adrese** este situată în partea de sus a browserului. Asta înseamnă că dacă știm URL-ul unui site, îl putem scrie direct în bara de adrese pentru a accesa acel site, apăsăm tasta **Enter** și ni se deschide site-ul dorit.

<note tip>În Chrome, deasupra barei de adrese se află toate site-urile deschise de noi la un moment dat. Fiecare site este deschis într-o fereastră separată numită **Tab**. Pentru a deschide un **Tab** nou, facem click pe pătrățelul gri din dreapta ultimului **Tab** deschis. </note>

<spoiler | Exemplu bara de adrese> {{:module:02-aplicatii-internet:poza14.jpg?nolink&1400|}} </spoiler>

Atunci când accesăm un site, browserul "ține minte" **URL**-ul acestuia. De aceea, când accesăm un site pe care l-am mai accesat înainte, după ce scriem în **bara de adrese** primele litere din **URL**, sub ea ne apar câteva sugestii ale unor pagini web care al căror **URL**-uri încep cu literele introduse de noi. Dacă printre sugestii este și site-ul dorit de noi, putem să facem click pe **URL**-ul lui și ne va deschide site-ul, fără să fie nevoie să terminăm de scris tot **URL**-ul.


=== 2. Copiere/Lipire (Copy/Paste) URL-uri și imagini ===

* Am învățat că dacă știm **URL**-ul unui site îl putem accesa dacă scriem URL-ul său în **bara de adrese**. Dar ce facem dacă URL-ul este foarte lung și complicat? De exemplu, ați văzut un filmuleț interesant pe YouTube și vreți să îl arătați prietenilor voștri. Cum procedați dacă **URL**-ul arată așa http://www.youtube.com/watch?v=FqKqJDkhfNs&feature=share ?

* Așa cum am văzut că putem să copiem foldere și fișiere, în mod asemănător putem copia URL-uri.
* **Pașii** necesari pentru a putea copia URL-uri sunt:
  - Selectăm URL-ul. Avem două cazuri:
     - Dacă dorim să copiem URL-ul din bara de adrese, facem click-dreapta pe URL (pe text, nu pe spațiul gol de lângă URL) și din meniul care ne apare, alegem opțiunea **Selectați tot** (Select all). Observăm că URL-ul se încadrează într-un contur albastru.
     - Dacă dorim să copiem un URL pe care îl găsim scris undeva (într-un document, site, etc), îl selectăm pe tot până se încadrează în întregime într-un contur albastru.
  - După ce selectăm URL-ul, facem click-dreapta pe el, oriunde în conturul albastru și din meniul care apare, alegem opțiunea **Copiați** (Copy)
  - Deschidem un **Tab** nou și în bara de adrese din noul **Tab** (Atenție să fie goală bara de adrese!) facem click-dreapta și din meniul care ne apare, alegem opțiunea **Inserați și căutați** (Paste and go)
  - Observăm că ni s-a deschis site-ul dorit de noi

Am spus că vrem să trimitem prietenilor URL-ul site-ului pe care vrem să-l arătăm. În acest caz, în loc să deschidem un **Tab** nou la **pasul 3** și să inserăm URL-ul în el, îl putem insera într-un mesaj pe care îl trimitem prietenilor, de exemplu, pe chatul de la Facebook sau Messenger.

<note important>Dacă în loc să se deschidă site-ul apare orice mesaj de eroare, înseamnă că nu ați copiat bine tot URL-ul. Reluați pașii descriși mai sus.</note>

* Pentru a copia **URL-urile imaginilor** de pe Internet, **fără să descărcăm** imaginile în calculator, și pentru a le deschide într-un **Tab** nou sau pentru a le trimite prietenilor, **pașii** sunt asemănători ca în cazul URL-urilor:
  - facem click-dreapta pe poză și din meniul care ne apare, alegem opțiunea **Copiați adresa URL a imaginii** (Copy image URL)
  - repetăm pașii **3** și **4** de mai sus

<note warning>Nu confundați copierea **URL**-urilor imaginilor cu copierea imaginilor **pe calculator**. Pentru a copia o imagine de pe Internet pe calculator, facem click-dreapta pe imagine, din meniul care apare alegem opțiunea **Copiați imaginea** (Copy image), deschidem **Paint**, facem click-dreapta în Paint și alegem opțiunea **Lipire** (Paste), apoi salvăm imaginea în mod obișnuit.</note>
=== 3. Wikipedia și DEX online. ===

Pe Internet există foarte multe informații despre orice. Important este să știm cum să găsim informațiile care ne interesează.

Două **site-uri utile** în acest sens sunt : [[http://www.wikipedia.org/|Wikipedia]] și [[http://dexonline.ro/|DexOnline]].

<note tip>Observați că **numele** celor două site-uri sunt scrise cu **albastru** și au în stânga numelui un **cerculeț alb cu gri**. Asta înseamnă că acolo sunt **link**-uri și putem să facem click pe ele ca să ni se deschidă site-urile corespunzătoare. De acum înainte să țineți minte acest lucru, de fiecare dată când întâlniți un astfel de **link**.</note>

Ca să deschidem un link direct într-un alt **Tab**, fără să copiem URL-ul așa cum am învățat mai devreme, facem click-dreapta pe **link**, iar din meniul care apare alegem opțiunea **Deschideți linkul într-o filă nouă** (Open link in a new file).

[[http://www.wikipedia.org/|Wikipedia]] este o enciclopedie online unde găsim articole despre aproape orice. Deschideți **link**-ul corespunzător într-un **Tab** nou. Observați că s-a deschis următoarea pagină, iar săgetuțele albastre din imaginea ascunsă ''Wikipedia'' vă arată ce trebuie să faceți:
  - Scrieți despre ce subiect doriți informații
  - Alegeți limba română
  - Tastați **Enter** sau apăsați click pe buton pentru căutare
  - Observăm că ne apar mai multe rezultate; îl alegem pe cel mai relevant
<spoiler | Wikipedia> {{ :module:02-aplicatii-internet:poza15.jpg?nolink&600 |}} </spoiler>

[[http://dexonline.ro/|DexOnline]] este un dicționar explicativ al limbii române, online. Deschideți **link**-ul corespunzător într-un **Tab** nou. Observați că s-a deschis următoarea pagină, iar săgetuțele albastre din imaginea ascunsă ''DexOnline'' vă arată ce trebuie să faceți:
  - Scrieți cuvântul pe care vreți să-l căutați
  - Tastați **Enter** sau apăsați click pe butonul **caută**
<spoiler | DexOnline> {{ :module:02-aplicatii-internet:poza16.jpg?nolink&600 |}} </spoiler>
=== 4. Copiere text de pe Internet ===

Am văzut cum putem copia fișiere, foldere, chiar și **URL**-uri. Atunci de ce nu am putea copia și fragmente de text? Cum credeți că s-ar putea?

Imaginați-vă un fragment de text ca un URL foaaarte lung. Pașii pentru copierea unui fragment oricât de mare de text sunt aceiași ca în cazul copierii unui URL din altă sursă decât bara de adrese:
  - Selectăm tot fragmentul până se încadrează în întregime într-un contur albastru.
  - Facem click-dreapta pe fragmentul selectat, oriunde în conturul albastru și din meniul care apare, alegem opțiunea **Copiați** (Copy).
  - Deschidem un fișier text și facem click-dreapta și din meniul care ne apare, alegem opțiunea **Inserați** (Paste).
  - Observăm că în fișier s-a copiat fragmentul de text selectat de noi.

==== Bonus ====

[[http://translate.google.com/|Google Translate]] este un site cu care putem traduce fragmente întregi de text dintr-o limbă în alta. 
<note important>Atenţie, Google Translate nu traduce mereu corect. </note>

<spoiler | Google Translate> {{ :module:02-aplicatii-internet:poza17.jpg?nolink&1000 |}} </spoiler>
**Pașii** pe care trebuie să îi urmăm pentru a traduce un text sunt:
  - Scriem textul pe care vrem să îl traducem în caseta din stânga și selectăm limba în care este acest text (sau copiem un fragment de text, așa cum am învățat mai devreme, și îl inserăm în caseta din stânga și selectăm limba în care este acest text)
  - Deasupra casetei din dreapta selectăm limba în care vrem să fie tradus textul
  - Facem click pe butonul **Traduceți**
  - Observăm că în caseta din dreapta a apărut textul tradus
<note tip>Pentru a auzi cum se aude citit textul pe care vrem să-l traducem, în oricare dintre limbi, facem click pe imaginea ca un mic difuzor din colțul dreapta-jos al fiecărei casete de text (vedeți în imaginea de mai sus)</note>

==== Exerciții ====
1. Închideți toate tab-urile pe care le aveți deschise în prezent, cu excepția celui pentru Digital Kids, și apoi deschideți alte 3 tab-uri, câte unul pentru fiecare dintre site-urile următoare: [[https://www.google.ro/|Google]], [[http://www.wikipedia.org/|Wikipedia]], [[http://translate.google.com/|Google Translate]] .

<note tip>Folosiți metoda cu click-dreapta pe link-urile site-urilor pentru a le deschide într-un tab nou. Lăsați-le deschise până la finalul lecției. </note>

2. Deschideți într-un tab nou imaginea de la secțiunea **Bara de adrese**. La finalul acestui exercițiu să aveți în total 5 tab-uri deschise: imaginea și cele 4 tab-uri de la primul exercițiu.
3. Mergeți pe site-ul Google Translate pe care îl aveți deschis în tab de la exercițiile anterioare și adăugați-i un marcaj.
4. Mergeți în tab-ul imaginii deschise la exercițiul 2 și copiați-o pe laptop, în Paint. Salvați-o în folderul **Lecția 3** din **Digital Kids**, cu numele **Elementele unui browser**.
5. În folderul **Lecția 3** din **Digital Kids** creați un fișier text cu numele **Cățel**.
6. Mergeți în tab-ul în care este deschis site-ul Wikipedia și căutați informații despre **câine** în limba română. 
7. Copiați de pe Wikipedia, în fișierul creat la exercițiul 5, un fragment de text despre cățel care să conțină cel puțin un paragraf.
8. Același text copiat în fișier, copiați-l în Google Translate și traduceți-l în limba spaniolă. Ascultați traducerea în limba spaniolă.
====  Exerciţii distractive pentru acasă ====
  - Dacă nu ați terminat exercițiile de la lecție, terminați-le acasă.
  - În folderul **Lecția 3** din **Digital Kids** creați folderul cu numele **Tema 3**
  - În folderul **Tema 3** creat anterior, creați un fișier cu numele **Despre fluturi**.
  - Căutați pe Wikipedia informații despre fluture în limba română. **ATENȚIE!** Nu închideți pagina de pe Wikipedia până nu terminați tema, deoarece veți mai avea nevoie de ea în următoarele exerciții.
  - În fișierul **Despre fluturi** creat la exercițiul 3 copiați un paragraf de pe Wikipedia de la pagina despre fluturi deschisă la exercițiul 4. 
  - Copiați același paragraf în Google Translate și traduceți-l în limba engleză.
  - Copiați în același fișier creat la exercițiul 3, traducerea în engleză de pe Google Translate. După acest exercițiu, în fișier să existe atât paragraful în limba română, cât și paragraful în limba engleză.
  - Sub cele două paragrafe din fișier, copiați URL-ul paginii de Wikipedia de la exercițiul 4 (Din acest motiv v-am atenționat atunci să nu închideți pagina de Wikipedia :-D )
Digital Kids

Unelte utilizator

Unelte site

Unelte pagină
