Didakti čki dizajn nastavne jedinice

1. Didaktički dizajn nastavne jedinice Tekst i hipertekst Mentor : Prof. dr Milorad K. Banjanin Student : Gorjana Tošić

2. 1. Entiteti planiranja i organizacije nastave

3. Ključne reči, termini i pojmovi! • Tekst • Hipertekst • Navigator • Jezik HTML • Hiper-veze • (Hyperlink) • Liste • Slike • Mapa slike • Boje i pozadine

4. 2. IDENTIFIKACIJACILJEVA NASTAVE I UČENJA OBJEKTNI NAMJENSKI PERFORMANSNI KONAČNI Fizički entiteti: Knjige, radne sveske, olovke, internet; Računar, proekciono platno; Kognitivna produkcija: Spoznavanje teksta kao smisaone celine, realizacija logičke i fizičke strukture podataka, realizacija jezika HTML. Regeneracija i integracija prethodnih znanja o tekstu, fizičkom stilu karaktera i uključivanju slika u tekst. PERCEPTIVNO - INFORMACIONI: Spoznaja funkcionisanja hiper-veza, uspostavljanje hipertekstualne strukture dokumenta zapisanog u HTML-u; Simboličkientiteti: Tekst, tagovi (etikete), hiperlinkovi, čvorovi – simbolički predstavljeni krugovima,tabele, slike. Memorijska produkcija: Pamćenje definicije teksta i hiperteksta, spoznaja osnovnih tagova u jeziku HTML, sticanje sposobnosti za uporedjivanje teksta i hiperteksta, pamćenje kodova dijakritičkih karaktera ,. Brzina pretraživanja i sakupljanja podataka. KOGNITIVNO - INFORMACIONI: Razumevanje pojmova tekst, hipertekst, navigator, hiperlink, jezik HTML Semantički entiteti: Definicija teksta, definicija hiperteksta, logička i fizička struktura dokumenta, navigator, definicija hiper-veza, jezik HTML, strukturiranje teksta, obeležavanje elemenata teksta, uključivanje slika u tekst. Konvergentna produkcija: Analiza strukturiranja teksta, realizacija hiper-linkova, analiza strukuriranja HTML dokumenta, analiza obeležavanja elemenata teksta i fizičkog stila karaktera. . Divergentna produkcija: Jezik HTML i program za konverziju teksta iz odredjenog formata u HTML format. Bihevioralni entiteti: Proaktivnost, interaktivnost, objektivnost, ekspresija, racionalnost . MOTORNO - INFORMACIONI: Osposobljenost učenika za artikulaciju obrade teksta i hiperteksta, osposobljenost učenika za uključivanje sika u tekst. Interpersonalna komunikacija nastavnik-učenik, kojom se ostvaruje pretraživanje, integrisanje i primenjivanje znanja i veština. Kratkoročna refleksija učenja, integracija znanja i veština, efikasna saradnja nastavnik učenik kao i saradnja medju učenicima.

5. Tekst je smisaona celina sastavljena od više rečeničnih iskaza povezanih različitim vrstama semantičkih i sintaksičkih veza. Tekst Text ... ili dokument je "informacija namenjena ljudskom sporazumevanju koja može biti prikazana u dvodimenzionalnom obliku. U svakom tekstu se razlikuju dve osnovne formalne strukture: Fizička struktura Logička struktura Ili grafički izgled (engl. graphical layout) opisuje organizaciju teksta u "štampanom" obliku. Tipični elementi grafičke strukture su jedinice kao što su strana ili red. Ili logički izgled (engl. logical layout) opisuje organizaciju sadržaja teksta. Tipični elementi logičke strukture su jedinice kao što su naslovi ili, pak, pasusi. Logička struktura ne zavisi od grafičke strukture dokumenta!

