Adobe Dreamweaver CS6 pregled: Razvoj mobilnih aplikacija, HTML 5 način

U dizajnu web stranice, popularnost Adobe Flash multimedijalne platforme je nosno ronjenje, dok je HTML5 skyrocketing. Taj prijelaz uzrokuje web stranice i web dizajnere kako bi pronašli bolje načine uključivanja pokreta i interaktivnosti, a Adobeov novi Dreamweaver CS6 (399 $ kao samostalni program, od 6./1/2012, također dio Adobeove Creative Suite 6)

Fluid Layouts, Fluid Design

Sve prometa na webu raste, ali promet mobilnih web stranica raste najbrže. Nova alata Fluid Grid Layout Dreamweaver CS6 pomaže vam dizajnirati uređaje svih veličina zaslona, ​​od pametnog telefona do tabletnog računala do radne površine. Prethodna verzija Dreamweavera pomogla je u izgradnji "medijskih upita" - kôd u glavnoj HTML datoteci za usmjeravanje prometa s uređaja različitih veličina zaslona na različite CSS datoteke - ali nije pružila mnogo pomoći u pronalaženju načina postavljanja svaka od tih CSS datoteka za različite zaslone.

Za Layout tekućeg rešetanja koristite jednostavan čarobnjak za postavljanje koliko kolaka želite za smartphone, tablet i desktop; naznačiti veličinu stupaca; i Dreamweaver stvara HTML5 datoteku i pridruženu datoteku CSS3. Zatim koristite naredbu izbornika kako biste dodali spremnike za blokove sadržaja i preuredili ih na rešetku. Dreamweaver brine o kodiranju - barem neko vrijeme; kao i gotovo s bilo kojim Dreamweaverovim radom, na kraju ćete primijetiti prikaz koda aplikacije kako biste unijeli izmjene u svojem sadržaju. Tvrtka Adobe upozorava na zabranu korištenja koda za oblikovanje tekućeg rešetkastog rešetkastog materijala - to je jednostavno previše lako za zavarivanje. Usput, Adobe TV ima izvrsne video upute za ovu novu značajku i mnoge druge.

Layout rešetke tekućine trebali bi vam dati početnu točku za adaptivni dizajn. To znači da jednom izradite svoj sadržaj, a zatim web stranice na kojima se taj sadržaj žive preoblikuju kako bi prikazali sadržaj na bilo kojem zaslonu bilo koje veličine. To je poznato kao prilagodljivi dizajn i možete ga testirati na bilo kojoj web stranici tako da ga otvorite u pregledniku računala, a zatim promijenite veličinu prozora preglednika, od veličine pametnih telefona do standardne veličine radne površine. Sadrži li sadržaj na stranici samo tamo gdje promijenite veličinu ili se preusmjerava na temelju veličine prozora? Ako se reflows, onda je to vjerojatno HTML5-based site, a vjerojatno će raditi na bilo kojem uređaju.

Pronašao sam Fluid Grid Layouts lako stvoriti, ali sam otkrio da je promjena veličine kontejnera radili malo tromo, i funkcija poništavanja često nije funkcionirala. Dreamweaverov sučelje ima nove, korisne gumbe pri dnu prozora dizajna koji možete kliknuti da biste prikazali izvješća o pregledavanju pametnih telefona, tableta i zaslona na stolnim računalima, a to je vrlo korisno da biste vidjeli kako će se vaš sadržaj pojaviti. Također, poboljšan je Dreamweaverov prikaz uživo jer vizualni prikaz onoga što će vaša web stranica izgledati u stvarnom pregledniku bliži stvarnosti (ali samo bliže onome što pretraživači temeljeni na webu - što znači Safari i Chrome - izgledat će poput, Firefox i Internet Explorer mogu izgledati dramatično različiti). Ipak, sada možete napraviti neke promjene u kodu dok je prikaz uživo omogućen i vidjeti promjene koje se odražavaju u oknu Dizajn, što prije niste mogli učiniti.

Dialog okvir za novi alat CSS Transitions.

Novo paleta i pridruženi dijaloški okvir pomažu vam stvoriti CSS prijelaze, koji su efekti pokreta koji ne zahtijevaju JavaScript (ili Flash, naravno). Nakon što ste dobili kako oni rade, možete izgraditi spiffy akcije, kao što su rollovers i druge pokrete prilično jednostavno. Kôd koji Dreamweaver generira je također jednostavan jer ponašanja koja se opisuju skrbena su sa sažetim CSS3 kodom, a ne opsežnim JavaScriptom. Dreamweaver generira sve šifre specifične za preglednik koji su potrebni za preglednike (stari i novi) da koriste ovaj kôd; to jest, svaka akcija koju postavite uzrokuje da Dreamweaver generira CSS kod koji je lako razumljiv.

