[www] Portfolio do oceny Opcje

[maiza]

Chciałbym dać do oceny portfolio, jest to moja pierwsz strona, ktorą 'zakodowałem'. Chciałem to wykonac w HTML5 i CSS (raczej 2.1, bo z 3.0 tam chyba nic niema?).

PORTFOLIO

Chciałbym usłyszeć opinie, co jest źle, co powinienem zrobić/robić inaczej, czego nie używać, a co używać. Jak sobie ulatwić pracę. Co jest źle, głownie interesuje mnie kod.

[Niktoś]

Połowa strony to logo,druga połowa to menu,które trudno się czyta ze względu na rozmiar/rozdzielczość strony.Dookoła biel ,która daje w oczy,ogólnie dla mnie nie czytelne-choć logo fajne.Strona w zakładce kontakt ogólnie do poprawy.

[r4xz]

[HTML] pobierz, plaintext 
<header>
   <div id="hleft">      
   </div>
   <div id="hright">
      <div id="hrbottom">
      </div>
      <nav>
      <a href="index.html"><div id="about">
      </div></a>
      <a href="portfolio.html"><div id="portf">
      </div></a>
      <a href="kontakt.html"><div id="contact">
      </div></a>
      </nav>
   </div>		 
</header>
[HTML] pobierz, plaintext 

1. nawigacja jako obrazek - i całe pozycjonowanie szlag trafia? (IMG:style_emoticons/default/smile.gif)
2. po co tyle tych divów?


<article> - inny był chyba zamysł tego tagu..., u ciebie lepiej by w jego miejsce pasował <section>

[HTML] pobierz, plaintext 
<div id="pasekart"></div>
[HTML] pobierz, plaintext 

a nie lepiej odp. manipulacja z padding+margin+border(left/right)?

[HTML] pobierz, plaintext 
<footer><h2>feristronic.pl &copy; 2012</h2></footer>
[HTML] pobierz, plaintext 

a tutaj wywaliłbym <h2>


wnioski: "raczej 2.1, bo z 3.0 tam chyba nic niema?" - wniosek do kosza (IMG:style_emoticons/default/smile.gif) czemu? np. border-radius, które b. dobrze spełni swoje zadanie w linkach nawigacyjnych, może text-shadow dla żółtych nagłówków (zwiększy kontrast)?

[!*!]

Ciekawie to wygląda, inaczej. Chociaż całość jest za mała, przy większych rozdzielczościach tekst jest mikroskopijny. Kod... za dużo div (wywal je wszystkie bo są zbędne) do menu użyj li i zrób je na tekście a nie obrazkach, podobnie z logiem tzn. aktualną pozycją (tu możesz użyć css3 i webfonts), zmień kodowanie na utf-8.

Sam robiłeś grafikę, logotyp? Jak tak podeślij mi swoje inne prace na PW, szukam grafika.

Ten post edytował !*! 2.04.2012, 15:28:08

[Sexee]

Ciekawie to wygląda, inaczej. Chociaż całość jest za mała, przy większych rozdzielczościach tekst jest mikroskopijny. Kod... za dużo div (wywal je wszystkie bo są zbędne) do menu użyj li i zrób je na tekście a nie obrazkach, podobnie z logiem tzn. aktualną pozycją (tu możesz użyć css3 i webfonts), zmień kodowanie na utf-8.

"całość jest za mała, przy większych rozdzielczościach" - dokładnie tak, u mnie by coś przeczytać trzeba przybliżyć nos do monitora mimo to strona ładna, z kodem ci nie powiem bo dopiero zaczynam.

[mls]

Serwis który po wyłączeniu styli CSS staje się "nieużywalny" jest serwisem do niczego. A tak jest w tym przypadku - bez styli m.in. menu przestaje istnieć.

[Niktoś]

Serwis który po wyłączeniu styli CSS staje się "nieużywalny" jest serwisem do niczego. A tak jest w tym przypadku - bez styli m.in. menu przestaje istnieć.

Z tym to już chyba przesadziłeś-to co ma pozycjonować elementy za pomocą przestarzałych atrybutów html'owych które już w większości według specyfikacji W3C noszą znamiona DEPRACET?
Jak chcesz zrobić pozycjonowanie absolutne ,relatywne ,fixed nie używając CSS?

