Rapid UI Webknife

Ce veți crea

Web-ul modern necesită cicluri de dezvoltare mai rapide și mai rapide. Cu această cerere mai mare, este nevoie de instrumente care să ajute la respectarea acestor termene. Webknife este un cadru de dezvoltare web care vă ajută să creați machete și desene cu cele mai mici dimensiuni de codare. În acest tutorial, creez o aplicație bazată pe web pentru a ajuta instructorii de la Tuts + să își creeze mai ușor documentele de curs în Markdown.

Wireframing

Înainte de a codifica, este o practică bună să obțineți o idee despre aspectul aplicației și cum doriți să funcționeze. Această aplicație creează un document Markdown corect formatat pentru plasarea unui curs video în Envato CMS. Prin urmare, aceasta va consta mai ales în câmpuri de intrare.

obisnuiam Afinitate Designer pentru a crea o rețea wireframe a aplicației. Aici este principalul Proprietăți tab. Aceasta este principala informație necesară pentru a crea intrarea CMS pentru curs.

Formularul Proprietăți Formulare

Selectarea Lecții fila arată acest formular. Aici instructorul poate introduce titlurile capitolelor, titlurile lecțiilor, descrierile lecțiilor și linkurile lecțiilor. Numerotarea va fi calculată automat de program. Acest tutorial prezintă doar elemente demo suficiente pentru a vedea aspectul.

Formă de lecții de curs

Export fila are un singur element: un buton pentru a exporta cursul la un Markdown document.

Formular de export al cursului

Noțiuni de bază cu Webknife

Pentru a descărca biblioteca, accesați site-ul web Webknife și descărcați cea mai recentă versiune. În timp ce scriem acest tutorial, cea mai recentă versiune este 1.4.0. Dezarhivați fișierul din directorul dvs. de lucru.

Webknife este un grup de foi de stil și câteva fișiere JavaScript care fac rapid și ușor crearea site-urilor HTML. Prin urmare, voi trece mai întâi prin crearea HTML-ului, va arăta rezultatul acestuia și apoi voi adăuga doar CSS suficient pentru a face să arate așa cum vreau. Setul de instrumente Webknife face cea mai mare parte a activității.

În partea de sus a HTML va fi antetul care încarcă foile de stil și stabilește titlul. Creați fișierul index.html și adăugați următoarele:

        Envato Generatorul de foi de curs

Acesta este începutul fișierului HTML pentru proiect. Totul merge mai departe între

Etichete.

Tab-uri

Prima parte este tab-urile. Acestea vor avea icoane și un text care descrie ce face acea filă. Plasați această bucată de cod în principal div:

     Proprietăți  
    Lecții  
    Export

Lista neordonată are o clasă de w-tab. Această clasă Webknife formatează elementele listă care urmează să fie tab-uri. Primul element din listă are clasa de w-active. Webknife utilizează această funcție pentru a schimba culoarea filei pentru a fi culoarea activă. Toți ceilalți nu au, deci vor fi inactivi.

Fiecare element de listă are o ancora cu un onclick funcţie. Aceste funcții pe care le voi crea pentru a sprijini comutarea conținutului panoului de conținut.

În interiorul filelor de ancorare, există două deschideri. Primul interval are o clasă de w-icon. Toate spanurile cu această clasă au a date nume- selectorul cu numele pictogramei care se introduce în interiorul intervalului respectiv. Spanul Proprietăți are date-name = "clipboard". Lecțiile au o date-name = "compune". Intervalul de export are date-name = "cota". Webknife are 77 de pictograme pentru a alege de la. Consultați Ghidul de referință HTML pentru mai multe detalii.

Mesaje

După Tab-uri Tab-uri, plasați acest cod:

    Salvat bine!
 
   A fost o eroare!

Această secțiune începe cu a div care conține toate conținutul panoului pentru toate cele trei file. Acest div conține, de asemenea, două zone de mesaje: una pentru salvare și una pentru mesaje de eroare.

Mesaje Webknife - cu formatul meu adăugat

Webknife are stilul CSS mare pentru a face ca pictograma să fie mai mare și stilul CSS colorat pentru a-l colora roșu. În ambele mesaje, folosesc Date-name: "alert_circled" pentru un triunghi rotunjit cu o pictogramă cu semn de exclamare. Fiecare mesaj are clasa Webknife -Mesaj w pentru a avea stilul mesajului. Mesajul salvat utilizează w-informații, și mesajul de eroare utilizează w-eroare.

În fișierele sursă pentru acest tutorial, le-am comentat aceste linii. Voi folosi JavaScript pentru a injecta acest cod în DOM după cum este necesar.

Panoul Proprietăți

Pentru Panoul Proprietăți, adăugați acest cod:

   Autor:   
 Dificultate:   
 Subiect:   
 Categorii:   
 Software / Limbi / Cadre:  
 Rata cursului:   
 Din cauza:   
 Numele cursului:   
 Descrierea cursului:    
 Sursa Descriere:

Panoul Proprietăți div conține două clase: w-form și w-active. w-form definește stilul pentru o formă și w-active îl desemnează ca afișat activ. Deoarece aplicația ar trebui să înceapă pe acest panou, este setată de la început.

Înăuntru div, Sunt divcu clasa w-form-grup. Această clasă păstrează totul în interiorul ei pe o singură linie. Fiecare dintre acestea divs conține o etichetă și o intrare sau o textare. Fiecare intrare are un identificator unic pentru a obține ușor informațiile din JavaScript. Este un w-form-grup dev pentru fiecare dintre intrările de pe acest panou.

Grupul de lecții

După div pentru Panoul Proprietăți, plasați acest cod:

  1    1.1      Link-uri conexe:
     
   
 
 
   
 
 
  2    2.1      Link-uri conexe:

Structura panoului de lecții este aceeași pentru panoul Proprietăți. Etichetele indică numere diferite de secțiuni și numere de lecții. Intrările sunt intrări de text pentru titluri și titluri și sunt textareas pentru descrieri.

Fiecare antet, titlul lecției și linkul are un a deschidere element cu date nume- de close_circled. Aceasta plasează un cerc cu un "x" în mijloc pentru a șterge acele elemente.

Fiecare intrare de legătură are o deschidere element cu date nume- de Pământ. Aceasta plasează o pictogramă care arată ca un glob.

Toate butoanele au clasele Webknife w-small și w-colorate. addButton class pentru adăugarea unui stil specific în fișierul CSS.

ids nu sunt cele finale, dar codul JavaScript le va crea după cum este necesar. Acestea arată doar formatul de bază.

Exportarea panoului și importul JavaScript

După div pentru panoul de lecții, plasați acest cod:

Panoul de export are un buton simplu. Cursurile Webknife din w-large și w-colorate faceți butonul mai mare și un albastru mai întunecat.

După închidere divs pentru panouri, cele trei scenariu tag-urile încarcă fișiere JavaScript din Webknife și fișierul meu JavaScript. Fișierul JavaScript conține funcțiile necesare pentru comutarea filelor și afișarea selectorului de date și dialogul modal pentru adăugarea unui link.

Codul JavaScript

În dosar js / basic.js, adăugați acest cod:

funcția onLoadFunctions () // // WebKnife: instanțiați un injector svg pentru a afișa pictogramele SVG // sau utilizați injector.inject ('# foo') pentru a injecta numai în interiorul // elementelor de potrivire // var injector = new svgInject () ; injector.inject (); // // Configurați setul de date pentru data scadentă. // dateDue = $ ('# datedue') pikaday (firstDay: 1, minDate: new Date ('01 -01-2015 '), maxDate: "MM / DD / AAAA", anRange: [2015,2099]);  window.onload = onLoadFunctions; // // Aceste variabile și funcții globale sunt pentru schimbarea rapidă a // stărilor filelor și a conținutului acestora. // var propPan = $ ("# propertiesPanel"); var lessPan = $ ("# lessonsPanel"); var expPan = $ ("#exportPanel"); var propTab = $ ("# propertiesTab"); var lessTab = $ ("# lessonsTab"); var expTab = $ ("# exportTab"); proprietățile funcțieiTabClick () propPan.addClass ("w-active"); lessPan.removeClass ( "w-activ"); expPan.removeClass ( "w-activ"); propTab.addClass ( "w-activ"); lessTab.removeClass ( "w-activ"); expTab.removeClass ( "w-activ");  funcția lessonsTabClick () propPan.removeClass ("w-active"); lessPan.addClass ( "w-activ"); expPan.removeClass ( "w-activ"); propTab.removeClass ( "w-activ"); lessTab.addClass ( "w-activ"); expTab.removeClass ( "w-activ");  funcția exportTabClick () propPan.removeClass ("w-active"); lessPan.removeClass ( "w-activ"); expPan.addClass ( "w-activ"); propTab.removeClass ( "w-activ"); lessTab.removeClass ( "w-activ"); expTab.addClass ( "w-activ");  functie getLink (addButton) // // Crearea dialogului modal pentru introducerea adresei web. // var modalOptions = 'lățime': 600, 'înălțime': 220, 'titlu': 'Introduceți titlul și adresa Web pentru link', 'html'[] ()
'; $ (AddButton) .modal (modalOptions);

Prima funcție este o onload funcţie. Se va executa când încărcarea paginii va fi terminată. Această funcție stabilește injectorul pictogramelor svg cu cadrul Webknife. După aceasta, acesta stabilește selectorul de date, de asemenea de la Webknife, pentru data scadentă a cursului.

