Když jsem před více než 6 lety začal vyvíjet webové aplikace, zdaleka jsem netušil, že bych psal v něčem jiném než v PHP. O tom, že tento jazyk nemá v případě vývoje rozsáhlých aplikací budoucnost jsem pochopil brzy. Co je ale hlavní, ještě nedávno jsem si nedokázal představit, že bych postavil aplikaci jinou, než webovou. Dnes budu webovým aplikacím docela nevěrný. Konečně dospěla cesta mé snahy ke konci a dnes je certifikována první má aplikace pro Windows Phone 7.5 nazvaná gTranslate.

Aplikace gTranslate není nic víc než překladač, který využívá v současné době zpoplatněné rozhraní API Google k poskytnutí vysoce relevantních překladových výsledků. Kromě toho aplikace nabízí funkce historie i překlad z neznámého jazyka. Další funkce jsou plánovány v dalších verzích. Aplikace bude během dvou dnů dostupná k vyzkoušení ve verzi Trial s omezeným počtem startů (15). Plná verze je ke stažení už nyní za 27 Kč. Aplikace je lokalizována do českého, anglického a německého jazyka a dostupná je v celém světě v defaultním anglickém jazyce.

See the full gallery on Posterous

Permalink | Leave a comment  »

Dnes jsem dlouhou dobu řešil jak dostat svou aplikaci do mobilního zařízení s Windows Phone 7.5. Narazil jsem na několik drobných "problémů" ale nakonec vše pracuje bezchybně jak má. Budu se snažit popsat vše maximálně laicky a sjednotím postup jak dostat Vaší aplikaci do telefonu aniž byste museli jako já procházet desítku fór.

0. Windows Phone SDK 7.1

Základním předpokladem je samozřejmě SDK, jehož součástí je i Visual Studio for Windows Phone, Windows Phone Emulator apod. Předpokládám, že SDK máte instalováno ale odkaz pro jistotu přikládám. Pokud nemáte zatím žádnou aplikaci vytvořenou, bohatě pro začátek stačí vytvořit si základní projekt (Windows Phone Application). Windows Phone SDK ke stažení

1. Zune

V první řadě je potřeba zajistit komunikaci zařízení s počítačem. K tomu slouží Zune software, pomocí kterého můžete spravovat celý obsah telefonu. Především jej využijete pro správu knihovny médií a aktualizace softwaru. Zune software ke stažení. 

2. Deploy aplikace

Pokud máte rozepsanou nějakou aplikaci, prakticky stačí úspěšný build a ve složce bin/Debug naleznete soubor s příponou xap. Prakticky se jedná o komprimovaný balíček, o čemž se můžete přesvědčit jeho vyextrahováním v Total Commanderu. Tento soubor pošleme do telefonu a ten samý typ souboru se vystavuje i na Marketplace. K tomu se ale dostaneme později.

3. Developer Account / Marketplace

Jelikož jsem měl založen vývojářský účet, nejsem si povinností tohoto kroku jistý. Pokud ale myslíte vývoj Windows Phone aplikací vážně a  budete chtít Vaše aplikace publikovat v Marketplace, stejně se mu nevyhnete.

Odkaz kde začít: http://create.msdn.com/en-us/home/membership

Zde máte dvě možnosti. Buď studujete a vytvoříte svůj účet v rámci DreamSpark (modrý odkaz vpravo) nebo jste vývojář nestudent a použijete odkaz (dlaždici) join now. Proces vytvoření profilu je jednoduchý. Váš účet je plně funkční až po potvrzení odkazu, který je Vám zaslán na e-mailovou adresu. 

Pro většinu kroků je potřeba mít Windows Live ID. Pokud jej nemáte, registrovat se můžete na signup.live.com. Windows Live ID budete potřebovat i v dalším kroku.

4. Windows Phone Developer Registration

Vaše zařízení bude s největší pravděpodobností zamčeno a neregistrováno. Tedy v první řadě je nutné spustit nástroj Windows Phone Developer Registration a vyplnit své údaje (Windows Live ID / password). Tím své zařízení registrujete. Bez tohoto kroku se Vám zřejmě nepodaří do svého zařízení nic dostat. Pokud Vám bude aplikace vracet chybu, zkuste nejprve odemknout displej a poté provést registraci. Zařízení musí být samozřejmě připojeno k PC :-D

5. Application Deployment

Teď už by neměl být problém spustit konečně Application Deployment, jako Target zvolit Windows Phone Device a připojit XAP soubor z disku. Pokud se po kliknutí na Deploy vrátí chyba, může to být opět tím, že máte zamčený displej. V opačném případě se Vám vrátí zpráva o úspěchu a svou aplikaci naleznete mezi ostatníma ve svém zařízení. 

Neoficiální aplikace Windows Phone Device Manager