[Posio]

szału nie ma, widać krawędzie obrazków (kontrast). Zbyt małe, proste, nic oprócz logo nie przyciąga wzroku.

[lobopol]

@mls kto ci takich cudów naopowiadał? Rozumiem jak ktoś wyłączy sobie js, ale css? Jaki to odsetek użytkowników 0,001%?

Co do portfolio:
-za mało przestrzeni zajętej stroną na 1680x1050 mamy malutki boksik na 1920x1080 widać tyle co nic
-logo nie przechodzi w białość widać szary kwadrat
-malutkie czcionki
-duplikujesz id w portfolio

Jak dla mnie mało czytelne i niezbyt zachęcające

[!*!]

Serwis który po wyłączeniu styli CSS staje się "nieużywalny" jest serwisem do niczego. A tak jest w tym przypadku - bez styli m.in. menu przestaje istnieć.

Masz racje. Koledzy wyżej zapominają o podstawach. Wszelkiego rodzaju czytniki, roboty zwyczajnie tej strony nie odczytają, co w przypadku osoby niedowidzącej, niepełnosprawnej może być kluczowe.

[Niktoś]

Masz racje. Koledzy wyżej zapominają o podstawach. Wszelkiego rodzaju czytniki, roboty zwyczajnie tej strony nie odczytają, co w przypadku osoby niedowidzącej, niepełnosprawnej może być kluczowe.

A jak chcesz zachować układ kolumn -float:left float:right,bez CSS'a się rozsypie.
OSoby niedowidzące,nie wyłączają CSS,a ,a jedynie wczytywanie obrazków,dlatego zalecane jest użycie alt w img -to dla osób niewidzących ,niedowidzących.Poza tym takie osoby mają już naprawdę dobre OCR,które może i nawet odczytują
znaki z obrazka.Przykłąd recaptchy,jak słaba to OCR ją odczyta.

Ten post edytował Niktoś 3.04.2012, 11:55:20

[Damonsson]

1920x1200 po kliknięciu 6 razy ctrl + da się coś przeczytać.

Ten post edytował Damonsson 3.04.2012, 16:10:18

[!*!]

A jak chcesz zachować układ kolumn -float:left float:right,bez CSS'a się rozsypie.
OSoby niedowidzące,nie wyłączają CSS,a ,a jedynie wczytywanie obrazków,dlatego zalecane jest użycie alt w img -to dla osób niewidzących ,niedowidzących.Poza tym takie osoby mają już naprawdę dobre OCR,które może i nawet odczytują
znaki z obrazka.Przykłąd recaptchy,jak słaba to OCR ją odczyta.

Poczytaj trochę o dostosowaniu strony dla programów wspomagających osoby niepełnosprawne, ponieważ masz duże braki w tej dziedzinie.

[Niktoś]

Poczytaj trochę o dostosowaniu strony dla programów wspomagających osoby niepełnosprawne, ponieważ masz duże braki w tej dziedzinie.

Jak się nie ma argumentów to się właśnie tak pisze,zarzucając komuś braki.Poświęciłem 12minut na filmik :
http://www.ittechnology.us/jak-osoby-niewi...-internetowych/
Proponowałbym Ci także popatrzeć.Dla niewidomych problem nie stanowi CSS lecz brak dobrej semantyki kodu oraz brak opisów w tagach- omówiony przeze mnie atrybut alt.Zresztą spójrz czy używa netu na wyłączonym CSS przede wszystkim,bo nawet niewidomy tego nie robi.Co najwyżej wyłączają wczytywanie obrazków ,aby przyspieszyć ładowanie strony.
Poza tym offtop się zrobił i raczej proponowałbym dalej zająć się oceną strony autora.

Ten post edytował Niktoś 3.04.2012, 21:46:29

[mls]

Z tym to już chyba przesadziłeś-to co ma pozycjonować elementy za pomocą przestarzałych atrybutów html'owych które już w większości według specyfikacji W3C noszą znamiona DEPRACET?
Jak chcesz zrobić pozycjonowanie absolutne ,relatywne ,fixed nie używając CSS?

