HTML/JS/CSS

ecd-webm-large

Chrome zahazuje H.264, vítej svobodné webové video

13. Led

Napsal cx do HTML/JS/CSS

4 komentářů

Mám pocit, že nás, kteří nezatracujeme Google za to, že plánuje vyhodit proprietární implementaci formátu H.264, je velmi málo. Všichni se dívají na tento krok s takovou skepsí, až si říkám, zda jsem něco nepřehlédl. Nepřehlédl, Google prostě chce vyčistit problémy kolem HTML5 video tagu, tečka.

Všechno to začalo takovým nevinným prohlášením na webu Chromu a Chromia. V něm je nejdříve vychválen formát WebM a postupně se text dostává k hlavní události dne, H.264 jde pryč z Chromu. Mezi přednosti WebM, který by ho měl nahradit, patří prý (ověření si nechám do praxe) výkon encodéru i dekodéru, podpora v prohlížečích a nezávislé implementace. To by měla být budoucnost webu a vcelku nemáme důvod tuhle Google vizi nějak zpochybňovat. Jen stěží si můžeme myslet, že by Google začal vybírat nějaké licenční poplatky nebo podobné sviňárny. Tak se Google nikdy nechoval a přinesl webu jako takovému mnoho dobrého.

Na druhou stranu tu máme tvrdou realitu. Flash přehrávající H.264 kdy procesory div nevyskakují z beden, pády prohlížeče, které se střídavě házejí na Adobe a na vývojáře prohlížeče, HTML5 video tag, který nelze použít, hardwarový dekodér H.264 v hromadě mobilních telefonů a neochotu některých uživatelů a vývojářů cokoli měnit. Co s tím? Chceme si něco takového držet nebo zatneme zuby a alespoň se zkusíme posunout dál?

Bohužel to na první pohled vypadá, jako kdyby Google úmyslně udělal z H.264 oběť správné cesty. Možná se to tímto způsobem nakonec povede, ale v očích uživatelů a vývojářů to může vyvolávat nejrůznější negativní reakce. Není se proto čemu divit, když pod odkazovaným blogpostem je už téměř 700 komentářů.

Já sám budu doufat, že se Googlu povede co dělá a že se mu podaří rozšířit WebM na internetu. Flash je pro mě nejproblémovější část webového světa, se kterou bojuji při běžném používání každý den a pokud zmizí alespoň z té video oblasti, budu jen rád. Google chce stabilní a otevřený web a to s H.264 ani Flashem mít nebude. Já mu přeju hodně štěstí.

Chrome Web Store: zatím bída a bookmarky

11. Pro

Napsal cx do HTML/JS/CSS

1 komentář

V úterý byl představen Chrome OS a když jsem viděl, jakou má představu Google o jeho budoucnosti, tak se mi tento koncept začal líbit ještě víc než předtím. Asi zrovna nebudu nadšeným uživatelem Chrome OS, ale některé jeho aplikace v mém Chromu bych uvítal. Přeci jen mít všechno na jednom místě by bylo megasuper. Některé aplikace se do konceptu Googlu prostě hodí. Jenže to by se Web Store nesměl stát jen reklamním prostorem pro běžné webové stránky.

Používám každý den dva počítače. Asus Eee, bez kterého neudělám ani krok a můj desktop, bez kterého neudělám ani sed. Co si budeme povídat, v prohlížeči jsem pořád, ale také používám pár jiných aplikací. Mimo prohlížeč vyvíjím, přehrávám multimedia, sshčkuju a IMkuju. Na webu pak ukládám některé dokumenty, píšu poznámky, organizuju čas a samozřejmě komunikuju přes sociální sítě. Ono by se toho našlo asi víc, ale tohle jsou moje hlavní činnosti.

No, když jsem viděl představení Chrome OS a Web Store, předpokládal jsem, že půjde o aplikace, které poběží v prohlížeči, budou uloženy u klienta a jenom občas si sáhnout do internetu třeba kvůli vzdálenému úložišti. Mýlil jsem se převelice. Z té dvacítky aplikací, které jsem zkoušel, fungovala podle mých představ jediná a to navíc ta na první pohled nejnáročnější. Zbytek je jen odkaz/bookmark na nějaký web s danou službou.

Podobné rozčarování zažilo mnoho uživatelů. Prakticky pod každou aplikací, která si hraje na aplikaci, ale aplikací není, je diskuse, kde je vždy několikrát zopakováno, že jde jen o bookmark a ne o skutečnou aplikaci. Je to bohužel levný způsob jak naplnit Web Store, ale zároveň to shazuje jeho kvalitu. Bookmarky a opravdové aplikace, co běží i offline by měly být od sebe odlišeny a ne míchány dohromady.

