Co sądzicie o mojej stronie.

0

Zrobiłem nową stronę http://www.liones11.biuro-max.com .(to już trzecia strona xD)
Tym razem wykonałem ją wykorzystując Polymer'a i Notepada++.
Jeszcze nie dodałem opisów do programów więc z góry przepraszam.
Także pracuje nad przyspieszeniem ładowania strony.
Zakładka "News" informuje o najnowszych newsach(czyta je z pliku .json).
Zakładka "Programs" pokazuje moje programy(jeden program napisany w javie, reszta w vb.net)
Zakładka "Screens" pokazuje screeny z programów.
Zakładka "Themes" pozwala na zmienienie koloru kart na razie działa tylko w zakładkach "Programs" i "Screens".
Zakładka "PGO" oznacza Password Generator Online czyli jak nazwa wskazuje jest to w pełni online generator haseł.
Pracuje także nad polską wersją strony(jako iż jestem patriotą).

user image

Co o niej myślicie???
Oceńcie od 0/10
Także napiszcie co myślicie o Google Material Design.
Linki
Material Design: http://www.google.com/design/[...]rial-design/introduction.html
Polymer: https://www.polymer-project.org/
Moja strona :http://www.liones11.biuro-max.com

0

Na razie na tej stronie za wiele nie ma. Choć layout ma potencjał, to jest on kompletnie niewykorzystany. Dodaj więcej zawartości, nawet takiej, która opiera się na "lorem ipsum". Zapełnij przestrzeń wokół tej jednej, smutnej, kolumny. Włączaj zwijanie menu już w momencie rozpoczęcia przewijania zawartości, a nie przy "dobiciu do dna". Nie ocenię, bo jest za mało zawartości, która pokazałaby, na co ten layoucik stać.

0

Plus:

  • ładne kolory

Minusy:

  • brak treści
  • stałej wysokości bloki tekstu
  • brak podstawowej funkcjonalności strony: about (o stronie), start (strona startowa, wywoływana przez klik na logo)
  • podwójny scrollbar
3

0

