Învătarea Unui Limbaj DE Programare Folosind Resurse Web

Universitatea Româno-Americană

Facultatea de Informatică Managerială

București

ÎNVĂȚAREA UNUI LIMBAJ DE PROGRAMARE FOLOSIND RESURSE WEB

Lucrare pentru participarea la sesiunea de comunicări științifice

Student: Tirmann Victor-Cătălin

Anul: I

Grupa: 604

OBIECTIVE

Prezenta lucrare are scopul de a exemplifica modalitati prin care se poate invata un limbaj de programare (scriere, citire, sintaxa, implementare, depanare, etc.) folosind resurse ce se gasesc cu usurinta online.

CE ESTE PROGRAMAREA?

Programarea reprezinta activitatea de elaborare a programelor/produse software, necesare activitatii calculatorului, folosind un limbaj de programare. Programarea este procesul dezvoltarii si implementarii unor seturi de instructiuni, care permit/comanda calculatorului sa intreprinda o anumita actiune sau set de actiuni.

CE ESTE UN LIMBAJ DE PROGRAMARE?

Limbajul de programare este un set de expresii, reguli si tehnici, utilizat pentru formularea instructiunilor pentru un calculator.

Limbajele de programare au propriile reguli semantice sau sintactice (de exemplu case sensitive sau case insensitive).

Limbajele de programare permit programatorului sa specifice calculatorului ce operatii sa efectueze, in ce ordine si ce date sa foloseasca.

MOTIVUL ALEGERII TEMEI

Am ales aceasta tema pentru a demonstra facilitatea cu care doritorii, pasionatii de IT, pot invata sa scrie cod pentru diferite domenii (web design, programare aplicatii mobile, applet-uri Java, etc.)

Oricine este capabil, cu putina rabdare, dorinta si perseverenta, sa invete sa programeze. O insusire esentiala a oricarui programator este aceea de a-si fundamenta cunostintele inca de la inceput, de a-si crea o baza solida pe care o poate folosi pentru a evolua.

Mijloacele de informare web reprezinta viitorul, sunt extrem de variate si doar la un click distanta. Prin tutorial video, aplicatii web interactive, site-uri dedicate precum Codecademy.com, forumuri sau site-uri de specialitate, orice persoana poate invata sa scrie cod.

In scop demonstrativ, am ales sa creez diferite variante de site web pentru o tema, astfel testand singur modul in care se pot invata si implementa limbaje ca HTML (HyperText Markup Language), CSS (Cascading Style Sheet) sau JavaScript folosind DOAR informatii si resurse gasite online.

EXEMPLE DE SITE-URI CE OFERA RESURSE DE CODING

LIMBAJUL HTML (HYPER TEXT MARKUP LANGUAGE)

Limbajul HTML este un limbaj creat in scopul de a descrie in format text continutul paginilor web. Paginile create in acest limbaj vor fi interpretate de navigatoare (browser), care vor afisa pagina in forma dorita (texte formatate, liste, tabele, imagini, hyperlegaturi, etc.)

HTML este un limbaj de marcare, adica o metoda de formatare a unei pagini web, care combina textul cu informatii suplimentare de structura (paragrafe, aliniament, etc.) sau prezentarea textului (cuvinte aldine sau italice, inserare de imagini, fisiere video, tabele, etc.).

Informatiile suplimentare sunt exprimate utilizand marcatori (in engleza “tag”, eticheta).

Procesele de standardizare si de includere a comenzilor de marcare in fisierele HTML permit navigatoarelor sa citeasca si sa formateze paginile web, lucru esential in conditiile in care ele nu contin numai text alb-negru ci si diverse alte obiecte.

Asadar, marcajele asigura controlul asupra modului in care informatiile sunt afisate intr-o pagina web atunci cand sunt accesate folosind navigatoare.

Paginile HTML se pot realiza cu orice editor de text de catre cei care cunosc limbajul. Exista si posibilitatea folosirii de editoare special, in care obiectele se introduce interactive iar codul HTML se genereaza automat (ex. Adobe Dreamweaver)

Si in cazul acesta este necesara cunosterea limbajului pentru rezolvarea sau corectarea eventualelor erori.

ELEMENTELE LIMBAJULUI HTML

Toate obiectele HTML sunt introduse intre marcaje care le definesc, de forma <tip_obiect>[…]</tip_obiect>. Acestea pot primi parametri si valori.

Exemplu:

<p>Acesta este un paragraf.</p> – tag fara parametri

<table width=“500px”> [continut] </table> – “width” este parametrul care seteaza latimea la valoarea de 500 pixeli.

Codurile de marcare HTML pot fi clasificate in:

I. Marcaje de baza – cele care delimiteaza pagina, titlul acesteia si corpul.

Exemplu:

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

