Differences
This shows you the differences between two versions of the page.
|
uso:laboratoare:laborator-01:browser [2021/10/04 20:43] 127.0.0.1 external edit |
uso:laboratoare:laborator-01:browser [2022/10/05 12:26] (current) mihai_daniel.soare |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Folosirea eficientă a browserului web ====== | ====== Folosirea eficientă a browserului web ====== | ||
| - | În viața de zi cu zi aplicația pe care o folosim probabil cel mai des, indiferent de platformă sau sistem de operare, este **browserul web**. Acesta rulează pe smartphone-uri, laptopuri, tablete și este folosit pentru rularea aplicațiilor web cum ar fi clienți de mesagerie, rularea de jocuri, afișarea de conținut al unei pagini cu știri, sau conținut pe rețelele de socializare. | + | În viața de zi cu zi, aplicația pe care o folosim probabil cel mai des, indiferent de platformă sau sistem de operare, este **browserul web**. Acesta rulează pe smartphone-uri, laptopuri, tablete și este folosit pentru rularea aplicațiilor web cum ar fi clienți de mesagerie, rularea de jocuri, afișarea de conținut al unei pagini cu știri, sau conținut pe rețele de socializare. |
| - | **Browserul web** este o aplicație pe care o folosim în mod constant și ne dorim să o folosim într-un mod cât mai eficient. Adică să petrecem cât mai puțin timp manevrând aplicația și cat mai mult timp folosind aplicația la capacitate maximă. | + | **Browserul web** este o aplicație pe care o folosim în mod constant; de aceea ne dorim să o folosim într-un mod cât mai eficient. Adică să petrecem cât mai puțin timp manevrând aplicația și cat mai mult timp folosind aplicația la capacitate maximă. |
| Vom folosi [[https://www.mozilla.org/en-US/firefox/new/|Firefox]] în această carte, însă conceptele prezentate sunt similare și în alte browsere ([[https://www.google.com/chrome/|Google Chrome]], [[https://www.chromium.org|Chromium]], [[https://www.apple.com/safari/|Safari]], [[https://www.opera.com|Opera]], [[https://www.microsoft.com/en-us/edge|Edge]], etc). Firefox este browserul default instalat în Ubuntu 18.04. | Vom folosi [[https://www.mozilla.org/en-US/firefox/new/|Firefox]] în această carte, însă conceptele prezentate sunt similare și în alte browsere ([[https://www.google.com/chrome/|Google Chrome]], [[https://www.chromium.org|Chromium]], [[https://www.apple.com/safari/|Safari]], [[https://www.opera.com|Opera]], [[https://www.microsoft.com/en-us/edge|Edge]], etc). Firefox este browserul default instalat în Ubuntu 18.04. | ||
| Line 9: | Line 9: | ||
| ===== Pornirea și oprirea browserului ===== | ===== Pornirea și oprirea browserului ===== | ||
| - | Browserul web este un exemplu de //aplicație software//. | + | Browserul web este un exemplu de //aplicație software//. Am vorbit despre pornirea și oprirea aplicațiilor în secțiunea ''%%Pornirea și oprirea aplicațiilor%%''. |
| - | Atunci când browserul este pornit spunem că acesta //rulează//. | + | |
| + | Atunci când browserul este pornit, spunem că acesta //rulează//. | ||
| ==== Pornirea browserului web ==== | ==== Pornirea browserului web ==== | ||
| - | Putem porni browserul Firefox în mai multe moduri: | + | Putem porni browserul Firefox în mai multe moduri (așa cum am menționat în secțiunea ''%%Pornirea și oprirea aplicațiilor%%''): |
| * Folosind iconuri. | * Folosind iconuri. | ||
| - | * Deschizând un terminal și tasând în terminal comanda de pornire (aici firefox), similar cu folosirea Alt+F2 (introducând șirul **gnome-terminal**), ca în imaginea de mai jos: | + | * Folosind un prompt de tip //application launcher// lansat prin combinația de taste ''%%Alt+F2%%''. |
| + | * Deschizând un terminal și tastând în el comanda de pornire (în cazul browserului Firefox este ''%%firefox%%''), ca în imaginea de mai jos: | ||
| <HTML><ul></HTML> | <HTML><ul></HTML> | ||
| {{:uso:laboratoare:start-firefox-terminal.gif?500|}} | {{:uso:laboratoare:start-firefox-terminal.gif?500|}} | ||
| Line 25: | Line 27: | ||
| ==== Oprirea browserului web ==== | ==== Oprirea browserului web ==== | ||
| - | Putem opri browserul Firefox în mai multe moduri: | + | Putem opri browserul Firefox în mai multe moduri, așa cum am menționat în secțiunea ''%%Oprirea unei aplicații grafice%%'': |
| * Folosind butonul de închidere al ferestrei grafice, în forma unui simbol ''%%x%%''. | * Folosind butonul de închidere al ferestrei grafice, în forma unui simbol ''%%x%%''. | ||
| - | * Folosind combinația de taste ''%%Alt+F4%%'' care închide fereastra grafică, o scurtătură pentru folosirea butonului de închidere. | + | * Folosind combinația de taste ''%%Alt+F4%%'', care închide fereastra grafică, o scurtătură pentru folosirea butonului de închidere. |
| - | După folosirea uneia dintre metodele de mai sus, aplicația Firefox este oprită. Adică nu mai putem interacționa cu ea, nu mai folosește resursele sistemului. Pentru a accesa din nou aplicații web va trebui să repornim aplicația Firefox. | + | După folosirea uneia dintre metodele de mai sus, aplicația Firefox este oprită. Adică nu mai putem interacționa cu ea, nu mai folosește resursele sistemului. Pentru a accesa din nou aplicații web, va trebui să repornim aplicația Firefox, folosind una dintre motodele din secțiunea ''%%Pornirea și oprirea browserului%%''. |
| ===== Acțiuni în browserul web ===== | ===== Acțiuni în browserul web ===== | ||
| - | În această subsecțiune vom prezenta cele mai folosite componente ale interfeței grafice a browserului web și cum să le folosim eficient. În general avem cel puțin două variante pentru a face o acțiune: | + | În această subsecțiune vom prezenta cele mai folosite componente ale interfeței grafice a browserului web și cum să le folosim eficient. În general, avem cel puțin două variante pentru a face o acțiune: |
| - Folosind butoane din interfața grafică | - Folosind butoane din interfața grafică | ||
| - | - Folosind combinația de taste din tastatură echivalente clickurilor | + | - Folosind combinația de taste echivalentă clickurilor |
| Vom face o paralelă între cele două în această subsecțiune. | Vom face o paralelă între cele două în această subsecțiune. | ||
| - | Folosirea combinației de taste este mai rapidă, mai eficientă, dar necesită un efort de memorare din partea utilizatorului. Utilizatorii avansați vor folosi preponderent combinații de taste. | + | Folosirea combinațiilor de taste este mai rapidă, mai eficientă, dar necesită un efort de memorare din partea utilizatorului. Utilizatorii avansați vor folosi preponderent combinații de taste. |
| ==== Folosirea barei de adresă ==== | ==== Folosirea barei de adresă ==== | ||
| - | Dacă dorim să accesăm pagina web (//URL-ul//, //site-ul//, //linkul//) **google.com**, trebuie să introducem șirul ''%%www.google.com%%'' în bara de adrese. Putem plasa cursorul în bara de adrese în două moduri: | + | Dacă dorim să accesăm pagina web (//URL-ul//, //site-ul//, //linkul//) **google.com**, trebuie să introducem șirul ''%%google.com%%'' în bara de adrese. Putem plasa cursorul în bara de adrese în două moduri: |
| * Folosind clickuri ca în imaginea de mai jos: | * Folosind clickuri ca în imaginea de mai jos: | ||
| Line 51: | Line 53: | ||
| {{:uso:laboratoare:open-web-page.gif?500|}} | {{:uso:laboratoare:open-web-page.gif?500|}} | ||
| <HTML></ul></HTML> | <HTML></ul></HTML> | ||
| - | * Folosind combinația de taste ''%%Ctrl+l%%'' (''L'' cu minusculă). | + | * Folosind combinația de taste ''%%Ctrl+l%%''. |
| - | Odată accesată bara de adrese putem introduce șirul www.google.com | + | Odată accesată bara de adrese putem introduce șirul ''%%google.com%%''. |
| - | **Exercițiu:** | + | **Exerciții** |
| - | Accesați paginile **curs.upb.ro**, **studenti.pub.ro**, **hotnews.ro**, **facebook.com** folosind ambele metode prezentate mai sus. | + | - Accesați paginile **curs.upb.ro**, **studenti.pub.ro**, **hotnews.ro**, **facebook.com** folosind ambele metode prezentate mai sus. |
| ==== Navigarea folosind butoane ==== | ==== Navigarea folosind butoane ==== | ||
| - | Uneori avem nevoie să revenim la pagini accesate anterior. Spre exemplu, navigăm pe o rețea de socializare, am deschis un articol apărut în feed, l-am citit și acum vrem să revenim la feedul de pe rețeaua de socializare. Navigăm la pagina anterioară pentru a reveni pe rețea. | + | Uneori avem nevoie să revenim la pagini accesate anterior. După ce am navigat pe o rețea de socializare, am deschis un articol apărut în feed, l-am citit și acum vrem să revenim la feedul de pe rețeaua de socializare. Navigăm la pagina anterioară pentru a reveni pe rețea. |
| Putem naviga la pagini navigate anterior în două moduri: | Putem naviga la pagini navigate anterior în două moduri: | ||
| - | * Folosind butoanele **săgeată stânga** (//Go back one page//) și **săgeată dreapta** (//Go forward one page//) din interfața grafică a browserului ca în imaginea de mai jos: | + | * Folosind butoanele **săgeată stânga** (//Go back one page//) și **săgeată dreapta** (//Go forward one page//) din interfața grafică a browserului, ca în imaginea de mai jos: |
| - | + | ||
| <HTML><ul></HTML> | <HTML><ul></HTML> | ||
| {{:uso:laboratoare:back-forward-web-pages.gif?500|}} | {{:uso:laboratoare:back-forward-web-pages.gif?500|}} | ||
| <HTML></ul></HTML> | <HTML></ul></HTML> | ||
| - | Am trecut prin paginile **facebook.com**, **hotnews.ro**, **studenti.pub.ro** și înapoi la **hotnews.ro**, **facebook.com**. | ||
| + | Am trecut prin paginile **facebook.com**, **hotnews.ro**, **studenti.pub.ro** și înapoi la **hotnews.ro**, **facebook.com**. | ||
| * Folosind combinațiile de taste echivalente cu clickurile pe săgețile stânga/dreapta din browser: | * Folosind combinațiile de taste echivalente cu clickurile pe săgețile stânga/dreapta din browser: | ||
| * Navigare înapoi: ''%%Alt+săgeată stânga%%''. | * Navigare înapoi: ''%%Alt+săgeată stânga%%''. | ||
| * Navigare înainte: ''%%Alt+săgeată dreapta%%''. | * Navigare înainte: ''%%Alt+săgeată dreapta%%''. | ||
| - | + | **Exerciții** | |
| - | === Exerciții === | + | |
| - Folosind combinația de taste ''%%Ctlr+l%%'', accesați bara de adrese a browserului și deschideți pagina **youtube.com**. | - Folosind combinația de taste ''%%Ctlr+l%%'', accesați bara de adrese a browserului și deschideți pagina **youtube.com**. | ||
| - | - Navigați **înapoi** folosind butonul //Go back one page// până ajungeți la pagina **hotnews.ro**. | + | - Navigați **înapoi** folosind butonul //Go back one page// până ajungeți la pagina **hotnews.com**. |
| - Navigați **înainte** folosind butonul //Go forward one page// până ajungeți la pagina **facebook.com**. | - Navigați **înainte** folosind butonul //Go forward one page// până ajungeți la pagina **facebook.com**. | ||
| - Navigați **înapoi** folosind combinația de taste ''%%Alt+săgeată stânga%%'' până ajungeți la pagina **google.com**. | - Navigați **înapoi** folosind combinația de taste ''%%Alt+săgeată stânga%%'' până ajungeți la pagina **google.com**. | ||
| Line 87: | Line 87: | ||
| ==== Scroll în browser ==== | ==== Scroll în browser ==== | ||
| - | Principalul motiv pentru care folosim browsere web este ca să vizualizăm content de pagini. Navigarea sus/jos în cadrul unei pagini web se numește **scroll**. | + | Principalul motiv pentru care folosim browsere web este ca să vizualizăm conținut de pagini. Navigarea sus/jos în cadrul unei pagini web se numește **scroll**. |
| Accesăm pagina **hotnews.ro**. Putem da scroll în pagină în mai multe moduri: | Accesăm pagina **hotnews.ro**. Putem da scroll în pagină în mai multe moduri: | ||
| Line 101: | Line 101: | ||
| ==== Reîmprospătarea paginii ==== | ==== Reîmprospătarea paginii ==== | ||
| - | Avem situații în care trebuie să reîmprospătăm (//refresh//) conținutul unei pagini web. Spre exemplu, am deschis o pagină și imaginile nu au fost încărcate corect (am avut probleme cu conexiunea la Internet în acel moment). Alt caz ar putea fi atunci când așteptăm ca pe o pagină să fie publicate notele noastre la un examen, așa că vrem să reîmpropătăm pagina web să vedem dacă aceasta a fost actualizată. | + | Avem situații în care trebuie să reîmprospătăm (//refresh//) conținutul unei pagini web. Spre exemplu, am deschis o pagină și imaginile nu au fost încărcate corect (am avut probleme cu conexiunea la Internet în acel moment). Alt caz ar putea fi atunci când așteptăm ca pe o pagină să fie publicate notele noastre la un examen, așa că vrem să reîmprospătăm pagina web să vedem dacă aceasta a fost actualizată. |
| Intrăm pe pagina **bbc.com**. | Intrăm pe pagina **bbc.com**. | ||
| Line 113: | Line 113: | ||
| <HTML></ul></HTML> | <HTML></ul></HTML> | ||
| - | * Folosind combinația de taste ''%%Ctrl+r%%''. | + | * Folosind tasta ''%%F5%%''. |
| ==== Lucrul cu taburi ==== | ==== Lucrul cu taburi ==== | ||
| - | Un caz pe care îl întâlnim des atunci când lucrăm cu un browser web este să avem mai multe pagini web deschise simultan. Spre exemplu, avem nevoie să căutăm o informație pe Google cum ar fi //Cum gătim supă de pui acasă//. Există multe rețete pe Internet, vrem să citim mai multe până să ne hotărăm pe care să o folosim. | + | Un caz pe care îl întâlnim des atunci când lucrăm cu un browser web, este să avem mai multe pagini web deschise simultan. Spre exemplu, avem nevoie să căutăm o informație pe Google, cum ar fi //Cum gătim supă de pui acasă//. Există multe rețete pe Internet, vrem să citim mai multe până să ne hotărăm pe care să o folosim. |
| - | Cel mai eficient mod pentru a face acest lucru este să folosim **taburi în browser**. Aplicația Firefox care rulează poate avea unul sau mai multe taburi pornite. | + | Cel mai eficient mod pentru a face acest lucru este să folosim **taburi în browser**. Aplicația Firefox aflată în rulare poate avea unul sau mai multe taburi pornite. |
| - | În sub-subsecțiunile următoare vom vorbi despre cum să deschidem, sa navigăm între taburi și să închidem taburi eficient. | + | În subsecțiunile următoare vom vorbi despre cum să deschidem taburi, să navigăm între taburi și să închidem taburi eficient. |
| === Deschiderea taburilor === | === Deschiderea taburilor === | ||
| Line 152: | Line 152: | ||
| Putem naviga printre cele 3 (la modul general //N//) taburi în mai multe moduri: | Putem naviga printre cele 3 (la modul general //N//) taburi în mai multe moduri: | ||
| - | * Folosind clickuri. Dăm click pe fiecare tab în parte ca în imaginea de mai jos: | + | * Folosind clickuri. Dăm click pe fiecare tab în parte, ca în imaginea de mai jos: |
| <HTML><ul></HTML> | <HTML><ul></HTML> | ||
| Line 193: | Line 193: | ||
| === Deschiderea unui link în alt tab === | === Deschiderea unui link în alt tab === | ||
| - | Să presupunem că vrem să găsim rețeta perfectă pentru supă de pui gătită în casă și vrem să deschidem mai multe rețete, fiecare într-un tab, pentru a le compara și a alege rețeta cea mai bună. Vom vedea cum să deschidem linkurile de rețete găsite pe Google într-un alt tab. Alternativa la a deschide linkurile într-un alt tab ar fi să le deschidem într-o altă fereastră. Lucrul cu ferestrele aplicației (în cazul nostru //Firefox//) poate deveni greu de gestionat. | + | Să presupunem că vrem să găsim rețeta perfectă pentru supă de pui gătită în casă și vrem să deschidem mai multe rețete, fiecare într-un tab, pentru a le compara și pentru a alege rețeta cea mai bună. Vom vedea cum să deschidem linkurile de rețete găsite pe Google într-un alt tab. Alternativa la a deschide linkurile într-un alt tab ar fi să le deschidem într-o altă fereastră. Lucrul cu ferestrele aplicației (în cazul nostru //Firefox//) poate deveni greu de gestionat. |
| - | Deschidem din nou browserul Firefox. Intrăm pe [[https://google.com|Google]] și căutăm //Homemade chicken soup recipe// ca în imaginea de mai jos: | + | Deschidem din nou browserul Firefox. Intrăm pe [[http://google.com|Google]] și căutăm //Homemade chicken soup recipe// ca în imaginea de mai jos: |
| {{:uso:laboratoare:firefox-search-for-chicken-soup.gif?500|}} | {{:uso:laboratoare:firefox-search-for-chicken-soup.gif?500|}} | ||
