Személyes eszközök
Navigáció
Keresés

 
Eszközök

A InfoWiki wikiből

(Változatok közti eltérés)
a
(→Vizsga)
1. sor: 1. sor:
 +
== TAB megvalósítása (1) ==
 +
 +
Készítsünk el egy olyan HTML lapot, amelyen az alábbi három "tab" fül található
 +
* bemutatkozás
 +
* elérhetőségek
 +
* hírek
 +
Az egyes tab fülek tartalma legyen egy kis kép és rövid kis szöveg (minden tartalom más-más legyen).
 +
Lehessen váltani a tab fülekre kattintva a tartalmak között. A megvalósítás ''saját JavaScript'' megoldás
 +
legyen. [''5 pont'']
 +
 +
== TAB megvalósítása (2) ==
 +
 +
Készítsünk el egy olyan HTML lapot, amelyen az alábbi három "tab" fül található
 +
* reklámok
 +
* társoldalak
 +
* büszkeségeink
 +
Az egyes tab fülek tartalma legyen egy kis kép és rövid kis szöveg (minden tartalom más-más legyen).
 +
Lehessen váltani a tab fülekre kattintva a tartalmak között. A megvalósításhoz ''jQuery TABS'' -t
 +
használjunk. A weboldal első tartalma (reklámok) a html letöltődése után azonnal kerüljön be,
 +
de a további tab fülek tartalma csak akkor töltődjön le, ha rákattintanak (content via ajax).
 +
A tab fülek tartalma ezért (csak a belső tartalom) külön pici html fileokban tárolódjon a szerveren.
 +
[''8 pont'']
 +
 +
 +
== Help panel ==
 +
 +
Készítsünk olyan beviteli formot, amely függőlegesen két részre tagolható. Bal oldali részen vannak
 +
a tényleges beviteli mezők (név, email, város, lakcím, születési év, stb), jobb oldalon egy segítő
 +
leírás van. Ezen jobb oldalon mindig az aktuális beviteli mezőhöz tartozó szöveges leírás olvasható
 +
(mit kell oda beírni, miért kell beírni, mire kell ügyelni beírás közben, mik a szabályok arra a mezőre
 +
vonatkozóan stb). [''5 pont'']
 +
 +
== Dátum bekérés ==
 +
 +
Készítsünk beviteli formot, amely két dátumot kér be. A dátumokat a YYYY.MM.DD formában kell bevinni.
 +
Mindkét dátum mellé a bevitel végén (mező elhagyás) írjuk ki a beírt dátumhoz tartozó hónap nevét, és hogy a dátum
 +
a héten belüli melyik napra esik (pl. kedd). A két dátum között maximum 10 nap különbség lehet, az első dátumnak
 +
kell a kisebbnek lennie. Mindkét dátumnak munkanapra kell esnie. [''6 pont'']
 +
 +
 +
== F1 segédablak ==
 +
 +
Készítsünk beviteli formot, melybe más mezők mellett a lakóhelyünk megyéjének nevét,
 +
és megyeszékhelyének nevét is be kell írni (pl "heves megye" esetén "eger"). A bevitel
 +
során a megye input mező mellé helyezzünk el "help" feliratú gombot, melyre kattintva
 +
külön ablak nyílik meg, felsorolva egymás alatt a 19 megye és megyeszékhely nevét. A
 +
megfelelő megye nevére kattintva ez a külön ablak bezáródik, de előtte beíródik a form
 +
két mezőjébe a kiválasztott érték. [''10 pont'']
 +
 +
== Reguláris kifejezések ==
 +
 +
Reguláris kifejezések segítségével ellenőrízzük le, hogy a beviteli formunkon [''6 pont'']
 +
* a születési év valóban pozitív egész szám-e
 +
* az email cím valóban email cím formátumú-e
 +
* a "honlap" részre valóban web url-t írtak-e be
 +
 +
 +