Pro správu Windows Phone je možné použít také Windows Phone Device Manager (Julien Schapman / 2011) v Beta verzi. Umožňuje správu telefonu podobně jako Zune, včetně správy vlastních aplikací. Nástroj jsem netestoval, myslím, že nástroje od MS jsou plně dostačující, pohodlné ale pro kompletnost uvádím i tuto alternativu.

Permalink | Leave a comment  »

Windows Phone 7.5 je vynikající operační systém pro mobilní telefony. Jeho skutečnou sílu a možnosti si uvědomíte poprvé když jej vezmete do ruky a pak pokaždé, když máte v ruce zařízení s jiným operačním systémem. Proč je Windows Phone 7.5 tak vynikající systém?

Grafické rozhraní celého systému

V první řadě oceňuji grafické rozhraní celého systému. Například zatímco na Androidu složitě listujete plochami s Widgety, které většinou uživatel ani nepotřebuje a zpomalují rapidně systém, logika WP7 jde jiným směrem. Na jedné stránce je seznam dlaždic s uživatelsky vybranými aplikacemi nebo zkratkami, na další stránce pak seznam všech aplikací.

+ V momentě, když jsem měl nainstalováno hodně aplikací se mi na levé straně displeje zobrazila abeceda. Po kliknutí na písmeno se můžu okamžitě navigovat kam potřebuji.

+ Kromě často zajímavých efektů dlaždic mě také informují o příchozích zprávách, aktuálním počasí, nadcházející události v kalendáři aj.

Rychlost systému a reakce

Pro WP je důležité říci, že díky skvělému rozhraní se se systémem pracuje rychleji už z principu. Například zmíněné nalezení aplikace od písmene K je hračka i když budu mít v systému aplikací třeba tunu. Rychlost, respektive reakce systému jsou neměřitelné, okamžité. Nečekám, pracuji. A to i v případě, že mi na pozadí třeba běží hudební přehrávač, brouzdám aplikací Foursqaure a bliká mi IM, stále pracuji rychle.

Lidé

Naprosto geniální aplikace, která sdružuje všechny mé kontakty. Ale i mnohem více, tady začínám. Tady se dočtu na jediném místě o tom, co lidé píšou na Twitteru, LinkedIn, Facebooku a dalších sítích. Je to místo, kde si kontakty slučuji, mám přehled o novinkách uživatelů a mohu okamžitě na cokoliv reagovat bez ohledu na to jestli se jedná o Tweet nebo status na Facebooku. Kromě novinek mám i přehled o historii, můžu se podívat kdy jsem si s dotyčnou osobou volal, psal soukromé zprávy apod. Integrace sociálních sítí do WP je jedním slovem geniální.

+ Možnost přidat si ke kontaktu obrázek není žádná novinka, to uměly telefony už roky zpátky. Kdo z vás to ale reálně používal? Skutečné využití jsem našel až s WP 7.5, kdy „boží ruka“ sjednotila mé kontakty a obdařila je bez jediného vynaloženého joulu práce fotografií.

Office

Jedu metrem a je pravý čas udělat si pár poznámek co mám večer v plánu. Nepotřebuji žádné speciální aplikace, stačí mi poznámky aplikace Office (One Note). Je na mně, jestli si udělám textové poznámky, připojím si checkboxy na odškrtávání a sestavím nákupní lístek nebo si nahraju hlasovou zprávu. To všechno si dám do jedné poznámky, připnu si ji na hlavní stránku a mám hotovo.

Prohlížení dokumentů Office je rychlé, přizpůsobené mobilním zařízením. Potřebuji si udělat sumarizaci práce na nějakém projektu pro vlastní potřebu, otevřu Excel a můžu si psát vzorce dle libosti.

Dostupné aplikace

Ano, dostupných aplikací na WP je zatím podstatně méně než například na Android nebo IPhone, nicméně WP 7.5 je nový systém a vývoj kvalitních aplikací není otázkou několika nocí. Přesto jsou k dispozici aplikace jako Foursquare a 4th&Mayor pro Foursquare, Adobe Reader, Facebook, IM+, Mapy.cz, NewsSpot (RSS čtečka s podporou Google účtu), Počasí, Twitter, nebo například WMM Jízdní řády pro MHD i dálkovou dopravu. A pro všechny aplikace platí, že nabízejí skvělé Metro style UI, které je intuitivní, rychlé a skutečně použitelné.

Zábava, multimédia a hry

Přestože jsem telefon nikdy neměl primárně na hraní, možnosti jsou v tomto ohledu excelentní. A to ať už jde o integrovanou aplikaci pro přehrávání multimédií, která je stále dostupná k použití pomocí tlačítek ovládání hlasitosti nebo například skvělý prohlížeč obrázků. Ten najde obrázky pořízené fotoaparátem, seřadí je dle data, spolupracuje s aplikací Flickr a umožňuje mi prohlížet si například fotky přátel z Facebooku. Vše na jednom místě.

