Oktató: Nagy Ágoston
Kredit: 2
Számonkérés módja: GY/Gyak.
A tantárgy programja:
A hallgatók átfogó képet kapnak a digitális technológiákban elterjedt szabványokról, formátumokról, protokollokról. A tantárgy megalapozza a későbbi feladatok elkészítésének, publikálásának, feldolgozásának alapjait. A kurzus során néhány egyszerű gyakorlattal (egyszerű honlap készítése, forráskódjának elemzése) megismerkednek a következő online technológiák alapjaival: html, css, javascript, beépülő tartalmak
2010.11.25 CSÜTÖRTÖK
szöveg renderelés és átlátszóság processingjs-ben:
(katt a képre, hogy lásd a példát)
a fenti példa forráskódja:
PFont myFont; // új font változó létrehozása
void setup()
{
size(200, 200);
myFont = createFont("Arial", 36); // a lokális gép fontkészletéből meghívja az arial betűtípust, 36-os méretben
textFont(myFont); innen kezdve a kiirandó szöveg a myFont-ba behívott betűtípus és méret lesz
}
void draw()
{
background(#ffffff); // fehér háttér beállítása hexadecimális színértékkel
fill(0,0,0); // innen kezdve feketével töltjük ki a formákat (tehát kirakunk egy fekete ellipszist a következő sorral)
ellipse(mouseX,mouseY,60,60);
fill(255,255,255); // innen viszont fehér a kitöltés színe, tehát az alább megjelenítendő szöveg fehér lesz
textAlign(CENTER);
text("SZEVASZ", 100, 100);
}
2010.11.22 HÉTFŐ
javascript alapú animáció és vizualizáció (online is szerkeszthető): processingjs
(katt a képre, hogy lásd a példát)
a fenti példa kódja:
int mover; // változót létrehoz
void setup() // egyszer lefut minden ami a setup-ba kerül
{
background(#000000); // háttér fekete
size(400, 400); // méret
mover = 0; // változó kzdetben legyen 0
}
void draw() // fut folyamatosan, mint a frame-ek egy filmben
{
stroke(255,255,255,40); // körvonal legyen fehér
fill(255,0,0,5); // kitöltés legyen piros
mover += 1; // minden frame-ben növeljük a változó értékét 1-el
if(mover>width) // ha a változó értéke nagyobb lesz mint a felület szélessége
{
mover = 0; // akkor legyen ismét 0 a változó értéke
}
ellipse(mover,40,10,10); // rakjon ki egy ellipszist, amely x tengelyen a 'mover' változó értékét veszi fel, y-on 40 pixelt, mérete 40x40
ellipse(mouseX,mouseY,50,50); // ellipszis, pozíciója mindeig vegye fel az egér x,z pozícióját, mérete 50x50
}
a fenti egyszerűsített rajzoló kód szintén használható layereken, akár egy kép csak interaktív tartalommal.
LINKEK (javascript & the open web "eyevegetables")
http://hascanvas.com/
http://www.chromeexperiments.com/
http://potatoland.org/
http://jodi.org
-------( AZ ALÁBBI TÉMAKÖRÖKBŐL LESZ A TESZT )-------
javascript fogalmak
változó - saját elnevezésű objektumhoz értéket rendelhetünk:
var a = 10;
var b = 5;
var c = 10 * 5;
(az eredmény 50 lesz)
megismert függvények (parancsok)
saját készítésű függény:
function név()
{
// kód ami lefut
}
nyelvbe beépített függvények:
document.Write() - html dokumentumba generál szöveget
Math.random() - véletlenszám generátor 0-1 között
kód használata
- embed (html-be beépül)
- külső file (html melletti külső .js file-ra hivatkozik)
2010.11.15 HÉTFŐ
css fogalmak
egy-egy szabály (class) a következőképpen épül fel
.szabályneve {
tulajdonság: paraméter;
tulajdonság: paraméter;
}
például
.kiemelt {
color: #ffffff;
font-size: 16px;
}
html tag-ek
html - dokumentum kezdete/vége
head - fejléc, ezt értelmezi először a böngésző
body - a megjelenitett tartalom
img - kép
a - hiperhivatkozás
object - beágyazott tartalom (flash, java, videok)
p - bekezdés, paragrafus
div - layer
hexadecimális színrendszer fogalma
Példakódok letöltése
2010.11.08, HÉTFŐ
Multimédia, újmédia - fogalma, kontextusa (kommunikációelméleti alapfogalmak)
- digitális jelfeldolgozás (DSP)
felbontás (bitmélység, mintavételezési ráta),
tömörítési típusok: veszteséges vs nem veszteséges (arj, zip, tar, flac)
színrendszerek (additív, szubsztraktív)
színcsatornák
File formátumok, tömörítések
- állókép (online / offline)
vektoros (pdf, eps, svg), raszteres (jpg, tiff)
dpi, színmélység
- mozgókép (online / offline)
színrendszerek
konténer paradigma
kódolás: mpeg4, h264, mjpeg, divx, ogg
file formátumok: avi, mov, flv, ogg
- hang (online / offline)
hangrendszerek (sávok szerint)
formátumok: mp3, ogg, flac, wav, aiff
- interaktív formátumok (online / offline)
mitől interaktív: kapott események kiértékelése és válaszadás
swf, java, javascript, natív, futtatható alkalmazások (.exe, .dmg)
alap koordinátarendszerek (3D vs 2D)
Ajánlott ingyenes szoftverek multimédia tartalmak kezelésére
http://dugas.acadnet.ca/free_programs.html
Hálózat (protokollok)
- fizikai réteg
adsl (Asymmetric Digital Subscriber Line)
isdn (Integrated Services Digital Network)
ethernet
- adatkapcsolási réteg
IEEE 802.11 WiFi
ZigBee
- hálózati réteg
IPv4 (internet protokoll)
- session réteg (sockets)
alkalmazás réteg
dns (Domain Name System) http, ftp, sftp, html, xml
- helymeghatározás
gps, rfid
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1. hét
- informatikai, multimédia alapfogalmak
- feldolgozás: digitalizálás (felbontás, színmélység, tömörítés, kép/video formátumok
- A hálózat fogalma (centralizált, decentralizált, disztributív)
- Hálózati protokollok (HTTP, HTTPS, FTP stb)
2. hét
- egy honlap “anatómiája” (HTML/CSS/XML/JAVASCRIPT)
- beágyazott tartalmak
- böngésző, mint operációs rendszer (chromeOS: google szolgáltatásai, online
photoshop stb)
- wiki
3. hét
- rövid teszt, egyórás feladat készítése (egyszerű webfelület, megadott témában)
- kitekintés:
keresési algoritmusok (page rank, google)
botok (szokások elemzése személyes weboldalon, web2-es hálózatokban)
spam / spam szűrés, irányított reklám
A tantárgy teljesítesének feltétele
- az órákon való részvétel
- az órákon készült feladatok (szerkesztett weboldal), gyakorlatok bemutatása
- sikeres vizsga (írásbeli teszt)
Osztályozás szempontja: a teszt eredménye (50%) és a munkák értékelése (50%)
