Html5 i CSS3 dla zaawansowanych

[Dwayne 1]

Witam

Poznałem solidne podstawy html5 i css3 w języku angielskim (bo podobno mniej błędów) i teraz przyszedł czas na nową wiedzę w tej dziedzinie na poziomie zaawansowanym.

Możecie mi polecić jakieś książki, ebooki, filmy, strony, czegokolwiek z możliwie najbogatszą wiedzą, bez błędów, nieważne w jakim języku.

[januszmk 6]

polecam przeczytać http://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515

[Mistic92 68]

Polecam zacząć pisać strony a nie czytać. 

[patryk0493 52]

A ja polecam jedno i drugie, najpierw czytaniem potem praktyka.

 

Mhh... Zajrzałeś do SASS/LESS, animacja w CSS3. Najlepiej streść co już umiesz to i może literaturę się dobierze

[Dwayne 1]

Uczyłem się z Codecademy, ta strona jest po angielsku, cały czas tam piszemy, dlatego wszystko zapamiętałem i zrozumiałem.

Może trochę przesadziłem że solidne podstawy zważywszy na to ile jeszcze nauki.

[Mistic92 68]

To stwórz swoją stronę, pakujesz co tylko chcesz  

[Dwayne 1]

Dobrze ale do pisania strony potrzebne są przecież inne języki ? Poza tym chciałbym pogłębić swoją wiedzę na temat tych języków.

Chciałbym spotkać programiste który daje radę pisać trudne strony pokroju filmweba, podałby mi swoją literaturę ze wszystkich języków za opłatą i skupiłbym się już tylko na nauce i pisaniu. A tutaj nie jest tak prosto....

[Karister 729]

Strony www typu FilmWeb/sklep internetowy/serwis bankowy/rozbudowane forum/itp noszą nazwę Rich Internet Application (RIA) i ich napisanie to przekrój przez kilkanaście technologii. HTML i CSS to malutka część tego, co jest potrzebne. Duże serwisy są często robione przez kilkanaście osób przez rok czasu. Żeby się za to wziąć, potrzebujesz:

• średniej znajomości HTML i CSS
• podstaw baz danych wraz z SQL
• bardzo dobrej znajomości programowania obiektowego (OOP) i kolekcji
• dobrej znajomości języka związanego z technologią, którą wybierzesz – np. ASP.NET z C#
• z czasem przydadzą się podstawy JavaScriptu, ale na start zupełnie niepotrzebne

Każda z technologii (typu PHP, J2EE, ASP.NET) do pisania aplikacji webowych ma swój większy lub mniejszy zestaw Frameworków, czyli pakietów gotowych bibliotek i narzędzi, które służą do przyspieszenia/ułatwienia i ustandaryzowania pracy. Nauka ich użycia tak, by dobrze współpracowały ze sobą i standardowymi bibliotekami technologii, którą wybierzesz to będzie większość Twojej pracy w celu napisania aplikacji internetowej.

 

Załóżmy, że mamy stronę www, która pozwala nam podać swoje imię i ulubiony film oraz wyświetla wszystkie takie zgromadzone wpisy. Działa to w skrócie tak:

• Na samym dole jest serwer bazy danych, który w prostej tabelce musi trzymać pary nick–film:

  TABLE KINOMANI
  ------------------------
  | NICK | ULUBIONY_FILM |
  ------------------------
  | asia | Harry Potter  |
  | jan  | Agent 007     |
  ------------------------
  

• Z bazą komunikuje się oprogramowanie webowe, pisane np. w PHP/ASP.NET/J2EE. Oprogramowanie to uruchamiane jest przez serwer aplikacji webowej (czyli masz osobny serwer dla bazy danych i osobny dla apki webowej). Ta aplikacja webowa standardowo jest pisana tak, aby rozparcelować ją na warstwy (fragmenty kodu odpowiedzialne za pewną rzecz wydzielone są do osobnych plików).
  • Najniżej są obiekty o nazwie Value Object (VO). Odwzorowują one w kodzie programu dane, które są w bazie. Teraz w modzie jest programowanie obiektowe, więc będzie to coś w stylu:

    class KinomanVO
    {
        String nick;
        String ulubionyFilm;
    }
    

  • Warstwa Data Access Object (DAO). Służy do "gadania" z poziomu kodu z bazą danych. Zazwyczaj jest to SQL opakowany w kod lub coś podobnego. Do takiego mapowania tabel baz danych na obiekty w kodzie służą frameworki Object-Relational Mapping (ORM). Czyli gdzieś jest co takiego:

    String zapytanie = "SELECT * FROM Kinomani"
    List<Kinoman> listaKinomanow = ORM.execute(zapytanie);
    

    Framework ORM zazwyczaj przyjmuje zapytanie SQL jako parametr jakieś własnej metody i zwraca listę obiektów, które akurat są nam potrzebne. Taka lista jest zwyczajowo popychana do warstwy serwisu.
  • Warstwa serwisu przeprowadza logikę biznesową na liście zapodanej przez DAO. Na chwilę obecną to zupełnie nieistotne i w takiej prostej aplikacji niepotrzebne. Lista z kinomanami jest popychana do kolejnej warstwy. Może to być fasada.
  • Warstwa fasady może zbierać dane z kilku serwisów i jakoś je połączyć w całość. W tym prostym przykładzie niepotrzebne. Ale można wyobrazić sobie taką sytuację: jeden serwis/DAO zwraca listę kinomanów, drugi listę filmów granych w kinach. Logika biznesowa jakimś algorytmem dobiera propozycje filmów do obejrzenia dla konkretnych kinomanów. Tak skomponowane informacje fasada pakuje w obiekt zwany Data Transfer Object (DTO) i popycha dalej w górę. Przykład:

    class KinomanDTO
    {
        String nickKinomana;
        List<String> proponowaneTytuly;
    }
    

  • I sama góra, czyli widok. Może to być HTML pomieszany z wybraną technologią. Pomieszany, ponieważ sam HTML pozwala tworzyć strony statyczne, np. wyświetlając zawsze tych samych pięciu kinomanów. A tutaj jest strona dynamiczna, gdzie dane kinomanów mamy w liście, która przyszła z DAO/Fasady/Serwisu. Coś takiego:

    <table>
        <c:forEach items="${kinomani}" var="kinoman">
            <tr>
                <td>${kinoman.nick}</td>
                <td>&{kinoman.ulubionyFilm}</td>
            </tr>
        </c:forEach>
    </table>
    

    Do HTMLa jakiś CSS i gra.
  • Jest jeszcze pośrednik w komunikacji pomiędzy widokiem a fasadą/serwisem/DAO. To tak zwany kontroler. Jeśli użytkownik wejdzie na naszą stronę http://moja-strona.pl/listakinomanow, kontroler ładuje stronę, której odpowiada mapowanie /listakinomanow, wypełnia tak zwany model danymi o kinomanach i te dopiero wtedy są dostępne w widoku (HTML). Kontroler wystawia dane dla widoku wołając fasadę, która woła serwisy, które wołają DAO, które z kolei komunikują się bazą danych)
  • Istnieje wzorzec projektowy Model-View-Controller (MVC), który polega właśnie na wyodrębnianiu kodu modelu (dane), widoku i kontrolera.