Her je k dispozici celá řada a díky tomu, že jsou k nalezení v kolekcích her xBox Live nezabírají místo mezi klasickými aplikacemi. Uživatel má svůj herní profil, stahuje hry do své kolekce, může komunikovat se svými spoluhráči, které si přidá a porovnávat vzájemně herní profily. Opět zábava, která je ještě umocněna skvělým herním konceptem.

Správa všech možných účtů

Jak už jsem zmínil, největší síla operačního systému Windows Phone 7.5 spočívá v naprostém zjednodušení všeho a následně nabídnutí přidané hodnoty, která nemá v konkurenčních systémech obdobu. Podobným způsobem funguje i správa účtů, ať už se jedná o e-mailové účty Google, Hotmail nebo Windows Live a sociální sítě jako Facebook, Twitter nebo LinkedIn. Vše je dokonale sjednoceno a dostupné na těch podstatných místech. Tedy obrázky v obrázcích, stavy a aktualizace na kartě Lidé.

Celkový dojem

Celkový dojem je rize pozitivní. Shrnul jsem pár základních vlastností systému, které jej podle mě dělají tak výjimečným. Windows Phone 7.5 je postaven na tom, co uživatelé od operačního systému očekávají a to také dostávají. Reaguje na uspěchanou dobu, nabízí rychlé a srozumitelné rozhraní, které přitom funkčně převyšuje jiné operační systémy, které jsou v současné době na trhu. Při nepochopitelné skepsi některých obchodníků je navíc k dostání za přijatelnou cenu ve velmi dobře vybavených telefonech.

Permalink | Leave a comment  »

Jestli váháte, zda se vyplatí a jaké kroky obnáší spustit Vaše aplikace v cloudu, konkrétně MS Azure, pak si nenechte ujít 4 dílný kurz pořádaný formou Live meetingu. Kurz vede Michal Juřek a struktura má být následující:

• týden 1: databáze, převod stávajících db na SQL Azure
• týden 2: aplikační vrstva, jaký kód je možné hostovat na MS Azure
• týden 3: úložiště, kam ukládat data nerelační povahy
• týden 4: diskuse

Setkání formou Live meetingu budou probíhat vždy ve středu (14:00 - 15:30) a stále je ještě možné se registrovat a nenechat si ujít zítřejší 1. díl seriálu.

Více info a registrace: https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032501163&Culture=cs-CZ

Permalink | Leave a comment  »

Nějaký čas jsem věnoval testování možností vývoje aplikací pro zařízení s Windows Phone. Začnu obecným úvodem a shrnu subjektivní pocity z vývoje, možnosti a současnou situaci vůbec.

1. Situace na trhu

Trh je značně přeandroidovaný (což není nic špatného). Otázka je, jestli se situace změní. Původně platforma Windows Mobile, nyní Windows Phone má v současné době předpoklady konkurovat zařízením se systémem Android. Zejména s příchodem verze Windows Phone 7.5 (ozn. Mango).

Proč bude Windows Phone 7.5 používat stále více uživatelů

• Skvělá integrace s XBox Live, hry a multimediální zábava
• Uživatelské rozhraní je přívětivé, pochopitelné, jednoduché a rychlé
• Nechybí integrace se sociálními sítěmi, kterou uživatelé vyžadují
• Ve Windows Phone 7.5 vidí potenciál zřejmě i přední vývojáři a lze očekávat, že se objeví významné aplikace pro tuto platformu jak je známe z Androidu (viz. Mapy.cz již jsou)

Odpověď na otázku je tedy existence tohoto systému sama o sobě. Výborná recenze je například zde.

2. Zařízení s Windows Phone 7.5 na trhu

V době psaní tohoto postu je několik zařízení se systémem Windows Phone 7.5 (mj. HTC Titan, HTC Radar, Omnia). Očekáván je ale především Nokia Lumia 800 a 710, který je v předprodejích.

 

3. Co je potřeba k vývoji Windows Phone aplikací

Aplikace a jednodušší 2D hry se vytváří převážně v SIlverlightu, pro hry je primárně určen XNA framework. K vývoji stačí stáhnout několik nástrojů, které jsou zdarma. 

Visual Studio Express for Windows Phone

Stáhnout lze na stránkách Microsoftu zdarma. Jeho součástí je i výkonný emulátor, který pro vývoj aplikací v základu dostačuje, nicméně není schopen simulovat některé funkce mobilních zařízení (GPS, accelerometer aj.). Řešit by to mělo jít nějakým pluginem - nezkoušel jsem... Kromě Visual Studia je potřeba doinstaloval i Silverlight...

Expression Blend

Expression Blend pracuje se Solutions vytvořenými ve Visual Studiu a umožňuje snadno upravovat design vytvořených mobilních aplikací. Design je deklarován ve značkovacím jazyce XAML. Výkonný kód má příponu .cs a je v jazyce C#. 

Proč bych měl dát šanci Windows Phone jako vývojář?