== Regisztrációs ablak ==
 +
 +
Készítsünk regisztrációs ablakot, melyben a választott login nevet AJAX-os JSON script
 +
ellenőrzi le, hogy szabad-e. Amennyiben szabad, úgy a beviteli mező mögötti zöld pipa,
 +
különben egy piros felkiáltójel jelöli meg. A feladat megoldhato jQuery-vel és saját
 +
AJAX rutinokkal is. [''8 pont'']
 +
 +
== Beviteli kiegészítés ==
 +
 +
A beviteli formon a "legközelebbi nagyváros" rovatba egy nagyváros, pl. megyeszékhely
 +
nevét kell írni. A gépelés során adjunk gépelési segítséget (autocomplete), amennyiben
 +
pl. már begépelte hogy "mi" akkor kínáljuk fel neki a "miskolc" lehetőséget. Amennyiben
 +
legalább 2 betűt begépelt, akkor kell az aktuális input mező értéket ("mi") elküldeni
 +
a szervernek AJAX-al, aki visszaküldi a lehetséges kiegészítéseket (akár adatbázisból
 +
kiválasztva select-el a szóba jöhető városok neveit). A kommunikáció JSON-el működjön.
 +
A megoldásnak nem kell feltétlenül sql adatbázison alapulni, néhány betűre működjön
 +
akár "if"-ek segítségével is. A megoldáshoz használható saját AJAX megoldás, és jQuery
 +
is. [''8 pont'']
 +
 +
== Sok file upload ==
 +
 +
A beviteli formunkra helyezzünk el file upload mezőt. Amennyiben kitöltik a file upload
 +
mezőt, úgy lehessen lenyomni egy "add" feliratú gombot. Ekkor egy új file upload mező
 +
jelenjen meg. Igy maximum 10 file upload mezőt lehessen felrakni a formra. Természetesen
 +
submit-kor akár mind a 10 file upload feltöltődjön (érdemes ekkor kis méretű fileokat
 +
kiválasztani, mivel a fileok tartalma ténylegesen feltöltésre kerül). Azt is oldjuk
 +
meg, hogy amennyiben valamelyik file upload mezőt kitöltöttük, de meggondoltuk magunk,
 +
és mégsem akarjuk feltölteni a filet, akkor az adott file upload melletti "töröl" gombra
 +
kattintva azt a file upload mezőt ki lehessen törölni a formról. [''14 pont'']
 +
 +
 +
== Környezetérzékeny form ==
 +
 +
Amennyiben a regisztráció során egyszerűsített vagy teljes közül választanánk,
 +
a megfelelő mezőkből épüljön fel a form. A megfelelő form a szerverről töltődjön le
 +
a kiválasztás után AJAX-osan. A megoldáshoz használható saját AJAX megoldás, és jQuery
 +
is. [''7 pont'']
 +
 +
== Listbox-ok közötti átrakás ==
 +
 +
Egy form-on helyezzünk el egymás mellett két listbox-t. Az egyik (bal oldali) legyen
 +
feltöltve, pl együttesek neveivel. A jobb oldali induláskor legyen üres. Mindkét
 +
listbox-ban lehessen egyszerre több elemet is kiválasztani (multiselect).
 +
A két listbox között helyezzünk el 4 gombot:
 +
* egy elem átrak balról jobbra (ekkor ha bal oldalon kiválasztunk egy item-t, és lenyomjuk ezt a gombot, akkor az item balról törlődjön, és jelenjen meg jobb oldalon).
 +
* minden kiválasztott elem átrak balról jobbra (ugyanez csak több elemre)
 +
* egy elem visszarak jobbról balra (értelemszerűen)
 +
* minden kiválasztott elem átrak jobbról balra (értelemszerűen)
 +
 +
A bal oldali listbox alatt legyen még három gomb:
 +
* minden elem kiválasztása (értelemszerűen)
 +
