Dizajn

https://xd.adobe.com/view/789822ce-407a-45d6-65d2-dd93a3b6bca3-0ea9/

Dizajn FUTBALNET

Desktop: https://xd.adobe.com/view/83370fff-745f-4461-ae6a-a869bdc9f884-d664/

Mobil: https://xd.adobe.com/view/8c5c6ec1-c485-4d11-beed-9d2da9b90467-d90f/

Záväzné dizajnové komponenty: https://xd.adobe.com/view/2542df01-e4d6-4741-ba3f-741593a711cf-7011/

Assets

assets.zip

Pozície reklám, niektorých prvkov a podobne bude potrebné komunikovať so zákazníkom. Dizajn berte skôr ako šablónu s prvkami, ktoré sa použijú, než ako finálny layout.

Poznámky

• Podrubrika (napr. liga majstrov) bude mať hlavičku ako futbalnet

Otázky na call s M. Cholevom:

1. Homepage - titulné články - ktorý dizajn?
   • jeden veľký článok, súvisiaci obsah zatiaľ nezobrazovať
2. Sidebar Dnes / Týždeň + Sidebar Najčítanejšie / Najnovšie - ktorá verzia?
   • verzia Dnes / Týždeň, list s číslami
3. Hlavička stránky - Regióny - budú to rubriky Západ, Stred, Východ? budú rubriky Bratislava, Levice...? Ako budú vyzerať detaily?
   • zatiaľ regióny v menu úplne vynecháme
4. Homepage - sekcia Aktuálna téma
   • ako posledný blok sekcií sa zobrazí sekcia "Aktuálna téma", jej 4 podsekcie a 5 článkov (články zaradené do sekcie, podľa articleFilter nastaveného na sekcii "Aktuálna téma")
5. Dizajn detailu článku bežný / premiový - ktorá verzia? 6+7/27 a 8+9/27
   • bežný: 6/27
   • prémiový: 8/27
   • šablóna prémiového obsahu sa bude vyberať na detaile článku
6. Detail článku "Ostatné športy" - breadcrumby / posledná sekcia / tag ? - je to ten istý tag ktorý je v zozname článkov?
   • hlavná sekcia do ktorej je zaradený článok, rovnako aj v zoznamoch článkov
7. Podrubrika ako "Liga majstrov" - hlavička rovnaká ako na detaile futbalnet súťaže?
   • áno
8. Stránka "OH 2020" - stránka tagu?
   • sekcia s nastaveným pages layoutom "tema"
9. Dohodnúť sa odkiaľ, ktoré dáta - prejdeme podľa dizajnov
   • tmavý pás video článkov
     • zoznam vyhovujúci filtrom: doctype="video"
     • v detailoch sekcií sa k filtru pridá sectionid
   • zoznamy článkov ikona video/photo podľa system smarttagu

Analýza nezahŕňa

1. komentáre (detail článku, vizualizácia v zoznamoch, sidebar "Blogy a komentáre")
2. nasadenie konkrétnych reklám (na stránke budú tmavými blokmi vyhradené miesta pre reklamy, avšak samotná reklama tam zatiaľ nebude)
3. newsletter "Súhrn Sportnet.sme na email" blok
4. Kúpiť predplatné bude zatiaľ link nikam

Analýza obsahovej časti [160h]

• z toho:
  • hodiny na obsahovej časti portálu: 96h
  • hodiny na obsahovej časti portálu sekcie futbalnet: 24h
  • CRM: rozšírenie bia: 4h
  • CMS: šablóna článku: 8h
  • CMS: listingy: 20h
  • CMS: najčítanejšie za posledných X hodín: 8h

Poznámky:

• nový web postavený na službách sportnetu
• custom implementácia csm/pages.public využívajúca pages, domains, cms APIs
• práce potrebné na vytvorenie 1. verzie obsahovej (spravodajskej) časti portálu
• obsahuje aj úpravy na platforme, ktoré sú potrebné pre vytvorenie portálu
• štruktúrované sú podľa projektu, na ktorom treba vykonať práce a následne jednotlivé úlohy na danom projekte
• keďže nie je jasné ako bude vyriešené prihlásenie, bude zatiaľ použité sportnet prihlásenie, ktoré už máme pripravené
• "seckia" = "rubrika"
• odhady zahŕňajú aj responzívnu verziu

csm/sportnet.sme.sk:

Hlavička: [16h]

• z pohľadu pages je to nastavená "jednoduchá hlavička", avšak na sportnet portály bude custom implementácia výzoru tejto hlavičky podľa dizajnu
• Riadok 1:
  • nerobíme zatiaľ
• Riadok 2:
  • logo (+ logoLinkUrl)
  • sekcie:
    • sekciu regióny preskočíme
    • desktop:
      • iba 1. úroveň, jednoduché linky
      • zobraziť prvé 4, ostatné za dropdownom viac, ak je viac ako 4
    • tablet:
      • plávajúce menu, rovnako jednoduché linky, animovat zmenu ikony menu na X
  • zoznam partnerov:
    • desktop: obrázok, link
    • tablet: nový riadok
  • vyhľadávanie
    • po kliku sa vytvorí nový riadok
    • po kliku na lupu / stlačení enter ideme na stránku vyhľadávania
    • výsledky vyhľadávania zobrazujeme až na stránke vyhľadávania
  • fixná časť po scrolle
  • progress bar pri čítaní článku

