HTML5 ja CSS3: Wireframing lopputuotteessa

Se on klassinen tapaus Photoshop versus verkkosivuilla. Olemassa olevat langankiristys- ja prototyyppityökalut eivät kykene heijastamaan tarkasti verkon ympäristöä.

Ne tuottavat staattisia malleja, joita ei voi nähdä selaimella tunnetun muuttujan kautta. Ja kun rakennat lopullisen verkkosivuston, jotkut elementit eivät näytä täsmälleen vastaavanlaisia esityksiä, ja asiakas näkee pienet fontin, paikannuksen jne. Eroja.

Saatat olla mukavampaa grafiikkasuunnitelman kanssa, ja mallien iteraatioiden tekeminen saattaa kestää kauemmin, jos sinun on koodattava HTML-koodi.

Kuitenkin langattoman kehyksen luomisen etuja HTML: ssä alusta alkaen alkaa olla suurempia kuin vaihtoehdot: ei vain HTML5: ssä ole uusia asettelualoja ja voimakkaampia valitsimia ja muotoilua CSS3: ssa, mutta yhdistämällä ne voidaan yhdistää yksinkertainen layout nopeasti.

Kuuntelemme uuden yrityksen päivittäin ( 37Signals , Atomiq ja toiset ) selittävät HTML-prototyyppien käyttöönoton. Heidän tärkein syy on, että prosessi on yllättävän helppoa, kun sinulla on oikeat työkalut paikallaan. Aiot oppia kuinka helppoa tämä prosessi voi olla, ja kun olet valmis, sinulla on pääkäynnistys seuraavassa rakennelmassasi.

Nopea ulkoasu HTML5: llä

HTML5 tuo joukon erinomaisia uusia rakenteellisia elementtejä, jotka helpottavat asiakirjan nopeaa muokkaamista vähemmän luokilla ja tunnuksilla. Kun ymmärrät näiden elementtien tarkoituksen, voit luoda karkean sivun asettelun muutamassa minuutissa.

Jos et tunne näitä uusia elementtejä, tässä on nopea esittely. Uudet elementit tarjoavat entistä puhtaamman asiakirjarakenteen ja vapauttavat sinut irti raskaasta div-käytöstä. Lachlan Hunt kuvaa näitä elementtejä hienosti " Esikatselu HTML5: stä ”:

article element represents an independent section of a document, page or website. elementti edustaa dokumentin, sivun tai verkkosivuston itsenäistä osaa. Se sopii esimerkiksi uutis- ja blogiviesteihin, foorumiviesteihin ja yksittäisiin kommentteihin.
section element represents a generic section of a document or application, such as a chapter. elementti edustaa asiakirjan tai sovelluksen yleistä osaa, kuten lukua.
header element represents the header of a section. elementti edustaa otsikon otsikkoa. Yläosat voivat sisältää enemmän kuin vain osan otsikosta; esimerkiksi olisi järkevää sisällyttää alaotsakkeet, versiohistoriatiedot ja bylines.
nav element represents a section of navigation links. elementti edustaa osaa navigointiyhteyksistä. Se sopii sekä verkkosivujen navigointiin että sisällysluetteloon.
aside element is for content that is tangentially related to the content around it, and it is useful for marking up sidebars. elementti on sisällölle, joka liittyy tangentiaalisesti ympäröivään sisältöön, ja se on hyödyllinen sivupalkkien merkitsemiseksi.
footer element represents the footer of a section. elementti edustaa jakson alatunnistetta. Se sisältää yleensä tietoja siitä osasta, kuten tekijän nimestä, linkistä aiheeseen liittyviin asiakirjoihin ja tekijänoikeustietoihin.

Esimerkkisivustossani haluan keskitetyn sivun, jossa on otsikko, vasemmanpuoleinen sivupalkki, pääosan sisältö ja alatunniste. Olen käyttänyt HTML5-elementtejä rakenteen merkitsemiseen article elementti sisältää kaiken.

Example
>

Nämä elementit ja divs ovat mitoittamattomia ja näkymättömiä, ellet aseta tyyliattribuutteja tai aseta sisältöä niihin. Jotta ne toimivat, meidän on väliaikaisesti annettava heille korkeudet. Meidän pitäisi myös määrittää HTML-elementit display: block; jotta selain tunnistaa ne (ylimääräistä työtä vaaditaan IE: lle).

article, header, nav, aside, section, footer {display: block;min-height: 100px; }

Ennen kuin elementit sijoitetaan, meidän on pystyttävä näkemään asettelua. Ihanteellinen ratkaisu rakenteen visualisointiin ilman minkäänlaista sisältöä olisi helppo poistaa myöhemmin eikä vaikuttanut muotoiluun.

Vaihtoehto 1: ääriviivat

Ääriviivat asetus on yhteensopiva kaikkien nykyaikaisten selainten kanssa eikä vaikuta elementtien leveyteen, kun taas border attribuutti ei.

