Moja strona www - uwagi i ocena

[spice 6]

Witam wszystkich.

Od pewnego czasu zacząłem uczyć się pisać strony www sam dla siebie. W szkole też miałem tworzenie stron jako że jestem na profilu "Technik informatyk" w sumie klasa maturalna więc w grudniu przedmioty zawodowe już się kończą, ale nauka i tak ograniczała się tylko do kilku znaczników w html'u i i zmiany koloru czcionki w css'ie ;p Więc sam postanowiłem kupić odpowiednią książkę do html'a 5 i css'a 3 jako że wolę uczyć się z książki niż z internetu (wiem że w internecie są na bieżąco aktualizowane dane) w każdym razie z internetu też korzystam

Od kilku tygodni codziennie piszę sobie jakąś stronę i grzebię przy innych żeby zobaczyć co jak działa.

 

Chciał bym was prosić o ocenę i wszelkie uwagi dotyczące mojego "projektu" który rozpocząłem. Na razie jest to tylko strona główna bez podstron i z oklepanym tematem, ale interesuje mnie tylko wasze zdanie co powinienem w kodzie poprawić, co zrobiłem źle, ocena designu strony i grafiki. Pytam się tutaj bo w otoczeniu nie mam nikogo z kim mógł bym na ten temat porozmawiać.

 

Uprzedzam że na razie jest to czysty html z css'em Krytyka mile widziana. To co tu widzicie wraz o obróbką grafiki zajeło coś około 3h z przerwami na herbatę. A jak już ogarnę w miarę html'a z css'em zamierzam kupić kolejną książkę z javascript'em/jquery a potem php.

 

https://drive.google.com/file/d/0B59m47C-8XFOc3E2RnNDNnl2QUU/view?usp=sharing

[Karister 843]

Ogólnie ok, ale moim zdaniem,  w niektórych miejscach nieco nietrafione użycie elementów HTML'a i problemy z CSS.

<article> to trochę tekstu o czymś. <p> to paragraf, akapit. Służą one do grupowania treści semantycznie, a nie tagów HTML'a. Żeby opakować razem kilka różnych rzeczy - obrazek, napisy i coś jeszcze - użyłbym <div>. Do tego są jeszcze <section> i <aside>. Ten ostatni zawiera zazwyczaj jakieś dodatkowe info, które może istnieć samodzielnie bez reszty treści. Zazwyczaj jest to zdjęcie z podpisem. Na przykład:

<div id="sport">
    <div id="boks">
        <article>
            <h1>Tomek Nowak zwyciężcą!</h1>
            <section>
                <header>Trudne przygotowania</header>
                <p>bla bla bla bla</p>
                <p>ble ble ble ble ble</p>
                <aside>
                    <img src="..." />
                    <p><span class="name">Tomek</span> to wielki sportowiec</p>
                <aside>
            </section>
            <section>
                <header>Wielki sukces</header>
                <p>bla bla bla bla</p>
                <p>ble ble ble ble ble</p>
            </section>
            <section>
                <header>Dalsze plany</header>
                <p>bla bla bla bla</p>
                <p>ble ble ble ble ble</p>
            </section>
        <article>
        <article>
            (...)
        </article>
    <div>
    <div id="formula1">
        (...)
    <div>
</div>

Z perspektywy pisania docelowo w języku backendowym, który HTML będzie dynamicznie generował, Twój konkretny przykład widzę tak:

• Twoje menu z Home, Projekty, Dodaj projekt, ... to wizualnie i funkcjonalnie również część headera - będzie wspólna dla całego serwisu. Zatem:

<header>
    <img id="hd" src="header2.png" alt="none-image"/>
    <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="index.html">Pojekty</a></li>
                <li><a href="index.html">Dodaj Projekt</a></li>
                <li><a href="index.html">Kontakt</a></li>
                <li><a href="index.html">O nas</a></li>
            </ul>
        </nav>
</header>

Ode mnie plus za użycie listy dla linków.

 

• Kilka uwag w związku z początkowymi wywodami co do sematycznego znaczenia tagów HTML5:

<p id="main">

nie pełni roli paragrafu. <p> to coś, jak akapit tekstu. Uzywasz go jako kontener na linki - do tego jest <div>

<article id="art1">
<article id="art2"> 

też nie pełną roli artykułu. Są kontenerami dla większej zawartości - znowu <div>.
 
Zgadzam się natomaist co do użycia ostatniego <aricle> i <p> na końcu strony. <header>, <footer>, <nav> też ok.

 

• Mam za to spore zastrzeżenia co do użycia position:relative.

Na siłę wysunąłeś <p> z tekstem "Dodając projekty na naszą stronę..." poza obszar <article>, mimo, że należy on do niego w strukturze HTML. Odstępy rób przy pomocy padding oraz margin. To samo tyczny się <article id="art1"> (który powinien być <div> wedle wcześniejszego). W ogóle nie stosuj position:relative, żeby poprzesuwać kontenery, artykuły, paragrafy, itp w lewo/prawo, góra/dół. Nie używaj też do odstępów <br/>. Nowa linia to nowa linia w tekście.
 
