Big Brother Hrvatska 2007

Kako smo radili web site

Ko je ovaj tip?

• Vanja Bertalan• web.burza (http://web.burza.hr)• Mi radimo web sajtove

• Zapravo puno planiramo, educiramo klijente, mislimo na korisnike, analiziramo

• Ali to je dugačko...• I komplicirano :)

Big Brother

• Globalni fenomen, zato i sasvim zanimljiv

• 4. sezona u HR• Nevjerojatna gledanost• Posjećenost - 2006

• 1.500.000 pageviews prvi dan• Prošlih godina nekako padali serveri• Mi ne bi tako...

njava phoenix sh00le tom

lekke pepa zeljka

Produkcijski tim

Planiranje

• Inventura sadržaja• Tko su posjetitelji?• Struktura• Funkcionalnost• Redakcija – frekvencija objave

Wireframes (a gdje su boje?)

KORISNIČKI DIO GLAVNI IZBORNIK

* Osobni podaci* Promijeni avatar* Omiljeni stanari* Newsletter

Informacije o omiljenim stanarima (prema korisnikovim afinitetima)

* Najnovije slike vezane za omiljene stanare* Video isječci* Vijesti

NEREGISTRIRANI korisnici ovdje vide login box i teaser za registraciju

LOGODovoljno vizualno naglašen da komunicira BigBrother brand

ANKETATjedno ili dnevno pitanje

SPONZORI - Lista malih logotipa sponzora, vidljiva na svakoj stranici

FOTO GALERIJANajnovije izdvojene slike

VIJESTIJedna top vijesti (naslov, link)

FOOTER - Ponovljeni glavni izbornik, linkovi na kontakt, pravne informacije, impressum, copyright

Trenutno stanje nagrade

1.543.234,54 kn PRETRAŽIVANJE >>DAN 43

U K

UĆ

I

Stanar A

IZB

AČ

EN

I

Stanar B Stanar C Stanar D Stanar E Stanar E

Avatar

NOMINACIJE - prikaz nominacija za taj tjedan

STANAR Abroj telefona

STANAR Bbroj telefona

STANAR Cbroj telefona

KOMENTARI KORISNIKA

Kada se desi nova akcija bilo kojeg registriranog korisnika (komentar, dodavanje nekog stanara u omiljene i sl.) - ta informacija se automatski prikazuje u ovom boxu, bez da korisnik refresha stranicu

Slika sadržaja

Avatar korisnika

16:47, pero23Super je slika, ova Sanja je totalno pukla!!!

Slika sadržaja

Avatar korisnika

16:45, angieKoji ludi video. Ne vjerujem da frajer kopa nos hahahahah

Slika sadržaja

Avatar korisnika

16:44, pero23Super je slika, ova Sanja je totalno pukla!!!

Slika sadržaja

Avatar korisnika

16:44, angieKoji ludi video. Ne vjerujem da frajer kopa nos hahahahah

VIDEO DANAMože se playati direktno na naslovnici

PLAY STOP Link na ostale video zapise >

Video Live Stream

DNEVNIK događanja* PET 00:30 – Ratko se ušuljao Mirki u krevet

* ČET 22:00 – Ivica i Marica se posvađali na mrtvo ime

* ČET 14:45 – U dvorištu pronađen jež

NAGRADNA IGRATeaser

SMS PODRŠKETeaser

Link na ostale foto galerije >

SEKUNDARNI IZBORNIK: OSTALI STANARI

Brza pitanja

* Rođen(a):

* Voli:

* Ne voli:

* Životna filozofija

* Zaštio se prijavio(la)

* itd...

IME STANARA

Video clipovi s castinga

HEADER

KORISNIČKI DIO

GLAVNI IZBORNIK

KOMENTARI KORISNIKA

SPONZORI

FOOTER

RECI ŠTO MISLIŠ !Napiši svoje mišljenje i podijeli ga sa svim korisnicima BigBrother sitea!

Lijepa velika slika (TM)

POVEZANI SADRŽAJI

SLIKE

Slika B Slika C

Slika E Slika n

Pogledaj cijelu fotogaleriju >>

VIDEO CLIPOVI

Video B Video C

Video E Video n

Pogledaj sve clipove >>

VIJESTI

27.10. 07:30

Bilo mu je loše pa je povraćao. Dva puta...

26.10. 23:15

Na ludom partyju bio je glavna faca, pokazao kako se pije demižon vina na eks i dubi na glavi...

Pročitaj sve vijesti >>

Clip A Clip B

Naslovnica Odabrani stanar

Dizajn

• Koji je hex kod za zlatnu boju?• A kada stižu službeni vizuali za