article, header, nav, aside, section, footer {outline: 1px solid #000; }

Vaihtoehto 2: HSLa

HSLa (tai jopa RGBa) antaa paremman kuvan elementtien hierarkiasta, koska peittävyys tekee päällekkäisistä elementeistä tummemman. Mutta jos aiot perustaa taustan värejä mallinnuksessa, niin tämä menetelmä ei ehkä toimi hyvin.

article, header, nav, aside, section, footer {background: hsla(200, 30%, 30%, .4); }

paikannus

Asemointielementtien käyttö on henkilökohtaisen mieltymyksen asia, ja sinulla on runsaasti vaihtoehtoja: selaimen tai käyttöjärjestelmän mittaustyökalut, taustaverkko-kuvat (jotka olen valinnut), CSS-kehykset, joissa on verkko- ja asettelutuki tai ohjelmistot, kuten Dreamweaver. Paikannus on tärkein osa ja sen on toimittava oikein alusta alkaen. Täällä kirjoitettu koodi jää todennäköisesti lopputuotteeseen.

Esimerkkinäni olen antanut sivulle kiinteän leveyden, vasemmanpuoleisella sivupalkilla ja sisällön oikealla puolella, sekä otsikon että alatunnisteen välissä.

body > article {width: 760px;margin: 0 auto; }article article {overflow: hidden;width: 750px;margin: 20px 0;padding: 5px; }aside {width: 150px;float: left; }section {float: right;width: 590px; }

Koko prosessin aikana voin nähdä kunkin osion ja nähdä missä se ilmestyy. Tässä on tulos:

Älä välitä selaimen yhteensopivuudesta, ennen kuin pääset lopputuotteeseen. Suosittelemme, että jättäisit muistiinpanoja CSS-kommenttien kautta, merkitsemällä, mihin alueisiin haluat palata (mikä on ensisijaisesti valitsimia ja ominaisuuksia, jotka edellyttävät tiettyjen selainten lisähuoltoa).

Prototyyppisisältö

Kun ulkoasu on valmis, saatat joutua lisäämään näytesisältöä. Tavallisin tapa on tänään laskea Lorem Ipsumin palaset ja vesileimaamalla valokuvan sivulle. Miksi keksimään pyörä uudelleen?

HTML Ipsum on erinomainen verkkosivusto, joka kattaa Lorem Ipsum -tekstin yhteiseen korotukseen. Ei voi olla mitään helpompaa tarttua kaikkiin yhteen sivuun.

PlaceHold.it tarjoaa paikkamerkkien kuvia mihin tahansa kokoon tarvitset soittamalla jokaiseen kuvaan URL-pyyntöön (kuten http://placehold.it/350x150 , jossa ensimmäinen arvo on leveys ja toinen korkeus):

PlaceKitten toimii täsmälleen kuten PlaceHold.it, paitsi kuviot:

Sen sijaan, että lisäät JavaScript-asetusta karttoihin, voit vetää peruskartan kuvan mukaan Google Static Maps . API-avain tai yksilöllinen allekirjoitus on pakollinen, mutta sinun on kuitenkin tehtävä se, mikäli lopputuote sisältää kartan.

Simuloida käyttäytymistä

Nykyaikaiset verkkosivustot sisältävät toiminnallisuutta, jota on vaikea kommunikoida staattisten rautalankojen kautta: laajentaminen ja romahduselementit, siirtymät, vedä ja pudota, dynaamiset valikot jne. Sinun täytyy kuitenkin käyttää JavaScript-kirjastoa joka tapauksessa, joten kirjastoa ladataan nyt ja komentosarjoja joissakin perustoiminnot eivät satuttaneet.

Voit välttää lataamisen lataamalla jQueryä sen sisältöverkostosta. Muokkaa aiottua käyttäytymistä muutamalla toiminnolla kirjoittamisen sijaan. Jos elementti tulee esimerkiksi näkyviin, kun linkkiä napsautetaan (esimerkiksi sisäänkirjautumisikkuna tai yhteystietolomake), rakenna nopeasti ikkuna, piilota se oletusarvoisesti ja käytä sitten jQueryä paljastaaksesi sen napsautuksella.

Niin kauan kuin teet vain tarpeeksi työtä jäljitellä käyttäytymistä, asiakas voi nähdä tuloksen itselleen eikä kaataa useita vuokaavioita tai selityksiä.

Simuloidaan tiloja

Jos luot raidankirjoja verkkosovelluksen sijaan verkkosivustolle, saatat haluta näyttää nopeasti useita yksittäisen sivun tiloja. Voit luoda erilaisia kopioita rautalankavereista, jotka kukin muuttuivat näyttämään tietyn tilan tai voit käyttää PolyPage .

PolyPage on jQuery-plug-in, jonka avulla voit käyttää luokkia merkinnöissäsi edustamaan elementtejä, jotka olisivat läsnä eri tiloissa (esimerkiksi kirjautuneena ja kirjautuneena). Voit vaihtaa jokaisen tilan linkin avulla. Näin voit helposti erottaa asiakkaasi eroista ilman, että tarvitset useita sivuja.

Lopulliset ajatukset

Vaikka alkuperäiset mallit näyttävät aina upealta paperilta tai PDF-tiedostona, HTML-sivujen luominen heti alusta alkaen on useita etuja.

Säästät aikaa, jonka olisit käyttänyt suunnittelun uudelleenmuodostusta koodissa. Välttääksesi sekaannuksen, mietin, miksi lopullinen tuote ei näytä täsmälleen kuin alkuperäinen. Ja säästät sekä sinä että asiakkaasi aikaa, rahaa ja hermoja.

Michael Botsko on web-kehittäjä ja web-teknologiaopettaja Portlandissa, Oregonissa. Hän nauttii työskentelystä sekä asiakkaalle että avoin lähdekoodi hankkeita Botsko.net , LLC. Kun ei toimi, hän nauttii viettää aikaa kahden lapsensa ja upean vaimonsa kanssa.

Mitkä nopeat ulkoasut ja prototyyppityökalut ovat unohtaneet? Mitkä ovat edut suunnittelussa ja rakentaminen myöhemmin?

HTML5 ohjelmointi CSS3 Wireframing html koodi