6. Hipertekst ... ili web-dokument je, pojednostavljeno, tekst koji sadrži vezeili uputnice (engl. link) ka drugim dokumentima ili na samog sebe. Preciznije, hipertekstje skup stranica (engl. page), u obliku datoteka, međusobno povezanih uputnicama koje su umetnute u stranice. Navigator Za razliku od običnog teksta, koji se čita linearno (sleva na desno, odozgo naniže), hipertekst se čita prateći hiper-vezeu tekstu, dakle, ne nužno na linearan način. ... ili razgledač (engl. browser) je interpretatorjezika za prikazivanje hipertekstuelnih dokumenata: on omogućava njihov vizuelni prikaz na ekranu.

7. Jedna od najznačajnijih vrsta jezika • za opisivanje hiperteksta. Jezik HTML Tekst u HTML-u može se proizvestiipomoćuprogramazakonverzijutekstaizodređenogformata u HTML-format. Na primer, iz RTF-formata u HTML (rtf2html), izLaTeX-formata u HTML (latex2html). Ovakviprograminasobičnosuočavajusapitanjemverzije HTML-a isaproblemimareprodukcjemogućnostijednogjezika u drugom • Jezicizaopisivanjehipertekstasujezicikojiomogućavajuda se preciznoopišehipertekstualnastrukturajednogteksta (uputnicenadrugetekstove, itd). • Ovijezicidopuštajudase eksplicitnoopišelogičkastrukturatekstairazličititipovivezau tekstu. Izvorne datoteke ... sadokumentomopisanim u HTML-u imajuobičnosufiks (iliekstenziju).html ili .htm, a nalaze se u određenomdirektorijumuserveravezanogna Internet, štoihčinidostupnim (vidljivim) naweb-u. Prevodioci Unos i vizuelni prikaz (vizuelizacija) pomoću posebnog načina obrade teksta u uobičajenim editorima teksta ili pomoću posebnog programa za obradu teksta (npr. kao Netscape Composer ili DreamWeaver). • Vizuelniprikaz se ostvarujeuzpomoćnavigatora (npr. opcija "Open Page" u programuNetscape)

8. Jezik HTML se zasniva na eksplicitnom obeležavanju logičke strukture dokumenta. Obeležavanje se vrši pomoću etiketa (engl. tag) koje opisuju elemente logičke strukture teksta. Tagovi ... se navode između uglastih zagrada < i >. U ovim zagradama se navode opisi pojedinih elemenata strukture teksta. Tagovi u HTML-u se mogu razvrstati na atributi složenih obeležja oblika: <X A1=a A2=b ...> y </X> koji pružaju dodatne informacije, obično o grafičkom izgledu, dela teksta y • prosti tagovi ili markeri za opisivanje jednostavnih elemenata logičke strukture. Oblika su: <X> • složeni tagovi ili ograđivači su zagrade oblika <X> y </X> kojima je opisan izgled dela teksta y.

9. Strukturiranje teksta! Minimalna struktura HTML-dokumenta obuhvata tagove: • <HTML>, </HTML> - zagrade HTML-teksta; • <HEAD>, </HEAD> - zagrade zaglavlja, sadrži meta-definicije HTML-dokumenta; <TITLE>, </TITLE> - zagrade za naziv HTML-dokumenta • <BODY>, </BODY> - zagrade teksta obeleženog dokumenta.

10. Obeležavanje elemenata teksta! Prikaz grafičkih karaktera se u HTML-u definiše na više nivoa. U odeljku zaglavlja (<HEAD>) se definiše kodna strana koja se koristi za prikaz grafičkih karaktera (npr. ISO-8859-1 za zapadno-evropsku latinicu, ISO-8859-2 za istočno-evropske latinice). Opis grafičkih karaktera. Zadavanje kodne strane se vrši pomoću meta-zaglavlja META oblika: Za dijakritičke karaktere u srpskoj latinici koriste se sledeći kodovi prema ISO-8859-2 kod 8859-2 kod 8859-2 UNICODE UNICODE Malo slovo Veliko slovo Č &#268 200 č &#269 232 Karakteri ćiriličnog pisma se mogu kodirati prema standardu ISO 8859-5. Ć &#262 198 ć &#263 230 Đ &#272 208 đ &#273 248 &#352 169 &#353 Dijakritički latinični karakteri se mogu uneti i kao sekvence UNICODE-u Š š 185 &#381 174 &#382 Ž ž 190