* kiválasztások törlése (egyik elem se legyen kiválasztva)
 +
* kiválasztás invertálása (amik ki vannak választva azok ne legyenek, és fordítva)
 +
[''16 pont'']
 +
 +
== Listboxba elemek felvétele és törlése ==
 +
 +
Helyezzünk el egy formon egy checkboxot, egy textbox-t (input type text), és alatt egy listboxot.
 +
A listbox induláskor legyen üres. A textboxba adatokat (pl számok, neve) írhatunk be.
 +
A checkbox azt szabályozza, hogy a lista elemei egyediek kell legyenek-e vagy sem.
 +
A textbox mellett legyen "felvesz" gomb. Ezen gomb lenyomásakor a textboxba beírt érték
 +
kerüljön be a listbox-ba. Amennyiben a checkbox épp be van pipálva (egyedi értékek), úgy
 +
csak akkor kerülhet be az érték a listboxba, ha ott még ez az érték nem szerepelt volna.
 +
Chekcbox nem kipipált esetben mindenképp kerüljön be a listboxba az érték.
 +
 +
A listbox alatt legyen egy "törlés" gomb, melyre kattintva a listboxba kiválasztott elem
 +
törlődjön ki a listboxból. Legyen ezen felül szintén alatta egy "mindent töröl" gomb, melyre
 +
kattintva a listbox minden eleme törlődjön ki.
 +
[''12 pont'']
 +
 +
== Képek cserélve ==
 +
 +
Egy div-ben helyezzünk el legalább egy img elemet. Ez az elem a weblapunk banner képét fogja tartalmazni.
 +
A weblapnak azonban több banner képe is van (legalább három). Oldjuk meg, hogy a banner képek cserélődjenek
 +
5 másodpercenként az oldal újratöltődése nélkül is. A megoldáshoz használható jQuery is.
 +
[''6 pont'']
 +
 +
== Képek scroll ==
 +
 +
A feladat ugyanaz mint a "képek cserélve", de itt a banner képek úgy cserélődjenek, hogy
 +
miközben az aktuális bannerkép kiúszik balra, a következő beússzon jobbról (mint a diavetítős
 +
képek esetén). A megoldáshoz használható jQuery is.
 +
Konkrétan 3 képre: [''6 pont''], tetszőlegesen sok képre: [''9 pont''].
 +
