Webdesign

Společnost Adobe dnes pořádala celodenní akci Creative Future 2010, na které představila novou sadu celkem patnácti Creative Suite 5 aplikací. Událost se konala v hotelu Clarion Congress Hotel Prague, který má bezvadnou dostupnost.

Samotná akce se velice povedla.

Účastnilo se jí cca 600 lidí, tedy plný velký sál, a byla velice profesionálně zvládnutá. Na lidech z Adobe ČR od počátku obdivuji, co dokáží zajistit v doslova miniaturním počtu. Musejí pracovat skutečně efektivně.

Nejzábavnější z pohledu stylu prezentace byl jednoznačně Tom Krcha (Flash, Catalyst), tradičně seriózní a ucelenou prezentaci nabídnul Michal Metlička a jeho bratr (Photoshop, Illustrator), velice dobrá byla prezentace Dreamweaveru, poněkud horší to bylo jen s přednášejícím popisujícím video produkty (Premiere Pro, After Effects). Ukazoval sice skvělé funkce, ale způsobem, který mě nudil a uspával. To byla jediná přednáška, kdy jsem si přál konec.

Adobe CS5

Společnost SiteOne nabízí velice zajímavou statistiku klikání vašich návštěvníků - webovou aplikaci Myx. Aplikace sbírá klikání na jednotlivé elementy a následně je vizualizuje pomocí overlay zobrazeného nad stránkou samotnou (realizované je to  pomocí Adobe Flash).

A protože se chystáme po pár letech redesignovat hulan.cz web (a aktualizovat texty, reference, nabízené služby), uvítal jsem možnost zobrazit si heatmapy současného webu, aby bylo jasné, jak je v současné době vlastně používán.

Takto vypadá pohled na hulan.cz web za poslední týden:

Myx na hulan.cz

Microsoft pořádá konferenci Web & Design Academy 3.0, a to ve středu 14.4.2010, od 10:30 do 20:00 hodin. Konference je rozdělena do dvou tématických sekcí se společným úvodem Tomáše Jindříška z OgilvyInteractive. Registrovat se můžete do jedné z nich dle Vašeho zaměření.

1) WEBOVÝ VÝVOJ A PROVOZ

• Jak jsme psali a designovali player pro Olympijské hry. LIVEBOX a Dalibor Kačmář, Microsoft
• Vývoj aplikací pro Facebook. Štěpán Bechynský, Microsoft
• Vytváříme vlastní web bez programování aneb k čemu slouží Web Content Management Systém. Michal Neuwirth, Kentico Software a Ondřej Výšek, Optimalizovane IT
• Efektivní vývoj webů v ASP.NET 4 Tomáš Herceg, Microsoft MVP
• Testujete svá řešení na uživatelích? Martin Klíma, ČVUT-FEL a Martin Kopta, EDU2000
• Virtualizace bez hranic. Ondřej Výšek, Optimalizovane IT
• Jak si lze snadno postavit webový server (PHP a Windows Server)? Antonín Fiurášek, Mainstream Technologies

2) WEBDESIGN, E-MARKETING A PODPORA V PODNIKÁNÍ

• Funkce designu, inspirace vs. vykrádání, design aplikací a zážitku. Petr Novák, Novague
• Od návrhu ke kódu. Nebo naopak? Jan Havel, Actum
• Critical factors for success in eCommerce projects. Till Gartner, MGM Technology Partners
• Existuje nějaká podpora rozvoje Vašeho podnikání, jak ji využít? Robert Šedivec, Microsoft a Robert Havránek, Microsoft
• Search Engine Marketing jako základní kámen internetové propagace. František Štrupl, H1.cz
• Je ve svém designu Windows Phone 7 inovativnější než iPhone? Dalibor Kačmář, Microsoft

Každý účastník obdrží hodnotný dar Windows Web Server Installer.

Kdy: středa 14.4.2010, od 10:30 do 20:00 hodin (začátek registrace 9:30)
Kde: Kongresové centrum U HÁJKŮ, Na Poříčí 42, 110 00 Praha 1.

Můj současný nejoblíbenější prohlížeč je Internet Explorer 8 společně s Roboform správcem hesel. Používám IE jako hlavní prohlížeč zhruba dva a půl roku, a jsem opravdu spokojen. Nainstalovány mám pochopitelně ale i poslední verze Firefoxu, Opery, Safari a Google Chrome pro ladění webů.

Firefox mi nikdy nevyhovoval, má špatné a opravdu pomalé UI. I na verzi 3.6 je vidět, že původně byl Firefox navržen jako open-source kopie Internet Exploreru 6.0, zatímco záložky a další moderní prvky tam byly doplněny až později (a koncepčně chybně). Je pozoruhodné, že právě tento neinovativní prohlížeč se dočkal takového tržního rozšíření (Firefox má ovšem opravdu dobré některé pluginy, ale ty většina lidí stejně nepoužívá).