position: relative służy do tego, co zrobiłeś w przypadku obrazka blur.jpg oraz napisów "CAR design" i "twój designerski kącik". Inny przykłąd to może być umiejscowienie X do zamykania jakeigoś okienka w jego rogu. Przy czym cały trik robi się nieco inaczej. position:relative powinno być zdefiniowane dla kontenera - <article id="art2"> (<div> wedle wcześniejszych uwag). Natomaist to, co w środku (<h1> i <h2> w tym przypadku) powinny mieć position:absolute. Wtedy definiujesz położenie zawartości względem kontenera w taki sposób:

div.img-container {
    position: relative;
}
div.img-container h1 {
    position: absolute;
    top: 10px;
    left: 20px;
}
div.img-container h2 {
    position: absolute;
    top: 10px;
    right: 20px;
}

Edytowane 28 Listopada 2015 przez Karister

[spice 6]

Dzięki że pokazałeś mi aż tyle nie dociągnięć Teraz wiem mniej wiecej co robię źle i co poprawić. Całkowicie do głowy mi nie przyszło że "nav" można umieścić w "header" Co do tej pozycji relatywnej to używałem jej zawsze jak miałem problem z ustawieniem bloku za pomocą marginesów i padding'ów. Teraz muszę porządnie przysiąść do pozycjonowania za ich pomocą.

 

Wiem że jeszcze duuuużo praktyki przede mną a cieszę się że są też rzeczy które zrobiłem dobrze i że nie powiedziałeś czegoś typu "Tutaj wszystko jest źle i do góry nogami" Mam jeszcze praktycznie zawsze problem z samą nawigacją, a raczej jej wyśrodkowaniem, ale na końcu zawsze się udaje. Chyba muszę się wyuczyć jakiegoś sprawdzonego schematu.

 

Wiec zabieram się do ponownego napisania tej samej strony, ale biorąc do tego twoje uwagi

I co do dalszej nauki, proponujesz iść dalej w stronę wizualną i mini usprawnienia (js + jquery)? czy zacząć najpierw od jakiś początków php?

Może proponujesz jakąś książkę odnośnie php? Co do js idę w stronę tego samego autora co kasiążka od html'a+css, chodzi o tą pozycje. Podoba mi się że wszystko jest rozpisane w bardzo kolorystyczny sposób.

Czekam też na wypowiedzi innych, za pisanie stron wziąłem się na poważnie i przydadzą się wszelkie uwagi i komentarze

Edytowane 28 Listopada 2015 przez spice

[Karister 843]

I co do dalszej nauki, proponujesz iść dalej w stronę wizualną i mini usprawnienia (js + jquery)? czy zacząć najpierw od jakiś początków php?

Może proponujesz jakąś książkę odnośnie php?

 

To zależy, co chcesz robić. HTML + CSS + JS to taki standardowy zestaw do frontend developmentu. Stylowanie, kolrowanie, układanie, itp. Przy czym goły JavaScript raczej nie jest tutaj wybitnie przydatny. Bardziej służy do przeładowania fragmentu strony i zaktualizowania jakichś danych przez użytkownika. Czyli tak zwany AJAX. A ten nie może istnieć bez aplikacji webowej napisanej w PHP czy czymkolwiek innym. Do czystego frontendu prędzej jakieś biblioteki:

• jQuery do kolorowania i przesuwania guzików i divów
• jQuery UI do kalendarzy, suwaków, zakładek, rozijanego tekstu, itd
• Magnific Popup go galerii zdjęć i  filmików w popupach

 

Co do samego PHP - nigdy nie używałem. Ma tę zaletę, że jest w nim łatwo zacząć i szybko coś widać na ekranie. Ale trzeba dobrze dobierać materiały do nauki, bo PHP pozwala na robienie bałaganu i łatwo jest nabrać bardzo złych praktyk. A dużo materiałów w Internecie jest po prostu marnej jakości. Szukałbym jakichś blogów/tutoriali mających pozytywne komentarze, albo nowych książek, też mających dobre komentarze. Poza tym, istnieją frameworki ułatwiające pracę w oparciu o dobre praktyki. Do PHP popularne są Symfony i Zend, ale nie wiem o nich nic, poza tym, że istnieją.

 

Na koniec, pamiętaj, ze PHP (czy jakikolwiek inny język backendowy) raczej nie służy do robienia statycznej strony www o jakiejś tematyce. Robi się w nich dynamiczne serwisy www (aplikacje webowe), które zbierają jakieś informacje od użytkowników, przechowują je i przetwarzają zgodnie z aktualną potrzebą. Przykładem jest to forum. Żeby to działo trzeba sporo innych rzeczy poza PHP, CSS, HTML i JS:

• Bazy danych i serwera dla niej
• SQL
• Serwera dla aplikacji webowej
• Skomunikować wszystko razem

Jest trochę zabawy za pierwszym razem.

 

Taki prosty przykład od czego można zacząć:

• Baza danych zawiera informacje o koncertach - zespół, miasto i data
• Użytkownik podaje daty od do.
• Serwer aplikacji webowej odpytuje bazę o koncerty w zadanym okresie i wyświetla wyniki

