Co sądzicie o moim kodzie

pytanie zadane 16 kwietnia 2017 w Nasze projekty przez BelethBeny Początkujący (300 p.)
edycja 16 kwietnia 2017 przez HaKIM

Napisałem prostą stronkę dla Kolegi który jest Lektorem Filmowym itp. stronka prosta ale wymaga jeszcze lekkiego podrasowania mimo to jest już na serwerze, jak możecie to proszę o uwagi nawet te najbardziej krytyczne ;) i o ewentualną poradę co można by zmienić dodać :) Paweł Wódczyński - Lektor

<!DOCTYPE HTML>
<html lang="pl">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paweł Wódczyński - Lektor</title>
    <meta name="description" content="Witam znajdziesz tu czytane przeze mnie bajki, audiobooki czy słuchowiska.
    Życzę przyjemnego odbioru !">
    <meta name="keywords" content="Lektor,głos,Paweł Wódczyński,aktor,bajki,słowa,fragmenty,audiobooki,słuchowiska,radio,radiowe,stary,zniszczony">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="Beniamin Zdun">
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link rel="stylesheet" href="css/fontello.css" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,700&amp;subset=latin-ext" rel="stylesheet">
</head>

<body>
    <div id="wrapper">
        <header>
            <img src="img/logo.jpg" alt="programista" />
        </header>
        <div class="nav">
            <ol>
                <li><a href="#omnie"><b>O mnie</b></a></li>
                <li><a href="#"><b>Nagrania</b></a>
                    <ul>
                        <li><a href="bajki.html" target="_blank"><b>Bajki</b></a></li>
                        <li><a href="sluchowiska.html" target="_blank"><b>Słuchowiska</b></a></li>
                        <li><a href="audiobooki.html" target="_blank"><b>Audiobooki</b></a></li>
                    </ul>
                </li>
                <li><a href="kontakt.html" target="_self"><b>Kontakt</b></a></li>
            </ol>
        </div>
        <section>
            <article>
                <h1 id="omnie">Paweł Wódczyński - Lektor</h1>
                <p><img class="left" src="img/pawel.jpg" alt="portert" title="Paweł Wódczyński" /></p>
                <h2>Witaj!</h2>
                <div class="aside">Nazywam sie Paweł Wódczyński jestem aktorem i lektorem. Miło mi, że jesteś na mojej stronie. Znajdziesz tu czytane przeze mnie bajki, słowa, zdania, fragmenty i całości, audiobooki czy też słuchowiska radiowe. Jeżeli potrzebujesz ciekawego i przyjemnego, "starego i zniszczonego", delikatnego i mocnego głosu - dobrze trafiłeś. Interesuję Cię współpraca? Napisz lub zadzwoń! Mój głos jest dla Ciebie.
                    <br /> <br /> Doświadczenie:
                    <br /> <br /> - od 2015 lektor w Polskim Radiu Merkury w Poznaniu
                    <br /> <br /> - od 2010 aktor w Narodowym Teatrze Edukacji we Wrocławiu
                    <br /> <br /> - od 2006 aktor Studia Teatralnego Próby
                    <br /> <br /> - Słuchowisko " Wiedzmin. Chrzest Ognia"
                    <br /> <br /> - Biblia Audio - Superprodukcja</div>
                <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
            </article>
            <iframe width="450" height="253" src="https://www.youtube.com/embed/V4sckVYw7q8" frameborder="0" allowfullscreen></iframe><iframe width="450" height="253" src="https://www.youtube.com/embed/RO9DRZJcwVc" frameborder="0" allowfullscreen></iframe><iframe width="450" height="253" src="https://www.youtube.com/embed/4lF0hb1sTsA" frameborder="0" allowfullscreen></iframe>
        </section>
        <footer>
            <div class="facebook">
                <a href="https://www.facebook.com/wodczynskilektor/?fref=ts" target="_blank" title="Facebook"><i class="demo-icon icon-facebook-official"></i></a>
            </div>
            <div class="youtube">
                <a href="https://www.youtube.com/channel/UC2doj1tvXc76yEVAfRCgY4w" target="_blank" title="YouTube"><i class="icon-youtube"></i></a>
            </div>
            <div class="strona">
                <a href="http://naszeczytanie.pl/" target="_blank" title="Naszeczytanie.pl"><i class="icon icon-book-open"></i></a>
            </div>
            <b> All rights reserved. &copy; Paweł Wódczyński - Lektor 2017. Created & design by Ben</b>
        </footer>
    </div>
    <script src="jquery-3.2.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var NavY = $('.nav').offset().top;

            var stickyNav = function() {
                var ScrollY = $(window).scrollTop();

                if (ScrollY > NavY) {
                    $('.nav').addClass('sticky');
                } else {
                    $('.nav').removeClass('sticky');
                }
            };

            stickyNav();

            $(window).scroll(function() {
                stickyNav();
            });
        });

    </script>