== Vizsga ==
== Vizsga ==
-
Az alábbi funkciókkal bíró weblap elkészítése:
+
Egy megoldás egy zip file (mely tartalmazza a szükséges html, css, js, esetleg php fileokat is). A megoldások
-
* regisztráció, belépés kezelése az oldalra
+
maximum annyi pontot érnek, amennyi a feladat mellett megjelölésre került. A 2-eshez szükséges pontszám
-
* valamiféle űrlapos adatrögzítés kezelése (kliens és szerver oldali ellenőrzéssel, hibakijelzés)
+
20 pont. Utána 5 pontonként van emelkedés. Így az 5-öshöz 35 pontot kell összegyűjteni. A megoldásokat
-
* a felvitt adatok utólagos megtekintése, módosíthatósága, törlés
+
el is kell tudni magyarázni. A "segítettek a megoldásban" a pontszámok megfelelő, 1-nél kisebb szorzójú
-
* a megtekintés lapozható, rendezhető, szűrhető (nagy tömegű adatok esetére felkészülve)
+
kalkulációján alapul. Tehát egy 30 pontos megoldás, melyet nagyon nem értünk mi micsoda, nem tudunk hozzányúlni,
-
* hibátlan html, css file
+
és '''mások segítségével''' írtunk meg, az mondjuk 30*0.7 => 21 pontosnak számít.
-
'''jósági paraméterek'''
+
A vizsgára hozni kell az egyes megoldásokat. A megoldásokat a saját nevünkre szóló alkönyvtárba fel kell másolni (zip file-ok),
-
* regisztráció során megerősítő e-mail küldése
+
ahol a zip fileok nevei a feladat neveire hasonlít (pl. kepek_scroll.zip). A vizsgán az aktuális vizsgázó kicsomagolja
-
* elfelejtett jelszó kezelése
+
az egyes .zip fileokat, betölti a böngészőbe. Közösen ellenőrízzük hogy működik-e a megoldás, majd a forráskódot
-
* kliens oldali űrlap kitöltés során AJAX-os ellenőrzés használata (pl regisztrációs user név választásnál)
+
nézzük át és értelmezzük.
-
* kliens oldalon mezőkre kitöltési minta (pattern) használata (pl dátumnál ÉÉÉÉ.HH.NN alak)
+
-
* kliens oldalon autocomplete használata a mezők kitöltése során (lehetőleg AJAX-os)
+
-
* file feltöltés (pl. kép) kezelése
+
-
* minél több típusú mező korrekt kezelése
+
-
* lapozható keresés során minél több szempont szerinti rendezhetőség, látszódjon az aktuális rendezési szempont, lehessen növekvő, csökkenő sorrendben is rendezni
+
-
* a szűrő feltételek legyenek minél többféleképp megadhatóak
+
-
* legyen szabad szöveges szűrés, ékezetes betűk esetén is jól működjön, kisbetű-nagybetűre ne legyen érzékeny, stb.
+
-
* egy lapon egyszerre kevés találat látszódjon, állítható darabszámmal (pl: 10,20,50,100 találat / lap)
+
-
* lehessen előre, hátra lépni a lapok között, első lapra, utolsó lapra ugorni, stb
+
-
* szép design
+

A lap 2012. április 13., 14:32-kori változata

Tartalomjegyzék

TAB megvalósítása (1)

Készítsünk el egy olyan HTML lapot, amelyen az alábbi három "tab" fül található

  • bemutatkozás
  • elérhetőségek
  • hírek

Az egyes tab fülek tartalma legyen egy kis kép és rövid kis szöveg (minden tartalom más-más legyen). Lehessen váltani a tab fülekre kattintva a tartalmak között. A megvalósítás saját JavaScript megoldás legyen. [5 pont]

TAB megvalósítása (2)

Készítsünk el egy olyan HTML lapot, amelyen az alábbi három "tab" fül található

  • reklámok
  • társoldalak
  • büszkeségeink

Az egyes tab fülek tartalma legyen egy kis kép és rövid kis szöveg (minden tartalom más-más legyen). Lehessen váltani a tab fülekre kattintva a tartalmak között. A megvalósításhoz jQuery TABS -t használjunk. A weboldal első tartalma (reklámok) a html letöltődése után azonnal kerüljön be, de a további tab fülek tartalma csak akkor töltődjön le, ha rákattintanak (content via ajax). A tab fülek tartalma ezért (csak a belső tartalom) külön pici html fileokban tárolódjon a szerveren. [8 pont]


Help panel

Készítsünk olyan beviteli formot, amely függőlegesen két részre tagolható. Bal oldali részen vannak a tényleges beviteli mezők (név, email, város, lakcím, születési év, stb), jobb oldalon egy segítő leírás van. Ezen jobb oldalon mindig az aktuális beviteli mezőhöz tartozó szöveges leírás olvasható (mit kell oda beírni, miért kell beírni, mire kell ügyelni beírás közben, mik a szabályok arra a mezőre vonatkozóan stb). [5 pont]

Dátum bekérés

Készítsünk beviteli formot, amely két dátumot kér be. A dátumokat a YYYY.MM.DD formában kell bevinni. Mindkét dátum mellé a bevitel végén (mező elhagyás) írjuk ki a beírt dátumhoz tartozó hónap nevét, és hogy a dátum a héten belüli melyik napra esik (pl. kedd). A két dátum között maximum 10 nap különbség lehet, az első dátumnak kell a kisebbnek lennie. Mindkét dátumnak munkanapra kell esnie. [6 pont]