Jeśli nie rozumiesz o co chodzi to już tylko i wyłącznie Twój problem. Strona ma być czytelna również bez CSS. Różnica pomiędzy być czytelna a wyglądać jest całkiem niemała, a jednak masz z tym problem.
Tak jak zostało już wspomniane - chodzi między innymi o dostosowanie stron dla osób niepełnosprawnych (w tym również niewidomych). Masz ogromne braki w tej dziedzinie, i żaden filmik niestety Ci nie pomoże. Od ponad 20 lat mam styczność z niewidomymi i niedowidzącymi, więc mam trochę większą wiedzę w tym temacie.

[d3ut3r]

Strona faktycznie troszkę mała, fajne logo i ten robocik pod drzewkiem (IMG:style_emoticons/default/smile.gif)

Co do kodu nie wypowiem się bo zrobili to już inni , faktem jest jednak że zrobienie tak prostego menu , używając do tego obrazków jest raczej bardzo średnim rozwiązaniem.

@mls ma 100% racji co do tego że strona powinna być czytelna bez css'a (zawsze staram się projektować tak strony, aby wyłączenie css'a nie usuwało żadnej treści i nie ważne jest że menu będzie pionowe zamiast poziomie czy też układ kolumn się posypie) nie chodzi o konieczność a o profesjonalizm, chociaż można się zastanawiać po co niewidomy miałby "oglądać" portfolio grafika to jednak przyswojenie pewnych zasad pozwoli kolejne strony tworzyć bardziej profesjonalnie.

[dr_NO]

Coś mi nie pasowało, googlowałem obrazem i ot co:

http://www.smashingapps.com/2011/04/20/50-...e-for-free.html
http://www.free-psd.com/white/57-free-white-template-4

A zdawało mi się że prtfolio to ukazanie własnym możliwości, no ale może się mylę, jam tylko skromny żuczek (IMG:style_emoticons/default/smile.gif)

Dziękuję (IMG:style_emoticons/default/smile.gif)

[!*!]

Jak się nie ma argumentów to się właśnie tak pisze,zarzucając komuś braki.Poświęciłem 12minut na filmik :
http://www.ittechnology.us/jak-osoby-niewi...-internetowych/
Proponowałbym Ci także popatrzeć.Dla niewidomych problem nie stanowi CSS lecz brak dobrej semantyki kodu oraz brak opisów w tagach- omówiony przeze mnie atrybut alt.Zresztą spójrz czy używa netu na wyłączonym CSS przede wszystkim,bo nawet niewidomy tego nie robi.Co najwyżej wyłączają wczytywanie obrazków ,aby przyspieszyć ładowanie strony.
Poza tym offtop się zrobił i raczej proponowałbym dalej zająć się oceną strony autora.

Szacun, całe 12 minut na filmik który jest jednym wielkim ogólnikiem.
Niktoś zdecyduj się w końcu, bo zaprzeczasz sam sobie.

A jak chcesz zachować układ kolumn -float:left float:right,bez CSS'a się rozsypie.
OSoby niedowidzące,nie wyłączają CSS

Dla niewidomych problem nie stanowi CSS

To jak to w końcu jest? Opisz Nam to, bo masz chyba większą wiedzę niż niektórzy tu na forum.
Jeśli nadal się upierasz przy swoim, to przejdź chociażby w tryb autorski w przeglądarce... Tak, tak właśnie wygląda strona dla osób które korzystają ze wspomagaczy. I nie tylko są też roboty np. indeksujące ... ale dla Ciebie one z pewnością wczytują css, javascript i odwołują się przez ajax.

dr_NO - że Ci się chciało (IMG:style_emoticons/default/wink.gif)
Posio - wstydź się

Ten post edytował !*! 4.04.2012, 09:18:18

[dr_NO]

@!*! - wystarcyło pobrać obrazek z robotem i dać wyszukiwanie grafiki w google wykorzystując grafikę (znaczek aparatu obok klawiaturki w polu input (IMG:style_emoticons/default/wink.gif) ) i wsio, setki wyników (IMG:style_emoticons/default/smile.gif)

[Twist]

Panowie, jedno podstawowe pytanie.
Czy osoby niewidome przegladaja portfolio webdesignerow?