</body>

</html>

* {
    margin: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    box-sizing: border-box;
    /*łatwiej się układa stronę*/
}

body {
    background-color: #c6ad8f;
    background-attachment: fixed;
}

.nav {
    width: 100%;
    text-align: center;
}

.sticky {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
}

ol {
    list-style-type: none;
    font-size: 18px;
    height: 35px;
    line-height: 200%;
    display: inline-block;
}

ol a {
    color: #ffffff;
    text-decoration: none;
    display: block;
}

ol>li {
    float: left;
    width: 33.33%;
    height: 40px;
    border-right: 1px solid #751b1b;
}

ol>li:hover {
    background-color: rgb(119, 90, 61);
}

ol>li:hover>a {
    color: #000000;
    transition: 1s color linear;
}

ol>li>ul {
    list-style-type: none;
    height: 40px;
    display: none;
}

ol>li:hover>ul {
    display: block;
}

ol>li>ul>li {
    background-color: #27140e;
    position: relative;
    z-index: 100;
    border-top: 1px solid #751b1b;
}

ol>li>ul>li:hover {
    background-color: rgb(119, 90, 61);
}

ol>li>ul>li:hover>a {
    color: #141010;
    transition: 1s color linear;
}

.nav ol {
    font-size: 18px;
    width: 100%;
    height: 40px;
    background-color: #27140e;
    list-style-type: none;
}

header img {
    width: 100%;
    height: 450px;
    display: block;
}

article {
    padding: 20px 20px;
}

article h1 {
    text-align: center;
    margin: 40px 10% 20px 10%;
    padding: 10px;
    font-size: 35px;
    border-bottom: 2px solid #a33042;
}

h2 {
    border: none;
    font-size: 25px;
    margin-bottom: 20px;
}

.aside {
    margin: 0px 150px 15px 15px;
    font-size: 18px;
}

img.left {
    width: 40%;
    float: left;
    /* tekst opływa obrazek*/
    padding: 10px;
    margin: 0px 5px 0px 0px;
}

article p {
    height: auto;
    width: auto;
    text-align: justify;
    /* justowanie tekstu*/
    font-size: 20px;
    line-height: 25px;
    padding: 0 5px 5px 5px;
    margin: 15px 130px;
}

iframe {
    display: inline-block;
    width: 30%;
    line-height: 40px;
    margin-left: 40px;
    margin-bottom: 80px;
    opacity: 0.8;
    transition: 0.3s/*czas*/
    transform/*nazwa właściwości*/
    linear;
}

iframe:hover {
    opacity: 1;
    transform: scale(1.1);
    transition: 0.3s/*czas*/
    transform/*nazwa właściwości*/
    linear;
}

footer {
    height: 70px;
    text-align: center;
}

footer>b {
    display: block;
    margin: 10px auto;
    font-size: 10px;
    text-align: center;
    font-family: 'Raleway', sans-serif;
}

.facebook {
    padding: 6px;
    display: inline-block;
    background-color: white;
    text-decoration: none;
    margin: 10px;
}

.facebook:hover {
    background-color: #9fb6e6;
}

.youtube {
    padding: 5px;
    display: inline-block;
    background-color: white;
    text-decoration: none;
}

.youtube:hover {
    background-color: #e5a2a4;
}

.strona {
    display: inline-block;
    padding: 5px;
    text-decoration: none;
    background-color: white;
    margin-left: 10px
}

.strona:hover {
    background-color: #d47e58;
}