Niezły obrazek obrazujący to wszystko:

 

http://img.viralpatel.net/2010/10/spring3-hibernate-application-architecture.png

 

Wzięty z tutoriala o kontaktach, wiec u nas kontakt to kinoman. A JSP to technologia Javowska współgrająca z HTML, czyli opisywany widok. Client to przegladarka internetowa. Ogólnie, całość powyższego przykładu pisana jest z perspektywy Javy, w której powstają wielkie komercyjne systemy. Nie jest to technologia, której użyjesz, gdy kolega powie "hej, nie zrobiłbyś mi fajnej strony internetowej?". Nie miałem nigdy styczności w lżejszymi technologiami, ale idea co do bazy danych i warstw aplikacji zapewne jest podobna.

 

Co do nauki, do popularnych technologii jest masa tutoriali w necie w postaci .pdf, video, obrazków, przykładów z gotowym kodem. Można z tego bardzo dużo się nauczyć. Kiedy się już ma ogólne pojęcie w temacie, można się zabrać za poważne książki, gdzie poruszane są bardziej zaawansowane tematy i w bardziej kompleksowy sposób. Z tutoriala zobaczysz, jak zrobić coś działającego, a wtedy w książkach można szukać, jakie są alternatywy, które lepsze, które gorsze.

 

Jeśli chodzi o samą Javę, to przykładowe materiały:

• najpierw nauka zwykłej Javy SE na programach działających w konsoli tekstowej. Kolekcje, referencje, ogólne zasady działania tego języka. Dobra strona poruszająca już zaawansowane tematy: http://javarevisited.blogspot.com/2011/04/top-20-core-java-interview-questions.html
• Do obsługi ORM w Javie jest framework pod tytułem Hibernate. Prosty tutorial:

  http://www.mkyong.com/hibernate/maven-hibernate-annonation-mysql-example/

• Kolejny framework Spring. Istotne rzeczy na start:

  http://www.mkyong.com/spring3/spring-3-hello-world-example/

  http://www.mkyong.com/spring/spring-dependency-injection-di/

• Kontroler ze Spring MVC:

  http://www.mkyong.com/spring-mvc/spring-mvc-multiactioncontroller-annotation-example/

• Walidacja pól:

  http://www.mkyong.com/spring-mvc/spring-3-mvc-and-jsr303-valid-example/

• Przykłady tutoriali spinających wiele informacji w jedno:

  http://gerrydevstory.com/2013/06/29/spring-mvc-hibernate-mysql-quick-start-from-scratch/

  http://viralpatel.net/blogs/spring3-mvc-hibernate-maven-tutorial-eclipse-example/

I to tyle. HTML i CSS to wierzchołek góry lodowej, żeby robić takie strony www, jak wspominasz. Bo tak naprawdę jest to zwykły program oparty na wielu, wielu technologiach. A w praktyce pojawia się wiele ciekawych rzeczy typu sesja, ciasteczka, żądania http, obsługa guzika back w przeglądarce, itd.

 

Jak pisałem, linki do tutoriali dałem konkretnie dla JavyEE, bo tę znam, ale nie twierdzę, że to jedyna słuszna technologia. Do tego wybrałem ulubione przeze frameworki, ale można je zastąpić innymi. JavaEE ma swoje wady i zalety. Jest ona raczej ciężka na start, bo istnieje do niej masa frameworków, które potrafią trochę tego samego, a trochę co innego i zazwyczaj w każdym z nich coś można zrobić na kilka sposobów. Niestety jest w tym się ciężko połapać przez pierwsze miesiące: co, po co i dlaczego. Ale to tylko kwestia chęci i zaparcia. Z lekkich rozwiązań na pewno jest PHP, ale zastanowiłbym się 3 razy, czy warto. Jest też chyba Ruby on Rails, ale nie zgłębiałem tematu.

 

Co do spotykania programistów, są fora branżowe:

http://stackoverflow.com/ (absolutnie no.1)

http://4programmers.net/

[Mistic92 68]

Świetnie napisane! Wyczerpujesz całkowicie temat. Ja jeszcze tylko napiszę, że warto również zainteresować się NoSQL Np MongoDB