Plan Predavanja za Macromedia Studio MX

dan: Integriranje MX aplikacija (1.dio)

Vježbe se nalaze u V:Macromedia Studio MXVjezba-01-uvod

• skripte, mobiteli, satnica, pauze, kašnjenje
• Internet koristiti ISKLJUČIVO za vježbe koje to zahtjevaju
• studio MX nije posebna aplikacija nego skup aplikacija (DW, FW, Flash)
• integriranje aplikacija
• obavezno čitati skriptu doma prilikom ponavljanja; primjedbe slati na ozren@algebra.hr
• predavanje je podijeljeno na:
• osnove integriranja MX aplikacija i bilješke o dokumentu (design notes)
• integriranje Fireworksa, Dreamweavera i Flasha MX
• Studio MX ekstenzije (proširenje mogućnosti MX aplikacija)
• osnove Javascripta
• osnove izrade dinamičkih stranica u Dreamweaveru (ASP)

Osnove

• osnove integriranja MX aplikacija i bilješke o dokumentu (design notes)
• Dreamweaver je centralni program jer on definira site (pojavljuje se mapa _notes)
• definirati novi site u Dreamweaveru
• prekopirati mape vjezba-0x iz mape v:Macromedia Studio MX u mapu svog site-a (sve u Dreamweaveru)
• otvoriti index.htm
• označiti sliku i kliknuti Edit u property inspectoru
• ako se nekom otvori u Irfanu (ili nečem) treba podesiti u DW Edit -> preferences -> FileTypes/Editors. Ovdje se može podesiti i npr. Photoshop
• DW u ovom trenutku provjerava _notesimeSlike.gif.mno i skuži da ne postoji note
• u FW se otvara prozor koji pita za source (png)
• source se nalazi u root-u site-a
• pokazati opciju FW-a: Edit->Preferences->Launch and Edit
• kratka vježba: ofarbati sva slova u istu boju. Možete još nekaj promjeniti
• Kliknuti na Done – to što su napravili naziva se 'Round Trip' i radi između svih MX aplikacija
• U polju src u property inspectoru DW-a se pojavio path do source-a
• Kreiran je design note za sliku
• Ako se neke slike ne daju selektirati (npr. pozadina Back.gif) mogu se prebaciti u FW dvostrukim klikom u Site prozoru (u ovom slučaju treba u FW File-Save, File-Export)
• kratka vježba: promjeniti nekaj na pozadinskoj slici Back.gif
• pokazati ovo sve sa Flash objektom
• kratka vježba: promijeniti nešto po želji i vratiti se u DW gumbićem Done
• pokazati Design note i objasniti da je to napravljeno u XML-u, objasniti ideju XML-a
• postavke za Design Notes, Site –> edit sites -> odabrati site -> advanced -> design notes (Clean up briše design notes za dokumente koji su pobrisani)
• index.htm snimiti kao cars-vjezba.htm i napraviti od toga cars.htm
• nakon toga editirati sliku prvog autića u Fireworksu i skinuti joj sivi okvir.
• ponoviti isto za veliku sliku (treba ju otvoriti pomoću site panele)
• editirati Flash objekt i na gumb Baby toys staviti getURL('baby.htm');
• ako netko završi prije reda tada dobiva zadatak da napravi stranicu dolls.htm od priloženih materijala
• ako netko slučajno i to napravi onda nek napravi baby.htm od slika sa Interneta

Fireworks

• ponoviti editiranje iz Dreamweavera (Edit i dvostruki klik na sliku u site paneli)
• otvoriti novi dokument u FW-u i nacrtati nešto
• napraviti dva-tri slice-a
• pokazati Quick Export u DW HTML
• otvoriti HTML u DW-u pomoću gumba FW HTML
• označiti kompletnu tablicu pa kliknuti na Edit u property inspectoru
• dodati slice pa kliknuti na Done
• zatvoriti sve dokumente
• otvoriti vjezbe-02updateHTMLvjezbapage1.htm u DW
• otvoriti vjezbe-02updateHTMLvjezbapage2.htm u DW
• gumbi su napravljeni u FW
• zatvoriti u DW page1.htm i page2.htm
• otvoriti .png dokument vjezbe-02updateHTMLvjezbanav.png u FW i promijeniti npr. tekst na gumbima
• kliknuti na Quick export -> update HTML
• odabrati page1.htm
• kliknuti na Quick export -> update HTML
• odabrati page2.htm
• otvoriti u DW page1.htm i page2.htm