#formularz {
    width: 300px;
    /* ustawiamy szerokość formularza */
    margin: 0 auto;
    /* jeżeli nasz formularz ma ustawioną szerokość wyśrodkowujemy go */
    background-color: #716452;
    /* dodajemy kolor tła naszemu formularzowi */
    border: 2px solid #ccc;
    /* dodajemy obramowanie o szerokości 2px */
    border-radius: 10px;
    /* zaokrąglamy tło naszego formularza */
    padding: 20px;
    /* dodajemy margines wewnątrz naszego formularza */
    margin-top: 2px;
    /* dodajemy margines górny naszego formularza */
}

body #formularz {
    margin: 200px auto;
}

#formularz label {
    display: block;
    /* ustawiamy by label rozpoczynał się od nowej linii*/
    margin-bottom: 5px;
    /* dodajemy margines dolny */
    font-weight: bold;
    /* pogrubiamy czcionkę */
    text-transform: uppercase;
    /* zamieniamy wszystkie litery na duże */
    font-size: 12px;
    /* ustawiamy wielkość czcionki */
    color: #000000;
    /* ustawiamy kolor czcionki */
    padding: 2px;
}

#formularz textarea,
#formularz input {
    padding: 5px;
    /* dodajemy margines wewnątrz naszego pola */
    border-radius: 3px;
    /* dodajemy zaokraglone rogi */
    border: 1px solid #ccc;
    /* dodajemy obramowanie */
    margin-bottom: 25px;
    /* dodajemy margines dolny */
    width: 245px;
    /* ustalamy szerokość */
}

#formularz input#submit {
    width: 255px;
    /* ustalamy szerokość */
    cursor: pointer;
    /* zmieniamy kursor */
    margin-bottom: 0px;
    /* resetujemy margines dolny */
}

#formularz p.copy {
    color: #555555;
    /* ustawiamy kolor czcionki */
    margin-bottom: 0px;
    /* resetujemy margines dolny */
    font-size: 12px;
    /* ustawiamy rozmiar czcionki */
    text-align: center;
    /* wyśrodkowywujemy tekst */
}

#formularz p.copy a {
    color: #555555;
    /* ustawiamy kolor czcionki */
    text-decoration: none;
    /* usuwamy podkreślenie linku */
    font-weight: bold;
    /* pogrubiamy czcionkę */
}

.wrapper>iframe {
    margin-left: 170px;
    margin-right: 100px;
    margin-top: 30px;
    margin-bottom: auto;
    background: center;
}

.iframe iframe {
    margin-left: 170px;
    margin-right: 100px;
    margin-top: 40px;
    margin-bottom: auto;
}

center iframe {
    margin-top: 25px;
}

#body iframe {
    margin-top: 70px;
}

jeżeli ktoś bedzie chciał wrzucę resztę kodu. Pozdrawiam :)

komentarz 16 kwietnia 2017 przez Wildee Gaduła (3,380 p.)

Chciałem tylko powiedzieć, że kolega ma bardzo przyjemny głos. Widać, że dużo pracy w to włożył :) Co do stronki, to od strony technicznej jest według mnie super. Jedyne co bym poprawił, to opis. Jakoś ciężko mi się go czytało. Może to kwestia ilości przymiotników?

1	komentarz 16 kwietnia 2017 przez vector Dyskutant (9,200 p.) Śmiem twierdzić że strona jest niedorobiona. Mianowicie filmy strasznie brzydko się zawijają przy rozdzielczości 1080p.

komentarz 16 kwietnia 2017 przez BelethBeny Początkujący (300 p.)

responsywność nie została zrobiona na tej stronie, dopiero będe robił, brak czasu, a kolega chciał na już dodać :)

komentarz 16 kwietnia 2017 przez BelethBeny Początkujący (300 p.)

opis jest napisany przez kolegę , nie chciałem w to ingerować :)

komentarz 16 kwietnia 2017 przez Misieq10 Początkujący (250 p.)

1. Po kliknięciu na słuchowisko otwiera ci nową kartę. Jak dla mnie jest to iritujące. Ja to stosuje, tylko przy linkach zewnętrznych.

2. Wydaje mi się, że tak nie powinno być.

komentarz 16 kwietnia 2017 przez BelethBeny Początkujący (300 p.)

tak jak pisałem wyżej, strona jeszcze nie dostosowywuje się do innych rozdzielczości jak moja :)

komentarz 16 kwietnia 2017 przez MMM4CI3J Użytkownik (500 p.)