Pätička [4h]

• z pohľadu pages je to nastavená "jednoduchá pätička", avšak na sportnet portály bude custom implementácia výzoru tejto pätičky podľa dizajnu
• Súčasti:
  • logo (+ logoLinkUrl)
  • sekcie (center, wrap na mobile)
  • sociálne siete
  • text

NOT_FOUND podstránka [4h]

• nadpis "Ľutujeme, stránka sa nenašla"
• podnadpis "Stránka, ktorú hľadáte, nie je k dispozícii, alebo bola presunutá. Skontrolujte prosím zadanú url, alebo použite vyhľadávanie vpravo hore."
• sidebar Dnes/Týždeň
• zoznam článkov "Najnovšie správy"

Homepage [32h]

• sidebar Dnes/Týždeň [2h]
  • najčítanejšie články za dnes / za týždeň
• veľký titulný článok [2h]
  • načítaný a zobrazený listing na fix podľa listingId
  • na teraz tento blok obsahuje len 1 hlavný článok (súvisiaci obsah vynechávame)
• "Aktuálne témy" [2h]
  • 4 podksecie sekcie "Aktuálne témy"
  • celé názvy sekcií
• titulný zoznam článkov [4h]
  • načítaný a zobrazený listing na fix podľa listingId
  • zoznam článkov
    • fotka, sekcia, dátum, typ(podľa system smarttagu), názov
    • prémiový obsah, ikona doctype=video, ikona typ obsahu(podľa system smarttagu začínajúceho znakom "_")
• video pás [4h]
  • zoznam vyhovujúci filtrom: doctype="video"
  • v detailoch sekcií sa k filtru pridá sectionid
  • na mobile horizontalny scroll cez react slick
• sidebar Futbalnet [2h]
  • logo na fix (link na sekciu futbalnet)
  • články zo sekcie futbalnet
  • linky súťaže, výsledky
• bloky sekcií [12h]
  • prvé 4 podsekcie sekcie pre hlavnú stránku
  • na fix blok sekcie Aktuálna téma (zobraziť len prvé 4 podsekcie)
  • blok seckie:
    • ikona
    • názov
    • zoznam podsekcií
      • zobrazenie toľko koľko sa zmestí
      • ak sa nezmestia skryje ich za dropdown za tlačidlom "3 bodky"
      • na mobile sa tlačilo zmení na "rubriky"
    • zoznam 5 článkov
      • články vyhovujúce sectionArticleFilter (nastavenie článkov sekcie v administrácii)
    • možnosť vložiť sidebar
    • možnosť obraziť len menší počet podsekcií
• "Najnovšie správy" [4h]
  • zoznam najnovších článkov
  • logika "Načítať ďalšie články"

Detail sekcie [8h]

• blok sekcie (rovnaký ako na homepage)
• obsah sekcie
• zoznam video článkov (doctype=video, secionid)
• reklamy
• zoznam článkov v sekcii + stránkovanie (predchádzajúce, nasledujúce, offset 5)

Detail sekcie témy [8h]

• detail seckie, kde je nastavený layout "tema"
• tagy: získame z sectionArticleFilter sekcie
• názov
• perex
• obsah
• sidebar Dnes/Týždeň
• zoznam článkov v sekcii + stránkovanie (predchádzajúce, nasledujúce)
• blok Aktuálna téma (rovnaký ako na homepage)

Detail Podsekcie [2h]

• rovnako ako detail sekcie len iná hlavička sekcie

Stránka vyhľadávania [4h]

• načítanie článkov podľa hľadaného výrazu
• výraz v url ?search=
• nadpis, zoznam + stránkovanie (predchádzajúce, nasledujúce), sidebar

Detail článku [16h]

• dizajn: 4,5,6,8/27
• 1 breadcrumb
• nadpis
• titulný obrázok
• tag Prémiový obsah, meno autora, dátum aktualizácie
• widgety
  • override:
    • fotka
    • zoznam článkov ("Súvisiaci článok" je nadpis zoznamu)
    • fotogaléria
• zdieľanie
  • desktop: plávajúce ikony
  • tablet: tlačidlá vedľa dátumu aktualizácie
  • na mobile: tlačidlá pod dátumom aktualizácie
  • facebook, twitter, kopírovať link
  • na mobile sa miesto kopírovať link použije native share api na zdieľanie ak je dostupné