• otvoriti Vjezba-02/RotatingStar.png, pokazati preview (F12)
• pokazati Quick Export > MM Flash > Export SWF
• otvoriti i pokazati primjer index.htm u Dreamweaveru
• objasniti da Fireworks može napraviti vektorsku swf animaciju i rastersku gif animaciju
• otvoriti u IE datoteku vježba-02index.htm i napraviti u DW što sličniji site
• koristiti (ili ne) gotove slike i animacije
• ako ostane vremena, polinkati linkove iz ostalih stranica prema ostalim stranicama
• ako ostane još vremena, male slikice (tumbnails) polinkati na velike

• otvoriti u DW dokument vjezba-01index.htm
• u njemu postoji Flash s linkovima
• njih možemo vidjeti u onom prozoru za upload (site prozoru)
• kad otvoriš Edit Site, kliknuti na kategoriju Site Map Layout; podesiti No. of Columns (4)
• treba podesiti View > Show Dependent Files da se vide linkovi i putevi do dependent fileova
• kliknuti na + pored swf-a da se pojave njegovi linkovi
• File > Save Site Map (BMP/PNG)
• na link desni klik, Change Link i promijeni link na baby.htm
• trebalo bi raditi i Site > Change Link Sitewide, ali ima BUG!

dan: Integriranje MX aplikacija (2.dio)

Vježbe se nalaze u

V:Macromedia Studio MXVjezba-02-intensiveReactions – presnimiti

V:Macromedia Studio MXVjezba-03-photoAlbumDW – presnimiti

V:Macromedia Studio MXVjezba-04-giftShopFlash – presnimiti

• placeholder u DW – objasniti
• napraviti placeholder u DW, kliknuti na Create, nacrtati sliku u FW, kiknuti na Done

Vježba: napraviti stranicu kakva je index.htm korištenjem placeholdera, povezivanja DW i FW itd

o        placeholder 20x20 za sivi kružić (ona 4 kružića gore lijevo)

o        napraviti rollover u FW, vratiti se u DW

o        kopirati 4 puta

o        srediti linkove

o        staviti u tablicu (5 cols, w=100%)

o        CSS podcrtano ispod gumbića

o        eventualno show/hide layers

o        natpis s rolloverom na sredini stranice napraviti pomoću placeholdera i Fireworksa

• kad su gotovi s vježbom, otvoriti RotatingStar.png, eksportirati kao swf i ubaciti u dokument na dno

• optimizacija iz DW: otvoriti artwork2.htm
• kliknuti na sliku desnim gumb pa onda Optimize in Fireworks
• podsjetiti kako radi optimizacija
• pokazati karticu File koja omogućava scale-anje i slično

Vježba: optimizirati slike u najboljem formatu (memorijski najmanje, što manji gubitak)
Jedno optimalno rješenje je gif, 4-8 boja, slike su oko 3-7 Kb

• izrada foto-albuma: Commands > Create Photo Album (TREBA BITI OTVOREN BAREM JEDAN HTML DOC ZBOG BUG-a U DW!!!)
• slike su u Vjezba-03/materijali/
• napraviti novu mapu foto-album, u kojoj će biti gotovi foto-album
• scale fizički smanjuje slike (ne mijenja html tagove nego fakat smanji slike)

• find and replace: pomoću ove opcije moguće je napraviti automatsku promjenu na svim ili samo nekim stranicama u siteu – napraviti ćemo promjene na foto-albumu
• otvoriti Edit > Find and Replace
• prva promjena biti će zamjena teksta Next sa slikom findAndReplace/next.gif
• pod Find In odabrati Folder, foto-album
• pod Search odabrati Specific Tag
• potražiti sve linkove (Tag 'a'); maknuti prvi kriterij (kliknuti '-') – tražiti s Find All
• panela Results pokazuje sve linkove; dblClick na link navigira do njega
• trebaju nam svi linkovi unutar kojih je tekst 'Next', pa dodajemo kriterij ('+', Containing, Text, Next); pokrenuti pretragu (Find All)
• UPOZORITI: uvijek treba prije Replace-a provjeriti s Find All, jer NEMA UNDO-a!!!
• odabrati
• Action > Replace Contents Only
• With <img src='../../findAndReplace/next.gif' border=0>
• napraviti Replace (provjera), pa Replace All ako je provjera prošla

Vježba: to napraviti s Previous (djelomično samostalno) i Home (samostalno)

