Share
Astăzi am să vă prezint Adobe pentru a lua pe Responsive Web Design; Fluidizări în Dreamweaver CS6. Aceste instrumente noi permit proiectanților să-și construiască vizibil machetele receptive, mobil în primul rând, în timp ce Dreamweaver se ocupă de toate calculele flexibile din fundal. Hai să aruncăm o privire…
Permiteți-mi să încep prin a vă lăsa un mic secret; Îmi place ruptura. Îmi place când apare ceva nou, care provoacă tot ceea ce credeam că este adevărat, o legă într-o minge mică și o dă drumul la bordura. Aceasta este una dintre acele vremuri și îmi place. pur și simplu îl iubesc.
Intreruperile au fost "Responsabil Web Design" si "Mobile First", care au fost prezentate pentru prima oara intr-o industrie de web fara succes in 2010. Gandeste-te la asta, conceptele Mobile First and Responsive Design nu au fost intr-adevar solide pe radarul tau pana la un an în urmă. Apoi, sa produs o perturbare.
Înainte de a intra în noile caracteristici ale Dreamweaver CS6 care răspund acestor două concepte, cred că este important să înțelegem ce sa întâmplat și cum această perturbare conduce la această serie de tutori.
Totul a început pentru mine acum doi ani. Vorbeam la un eveniment Adobe Education Leaders la Adobe HQ din San Jose și vorbea despre modul în care educatorii trebuiau să se trezească și să înceapă să facă în mod activ ceea ce am numit atunci "Multiscreen" design și dezvoltare în sălile lor de clasă.
Epifania mea în jurul valorii de acest lucru a avut loc în noiembrie 2009 în, în toate locurile, scaunul din spate al unui taxi care îngrijesc prin Beijing. Când am intrat în cabină a apărut un ecran pe spatele scaunului din față și am putut interacționa cu conținutul de pe el. Din multe puncte de vedere, nu era nimic mai mult decât o tabletă înșurubată în scaun, conținutul fiind alimentat fără fir în dispozitiv. Acesta este momentul în care am realizat cu adevărat puterea dispozitivelor mobile, deoarece prima mea reacție a fost: "Acesta este un fel de lucruri pe care elevii mei le creează".
În jurul valorii de același timp, când trăgeam în jurul Beijingului, în noiembrie 2009, Luke Wroblewski se gândea pe blogul său despre dezvoltarea unei strategii mobile pentru prima dată când vizează designul web. Câteva luni mai târziu, muzeul său a explodat cu adevărat pe scenă când prezentarea lui Mobile First a fost postată la Linked IN Tech Talks în mai 2010. Acest link video a fost transmis rapid în jurul comunității cu un "Trebuie să verificați acest lucru". simplu: Uita de desktop, oameni. Proiectați mai întâi versiunea mobilă a site-ului, apoi începeți să vă gândiți la desktop.
Acest lucru a inversat întregul proces de design web cu capul în jos, a transformat-o spre interior și a rearanjat moleculele sale. Iată lucrul: a avut sens.
La proiectarea pentru mobil, cea mai bună practică comună a fost crearea unei versiuni mobile a site-ului pentru a asigura coerența experienței. Acest design a fost, de obicei, o versiune compactă a site-ului desktop. Dacă a fost implicat Flash, a însemnat și numeroase versiuni ale proiectului care vizează o varietate de playere și dispozitive Flash Light. O excursie la Dispozitivul Central care a fost abandonat acum a fost suficient pentru a mă convinge că nu a fost o modalitate foarte bună de a face lucrurile. Întregul flux de lucru mobil a fost atât de confuz și complex încât nu puteam să cred că încercam să facem un ciocan într-o situație în care șoferul cu șuruburi era cea mai bună abordare. Întrebarea mea cea mai comună atunci când se ocupă de acest lucru a fost să exclami: Trebuie să existe o modalitate mai bună de a face acest lucru.
După cum se dovedește, a existat.
În mai 2010, Ethan Marcotte a publicat un articol destul de interesant despre Alistapart. Intitulat Responsive Design, premisa a fost, din nou, destul de simplă: conținutul ar trebui să se adapteze la mass-media care îl afișează, mai degrabă decât invers.
Această idee a făcut sens și încă rezonează până în ziua de azi.
Lucrurile au dat într-adevăr lovituri mari în 2011. Atât Ethan, cât și Luke își fac cu succes cazurile, HTML 5 câștigă tracțiune în industrie și apoi cutremurul. La câteva săptămâni după ce Conferința anuală de utilizatori, Adobe Max, Adobe a renunțat la bombă. Ei anunță că Adobe salvează dezvoltarea platformelor pe platforma Flash. Pentru a pune acest anunț în context, luați în considerare acest lucru: Conferința Max 2010 a avut o importanță atât de mare pe platforma Flash mobilă, încât a distribuit gratuit participanților Flash Blackberries, Droids și Google TV.
Nu mi sa părut surprinzător faptul că Adobe se retrage, dar reacția industriei a variat de la "lumea se sfârșește" la "niciodată nu a folosit-o oricum, deci ce este mare lucru". Ceea ce Adobe nu a făcut a fost să ucidă Flash, deoarece Apple îl urăște. A ucis Flash în spațiul mobil deoarece, și ei și-au dat seama: trebuie să existe o modalitate mai bună de a face acest lucru, și atât Luca cât și Ethan arătau cum.
Ceea ce mi-a atras atenția a fost faptul că Adobe a făcut foarte clar, după ce molozul a încetat să se repete, trecea de la HTML 5 sau, așa cum îl numea acum, "The Expressionive Web Big Time". Edge, introdusă în august 2011, este un răspuns. Adobe este nou-găsit de dragoste pentru HTML este evident, cu un site nou, care este o mare mare îmbrățișare urs HTML și Dreamweaver CS6, care a lovit pe străzi la începutul acestui an, este, de asemenea, începe migrarea în această direcție.
Una dintre add-urile foarte potrivite pentru Dreamweaver CS6 este Fluid Grids, care, într-un fel, utilizează simultan abordările lui Ethan și Luke în proiectarea paginilor web. Dacă începeți să explorați conceptele Mobile First and Responsive Design, atunci un loc minunat pentru a începe este Fluid Grid Layouts, deoarece, ca editor vizual, Dreamweaver vă permite să vedeți ce faceți și cum se schimbă zvonurile CSS de la un smartphone , de-a lungul unei tablete și a ateriza pe desktop.
Când am început să sădesc în această nouă funcție, am simțit sincer că Fluid Grid Layouts erau o bijuterie ascunsă. După ce am petrecut ceva timp înfășând capul în jurul lor, am apelat la acest entuziasm. Nu puteam să cred că este o lucrare în desfășurare. A fost mai degrabă o primă încercare foarte bună decât o adăugare solidă la linie și suspectez că va fi o caracteristică Dreamweaver CS6 actualizată în mod regulat prin Cloud Creative.
Dreamweaver vă permite să vedeți ce faceți și cum se schimbă ruperea CSS de pe un smartphone, pe o tabletă și pe teren pe desktop
Modelele Gridului Fluid se bazează în mod clar pe Responsabil Web Design al lui Ethan Marcotte (cartea și articolul care au condus la carte). Această caracteristică vă permite să specificați trei grile fluide: câte unul pentru dispozitive mobile, comprimate și desktop. Fiecare grilă poate avea 2-24 coloane; o lățime comună a jgheaburilor între coloane și puteți specifica cât de largă ar trebui să se răspândească grila în fiecare ecran.
Apoi adăugați elementele div div layout pentru a vă construi pagina în aspectul mobil. (Mobile First) Pasul următor se află în categoria "strălucitor" - puteți redimensiona elementele din fiecare aspect, le puteți prinde în grilă și apoi puteți muta cu ușurință elementele individuale pentru a vă alătura și a vă juca frumos unul cu celălalt. Acest lucru se realizează fie în vizualizarea Design, fie în modul Live view și, cel mai bine, Dreamweaver calculează automat lățimea procentuală a elementelor și marginilor cu patru zecimale.
Acest calcul se bazează pe formula lui Ethan de target / context = rezultat. Un bun exemplu în acest sens ar fi lățimea coloanei. Să presupunem că aveți o lățime a paginii de 1232 pixeli și decideți că fiecare coloană trebuie să aibă o lățime de 350 de pixeli. Pentru a obține lățimea coloanei de fluid, împărțiți 350 (țintă) cu 1232 ( Context) = 0,28409091. Veți muta apoi zecimalele două locuri spre dreapta pentru un rezultat de 28.409091. Calcularea aspectului grilei Fluid Grid va scutura ultimele două numere, cu un rezultat de 28,4090%. Acest calcul se aplică tuturor elementelor care au atașat numere "grele", cum ar fi dimensiunea fontului, marginea, umplutura și așa mai departe.
CSS creat de Layouts Grid Fluid utilizează lățimi procentuale și plutitoare, astfel încât acestea produc layouts care se adaptează la orice dimensiune a ecranului. Aceste stiluri sunt construite pe baza "mobile first" și chiar lucrează în browsere care nu înțeleg interogările media. Pentru cei dintre voi care sunteți noi în Responsive Web Design, această singură caracteristică este suficientă pentru a vă aduce în joc.
Fiind o lucrare în curs, există, firește, "probleme".
De exemplu, Dreamweaver nu are o modalitate evidentă de a vă arăta care interogare media controlează o anumită regulă de stil. Puteți să vă dați seama destul de repede, dar acest lucru este un pic frustrant la început. Alta este una pe care unii utilizatori Dreamweaver au subliniat: Caracteristica nu suporta elemente de cuiburi pentru a crea layouts mai complexe. Alte caracteristici lipsă includ incapacitatea de a folosi clase în loc de ID-uri și ar fi destul de frumos să folosiți elemente semantice cum ar fi antet sau subsol.
Există, de asemenea, câteva "gotcha" în procesul care va mușca nepotrivit și o parte din ipotezele făcute cu privire la lățimea ecranului mobil sunt puțin mai largi de marcaj. Mă voi ocupa de multe dintre ele în cursul acestei serii.
Cu toate acestea, layout-urile Fluid Grid de la Dreamweaver ar trebui să apeleze la cei care încep să intre în jocul RWD.
Alternativ, descărcați videoclipul sau abonați-vă la programele de distribuție Webdesigntuts + prin iTunes sau YouTube!
Accentsconagua