• Veškeré nástroje pro vývoj jsou zdarma
• Protože přijdou nová zařízení a zvýší se poptávka po aplikacích, kterých je momentálně nedostatek
• Jsem zvyklý vyvíjet aplikace na MS produktech, převážně programuji v C#... to mi usnadňuje cestu k vývoji (znalost Silverlightu je pak další bonus)
• Návrh vzhledu aplikace je snadný díky Expression Blend
• Pro práci s datovým úložištěm lze použít bezpečné řešení MS Azure, snadná integrace

Měl jsem možnost vyzkoušet si cestu k vytvoření té nejobyčejnější Hello World aplikaci pro Android i Windows Phone 7.5. A obě cesty byly analogické, lišily se v konečné fázi jen technologií a vývojovým prostředím. Proč u mě vyhrál Windows Phone 7.5?

 1. Technologické a historické důvody: prostě jsem stejně jako ostatní vývojáři líný. Mám zkušenosti s vývojem v C# a je pro mě snazší zůstat u produktů MS. Obzvlášť, když dělám webové aplikace v .NETu. Mám produkty MS rád, dobře se mi pracuje s Visual Studiem i Expression Blend.

2. Nová cesta: upřímně mě láká prožít život s touto novou technologií. Dává mi to jistou výhodu, kterou můžu využít v budoucnu v podobě zkušeností před ostatními vývojáři, kteří naskočí do rozjetého vlaku, protože nyní váhají, zda se vlak dostane do další stanice.

Permalink | Leave a comment  »

V dalším díle seriálu HTML5 a CSS 3 Objektivně představím řadu nástrojů pro vývojáře a odkážu vás na užitečné webové stránky ze kterých čerpat.

Desktopové nástroje

Pokud již dlouhodobě používáte nějaké prostředí pro vývoj webu, pravděpodobně nebudete kvůli HTML5 a CSS3 přecházet na nový a celý tento blok můžete přeskočit.

Jste-li ale v početné skupině těch, kteří používají primárně editory typu Notepad++, Bluefish, PSPad apod., dám vám skvělou radu: odinstalujte to a nechte si třeba Notepad++ jako externí editor kódu v Total Commanderu. Věřte mi, že vývojová prostředí, která představím (a jsou jen malým příkladem) nejsou kanon na vrabce ale prostředek, který Vám ušetří čas, klávesnici i prsty, protože:

• vývojové prostředí pracuje s projekty a urychluje práci s dokumenty,
• mnoho editorů podporuje funkci IntelliSense, která Vám napovídá při psaní,
• specializované nástroje již podporují HTML5 a CSS 3 vlastnosti,
• mnohá IDE podporují práci se Subversion,
• i když se jedná o profesionální prostředí, často jsou k dispozici zcela zdarma.

Vývojové prostředí

Doposud nejideálnější mi přišel Visual Web Developer 2010 Express. V mém případě je to dáno vývojem .NET aplikací, nicméně i kdybych měl psát čistě HTML + CSS kód, nevolil bych jinak. Kromě HTML a CSS má studio výbornou podporu JS a podporuje i další syntaxi.

Zkoušel jsem poslední verzi Dreamweaver a i tento nástroj mohu doporučit. Obecně jakékoliv prostředí, které podporuje IntelliSense a pracuje s posledními standardy je vhodné. Tady bych řekl, že je dokonce Dreamweaver o krok vepředu. VWD v express edici je na rozdíl od Dreamweaveru zdarma.

Výbava prohlížečů a pluginy

Psát o užitečnosti Firebugu ve Firefoxu je asi zbytečné. Ne každý ale ví, že podobný nástroj má dnes většina moderních browserů přímo integrován.

Mile mě překvapil Internet Explorer 9 (developer tools nabízí po stisku F12).

V Opeře je dostupný nástroj Dragonfly (CTRL+SHIFT+I), subjektivně o něco lepší než IE developer tools.

Google Chrome zobrazí developer tools také po stisku (CTRL+SHIFT+I). Má výborné tools pro práci se scripty, sítí a zdroji (což se hlavně v HTML5 hodí). Inspect se provádí trochu zvláštně pravým myšítkem na elementu a následně volba "Zkontrolovat prvek". Nevím, zda tu je něco jako standardní Inspect ve Firebugu.

Pro Google Chrome je k dispozici i plugin Firebug Lite, který mi osobně oproti pluginu ve Firefoxu nevyhovuje už kvůli nemožnosti rychlé editace obsahu značek.

Pluginy pro Firefox

Protože Firefox je hlavní prohlížeč, se kterým pracuji při vývoji webových aplikací, rád bych vypsal několik pluginů, které mi usnadňují práci a které mohu za sebe doporučit:

• Firebug - není třeba dlouze představovat, je nezbytnou výbavou
• ColorZilla - pomocí kapátka naberete barvu odkudkoli z aktivního okna
• Web Developer - velké množství rozšíření pro vývojáře
• HTML Validator - zobrazí Vám počet chyb, validace HTML dokumentů
• CSSViewer - přehledně zobrazuje CSS properties elementů (spíše pro přehled)
• JavaScript Debugger - občas ušetří nervy