• Flash-Fireworks i Flash Publish exe
• otvoriti banner od Gift Shopa (banner.png) u FW i dodati live efekt Eye Candy
• banner.png ubaciti (Import) u novi Flash film 800x600
• File Structure – New Layer, Objects – Paths Editable, Text – Paths Editable
• ubaciti još 3 puta, sa Objects – Rasterize, Text – Rasterize i na kraju kao Single Flatened Bitmap
• ubaciti putujući kružić kakav je na gift shopu
• pokazati publish opcije, posebno exe, pokazati exe, obratiti pažnju na veličinu file-a

• Flash Templates: otvoriti Flash, New From Template, Photo Slide Show, Create
• proći kroz upute
• koristiti slike iz napravljenog foto-albuma, pokazati Edit in Fireworks

• ako slučajno piše 'Irfan' ili što drugo, desni gumb na sliku u libraryu pa Open with

• pokazati kako se dadu modificirati simboli (Edit In Place)

• proširenje MX Studio aplikacija
• Extension Manager: Commands > Manage Extensions, klik na
• Macromedia Exchange:
• registrirati se
• zapisati lozinku
• korisničko ime je email koji se upiše (@ ne radi – koristiti Notepad za upis adrese)
• obavezno isključiti opciju REMEMBER ME prilikom logiranja
• skinuti extenziju IE5.5 Custom Scrollbars
• ugasiti DW pa ga upaliti, pokazati kako radi ekstenzija
• pokazati u Ext. Manageru podatke o ekstenziji
• ekstenzija Floating Frame
• ekstenzija No Right Click
• (ekstenzija CreditForm Builder)
• (ekstenzija Background That Fit)
• (ekstenzija Advanced Random Images)
• (ekstenzija LiveClock)

dan: Javascript

Vježbe se nalaze u V:Macromedia Studio MXVjezba-05-Javascript - presnimiti

• objasniti da JS služi za kontrolu sučelja; on je kao 'engine' koji pokreće dinamiku stranice - napraviti paralelu s ActionScriptom
• pokazati promjenu fonta za Code View (inače je nečitljiv) - Edit > Preferences > Fonts > Code View, Courier New, 10pt

• novi dokument Vjezba-1.htm:
• ubaciti u body ovu skriptu (pomoću Script kategorije trake za ubacivanje):
  alert();
• ako promijene koje slovo u veliku, doći će do pogreške - JS je sintaksno jako osjetljiv (case-sensitive, zagrade)
• objasniti script tag
• objasniti da se skripta izvršava u trenutku kad je browser pročita (čitaju se naredbe slijedno)
• neka sami probaju dodati naredbu window.open()
• objasniti čemu služi
• dodati parametar u naredbu - alert('Pero'); - objasniti
• dodati URL parametar u open - window.open('https://www.google.com');
• dodati još dva parametra (prazni i parametar s atributima)

window.open('https://www.google.com','','status,menubar');

• dodati

window.open('https://www.google.com','','status,menubar,left=0,right=0');

• pokazati reference panelu
• objasniti da objekt predstavlja objekt browsera (window,document), a metoda nešto radi na objektu
• na primjeru window.open() pokazati korištenje reference panele (npr. fullscreen otvara prozor preko cijelog ekrana)

• objasniti da je varijabla mjesto u memoriji
• napraviti varijablu name
• napuniti je s 'Pero' name='Pero';
• promijeniti alert naredbu u alert(name)
• dati zadatak neka dodaju sami varijablu surname, napune je s 'Perić' i prikažu pomoću alerta
• pokazati alert('Dobar dan '+name+' '+surname);
• objasniti da Javascript često služi za prijenos podataka između prozora, frameova, flash-filmova, formi (primjer: jedna stranica traži ime i prezime, druga ga prikazuje)

• kopirati window.open() dio u head i napraviti funkciju otvori() - u nju ide window.open()
• objasniti da je to dio koda koji se inicijalizira kod učitavanja (zapamti u memoriji), da bi se kasnije mogao koristiti - idealno za događaje (events)
• pokazati code navigation
• napraviti poziv unutar body-ja
• maknuti to i napraviti poziv pomoću linka - napraviti link na # i u kodu dodati onClick = 'otvori()'
• pokazati promjenu u behaviors paneli
• neka sami probaju promijeniti u onDblClick

• objasniti parametar funkcije - prenosi podatak u funkciju
• pretvoriti function otvori() u function otvori(karakteristike), a poziv u 'otvori('status')'
• usput objasniti navodnike u navodnicima
• na početku funkcije staviti alert(karakteristike); da vide šta se prenosi u funkciju
• maknuti alert, a karakteristike postaviti kao zadnji arg. naredbe window.open() – pokazati
• poziv funkcije promijeniti na

'otvori('status,menubar,top=0,left=0,width=320,height=200,resizable')'

