Viisi asiaa, joita et tiennyt verkossa

Sisältö

• 1. CSS verkkosovelluksille
• Kohdistus
• Tilaaminen ja suuntaaminen
• Joustavuus
• Demo
• Tuki
• 2. Yksisuuntainen tietojen sitominen
• HTML5-tietojen käyttö - * -määritteet
• Käyttämällä datalistia>
• Tuki
• 3. Käytä tiedostojärjestelmää
• Demot
• Tuki
• 4. Käytä natiivilaitteistoa
• Mitä voimme tehdä tänään?
• Mikrofonin käyttöoikeus
• Videon nauhoittaminen
• Tuki
• 5. Suoratoista multimediaa
• Äänen suoratoisto
• WebRTC-datakanavat
• Tuki
• Johtopäätös

Muutama viikko sitten esitin "Web voi tehdä sen !?" Google I / O 2012: ssa:

Toisin kuin jotkut muut aikaisemmin pitämäni HTML5-keskusteluista, tänä vuonna keskityttiin osoittamaan uusimman verkkotekniikan käytännön käytöt ja näyttämään se toiminnassa. Loppujen lopuksi räikeät demot ovat mehiläisten polvet. Kukaan ei usko joukkoa luetteloluetteloita ja käsin heiluttamista!

Tässä artikkelissa aion sukeltaa viiden hämmästyttävimmän jutun joukkoon "Web voi tehdä sen!" Jos olet kiusallinen, kaiken lähde on GitHubissani ja itse esitys löytyy osoitteesta htmlfivecan.com.

Huomioitavaa: Jotkut näistä jutuista ovat edelleen hyvin uusia. Parasta on kokeilla dioja ja demoja Chrome 21+ -käyttöjärjestelmässä.

1. CSS verkkosovelluksille

CSS on vienyt meidät maagisiin paikkoihin, mutta valitettavasti monet sen asettelu- ja esitystoiminnot (katson sinua, absoluuttinen paikannus ja kelluvat) epäonnistuvat surkeasti modernin verkkokehityksen aikakaudella. Ongelmana on, että me emme enää rakenna verkkosivustoja - me rakennamme sovelluksia. Vaatimukset ovat hyvin erilaiset. Monet CSS: n alkuperäisistä rakenteista tekevät huonoa työtä esimerkiksi reagointisuunnittelussa.

Onneksi meille CSS-työryhmä on kolme askelta edessämme! Se on ehdottanut useita uusia teknisiä tietoja sovellusten ulkoasuun ja suunnitteluun liittyvien ongelmien ratkaisemiseksi. CSS-ruudukkoasettelu, hierarkiat, alueet ja joustava laatikkomoduuli muutamia mainitakseni.

Katetaan yksi näistä: CSS Flexbox.

Kohdistus

Olen erityisen kiinnostunut Flexboxista, koska se antaa minulle mahdollisuuden keskittää sisältö sekä vaaka- että pystysuunnassa kolmella CSS-rivillä. Ei enää ikäviä ylhäältä / vasemmalta 50% ja negatiivisia marginaaleja.

Näin se toimii:

.box {display: + flex; + perustella sisältö: keskus; + tasaa kohteet: keskellä; } osio> div> A / div> div> B / div> div> C / div> / section>

Huomaa: Käytän "+" -merkkiä tämän artikkelin kautta toimittajan etuliitteeseen (esim. "+ Flex" tulisi olla -webkit-flex, -ms-flex jne.).

Tämä esimerkki tuottaa seuraavan asettelun:

Kokeile!

näyttö: joustava käskee vanhempaa säilöä tulemaan ”joustavaksi säilöksi”. Yllä olevassa kuvassa herra Red osio> on joustopakkauksemme ja sen sisältö (kolme sinistä lasta) ovat joustavia esineitä. Pakkaamalla A, B ja C pääakselin ja poikkiakselin keskelle me justify-content: center ja kohdista kohteet: keskellevastaavasti.

Tilaaminen ja suuntaaminen

