Suprem - Web - Bacau - 2013 Nationala

Informatii generale

  • Categorie: Web
  • Judetul: Bacau

Descriere

Scroll Up Premium, prescuratat Suprem este un template bazat pe tehnologia Parallax. Aceasta foloseste viteze diferite de miscare ale obiectelelor in timpul scroll-ului pentru a creea iluzia de suprapunere pe mai multe planuri a elementelor din pagina. Template-ul realizat de mine dispune de un meniu animat cu ajutorul caruia se poate comuta rapid intre slide-uri, o bara de derulare usor de particularizat, efecte de atenuarea/derularea laterala si multe spatii in care se pot pune imagini, videoclipuri, iframe-uri, etc. Este usor de adaptat oricarui tip de site care are la dispozitie destule imagini. Pentru a exemplifica functionalitatea acestei lucrari am realizat o pagina web care cuprinde bibliografia artistului Bob Marley.

Tehnologii

HTML5, CSS3, JQuery, JavaScript, Adobe Photoshop CS4

Cerinte sistem

Un browser modern(site-ul este optimizat si pentru versiuni mai vechi de IE, Firefox),100MB spatiu de stocare.

Realizatori

Imbrea Alexandru-Ionut

  • Scoala: Colegiul National ,Grigore Moisil", Onesti
  • Clasa: 9
  • Judet: Bacau

Screenshots



Frumos template-ul.

Cat despre script, “parallax-ul” nu este o tehnologie, este un efect.

Vad ca nu ai schimbat prea multe fata de script-ul original.

Cateva sugestii:
-> La inceput cand se incarca scriptul tot ce se vede este un text care numara pe un fundal alb, am stat ceva pana sa inteleg ca acela este loading-bar-ul. Adauga un procent (%) dupa text sa ne dam seama ca se incarca.

-> Dureaza mult prea mult sa se incarce, nu este nevoie de preload. Daca vrei sa faci ceva frumos poti sa folosesti lazy-loading, adica sa incarci imaginile in timp ce user-ul da scroll.

-> De multe ori nici nu se incarca, ramane blocat ori pe la inceput, ori pe la 98%. Am incercat sa testez pe tableta si niciodata nu am reusit sa fac sa se incarce complet pagina.

Vezi ca la Galaciuc lumea stie cu ce se mananca web developing-ul, asa ca mai bine te pregatesti din timp sa rezolvi bug-urile si sa raspunzi la intrebari despre ce anume ai facut tu in acest proiect.

@Cristy :

Multumesc atat pentru apreciere cat si pentru propuneri.

Am folosit script-ul lui Richard Shepherd luat de pe Github. Am precizat autorul intr-un comentariu pus la inceputul scriptului. Poate pana la concurs o sa incerc sa fac ceva al meu cu toate ca nu poate fi prea diferit deoarece principiul este acelasi. Oricum, sursa de concurs va arata altfel,mai compacta si mai bine comentata, pentru a putea fi inteleasa mai usor de oricine foloseste template-ul, nu doar de mine. Pe acel host am urcat ce am lucrat eu pana acum deoarece din screenshot-uri nu se vede prea bine.

Am sa incerc sa lamuresc putin ce se intampla cu acel text rosu pe fundal alb. Pagina facuta de mine are foarte multe imagini si este deranjant sa astepti sa se incarce ca apoi sa ,te poti plimba" prin pagina cursiv.Pentru a repara acesta problema am folosit un preloader( era o bara alba pe fundal negru si un procent deasupra). Am incercat sa ma joc putin cu aspectul acestui loader si i-am sters semnul pentru procent “%” si am inlocuit fundaul negru cu o imagine .gif animata care iti da impresia de asteptare (clipoceste). Totul era foarte bine cat am rulat pagina local dar cand am urcat-o pe acel host a aparut o problema cu imaginea deoarece se incarca spre final. La mine aceasta problema dispare odata ce pagina se incarca prima data (banuiesc ca imaginea ramane in cache), dar pentru cei care incarca pagina prima oara este cam neplacut. Asa ar trebui sa arate procesul de loading (http://img854.imageshack.us/img854/9774/nfyd.png). Sper sa rezolv aceasta problema cumva, sa fac imaginea accea sa se incarce prima sau sa schimb metoda de incarcare total. Multumesc si pentru propunerea cu lazy-loading.

Astept in continuare intrebari si propuneri. Cheers!