show?

Dizajn

Dizajn

Frontend - Standardi

• To ionako, zar ne?• Standard testing

• 9 browsera / 3 platforme• Javascript on/off• Flash on/off

• Sva funkcionalnost mora raditi u vanilla settinzima (no flash, no javascript)

• Detalji - god is in the details (devil too)

Capacity Planning

• Od kuda početi?• Statistike posjećenosti prošlih sezona

• Relativno malo podataka

• Analiza nekoliko većih siteova koje znamo• coolinarika.com, nacional.hr, ezadar.hr

• Omjer pageviews vs. hits• Server treba sve isporučiti, bez obzira što nas

u analizi posjećenosti zanimaju samo uniques

Capacity Planning

• Procjene (1.500.000 pageviews/day prošle godine)

• Hits per average hour• Hits per peak hour - ovo nas zanima• Dodaj 30%?

• Testiranje na lokalnim strojevima• Apache + PHP (Aplikacija)

• Lighttpd (Statički sadržaj)

• Nije sasvim relevantno• Umjetno generirani podaci

Hardverska arhitektura

• Što želimo vs. Što imamo• App server / DB servers / Static

servers• DB replication (MySQL)

• Master (insert/update/delete)• Slaves x2 (select)

Database ServerSlave 1

Application Server

Static Content Server

Database ServerMaster

Database ServerSlave n

· lighthttpd web server + memcached i deflate moduli

· velika brzina kod isporuke statičkog sadržaja

· serviranje slika, css datoteka, js datoteka

· zbog optimizacije na client strani, 2 hostnamea (static1, static2)

SELECT upitiINSERT/UPDATE/DELETE upiti

MySQL replikacija

· apache + php

· content management sustav, kreiranje svih stranica na web siteu

· poslovna logika (kreiranje korisnika, autorizacija, chat, stanari, itd...)

· obrada slika i multimedije + distribucija na static content server

Statični fajlovi se šalju na static server

Static Content Server

Statični fajlovi se šalju na static server

Aplikacija – Lego kockice

• core.web jezgra• moduli

• stanari• dnevnik

događanja• fotogalerije• videogalerije• stanje nagrade• tjedni zadaci

• nominacije• komentari• ankete• repozitorij (video, slike,

fajlovi)

• newsletter• korisnici

Aplikacija - Skalabilnost

• Prilagoditi za distribuiranu okolinu• Baza

• Posebni db objekti za read (slaves) i write operacije (master)

• Distribucija sadržaja na static servere• Aplikacija vodi računa o tome da su static

serveri up-to-date• Storage class (ssh2 pecl modul)• Queue class (resend content if static server

unavailable)

Aplikacija – Deploy procedura• Ovo je kul :)• Lokalni SVN server• Deploy modul na live serveru

• OneClick deploy (Veliki Gumb)• Produkcijski server se spaja na lokalni SVN

• Fix live config files• Create minified CSS & JS files• Push static content Static servers (rsync)

Aplikacija – Self Maintenance• PHP CLI + cron hacking• Check db servers

• Port 3306, mysql service up• Update config if needed

• Check static servers• SSH service• HTTP service• Update config if needed

Stress testing

• Na live serverima, prije launcha• 6 različitih mašina• 100 konkurentnih konekcija sa svake• Application server

• 55 requests/sec• Load 200

• Loše!

Optimizacija

• PEAR Cache_Lite• Puno time sensitive informacija, kako

pristupiti?• Vrlo kratak expiration period (60sec)• Djeluje neefikasno ali...• Relativno mali ukupni broj stranica,

velik broj zahtjeva• Velik broj cache hitova!

Stress Testing – Take Two

• Ista konfiguracija testa• Application server

• 250+ requests/sec• Load 30

• Okej (sva sreća, launch je sutra...)

Launch

• Očekivali najveći load na DB serverima• Krivo (max load 1.0 - peak razdoblja)

• Applications server Bottleneck• Ali nije strašno (load 5-8, max 30)

• 5min downtime (uh!)• Bug u lighttpd-u, gasi se sam od sebe• Instalacija nove verije on-the-fly

• Sve radi (smijemo sada spavati? :)

Brojke - Dan 1

• 30.000.000 hits• 2.900.000 pageviews• 300.000 visits• 10.000 registriranih korisnika

Timeline (15.05. – 15.09.)

Timeline (15.08. – 15.09.)

Shameless Plug

• projects.web• Taskovi• Time tracking• Analiza i reporti

• Dog Fooding• Od 01.01.2006.

• Closed Beta• Uskoro

• vanja@burza.hr• Javite se

Hvala!

Pitanja?