Ruby on Rails

Silverlight

ActionScript

SMIL

SVG

Š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

Ostali frameworci Django – python programski jezik

Ruby on Rals – ruby

Yii – php

....

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

Twitter

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: Petlje Rijetko se koriste for i while

Ovo je učestali način izvršavanja petlje u RoR

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

“Ugradnja” Flash-a u HTML Flash treba snimiti sa .swf nastavkom

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 Operatori

Vrlo slično ostalim programskim jezicima

Uvjeti

ActionScript Petlje

Također slično drugim programskim jezicima

Nizovi

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 markup Case sensitive

Tagovi moraju biti lowercase

<body> je obavezan, <head> nije obavezan

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”

SMIL Timing

SMIL Sekvence Tag <seq>:

SMIL Tekst sekvenca

SMIL Paralelni elementi Tag <par>

SMIL Animacije (transitions) Tag <transitionfilter>

SMIL media elementi

SMIL media elementi primjer <video>

SVG Scalable Vector Graphics

Definiranje vektorske grafike na Web-u

Grafika u XML formatu

Svaki element i atribut se može animirati

W3 standard

SVG primjer

SVG u HTML-u 3 načina:

<embed>

<object>

<iframe>

SVG oblici <rect>

<circle>

<ellipse>

<line>

<polygon>

<path>

SVG efekti Filteri

Npr. Gaussian Blur

Gradijenti

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

Što ćete naučiti Internet općenito

HTML

CSS

XML

XHTML

Javascript

DOM

DHTML

AJAX

jQuery

PHP

ASP.NET

Ruby On Rails

MS Silverlight

FLASH, SMIL, SVG

...

83