Ocena strony [ankieta]

pytanie zadane 4 maja 2016 w Nasze projekty przez Paweł123 Nałogowiec (33,500 p.)
zmienione kategorie 7 maja 2016 przez Arkadiusz Waluk

Cześć,

moglibyście ocenić moją stronę ;)

Proszę o jakieś wskazówki :D

http://sourcestudio.pl/

Możliwe odpowiedzi:

Fajna (9 głosów, 20%)

Może być (10 głosów, 22%)

Taka sobie (19 głosów, 41%)

2/10 (7 głosów, 15%)

Badziewna (1 głos, 2%)

10 odpowiedzi

odpowiedź 4 maja 2016 przez niezalogowany

odpowiedź 4 maja 2016 przez kubaapk Nałogowiec (44,270 p.)
edycja 4 maja 2016 przez kubaapk

Skrypty js na koniec body, w ogóle je jakoś uporządkuj i upchnij w jakiś plik.
Brak headerów, nawet h1 nie użyłeś.
Nie powielaj nawigacji, możesz to zrobić w jednym bloku <nav>
Animacje są zbyt agresywne, przynajmniej dla mnie.
Dlaczego nagłówki sekcji wrzucasz w <article>?
Staraj się nie używać target="_blank"
```
<br>
Klikniej, aby zobaczyć projekt
```

Zamiast <br> wrzuć tekst w <p>

<div style="clear:both"></div> -> clearfixy rób na pseudoklasach.

Do poczytania http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

Semantyka leży.

Wrzuć tą stronę w walidator i zobacz co wypluje.

/generalnie szkoda strzępić, tak jak mówi @niezalogowany, zapoznajcie się z dobrymi praktykami, przejrzyjcie forum i dopiero zacznijcie pisać, bo później wychodzą takie kwiatki, że aż się nie chce po raz setny tłumaczyć.

komentarz 4 maja 2016 przez niezalogowany

<div style="clear:both"></div> -> clearfixy rób na pseudoklasach.

*pseudoelementach

Skrypty js na koniec body, w ogóle je jakoś uporządkuj i upchnij w jakiś plik.

Z tym upychaniem w jakiś plik to już niekoniecznie. Nie ma potrzeby tworzyć kolejnych requestów. Dodatkowo wypadałoby ten JS zminimalizować.

Staraj się nie używać target="_blank"

Nie "Staraj się nie używać", tylko "Nie używaj" : )

komentarz 4 maja 2016 przez kubaapk Nałogowiec (44,270 p.)

Czeski błąd ;-)

komentarz 7 maja 2016 przez Artur Wraga Obywatel (1,870 p.)

Mam pytanie, dlaczego na tym forum panuje jakaś dziwna zasada " nie mów konkretów a dawaj wskazówki " ? Dlaczego tutaj tak ciężko dostać jakąś konkretną naukę ? np : zamiast

target="_blank"

zrób to tak a tak...

nie... nie można przecież powiedzieć, miał by za łatwo, trzeba mu powiedzieć czego nie robić, ale jak już trzeba robić niech szuka w internecie. :) To forum przez takie właśnie zachowanie, nie jest skarbnicą wiedzy a skarbnicą odsyłaczy i opinii.

Nie pomyślcie ,że chcę kogoś atakować, tylko od jakiegoś czasu po protu tutaj zaglądam i tutaj w odróżnieniu od innych forów ciężko znaleźć konkrety... same odsyłacze typu ... pocztaj o tym a poczytaj o tamtym i linki do stron najlepiej po angielsku.

komentarz 7 maja 2016 przez niezalogowany

Jeśli musisz powtarzać po trzydzieści razy na tydzień to samo, nagle okazuje się, że to marnowanie własnego czasu. Znacznie szybciej jest napisać komuś gdzie jest błąd i podrzucić linka do dokumentacji / artykułu, gdzie wszystko ma ładnie opisane co, jak oraz dlaczego.

"Linki do stron najlepiej po angielsku" - tak już jest, że wysokiej jakości materiałów, w naszym ojczystym języku, ze świecą szukać.

Wśród pytających są dwie opcję:

Masz problem i jesteś programistą - po prostu czytasz podesłane strony, starając się zrozumieć dany temat. (Co do języka - nie ma wymówek - programista angielski musi znać)
Albo masz problem i nie jesteś programistą - wtedy po prostu słuchasz programistów i nic nie musisz rozumieć. Zasadniczo zawsze piszemy jak coś powinno wyglądać poprawnie (o ile to jest poprawianie błędów, a nie klepanie gotowców)

A że na tym forum więcej jest ludzi, którzy chcą być / są programistami - wszędzie widzisz różne odsyłacze : )

Inna sprawa, że forum to tutaj w dużej mierze po prostu przedłużenie wyszukiwarki, i używanie jej za innych. Smutne, ale prawdziwe.

komentarz 7 maja 2016 przez Artur Wraga Obywatel (1,870 p.)

Ja znam angielski dość dobrze ... za granicą siedzę ale tak czy siak lepiej czyta mi się polski ... dużo lepiej. Ja nie proszę żeby opisywać tutoriale na temat podstaw css czy HTML czy innych ale z tym blank mnie ruszyło juz bo odpowiedz na to można zmieścić w jednym zdaniu. Ja wcześniej szukałem tez jak otworzyć link w nowej karcie i mi w pierwszych liniach w Google pojawia się właśnie to. Podejrzewam że dlatego tego używamy ... my początkujący. Jeszcze jak ktoś link poda to już pół biedy ale co to jest za odpowiedz typu : nie używaj blank , nie używaj onload ... nie używaj br ... zero wskazówek tylko nie rób tego nie rób tamtego.

komentarz 7 maja 2016 przez niezalogowany

No ok, jak ktoś nie poda linku tylko napisze jedno zdanie, rzeczywiście jest to trochę irytujące - osobiście staram się tak nie robić. Oczywiście w takiej sytuacji można zapytać dlaczego coś implementować tak, a nie inaczej. Co do target blank - https://css-tricks.com/use-target_blank/

odpowiedź 5 maja 2016 przez Mateusz11 Pasjonat (22,910 p.)

Chyba nasze projekty a nie Sieci komputerowe, internet

	<img src="grafika/karczmapelnamicha.png" alt="Proszę odświeżyć stronę">
			<br>
			Klikniej, aby zobaczyć projekt</img>

Co to jest? Od kiedy tag img można zamknąć?

<article class="formularz_kontaktowy_pojemnik">

Nie używaj polskich nazw

$(document).ready(function() {
 
 //Walidacja nazwy
 $('#name').on('blur', function() {
 var input = $(this);
 var name_length = input.val().length;
 if(name_length >= 1){
 input.removeClass("invalid").addClass("valid");
 input.next('.komunikat').text("").removeClass("blad").addClass("ok");
 }
 else{
 input.removeClass("valid").addClass("invalid");
 input.next('.komunikat').text("Proszę uzupełnic pole").removeClass("ok").addClass("blad");
 
 }
 });
 
 //Walidacja email
 $('#email').on('blur', function() {
 var input = $(this);
 var pattern = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
 var is_email = pattern.test(input.val());
 if(is_email){
 input.removeClass("invalid").addClass("valid");
 input.next('.komunikat').text("").removeClass("blad").addClass("ok");
 }
 else{
 input.removeClass("valid").addClass("invalid");
 input.next('.komunikat').text("Prosze wprowadzić poprawny e-mail").removeClass("ok").addClass("blad");
 }
 }); 
 
 //Walidacja wiadomości
 $('#wiadomosc').on('blur', function() {
 var input = $(this);
 var message = $(this).val();
 if(message){
 input.removeClass("invalid").addClass("valid");
 input.next('.komunikat').text("").removeClass("blad").addClass("ok");
 }
 else{
 input.removeClass("valid").addClass("invalid");
 input.next('.komunikat').text("Proszę uzupełnic pole wiadomości").removeClass("ok").addClass("blad");
 }   
 });
 
 //Po próbie wysłania formularza
 $('#submit button').click(function(event){
 var name = $('#name');
 var email = $('#email');
 var message = $('#wiadomosc');
 
 if(name.hasClass('valid') && email.hasClass('valid') && message.hasClass('valid')){
 
 }
 else {
 event.preventDefault();
 alert("Uzupełnij wszystkie pola!"); 
 }
 });
});
</script>