Důležité je, že každý plugin vývojáři jeho Firefox zpomalí a osobně jsem přesvědčen, že nemá smysl mít nadupaný Firefox pluginama, které člověk nepoužívá. Už proto doporučuji na této sestavě začít a pokud některý z pluginů nevyužijete, automaticky jej vypnout nebo odebrat. Já osobně si často vystačím jen s prvními třemi uvedenými.

On-line zdroje

Ještě si dovolím předhodit opravdu užitečné zdroje, které je dobré mít v záložkách vždy po ruce. Toho "vždy po ruce" můžete docílit například pomocí prohlížeče Google Chrome, ve kterém si můžete oblíbené záložky synchronizovat mezi pracovními stanicemi. Myslím, že to samé umí i Firefox.

• Color Scheme Designer vám umožní namíchat si barvy a zjistit zastoupení RGB nebo hexadecimální kód barvy
• HTML5 Test Vám řekne jak je na tom Váš browser s podporou HTML5 + můžete porovnat situaci ostatních prohlížečů. Podobně funguje i nástroj Can I use...
• CSS3 gradient generator slouží ke generování CSS3 předpisů pro barevné přechody
• HTML5 Cheat Sheet je přehledná tabulka značek a atributů (případně alternativa - PDF)
• HTML5 Reset ocení začátečníci: zelená louka, na které se dá stavět
• Initializr je podobný předešlému odkazu, jen lze více customizovat
• Modernizr vám umožní stavět webové projekty s podporou většiny specifikací HTML5 a CSS3 i na starších prohlížečích

Permalink | Leave a comment  »

One of my favorite jQuery plugins for displaying images and html content is Fancybox. Normally this plugin works great but last day I had small problem with implementation simple form in ASP.NET website.

Problem:

We need all controls place inside FORM element. Fancybox creates hidden content outside FORM and we can not work with inputs, checkboxes and so on. If you click on the submit button in fancybox, nothing happens :) Button is outside FORM. You can see it in Firebug. We need place fancybox content inside FORM element.

Solution:

Solution of this problem is absolutely easy. You have to change your fancybox.js file code. Just look for "body" and override it by "form".

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$('body').append(
	tmp = $('<div id="fancybox-tmp"></div>'),
	loading	= $('<div id="fancybox-loading"><div></div></div>'),
	overlay	= $('<div id="fancybox-overlay"></div>'),
	wrap = $('<div id="fancybox-wrap"></div>')
);

/*
Change first line
*/

$('form').append(
/* body without change */
);

Permalink | Leave a comment  »

Problém: Otevírat odkazy do nových oken nebo tabů lze mnoha způsoby. Ještě několik let zpátky se typicky používal jednoduchý atribut target. Pak přišla honba za validitou. Validní jsme chtěli mít všechno, validní jsme chtěli být všichni. A tak místo:

1

<a href="http://www.mirecek.cz" target="_blank">Click here</a>

jsme přešli na také celkem jednoduché řešení, zhruba nějaké takové:

1

<a href="http://www.mirecek.cz" onclick="window.open('http://www.mirecek.cz'); return false;">Click here</a>

a nebo ještě někdo používá:

1

<a href="http://www.mirecek.cz" onclick="return !window.open(this.href)">Click here</a>

Co k tomu říct. It works. Jenomže:

• je to ideální a čisté (přehledné) psát k linkům JS kód?
• je to snadno udržovatelné?
• budou umět pracovat s JS editory?

Návrh

Použijme JavaScript takovým způsobem aby nepřekážel v HTML kódu. Vytvořme nějaké logické pravidlo skrze celý kód, na základě kterého budeme otevírat odkazy do nového okna. Protože dnes většina webů používá nějaký JS framework, je jednoduché odchytit si událost nad libovolným elementem. Ukázku předvedu na jQuery.

Řešení pomocí jQuery

1. Po události kliknutí na odkaz s předem zvolenou třídou jen vezmeme odkaz (atribut href) a pošleme ho do window.open(). Kód si dáme do nějakého master js file, který používáme všude na webu.

1
2
3
4
5
6

$(document).ready(function () {
    $("a.window").click(function () {
        window.open($(this).attr("href"));
        return false;
    });
});

2. Máme-li na stránce tento kód připojen spolu s jQuery, můžeme jednoduše všude na webu otevírat odkazy v novém okně tak, že jim přiřadíme class window:

1

<a class="window" href="http://www.mirecek.cz">Click here</a>

Výhody

• odkazy mají class, díky které je můžeme specificky ostylovat
• zbavili jsme se inline JS kódu v odkazech
• nemusíme být obavy že s JS bude mít problém nějaký editor
• pokud edituje obsah klient pomocí editoru, spíše je šance, že pochopí "že má někam dát class="nove_okno" nebo něco podobného, než JS špagetu