Se ei lopu tähän. Toinen Flexboxin upea ominaisuus on, että voimme erottaa merkintäjärjestyksemme täysin sen esitystavasta. Tämä saavutetaan kahdella uudella CSS-ominaisuudella, Tilaus ja joustava suunta. Järjestys hallitsee järjestystä, jossa sisarustuotteet näkyvät. Joustava suunta muuttaa niiden suuntaa (rivi vs. sarake).

Sanotaan, että halusimme järjestää rivin sijaan A, B ja C sarakkeeksi ... ei hätää! joustava suunta: sarake järjestää lapsen poikkiakselia pitkin pääakselin sijasta. Huomaa, että oletusarvoisesti kohteet hahmonnetaan merkinnässä määritetyssä järjestyksessä, mutta voimme helposti ohittaa sen. Antamalla B: lle alemman järjestysarvon kuin sen sisarukset, se edeltää muita lapsia.

.box {+ flex-direction: column;}. box>: nth-child (2) {+ order: -1;}

Tuottaa:

Kokeile!

Muista, ettemme muuttaneet lähdettä ollenkaan. Se on edelleen A, B, sitten C. Flexbox antaa meille mahdollisuuden järjestää sisältöä riippumatta siitä, miten lähteemme määritetään.

Joustavuus

Flexboxin leipä ja voi on sen joustavuusominaisuus. Kohdistuksen, suunnan ja tilaamisen lisäksi voidaan myös ohjeistaa esineitä kasvamaan / kutistumaan täyttämään niiden ympärillä oleva käytettävissä oleva tila. Tämä tapahtuu joustava omaisuus.

joustava ominaisuudella on kolme arvoa. Ensimmäinen on positiivinen joustavuusarvo: kuinka paljon elementti voi kasvaa sisaruksiinsa verrattuna. Toinen on negatiivinen taipumus: kuinka paljon sen sallitaan kutistua. Kolmas arvo on kohteen haluttu leveys.

Muokkaa edellistä esimerkkiä, voimme käyttää joustava omaisuus tehdä B kolme kertaa isompi kuin kaverit:

.box> * {+ flex: 1 0 auto;}. box>: nth-child (2) {+ flex: 3 0 auto;}

Tulos on juuri se, mitä voit odottaa:

Kokeile!

Demo

Edellyttää: Chrome 21

Demo kuvaa kuinka helppoa on luoda 'Holy Grail' -asettelu (otsikko, 3 sarake, alatunniste) CSS Flexboxilla. Mikä parasta, koko sovellus on reagoiva. Yritä muuttaa selainikkunasi kokoa.

Tuki

Uusi Flexbox-spesifikaatio on toteutettu Chrome 21: ssä ja IE 10: ssä. Minulle kerrotaan, että myös Mozilla työskentelee aktiivisesti toteutuksen parissa.

2. Yksisuuntainen tietojen sitominen

Databinding on jotain, mitä jokainen moderni verkkosovellus tarvitsee. Kunnes Web Componentsin MDV on valmis, joudumme tukemaan aukkoja JavaScript-kehyksiin, kuten Angular tai Ember. Tai me?

Angular on yksi suosikkini MVC-kehyksistä tällä hetkellä, koska se on yksinkertainen. Minun ei tarvitse oppia uusia sovellusliittymiä tai mallin syntaksia käyttääksesi sitä. Se luottaa raakakieliseen HTML: ään mallikielenä ja puhtaan JS: n ohjaimen logiikkaan. Josta pidän!

Yksisuuntainen tiedonsiirto Angularissa on pientä merkintää:

div ng-app ng-init = "val = 25"> Äänenvoimakkuus: syöttötyyppi = "alue" min = "0" max = "100" ng-model = "val"> {{val}} / 100 / div>

Kun käyttäjä siirtää liukusäädintä, nimetty malli val päivitetään ja sitä vastaava mallimuuttuja lasketaan automaattisesti uudelleen. Kulma tekee raskaan nostamisen puolestamme asettamalla piilotettuja tapahtumakuuntelijoita ja muuttamalla näkymäämme mallin muuttuessa.

HTML5-tietojen käyttö - * -määritteet