<!-- Kod płynnego przewijania -->
	
	<script>
		
		jQuery(function($)
		{
			//zresetuj scrolla
			$.scrollTo(0);
			
			$('#link1').click(function() { $.scrollTo($('#o_mnie'), 1000); });
			$('#link2').click(function() { $.scrollTo($('#moje_projekty'), 1400); });
			$('#link3').click(function() { $.scrollTo($('#kontakt'), 1800); });
			
			$('#link_pc1').click(function() { $.scrollTo($('#o_mnie'), 1000); });
			$('#link_pc2').click(function() { $.scrollTo($('#moje_projekty'), 1400); });
			$('#link_pc3').click(function() { $.scrollTo($('#kontakt'), 1800); });
			
			
			$('.scrollup').click(function() { $.scrollTo($('body'), 1000); });
			
		}
		);
		
		//pokaż podczas przewijania
		$(window).scroll(function()
		{
			if($(this).scrollTop()>500) $('.scrollup').fadeIn();
			else $('.scrollup').fadeOut();		
		}
		);
		
	</script>


<!-- Kod do wynywanego menu -->

<script>
 	
$('.left-menu').sliiide({place: 'right', toggle: '#nav-icon'});
</script>

<!-- Kod do wynywanego menu Smooth Scrooling -->
	<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

        <script src="smooth_scrooling_js/index.js"></script>


<!-- Kod do animacji -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="animacje/jquery.viewportchecker.min.js"></script>
<script>
	$(document).ready(function(){

		$('*[data-animate]').addClass('hide').each(function(){
      $(this).viewportChecker({
        classToAdd: 'show animated ' + $(this).data('animate'),
        classToRemove: 'hide',
        offset: '35%'
      });
    });

	});
</script>

Dlaczego tego skryptu nie dasz do pliku?

Skrypty przed </body>
```
	<meta name="viewport" content="width=device-width, initial-scale=1">
```
Dawając tą linijke, nie moge zmniejszyć strony, tym samym nie będę z niej korzystał

komentarz 5 maja 2016 przez niezalogowany

Dlaczego tego skryptu nie dasz do pliku?

Żeby nie tworzyć kolejnego requestu do serwera?

<meta name="viewport" content="width=device-width, initial-scale=1">

Dawając tą linijke, nie moge zmniejszyć strony, tym samym nie będę z niej korzystał

Ta linijka nie ma nic wspólnego z tym, że nie możesz pomniejszyć strony. Nawet więcej - jest jak najbardziej poprawna oraz potrzebna.

komentarz 7 maja 2016 przez Comandeer Guru (600,710 p.)

Żeby nie tworzyć kolejnego requestu do serwera?

Mamy 2016 rok, HTTP/2.0 ma coraz większe wsparcie. Wkrótce wszystkie skrypty inline będą de facto anti-patternem. HTTP/2.0 pozwoli – w końcu – podzielić całą aplikację na wiele sensownych modułów (tutaj ukłon w stronę ES6) i wczytywać je osobno. Tym samym jeden moduł = jeden plik + wszystkie zalety cache'owania ich osobno. Wszystko dzięki mechanizmowi server push.

No i inna rzecz: skrypty inline nie lubią się z CSP, które jest coraz popularniejsze (a w części aplikacji, które kiedyś skrobałem, bezwzględnie wymagane!).

komentarz 7 maja 2016 przez niezalogowany

Ale gafa - rzeczywiście, ich serwer wspiera HTTP/2 (pewnie hekko).

Niby 2016, ale ja mam wrażenie, że web to w tym kraju ma spokojnie kilka lat poślizgu.

O, w ogóle co do CSP i rzeczy których nie lubi - z serwerów facebooka leci response z dyrektywami unsafe-inline oraz unsafe-eval.. gdzie tu sens? gdzie tu logika?

komentarz 7 maja 2016 przez Comandeer Guru (600,710 p.)

Ale gafa - rzeczywiście, ich serwer wspiera HTTP/2 (pewnie hekko).

To, że wspiera, nie oznacza, że jest to poprawnie na stronie wykorzystane.

Niby 2016, ale ja mam wrażenie, że web to w tym kraju ma spokojnie kilka lat poślizgu.

No niestety.

O, w ogóle co do CSP i rzeczy których nie lubi - z serwerów facebooka leci response z dyrektywami unsafe-inline oraz unsafe-eval.. gdzie tu sens? gdzie tu logika?