Kompletní ukázka kódu: http://jsfiddle.net/mirecek/P2BmQ/1/

Permalink | Leave a comment  »

V tomto úvodním dílu bych rád shrnul současnou situaci a napsal postřehy týkající se podpory standardů u nových prohlížečů.

Situace

V současné době čekají web zásadní změny. Tou první je příchod HTML5, tou druhou CSS 3. Ještě před dvěma lety přitom situace byla přinejmenším rozporuplná. Dnes již tyto technologie můžeme brát vážně, především proto, že vážně je berou vývojáři prohlížečů.

HTML5 se tento rok nevyhnulo prakticky žádné významné konferenci (byť většina přednášek na toto téma je zásluha Štěpána Bechynského), například na Google Developer Day běžel celý blok na téma HTML5 a pokud jste neměli to štěstí být přítomni, doporučuji alespoň shlédnout krátké přednášky Ilmary Heikkinena.

V první řadě bych rád poznamenal, že psát dokumenty validní HTML5 nebo CSS 3 není v podstatně problém. V prvním případě stačí změnit doctype, v druhém ani nemusíme hnout prstem. To co dělá tyto technologie mocnými jsou nové možnosti, které přinášejí. Slovo technologie používám záměrně, protože pohled na HTML 5 je často odlišný.

Když dnes projdu většinu stylesheets na Internetu, postupně zjišťuji, že mnoho vývojářů zdaleka nevyužilo ani všech možností předešlé specifikace. Přitom na právě často nevyužitých funkcích předešlé verze CSS 3 rozšiřuje své portfolio.

Podpora prohlížečů

Podpora prohlížečů je stále lepší a dá se říct, že dnes každá nová verze prohlížeče reflektuje nové možnosti. Situace se má vlastně tak, že prohlížeče podporují i moduly a vlastnosti CSS 3, které jsou často v ranném stádiu vývoje, nezřídka i Working Draft. O procesu schvalování standardů se dočtete například na stránce W3C.

Mnoho vlastností CSS 3 již vývojáři dlouhou dobu používají. Protože jsou to často jen pracovní návrhy, které se mohou změnit, vývojáři browserů tyto vlastnosti umožňují používat pomocí specifických prefixů (vendor prefixes).

Protože jsou vývojáři líní (teď mluvím i za sebe), často si ulehčí práci implementací vlastností, které by běžně museli složitě obcházet. Dnes dobrým příkladem jsou například zakulacené rohy prvků. Mimochodem, zde najdete na border-radius užitečný online nástroj.

Update prohlížečů a kalkulace s fakty

Politika aktualizací a četnost jejich vydání je jedna věc, druhá věc je distribuce ke koncovému uživateli. Tady výborně funguje Google Chrome. Když se podívám kdykoliv na uživatelské statistiky, je zřetelně vidět, že návštěvníci mají Google Chrome aktuální a rozdíl je prakticky v jedné verzi = odstup pár měsíců. V případě dalších prohlížečů je situace komplikovanější a vůbec největší problém je samo sebou u IE. Víme, že to souvisí s distribucí jednotlivých verzí IE společně s operačním systémem a víme, že tato situace se zřejmě zásadně nezlepší.

Microsoft nepřichází se zásadními aktualizacemi tak často a i když nový IE 9 má už slušnou podporu standardů a IE 10 na tom bude velmi dobře, problémem je a bude fakt, že uživatelé tento prohlížeč mít NEBUDOU. Alespoň ne týden, měsíc a ani půl roku po jeho vydání. Bude trvat dlouhý čas, než se nová verze k uživatelům dostane.

Uživatel Chromu není žádnými aktualizacemi prakticky obtěžován a přesto kdykoliv se podívá na svou verzi, vidí, že má tu nejnovější. Je to trochu nefér srovnání a nechci tím nikomu křivdit ale jen poukázat na zásadní logiku s jakou by měl kodér kalkulovat.

Co mohu a nemohu použít?

Je čistě na svědomí webového vývojáře, jak se současnou specifikací naloží. Webová stránka CanIUse je jedna z mnoha, kde se dozvíte o podpoře jednotlivých CSS modulů. Já osobně uvažuji ve dvou rovinách:

Čistě přidaná hodnota = implementace vlastnosti, která není pro život webu důležitá a pokud uživatel nedostane tuto přidanou hodnotu, nepocítí žádný handicap.

Usnadnění práce = implementace vlastnosti, která by se sice dala vyřešit jinak ale její použití je pro mě jako vývojáře snazší.

Pokud se sejde přidaná hodnota + usnadnění práce, pak není co řešit.

Budoucnost

Doposud jsem psal o minulosti a současnosti. Budoucnost HTML5 a CSS3 je víceméně místo, kde se střetávají nové standardy a jejich podpora v nových prohlížečích. Povinností vývojáře je sledovat nové standardy a jejich podporu v nově vydaných prohlížečích a především vždy se správně rozhodnout, zda a které vlastnosti implementovat do projektu. A to v závislosti na analýze, která předukáže, jaké spektrum prohlížečů bude cílová skupina uživatelů používat.