II. Marcaje pentru structurarea documentului – permit introducerea de subtitluri (heading), paragrafe, linii de delimitare, etc.

Exemplu:

<h1>Subititlu de nivelul 1</h1>

<p>Paragraf</p>

<br> – “line break” inseareaza o linie goala pentru delimitarea spatiului.

<hr> – inseareaza o linie orizontala pentru delimitarea spatiului. Poate primi parametri care sa-i controleze dimensiunea, in caz contrar, linia va ocupa intreg spatiul de care dispune in obiectul sau zona unde a fost inserata.

III. Marcaje pentru formatarea textului si crearea listelor

Exemplu:

<b>Text</b> – va crea un text aldin

<i>Text</i> – Va crea un text italic

<font size=“a” color=“b”>Text</font> – indica folosirea unui font de dmensiune “a” si culoare “b” specificate de programator.

<ol> <li></li> </ol> – “ordered list” creeaza o lista ordonata (numerotata), ale carei elemente se vor introduce fiecare in tag-uri <li> (list item).

<ul> <li></li> </ul> – “unordered list” creeaza o lista neordonata, unde elementele nu sunt numerotate, ci punctate.

IV. Marcaje pentru crearea hiperlegaturilor (hyperlink)

Exemplu:

<a>Ancora</a>

Se pot crea hyperlink-uri catre: adrese URL, fisiere locale aflate pe acelasi calculator/server cu pagina create, o zona din documentul HTML current (link intern/navigare interna).

<a href=“http://www.google.ro”>Text</a> – facand click pe “Text”, se va deschide pagina principala Google. Parametrul “href” (Hypertext Reference) primeste ca valoare adresa fisierului/paginii/locatiei care se doreste a fi accesata.

V. Marcaje pentru introducerea de obiecte – imagini, tabele, obiecte multimedia etc.

Exemplu:

<img src=“X” /> – insereaza o imagine a carei sursa (adresa) este X. Sursa poate fi un URL sau o adresa locala in care s-a salvat imaginea.

<iframe width="200" height="150" src=“X" allowfullscreen></iframe> – se insereaza un video a carui sursa este adresa X, un URL, ce va fi afisat cu latimea de 200 pixeli, inaltimea 150 pixeli si permite readrea in modul ecran complet.

<video width="320" height="240" controls><source src=“Y" type="video/mp4"></video> – se insereaza un fisier video salvat local la adresa Y, caruia i se specifica tipul si formatul (video in format mp4), latimea de 320 pixeli, inaltimea de 240 pixeli, si se permit controalele (start, pauza, volum).

MEDIU DE LUCRU

Pentru a realiza proiectul, s-a folosit Adobe Dreamweaver CS6, program ce permite crearea, modelarea, modificarea si managementul paginilor si/sau aplicatiilor web.

Adobe Dreamweaver este un program ce introduce obiecte interactiv si genereaza cod automat, folosind comenzile, meniurile si functiile prestabilite. Acest lucru faciliteaza invatarea limbajului/limbajelor utilizate, permitand modificarea in timp real a parametrilor/valorilor obiectelor introduse automat si observarea modificarilor survenite.Pentru partea teoretica s-au folosit site-uri precum Stack Overflow, Codecademy, W3Schools.

PRIMUL PROIECT

Ansamblu de 6 pagini, cuprinde o zona de antet cu un meniu de navigare ce face legatura cu fiecare pagina.

Informatia este prezentata simplu, in chenare cu fundal alb, ce delimiteaza diferite zone in pagina.

Stilizarea s-a realizat folosind limbajul CSS, intern.

Stilizarea interna reprezinta scrierea codului CSS in interiorul fiecarei pagini, incadrand acest cod in sectiunea <HEAD></HEAD> si tag-ul <STYLE></STYLE>.

Exemplu:

<head>

<style>

[continut]

</style>

</head>

Meniul de navigatie este format din imagini de tip rollover, introduse folosind programul Adobe Dreamweaver CS6.

Se acceseaza meniul Insert >> Image Objects >> Rollover Image, se alege imaginea implicita care va aparea in mod obisnuit pe pagina, imaginea care va aparea cand cursorul va trece peste (hover), un nume optional ce va aparea in cazul in care imaginea nu poate fi afisata, precum si sursa paginii care se doreste a fi deschisa la accesare intrucat Dreamweaver permite crearea de legaturi cu alte pagini la momentul definirii imaginilor.

Navigarea in aceeasi pagina s-a realizat folosind ancore de pozitie si cod de forma:

<a name=„top”></a> – pentru a marca locul unde se va naviga.

<a href=„#top”></a> – pentru a crea legatura catre zona mai sus marcata cu numele „top”.

In cazul de fata, la accesarea legaturilor care contin referinta catre „top”, pagina va fi readusa sus.