Nie ma, ale jestem w stanie zrozumieć tę decyzję. FB jest na tyle dobrze zabezpieczone przed XSS-em po stronie backu, że mogą sobie na to pozwolić. Chociaż IMO i tak powinno być to tymczasowe, aż się nie zrobi poprawnego rozdziału kodu na warstwy (być może im się to nie opłaca przy takiej skali, who nose). Podobną sytuację mamy z CKE4, gdzie kod powstał w 2007 i był pisany zgodnie z tamtymi "standardami"… więc czeka nas duuuuużo roboty → https://github.com/ckeditor/ckeditor-dev/pull/254

odpowiedź 5 maja 2016 przez ShiroUmizake Nałogowiec (46,300 p.)

odpowiedź 5 maja 2016 przez DragonCoder Nałogowiec (36,500 p.)

odpowiedź 6 maja 2016 przez IBB Gaduła (3,020 p.)

Zgadzam się z większością komentarzy, plus:

- nazwy klas wołają o pomstę do nieba, polecam poczytanie o metodologii BEM

- stronka wygląda dość amatorsko, niechlujnie i mało atrakcyjnie - sorry, ale było to moje pierwsze wrażenie, chyba głównie za sprawą literówek i użytej czcionki

- ignorowanie podstawowych zasad dostępności - stosowanie niesemantycznych elementów (np. przycisk zbudowany za pomocą elementu div i ikonki, dlaczego nie button?), elementy img bez atrybutu "alt" lub z opisem typu "Proszę odświeżyć stronę" (?), itd.

odpowiedź 7 maja 2016 przez Comandeer Guru (600,710 p.)

odpowiedź 7 maja 2016 przez zkkf56 Dyskutant (8,710 p.)

W języku polskim nie piszemy słowa fajnie.

1	komentarz 7 maja 2016 przez Comandeer Guru (600,710 p.) A dlaczego?

komentarz 7 maja 2016 przez draghan VIP (106,230 p.)

Na pewno nie ma takiego słowa, jak "klikniej". :)

komentarz 8 maja 2016 przez zkkf56 Dyskutant (8,710 p.)

NWM tak mnie uczyli. Oczywiście jest takie słowo ale nie pisze się go. :)

komentarz 8 maja 2016 przez draghan VIP (106,230 p.)

Zdaje mi się, że coś Ci świta, ale nie wiesz do końca, gdzie. Być może "uczyli Cię", że nie powinno się używać tego słowa w pismach oficjalnych...? ;)

komentarz 8 maja 2016 przez zkkf56 Dyskutant (8,710 p.)

Nie wiem, może xD

odpowiedź 7 maja 2016 przez Artur Wraga Obywatel (1,870 p.)

Co do kodu nie bede sie wypowiadał bo dopiero się uczę więc pozostawię to doświadczonym wyjadaczom jakich tu nie brakuje. Jednak jako użytkownik mogę sie wypowiedzieć:

- formularz skontaktuj się z nami jak dla mnie wygląda słabo... za wąskie te pola, dodałeś chyba border z dużym radiusem ale jak pole jest aktywne widać outline kwadratowy koloru niebieskiego który chyba nie został ostylowany.?.. nie ładnie to wygląda.

- Przycisk wyślij za szeroki i nie ostylowany.

- wykonane projekty , wydaje mi się ,że powinien być większy troszkę margines pomiędzy ikonką a napisem. Sam napis nie jest wyśrodkowany względem ikonki, jest trochę niżej.

-Osobiście chyba bym usunął te border wokół projektów i dał bym dużo mniej kontrastowe tło na hover... albo bym je dał bardziej symboliczne prawie nie widoczne ale to moje zdanie tylko... Jezeli tobie siętak to podoba i innym to zostaw.

- moim zdaniem, te slajdy gdzie masz cytaty powinny mieć mniejszą wysokość, tak na 70% ekranu. Możesz zobaczyc jak by to wyglądało, może się mylę.

- podczas przewijania pojawia się w adresie # :) w sumie jak masz wszystko na jedej stronie możesz dać bez href a dać id do elemtnu li , menu. Wtedy w ogóle nie zmieni się adres ale nie wiem czy to dobre rozwiązanie, są też inne metody.

Ogólnie jakoś tak... mam wrażenie ,że jest przerost formy nad treścią... pusto tam :)

pozdro