11. Fizički stil karaktera! Karakteri mogu dobiti i atribute "vida pisma" (prema Pravopisu MS) ili, popularnije, biti prikazani u različitim fontovima: Crni slog • (engl. boldface) se navodi među zagradama <B> i </B> . Kurziv Podvučena slova Precrtana slova • (engl. italics) se navodi među zagradama <I> i </I> : kurziv Teleprinterska slova • (engl. underline) se dobijaju ograđivanjem teksta zagradama <U> i </U> : podcrtano • (engl. strike) se dobijaju ograđivanjem teksta zagradama <STRIKE> i </STRIKE> : precrtano • (engl. teletype) se dobijaju ograđivanjem teksta zagradama <TT> i </TT> "blinkujuća" slova Velika slova • se dobijaju ograđivanjem teksta zagradama <BLINK> i </BLINK> : treperavo Mala slova • se dobijaju ograđivanjem teksta zagradama <BIG> i </BIG> • se dobijaju ograđivanjem teksta zagradama <SMALL> i </SMALL> Gornji indeks Donji indeks • se dobija ograđivanjem teksta zagradama <SUP> i </SUP> • se dobija ograđivanjem teksta zagradama <SUB> i </SUB>

12. Liste • Liste u jeziku HTML su navođenje, popisivanje onih delova teksta, koji se ne mogu svesti na prethodno opisane elemente logičke strukture (pasus, odeljak, i sl). Razlikuju se tri vrste lista (ili popisa): Neuredjene liste Numerisane liste Opisne liste opisuju logičku strukturu koja odgovara listi pojmova koji se definišu. Otuda se opisne liste nazivaju i definicione liste. Ovakva lista se opisuje sledećim etiketama: <DL> <DT>odrednica 1 <DD> opis odrednice 1 <DT>odrednica 2 <DD> opis odrednice 2 . . . . . </DL>

13. Hiper - veza (Hyperlink) Hiper-veza (engl. hyperlink) uspostavlja hipertekstuelnu strukturu dokumenta zapisanog u HTML-u tako što omogućava da se poveže neki fragment tekućeg teksta sa nekim drugim delom tog ili, pak, nekog drugog teksta. Hiper-veza se može zamisliti kao luk koji povezuje neka dva čvora. Označava u tekstu onu poziciju sa koje se prelazi na neki drugi tekst i kodira se pomoću atributa HREF: Dolazno sidro je ili adresa neke datoteke ili etiketa koja obeležava deo teksta. Enkodira se pomoću atributa NAME: 1 2 Hiper-veza predstavlja mogućnost da se čitanje teksta iz čvora 1 nastavi učvoru 2. Ovakva hiper-veza se enkodira pomoću sidra (engl. anchor) koje povezuje fragment teksta u čvoru 1 sa adresom čvora 2. <A HREF= adresa čvora 2> pozicija u čvoru 1 sa koje se prelazi na čvor 2 </A> <A NAME= pozicija u čvoru 2> tekst u čvoru 2 na koji se prelazi iz čvora 1 </A> Adresiranje Polazno sidro fizička pozicija na lokaciji u tom čvoru sa koje se prelazi na tekst u čvoru 2 Enkodiranje ovakve informacije podrazumeva da se u čvoru 1 opišu: Adresiranje se temelji na pojmu uniformnog lokatora resursa (skr. URL, od engl. Uniform Resource Locator), koji omogućava da se precizno imenuje adresa čvora 2, ma gde on bio fizički lociran. U opisivanju adrese koja upućuje na čvor 2 razlikujemo više slučajeva u zavisnosti od toga koliki je deo URL-a poznat u tom trenutku. Dolazno sidro fizička lokacija na kojoj se nalazi tekst u čvoru 2.