Proto si myslím, že je teď ideální čas podobné aplikace začít vyvíjet, než se rozebere trh do puntíku a nabídnout lidem hlavně offline funkce. Když by se Web Store a Chrome OS opravdu rozjely a placené aplikace by se dostaly až k nám, mohlo by jít pro jednotlivce o zajímavé částky, které by aplikace generovaly. Vývoj není nějak složitý, kdo už někdo s HTML5, JavaScriptem a CSS pracoval, zvládne i aplikaci pro Chrome. Doufám, že to nebude dlouho trvat a vývojáři aplikací se chytí nového konceptu a dají do Web Storu, to co mu nejvíce chybí … skutečné aplikace.

Já a moje aplikace_002

jQuery Mobile: první krůčky, nadšení a naděje pro mobilní web

24. Říj

Napsal cx do HTML/JS/CSS

Žádné komentáře

I když jsem teď ve Fallout only stavu, nedalo mi to a musel jsem prozkoumat něco nového. Je tomu asi osm dní, co se objevila první verze jQuery Mobile. Je to alpha, na mém mobilu to moc nefunguje a na mobilu mé přítelkyně také ne. Je to malé, je to rychlé, vypadá to super a hlavně se to dá použít jako takové HTML5 tech demo, aneb jak by mohl vypadat web za pár let.

Když se řekne o jQuery Mobile, že je framework pro vytváření webových mobilních aplikací, resp. jejich rozhraní, věřte, že to je pravda. jQuery Mobile totiž přináší hned několik stavebních kamenů, se kterými nemusíte uživatelské rozhraní prakticky řešit.

Problém webového uživatelského rozhraní pro mobilní telefony je ten, že prakticky co model telefonu, to jiný prohlížeč. Není šance udělat něco pořádného, co by fungovalo všude a proto tu máme jQuery Mobile, které všechny telefony překrývá vhodnou vrstvou z HTML5, JavaScriptu a CSS. JavaScript se postará o HTML5 šablonu a navleče na ní správné CSS styly. Ano, takhle je jQuery Mobile řešeno. Přidáte do šablony čtyři správné atributy a stránka je v tu ránu nastylovaná. Přidáte dva další a vybere i správný styl. Přidáte trochu vlastního AJAXu, využijete možnost mít více stránek v jednom HTML a aplikace je na světě. Jestli jste šikovní a chce se vám pracovat pouze s JavaScriptem, měli byste dosáhnou toho, že se aplikace bude chovat velmi real-time a na server bude sahat jen když bude potřeba něco uložit.

Dokumentace je napsaná v jQuery Mobile, takže si hned můžete svým mobilním telefonem zabrousit na tuto adresu a vyzkoušet si to. Připomínám, že jde o alphu, takže nic slavného nečekejte (v Chromiu ale funguje parádně).

První stránka

Jak jsem napsal, udělat stránku pomocí jQuery Mobile je velmi jednoduché a doufám, že až bude trošku stabilnější, donutí to některé servery vytvořit mobilní verzi. Pokud mají web napsaný dobře, prakticky tomu nic nebude bránit.

A teď se vrhneme rovnou na strukturu HTML dokumentu, kterou si zatím dovolím zkopírovat z dokumentace.

  1. < !DOCTYPE html>
  2. <html>
  3.         <head>
  4.         <title>Page Title</title>
  5.         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  6.         <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  7.         <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
  8. </head>
  9. <body>
  10.  
  11. …
  12.  
  13. </body>
  14. </html>

Tohle by vám mělo být podezřelé, klasický HTML5 dokument a nějaké nalinkované skripty a styly. Teď do tagu body přidáme nějaký zajímavý obsah.

  1. <div data-role="page" data-theme="a" id="home">
  2.                
  3.         <header data-role="header">
  4.                 <h1>Můj první mobilní web</h1>
  5.         </header>
  6.                
  7.         <div data-role="content">
  8.                
  9.                 <ul data-role="listview">
  10.                         <li data-role="list-divider">Moje menu</li>
  11.                         <li><a href="#about">Něco málo o mně</a></li>
  12.                         <li><a href="#signin">Přihlášení</a></li>
  13.                 </ul>
  14.  
  15.         </div>
  16.  
  17.         <footer data-role="footer">
  18.                 <h4>&copy; Copyright 2010 by Adam Štrauch</h4>
  19.         </footer>
  20.        
  21. </div>