Continutul a fost incadrat in tag-uri <div></div> cu id-ul #page_wrap, pentru care s-a specificat culoarea de fundal alba, latimea, margin si padding, precum si proprietatea box-shadow, care creeaza un efect de umbra difuza in jurul regiunilor incadrate in chenare.

Diferenta dintre Margin si Padding este clar specificata pe site-ul W3Schools.com

Videoclipul s-a introdus folosind tag-ul <iframe></iframe>.

Exemplu:

<div align="center">

<iframe width="640" height="360" align="center" src="https://www.youtube.com/embed/pqX0_QPNVmE">

</div>

Astfel, iframe-ul a fost centrat pe pagina, are latimea de 640 pixeli, inaltimea 360 pixeli si sursa un videoclip de pe YouTube. Explicatia o gasim si pe W3Schools.com

Galeria a fost realizata implementandu-se un script Java extern si o functie interna introdusa in zona HEAD, ce permite deschiderea imaginile in aceeasi fereastra si permitand derularea lor ca slideshow sau cu ajutorul sagetilor de pe tastatura, a rotitei mouse-ului sau pur si simplu a butoanelor prestabilite.

Resursele si modul de implementare au fost gasite pe site-ul fancyapps.com.

Codul functiei interne:

In tag-urile de hyperlink in care au fost incadrate imaginile, s-a aplicat clasa fancybox definita de script, si un atribut de relatie, numit galerie, care leaga toate imaginile afisate pe pagina, de imaginile care se deschid la accesarea lor.

Exemplu: <a href="katimg/katana.jpg" class="fancybox" rel="galerie"><img src="katimg/katana.jpg" width="300" height="157" /></a>

Imaginile s-au introdus folosind Dreamweaver.

Din meniul Insert se acceseaza Image si se alege imaginea dorita daca aceasta este intr-un director local. Codul se genereaza automat.

Se pot specifica diferiti parametri precum latime sau inaltime.

Se poate de asemenea atribui un id sau o clasa.

Explicatia privind diferentele dintre un id si o clasa o gasim, din nou, pe site-ul W3Schools.

AL DOILEA PROIECT

Alcatuit tot din 6 pagini principale, a doua versiune se deosebeste de prima prin design si implementarea de frames (cadre).

Explicatia privind ce sunt si cum se pot folosi cadrele o gasim pe site-ul tutorialspoint.com

Pentru a crea frameset-ul, in Dreamweaver se acceseaza meniul Insert>>HTML>>Frames si se alege varianta dorita.

Se salveaza fiecare frame in parte, selectand optiunea Save Frame / Save Frame As, iar apoi framesetul complet flosind Save Frameset / Save Frameset As, din meniul File.

Pagina in care s-a salvat Frameset-ul nu se modifica, ea fiind folosita pentru a accesa site-ul.

Spre deosebire de prima versiune a proiectului, de aceasta data s-au implementat pentru stilizare, diferite fisiere .css externe.

Pentru a lega o pagina HTML de un fisier CSS, se foloseste cod de forma:

<link rel="stylesheet" type=„text/css" href="left.css" />

Unde rel reprezinta relatia pe care o are fisierul cu pagina, si anume una de fisier folosit pentru customizare, type reprezinta tipul fisierului, in cazul de fata tipul este css, iar href arata sursa fisierului.

Frame-ul top este relativ simplu, reprezentand o parte de antet fixa in care se afla logo-ul site-ului.

Frame-ul left este analog, o zona fixa in care este afisat meniul de navigatie format din hyperlink-uri in format text, care la hover isi modifica dimensiunea. Acest effect s-a realizat folosind CSS Transitions.

Pentru a folosi CSS Transitions, se acceseaza meniul Window >> CSS Transitions, apoi in caseta deschisa se selecteaza Create new transition.

In caseta nou deschisa se alege:

Target Rule: elementul, clasa sau id-ul definit in fisierul .css atasat, care va primi proprietatile definite.

Transition On: momentul in care se vor activa efectele tranzitiilor (implicit, click, hover, etc.).

Duration: durata tranzitiei.

Delay: timpul dintre momentul indeplinirii conditiei de afisare a tranzitiei si afisarea ei efectiva.

Timing Function: diferite functii de viteza pentru desfasurarea tranzitiei.

End Value: valoarea pe care o ia proprietatea la sfarsitul tranzitiei (ex. un text poate creste de la 16px la 26px sau o imagine isi poate modifica opacitatea de la 20% la 80%.)

Codul generat:

Fiecare pagina se deschide in zona centrala, corespunzatoare cadrului main.

Acest lucru se realizeaza specificand atributului target din tag-urile de link ale elementelor meniului de navigatie, numele dat cadrului principal la definirea acestuia in meniul Dreamweaver, in cazul de fata mainFrame.

Exemplu: <a href="pages/Index/iMain.html" target="mainFrame">General</a>