F1 segédablak

Készítsünk beviteli formot, melybe más mezők mellett a lakóhelyünk megyéjének nevét, és megyeszékhelyének nevét is be kell írni (pl "heves megye" esetén "eger"). A bevitel során a megye input mező mellé helyezzünk el "help" feliratú gombot, melyre kattintva külön ablak nyílik meg, felsorolva egymás alatt a 19 megye és megyeszékhely nevét. A megfelelő megye nevére kattintva ez a külön ablak bezáródik, de előtte beíródik a form két mezőjébe a kiválasztott érték. [10 pont]

Reguláris kifejezések

Reguláris kifejezések segítségével ellenőrízzük le, hogy a beviteli formunkon [6 pont]

  • a születési év valóban pozitív egész szám-e
  • az email cím valóban email cím formátumú-e
  • a "honlap" részre valóban web url-t írtak-e be


Regisztrációs ablak

Készítsünk regisztrációs ablakot, melyben a választott login nevet AJAX-os JSON script ellenőrzi le, hogy szabad-e. Amennyiben szabad, úgy a beviteli mező mögötti zöld pipa, különben egy piros felkiáltójel jelöli meg. A feladat megoldhato jQuery-vel és saját AJAX rutinokkal is. [8 pont]

Beviteli kiegészítés

A beviteli formon a "legközelebbi nagyváros" rovatba egy nagyváros, pl. megyeszékhely nevét kell írni. A gépelés során adjunk gépelési segítséget (autocomplete), amennyiben pl. már begépelte hogy "mi" akkor kínáljuk fel neki a "miskolc" lehetőséget. Amennyiben legalább 2 betűt begépelt, akkor kell az aktuális input mező értéket ("mi") elküldeni a szervernek AJAX-al, aki visszaküldi a lehetséges kiegészítéseket (akár adatbázisból kiválasztva select-el a szóba jöhető városok neveit). A kommunikáció JSON-el működjön. A megoldásnak nem kell feltétlenül sql adatbázison alapulni, néhány betűre működjön akár "if"-ek segítségével is. A megoldáshoz használható saját AJAX megoldás, és jQuery is. [8 pont]

Sok file upload

A beviteli formunkra helyezzünk el file upload mezőt. Amennyiben kitöltik a file upload mezőt, úgy lehessen lenyomni egy "add" feliratú gombot. Ekkor egy új file upload mező jelenjen meg. Igy maximum 10 file upload mezőt lehessen felrakni a formra. Természetesen submit-kor akár mind a 10 file upload feltöltődjön (érdemes ekkor kis méretű fileokat kiválasztani, mivel a fileok tartalma ténylegesen feltöltésre kerül). Azt is oldjuk meg, hogy amennyiben valamelyik file upload mezőt kitöltöttük, de meggondoltuk magunk, és mégsem akarjuk feltölteni a filet, akkor az adott file upload melletti "töröl" gombra kattintva azt a file upload mezőt ki lehessen törölni a formról. [14 pont]


Környezetérzékeny form

Amennyiben a regisztráció során egyszerűsített vagy teljes közül választanánk, a megfelelő mezőkből épüljön fel a form. A megfelelő form a szerverről töltődjön le a kiválasztás után AJAX-osan. A megoldáshoz használható saját AJAX megoldás, és jQuery is. [7 pont]

Listbox-ok közötti átrakás

Egy form-on helyezzünk el egymás mellett két listbox-t. Az egyik (bal oldali) legyen feltöltve, pl együttesek neveivel. A jobb oldali induláskor legyen üres. Mindkét listbox-ban lehessen egyszerre több elemet is kiválasztani (multiselect). A két listbox között helyezzünk el 4 gombot:

  • egy elem átrak balról jobbra (ekkor ha bal oldalon kiválasztunk egy item-t, és lenyomjuk ezt a gombot, akkor az item balról törlődjön, és jelenjen meg jobb oldalon).
  • minden kiválasztott elem átrak balról jobbra (ugyanez csak több elemre)
  • egy elem visszarak jobbról balra (értelemszerűen)
  • minden kiválasztott elem átrak jobbról balra (értelemszerűen)