Sama asia voidaan tehdä käyttämällä HTML5-ominaisuuksia ja fiksua temppua :ennen jälkeen pseudoelementit. HTML5-tapauksessa meillä ei kuitenkaan ole ylellisyyttä automaattisesta sidonnasta. Prosessi näyttää tältä:

• Malli:data - * määritteen. Käytä CSS: ää attr () saadaksesi arvon.
• Näytä: renderoi luotu sisältö kohteeseen :ennen jälkeen pseudoelementit.
• Kuinka sitoa ?: Liitä tapahtumakuuntelija seuraamaan tietomallin muutoksia.

Tämän idean toteuttaminen saa täsmälleen saman liukusäätimen kuin Angular-esimerkki, mutta ei kehystä!

tyyli> syöttö :: jälkeen {content: attr (data-value) ’/’ attr (max); asema: suhteellinen; vasen: 135 kuvapistettä; alkuun: -20px;} / style> input type = "range" min = "0" max = "100" value = "25"> script> var input = document.querySelector (’input’); input.dataset.value = input.value; // Aseta alkuarvo. input.addEventListener (’muutos’, funktio (e) {this.dataset.value = this.value; // Päivitä näkymä.}); / script>

Kokeile!

Käyttämällä datalistia>

Ehkä parempi (ja semanttinen) tapa tehdä yksisuuntainen tietojenkäsittely HTML5: ssä on käyttää uutta datalisti> elementti. Opera ja FF ovat saaneet datalisti> ikäisille, mutta se on vasta äskettäin saapunut WebKitiin.

Tämän sitomisprosessi näyttää tältä:

• Malli:vaihtoehto> arvot, jotka on määritetty datalisti> elementti.
• Näytä: tavallinen Joe tulo> elementti.
• Kuinka sitoa?: viittaa tietoluettelon tunnukseen lista määritteen.

Koodi on yhtä yksinkertainen:

Selaimet: input list = "selaimet"> datalist id = "selaimet"> option value = "Chrome"> option value = "Firefox"> option value = "Internet Explorer"> option value = "Opera"> option value = "Safari "> / datalist>

Kokeile!

datalisti> on loistava tapa määrittää ennalta määritetyt luettelovaihtoehdot tulo> elementti. Ajattele automaattisen täydennyksen lomaketta, joka on asennettu IndeksoituDB tietokanta.

Tuki

Uskokaa tai älkää, kaikkia näitä kehyksiä sisältämättömiä tiedonsiirtotekniikoita tuetaan kaikissa moderneissa selaimissa!

3. Käytä tiedostojärjestelmää

Useimmat kunnolliset sovellukset tarvitsevat tiedoston I / O: n jossakin vaiheessa elinkaarensa aikana. HTML5-tiedostojärjestelmän sovellusliittymä tuo oikean tiedostojärjestelmän verkkoon. Ei laajennuksia, ei hässäkkää. Sen avulla käyttäjät voivat säilyttää tietoja tiedostoihin ja kansioita tiedostojärjestelmään, joka on hiekkalaatikko verkkosovelluksesi alkuperään.

Voit avata tiedostojärjestelmän soittamalla window.requestFilesystem (toimittajan tietenkin etuliite):