Opera není špatný prohlížeč, pár let jsem ji používal (viz článek o pokročilé konfiguraci), ale klíčový správce hesel má mnohem horší než Roboform pro IE8 a také postoj Opera Software ASA k volné soutěži (tedy "žalování u EU na ty úspěšnější"😉 mi nesedí. Pokud vám ale tyto dvě věci nevadí, je to asi druhý nejlepší prohlížeč po IE8 - rychlý, promyšlený a dobře ovladatelný.

Safari je funkčně mizerné a chybové, jednoznačně nejhorší prohlížeč. Zmatené záložky, špatná podpora ovládání myší, absence rozšíření a API pro ně či ikon webů v záložkách. Dobré maximálně tak pro nenáročné fanatiky nakousnutého ovoce.

Zbývá Google Chrome. Ten má na první pohled opravdu rychlý vývoj, během velice krátké doby se dostal z beta verze až k současné 4.1. Zkusil jsem jej tedy otestovat. Rychlost je dobrá, a jádro založené na open-source Webkitu také, ale stále tomu něco chybí.

Google Chrome

Společnost Active24 nabízí v ceně 499 Kč měsíčně program BUSINESS 30 s možností hostování až 5 domén pomocí virtuálního dedikovaného serveru. Využít přitom můžete nejen open-source technologie (PHP, MySQL), ale i komerční řešení Microsoftu (ASP.NET, SQL Server 2008 a další).

V praxi jde tedy o cenu 100 Kč za jednu hostovanou doménu. Virtuální dedikovaný server (VDS) má oproti běžnému sdílenému webhostingu, kdy jsou na jednom CPU navěšeny třeba stovky prezentací, významnou výhodu v přidělení určité části virtualizovaného hardware (procesorového času) a vyhrazené RAM vašemu VDS, zde konkrétně se jedná o poměr 1:25 VDS/CPU. Dostanete tedy vyšší výkon a stabilitu, což sdílený webhosting v ceně 100 Kč za doménu měsíčně nenabídne.

Celý webhostingový program je nabízen v managed konfiguraci - Active24 se tedy stará nejen o instalaci operačního systému (Windows 2008), ale i o jeho průběžné aktualizace, instalaci a aktualizaci databází, instalaci PHP a jeho nastavení, zabezpečení systému a zajištění hardwarového provozu serverů.

V programu BUSINESS 30, kde je nabízeno hostování až 5 domén, je úložná kapacita 30GB a RAM 512MB. Obě databáze, MySQL 5.0 i SQL Server 2008, jsou přitom instalovány na jiném stroji, nezapočítávají se do volné RAM.

Téměř identická služba ke KlikniaVolej.cz je i sms.sluzba.cz. Posílání SMS (na základě dokumentace z tohoto PDF) přes tuto bránu můžete v PHP zajistit třeba následovně:

$action = 'send';
$body = 'Text SMS zpravy';
$vars = array(
 'msg' => $body,
 'msisdn' => $telefon,
 'act' => $action,
 'login' => $username,
 'auth' => md5(md5($passwd).$username.$action.substr($body,0,31))
);
$data = http_build_query($vars);

$url = '//smsgateapi.sluzba.cz/apipost10/sms';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_TIMEOUT, 180); 
curl_setopt($ch, CURLOPT_HEADER , false);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER , true);
curl_setopt($ch, CURLOPT_VERBOSE , false);
curl_setopt($ch, CURLOPT_POST , true);
curl_setopt($ch, CURLOPT_POSTFIELDS , $data);
$response = curl_exec($ch);
curl_close($ch);

KlikniaVolej.cz je služba pod hlavičkou MAFRA a.s. (iDNES), která umožňuje posílat SMS přes jejich webovou bránu s tím, že dostupné je i API pro aplikační napojení. API je opravdu triviální, popsané je v tomto PDF, jedná se o prostý POST na dané URL s několika položkami.

Máte následující proměnné obsahující vaše údaje k přihášení:

$username = přihlašovací jméno
$passwd = přihlašovací heslo
$sender = vaše jméno
$telefon = číslo, na které chcete poslat SMS

Poté odešlete SMS pomocí CURL následovně:

srand((double)microtime()*1000000); 
$id = strval(time()).rand(0, 999); // jedinečné ID
$vars = array(
 'user' => $username,
 'number' => $telefon,
 'sender' => $sender,
 'text' => "Text SMS zpravy",
 'encoding' => 'ascii',
 'test' => '0',
 'id' => $id,
 'hash' => sha1( $username . ':' . $id . ':' . sha1($passwd) ),
 'flash' => '0'
);
$data = http_build_query($vars);