Trochę bardziej skomplikowany:

• Użytkownik wchodzi na stronę
• Aplikacja sprawdza cookie z unikatowym id użytkownika. Jeśli go nie ma, tworzy nowe i wyświetla na jego podstawie listę zakupów z bazy danych dla obecnego użytkownika
• Każdy użytkownik może dodawać i usuwać przedmioty ze swojej listy zakupów

Drugi przykład można rozbudować o rejestrację użytkowników, bo ciasteczka da się kasować.

 

Na pewno sporo wygooglujesz wpisując "php crud tutorial".

[spice 6]

Mam w czym wybierać widzę Patrząc na to z tej strony bardziej chyba do gustu przypadł mi frontend, wolę zajmować się otoczką wizualną i "ficzerami" bo w typowym programowaniu nie czuję się za dobrze(póki co). A co do baz danych sql to wiem jak to działa (egzamin zawodowy za 2 miesiące) i podstawy jako tako znam ale mało praktykowałem ;p

 

W każdym razie najlepiej jest się orientować we wszystkim, ale dalej rozwijać się tylko w jakimś konkretnym kierunku w którym czuję się dobrze czy tak? Szczerze do pewnego momentu sam nie wiedziałem co mnie interesuję i co chcę robić ale chyba znalazłem swój cel

Idę kończyć książkę z css'a i biorę się za przepisywanie stronki

Edytowane 28 Listopada 2015 przez spice

[Sleeper82 16]

Jeżeli chodzi o stronę wizualną to też musisz jeszcze baaardzooo dużo pracować. Programowanie stron i projektowanie layoutów to dwie drogi, inny sposób nauki, inne książki itd. Jeżeli chodzi o layouty to śledź obowiązujące trendy w projektowaniu stron www, strony takie jak np. awwwards byś od samego początku miał wgląd w dobre wzorce i nie zamknął się w swoim świecie, nie zwracając uwagi na to jak świat się zmienia... Przyda się też wiedza z zakresu typografii - tu jest już nawet w Polsce sporo literatury na ten temat, przekonasz się jak ważny jest dobór kroju pisma i stopień, by był jak najbardziej czytelny na ekranie monitora, powinien umożliwiać odczytanie treści, a nie zwracać na siebie nadmiernej uwagi. Możesz wyszukiwać fonty, które dedykowane są do zastosowań webowych np. z google fonts. Zwrócić uwagę np. na literę „O” by była jak najbardziej zbliżona do koła = większa czytelność na ekranie monitora. Druga kwestia niemniej ważna to wyczucie koloru, zestawień kolorystycznych, które mogą pasować do siebie, uzupełniać się lub przeciwnie, w celu wywołania pożądanego efektu, kontrastować ze sobą np. czerwień - zieleń, błękit - żółcień, fiolet - pomarańcz. Trzecia to kompozycja, czyli układ elementów na płaszczyźnie, w tym przypadku na ekranie monitora, kontrastowanie tych elementów - wielkością, ilością, fakturą. Przyda to się do stworzenia hierarchii wszystkich elementów na stronie, co przyczynia się do zwiększenia czytelności, przejrzystości, wyeksponowania pożądanej treści. Można zacząć od takich książek jak: Punkt i linia a płaszczyzna Kandyńskiego, czy Sztuka i percepcja wzrokowa Arnheima. Generalnie takie książki być może otworzą Ci oczy na pewne sprawy. A przede wszystkim obserwacja, obserwacja i wyciąganie wniosków.

[spice 6]

Dobrze że są na forum tacy ludzie którzy potrafią pomóc i wytłumaczyć Wiem że jeszcze dużo przede mną, ale od czegoś trzeba zacząć tak Jak mówiłem zacząłem uczyć się może z 6-8 tyg temu, ale może od 2 zacząłem projektować strony, przy czym żadna nie została ukończona, bo uczę się i testuję różne rzeczy co i jak będzie wyglądać i działać.

Co do kolorystyki korzystam z różnego rodzaju stron na których można znaleźć różne kompozycje kolorystyczne jak chociaż by Adobe Color CC. Co do reszty to wiem że istnieje multum literatury odnośnie projektowania, pisma, układów itp. Idąc tą drogą byłem świadom że łatwo nie będzie i że dużo nauki mnie czeka, ale sprawia mi to przyjemność więc z nauką myślę nie będzie problemów (bo nie będę się uczyć na siłe) Dzięki wam za wszystkie informacje, na pewno się przydadzą.

Napisałem ponownie tamtą stronę zmieniając ją też wizualnie. Starałem się nie pozycjonować wszystkiego przy użyciu "position: relative" tylko używajać marginesów czy paddingów. Tam gdzie napisałem pozycje relatywną to tylko po to żeby "z-index" działał;

Menu spróbowałem zrobić inline'em zamiast używać "float". Tak samo zamiast umieszczać wszystkiego w "article" skorzystałem z div'ów "section" "figure" itp. Jestem świadom że poprawiając jedno narobiłem mnóstwo innych błędów ale na tym polega nauka

Tutaj macie stonkę

Edytowane 29 Listopada 2015 przez spice