Variabilele globale și cele trei funcții care urmează execută comutarea filelor. Folosesc variabilele pentru a păstra pachetul jQuery pentru diferitele elemente de tab și panouri. În acest fel, ele nu sunt create de fiecare dată când funcțiile sunt executate.

Ultima funcție este deschiderea dialogului modal pe Adăugați legături buton. Când utilizatorul face clic pe buton, se afișează următorul dialog:

Modal Dialog pentru Adăugarea de legături - cu formatul meu

Mai multe coduri trebuie să fie scrise pentru a obține aplicația pe deplin funcțională, dar acest lucru este suficient pentru acest tutorial.

CSS personalizat

Înainte de a adăuga CSS personalizat, aplicația arată astfel:

Aplicație cu stil Webknife implicit

Acest lucru nu pare prea rău, cu excepția faptului că toate panourile arată imediat și culorile de fundal nu sunt ceea ce vroiam. Dar acest lucru este ușor de rezolvat. În dosar css / basic.css, plasați acest cod:

corp suprasatura-x: ascuns; fundal-culoare: albastru deschis;  #main culoare-fundal: albastru deschis; overflow-x: ascuns; padding-left: 10px; padding-top: 10px; margine: 0px; lățime: 720px;  secțiunea padding: 0px;  #panelContainer width: 700px; box-size: caseta de margine; raza de graniță: 5px; frontieră: 1px solid #bbb; înălțime: 855px; overflow-y: auto;  #propertiesPanel height: 0px;  #lessonsPanel height: 0px;  #exportPanel height: 0px;  #exportPanel div top: 200px; poziție: relativă;  .w-tab margin-stânga: 5px;  .w-tab li fundal-culoare: # 86c5da;  .w-tab li.w-activ fundal-culoare: # d4ebf2; border-bottom: 0px;  .w-tab-content fundal-culoare: # d4ebf2;  .w-form top: 0px; frontieră: 0px; padding: 0px; margine: 0px; vizibilitate: ascuns;  #propertiesPanel .w -group -group .w-file-input, #propertiesPanel .w-input -group -group [type = text], #propertiesPanel .w-input -group [type = password], #propertiesPanel .w -form-group-select, #propertiesPanel .w-form-grup textarea, #propertiesPanel .w -formă grup-etichetă display: inline; lățime: 55% .w-form .w-form-group margine: 0;  #propertiesPanel .w-form-group label afișare: inline-table; lățime: 42%; text-aliniere: drept; padding-right: 10px;  #lessonsPanel .w-form -group .w-file-input, #lessonsPanel .w -forma-grup de intrare [type = text], #lessonsPanel .w -forma de intrare grup [type = password], #lessonsPanel .w -form selectare grup, #lessonsPanel .w-form-group textarea, #lessonsPanel .w-form-group label afișare: inline; lățime: 80% #lessonsPanel .w-form-group label afișare: inline-table; lățime: 5%; text-aliniere: drept; padding-right: 10px;  .lessgroGroup padding-left: 40px;  .lessonDescriptionGroup padding-left: 45px;  .linkGrupuri padding-left: 0px;  .closeIcon vertical-align: middle;  .closeIcon svg lățime: 15px; margin-top: 5px; vertical-aliniere: mijloc;  .linkIcon vertical-align: middle;  .linkIcon svg lățime: 15px; margin-top: 5px; vertical-aliniere: mijloc;  .addButton margin-top: 10px;  #message display: inline-flex; lățime: 600px; overflow: ascuns; top: -100;  #message p (lățime: 550px; margin-stânga: 20px;  Spuneți #message svg margin-top: 20px;  intervalul de mesaje #message height: 45px;  #alert display: inline-flex; lățime: 600px; overflow: ascuns;  #alert p (lățime: 550px; margin-stânga: 20px;  Spațiul #alert svg margin-top: 20px;  #spație alarmei height: 45px;  .w-activ vizibilitate: vizibil! important; înălțime: auto;

Acesta este tot CSS-ul necesar pentru a obține aspectul pe care l-am dorit. Cele mai multe dintre acestea este de a obține pictogramele în locația corectă, ascunderea corectă a panourilor care nu sunt vizibile cu selecția filei și setarea culorilor de fundal.

Cu CSS în loc, Proprietăți fila arată astfel:

Proprietăți tab

Lecții fila arată astfel:

Lecții Tab

Si exporturile fila arată astfel:

Export tab

Ele nu sunt la fel ca cadrele de sârmă, dar îmi place cum arată acest lucru.

Concluzie

În acest tutorial, v-am urmărit prin crearea unei aplicații web de bază pentru crearea foilor de curs în Markdown pentru Envato. Acest proiect prezintă doar grafica din față, dar demonstrează cum să utilizați Webknife pentru a crea rapid aspectul aplicației web sau al site-ului web. Există mai multe elemente de utilizat decât am putut folosi în acest proiect. Depinde de tine să experimentați acum. Deci, du-te crea ceva nou în Webknife.

Cod