$url = 'http://kavremote.mobil.cz:80/smsgateway.pl';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_TIMEOUT, 180); 
curl_setopt($ch, CURLOPT_HEADER , false);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER , true);
curl_setopt($ch, CURLOPT_VERBOSE , false);
curl_setopt($ch, CURLOPT_POST , true);
curl_setopt($ch, CURLOPT_POSTFIELDS , $data);
$response = curl_exec($ch);
curl_close($ch);

Když jsem nedávno psal o svých potřebách kladených na mobilní telefony, jedním z hlavních bodů tam byla i skvělá podpora Outlook / Exchange kombinace a Live služeb. Marek Lutonský to na blogu Mobilmanie, kde recenzuje s kolegou Android, označil za velice specifické. Není tomu tak. Dle dostupné statistiky zkoumající čtvrt miliardy lidí jich 62% používá řešení Microsoftu a jen 5% Google webmail.

zdroj: fingerprintapp.com

Přestože z (některých) českých médií může člověk nabýt dojmu, že existuje jen Google a jeho webové služby, velice specifickou kuriozitou je právě vyřizovat poštu ve webovém rozhraní freemailu od Google (a s tím souvisí i Android).

Outlook (a Exchange) je naopak nepsaný standard (10x významnější než webový Gmail), a to díky bezkonkurečnímu zpracování nejen emailů, ale i kalendáře, úkolů a kontaktů (související: Organizace času aneb proč mám rád Microsoft). I samotné webové rozhraní Microsoftu (Live služby) je 3.4x významnější než Gmail.

Osobně odhaduji, že řada lidí navíc používá webové aplikace jen proto, že si není schopna desktopového klienta nastavit. Efektivita webového emailu je totiž velice nízká, a pokud jsem osobně někomu nastavil Outlook, již se k webového rozhraní nikdy nevrátil.

Datovou schránku jsem si založil ihned, jak to bylo možné, a myslím si, že podobně to udělala většina lidí v IT. Samotný web MojeDatovaSchranka.cz nicméně trpí řadou nedostatků, přes zvláštní nutnost vyplňovat po přihlášení CAPTCHA, ukládání zpráv pouze po dobu 90 dnů, až po nutnost instalace podivného pluginu od bývalé 602 organizace Svazarmu (dnes Software602 a.s.).

Společnost AMOS Software přišla s řešením, které se mi líbí výrazně více než oficiální web s 602XML pluginem - nazývá se Multischránka. Tato aplikace je založena na Adobe Air runtime, běží na Windows, OS X i Linuxu bez jakýchkoliv dalších softwarových požadavků, a podporuje plnou práci s datovou schránkou, díky oficiálnímu webovému API.

V aplikace je možné vést neomezené množství těchto schránek, typicky pro fyzickou osobu a množství právnických osob.

Instalace aplikace Multischránka

SkyScraper o rozměru 120x600px je velice často používaný, pro čtenáře mimořádně otravný, ale pro inzerenty velice oblíbený reklamní formát. Díky jQuery jej můžete snadno udělat ještě viditelnější tím, že bude ladně plavat ve vertikálním směru po obrazovce.

Napsal jsem si na to jeden krátký skript, který respektuje výšku skyscraperu, jeho původní umístění o skyscraperOffset pixelů pod horním okrajem obrazovky a také zajišťuje, aby jeho obsah nevlezl do patičky webu, ale zastavil své plavání těsně nad ní. Celý DIV #skyscraper samozřejmě musí být absolutně pozicován.

Celý Javascriptový kód je zde, můžete jej libovolně použít:

$(document).ready(function(){
 var skyscraperAd = $("#skyscraper");
 var skyscraperOffset = skyscraperAd.offset().top;
 var skyscraperBottom = $("#footer").offset().top - skyscraperAd.height();
 $(window).scroll(function() {
   skyscraperAd.stop();
   var windowTop = $(window).scrollTop();
   if (windowTop > skyscraperOffset) {
      if (windowTop > skyscraperBottom) windowTop = skyscraperBottom;
      if (windowTop < 0) windowTop = 0;
      skyscraperAd.animate({top: windowTop + 'px'}, 'fast');
   } else
      skyscraperAd.animate({top: skyscraperOffset + 'px'},'fast');
 });
});

A k tomu se váže (jako příklad) následující CSS:

#skyscraper {
  width:120px; height:600px; 
  position:absolute; 
  top:300px; left:50%; margin-left:500px; 
}