Poza tym moim zdaniem lepiej było by zaimplementować to wszystko na jednej stronie. Po kliknięciu na ,,O mnie" strona lekko się scroluje jak na wikipedii. Możesz zrobić to samo dla ,,nagrań" i kontaktu.

komentarz 16 kwietnia 2017 przez BelethBeny Początkujący (300 p.)

właśnie próbowałem z tym lekkim scroll i nie wychodziło mi ... jeżeli chodzi o kontakt to myślałem nad pojawiającym się modalem :)

komentarz 16 kwietnia 2017 przez MMM4CI3J Użytkownik (500 p.)

Ale jakoś jednak uzyskałeś ten przeskok po kliknięciu na ,, O mnie". A kontakt osobiście umieściłbym na samym dole tam gdzie linki do fb i yt.

komentarz 16 kwietnia 2017 przez BelethBeny Początkujący (300 p.)

przeskok tak ale nie do końca wiem jak zrobić tak delikatnie :)

pomyślę nad tym kontaktem

3 odpowiedzi

odpowiedź 16 kwietnia 2017 przez krzysiuup Obywatel (1,140 p.)

To ja się trochę pobawię w Comandeera...

Bolą mnie te wszystkie . Jeśli chcesz tym wizualnie separować elementy, to już lepiej dodać margin w CSS.

W header powinien znajdować się nagłówek h1 z nazwą strony, czyli ten h1 z id=omnie, który masz w article. Z

 służy do umieszczania bloków tekstu. Niepotrzebnie pchasz do środka obrazek, który mógłby istnieć bez zagnieżdżania go w .

Filmy powinny być umieszczane za pomocą <video>.

div class='nav' to powinien być <nav>.

Taka analiza na szybko, nie wyłapałem wszystkich błędów, ale wskazałem te większe. W kwestii semantyki/dostępności stron polecam www.webkrytyk.pl.

komentarz 16 kwietnia 2017 przez BelethBeny Początkujący (300 p.)

Dzięki za fajne uwagi, fakt wiem że z przesadziłem ... znikną na dniach.

 poprawię :)

a filmy muszą być w <video> ?? samo iframe nie wystraczy ?

z tym navem to chyba mój głupi błąd .... do poprawy :)

komentarz 16 kwietnia 2017 przez krzysiuup Obywatel (1,140 p.)

Filmy muszą być w video, a iframe nie jest ci wcale do tego potrzebny.

Zobacz dlaczego ramki są złe.

Wyrzuć je, zastąp je video i ciesz się lepszym kodem.

odpowiedź 16 kwietnia 2017 przez pysilla Użytkownik (560 p.)

Nie wiem czy zauważyłeś, ale na stronie głównej ostatni element z listy zawija się pod zdjęcie. Nie wygląda to za dobrze.

Przy okazji wygodniej chyba byłoby umieścić to w liście ul, jako że jest to lista :), wtedy też masz z automatu, wypunktowania.

<h3>Doświadczenie:</h3>
<ul>
<li>od 2015 lektor w Polskim Radiu Merkury w Poznaniu</li>
<li>od 2010 aktor w Narodowym Teatrze Edukacji we Wrocławiu</li>
<li>od 2006 aktor Studia Teatralnego Próby</li>
<li>Słuchowisko " Wiedzmin. Chrzest Ognia"</li> 
<li>Biblia Audio - Superprodukcja</li>
</ul>

Wiem, że pytałeś o kod, ale strona wizualna ma znaczenie, może bardzo zniechęcić odwiedzającego stronę. Nie przesadzasz z nadmierną kolorystyką i efektami- to super! Podstrona z formularzem jest bardzo prosta i ładna, reszta też ok, oprócz strony z nagraniami bajek. Wygląda jak źle zrobiona przeróbka książki w photoshopie. Może pomyśl o czymś innym.

To tylko sugestie, więc jeśli ci się spodobają to z nich skorzystaj. Powodzenia! :)

komentarz 16 kwietnia 2017 przez BelethBeny Początkujący (300 p.)

element się zawija z powodu braku @media w css :) nie jest strona jeszcze responsywna :) w trakcie działań :)

uwagi przeanalizuję i zapewne część wezmę pod uwagę :) Dziękuje