ruby on rails silverlight smil svg - racunarstvo550.xyz. semestar/programiranje za... · web cms...
TRANSCRIPT
Što ćete naučiti Internet općenito
HTML
CSS
XML
XHTML
Javascript
DOM
DHTML
AJAX
jQuery
PHP
ASP.NET
CMS
Framework
2
Kako napraviti svoj web portal Web portal je web stranica ili skup web stranica koja
na jedinstven način okuplja informacije iz različitih izvora
Obično se bavi jednom temom
Web portal :
http://www.fesb.hr/
http://www.slobodnadalmacija.hr/
http://www.index.hr/
Hard way or easy way Hard way
Korištenjem znanja koja smo skupili:
Napraviti web stranicu sa linkovima na kategorije
Napraviti stranice za kategorije sa linkovima na članke
Napraviti stranicu sa člancima
Svakoj stranici dodati izbornik
Strogo voditi računa da sve stranice izgledaju jednako
.....
Srednji put Korištenjem znanja php/mysql napraviti Web
aplikaciju
Omogućiti upis teksta članka u bazu podataka
Napraviti php stranice koje kreiraju različite html stranice od članaka iz baze
Ovakva aplikacija naziva se CMS
Upravljanje sadržajem Upravljanje sadržajem je proces
organiziranja i integriranja dijelova sadržaja (tekst, grafika, i multimedijske isječke) i
tagiranje (XML, HTML, itd.) na najefikasniji način te
spremanje samo jedan put u repozitorij, poznat kao sustav za upravljanje sadržajem.
Organizirani sadržaj može se koristiti iznova (ponovna uporaba sadržaja) za razne publikacije
Sustav za upravljanje sadržajem (CMS) Content management system
Računalni sustav koji omoguæuje objavljivanje, uređivanje i modificiranje sadržaja, kao i
održavanja web sjedišta s centralnog mjesta
Pruža zbirku postupaka koji se koriste za upravljanje tijekom rada u kolaborativnom okruženju.
Ti postupci mogu biti ručni ili pomoæu računala.
Značajke CMS-a Dopuštanje velikom broju ljudi da dijele i pridonose
sadržaju
Kontrola pristupa podacima na temelju uloge korisnika
Olakšava pohranu i pretraživanje podataka;
Kontrola valjanost i usklađenosti podataka;
Izbjegavanje dupliciranja podataka
Olakšano generiranje izvješća
Poboljšana komunikacija među korisnicima
Web CMS (WCMS) Web CMS (WCMS) je programski sustav koji osigurava
alate za izradu web stranica, suradnju i administraciju, dizajniran
korisniku sa malo znanja o web programskim jezicima omogućava upravljanje web stranicom sa sadržajem s relativnom lakoćom.
Većina sustava koristi bazu podataka kao spremište sadržaja.
Omogućava predloške bazirane a css-u ili XSLT za oblikovanje prikaza podataka
Upravljanje se obično izvršava putem administratorskog sučelja (Back End CMSa) kojemu je pristup omogućen samo autoriziranim korisnicima, dok svi ostalo mogu pristupati sadržaju (Front End CMS-a)
Easy way Korištenje gotovog CMS sustava
Velik broj komercijalnih ili open source sustava
Wordpress
Joomla
Drupal
DotNetNuke
wordpress http://wordpress.org/
Trenutno najpopularniji i najčešće korišten CMS
Baziran na Php/mysql tehnologiji
Osmišljen za blog , ali pogodan za sve vrste web portala
Proširiv, dinamičan ...
Teme – definiraju osnovni izgled
Plugin-i omogućavaju dodavanje značajki
Widgeti – mali moduli
koji se dodaju na sučelje
joomla http://www.joomla.org/
Php/mysql tehnologija
Sveobuhvatnija ali i malo složenija za korištenje od wordpressa
Velik broj dodataka - moduli
Koristi objektno orijentirani pristup programiranju u php-u
Framework za upravljanje sadržajem otvorenog koda
Prati MVC pattern za izradu web aplikacija
Model-View-Controller Model - Predstavlja podatke određene aplikacije.
opisuje strukturu i ponašanje problema kojeg aplikacija rješava
View - Prikazuje prezentaciju predhodno modeliranih podataka.
predlošci prema kojim se prikazuju podaci korisniku.
Controller - Obrađuje korisničke zahtjeve
pokretač sustava, obrađuje zahtjeve korisnika, pokreće promjene modela, pokreće prikaz predloška
Kontrola toka aplikacije
Web application framework Okvir programa osmišljen na način da omogučava
razvoj dinamičkih web stranica, web aplikacija i web servisa
Uključuje uobičajene radnje koje se koriste u web razvoju
Nudi biblioteke za uobičajene konvencije:
Pristup bazi podataka
Uključivanje predložaka za dizajn (templates)
Autentikaciju i praćenje korisnika ...
Web application framework Većina gotovih Web application frameworka prati
MVC arhitekturalni pattern
Na taj se način razdvaja poslovna logika od prikaza te od podataka
Push-based ili Pull-based arhitektura:
Push based – podaci se “guraju” na prikaz te se oblikuju
Pull based – prikaz zahtjeva podatke
Symfony framework Web application framework napisan u php-u, prati
MVC arhitekturalni pattern
Besplatan software
Ubrzava razvoj web aplikacija
Doctrine objektno relacijski mapper – veza baze podataka i obektnog modela podataka
Automatsko generiranje koda
Podrška za slanje maila
....
Zend framework Može se koristiti kao framework ili kao biblioteka
Otvoren kod
Objektno orijenitran
Php5
Ruby on Rails RoR – Ruby on Rails
Open source web application framework
Ruby programski jezik
Zadnja verzija 3.0
Što je Ruby Objektno orijentirani programski jezik
Uredna sintaksa
Agile developement (rapid developement)
Uzete dobre osobine iz:
Smalltalk
Python
Perl
Što je Ruby 1990-e – Japan
U ostatku svijete popularan tek nekoliko godina
Nakon objave knjiga i uputstava na engleskom jeziku
Urban Dictionary
Crunchbase
...
Što je Rails Rails je open source Ruby framework
Razvoj web aplikacija (koje se povezuju sa bazom podataka)
Ideja:
Razviti jezik i framework kojim bi se višestruko ubrzala izrada web stranice
Bez gubitka kvalitete
Što je Rails Bazira se na jednostavnosti
Dva osnovna principa:
Less software
Pisanje što manje koda, što manje konfiguracije, izbjegavanje svega što komplicira sustav
Manje koda = manje grešaka
Jednostavnije razumjevanje koda
Convention Over Configuration
Convention Over Configuration U programiranju treba donijeti mnogo odluka, posebice ako
se programira sve “od nule”.
Kako organizirati datoteke
Kako konvencije o imenovanju koristiti
Kako komunicirati sa bazom podataka
...
Rails omogućuje zaobilaženje ovoga
Rails sam donosi odluke, ili ih barem pojednostavlja
Time se programer može usredotočiti na pravi problem
Convention Over Configuration Rails dolazi skoro bez konfiguracijskih datoteka
Bazira se na učestalim strukturama i konvencija imenovanja
Programer može prilagoditi Rails postavke svojim potrebama (ukoliko to želi)
Rails savjetuje da se postavke ne mijenjaju, te da se programer usredotoči na pravi problem
Bez ponavljanja DRY princip – don’t repeat yourself
Podatke koje se ponavljaju i često koriste u aplikaciji, potrebno je izdvojiti
Problem kad se ti podaci promijene
Primjer
Uspostava konekcije sa bazom podataka jednog korisnika (slanje username i passworda)
RoR: Objekti Sve je objekt
True, false su objekt
Brojevi su objekti
Klase su objekti
- pozivanje metode kod broja
- operatori su metode
RoR: Objekti Metode i varijable se mogu dodavati i brisati kod
objekta
Metode i varijable se mogu dodavati i brisati kod klasa
Čak se može manipulirati osnovnim klasama
Npr. String i Integer
RoR: Objekti
Napomena:
Ne postoji return u tijelu metode
U RoR: Metode uvijek implicitno vrate vrijednost zadnjeg izraza
Moguće je pomoću return vratiti nešto drugo i time prekinuti izvođenje metode, ali nije nužno to i učiniti
Self – ekvivalent this ($this u PHP)
RoR: Sintaksa ; na kraju retka nije obavezna (rijetko se i koristi)
Čak u određenim situacijama ni zagrade kod metoda nisu potrebne
Blokovi su određeni sa do i end
Lokalne varijable - počinju malim
Globalne varijable – započinju sa $
Konstante - počinju velikim slovom
Sve klase su konstante, jer počinju velikim slovima
Instance variable – počinju sa @
Varijable klase započinju sa @@
RoR: Sintaksa Metode često završavaju na ? Ili !
To nisu specijalni znakovi
Konvencija označavanja metoda
? -> upit objektu koji vraća Boolean
! -> metode koje su destruktibilne
RoR: Uvjeti Slično drugim jezicima, uz 2 iznimke
Moguće je staviti uvjet nakon iskaza
Postoji unless
RoR: Simboli Simboli započinju sa “:”
Slično ENUM u C-u
Slično (ali i različito) Stringovima
Ne okupiraju mjesto u memoriji
Često se šalju kao argumenti metodama ili kao pokazivači na metode ili varijable
RoR: Primjer Rails appname
Kreira se aplikacija i stvaraju datoteke
app/ - najvažniji
MVC
script/ - korisne skripte
test/ -
RoR: primjer app/controllers/hello_controller.rb
app/view/hello/say.rhtml
Pokrećemo otvaranjem
http://www.mojsite.com/cookbook/hello/say
Silverlight Omogućuje razvoj “next generation” MS .NET
baziranih web aplikacija
RIA za web
Rich interactive applications
Media
Cross-platform i cross-browser
XAML Extensible Application Markup Language
Koristi se za opis korisničkog sučelja
Koristi se u .NET Framework 3.0
WPF (Windows Presentation Foundation)
Silverlight
...
Deklarativan jezik zasnovan na XML
Koristi se za inicijalizaciju strukturiranih vrijednosti i objekata
XAML izražajnost
mogućnost da opišeu gotovo sve korisničke kontrole koje dolaze u .NET Frameworku (button, toolbar, combo box…)
mogućnost da se kroz njega kreiraju i definiraju neke nove korisničke kontrole
XAML Sadržajnost
XAML opisuje mnogo više od samih vizualnih elemenata sučelja
podrška za stilove (styles), predloške (templates), povezivanje s izvorima podataka (data binding) i animacije
Što je Silverlight?
Silverlight konkurencija - Flash Browser plug-in: cross-browser, cross-platform
Korištenje danas: Animirane reklame, Video
Korištenje sutra: Aplikacije
Zašto Silverlight umjesto Flasha?
Silverlight je u biti Flash + .NET
Zašto Silverlight? Visoka interaktivnost
Vektorska grafika
Naravno, i bitmape su podržane
Odlična podrška za medije (audio/video)
Poznati razvojni alati
Expression Studio (Designer, Media Encoder, Blend)
Visual Studio (uz odgovarajući plug-in)
XAML
JavaScript
Razvoj na Silverlight platformi Programska logika se piše u JavaScriptu
AJAX se “lijepo slaže” sa Silverlightom
Potreban samo tekst editor
Verzija 2.0 (do nedavno je nosila oznaku 1.1) će podržavati
Posebno prilagođeni .NET runtime (class library, C#, VB.NET...)
Dynamic Language Runtime (Python, Ruby...)
WPF / Silverlight – Prednosti: Vector based vs. pixel based
Skalabilnost– Dobro izgleda pri različitim rezolucijama
XAML – Sličan HTML-u
Deklarativan
Dizajneri i programeri rade svoj posao paralelno
Silverlight verzije 1.0
RTM Rujan 2007
Pozadinski kod – samo JavaScript
1.1 / 2.0 Alpha proljeće 2007.
Beta početkom 2008.
RTM treća četvrtina 2008.
Pozadinski kod - .NET jezici C#, itd.
Djelimična .NET biblioteka klasa
Podržani jezici Silverlight 1.0
Javascript
Silverlight 2.0
C#
VB.NET
Dynamic Lanaguages Supported
Microsoft JScript
IronPython
IronRuby
...
Silverlight Lightweight
Baziran na .NET
Kod u C# ili VB.NET
Korištenje poznatih biblioteka klasa
Razvijen GUI
Vector based
Siguran
Najvažnije osobine Silverlighta 2D grafika
Animacija
Unos pomoću miša i tastature
Mediji (WMV, WMA, MP3...)
Slike (JPG, GIF, PNG)
Tekst
HTTP Downloader
XAML parser
JavaScript DOM
Grafika i animacija 2D grafika
Standardni oblici, masking i clipping
Transformacije: translacija, rotacija, skaliranje, skew, matrica
Animacija
Promjena vrijednosti svojstva tijekom vremena
Linearne, diskretne i spline animacije
Tipovi koji se mogu animirati
Double, Point, Color
I grafika i animacija se najčešće definiraju pomoću XAML-a
Primjer: Korak 1 Kreirati HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Silverlight Hello World</title> </head> <body> </body> </html>
Primjer: Korak 2 Kreirati Silverlight kontrolu
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Silverlight Hello World</title> </head> <body> <object data="data:application/x-silverlight-2," type="application/x- silverlight-2" id=”testControl” width=”200″ height=”100″> </object> </body> </html>
Primjer: Korak 3 Kreirati XAML
Canvas smo učili već
<?xml version=”1.0″ ?>
<Canvas xmlns=”http://schemas.microsoft.com/client/2007″> <TextBlock Text=”Hello World!” /> </Canvas>
http://msdn2.microsoft.com/en-us/library/ms754278.aspx
http://msdn2.microsoft.com/en-us/library/aa970851.aspx
Primjer: Korak 3 <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head> <title>Silverlight Hello World</title> </head> <body> <!– Define XAML content. –> <script type=”text/xaml” id=”xamlContent”> <?xml version=”1.0″ ?> <Canvas xmlns=”http://schemas.microsoft.com/client/2007″> <TextBlock Text=”Hello World!” /> </Canvas> </script> <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" id=”testControl” width=”200″ height=”100″> </object> </body> </html>
Primjer: Korak 4 <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head> <title>Silverlight Hello World</title> </head> <body> <!– Define XAML content. –> <script type=”text/xaml” id=”xamlContent”> <?xml version=”1.0″ ?> <Canvas xmlns=”http://schemas.microsoft.com/client/2007″> <TextBlock Text=”Hello World!” /> </Canvas> </script> <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" id=”testControl” width=”200″ height=”100″> <param name=”source” value=”#xamlContent” /> </object> </body> </html>
Flash Omogućuje izradu interaktivnih animacija na Web-u
Koristi vektorsku grafiku, isto kao i Silverlight
Dostupno u više rezolucija, kvaliteta ostaje ista
Ne zahtjeva programerske vještine
Jednostavan za naučiti
Flash Nezavisnost od platforme
nema zavisnosti od ekranske rezolucije
nema gubitka podataka jer nema ni komprijesije
veličina .swf datoteke je manja od analogno tome rađene HTML stranice
Flash Učitava se relativno brzo
Rasprostanjen i večina browsera ima instaliranu podršku
Dozvoljava interaktivnost u animaciji
Flash Animacija i interakcija
elemenati Flasha su objekati koji mogu reagirati na određene događaje
putem tipkovnice
putem miša
sadržaj filma u Flashu može se mjenjati
u okviru Flasha se za upravljanje kontrolom filma koristi jezik ActionScript
ActionScript kontrola objekata u Flash filmovima
kreiranje navigacijskih i interaktivnih elementa
za kreiranje web aplikacija
ActionScript Objektno orijentiran jezik
Klase, objekti, nasljeđivanje, polimorfizam
Odlična podrška za evente
Uz pomoć ActionScripta moguće je “crtati objekte” na DisplayListe
SMIL Synchronized Multimedia Integration Language
Jezik kojim se opisuju audiovizualne prezentacije
Powerpoint na Webu
Jednostavan za naučiti i razumjeti
Napisan u XML-u
Za programiranje može se koristiti tekst editor
W3C recommendation
SMIL Internet prezentacije
Prikazivanje različitih tipova podataka (tekst, audio,...)
Prikazivanje više podataka odjednom
Prikaz podataka sa različitih servera
Linkovi na druge SMIL prezentacije
Kontrolna traka (start, stop, ...)
Definiranje sekvenci i duljine trajanja elemenata
Pozicioniranje i vidljicost elemenata
SMIL Dodavanje SMIL u HTML (samo Internet Explorer):
Dodati time namespace u <html> tag
Dodati <?import> element da se doda time namespace
Dodati <style> element da se definira klasa “time”
SVG Scalable Vector Graphics
Definiranje vektorske grafike na Web-u
Grafika u XML formatu
Svaki element i atribut se može animirati
W3 standard
3D na Web-u kao standard?
Računalna grafika unutar preglednika
OpenGL za Web = WebGL
Canvas3D
http://www.khronos.org/webgl/
http://learningwebgl.com/blog/?page_id=1217