Všimněte si zvláštního atributu date-role. Tím říkáme jQuery Mobile, co to obsahuje za data, resp. v jaké, jsou vztahu ke stránce a on podle toho daný objekt ostyluje. Co všechno se dá do date-role napsat, samozřejmě najdete v dokumentaci, ale měl by tu být řád, jakože nejvýš je stránka (page), v ní je hlavička (header), obsah (content) a patička (footer) a až v obsahu je zbytek. Výsledek si můžete přihlédnout trochu níže, ale nejdříve si kód doplníme ještě o dvě stránky. Bude to trochu dlouhé.

  1. <div data-role="page" data-theme="a" id="about">
  2.                
  3.         <header data-role="header">
  4.                 <h1>Něco málo o mě</h1>
  5.         </header>
  6.                
  7.         <div data-role="content">
  8.                 <h2>Adam Štrauch</h2>
  9.                 <p>Jak se jmenuju už víte, ale chci vám ukázat můj nový web. Tohle je on, napsal jsem ho za pět minut a vypadá suprově.</p>
  10.         </div>
  11.                
  12.         <footer data-role="footer">
  13.                 <h4>&copy; Copyright 2010 by Adam Štrauch</h4>
  14.         </footer>
  15. </div>
  16.        
  17. <div data-role="page" data-theme="a" id="signin">
  18.                
  19.         <header data-role="header">
  20.                 <h1>Přihášení</h1>
  21.         </header>
  22.                
  23.         <div data-role="content">
  24.                        
  25.                 <ul id="errors_login" class="error"></ul>
  26.                        
  27.                 <form id="form_signin">
  28.                        
  29.                 <div data-role="fieldcontain">
  30.                         <label for="username">Uživatelské jméno</label>
  31.                         <input type="text" name="username" id="username" value=""  />
  32.                                                
  33.                         <label for="password">Heslo</label>
  34.                         <input type="password" name="password" id="password" value="" />
  35.                 </div>
  36.                                
  37.                 <div data-role="fieldcontain">
  38.                         <input type="button" name="submit" id="submit" value="Sign in" onclick="sign_in();" />
  39.                 </div>
  40.                        
  41.                 </form>
  42.                        
  43.                 <em>Zůstaneš přihlášen, dokud se neodhlásíš</em>
  44.         </div>
  45.                
  46.         <footer data-role="footer">
  47.                 <h4>&copy; Copyright 2010 by Adam Štrauch</h4>
  48.         </footer>
  49. </div>

Tím jsme přidali do dokumentu další stránky. Teď vás asi napadá, proč to takhle řešit a jak se vůbec mezi stránkami přepínat. jQuery Mobile automaticky nalezne všechny odkazy na stránce a zpracuje je svým způsobem, rozhodně ne tak, jak jste zvyklí. Takže když najdete v atributu href #about tak ví, že má jen přepnout stránku a nemusí nic načítat. Když tam je ale adresa, tak se postará o hezký AJAXový efekt odsunu a hlavně doplní tlačítko zpět do hlavičky stránky (to doplní i v # případě). Historii si drží, takže opravdu se můžete dostat hluboko do stránky a pak zase ven. Navíc když pošlete URL i s #, dostane se člově, kterému URL posíláte tam, kam potřebujete. Sami byste tuto funkcionalitu chvilku psali. Pokud se vám podobné chování nelíbí, doplňte atribut rel=“external“ a odkaz bude zase odkazem. U # tohle nefunguje, ale to nebude kritické.

Pro mobil je tenhle koncept důležitý hlavně proto, že lze do jednoho dokumentu namačkat všechny data a pak s nimi pracovat buď jak velí jQuery Mobile a nebo si chování upravit vlastními skripty. Stránky jsou pak rychlé jako blesk, jen to chce ještě trochu lepší telefony a stabilnější jQuery Mobile.

Do budoucna nás toho čeká u jQuery Mobile ještě hodně a líbí se mi, v jakém světle to ukázalo HTML5. Takhle si představuju framework na straně klienta. Navíc podobný framework nahrává webovým aplikacím pro desktop. I ten kydaneček kódu, co jsem ukázal tady vypadá v kombinaci s Application Shotcut z Google Chrome/Chromium jako majestátní páv. Navíc jQuery Mobile obsahuje zajímavé widgety, dialogy, efekty a vůbec všechno po čem srdce běžného konzumního uživatele touží. Mrkněte na jQuery Mobile, zaslouží si to.


Disclaimer: Post jsem psal dost na rychlo, už chci být zas u Fallout NV :)

, , ,