České vysoké učení technické v Praze Fakulta informačních technologií Katedra softwarového inženýrství
Bakalářská práce
Sociální síť pro správu sportovních videí Václav Jirovský
Vedoucí práce: Ing. Adam Sporka, Ph.D.
16. května 2013
Poděkování Na tomto místě bych rád poděkoval vedoucímu práce Ing. Adamovi Sporkovi, Ph.D. za jeho vstřícnost a cenné rady, které mě vedly k úspěšnému vyřešení této bakalářské práce. Dále bych rád poděkoval své rodině a přátelům, kteří mě během studia podporovali.
Prohlášení Prohlašuji, že jsem předloženou práci vypracoval samostatně a že jsem uvedl veškeré použité informační zdroje v souladu s Metodickým pokynem o etické přípravě vysokoškolských závěrečných prací. Beru na vědomí, že se na moji práci vztahují práva a povinnosti vyplývající ze zákona č. 121/2000 Sb., autorského zákona, ve znění pozdějších předpisů, zejména skutečnost, že České vysoké učení technické v Praze má právo na uzavření licenční smlouvy o užití této práce jako školního díla podle § 60 odst. 1 autorského zákona.
V Praze dne 16. května 2013
.....................
České vysoké učení technické v Praze Fakulta informačních technologií c 2013 Václav Jirovský. Všechna práva vyhrazena.
Tato práce vznikla jako školní dílo na Českém vysokém učení technickém v Praze, Fakultě informačních technologií. Práce je chráněna právními předpisy a mezinárodními úmluvami o právu autorském a právech souvisejících s právem autorským. K jejímu užití, s výjimkou bezúplatných zákonných licencí, je nezbytný souhlas autora.
Odkaz na tuto práci Jirovský, Václav. Sociální síť pro správu sportovních videí. Bakalářská práce. Praha: České vysoké učení technické v Praze, Fakulta informačních technologií, 2013.
Abstract Main purpose of this thesis is design and implementation of social network that will enable better social interaction with user’s sport videos. This thesis will introduce social networks in first chapter. In the next chapter, design with respect to requirements will be described as well as process of choosing technologies used during implementation along with their short description. Next chapter will describe implementation of this social network. Conclusion will present results of testing and propose possibilities for further improvements in future. Keywords web service, social network, responsive design, mobile version, media quries, Nette, HTML5, CSS3, LESS
ix
Abstrakt Cílem této práce je navržení a implementace sociální sítě, která umožní vetší interakci se sportovními videi uživatelů. Práce v první části popisuje úvod do sociálních sítích. Následuje návrh s ohledem na požadavky, výběr technologií použitých v implementaci a jejich krátký popis. Dále je popsána implementace této sítě a závěr je věnován testování a možnostem dalšího rozvoje. Klíčová slova webová služba, sociální síť, responsivní design, mobilní verze, media queries, Nette, HTML5, CSS3, LESS
x
Obsah Úvod Představení práce . . . . . . . . . . . . . . . . . . . . . . . . . . . Vliv sociálních sítí . . . . . . . . . . . . . . . . . . . . . . . . . .
1 2 2
1 Pozadí práce 1.1 Existující sociální sítě . . . . . . . . . . . . . . . . . . . . . . 1.2 Souvislosti práce . . . . . . . . . . . . . . . . . . . . . . . .
5 5 7
2 Analýza a návrh 2.1 Cílová skupina uživatelů . . . . . . . . . 2.2 Případy užití . . . . . . . . . . . . . . . 2.3 Návrhy grafického uživatelského rozhraní 2.4 Mobilní přístup . . . . . . . . . . . . . . 2.5 Jazykové mutace . . . . . . . . . . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
11 11 11 15 23 24
3 Implementace 3.1 Implementační nástroje 3.2 Responsivní design . . 3.3 Architektura . . . . . . 3.4 Nasazení . . . . . . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
27 27 31 33 39
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
4 Testování 41 4.1 Kognitivní průchod . . . . . . . . . . . . . . . . . . . . . . . 41 4.2 Akceptační test . . . . . . . . . . . . . . . . . . . . . . . . . 42 Závěr 45 Zhodnocení práce . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 xi
Možnost rozvoje . . . . . . . . . . . . . . . . . . . . . . . . . . . .
45
Literatura
47
A Seznam použitých zkratek
51
B Obsah přiloženého CD
53
C Screenshoty výsledku
55
xii
Seznam obrázků 0.1
Technologický kontext řešení . . . . . . . . . . . . . . . . . . . .
2
1.1 1.2 1.3 1.4
Screenshot Screenshot Screenshot Screenshot
. . . .
. . . .
. . . .
6 7 8 8
2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 2.10 2.11 2.12 2.13 2.14
Diagram případů užití pro nepřihlášeného uživatel . . . . . . Diagram případů užití pro přihlášeného uživatel . . . . . . . Návrh GUI menu v veřejné sekci . . . . . . . . . . . . . . . Návrh GUI menu v sekci Portál . . . . . . . . . . . . . . . . Návrh GUI hlavní strany pro nepřihlášeného uživatele . . . . Návrh GUI hlavní strany pro přihlášeného uživatele . . . . . Návrh GUI detailu videa pro nepřihlášeného uživatele . . . . Návrh GUI detailu videa pro přihlášeného uživatele . . . . . Návrh GUI detailu osobního videa přihlášeného uživatele . . Návrh GUI profilu uživatele pro přihlášeného uživatele . . . Návrh GUI novinek pro přihlášeného uživatele . . . . . . . . Návrh GUI videa přihlášeného uživatele . . . . . . . . . . . Návrh GUI vyhledávání uživatelů pro přihlášeného uživatele Princip rozložení responsivního webu . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
12 13 15 15 16 17 18 19 20 21 21 22 22 25
3.1 3.2 3.3 3.4
Ukázka použití designu Twitter bootstrap Ukázka úpravy videa pomocí DOM . . . . Adresářová struktura zdrojového kódu této Databázový model aplikace . . . . . . . .
. . . .
. . . .
29 30 34 36
. . . . . . . . . . . . .
55
služby Facebook . . . . . . . . . služby Twitter . . . . . . . . . . hlavní strany služby YouTube . . detailu videa na službě YouTube
C.1 Screenshot výsledku na stolním zařízení xiii
. . . .
. . . .
. . . .
. . . . . . . . práce . . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
C.2 Screenshot výsledku na mobilním zařízení . . . . . . . . . . . .
xiv
56
Seznam tabulek 3.1 3.2
Přehled podpory doplňku Flash Player na platformách . . . . . Přehled podpory video formátů ve webových prohlížečích . . . .
31 31
4.1
Výsledky akceptačních testů . . . . . . . . . . . . . . . . . . . .
44
xv
Úvod Termín sociální síť se objevil v oboru sociologie na přelomu 19. a 20. století, kde popisuje sociální struktury - navzájem propojené skupiny lidí pomocí přátelství, rodiny, společných zájmů, věku, rasové, sexuální či náboženské příslušnosti, společných zážitků apod.[1] Díky masivnímu rozvoji internetu tento termín získal nový význam. „Systémy sociálních sítí nejsou v podstatě ničím jiným než kombinací specializované webhostingové služby a specializovaného vyhledávače. Uživatel si vyplní svůj strukturovaný profil a hned poté může hledat a být nalézán. Potřebujete najít bývalé kolegy, kteří pracovali ve stejné firmě jako vy, ale pouze v době, kdy jste tam byl vy? Žádný problém.“ [8] Jako sociální sítě v novém pojetí můžeme označovat internetové služby, které umožňují vzájemné propojení kontaktů či přátel a formalizaci jejich vztahů[21]. Za první internetovou sociální síť je považován portál sixdegrees.com z roku 1997, který byl založený na teorii „šest stupňů odloučení“, která předpokládá, že každý člověk je propojený s každým člověkem prostřednictvím řetězce šesti osob. Tento portál umožňoval vytvořit si vlastní uživatelský profil, seznamy svých přátel, komunikaci mezi přáteli a zobrazování příspěvků uživatelů (do třetího stupně odloučení). Projekt však v roce 2000 zkrachoval, protože nedokázal generovat dostatečný zisk. V roce 2003 vznikly portál MySpace.com, profesní portál Linkedin.com a o rok později vznikla síť studentů Harwardské univerzity Thefacebook, která se rychle rozšířila do dalších univerzit a mimo ně, až se nakonec v roce 2009 stala největší sociální sítí na světě[27]. V roce 2005 vznikl portál Youtube.com pro sdílení videí a v roce 2006 vznikl zajímavý projekt Twitter.com pro sdílení krátkých zpráv. Více informací o těchto sítích naleznete v kapitole této práce nazvané „Existující sociální sítě“ 1. 1
Úvod
Obrázek 0.1: Technický kontext řešení
Představení práce Osobní záběry ze sportovních činností bývají velmi oblíbené - tyto záběry pro nás mají určitou citovou hodnotu a vážíme si jich - často máme uložené fotografie ve svých rodinných albech, které velmi opatrujeme. Díky technickému pokroku můžeme vytvářet při takových činnostech i kvalitní videa. Tyto videa pak často chceme šířit mezi své přátelé na sociálních sítí, které pro sdílení sportovních videí ale nejsou určené a takové příspěvky snadno „zapadnou“ bez odezvy přátel. Tato práce si klade za cíle: • navrhnout síť určenou pro sdílení sportovních videí • provést výběr vhodných technologií k implementaci této sítě • navrhnout GUI a architekturu sociální sítě • implementovat sociální síť • otestovat tuto implementaci Tato sociální síť by měla podpořit sociální interakci mezi sportovci mimo sjezdovky, dráhy apod. pomocí těchto videí. Práce spoléhá na dodání těchto videí externí infrastrukturou a řeší pouze část sociální sítě, viz obrázek 0.1.
Vliv sociálních sítí Sociální sítě a jejich rychle rostoucí úspěch nás všechny ovlivňuje více, než si někdy uvědomujeme. Důležitou funkcí sociálních sítí je velmi rychlé sdílení informací vhodné cílové skupině. Například při politických nepokojích v roce 2
Vliv sociálních sítí 2009 v Íránu, si obyvatelé předávali informace o plánovaných demonstracích pomocí sociální sítí[17]. Nejdůležitější však při těchto událostech je jiný pohled než oficiálních médií - uživatelé sítí informují o tom, co se kolem nich právě děje, což narušuje často nařízenou cenzuru režimu. Této vlastnosti sociálních sítí často využívají média, která o událostech informují a přebírají tyto informace uživatelů. Samozřejmě tyto informace bývají většinou emotivně zabarvené a občas i přehnané, a proto je nutné je brát s rezervou. Velmi dobrým příkladem byl výbuch plynu 29. dubna 2013 v Praze, který nastal krátce po 10. hodině. V 10:04 již byla první zmínka o té události na sociální síti Twitter 1 , kde se tato zpráva začala velmi rychle šířit. Na českých internetových médiích se tato zpráva objevila až kolem 10:11 2 , následována dalšími médii (rozhlas, televizní vysílání), která částo vycházela z informacích sebraných na sociálních sítích. Uživatelé sociální sítě se tak mohli dozvědět o 7 minut dříve, aby se např. vyhnuli tomuto místu, nevycházeli ven či naopak aby pomohli zraněným. Kdyby se jednalo o vážnější událost s těžce zraněnými osobami, i 7 minut může rozhodovat o životech. Výše uvedené jsou sice mimořádné události, ale i v normálním režimu jsme sítěmi ovlivněni. Například dle průzkumu mezi pracovníky osobních oddělení si 45% těchto pracovníku prověřuje data uchazečů o práci, která uchazeči publikují na sociální sítě [30]. Díky tomuto „prověření“ získávají pozitivní či negativní dojem, zda-li je uchazeč loajální vůči současnému zaměstnavateli, či si vyvrací nebo zvyšují pochybnosti zda-li uchazeč nelhal v životopise apod.
1
Krátká zpráva Miloše Čermáka na URL https://twitter.com/cermak/status/ 328781940834586624 2 První zpráva na webovém portálu České televize ČT24 http:// www.ceskatelevize.cz/ct24/domaci/224754-vybuch-v-centru-prahy-43zranenych-mrtve-zachranari-nenasli/
3
Kapitola
Pozadí práce 1.1
Existující sociální sítě
V této sekci jsou popsány hlavní vlastnosti nejznámějších již existujících sociálních sítí.
1.1.1
facebook.com
Aktuálně největší sociální síť světa přinesla ucelený ekosystém pro své uživatele. Každý uživatel zde má svůj uživatelský profil, ve kterém jsou chronologicky uspořádané události uživatele. Uživatelé si můžou přidávat ostatní mezi přátelé (požádat o potvrzení přátelství). Po potvrzení přátelství si uživatelé obvykle sdílejí mezi sebou více informace (v obvyklém nastavení je nastavení příspěvků uživatele na jeho profilu viditelné pouze přátelům [9]), a přidávat si komentáře k příspěvkům. Síť integruje komunikaci uživatelů od soukromých zprávy mezi 2 až n uživateli až po veřejné skupiny, kde si může přečíst informace každý uživatel služby. Služba poskytuje nelimitovaný úložný prostor pro nahrávání fotografií a videí. Každou fotografii lze označit (umístit k obrázku „tag“, tedy odkaz na osobu, která se na fotografii nacházejí), nejlépe na obličej osoby. Tímto provázáním osoby a fotografie může být umístěna fotografie na profilu osoby. Služba Facebook poskytuje podobnou funkci i pro videa, ale oproti fotografii není možné určit v jaké oblasti videa se osoba vyskytuje. Za zmínku určitě stojí funkce Události, kde může uživatel naplánovat událost a pozvat na ni vybrané uživatele. Pozvaní uživatelé se pak mohou vyjádřit zda-li na událost přijdou či ne. Další zajímavou vlastností služby je pohled News feed, který zobrazuje poslední události přátel viz obrázek 1.1. Na pohled News feed je uživatel přesměrován po přihlášení. Tento pohled 5
1
1. Pozadí práce
Obrázek 1.1: Pohled News feed služby Facebook
pomáhá k větší interakci uživatelů, protože každý příspěvek je na určitou dobu viditelný a je větší pravděpodobnost, že si ho všimnou ostatní uživatelé. Velmi oblíbenou funkcí na službě Facebook je funkce To se mi líbí. Uživatelé tak mohou vyjádřit oblibu u každého příspěvku, namísto zdlouhavého psaní komentáře. U každého příspěvku se pak zobrazuje počet To se mi líbí a komentářů.
1.1.2
twitter.com
Projekt Twitter funguje na principu zpráv uživatelů (tzv. „tweet“), které se musí vejít do 140 znaků. Každý uživatel má svůj uživatelský profil, který je dostupný ve formátu @přezdívka uživatele. Tyto zprávy mají vždy autora, mohou obsahovat krátké záchytné body pro téma zprávy (tzv. „hashtagy“ ve formátu #téma). Díky těmto záchytným tématům lze zprávy filtrovat podle témat. U každé zprávy lze provést akci „retweet“ (převzít zpráv na svůj profil) a „favorite“ (obdoba funkce To se mi líbí na službě Facebook). Velkým rozdílem oproti ostatním službám je jiné nastavení soukromí zpráv - všechny příspěvky (kromě osobních zpráv mezi uživateli) jsou veřejné a může je vidět i nezaregistrovaný uživatel (díky této vlastnosti jsem mohl odkázat na konkrétní zprávu Miloše Čermáka v úvodu této práce). Každý uživatel může následovat ostatní uživatele. Zprávy následovaných 6
1.2. Souvislosti práce
Obrázek 1.2: Pohled na zprávy následovaných uživatelů služby Twitter
uživatelů se pak zobrazují v pohledu podobnému News feed ve službě Facebook - viz obrázek 1.2.
1.1.3
youtube.com
Služba YouTube slouží ke nahrávání a sdílení videí. Tato služba byla založena bývalými zaměstnanci populární služby PayPal. V roce 2006 byla odkoupena společností Google Inc. [6]. Díky této transakci společnost Google Inc. službu postupně začleňuje do svojí mladé sociální sítě Google+ viz obrázek 1.3. Ve službě můžeme nalézt principy sociálních sítí Facebook (označení líbí/nelíbí se mi u videí) a Twitter (následování uživatelů). Služba YouTube používá pro přehrávání videí technologii Flash [4], v současnosti provádí testování přehrávače3 vyvinutém na technologii HTML5[37].
1.2
Souvislosti práce
Sociální síť (dále služba) implementována v této práci navazuje již na existující infrastrukturu. Stávající infrastruktura zajišťuje dodání dat (zejména videí), proto tato práce již počítá s dodanými daty externí infrastrukturou 3
Aktivaci tohoto přehrávače http://www.youtube.com/html5
je
nutné
vyvolat
manuálně
na
URL
7
1. Pozadí práce
Obrázek 1.3: Pohled News feed služby YouTube. Pod návrhy videí se zobrazují příspěvky uživatelů následovaných na sociální síti Google+.
Obrázek 1.4: Detail videa na službě YouTube. Podle svého internetové připojení si může uživatel změnit přehrávanou kvalitu videa.
8
1.2. Souvislosti práce a neřeší dodání a zpracování těchto dat. Služba poskytuje uživateli rozhraní pro editaci některých dat, které potřebuje externí infrastruktura ke správnému fungování - např. provázání zdroje dat s uživatelem. Služba nekomunikuje s externí infrastrukturou pomocí žádného API, oba tyto systémy mají plnohodnotný přístup do databáze.
9
Kapitola
Analýza a návrh Tato kapitola popisuje požadavky na práci, její cíle a obsahuje návrhy grafického uživatelské rozhraní této sítě.
2.1
Cílová skupina uživatelů
Aplikace je zaměřena na sportovce, kteří mají zájem o videa ze svých jízd, utkání apod. U těchto uživatelů lze předpokládat nižší věk,sportovní zápal a díky zájmu o sociální síť i zájem o moderní technologie. Další skupinou jsou jejich přátelé, protože jedním z případů užití je sdílení videí na ostatní sociální sítě a lze předpokládat, že tyto videa si budou chtít přehrát právě přátelé uživatelů na ostatních sociálních sítích. Díky tomu nejsou přátelé vůbec limitování věkem, pohlavím ani oblastí pobytu či jazykem.
2.2
Případy užití
Následující případy užití aplikace byly identifikovány ve spolupráci s vedoucím této práce.
2.2.1
Prohlížení statických stránek
Scénář začíná, když si uživatel (přihlášený či nepřihlášený) chce zobrazit statickou stránku s informacemi (např. stránku popisující projekt). 11
2
2. Analýza a návrh
Obrázek 2.1: Diagram případů užití pro nepřihlášeného uživatel.
12
2.2. Případy užití
Obrázek 2.2: Diagram případů užití pro přihlášeného uživatel.
2.2.2
Přehrání uveřejněného videa
Hlavní scénář začíná, když si uživatel (přihlášený či nepřihlášený) chce přehrát veřejné video jiného uživatele, které si vybral na hlavní straně v sekci Nejnovější veřejné videa. Alternativní scénář nastává, když uživatel si uživatel chce přehrát veřejné video přímo z URL (např. po kliknutí na odkaz z jiné sociální sítě).
2.2.3
Přihlášení
Scénář nastává, pokud se chce nepřihlášený uživatel přihlásit. Uživatel vyplní do formuláře pro přihlášení svoji přezdívku a heslo. Tento scénář má velké množství alternativních scénářů - do přihlášení uživatele je tento přihlašovací formulář zobrazen na každé stránce. 13
2. Analýza a návrh
2.2.4
Registrace
Scénář nastává, pokud se chce nepřihlášený uživatel zaregistrovat. Poté, co uživatel vyplní registrační formulář, je uživateli odeslán e-mail s aktivační URL na jeho e-mailovou adresu. Poté, co uživatel otevře tuto URL je uživatel plně zaregistrován a může se přihlásit.
2.2.5
Zobrazení veřejného profilu jiného uživatele
Scénář nastává, pokud si uživatel (přihlášený či nepřihlášený) chce zobrazit veřejná videa a informace o daném uživateli. Tento scénář má velké množství alternativní scénářů - vždy, když se na stránce vyskytuje přezdívka uživatele, tato přezdívka vede na jeho uživatelský profil.
2.2.6
Nastavení následování jiného uživatele
Hlavní scénář nastává, když přihlášený uživatel chce přihlásit/zrušit následování jiného uživatele z pohledu při přehrávání veřejného videa daného uživatele. Alternativní scénář nastává, když uživatel chce přihlásit/zrušit následování jiného uživatele z uživatelského profilu daného uživatele.
2.2.7
Zobrazení novinek sledovaných uživatelů
Scénář nastává, když přihlášený uživatel chce přejít do Portálové sekce aplikace.
2.2.8
Přehrání svého videa
Scénář nastává, když si přihlášený uživatel vybere ve svých videích jakékoliv své video a chce si jej přehrát.
2.2.9
Změna uveřejnění videa
Scénář nastává, když si přihlášený uživatel vybere ve svých videích jakékoliv své video a chce změnit jeho stav uveřejnění. 14
2.3. Návrhy grafického uživatelského rozhraní
Obrázek 2.3: Menu ve Veřejné sekci.
Obrázek 2.4: Menu v sekci Portál slouží i jako notifikační lišta nových událostí - např. pro informování uživatele o dostupnosti nového videa k publikování.
2.3
Návrhy grafického uživatelského rozhraní
Grafické uživatelské rozhraní (dále jen GUI) usnadňuje uživatelům ovládání aplikací pomocí grafických prvků (tlačítka, okna, posuvníky apod.) pro intuitivnější interakci s aplikací. Pomocí níže uvedených návrhů GUI jsem mohl diskutovat s uživateli na funkcionalitou a lépe tak pochopit jejich požadavky na aplikaci. Aplikaci a její GUI jsem v této práci seskupil podle funkcionality na dvě hlavní části - veřejnou a portálovou sekci. Veřejná sekce je viditelná i bez přihlášení a slouží např. k přihlášení, zaregistrování, obnovení zapomenutého hesla apod. Portálová sekce poskytuje služby sloužící pouze pro přihlášené uživatele - např. zobrazování novinek sledovaných osob, změnu hesla, seznamy sledovaných osob apod. Každá sekce obsahuje vlastní položky v navigačním menu, které je přítomné na každé stránce. Aby uživatelé mohli snadno přecházet mezi sekcemi, v menu je vždy po pravé straně menu umístěn odkaz na přechod do druhé sekce, viz obrázky 2.3 a 2.4.
2.3.1
Hlavní strana
Hlavní strana by měla obsahovat přihlašovací formulář, základní informace o projektu a jak se zaregistrovat (pro potencionální zájemce o projekt) a 15
2. Analýza a návrh
Obrázek 2.5: Hlavní strana, nepřihlášený uživatel
seznam nejnovějších veřejných videí. Na této stránce je důležitým elementem tlačitko Zaregistrovat, které poutá uživatelovu pozornost svým umístěním, barvou a velikostí. Pokud uživatel nemá provázaný žádný zdroj dat pro identifikaci videí, toto tlačítko se změní na Provázat zdroj dat - viz obrázky 2.5 a 2.6. V případě, kdy je uživatel přihlášen a má provázaný zdroj dat se tlačítko změní na Přejít na novinky. Tento element by měl pomoci novému uživateli seznámit se s portálem.
2.3.2
Pohled na video
2.3.2.1
Pohled na veřejné video
Tento pohled nastává pokud si přihlášený nebo nepřihlášený uživatel chce přehrát veřejně publikované video. Z tohoto pohledu si může uživatel přehrát video, stáhnout do svého počítače, sdílet ho na jiné sociální sítě či zobrazit veřejný profil majitele videa, viz obrázek 2.7. Přihlášený uživatel může navíc přidat komentář k videu či sledovat/již nesledovat majitele videa, viz obrázek 2.8. 16
2.3. Návrhy grafického uživatelského rozhraní
Obrázek 2.6: Hlavní strana, přihlášený uživatel
2.3.2.2
Pohled na osobní video uživatele
Pohled pokrývá všechny funkce výše zmíněného pohledu detailu videa pro přihlášeného uživatele. Tento pohled slouží uživateli k postupnému prohlížení svých videí a jejich snadné úpravě (viz obrázek 2.9).
2.3.3
Profil uživatele
Každý uživatel na sociální síti má veřejný vlastní profil, dostupný i pro nepřihlášené uživatele. Tento profil obsahuje základní informace o uživateli - kteří uživatelé ho sledují a seznam veřejně publikovaných videí uživatele, viz obrázek 2.10.
2.3.4
Novinky
Tento pohled (na obrázku 2.11) se zobrazí při přejití přihlášeného uživatele do Portálové sekce. Obsahuje příspěvky vytvořené sledovanými uživateli, odkaz na sledované uživatele a formulář pro vyhledání dalších uživatelů, viz obrázek 2.11. 17
2. Analýza a návrh
Obrázek 2.7: Detail videa, nepřihlášený uživatel
2.3.5
Moje videa
Tento pohled (na obrázku 2.12) slouží pro přihlášeného uživatele, aby si mohl snadno prohlížet a listovat ve svých videí. Videa jsou v seznamu řazeny chronologicky, pro daný den jsou videa seskupeny dle hodin zachycení videa.
2.3.6
Vyhledávání uživatelů
Aby uživatelé mohli rozšiřovat svoje seznamy sledovaných uživatelů, musí služba obsahovat snadné vyhledávání v uživatelích. Návrh tohoto rozhraní je zobrazen na 2.13.
18
2.3. Návrhy grafického uživatelského rozhraní
Obrázek 2.8: Detail videa, přihlášený uživatel
19
2. Analýza a návrh
Obrázek 2.9: Detail osobního videa přihlášeného uživatele. Uživatel zde má k dispozici ovládací prvky pro snadný přechod mezi svými videi, publikaci či editaci videa.
20
2.3. Návrhy grafického uživatelského rozhraní
Obrázek 2.10: Profil uživatele pro přihlášeného uživatele. U tohoto pohledu nepřihlášený uživatel nemůže následovat/již nesledovat uživatele daného profilu.
Obrázek 2.11: Novinky pro přihlášeného uživatele.
21
2. Analýza a návrh
Obrázek 2.12: Pohled videa přihlášeného uživatele. Zvýraznění okolo jednotlivého videa vyjadřuje nové, ještě nepřehrané video uživatelem. Zvýrazněné dny v kalendáři vyjadřují, že pro daný den existují videa uživatele.
Obrázek 2.13: Pohled vyhledávání v uživatelích pro přihlášeného uživatele. Odkazy na jednotlivé uživatele vedou na jejich veřejné uživatelské profily.
22
2.4. Mobilní přístup
2.4
Mobilní přístup
Díky tomu, že uživatelé z cílové skupiny budou často v prostředí bez přístupu ke stolním zařízením, lze proto očekávat, že uživatelé budou mít zájem přistupovat na tuto síť z mobilních zařízení. Mobilní zařízení nedisponují takovou plochou obrazovky jako stolní počítače a je třeba změnit strukturu grafického rozhraní. Většina těchto zařízení je dotykových, proto je nutné upravit velikost prvků grafického rozhraní (např. tlačítka, odkazy), aby je uživatelé mohli pohodlně ovládat prsty. Uživatelé z těchto zařízení také často přistupují přes internetová připojení mobilní operátorů, která dosahují v našich podmínkách mnohem nižších rychlostí a bývají limitována počtem přenesených dat. Z těchto důvodů je třeba při přístupu z mobilních zařízení snížit množství přenesených dat a provést výše uvedené úpravy prvků webové stránky pro lepší uživatelský zážitek. Vylepšit uživatelský zážitek na mobilním zařízení lze pomocí: • vytvoření nativní mobilní aplikace - Nativní systémové aplikace obsahují většinu logiky a dat na straně zařízení (nemusejí se při každém spuštění stahovat styly a statické prvky) a díky tomu bývají mnohem rychlejší. Navíc mají přístup k API operačního systému a mohou využívat rozšířené funkce operačního systému, např. push notifikace[41]. Bohužel, trh mobilních zařízení se rychle vyvíjejí a je velmi nejednotný. Pokrýt všechny platformy nativními aplikacemi je velmi náročné a nákladné, navíc je třeba i vytvořit API pro aplikace. Další nevýhodou je složitější změna této aplikace, uživatel si na svém zařízení musí aplikaci aktualizovat manuálně. • vytvoření mobilní verzi webové stránky - Vytvoření mobilní verze webové stránky bývá nejčastějším řešením jak umožnit uživatelům přístup na webovou stránku z mobilních zařízeních. Tato verze bývá přístupná z jiné URL (často se jedná o subdoménu m.<doména>). Výhodou tohoto řešení je snadná správa dat, které se mají do mobilního zařízení odeslat (např. neposílat zbytečný JavaScript kód, který zařízení neumí provést apod.). Zásadní nevýhodou je nutnost vyvíjet a udržovat dvě „stejné“ webové stránky zároveň. Dalším problémem, který se často vyskytuje, je neprovázanost mezi mobilní a stolní verzí - například pokud uživatel sdílí URL (např. článku, který ho zaujal) dalšímu uživateli, který si URL otevře na stolním zařízení, se zobrazí článek v mobilní verzi, namísto toho, aby byl přesměrován na stolní verzi. Výhodou všech řešeních založených na webových stránkách je okamžité uplatnění jakékoliv změny v aplikaci. 23
2. Analýza a návrh • adaptivním web designem - Pojem adaptivní web design (dále AWD) poprvé použil Aaron Gustafson[14] ve své stejnojmenné knize pro technologii tvorbu webové stránky, kdy existuje více rozložení stránky (tzv. „breakpoints“ pro různé druhy zařízení) a podle zařízení, které přistupuje na webovou stránku, se zobrazí nejbližší rozložení. Detekce verze pro zařízení se provádí na straně serveru, který vykresluje webovou stránku 4 . • responsivním web designem - Responsivní web design (dále RWD) je způsob využití kaskádových stylů na webové stránce[18], vedoucí k optimalizaci zobrazení dané webové stránky na každém zařízení viz. obrázek 2.14. Oproti adaptivnímu designu se neprovádí detekce verze podle prohlížeče na serveru, ale podle šířky okna prohlížeče se uplatní vhodný styl. Nutnou součástí responsivního designu je relativní velikost všech prvků 5 . Díky tomu může pokrýt webová stránka celou plochu obrazovky. Tato technologie spolu s AWD umožňuje vyvíjet pouze jednu stránku, řeší problémy s přesměrováním mezi mobilní a stolní verzí, a navíc se webová stránka může snadno přizpůsobit i dalším typům zařízení v budoucnu. Nevýhodou RWD je aktuální procentuální rozložení prohlížečů [29], protože prohlížeč Internet Explorer 8 a nižší nedokáže zobrazit moderní CSS3 styly a tento problém se musí řešit např. pomocí Javascript knihovnami či CSS pre-procesory.
• kombinace RWD a AWD - Díky kombinaci výhod RWD a AWD lze dosáhnou nejlepších výsledků, např. zobrazovat stránku na celou plochu obrazovky (vlastnost RWD), zobrazovat obrázky ve vhodném rozlišení pro dané zařízení (vlastnost spíše charakteristická pro AWD). Nejnovějším trendem je postupné začleňování AWD vlastností do RWD, proto některé zdroje a články ani neuvádí existenci AWD.
2.5
Jazykové mutace
Kvůli jazykové neomezenosti cílové skupiny je třeba, aby sociální síť byla k dispozici ve více jazykových mutacích. I kdyby cílová skupina byla omezena jazykem, sociální síť se vyplatí budovat od začátku s možností více 4
Tato detekce se většinou provádí podle HTTP hlavičky „User-Agent“, kterou odesílá prohlížeč při každém HTTP požadavku. 5 Velikost není zadávána v absolutních (px, cm, atd.), ale v relativních jednotkách (%,em, ex,...)
24
2.5. Jazykové mutace
Obrázek 2.14: Rozložení webové stránky v responsivním designu [28]
jazyků, protože v případě jejich úspěchu bude třeba rychle reagovat na rozvoj sítě do dalších zemí.
25
Kapitola
Implementace 3.1
Implementační nástroje
Tato kapitola je věnována představení, popisu a krátkému srovnání použitých technologií při implementaci práce.
3.1.1
Výběr nástrojů
3.1.1.1
Výběr back-end nástrojů
V podstatě jediným technickým omezením bylo, aby síť mohla fungovat na serveru se Unixovým operačním systémem CentOS 6.3, kvůli stávající infrastruktuře. Kvůli zkušenostem i z předmětů vyučovaných na naší fakultě jsem se proto rozhodl pro skriptovací jazyk PHP (ve verzi 5.4) provozovaný na webovém serveru Apache2, se kterým mám bezproblémové zkušenosti na tomto operačním systému a také proto, že tento jazyk je mi nejbližší svojí syntaxí založenou na jazyku C. Jazyk PHP (rekurzivní zkratka pro PHP: Hypertext Preprocessor)[25] patří mezi server-side skriptovací jazyky, kde se kód provede na straně serveru a klient obdrží již hotový výstup. Tento jazyk se vyznačuje snadnou přenositelností i na jiné platformy (např. na platformu Windows na webový server IIS), globálním rozšířením (díky tomu obrovskou komunitou) a snadným vývojem. Od verze 5.3 přináší i snadné využití jmenných prostorů, díky kterým se lze snadno separovat jednotlivé knihovny a definovat jejich uplatnění[23]. Jmenné prostory jsou v této práci hojně využity k separaci jednotlivých částí aplikace. 27
3
3. Implementace Framework Nette Pro jazyk PHP existuje obrovské množství frameworků. Mezi nejznámější patří Symfony2, Nette a Zend. Při výběru jsem čerpal ze znalostí ze srovnání vývoje v různých frameworcích na konferenci WebExpo Prague 2012[16]. Nakonec jsem si zvolil český framework Nette, který se vyznačuje snadným použitím, výborným zabezpečením a malými výpočetními nároky[7]. 3.1.1.2
Výběr front-end nástrojů
Sociální síť bude dle očekávání navštěvována z obvyklých počítačových webový prohlížečů (Google Chrome, Mozzila Firefox, Internet Explorer atd.), ale i z prohlížečů tabletů a mobilních telefonů. Proto bylo potřeba vybrat takové front-endové nástroje, které budou kompatibilní s co největším počtem těchto prohlížečů. LESS je pre-procesor pro CSS, který pomáhá při vývoji CSS stylů. Tento pre-procesor funguje na principu „zkompilování“ LESS kódu, ze kterého vygeneruje CSS3 kód. Protože specifikace W3C CSS3 není (v době psaní bakalářské práce) finální, některé prohlížeče implementují chování jinak. Díky automatickému zpracování LESS kódu pak kompilátor snadno kompenzuje tyto nedostatky prohlížečů a přináší nadstavbové funkce nad CSS – např. snadné ukládání proměnných, matematické operace, uživatelsky příjemnější syntaxe, podmínkové zpracování stylů a vnořování sekcí. Kompilátor existuje pro všechny známé platformy operačních systémů, nebo lze využít JavaScriptovou knihovnu less.js, která zkompiluje LESS kód na straně prohlížeče[10]. Také lze použít kompilátor napsaný v jazyce PHP. Za obrovskou výhodu považuji to, že již existující CSS kód je kompatibilní s LESS kódem, tudíž migrace stávajících stylů není problém. Příklad použití LESS pre-procesoru: .myGradient{ // Old versions of Internet Explorer background: -ms-linear-gradient(top, yellow, green); // Old versions of Opera background: -o-linear-gradient(top, yellow, green); // Google Chrome and Safari background: -webkit-linear-gradient(top, yellow, green); // Old versions of Mozzila Firefox background: -moz-linear-gradient(top, yellow, green); // Standard syntax 28
3.1. Implementační nástroje
Obrázek 3.1: Ukázka použití knihovny Twitter bootstrap
background: linear-gradient(top, yellow, green); } #myParent{ #myObject{ .myGradient(); } } Tento příklad prvku s identifikátorem myObject, který je potomkem prvku s identifikátorem myParent, přiřadí jako pozadí lineární přechod od žluté po zelenou barvu. jQuery je framework pro jazyk JavaScript, který pomáhá se snadnějším vývojem v tomto jazyce. Kód naprogramovaný v tomto jazyce slouží v našem případě pouze ke zlepšení uživatelského rozhraní. Tento framework dále umožňuje jednoduchou obsluhu animací, posílat AJAX požadavky a disponuje širokou paletou různých rozšířeních díky obrovské komunitě. Twitter bootstrap lze považovat za framework pro vytváření grafických rozhraní používajících HTML a CSS. Jedná se o soubor stylů a obrázků pro běžně používané prvky grafických rozhraní - např. pro navigaci, tlačítka, nadpisy apod. viz. obrázek 3.1. Bez použití jakýchkoliv stylů by prvky vypadaly v každém prohlížeči jinak, protože neexistuje jednotný vzhled. Díky tomuto odladěnému souboru lze zajistit stejné zobrazování daných prvků v různých prohlížečích sjednocením na příjemný jeden styl. Twitter bootstrap také přináší „mřížkový design“, kterým lze jednoduše pozicovat elementy na stránce[31]. Nezanedbatelnou výhodou tohoto frameworku je také, že je také napsaný v kódu LESS, který také používá tato práce.
Video přehrávač Dostupných webových přehrávačů na technologii Flash[4] s open-source licencí existuje nepřeberné množství, jejich kvalita ale bývá sporná. Navíc všechny tyto přehrávače vyžadují nainstalovaný doplněk Flash Player[2] a tím pádem nefungují na nepodporovaných platformách Flash 29
3. Implementace
Obrázek 3.2: Využití DOM pro přidání ovládacího prvku pro výběr kvality do oblasti videa. Playeru, viz tabulka 3.1. Aby byla videa přehratelná i na mobilních telefonech, rozhodl jsem se pro video přehrávač na specifikaci HTML5. Návrh specifikace HTML5 přináší tag