Generalnie to jest tym tutorialem (http://polymer-tut.appspot.com/) przepisanym słówko w słówko, zbyt wiele Twojej inwencji tam nie ma, więc jak dla mnie 0/10.
Poza tym w tym generatorze hasełek masz narzucony dziwnie krótki limit, malutko opcji i literówkę (lenght).

0

Strona chodzi lekko i wygląda estetycznie - tyle że patrząc w kod źródłowy wydaje mi się, że to zasługa raczej Polymera, a nie twojego wykonania - bo kod jest fatalny.

  • pełno dołączanych plików, co może wpłynąć negatywnie na transfer (jeśli za każdym zapytaniem będzie leciało kolejne zapytanie do serwera):

    <link href="components\paper-shadow\paper-shadow.html" rel="import">
    <link href="components/paper-dropdown/paper-dropdown.html" rel="import">
    <link href="components/core-collapse/core-collapse.html" rel="import">
    <link href="components/core-menu/core-menu.html" rel="import">
    <link href="components/paper-item/paper-item.html" rel="import">
    <link href="components/core-icons/core-icons.html" rel="import">
    <link href="components/paper-icon-button/paper-icon-button.html" rel="import">

    tutaj o tym piszą więcej, co z tym można zrobić w temacie Polymera https://www.polymer-project.org/resources/faq.html
    "I see a bunch of XHRs making network requests. What gives?" etc.

  • styl i skrypty w pliku HTML, niezminimalizowane (no, chyba, że to wersja developerska, wtedy zarówno to, jak i dołączanie kilkunastu plików jest wybaczone. Ale na produkcji jednak się nie powinno tak robić).

 document.getElementById("con1").innerHTML = '<paper-input-decorator label="input lenght of password" error="maximum characters exceeded"><input id="i3" is="core-input" maxlength="2"><paper-char-counter class="counter" showCounter="false" target="i3"></paper-char-counter></paper-input-decorator><post-card-img><h2>Your password:</h2><h1>'+gen+'</h1></post-card-img><div id="foo"><paper-fab class="green" icon="refresh" onclick="newPass();" title="refresh"></paper-fab></div>';

jak dla mnie używanie biblioteki do komponentów HTML (mówię o Polymerze), ale jednoczesne manipulacje elementami na stronie poprzez wrzucanie stringa do innerHTML to trochę jakby mając łyżkę jeść zupę ręką. To są haki, a nie programowanie. I w ogóle ten kod JavaScript jest bardzo, bardzo zły, pisany chyba na kolanie:

  function screensLoad()
{
    document.getElementById("con1").innerHTML = '<post-card-img style="width:850px;height:265px;'+'background:'+theme+'"><img src="img/screen1.png" alt="scn3" ></img></post-card-img><post-card-img style="width:850px;height:265px;'+'background:'+theme+'"><img src="img/screen2.png" alt="scn3"></img></post-card-img><post-card-img style="width:850px;height:265px;'+'background:'+theme+'"><img src="img/screen3.png" alt="scn3"></img></post-card-img><post-card-img style="width:800px;height:650px;'+'background:'+theme+'"><img src="img/screen4.png" alt="scn3"></img></post-card-img>';
}
function screensLoad2()
{
    document.getElementById("con1").innerHTML = '<post-card-img style="width:555px;height:445px;'+'background:'+theme+'"><img src="img/screen1e.png" alt="scn3" ></img></post-card-img><post-card-img style="width:555px;height:445px;'+'background:'+theme+'"><img src="img/screen2e.png" alt="scn3"></img></post-card-img><post-card-img style="width:555px;height:445px;'+'background:'+theme+'"><img src="img/screen3e.png" alt="scn3"></img></post-card-img>';
}
function screensLoad3()
{
    document.getElementById("con1").innerHTML = '<post-card-img style="width:483px;height:445px;'+'background:'+theme+'"><img src="img/screenr1.png" alt="scn3" ></img></post-card-img><post-card-img style="width:483px;height:445px;'+'background:'+theme+'"><img src="img/screenr2.png" alt="scn3"></img></post-card-img><post-card-img style="width:483px;height:445px;'+'background:'+theme+'"><img src="img/screenr3.png" alt="scn3"></img></post-card-img>';
}
function screensLoad4()
{
    document.getElementById("con1").innerHTML = '<post-card-img style="width:668px;height:561px;'+'background:'+theme+'"><img src="img/screen1rp.png" alt="scn3" ></img></post-card-img><post-card-img style="width:668px;height:561px;'+'background:'+theme+'"><img src="img/screen2rp.png" alt="scn3"></img></post-card-img><post-card-img style="width:668px;height:561px;'+'background:'+theme+'"><img src="img/screen3rp.png" alt="scn3"></img></post-card-img>';
}

ile czasu programujesz już? Słyszałeś o czymś takim jak struktury danych w JavaScript? (Mam na myśli tablice i obiekty). Możesz zrobić coś takiego mniej więcej:

var screens = [
   {width: 483, height: 445, img: "img/screenr1.png"},
   {width: 668, height: 561, img: "img/screenr1p.png"},
];
....
screensLoad(screens[0]);
....
screensLoad(screens[1]); // wywolujemy funkcje screensLoad z argumentem screen[1]
...
function screensLoad(screen) {
   .... 
   // screen.width --> szerokosc
   // screen.img ----> adres
   // etc.

}
etc.

też nie widziałem, żebyś stosował w jakimkolwiek miejscu argumenty w funkcjach, zamiast tego robisz 5 funkcji o nazwach cosTam1, cosTam2, cosTam3 :|

<paper-toast id="toast3" class="capsule" text="Generated" style="padding-right: 30px;"></paper-toast>

robisz inline style, co też jest złe. Przecież padding-right można przenieść do stylów.

EDIT: zresztą w ładowaniu ekranów pewnie też niepotrzebne są inline styles, bo przecież możesz zapisać to w CSS ,np:

#screen-1 {
 width:668px;
 height:561px; 
}

poza tym działanie:

  • brak jest jakiegoś systemu urli, choćby wirtualnego, za pomocą #cos-tam, #cos-tam-innego, przez co nie będzie się dało w żaden sposób wysłać komuś linka do podstrony. Google: how make javascript router, albo how make routing in polymer, polymer router, czy coś podobnego.

No i jeszcze bonus:

input lenght of passwor

literówki...

0

Ulepszyłem już skrypty.
Teraz są bardziej zautomatyzowane.
Wielkie dzięki dla LukeJL.
YAY!!!

0

Wg mnie strona bardziej nadaje się na orientację portrait niż landspace. Elementy bym rozmieścił obok siebie, żeby kolejno się układały i zapełniały przestrzeń. Belka nad menu chowa się dopiero po zjechaniu do dna.
Ogólnie ok. W dobrą stronę idziesz.

0

Ja ci dałem 6/10 ze względu na grafikę, a wady ma takie, że jest na niej mało treści i strona jest wykonana statycznie (nie ma w niej kody PHP lub innych języków wykonywanych po stronie serwera)

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0