A bal oldali listbox alatt legyen még három gomb:

  • minden elem kiválasztása (értelemszerűen)
  • kiválasztások törlése (egyik elem se legyen kiválasztva)
  • kiválasztás invertálása (amik ki vannak választva azok ne legyenek, és fordítva)

[16 pont]

Listboxba elemek felvétele és törlése

Helyezzünk el egy formon egy checkboxot, egy textbox-t (input type text), és alatt egy listboxot. A listbox induláskor legyen üres. A textboxba adatokat (pl számok, neve) írhatunk be. A checkbox azt szabályozza, hogy a lista elemei egyediek kell legyenek-e vagy sem. A textbox mellett legyen "felvesz" gomb. Ezen gomb lenyomásakor a textboxba beírt érték kerüljön be a listbox-ba. Amennyiben a checkbox épp be van pipálva (egyedi értékek), úgy csak akkor kerülhet be az érték a listboxba, ha ott még ez az érték nem szerepelt volna. Chekcbox nem kipipált esetben mindenképp kerüljön be a listboxba az érték.

A listbox alatt legyen egy "törlés" gomb, melyre kattintva a listboxba kiválasztott elem törlődjön ki a listboxból. Legyen ezen felül szintén alatta egy "mindent töröl" gomb, melyre kattintva a listbox minden eleme törlődjön ki. [12 pont]

Képek cserélve

Egy div-ben helyezzünk el legalább egy img elemet. Ez az elem a weblapunk banner képét fogja tartalmazni. A weblapnak azonban több banner képe is van (legalább három). Oldjuk meg, hogy a banner képek cserélődjenek 5 másodpercenként az oldal újratöltődése nélkül is. A megoldáshoz használható jQuery is. [6 pont]

Képek scroll

A feladat ugyanaz mint a "képek cserélve", de itt a banner képek úgy cserélődjenek, hogy miközben az aktuális bannerkép kiúszik balra, a következő beússzon jobbról (mint a diavetítős képek esetén). A megoldáshoz használható jQuery is. Konkrétan 3 képre: [6 pont], tetszőlegesen sok képre: [9 pont].

Vizsga

Egy megoldás egy zip file (mely tartalmazza a szükséges html, css, js, esetleg php fileokat is). A megoldások maximum annyi pontot érnek, amennyi a feladat mellett megjelölésre került. A 2-eshez szükséges pontszám 20 pont. Utána 5 pontonként van emelkedés. Így az 5-öshöz 35 pontot kell összegyűjteni. A megoldásokat el is kell tudni magyarázni. A "segítettek a megoldásban" a pontszámok megfelelő, 1-nél kisebb szorzójú kalkulációján alapul. Tehát egy 30 pontos megoldás, melyet nagyon nem értünk mi micsoda, nem tudunk hozzányúlni, és mások segítségével írtunk meg, az mondjuk 30*0.7 => 21 pontosnak számít.

A vizsgára hozni kell az egyes megoldásokat. A megoldásokat a saját nevünkre szóló alkönyvtárba fel kell másolni (zip file-ok), ahol a zip fileok nevei a feladat neveire hasonlít (pl. kepek_scroll.zip). A vizsgán az aktuális vizsgázó kicsomagolja az egyes .zip fileokat, betölti a böngészőbe. Közösen ellenőrízzük hogy működik-e a megoldás, majd a forráskódot nézzük át és értelmezzük.

A lap eredeti címe: „http://wiki.ektf.hu/wiki/Frm1/Tematika”
Nézetek
nincs sb_18.188.152.162 cikk