Je jasné, že webové stránky budou HTML5 používat a přinese to uživatelům výhody a komfort, který se časem stane standardem se kterým budou počítat. CSS3 nabízí již nyní mnoho možností jak usnadnit práci nám, vývojářům. Proč tuto šanci už nyní nevyužít a snadno uživatelům nepřinést efektivněji stejný výsledek?

Permalink | Leave a comment  »

Nedostatečné znalosti relačních databází jsou pro vývojáře, který si píše aplikace od počátku zásadní problém. Na kdejakém blogu jsem našel návody jak psát dotazy nad tabulkami a nadšeně jsem se snažil všechny dotazy, všechny klauzule vstřebat. Mám pocit, že právě blogy, které často píšou začínající vývojáři mě navedly k tomuto zásadně špatnému přístupu. Po nastudování nějaké té literatury a při zpětném pohledu jak nezmíněný autor získává data příkazem

1

SELECT first_name, last_name FROM tbl_persons

se pak zamyslím, jestli autor při tom vysvětlování primitivního SELECTu nevytvořil ve svém "studentovi" minimálně 2 nebo 3 špatné návyky, které jednou promítne do návrhu databáze.

Knižní tipy obecně

Z dosavadních zkušeností mohu říci, že naprosto nejlepšími knihami, které poskytují dobrý a srozumitelný výklad jsou knihy Apress, které jsou dostupné na Amazon.com. Některé v paperback verzi, některé i ve verzi pro čtečku Kindle. Pokud se chcete vrhnout rovnou "na věc", pak nejlepším řešením je dokumentace msdn, nicméně srozumitelný výklad doplněný ilustracemi poskytují zmíněné knihy.

Série knih je natolik rozsáhlá a tématicky zaměřená, že není problém najít knihu na jakékoliv dílčí téma. Upřímně na českém trhu jsem nenašel nic, co by se obsahem alespoň částečně rovnalo výčtu, který uvádím níže:

Beginning Database Design - [ Clare Churcher ]

Vůbec nejlepší úvod do analýzy, use case, návrh, normalizace atd. Je to čtení, které přinese trochu jiný pohled na věc a hlavně názorně dovede člověka poslat správným směrem.

Beginning Database Design Solutions - [ Rod Stephens ]

Prakticky podobné co předešlý titul ale od Wroxu. Mně osobně vyhovují tituly Apressu ale je to věc názoru.

Pro T-SQL 2008 Programmer's Guide - [ Michael Coles ]

Pokud se v prostředí databází pohybuje člověk více, chce si osvojit T-SQL a programovat i nějakou logiku jako uložené procedury, funkce... používat triggery apod., pak toto je ideální příručka.

Amazon a doba doručení

I když na dopravu osobně nespěchám a volím tu nejlevnější a tu co nejdéle trvá, paperback verze mi dorazí okolo 14 dnů. A to přesto, že Amazon si dává tuším limit kolem 50 dní. To není špatný.

Permalink | Leave a comment  »

Dnes jsem podruhý narazil na problém, kdy mi ModelState.IsValid vracel stále false i když zdánlivě k tomu není důvod. Podobný hlouposti stojí za to poznamenat někam jinam než na papír...

Problém:

V controlleru validuju nějaký Model, častěji ViewModel. Ten vypadá jako POCO s běžnými Data Annotations. Z uživatelského pohledu odesíláte například formulář, plníte si Model a ten validujete pomocí ModelState.IsValid.

1
2
3
4
5

if (ModelState.IsValid) {
 // OK
} 
 
return View(someViewModel); 

Jenomže i když by vložená data měla projít validací, nestane se tak. 

Návrh:

V debugu zatím jen vidíme, že ModelState.IsValid je false, případně, že k tomu (zdánlivě) není důvod. Potřebujeme tedy jednoduše zobrazit chyby, kvůli kterým je property IsValid false.

Řešení:

1
2
3
4
5
6
7
8

foreach(var modelStateValue in ViewData.ModelState.Values)
{
    foreach(var error in modelStateValue.Errors)
    {
        var message = error.ErrorMessage;
        var exception = error.Exception;
    }
}

Permalink | Leave a comment  »

Scott Guthrie oznámil dostupnost ASP.NET MVC 4 Developer Preview. Verze předchází beta verzi ale už v současné době nabízí mnoho užitečných features.

• ASP.NET MVC 4 Release notes
  

MVC 4 může být instalován po boku s MVC 3 a upgrade stávajících MVC 3 aplikací je založen na vytvoření nového MVC 4 projektu, zkopírování controllers, views a souborů vzhledu + typická úprava web.configu a nahrazení několika DLL novými.

