Skocz do zawartości


Uwaga, ta strona używa Cookies
Stosujemy je, aby ułatwić Tobie korzystanie z naszego serwisu. Pamiętaj, że w każdej chwili możesz zmienić ustawienia dotyczące Cookies w ustawieniach swojej przeglądarki internetowej.
Dowiedz się więcej    
Akceptuję
Zdjęcie

Moja strona www - uwagi i ocena

www html css nauka ocena

  • Zaloguj się, aby dodać odpowiedź
6 odpowiedzi w tym temacie

#1 spice

spice
  • Nowicjusz

  • 13 postów
  • Miejscowość:Dzierżoniów

Napisano 28 listopad 2015 - 01:09

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...iew?usp=sharing


  • 0

| Intel i5 3570K | 2x4GB RAM 1333Mhz | Gigabyte Windforce R9 290 4GB Deus g1 600w | Asrock z77 pro3 | Zalman z3 plus white | SSD Crucial m500 240GB | SilentiumPC Grandis  | Roccat KONE pure red | Microsoft Natural Ergonomic keyboard 4000 | Motorola Moto G 2nd. |


#2 Karister

Karister
  • Bywalec

  • 141 postów
  • Miejscowość:Wrocław

Napisano 28 listopad 2015 - 12:50

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;
}

Użytkownik Karister edytował ten post 28 listopad 2015 - 12:52

  • 1

#3 spice

spice
  • Autor tematu
  • Nowicjusz

  • 13 postów
  • Miejscowość:Dzierżoniów

Napisano 28 listopad 2015 - 13:49

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" :D 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  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 ;)


Użytkownik spice edytował ten post 28 listopad 2015 - 13:52

  • 0

| Intel i5 3570K | 2x4GB RAM 1333Mhz | Gigabyte Windforce R9 290 4GB Deus g1 600w | Asrock z77 pro3 | Zalman z3 plus white | SSD Crucial m500 240GB | SilentiumPC Grandis  | Roccat KONE pure red | Microsoft Natural Ergonomic keyboard 4000 | Motorola Moto G 2nd. |


#4 Karister

Karister
  • Bywalec

  • 141 postów
  • Miejscowość:Wrocław

Napisano 28 listopad 2015 - 14:57

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".


  • 0

#5 spice

spice
  • Autor tematu
  • Nowicjusz

  • 13 postów
  • Miejscowość:Dzierżoniów

Napisano 28 listopad 2015 - 15:24

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 ;)


Użytkownik spice edytował ten post 28 listopad 2015 - 16:00

  • 0

| Intel i5 3570K | 2x4GB RAM 1333Mhz | Gigabyte Windforce R9 290 4GB Deus g1 600w | Asrock z77 pro3 | Zalman z3 plus white | SSD Crucial m500 240GB | SilentiumPC Grandis  | Roccat KONE pure red | Microsoft Natural Ergonomic keyboard 4000 | Motorola Moto G 2nd. |


#6 Sleeper82

Sleeper82
  • Painter

  • 28 postów
  • Miejscowość:Łódź

Napisano 29 listopad 2015 - 01:53

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.


  • 0

Intel Core i5-4440 / Dell Inc. 088DT1 / 8 GB DDR 3 1600 MHz / Palit GeForce RTX 2060 Gaming Pro OC 6GB / WDC 1 TB /

Corsair CS Modular 550W / Eizo ColorEdge CS2730 / WD My Passport Ultra 2,5 2TB / Wacom Intuos3 A4 /
Aune T1 MK2 / Ultrasone Pro 900


#7 spice

spice
  • Autor tematu
  • Nowicjusz

  • 13 postów
  • Miejscowość:Dzierżoniów

Napisano 29 listopad 2015 - 13:47

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ę


Użytkownik spice edytował ten post 29 listopad 2015 - 09:23

  • 0

| Intel i5 3570K | 2x4GB RAM 1333Mhz | Gigabyte Windforce R9 290 4GB Deus g1 600w | Asrock z77 pro3 | Zalman z3 plus white | SSD Crucial m500 240GB | SilentiumPC Grandis  | Roccat KONE pure red | Microsoft Natural Ergonomic keyboard 4000 | Motorola Moto G 2nd. |






Również z jednym lub większą ilością słów kluczowych: www, html, css, nauka, ocena

Użytkownicy przeglądający ten temat: 1

0 użytkowników, 1 gości, 0 anonimowych