14. Slike Slike (fotografije, crteži, skice,...) ... u digitalizovanom obliku, sačuvane u nekoj datoteci, često su sastavni deo teksta. Za čuvanje slika koristi se više konvencija. Od značaja je da navigator može protumačiti format u kome je slika sačuvana. Najčešće se koriste formati JPEG i GIF. Slike se u tekstu navode koristeći tag IMG (skr. od image) koja ima obavezni atribut SRC (skr. od source). Oblik u kome se navodi ova etiketa je: Uključivanje slika u tekst. <img src="URL datoteke u kojoj je slika">

15. Mapa slike Jedna slika može biti podeljena na zone na takav način da svaka zona predstavlja polazno sidro nekog dokumenta. Ova mogućnost se temelji na pridruživanju slici jedne mape preko koje se određuju koordinate pojedinih zona. Koordinatni početak mape je gornji levi ugao slike, a koordinate se izražavaju u broju piksela od koordinatnog početka. Na primer, donji desni ugao crvenog kvadrata na slici ima koordinate (120,100). Zone se određuju pomoću atributa USEMAP taga IMG: Mapa se opisuje pomoću složenog taga MAP. <IMG SRC="URL slike"      USEMAPE="#ime mape"> <MAP NAME="ime mape">      <AREA SHAPE="oblik zone1" HREF="URL koji se poziva" COORDS="x1,y1,x2,y2,...">      <AREA SHAPE="oblik zone2" HREF="URL koji se poziva" COORDS="x1,y1,x2,y2,...">      ..............................................</MAP> Unutar taga MAP, za opis pojedinačnih zona koristi se prosto obeležje AREA, čiji su atributi SHAPE, HREF i COORDS:

16. Boje i pozadine Upotreba boja je prvenstveno vezana za atribute taga BODY. Prilikom navođenja ovog taga mogu se definisati boje sledećih elemenata u tekstu: Boja pozadine Osnovna boja slova Osnovna boja slova upotrebljenih u dokumentu opisuje se vrednostima atributa TEXT. Tokom sastavljanja dokumenta osnovna boja slova, opisana atributom TEXT se može promeniti pomoću atributa COLOR taga <FONT>. Boja hipertekstualnih veza se određuje na osnovu donja tri atributa prema statusu veze: • Boja neposećene hipertekstuelne veze (prenego što se na nju "klikne") je određena atributom LINK; • Boja već posećene hipertekstuelne veze (posle povratka u dokument iz koga se "kliknulo") je određena atributom VLINK; • Boja hipertekstuelne veze u trenutku kada se na nju "klikne" je određena atributom ALINK.

17. Hvala na pažnji! 

18. Boja pozadine (engl. background), koja predstavlja boju "papira". Boju pozadine određuje vrednost atributa BGCOLOR Pozadinadokumenta se definiše atributima background ilibgcolor. Pozadina može biti: ● slika (npr. <BODYBACKGROUND="URL slike">) ● boja (npr. <BGCOLOR= predefinisan nazivboje> ili <BGCOLOR= #heksadecimalna RGB vrednost boje>) <BODY BGCOLOR ="#RRGGBB"> • RRGGBB predstavlja • heksadecimalni triplet kôda boje: • cifre RR (R=0..9A..F) određujukoličinu crvene boje, • cifre GG(G=0..9A..F) određuju količinuzelene boje, • cifre BB (B=0..9A..F)određuju količinu plave boje.

19. Konvencija! Konvencija je sporazum ili dogovor o modalitetima i pravilima ponašanja.

20. Semantika Sintaksa Semantika se odnosi na aspekte značenja koji su izraženi u jeziku, kodu ili nekom drugom obliku predstavljanja. Semantika takođe može označavati teoretsko proučavanje značenja u sistemima ili znakovima. Sintaksa proučava pravila koja određuju kako se reči kombinuju u rečenice u datom jeziku.