Co je nového
V první řadě byly zmodernizovány templates při vytváření nového ASP.NET MVC 4 projektu. Kromě designových změn používají templates techniku adaptivního renderingu za účelem přizpůsobení šablon pro desktop + mobilní platformu. Funkci si lze snadno vyzkoušet po vytvoření defaultního projektu a následného zobrazení stránky v libovolném mobilním emulátoru. Defaultní templates nově také lépe využívají jQuery UI (vidět je to například u přihlášení).

• Opera mobile emulator

Mobile project template
Podpora mobilních zařízení je skutečně znatelná. Při vytváření nového projektu lze přímo zvolit vytvoření site speciálně pro mobilní zařízení. Ta je založena na open source knihovně jQuery Mobile pro stavbu dotykových UI. Pokud má již vývojář vytvořenou website optimalizovanou pro desktop, není nutné vytvářet nový projekt ale využít lze Display Modes.

See the full gallery on Posterous

Display modes ale můžeme i rozšířit a vytvořit si Views pro různé mobilní zařízení. Stačí aktualizovat Global.asax a zaregistrovat DefaultDisplayMode v Application_Start metodě. Příklad přímo z Release notes.

1
2
3
4
5

DisplayModes.Modes.Insert(0, new DefaultDisplayMode("iPhone")
{
    ContextCondition = (context => context.Request.UserAgent.IndexOf
        ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
 });

Více o podpoře mobilních zařízení se můžete dočíst zde.

Recipes
Recipes umožňují ve Visual Studiu generovat specifické balíčky kódu, které lze instalovat pomocí NuGet. Tyto recipes lze užít pro přepsání vestavěných generátorů kódu při akcích jako Add Controller, Add View a další.

Instalace:

• ASP.NET MVC 4 (platform installer)
• ASP.NET MVC 4 (přímý odkaz)

Permalink | Leave a comment  »

Have you ever need to make a webpage screenshot and save it into file? Now, you can do this in a simple way with my online tool Web2File. Web2File is a simple application that allows you to save complete website into pdf or jpg file. Application is based on ASP.NET MVC 2, written in C# and use some free tools for converting html content into pdf and converting from pdf to jpg. This tool is free for use but you can take just five screenshots per hour. I am going to improve this application and update it.

Permalink | Leave a comment  »

Vzhledem k tomu, že s kolegou připravujeme další aplikaci na Facebook, rozpomenul jsem se na největší problémy při kódování a stylování aplikace předešlé. Na Facebooku je totiž všechno takové ponuré a při tvorbě první aplikace se i chudák webový designér docela zapotí. Problémy při psaní kódu se točí hlavně kolem JavaScriptu a CSS.

CSS na Facebooku je při prvním spuštění aplikace cachováno. To přináší nutnost uvádět odkazy na všechny obrázky s absolutní cestou. Chcete-li aby se promítla změna v CSS, je nutné za název souboru dopsat vždy nějaký parametr, jinak Facebook nově upravené CSS nenacachuje. Protože má Facebook tu hloupou vlastnost, že si po spuštění všechny ID a CLASS přejmenuje do podoby půlmetrového názvu, aplikace se dost těžko ladí. A nakonec je užitečné celé aplikaci dát nějakou unikátní CLASS (ne ID) a u všech CSS předpisů uvádět tuto CLASS. Jinak se snadno stane, že se trefíte do nějakého stylu, který už Facebook používá. Jestli je totiž něco, co má Facebook rád, pak je to jeho sladká Lucida Grande. Tu vám bude cpát prostě všude.

JavaScript na Facebooku je pak definitivní zlo. Ideální je úplně se mu vyhnout - což v některých případech bohužel nejde. Facebook má totiž vlastní řešení:FBJS. Na jQuery a jiné frameworky tedy můžete rovnou zapomenout. I když jsem našel několik návodů jak jQuery na Facebooku rozchodit, většinou se stejně objeví další problémy (např.: s použitím pluginů). Na Facebooku samozřejmě platí: Použití nepovoleného JS = pád aplikace. Problémy jsme měli i s natahováním JS z jiných serverů. Prostě nejlepší je psát to přímo do aplikace.

Shrnuto a podtrženo

• u CSS uvádět nějaký parametr, který si změníte vždy, když uděláte změnu v souboru
• u všech odkazů uvádět absolutní cestu
• dát aplikací unikátní CLASS ( na nějaký DIV ) a psát styly formou .unikat .neco, .unikat h1 atd...
• v CSS stylovat na třídy, protože ID často nefungují (důvod jsem nezjistil)
• JS nepoužívat nebo se naučit používat přímo FBJS
• JS psát ideálně přímo do souborů aplikace - netahat to z jiných serverů

A tip na závěr: Já osobně jdu do varianty, kdy si napíšu jedno CSS, které "normalizuje" styly Facebooku a připravím si tak unikátní prostředí pro psaní kódu. Toto CSS budu užívat pro všechny FB aplikace společně s druhým předpisem, který bude určen vždy pro konkrétní aplikaci.

Permalink | Leave a comment  »