window.webkitRequestFileSystem (TEMPORARY, // Tallennustyyppi: PERSISTENT tai TEMPORARY 1024 * 1024, // tarvittavien tilojen initF-tiedostojen koko (tavut), // menestyskutsu opt_errorHandler // opt. virheen takaisinsoitto, pääsyn epääminen);

Selvyyden vuoksi emme lue / kirjoita tietoja käyttäjän Omat tiedostot- tai Omat kuvat -kansioihin natiivi-käyttöjärjestelmässä. HTML5-tiedostojärjestelmä voi olla vuorovaikutuksessa vain sovelluksellesi luodun hiekkalaatikkotiedostojärjestelmän kanssa. Tämä tarkoittaa myös, että et voi muokata toisen verkkosovelluksen tiedostojärjestelmän tietoja.

Tämän sovellusliittymän yleinen käyttötapa on AppCache-korvaus. Esimerkiksi kuvatiedoston dynaaminen välimuistiin tallentaminen on helppoa:

var xhr = new XMLHttpRequest (); xhr.open (’GET’, ’/path/to/image.png’, true); xhr.responseType = ’arraybuffer’; // Haluamme tavutaulukon, ei merkkijonoa.xhr.onload = function (e) {window.requestFileSystem (TEMPORARY, 1024 * 1024, function (fs) {// fs.root on tiedostojärjestelmän Root DirectoryEntry. fs.root.getFile ('image.png', {create: true}, function (fileEntry) {fileEntry.createWriter (function (writer) {writer.onwriteend = function (e) {...}; writer.onerror = function (e) {...}; writer.write (uusi Blob ([xhr.response], {type: 'image / png'})));}, onError);}, onError);}, onError); }; xhr.send ();

Demot

Edellyttää: Chrome

Filesystem Playground on visuaalinen käyttöliittymä HTML5 Filesystem -sovellusliittymän päällä. Koko sovellus on asiakaspuoli. Joitakin toimintoja ovat tiedostojen ja kansioiden vetäminen työpöydältä tuoda ne web-sovellukseen, luoda tyhjiä kansioita, esikatsella tiedostoja, nimetä kohteita uudelleen, ladata ne ja niin edelleen.

HTML5-pääte jäljittelee vanhan koulun komentoriviä. Se istuu myös Filesystem API: n päällä.

Kun olet luonut muutaman tiedoston, uskallan sinun kokeilla 3d komento!

Tuki

HTML5-tiedostojärjestelmän sovellusliittymä on tällä hetkellä vain Chrome. Vaikuttaa myös siltä, ​​että Mozilla pitää lujasti kiinni IndeksoituDB ainoana ratkaisuna File I / O: lle. Minun kokemukseni mukaan, IndeksoituDB on aivan liian vaikea käyttää tiedostojen säilyttämiseen ja minkä tahansa tyyppisen kansiohierarkian luomiseen. Se on sovellusliittymän väärinkäyttö. Sillä välin olen luonut idb.filesystem.js, joka täyttää Filesystem-sovellusliittymän selaimiin, jotka tukevat vain IndeksoituDB. Tämä tarkoittaa, että kaikkien selainten, jotka tukevat IDB: tä, tulisi myös (teoreettisesti) tukea Filesystem-sovellusliittymää. Ole hyvä!

Jos haluat sukeltaa syvemmälle Filesystem API: een, tutustu kirjani, HTML5-tiedostojärjestelmän sovellusliittymän käyttäminen. Lisäksi katso filer.js. Se on kätevä käärekirjasto, joka tiivistää API: n UNIX-kutsuihin, kuten (cp, mv, mkdir).

4. Käytä natiivilaitteistoa

Luultavasti sanot: "Whaaaat !? Verkko ei voi käyttää natiivilaitteistoa ”. Suurimmaksi osaksi olen samaa mieltä. Valitettavasti USB: n, Bluetoothin ja UDP: n käyttö ei ole yksinkertaisesti mahdollista nykypäivän verkossa. Olemme nähneet PhoneGapin kaltaiset kehykset tasoittavan tietä tähän - mutta tosiasia on, että drive-by-verkossa ei ole kaikkia sovellusliittymiä, jotka kehittäjät vaahtoavat suussaan.

Laitteen käyttö on nykyään tärkeä aihe; niin paljon, että W3C perusti Device APIs Working Groupin elokuussa 2011 käsittelemään ongelmaa suoraan. Viimeaikaiset projektit, kuten Chrome Apps ja Firefox OS, ovat myös alkaneet tutkia tällaisia ​​pyrkimyksiä.

Mitä voimme tehdä tänään?

Verkkosovellusten kyky hyödyntää korkean tason JS-sovellusliittymiä, jotka istuvat taustalla olevan laitteiston päällä, ei ole vieras verkko. Viime vuodet ovat tuoneet meille joukon tällaisia ​​juttuja:

• Paikannussovellusliittymä (GPS)
• Device Orientation API (kiihtyvyysanturi)
• WebGL (GPU)
• HTML5-tiedostojärjestelmän sovellusliittymä (hiekkalaatikkotiedoston I / O)
• navigator.onLine / navigaattori. yhteys (verkkoyhteydet)
• Akun sovellusliittymä
• Gamepad API (USB-yhteys tiettyyn laitteeseen)
• WebRTC (ääni- / videoprosessointi) / Web Audio API (ydinjärjestelmän ääni)

... luetteloa jatketaan. Keskitymme viimeiseen.

Mikrofonin käyttöoikeus

Ihmiskunnan aamunkoitteesta lähtien yksi webin himoituista kyselyistä on ollut asianmukainen pääsy kameraan ja mikrofoniin (ilman laajennusta). Ensimmäinen askel oli x-webkit-puhe Chromessa toteutettu omaisuus:

input type = "text" x-webkit-speech>

Tämä ominaisuus oli jännittävä. Yhdellä määritteellä saimme mahdollisimman vähän pääsyä käyttäjän mikrofoniin ja täysin uuden tavan olla vuorovaikutuksessa sovelluksemme kanssa.

Sen lisäksi: on syytä huomata, että selaimet laajentavat tätä ominaisuutta vahvemmalla Speech JavaScript -sovellusliittymällä tulevina kuukausina.

Tänään voimme tehdä paremmin viimeisimmän työn ansiosta WebRTC-tilassa. WebRTC: n ydin on getUserMedia, API, jonka avulla sovellus voi pyytää pääsyä mikrofoniin / kameraan:

videon automaattisen toiston ohjaimet> / video> ikkuna.URL = ikkuna.URL || window.webkitURL; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; navigator.getUserMedia ({audio: true, video: true}, function (stream) {document.querySelector ('video'). src = window.URL.createObjectURL (stream);}, function (e) { console.log (e);});

Mistä todella pidän getUserMedia on, että se käyttää uudestaan ​​alustan vanhempia osia, nimittäin HTML5: tä video>. Sen sijaan, että asetat video.src elokuvatiedostoon, asetamme sen möykky-URL-osoitteeksi, joka on luotu kameravirrasta. Live-syöte. Tällainen integraatio on hieno esimerkki vanhemmista sovellusliittymistä, jotka ovat rinnakkain uudempien kanssa.

Videon nauhoittaminen

Yksi asia, jota odotan innolla (joka ei ole vielä täysin valmis), on mahdollisuus äänittää a LocalMediaStream kuten tapahtuu:

input type = "button" value = "" onclick = "record (this)"> input type = "button" value = "-" onclick = "stop (this)"> var localMediaStream; var recorder; function record (painike ) {tallennin = localMediaStream.record ();} toiminnon pysäytys (painike) {localMediaStream.stop (); recorder.getRecordedData (function (blob) {// Lataa blob käyttämällä XHR2.});}

Tuki

Perustuki käyttäjälle getUserMedia on Chrome 20: ssä (käytössä noin: flags), Opera 12: ssa ja Firefox 17: ssä (tällä hetkellä joka ilta). Lippu poistuu käytöstä Chrome 21: ssä.

5. Suoratoista multimediaa

Asia, jonka kuulen paljon web-kehittäjiltä, ​​on: "Voiko HTML5 suoratoistaa ääntä?" Osoittautuu, se voi ehdottomasti. Salakastike on sekoitus binaarisia WebSocketsia ja Web Audio API: ta.

Monien kuiden aikana merkkijonotietoja voitiin lähettää vain WebSocketin kautta. Pelkästään tämä rajoitus esti joitain hulluja hienoja sovelluksia rakentamasta WebSocketsia käyttäen. Verkkosivustolla on nyt JS-tyyppisiä taulukoita ja binaaritietoja. Miksi minun ei pitäisi pystyä suoratoistamaan tiedostoa? Tekniset kirjoittajat ja selaimen toimittajat tarttuivat lopulta tähän pieneen ideaan, ja nyt toteutuksiin sisältyy uudempi lähettää() menetelmä, joka tukee binääridatan lähettämistä.

Konsepti on samanlainen kuin XHR2. Sinun tarvitsee vain määrittää vaihtamiesi tietojen muoto. Jos esimerkiksi haluat lähettää möykky / tiedosto, aseta .binaryType omaisuutta möykky:

var socket = uusi WebSocket (’ws: //esimerkki.fi/sukka’, [’tyhjä protokolla’]); socket.binaryType = ’möykky’; // tai 'arraybuffer'socket.onopen = function (e) {window.setInterval (function () {// Lähetä tietoja, kun mitään ei ole puskuroitu. if (socket.bufferedAmount == 0) {socket.send (uusi Blob ( [blob1, blob2])); // oletettavasti kuvatiedot.}}, 50); // korkoraja meille.}; socket.onmessage = function (e) {document.querySelector (’img’). src = ikkuna.URL.createObjectURL (e.data);};

Vastaanottopäässä (esim viesti käsittelijä), voimme käyttää kuvatiedostoa (e. tiedot) luomalla siitä möykkyinen URL-osoite. Ei enää tarvetta Base64-koodaamiseen / dekoodaamiseen kummassakin päässä! Suorituskyky lisää ... me likey!

Äänen suoratoisto

Binaariset verkkoliittimet mahdollistavat melko mielenkiintoisia käyttötapauksia, mukaan lukien äänen suoratoisto.

Sen sijaan, että käsittelet tekniikkaa hyvin yksityiskohtaisesti, voit tarkistaa minun äänen suoratoistaja demo nähdäksesi kuinka koodi toimii. Prosessi on kuitenkin yksinkertainen:

1. DJ-koneessa: a) Käytä Web Audio -sovellusliittymää decodeAudioData () koko .mp3-tiedostossa. b) Kun tiedosto on purettu, viipaloi koko tiedosto AudioBuffer pienemmiksi paloiksi. Emme halua lähettää koko asiaa kerralla. c) Käytä yksinkertaista NodeJS-palvelinta lähettämään kukin ääniryhmä (kuten ArrayBuffer) binaarisen WebSocketin kautta.
2. Kuuntelijan koneella: a) Käytä Web Audio -sovellusliittymää ladataksesi + ajastamalla jokaisen ääniraidan tarkkaan aikaan, jolloin sen pitäisi toistaa. Tämä "luo" saumattomasti äänen kuuntelijalle ikään kuin se olisi yksi tiedosto.

Tämän työnkulun tulos on lähinnä äänen suoratoisto ... jotain, mikä ei olisi mahdollista ilman kahta uutta ominaisuutta web-alustalla: binaariset WebSockets ja Web Audio API.

WebRTC-datakanavat

Ehkä tiedostojen jakamisen tulevaisuus on WebCTC: n DataChannel-sovellusliittymä. Valitettavasti sitä käytetään edelleen Chromessa ja FF: ssä. Kyseisen sovellusliittymän tarkoituksena on mahdollistaa todellinen vertaisverkkotietojen vaihto reaaliajassa.

Tuki

Chrome, FF, IE 10 ja Safari tukevat binaarisia WebSocketsia. Chrome ja Safari ovat ainoat selaimet, jotka tukevat Web Audio -sovellusliittymää.

Johtopäätös

Minulle on tuskallista, että koko "natiivi vs verkko" -keskustelu on edelleen asia. Olen verkkokehittäjä. En voinut välittää vähemmän siitä, mitä syntyperäiset ihmiset voivat tehdä, mutta välitän kaikesta siitä, mitä verkko voi tehdä! Toki, alustassamme on aukkoja, mutta korjaamme nämä aukot jatkuvasti kasvavalla määrällä sovellusliittymiä. Web-komponenttien kaltaiset asiat muuttavat tapaa, jolla rakennamme verkkosovelluksia. Tässä hengessä haluaisin nähdä, että verkkofolk-ihmiset lakkaavat ryömimästä muiden kavereiden kanssa ja siirtävät keskustelun enemmän sen ympärille, mitä verkkoalusta voi tehdä. Monet ihmiset eivät edes tajua, mikä on mahdollista.

Toivottavasti tämä artikkeli, htmlfivecan.com ja htmlfivewow.com, on osoittanut, että verkko voi usein tehdä enemmän kuin silmäillään.