• dodati link ispod, a poziv promijeniti u 'otvori('fullscreen')'

• novi dokument Vjezba-2.htm:
• vježba (djelomično pokazna): kako napraviti i pozvati f-ju koja zbraja 2 broja i ispisuje rezultat u alertboxu
• promijeniti f-ju da otvara novi prozor i u njega ispisuje rezultat:

novi = window.open();

novi.document.write(a + b);

• objasniti da je varijabla novi mjesto u memoriji koje ima u sebi objekt koji predstavlja novootvoreni prozor - zato možemo pisati novi.document.write('Bla') - to je write metoda na podobjektu document - malo komplicirano, ali treba ići na novi tečaj JS-a

• Behaviori:
• pokazati Call Javascript behavior
• pokazati ubacivanje fullscreen u OpenBrowserWindow
• pokazati window.close() za fullscreen prozor
• (pokazati prevođenje ValidateForm)
• (pokazati prevođenje teksta za downloadanu ekstenziju No Right Click)

4. dan: ASP (1.dio)

PRIJE SATA TREBA LOGIRATI SVA RAČUNALA KAO PREDAVAČE!!!

Vježbe se nalaze u V:Macromedia Studio MXVjezba-06-ASP - presnimiti

OBAVEZNO: NA POČETKU SATA SVE POLAZNIKE LOGIRATI KAO PREDAVAČE

I REĆI IM DA NE SMIJU MIJENJATI SETTINGE SISTEMA NITI NEŠTO

INSTALIRATI/DEINSTALIRATI/BRISATI/PREMIJEŠTATI, JER ĆE MORATI

SVAKU ŠTETU NADOKNADITI.

• pokazati sliku ServerskeTehnologije.gif i objasniti je
• prije početka rada sa serv. tehnologijom PROVJERITI PODRŽAVA LI JE UOPĆE SERVER na koji ćemo uploadati site
• reći šta je potrebno instalirati da se može raditi s ASP tehnologijom:

Service Pack 3 (Win2000) ili Service Pack 1 (WinXP)

• objasniti da ćemo morati naučiti:
• podesiti web-server tako da radi s našim ASP siteom u kojemu su ASP stranice
• Dreamweaver tako da otvori stranice preko servera, a ne direktno u file-sistemu

Zašto?

Zato jer ASP stranice sistem ne razumije i neće ih dobro interpretirati.

Razumije ih server, pa stranice moraju ići preko njega.

• izrada virtualnog direktorija za site:
• Control Panel > Admin. Tools > Internet Services Manager
• otvoriti komp, otvoriti Default web site
• desni gumb na default web site, New > Virtual Directory
• neka se zove wildlife; odabrati path do sitea na kojem radimo
• https://localhost/wildlife/index.htm otvara stranicu index.htm preko servera
  D:My DocsPolaznikWildlifeindex.htm bi je otvorio u file-sistemu i ne bi bila

dobro prikazana

Vježba: napraviti novu ASP stranicu i u kod ubaciti

'Sada je <%=Time()%>'

Pogledati je kao

• https://localhost/Wildlife_Project/proba.asp
• D:My DocumentsPolaznikVjezba_wildlifeproba.asp (ili gdje je već site)
• Napomenuti da je to jednostavna provjera podržava li site ASP

• da bi Dreamweaver mogao napraviti preview preko servera, a ne preko file-systema, potrebno je podesiti testing server (Edit Site, Testing Server):
• ASP VBScript
• Local/Network pristup
• URL prefix treba podesiti na https://localhost//, to jest

https://localhost/wildlife/

• provjeriti preview
• kopirati u site V:Macromedia Studio MXVjezba-08-ASP
• otvoriti index-predlozak.gif u Fireworksu

Vježba: napraviti novu ASP stanicu index.asp, koristeći:

• images/banner.jpg
• png/navbar.png (podesiti down image)
• swf/tiger.swf
• tablice 3x1, smeđa pozadina, bez obruba
• text/Text_left.txt
• images/line.jpg
• text/Text_right.txt

• (skripta, 7.9.4) Prikaz podatak iz baze (Dynamic table):
• OBJASNITI šta je recordset
• OBJASNITI šta je konekcija (ako nisi)
• pokazati kreiranje nove konekcije, pokazati Test
• objasniti da prvo treba dobiti podatke pomoću recordseta, pa ih onda tek prikazati, pokazati Test
• pokazati formatiranje prvog retka, ponavljajuceg retka, svake ćelije posebno

Vježba: napraviti novu ASP stanicu vjezba-recordset.asp