• sidebar Dnes/Týždeň
• pozícia pre reklamu
• tagy (zobrazíme zatiaľ len smarttagy článku - neklikateľné na prvú verziu)
• author (fotka, name, bio, socialne siete) (sportnet api organizationPPOUser) ak má autor id inak nezobrazovať
• diskusia (v tejto verzii len blok s nadpisom, bez komentárov)
• súvisiace články
• blok sekcie - 2. sekcia v poradí od rootu v ceste sekcie, do ktorej je zaradený článok
• zohľadniť na článku nastavený iný layout (teraz budeme mať len default a "Prémiový obsah")
  • layout "Prémiový obsah":
    • väčší obrázok
    • nadpis v obrázku
    • bredcrumb v obrázku
    • žiadny sidebar, vystredený obsah
• odosielať po pár sekundách req na čitateľnosť (nový endpoint)

Blok prémiový obsah v obsahu článku [2h]

• CMS obsah pre futbalnet
• bude existovať sekcia "Futbalnet" (podsekcia sekcie "Futbal"), nachádza sa na url "/futbalnet"
• dizajn mobile: 1/27, 15/27
• dizajn desktop: 1/27 - sekcia futbalnet, 4/28 PPO, 8/28 PPO klubu, 11/27 - súťaž podľa smarttagov, 24/27 - zápas podľa smarttagov

Futbalnet/Podsekcia Futbalnet (tab prehľad) [6h]

• landing zoznam článkov [2h]
  • na fix načítaný a zobrazený zoznam článkov podľa listingu futbalnet
• tmavý zoznam video článkov [2h]
  • zoznam vyhovujúci filtrom: doctype="video"
  • filter sectionid
  • na mobile horizontalny scroll cez react slick
• "Najnovšie správy" [2h]
  • zoznam článkov zaradených do sekcie (sectionArticleFilter)
  • načítanie a zobrazenie zoznamu článkov
  • logika "Načítať ďalšie články"

Futbalnet/Prehľad zápasu [2h]

• načítanie a zobrazenie zoznamu článkov
• filter sectionid=futbalnet, smarttagy sutaze
• články sportnet portálu

Futbalnet/Prehľad súťaž [4h]

• načítanie a zobrazenie zoznamu článkov
• filter sectionid=futbalnet, smarttagy sutaze
• články sportnet portálu
• pager "načítať viac"

Futbalnet/Prehľad Zväzu/Klubu [4h]

• načítanie a zobrazenie zoznamu článkov
• články danej PPO
• načítať články PPO - "pages:{ppo_id}:default"
• pager "načítať viac"

Futbalnet/Detail článku zväzu [8h]

• rovnaký ako detail bežného článku
• bez prémiového layoutu
• sidebar Dnes/Týždeň zo sportnet portálu
• hlavička zväzu
• súvisiace články zväzu
• bez bloku sekcie na konci článku

CoreII/crm.ui + CoreII/sportnet.api:

Rozšírenie bia používateľa [4h]

• "Zhrnutie" (summary) - text area
• Sociálne site
  • "Facebook" (facebook) - input na link
  • "Instagram" (instagram) - input na link
  • "LinkedIn" (linkedin) - input na link
  • "Twitter" (twitter) - input na link

csm/pages.ui + csm/pages.api + open-source/cms-connector + csm/cms.ui + csm/cms.api:

Definovanie article layoutu [8h]

• v nastaveniach pages sportnet.sme.sk budú uložené layouty dostupné layouty pre články
• layouty budeme posielať pomocou cms-connector do cms.ui
• v detaile článku bude možné vybrať layout pre článok (layout sa uloží na objekt článku)
• každý článok použije Default pokiaľ sa nenastaví inak
• administrácia na layouty článkov nebude existovať
• nastavenie layotu do nastavení sportnet.sme.sk
  • zatiaľ bude len 1 pre Prémiový obsah

csm/cms.api

Listingy [8h]

• admin CRUD endpointy pre listingy

Listing:
  type: object
  properties:
    _id:
      type: string
    listingId:
      type: string
    contentspace:
      type: string
    name:
      type: string
    articles:
      type: array
      items:
        type: string
    articleFilter:
      type: array
      items:
        type: object
        required:
          - type
        properties:
          type:
            type: string

• public endpoint na získanie článkov z listingu /public/{appId}:{appSpace}:{contentDivider}/listing/{listingId}/articles - getPublicListingArticles

csm/cms.ui

Správa listingov [12h]

• do admin cms.ui pribudne nová položka v navigačnom menu "Listingy"
• zoznam:
  • identifikátor, názov
  • vytvoriť nový
• detail:
  • názov, identifikátor
  • 1. tabuľka so zoznamom článkov, ktoré sú fixne nastavené pre listing (dôležité je poradie)
    • rovnaká tabuľka ako v zozname článkov
    • články viem preusporiadať
    • články viem odstrániť z listingu
    • zobrazovať počet zobrazení
  • filter na zoznam článkov
  • 2. tabuľka so zoznamom článkov vyhovujúcim zadanému filtru
    • rovnaká tabuľka ako v zozname článkov
    • články viem pridať medzi fixne nastavené články
    • zobrazovať počet zobrazení

csm/cms.api

Najčítajnejšie za posledných X hodín [8h]

• api na zaznamenávanie počtu zobrazení článku a dopytovanie sa podľa X hodín