AL TREILEA PROIECT

Alcatuit tot din 6 pagini principale, acest proiect difera de primele doua prin design si structura.

Fiecare pagina cuprinde 3 zone:

Zona de antet, unde se afla logo-ul si sloganul.

Zona de continut.

Zona de subsol unde se afla un fisier audio.

Paginile au de asemenea implementat un favicon folosind codul de mai jos in zona de HEAD :

<link rel="shortcut icon" type="image/x-icon" href="style/favicon.png">

Fiecarei pagini i-a fost atasat un fisier css extern, numit style.css, pentru a facilita si omogeniza design-ul. Lucrul cu fisierele .css se poate invata usor din tutoriale Youtube, in special cele ale lui EJ Media, de pe site-ul codecademy.com sau w3schools.com. Pe cele doua site-uri este prezentata asemanarea dintre CSS si HTML, facandu-se mereu paralele intre cele doua, facilitand astfel invatarea.

De asemenea, pe fiecare pagina sunt implementate si doua fisiere .css externe ce folosesc Google Fonts. Astfel de fisiere contin in referinta lor adresa catre site-ul fonts.googleapis.com unde sunt definite si de unde se extrag instructiunile de afisare la incarcarea paginii.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine&amp;v1" />

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" />

Pentru a folosi astfel de fisiere: se acceseaza https://www.google.com/fonts >> se alege fontul dorit >> Add to Collection >> Use >> se alege formatul in care se doreste a fi implementat (HTML, PHP, Javascript) >> se copiaza codul si se implementeaza. Toate instructiunile necesare sunt prezentate de Google.

Proiectul are de asemenea implementat charset-ul UTF-8 pentru a accepta scrierea cu diacritice si folosirea simbolurilor de scriere japoneze aferente tematicii alese. Tag-ul <meta/> s-a folosit pentru adaugarea de keywords si a unei descrieri.

<meta charset="UTF-8"/>

<meta name="description" content="Informatii despre sabia japoneza, de la origini pana in prezent." />

<meta name="keywords" content="katana, japonia, samurai, japan, bushido" />

In partea dreapta a fiecarei pagini se afla 3 casete ce contin diferite informatii (text, hyperlink, video). Aceste casete sunt rezultatul impartirii zonei de continut in mai multe parti, folosind div-uri.

Zona de continut este cuprinsa intr-un div principal, ce are id-ul site_content, in cadrul caruia s-au creat alte 2 div-uri:

Pentru informatii principale (in partea stanga) – are id-ul content

Pentru informatii suplimentare (in partea dreapta) – are id-ul sidebar_container

Exemplu:

Sidebar-urile de pe pagina Home fac legatura cu alte 3 pagini locale.

Aceste pagini contin imagini aliniate corespunzator cu paragrafele de text. Deoarece paginile respective nu sunt salvate in directorul principal, referinta catre imagini sau pagini se face diferit, specificandu-se directorul radacina, in cazul de fata, un nivel mai sus.

Exemplu: <img src="../Nav/index/importanta_obiceiuri/pic1.jpg" width="600" height="317" align="center">.

Explicatia o gasim si pe site-ul stackoverflow.com

Proiectul contine si hyperlink-uri catre alte pagini web precum Wikipedia, care se deschid intr-un noua fereastra, prin folosirea atributului target caruia i s-a dat valoarea _blank.

Exemplu:

<a href="https://en.wikipedia.org/wiki/Katana" target="_blank">Wikipedia</a>

Pe pagina „Modele” informatiile sunt prezentate sub forma de paragrafe carora li s-au adaugat imagini sugestive aliniate la stanga sau dreapta. La hover peste denumirile armelor, textul va fi subliniat. Acest lucru s-a realizat folosind o clasa numita under definita in fisierul style.css:

.under:hover {text-decoration:underline;}

Alinierea

imaginilor:

CONCLUZII

Daca ar fi sa privim procesul de studiu ca un algoritm, sunt de parere ca invatarea folosind mijloace de informare web s-ar putea descompune in:

Initializare: Stabilirea obiectivelor, a limbajelor de programare ce se doresc a fi invatate/aprofundate si vizualizarea rezultatelor finale.

Prelucrare: Cautarea informatiilor generale legate de limbajul de programare ales si documentarea aprofundata asupra tuturor caracteristicilor acestuia (structuri, instructiuni, sintaxa, cuvinte cheie, etc.) urmand punerea in practica incepand de la lucruri simple, marind treptat gradul de complexitate pana cand se ajunge la reducerea nevoii de explicatii aditionale.

Prezentarea solutiei finale: Se ajunge aici in punctul in care programatorul, sau viitorul programator, a inteles conceptele generale ale limbajului pe care a dorit sa-l invete si poate dezvolta singur pe baza celor invatate.