• novi recordset iz ANIMALS (Name, Description)
• prikazati pomoću Dynamic table
• formatirati tablicu

• (skripta, 7.9.5) Prikaz slike iz baze:
• snimiti index.asp kao education.asp, maknuti suvišak, srediti nav. traku
• konekcija je NA NIVOU CIJELOG SITEA, ne treba raditi novu za svaku stranicu
• dodati recordset koji sadrži sve iz ANIMALS tablice, Sort: Name
• u bazi je samo ime slike, a ne cijela slika; najčešće nema cijeli path do filea, već samo ime slike, pa treba dodati i tu informaciju
• dodati sliku, Data Sources, polje image
• u preview-u je greška, jer nema ispravnog puta do slike (vidi source)
• dodati 'animals/' prije '<%=(Recordset1.Fields.Item('Image').Value)%>'

• (skripta, 7.9.6) Navigacija između zapisa
• dodati nav. traku sa slikama
• za malu vježbu promijeniti u Fireworksu strelice previous.gif i next.gif
• podesiti nav. traku na sredinu

Vježba: dodati Navigation Status ispod Navigation bara

o        podesiti da piše npr. 'Slika 1 od 17', na sredini

• Na kraju pokazati Application grupu panela:

o        Databases – konekcije na baze (konekcija se može napraviti i ovdje)

o        Bindings – recordseti (recordset se može napraviti i ovdje)

o        Server Behaviors – prikaz dinamičkih podataka i server behaviori, kao što su:

Insert

Update

Delete

Log In

Log Out

Restrict Access to page

5. dan: ASP (2.dio)

PRIJE SATA TREBA LOGIRATI SVA RAČUNALA KAO PREDAVAČE!!!

Vježbe se nalaze u jučerašnjem siteu – nastavljamo dalje.

• (skripta, 7.9.7) Dynamic Text
• na stranici education.htm dodati naslov prije slike – Dynamic Text, stupac Name
• centrirati, prebaciti u H2
• pokazati Live Data
• pokazati podešavanje Highlighta elemenata iz baze (Edit > Preferences > Highlighting > Live Data)

Vježba: dodati Description, ScientificName, Size Predators pomoću Dynamic text

o        sve u tablicu

o        formatirati lijepo

o        dodati navigaciju na vrh

• (skripta, 7.9.8) Pretraživanje
• objasniti kako radi (u skripti)
• napraviti padajući meni (skripta)
• podesiti form tag (skripta)
• napraviti results.htm (skripta)
• dodati recordset s filterom (skripta)
• prikazati preview
• objasniti da tražilice općenito rade na sličan način

Vježba (općenito ASP):

o        Pokazni dio

• otvoriti Microsoft Access
• napraviti novu praznu bazu u novom direktoriju
  D:My DocumentsPolaznikASP-vjezbapodaci.mdb
• ući u Design View, napraviti tablicu (ID, IME, PREZIME, STAROST)
• napraviti primarni ključ i objasniti da on mora postojati i da je redovito tipa AutoNumber
• snimiti tablicu 'osobe' i ući u Datasheet View
• napraviti par zapisa (jedno 5)
• snimiti bazu i izaći iz Accessa

• Samostalni dio #1 – postavljanje dinamičkog sitea
• napraviti novi site ASP vježba (D:My DocumentsPolaznikASP-vjezba)
• napraviti novu virtualnu mapu 'mojaVirtualnaMapa'
• podesiti testing server za site

v      napomenuti da URL prefix treba biti https://localhost/mojaVirtualnaMapa/

• isprobati radi li preview s kodom za trenutno vrijeme
  'Sada je <%=Time()%>'

• Samostalni dio #2 – uređivanje dinamičkog sitea

• snimiti index.htm
• napraviti konekciju na bazu

v      napomenmuti da se radi o Custom Connection Stringu

v      podsjetiti na Help

v      podsjetiti na promjenu 'DBQ=' i TEST

• dodati recordset 'osobe', sortiranje po prezimenima
• prikazati recordset pomoću Dynamic Table
• formatirati izgled tablice

• ostane li vremena, napraviti stranicu s insert-om za ovu zadnju vježbu (delete i update ne rade kak treba ???)
• ostane li vremena, napraviti stranicu login.htm, s formom za login i Log In server behaviorom (password je prezime), i linkovima na stranicu insert.htm; na insert.htm njih dodati Restrict Access to Page Server Behavior
• ostane li još vremena, neka sve objedine u zajedničku aplikaciju:

o        dodati Log Out na stranicu insert.htm

o        dodati navigaciju

o        grafički urediti

• PITANJA

• ANKETA

• SEMINAR