Umjesto da se pridržavate standardnih, dosadnih Ariela, Tahoma i slično, koji su ugrađeni u sve preglednike i stoga ih je sigurno odrediti na web stranici, možete kupiti ili pronaći besplatne fontove iz Googlea ili drugih odjeće, učitati ih na svoj web-poslužitelj, a zatim upotrijebite novi web-upravitelj fontova za Dreamweaver CS6 kako biste ih primijenili na svoje stranice. To je sjajno, ali morate preuzeti fontove na svoj poslužitelj, jer program ne pomaže u upravljanju fontovima koji moraju biti hostirani izvana, poput onih iz Adobeove vlastite biblioteke TypeKit, iako Adobe kaže kako će uskoro biti dostupna podrška za ugradnju fontova TypeKit. I Dreamweaver CS6 zahtijeva da učitavate fontove jednu po jednu u sučelje Upravitelj web-mjesta, a zatim ih morate dodati na popis vaših popisa fonta. Adobe kaže da je to zbog problema s licenciranjem, ali mislim da je postupak ipak mogao biti malo manje težak. Da biste koristili fontove, odabirete neki tekst, a zatim odaberite naziv fonta s padajućeg izbornika CSS. Bez obzira koristite li preuzete web-fontove ili one koji se nalaze na vašoj web-lokaciji, vidjet ćete da se ispravno pojavljuju u Dreamweaverovom prikazu uživo.

Aplikacija je tamo gdje je

Prethodna verzija Dreamweavera dopuštala je korisnicima stvaranje mobilnih aplikacija (u osim toga, na web-lokacijama za mobilne uređaje), ali to je potrudilo: morate sam preuzeti paket za Android razvojne programere (SDK), instalirati ga, a zatim recenzirati Dreamweaveru gdje ga pronaći. Ako ste pokušavali napraviti aplikaciju za iOS, niste imali sreće, jer Apple ne proizvodi SDK koji radi na sustavu Windows. Dreamweaverovi predlošci bili su i mali i dosadni.

JQuery swatch ploča za dizajniranje gumba.

Neke se od njih promijenilo na bolje. Sada možete dizajnirati sučelje svoje aplikacije uz pomoć nove ploče zaslona jQuery, koja vam omogućuje da odredite stilove i boje za gumbe. Možete također izraditi ili modificirati dizajne gumba u programu Adobe FireWorks, koji će vam omogućiti izlaz HTML5 koda koji je specifičan za preglednik, ili možete izraditi vlastite dizajne aplikacija na fantastičnoj web stranici Tempora jQuery Mobile i preuzeti ih za Dreamweaver CS6.

Kad ste zadovoljni dizajnom, otvorite nove palete PhoneGap. Prošle godine Adobe je kupio PhoneGap, tvrtku koja je stvorila platformu za izgradnju mobilnih aplikacija, a kao rezultat toga, Dreamweaver CS6 ima još jaču vezu PhoneGap. Umjesto da vaše računalo gradi vašu aplikaciju, PhoneGap to radi za vas, na svojim poslužiteljima. U jednoj paleti možete se prijaviti na svoj račun PhoneGap (to možete učiniti s Adobe ID-om), au drugoj paleti možete odrediti želite li izgraditi aplikaciju za iOS, Android, Windows Mobile, BlackBerry ili čak Symbian.

Kliknite gumb u paleti usluge Gradnja telefona za izgradnju aplikacije i kada je gotov, možete preuzeti aplikaciju i prenijeti je na svoje uređaje ručno ako imate odgovarajuće alate za prijenos. Praktično, paleta također nudi QR kodove za svaku izradu OS-a koje možete koristiti s QR Code čitačima kako biste telefonu preporučili da je preuzmu.

To su genijalni načini za pomoć u razvoju telefonskih aplikacija. Ipak, nekoliko stvari i dalje čine ovaj napredni zadatak. Ako želite dizajnirati iOS aplikacije na Windows sustavu, i dalje ćete trebati 99-godišnji račun razvojnog programera tvrtke Apple i morat ćete upotrijebiti Mac da biste prenijeli ključne datoteke u Apple i preuzeli druge datoteke. (Pronašao sam način da to učinim na Windows računalu u forumima zajednice PhoneGap-a, to je radio, ali bilo je teško.) Zatim morate prenijeti te datoteke na PhoneGap.com. Sve je to samo za razvoj vaše aplikacije, a ne za interakciju s iTunesom. Važno je napomenuti da ovo nije Adobeova pogreška; Appleove krute kontrole nad aplikacijama za iOS znači da je PhoneGap jedini način razvoja aplikacija za iOS u sustavu Windows. Appleova krutost također ima prednosti, jer pomaže u policiji aplikacijama za iOS, pa je teško kritizirati Apple.

Ostale nove ili poboljšane značajke: Adobe kaže da je poboljšana FTP izvedba i mogu potvrditi da je sinkronizacija datoteka brža. Integracija s tvrtkom Adobe Business Catalyst, online hosting, sustav za upravljanje sadržajem i usluga e-trgovine sada je ugrađena u Dreamweaver CS6. Usluga ima mnoge korisne značajke, uključujući izradu online obrazaca i održavanje popisa e-pošte.

Ostati relevantan s HTML5

Od svih aplikacija Creative Suite, Dreamweaver CS6 je onaj koji je napunjen s najviše dobre stvari - uključujući nove integrirane alate i načine za pristup novim internetskim alatima. Također se ističe kao aplikacija u najbržem programu koji pruža korisne značajke potrebne za održavanje eksponencijalne kreativnosti koja se događa na mreži.