Technologie internetowe w programowaniu. Przegląd narzędzi programisty www. Przegląd frameworków (głównie front-end) dr Tomasz Jach Instytut Informatyki, Uniwersytet Śląski dr Tomasz Jach • WWW: • E-mail: • Adres: Instytut Informatyki ul. Będzińska 39 41-200 Sosnowiec Pokój 214 • Telefon: 32 3689765 Zaliczenie zajęć: kolokwium + projekt + praca na zajęciach. Plan zajęć 1. Intro 2. Bootstrap, Foundation, Zimit 3. jQuery, AJAX 4. AngularJS, NodeJS 5. Html5 6. Java EE 7. GIT, BitBucket, SVNs GitHub Student Pack https://education.github.com/pack GitHub Student Pack • ATOM – edytor kodu (free) • Bitnami – aplikacje w chmurze (49$/m-c - rok) • CrowdFlower – współpraca programistyczna (2500$ / m-c – do końca życia) • DigitalHosting – hosting stron w chmurze (100$) • DNS Simple – hosting DNSów (3$/m-c – 2 lata) • GitHub – zarządzanie kodem, CVS (7$ / m-c) • HackHands – helpdesk programistyczny (25$) • NameCheap – domena + certyfikat SSL (18$/rok) • Orchestrate – bazy danych (49$/m-c) • Screenhero – współdzielenie pulpitu (9,99$/m-c) • SendGrid – kampanie mailowe (15K maili / m-c) • Stripe – obsługa płatności webowych (brak opłat do 1k $) • Unreal Engine (20$ / m-c) Programy on-line http://pl.fakenamegenerator.com/ Aplikacja służy do generowania pełnego zestawu danych osobowych (wraz z mailem, który działa!). Przydatne dla celów testowych. Programy on-line http://bugmenot.com/ Ile razy dany zasób był dostępny tylko dla osób zalogowanych? Ile razy tworzyłeś konto w serwisie tylko po to, aby ściągnąć jeden plik? Serwis ten przechowuje takie „jednorazowe” loginy i hasła do serwisów internetowych. Programy on-line http://www.openclipart.org/ Największy zbiór gotowych rysunków do wykorzystania w prezentacjach i nie tylko. Programy on-line http://www.ffonts.net/ Największy zbiór czcionek (uwaga na polskie znaki). Programy on-line http://freemusicarchive.org/ Darmowe archiwum muzyki, także do wykorzystania komercyjnego. Programy on-line http://colorexplorer.com/ Ogromne narzędzie do wyboru kolorystyki. Umożliwia wybór koloru, dobór koloru z bibliotek (szablonów), ale przede wszystkim dopasowanie kolorów do siebie (color matching). Bootstrap Bootstrap Bootstrap - elementy • Bardzo rozbudowany zestaw CSSów: • Ogromna liczba gotowych komponentów do użycia (gotowe snippety, ikony, etykiety, przyciski i inne) • Gotowe skrypty JS do popularnych czynności (okienka modalne, popupy, alerty, przejścia) • Całość możliwa do personalizacji (tj. nie trzeba dołączać wszystkiego) Foundation Foundation Foundation - elementy • The Grid – system gridowego układania elementów na stronie • Buttons – ostylowane przyciski • Navigation – elementy nawigacyjne • Plugins – dodatkowe wtyczki Znacznie mniej niż w Bootstrapie. Zimit Zimit Zimit - elementy • Właściwie to sam system gridowy • Trochę styli (głównie nagłówki) • Kilka komponentów (tree, menu, pagination, itp.) • Największa zaleta: całość ma 84kB! AJAX • AJAX (ang. Asynchronous JavaScript and XML, asynchroniczny JavaScript i XML) – technika tworzenia aplikacji internetowych, w której interakcja użytkownika z serwerem odbywa się bez przeładowywania całego dokumentu, w sposób asynchroniczny. Ma to umożliwiać bardziej dynamiczną interakcję z użytkownikiem niż w tradycyjnym modelu, w którym każde żądanie nowych danych wiąże się z przesłaniem całej strony HTML. http://pl.wikipedia.org/wiki/AJAX Biblioteki powiązane z AJAXem • Prototype - biblioteka ułatwiająca korzystanie z możliwości oferowanych przez AJAX • jQuery - biblioteka ułatwiająca korzystanie z możliwości oferowanych przez AJAX • Ext - dawniej rozszerzenie Prototype, Jquery oraz YUI obecnie samodzielna biblioteka • Script.aculo.us - rozszerza Prototype ułatwiając tworzenie animacji i interfejsów • MooTools - modułowa biblioteka AJAX zawierająca również ułatwienia do tworzenia efektów wizualnych • Yahoo! UI Library - biblioteka narzędziowa ogólnie dla DHTML • Dojo Toolkit - biblioteka narzędziowa ogólnie dla DHTML • AJAX.OOP - biblioteka narzędziowa stworzona dla AJAX • picoAjax - prosta i szybka biblioteka JavaScript ułatwiająca korzystanie z możliwości oferowanych przez technikę AJAX. http://pl.wikipedia.org/wiki/AJAX jQuery jQuery http://try.jquery.com/ jQuery - elementy • W sumie łatwiej byłoby napisać, czego nie ma… • Najważniejsze komponenty: – DOM Traversal and Manipulation – Event Handling – Ajax AngularJS • otwarta biblioteka języka JavaScript, wspierana i firmowana przez Google, wspomagająca tworzenie i rozwój aplikacji internetowych na pojedynczej stronie. Zadaniem biblioteki jest wdrożenie wzorca Model-View-Controller (MVC) do aplikacji internetowych, aby ułatwić ich rozwój i testowanie. http://pl.wikipedia.org/wiki/AngularJS AngularJS • Angular dodaje swoje własne tagi do HTMLa • Pozwala na łatwe podpięcie funkcji („Directives”) JS do kodu HTMLowego • Wg twórców powstał, aby znieść ograniczenie statycznego charakteru HTMLa NodeJS NodeJS • Programujemy po stronie serwera. • Za wszystkim stoi Google • Zaczeło się, bo Ryanowi Dahlowi brakowało funkcjonalności push znanej z Gmaila HTML5 HTML5 • HTML praktycznie zdefiniowany od nowa • Mnóstwo nowych tagów i możliwości • Semantyka > Syntaktyka HTML5 • Nowe tagi: section, article, header, footer, nav, video, audio, mark, progress, ... • Nowe typy pól "input": tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, color. • Nowe atrybuty elementów formularzy: autofocus, required, autocomplete, min, max, multiple, pattern, step, ... • Możliwość osadzenia MathML i SVG bezpośrednio w dokumencie, zupełnie jak w XHTML • HTML 5 nie zawiera żadnych elementów prezentacyjnych • HTML 5 nie jest podzielone na żadne tryby – nie ma elementów przestarzałych. http://pl.wikipedia.org/wiki/HTML_5 JavaEE JavaEE RCS • System kontroli wersji (ang. version/revision control system) jest to oprogramowanie służące do: – śledzenia zmian głównie w kodzie źródłowym – pomocy programistom w łączeniu i modyfikacji zmian dokonanych przez wiele osób w różnych momentach. Rodzaje repozytoriów • Wolnodostępne systemy • svk kontroli wersji: – Zamknięte (własnościowe) – Scentralizowane: systemy kontroli wersji: • BitKeeper firmy BitMover • RCS • Code Co-op firmy Reliable • CVS Software • Subversion • Perforce firmy Perforce • GNU CSSC, klon SCCS Software • JEDI VCS • Rational ClearCase firmy – Rozproszone: IBM • Bazaar • Sablime firmy Lucent Technologies • Codeville • StarTeam firmy Borland • Darcs • Visual SourceSafe firmy • Git Microsoft • GNU Arch • Visual Studio Team • Mercurial Foundation Server firmy • Monotone Microsoft Jak to w ogóle działa? Lokalnie vs. globalnie Status pliku Zabawę czas zacząć • https://code.google.com/p/msysgit/download s/list Zabawę czas zacząć • https://code.google.com/p/gitextensio ns/ A na deser - GitHUB Przydatne materiały • https://code.google.com/p/msysgit/downloads/l ist • https://code.google.com/p/gitextensions/ • https://help.github.com/articles/set-up-git • http://nathanj.github.com/gitguide/tour.html • http://codeasp.net/blogs/vivek_iit/microsoft- net/1881/how-to-use-github-with-visual-studio .