Webprogramoza s szakko r
|
|
|
- Boglárka Regina Kelemen
- 7 évvel ezelőtt
- Látták:
Átírás
1 Webprogramoza s szakko r Előadás 10 ( ) Google Maps API API: Application Programming Interface (alkalmazásprogramozási felület) Egy programhoz tartozó kiajánlott függvények, változók és konstansok összességét jelenti, melyeket más programok fel tudnak használni, és ezzel saját szolgáltatásokat készíteni az adott program felhasználásával. Az API fogalmába még bele szokták érteni a hozzá tartozó dokumentációt is, amiből megérthető a használata. A Google Maps esetében a program maga a Google Maps, amit a hétköznapi életben mi is használhatunk, de fejlesztőként felmerülhet az igény térképet használó alkalmazás készítésére. Saját magunknak interaktív térképet készíteni szinte lehetetlen feladat lenne, de a Google Maps-hez közzétettek fejlesztők számára egy JavaScript nyelvű API-t. Ennek a függvényei, eljárásai lehetővé teszik, hogy a Google Maps szolgáltatásra épülve, saját igényeinknek megfelelően fejlesszünk programokat. Minden API más! Más objektumokat, függvényeket, változókat, konstansokat használ, így azt nem tudjuk megtanulni, hogyan lehet mindet használni. Azt viszont elsajátíthatjuk, hogyan álljunk neki egy API-ra épülő alkalmazás fejlesztéséhez. Az előző alkalommal a jquery-ről volt szó, amit önmagában is érdemes megtanulni, hiszen széleskörűen használható programozás technikai szempontból. A mostani példa egy hasznos API lesz, ahol azt az utat járjuk, hogy a dokumentációból megpróbáljuk megismerni a működést. Hogy ne a keresgéléssel teljen rengeteg idő, így minden feladatnál a Tippek segítenek, hol találunk leírást vagy példakódot az adott feladat megoldásához. Feladat 0 Ismerjük meg a Google Maps API elérhetőségét, dokumentációját Fontosabb menüpontok: API Reference Code Samples Feladat 1 Készítsünk egy HTML oldalt egy Google Maps térképpel Code Samples / Basics / Simple map Szent Angéla Webprogramozási szakkör (Paksy Patrik) 1
2 HTML A HTML kód szinte végig ugyanaz marad, csak a külön készített JavaScript fájlt kell változtatni. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>google Maps API</title> <script src=" <script src="feladat_01.js"></script> </head> <body> <div id="map-canvas" style="width:900px;height:500px;"></div> </body> </html> JavaScript // JavaScript Document var map; maptypeid: google.maps.maptypeid.roadmap ; google.maps.event.adddomlistener(window, 'load', initialize); Eddigi ismereteinkből mi került elő? HTML + CSS JavaScript o Változó (globális - map, lokális - mapoptions) o Függvény (initialize()) o Objektumok mapoptions new kulcsszóval való példányosítás (google.maps.map globális, a Google Maps API-ban lévő térkép objektum) o HTML DOM elérése (document.getelementbyid()) PÁROS MUNKA: Párokban oldjuk meg a következő feladatokat. A feladatok után zárójelben az adott feladat nehézsége olvasható (1 = könnyű, 2 = közepes, 3 = nehéz). A nehéz feladat kihagyható, ha nem sikerül gyorsan megoldani. Feladat 2 A térképre kattintva helyezzünk el jelölőket (Nehézség: 2) API Reference: Overlays / Marker Szent Angéla Webprogramozási szakkör (Paksy Patrik) 2
3 Code Samples: Events / Accessing arguments in UI events // JavaScript Document var map; maptypeid: google.maps.maptypeid.roadmap ; google.maps.event.addlistener(map, 'click', function(e) { placemarker(e.latlng); ); function placemarker(position) { map: map ); google.maps.event.adddomlistener(window, 'load', initialize); Feladat 3 A térképen található vezérlőelemeken (pl. zoom-olás, nézet váltás) változtassunk (Nehézség: 1): Tüntessük el az úgynevezett pancontrol -t (ez a bal felső sarokban lévő 4 nyíl) A jobb felső sarokban lévő nézetválasztó legördülő menüben jelenjen meg API Reference: Map / MapOptions / pancontrol és maptypecontroloptions Code Samples: Controls / Adding controls to the map és Controls / Control options maptypeid: google.maps.maptypeid.roadmap, maptypecontroloptions: { style: google.maps.maptypecontrolstyle.dropdown_menu, pancontrol: false ; Feladat 4/a A jelölőre való kattintáskor egy információs ablakban jelenítsünk meg tetszőleges szöveget (Nehézség: 2) API Reference: Overlays / InfoWindow Code Samples: Events / Using closures in event listeners Szent Angéla Webprogramozási szakkör (Paksy Patrik) 3
4 Feladat 4/b A jelölőre való kattintáskor egy információs ablakban jelenítsük meg az adott hely címét, ehhez használjuk a visszafelé való címkódolást (Reverse Geocoding) (Nehézség: 3) API Reference: Services / Geocoder Code Samples: Services / Reverse Geocoding // JavaScript Document var map; var geocoder; geocoder = new google.maps.geocoder(); maptypeid: google.maps.maptypeid.roadmap ; google.maps.event.addlistener(map, 'click', function(e) { placemarker(e.latlng); ); function placemarker(position) { map: map ); google.maps.event.addlistener(marker, 'click', function() { getaddress(marker); ); function getaddress(marker) { geocoder.geocode({'latlng': marker.getposition(), function(results, status) { if (status == google.maps.geocoderstatus.ok) { if (results[1]) { createinfowindow(marker, results[1].formatted_address); else { alert('no results found'); else { alert('geocoder failed due to: ' + status); ); function createinfowindow(marker, content) { var infowindow = new google.maps.infowindow(); infowindow.setcontent(content); infowindow.open(marker.get('map'), marker); google.maps.event.adddomlistener(window, 'load', initialize); Feladat 5 Cseréljük le a jelölőikont (új ikonkép a kezdőcsomagban van) (Nehézség: 1) Szent Angéla Webprogramozási szakkör (Paksy Patrik) 4
5 API Reference: Overlays / Marker és MarkerOptions Code Samples: Overlays / Simple icons function placemarker(position) { map: map, icon: 'images/icon.png' ); google.maps.event.addlistener(marker, 'click', function() { getaddress(marker); ); Feladat 6 Készítsünk animációt a jelölőkhöz (Nehézség: 1) API Reference: Overlays / Marker és MarkerOptions Code Samples: Overlays / Marker animations function placemarker(position) { map: map, animation: google.maps.animation.drop, icon: 'images/icon.png' ); google.maps.event.addlistener(marker, 'click', function() { getaddress(marker); togglebounce(marker); ); function togglebounce(marker) { if (marker.getanimation()!= null) { marker.setanimation(null); else { marker.setanimation(google.maps.animation.bounce); Feladat 7 Minden egyes újabb kattintás (jelölő letevés) a térképen rajzoljon ki egy útvonalat (Nehézség: 2) API Reference: Overlays / Polyline Code Samples: Overlays / Complex polylines Szent Angéla Webprogramozási szakkör (Paksy Patrik) 5
6 var poly; geocoder = new google.maps.geocoder(); maptypeid: google.maps.maptypeid.roadmap, maptypecontroloptions: { style: google.maps.maptypecontrolstyle.dropdown_menu, pancontrol: false ; var polyoptions = { strokecolor: '#000000', strokeopacity: 1.0, strokeweight: 3 poly = new google.maps.polyline(polyoptions); poly.setmap(map); google.maps.event.addlistener(map, 'click', addlatlng); function addlatlng(event) { var path = poly.getpath(); path.push(event.latlng); placemarker(event.latlng); Feladat 8 Jelenítsünk meg a forgalmi adatokat mutató réteget a térképen (Nehézség: 1) API Reference: Layers / Traffic layer Code Samples: Layers / Traffic layer Szent Angéla Webprogramozási szakkör (Paksy Patrik) 6
7 geocoder = new google.maps.geocoder(); maptypeid: google.maps.maptypeid.roadmap, maptypecontroloptions: { style: google.maps.maptypecontrolstyle.dropdown_menu, pancontrol: false ; var polyoptions = { strokecolor: '#000000', strokeopacity: 1.0, strokeweight: 3 poly = new google.maps.polyline(polyoptions); poly.setmap(map); var trafficlayer = new google.maps.trafficlayer(); trafficlayer.setmap(map); google.maps.event.addlistener(map, 'click', addlatlng); Feladat 9 Tegyük lehetővé, hogy a jobb egérgomb kattintásra is jelölőket helyezhessünk el, és azokra jelölőkre működjön a fogd és vidd művelet (drag & drop) (Nehézség: 1) API Reference: Map / Map google.maps.event.addlistener(map, 'click', addlatlng); google.maps.event.addlistener(map, 'rightclick', function(e) { placemarker(e.latlng, true); ); function addlatlng(event) { var path = poly.getpath(); path.push(event.latlng); placemarker(event.latlng, false); function placemarker(position, isdragable) { map: map, animation: google.maps.animation.drop, draggable: isdragable, icon: 'images/icon.png' ); Szent Angéla Webprogramozási szakkör (Paksy Patrik) 7
8 Feladat 10 Bővítsük a HTML kódot egy szövegmezővel és egy gombbal. Minden új jelölő lehelyezésekor írjuk ki a szövegmezőbe az új jelölő koordinátáit. A gombra kattintáskor állítsuk vissza a térkép középpontját az eredeti helyére. (Nehézség: 1) API Reference: Overlays / Markers; Map / Map; Base / LatLng HTML <body> <div id="map-canvas" style="width:900px;height:500px;"></div> <div> <input type="text" id="coords" size="75" /> <input type="button" id="setcenter" value="set map center" onclick="setmapcenter()" /> </div> </body> JavaScript var mapcenter = new google.maps.latlng(47.49, 19.04); center: mapcenter, maptypeid: google.maps.maptypeid.roadmap, maptypecontroloptions: { style: google.maps.maptypecontrolstyle.dropdown_menu, pancontrol: false ; function placemarker() { document.getelementbyid('coords').value = position.tostring(); function setmapcenter() { map.setcenter(mapcenter); Szent Angéla Webprogramozási szakkör (Paksy Patrik) 8
9 Teljes JavaScript kód var map; var geocoder; var poly; var mapcenter = new google.maps.latlng(47.49, 19.04); geocoder = new google.maps.geocoder(); center: mapcenter, maptypeid: google.maps.maptypeid.roadmap, maptypecontroloptions: { style: google.maps.maptypecontrolstyle.dropdown_menu, pancontrol: false ; var polyoptions = { strokecolor: '#000000', strokeopacity: 1.0, strokeweight: 3 poly = new google.maps.polyline(polyoptions); poly.setmap(map); var trafficlayer = new google.maps.trafficlayer(); trafficlayer.setmap(map); google.maps.event.addlistener(map, 'click', addlatlng); google.maps.event.addlistener(map, 'rightclick', function(e) { placemarker(e.latlng, true); ); function addlatlng(event) { var path = poly.getpath(); path.push(event.latlng); placemarker(event.latlng, false); function placemarker(position, isdragable) { map: map, animation: google.maps.animation.drop, draggable: isdragable, icon: 'images/icon.png' ); document.getelementbyid('coords').value = position.tostring(); google.maps.event.addlistener(marker, 'click', function() { getaddress(marker); togglebounce(marker); ); Szent Angéla Webprogramozási szakkör (Paksy Patrik) 9
10 function getaddress(marker) { geocoder.geocode({'latlng': marker.getposition(), function(results, status) { if (status == google.maps.geocoderstatus.ok) { if (results[1]) { createinfowindow(marker, results[1].formatted_address); else { alert('no results found'); else { alert('geocoder failed due to: ' + status); ); function createinfowindow(marker, content) { var infowindow = new google.maps.infowindow(); infowindow.setcontent(content); infowindow.open(marker.get('map'), marker); function togglebounce(marker) { if (marker.getanimation()!= null) { marker.setanimation(null); else { marker.setanimation(google.maps.animation.bounce); function setmapcenter() { map.setcenter(mapcenter); google.maps.event.adddomlistener(window, 'load', initialize); Szent Angéla Webprogramozási szakkör (Paksy Patrik) 10
11 Google Maps API Kivonat Térkép létrehozása maptypeid: google.maps.maptypeid.roadmap ; var Beállításokat egy objektumban adjuk meg (mapoptions), a térképet pedig a google.maps.map objektum példányosításával hozhatjuk létre. Eseménykezelés google.maps.event.addlistener(mire, MILYEN ESEMÉNY, MI TÖRTÉNJEN HA MEGTÖRTÉNIK); google.maps.event.addlistener(map, click, fuggvenyhivas()); fuggvenyhivas(event) { // amit itt adunk meg, az tortenik a terkepre kattintaskor // event parametert kap, ami tartalmazza pl. a kattintás helyét (koordináta) Réteg hozzáadása var trafficlayer = new google.maps.trafficlayer(); trafficlayer.setmap(map); Címkódolás geocoder.geocode({'latlng': marker.getposition(), function(results, status) { if (status == google.maps.geocoderstatus.ok) { if (results[1]) { alert(results[1].formatted_address); else { alert('no results found'); else { alert('geocoder failed due to: ' + status); ); Animáció paraméter érték példák google.maps.animation.bounce google.maps.animation.drop Szent Angéla Webprogramozási szakkör (Paksy Patrik) 11
Google Maps használata OSM, mint alternatív térkép
OE-NIK 2012. március 19. Sicz-Mesziár János sicz-mesziar.janos@ nik.uni-obuda.hu Google Maps használata OSM, mint alternatív térkép Google Maps Jól használható külső library. Használatához regisztráció
MicroSigner Közvetítő Szerver fejlesztői dokumentáció
MICROSEC ZRT. MicroSigner Közvetítő Szerver fejlesztői dokumentáció verzió: 1.0 Ivicsics Sándor, Máté Norbert, Vanczák Gergely 2016.06.09. Tartalom Általános információk... 2 ESign munkamenet létrehozása...
Természetesen készíts egy csempe nevű könyvtárat és ide mentsd az index.html állományt.
Csempe kalkula tor A küldetésünk az, hogy segítsünk kiszámítani egy fürdőszoba csempeszükségletét (felületét). Sőt, ha a kalkulátort használó ügyfél elégedett egyből elküldheti az e-mail címét, hogy a
Stateless Session Bean
Stateless Session Bean Készítsünk egy stateless session bean-t, amellyel összeadhatunk két számot. Hozzunk létre egy Dynamic Web projectet File New Other itt a következőket kell választani: Web Dynamic
Objektumorientált programozás
JavaScript Objektumorientált programozás böngésző jó néhány objektumot bocsájt a rendelkezésünkre tulajdonságok var txt="hello World!" document.write(txt.length) Web programozás I. - Kecskeméti Fõiskola
Az image objektum. Az image eseménykezel i. Képek el zetes betöltése. Feladat. Váltóképek készítése
Az image objektum Multimédiás alkalmazások készítése JavaScript segítségével webprogramozó a document leszármazottja az images tömbön keresztül érhet el complete : teljesen letölt dött-e? height, width
Google Maps V2. OpenStreetMap, Mapsforge
OE-NIK 2013. március 18. Sicz-Mesziár János sicz-mesziar.janos@ nik.uni-obuda.hu Google Maps V1 Google Maps V2 OpenStreetMap, Mapsforge Google Maps V1 deprecated 2 Google Maps V1 Jól használható külső
Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET) Cserép Máté.
Eötvös Loránd Tudományegyetem Informatikai Kar Webes alkalmazások fejlesztése 4. előadás (ASP.NET) Cserép Máté mcserep@inf.elte.hu http://mcserep.web.elte.hu Készült Giachetta Roberto jegyzete alapján
"Egységes erdélyi felnőttképzés Kárpát-medencei hálózatban" JAVA ALAPÚ WEBPROGRAMOZÁS. M6 Modul: A DOM Modell
"Egységes erdélyi felnőttképzés Kárpát-medencei hálózatban" JAVA ALAPÚ WEBPROGRAMOZÁS M6 Modul: A DOM Modell Bevezető - platform- és nyelvfüggetlen programozási interfész - tartalom-, szerkezet- és stílus-elérés/módosítás
Webprogramozás szakkör
Webprogramozás szakkör Előadás 5 (2012.04.09) Programozás alapok Eddig amit láttunk: Programozás lépései o Feladat leírása (specifikáció) o Algoritmizálás, tervezés (folyamatábra, pszeudokód) o Programozás
5-ös lottó játék. Felhasználói dokumentáció
5-ös lottó játék Felhasználói dokumentáció Feladat: JavaScript és CSS segítségével 5-ös lottó játék készítése. Futtatási környezet: A http://10.0.0.101/~szabby/ linkre kattintva megjelenik az oldal. Az
MicroSigner Közvetítő Szerver fejlesztői dokumentáció
MICROSEC ZRT. MicroSigner Közvetítő Szerver fejlesztői dokumentáció verzió: 1.0 Ivicsics Sándor, Máté Norbert, Vanczák Gergely 2016.06.09. Tartalom Általános információk... 2 ESign munkamenet létrehozása...
(ArcCatalog, ArcMap)
Országos Területrendezési Terv térképi mellékleteinek WMS szolgáltatással történő elérése, Esri programok alkalmazásával (ArcCatalog, ArcMap) Útmutató 2014. október 1. BEVEZETÉS Az útmutató célja az Országos
Számológép. Bármilyen számítógépen működik, amin található böngésző és Java alkalmazás. Indító képernyő
Felhasználói dokumentáció Számológép Feladat: JavaScript és CSS segítségével számológép készítése. Futtatási környezet: A http://10.0.0.101/~szabby/szgep.html linkre kattintva megjelenik az oldal. Az oldal
Sakk-játék. Bármilyen számítógépen működik, amin található böngésző és Java alkalmazás. Indító képernyő
Felhasználói dokumentáció Sakk-játék Feladat: JavaScript és CSS segítségével sakk-játék készítése. Futtatási környezet: A http://10.0.0.101/~szabby/ linkre kattintva megjelenik az oldal. Az oldal megtekintéséhez
Országos Területrendezési Terv térképi mel ékleteinek WMS szolgáltatással történő elérése, MapInfo program alkalmazásával Útmutató 2010.
Országos Területrendezési Terv térképi mellékleteinek WMS szolgáltatással történő elérése, MapInfo program alkalmazásával Útmutató 2010. június 1. BEVEZETÉS Az útmutató célja az Országos Területrendezési
WEBFEJLESZTÉS 2. ADATBÁZIS-KEZELÉS, OSZTÁLYOK
WEBFEJLESZTÉS 2. ADATBÁZIS-KEZELÉS, OSZTÁLYOK Horváth Győző Egyetemi adjunktus 1117 Budapest, Pázmány Péter sétány 1/C, 2.420 Tel: (1) 372-2500/1816 2 Ismétlés Ismétlés 3 Fájl/Adatbázis 3 4 Szerver 2 CGI
Tili-Toli játék. Felhasználói dokumentáció
Tili-Toli játék Felhasználói dokumentáció Feladat: JavaScript és CSS segítségével tili-toli játék készítése. Futtatási környezet: A http://10.0.0.101/~szabby/ linkre kattintva megjelenik az oldal. Az oldal
Böngésző kompatibilitás
Böngésző kompatibilitás Konstantinusz Kft. 2009 Tartalomjegyzék 1. Bevezetés...3 2. Témafelvetés...4 3. Általában a honlapkészítésről...5 3.1. A honlap eszközeinek rövid ismertetése...5 3.2 Böngészők bemutatása...6
Google Maps használata Alternatív térképek
Google Maps használata Alternatív térképek Sicz-Mesziár János sicz.mj@gmail.com 2011. március 31. OE-NIK Google Maps Jól használható külső library. Használatához regisztráció és az ÁSZF elfogadása kell!
Kompozit alkalmazások fejlesztése. IBM WebSphere Portal Server
Kompozit alkalmazások fejlesztése IBM WebSphere Portal Server Portletek -összefoglaló Portlet: portálba integrálható kisalkalmazás Szabványok JSR 168 Portlet 1.0 (IBM API) JSR 286 Portlet 2.0 Dióhéjban
Eseményvezérelt alkalmazások
Szabóné Nacsa Rozália nacsa@inf.elte.hu Eseményvezérelt alkalmazások A Windows alkalmazások eseményvezérelt alkalmazások Esemény: egér kattintás billenty leütés stb. Üzenetkezelés Operációs rendszer kódja
Web programozás. 3. előadás
Web programozás 3. előadás Űrlapok form label for input type select, option value szöveges mező: text textarea jelszó: password rádiógomb: radio jelölőnégyzet: checkbox küldés gomb: submit Web programozás
Országos Területrendezési Terv térképi mellékleteinek WMS szolgáltatással történő elérése, MapInfo program alkalmazásával
TeIR Országos Területrendezési Terv térképi mellékleteinek WMS szolgáltatással történő elérése, MapInfo program alkalmazásával Felhasználói útmutató Budapest, 2015. április 1 BEVEZETÉS Az útmutató célja
ANDROID ALKALMAZÁSFEJLESZTÉS
ANDROID ALKALMAZÁSFEJLESZTÉS Google Maps V2 sicz- m e s z i a r. j a n o s @ n i k. u n i - o b u d a. h u Sicz-Mesziár János 2015. március 21. Újdonságok Minimum Android 2.2/2.3 kell! Google Play SDK
SDI ALKALMAZÁS I. Workspace / ResourceView / Toolbar / IDR_MAINFRAME. Workspace / ResourceView / Menu / IDR_MAINFRAME
SDI ALKALMAZÁS I. Feladat: Készítsünk egy olyan alkalmazást, amely az év végi adózás céljából rögzíti egyetlen évközi bevételnek az adatait: bruttó jövedelem adóel ı leg nettó bevétel jövedelem forrása
Webes alkalmazások fejlesztése 4. előadás. Megjelenítés és tartalomkezelés (ASP.NET)
Eötvös Loránd Tudományegyetem Informatikai Kar Webes alkalmazások fejlesztése 4. előadás (ASP.NET) 2016 Giachetta Roberto groberto@inf.elte.hu http://people.inf.elte.hu/groberto Nézetek kezelése Sok esetben
Web-fejlesztés NGM_IN002_1
Web-fejlesztés NGM_IN002_1 Rich Internet Applications RIA Vékony-kliens generált (statikus) HTML megjelenítése szerver oldali feldolgozással szinkron oldal megjelenítéssel RIA desktop alkalmazások funkcionalitása
Memória játék. Felhasználói dokumentáció
Memória játék Felhasználói dokumentáció Feladat: JavaScript segítségével, olyan programot írni, mely összekeveri a lapokat, majd a felhasználónak kell párosítani. HTML oldalba ágyazva és CSS-el formázva.
Johanyák Zsolt Csaba: Grafikus felület programozása. http://www.johanyak.hu e-mail: johanyak.csaba@gamf.kefo.hu Copyright 2008 Johanyák Zsolt Csaba
Johanyák Zsolt Csaba: Grafikus felület programozása http://www.johanyak.hu e-mail: johanyak.csaba@gamf.kefo.hu Copyright 2008 Johanyák Zsolt Csaba 1. Gyümölcsárazó automata Készítsünk egy gyümölcsárazó
Információs technológiák 2. Gy: CSS, JS alapok
Információs technológiák 2. Gy: CSS, JS alapok 1/69 B ITv: MAN 2017.10.01 Ismétlés Van egy Web nevű mappánk, ebben vannak az eddig elkészített weboldalak (htm, html) képek (jpg, png). Logikai felépítés
Bevezetés Működési elv AJAX keretrendszerek AJAX
AJAX Áttekintés Bevezetés Működési elv AJAX-ot támogató keretrendszerek Áttekintés Bevezetés Működési elv AJAX-ot támogató keretrendszerek Áttekintés Bevezetés Működési elv AJAX-ot támogató keretrendszerek
Pick Pack Pont kereső és boltválasztó alkalmazás
Pick Pack Pont kereső és boltválasztó alkalmazás www.pickpackpont.hu online.sprinter.hu/terkep Dokumentáció V5 2018. október Sprinter Futárszolgálat Kft. 2018. Minden jog fenntartva! Tartalomjegyzék Funkciók
Web-fejlesztés NGM_IN002_1
Web-fejlesztés NGM_IN002_1 Alap reprezentációs technológiák HTML Hyper Text Markup Language SGML alkalmazás Dokumentum-struktúra leírásra nem lap leírás! hiperszöveg dokumentum szemantika fejlécek listák
Stíluslapok használata (CSS)
2. Laboratóriumi gyakorlat Stíluslapok használata (CSS) A gyakorlat célja: Bevezetés a CSS stíluslapok használatába. Felkészüléshez szükséges anyagok: 1. A 3-as segédlet (CSS) 2. A bibliográfia HTML illetve
Sakk játék. Feladat: JavaScript segítségével olyan programot kell írni, ami egy sakktáblát szimulál. Kiválasztásra változtatják a helyüket.
Sakk játék Felhasználói dokumentáció Feladat: JavaScript segítségével olyan programot kell írni, ami egy sakktáblát szimulál. Kiválasztásra változtatják a helyüket. Futtatási környezet: A http://10.0.0.101/~hgy/sakk/
mikroformátumok avagy a kisbetűs szemantikus web SZÁNTAI KÁROLY Magyarországi Web Konferencia 2008
mikroformátumok avagy a kisbetűs szemantikus web SZÁNTAI KÁROLY Magyarországi Web Konferencia 2008
Webshop készítése ASP.NET 3.5 ben I.
Webshop készítése ASP.NET 3.5 ben I. - Portál kialakíása - Mesteroldal létrehozása - Témák létrehozása Site létrehozása 1. File / New Web site 2. A Template k közül válasszuk az ASP.NEt et, nyelvnek (Language)
Szabadkai Műszaki Szakfőiskola. Web programozás. dr Zlatko Čović chole@vts.su.ac.rs
Szabadkai Műszaki Szakfőiskola Web programozás dr Zlatko Čović chole@vts.su.ac.rs 1 DOM események (events) JavaScriptben interaktív programok készítésére az események által vezérelt programozási modellt
Johanyák Zsolt Csaba: Ugráló gomb oktatási segédlet Copyright 2008 Johanyák Zsolt Csaba
Ugráló gomb Készítsünk egy egyszerű játékprogramot, ami egy mozgó nyomógombot tartalmaz. A nyomógomb beállított ideig marad egy helyben, majd az ablakon számára elhatárolt terület (panel) egy véletlenszerűen
12.óra jquery Framework #1. Gyimesi Ákos
12.óra jquery Framework #1 Gyimesi Ákos gyimesi.akos@gmail.com http://webprog.gy-i-m.com 12.óra jquery Framework #1 Miről lesz szó? JavaScript nyelv alapjai plusz: a JavaScript objektummodellje JavaScript
HTML sablon tervezése
3. Laboratóriumi gyakorlat HTML sablon tervezése A gyakorlat célja: Egy összefüggő HTML illetve CSS nyelvet használó oldal tervezése, amely később sablonként is használható. Felkészüléshez szükséges anyagok:
MicroSigner Közvetítő Szerver fejlesztői dokumentáció
MICROSEC ZRT. MicroSigner Közvetítő Szerver fejlesztői dokumentáció verzió: 1.0 Ivicsics Sándor, Máté Norbert, Vanczák Gergely 2016.06.09. Tartalom Általános információk... 2 ESign munkamenet létrehozása...
A JavaScript főbb tulajdonságai
JavaScript alapok A JavaScript főbb tulajdonságai Script nyelv azaz futás közben értelmezett, interpretált nyelv Legfőbb alkalmazási területe: a HTML dokumentumok dinamikussá, interaktívvá tétele Gyengén
Kő, Papír, Olló. Felhasználói dokumentáció
Kő, Papír, Olló Felhasználói dokumentáció Feladat: JavaScript és CSS segítségével Kő, Papír, Olló feladat készítése. Futtatási környezet: A http://10.0.0.101/~szabby/ linkre kattintva megjelenik az oldal.
és az instanceof operátor
Java VIII. Az interfacei és az instanceof operátor Krizsán Zoltán Miskolci Egyetem Általános Informatikai Tanszék Utolsó módosítás: 2005. 10. 24. Java VIII.: Interface JAVA8 / 1 Az interfészről általában
Szabadkai Műszaki Szakfőiskola. Web programozás. dr Zlatko Čović chole@vts.su.ac.rs
Szabadkai Műszaki Szakfőiskola Web programozás dr Zlatko Čović chole@vts.su.ac.rs 1 CLIENT-SERVER 2 Internet technológiák Kliens oldali: -(x)html -CSS -JavaScript -XML JavaScript XML PHP Szerver oldali:
Tartalom. A JavaScript haladó lehet ségei. Megjelenés. Viselkedés. Progresszív fejlesztés. A progresszív fejlesztés alapelvei
Tartalom A JavaScript haladó lehet ségei webprogramozó A szöveg, amit a látogató az oldalainkon olvashat Szövegként írjuk meg HTML elemekkel osztjuk egységekre Megjelenés A szöveg kinézete és elrendezése
Az alábbi kód egy JSON objektumot definiál, amiből az adtokat JavaScript segítségével a weboldal tartalmába ágyazzuk.
JSON tutorial Készítette: Cyber Zero Web: www.cyberzero.tk E-mail: cyberzero@freemail.hu Msn: cyberzero@mailpont.hu Skype: cyberzero_cz Fb: https://www.facebook.com/cyberzero.cz BEVEZETÉS: A JSON (JavaScript
Java VIII. Az interfacei. és az instanceof operátor. Az interfészről általában. Interfészek JAVA-ban. Krizsán Zoltán
Java VIII. Az interfacei és az instanceof operátor Krizsán Zoltán Miskolci Egyetem Általános Informatikai Tanszék Utolsó módosítás: 2005. 10. 24. Java VIII.: Interface JAVA8 / 1 Az interfészről általában
Programozási technológia
Programozási technológia Swing GUI készítése NetBeans IDE segítségével Dr. Szendrei Rudolf ELTE Informatikai Kar 2018. Bevezető Eddig a grafikus felhasználói felületet kódból hoztuk létre kézzel. A mi
Az Educatio weboldalain elhelyezhető hirdetések technikai paraméterei
Az Educatio weboldalain elhelyezhető hirdetések technikai paraméterei Az Educatio Társadalmi Szolgáltató Nonprofit Kft. a következő feltételek szerint készült bannerek elhelyezését vállalja weboldalain:
Tájékoztató. Használható segédeszköz: -
A 12/2013. (III. 29.) NFM rendelet szakmai és vizsgakövetelménye alapján. Szakképesítés, azonosítószáma és megnevezése 54 481 06 Informatikai rendszerüzemeltető Tájékoztató A vizsgázó az első lapra írja
Bevezetés a programozásba. 8. Előadás: Függvények 2.
Bevezetés a programozásba 8. Előadás: Függvények 2. ISMÉTLÉS Helló #include using namespace std; int main() cout
ANDROID ALKALMAZÁSFEJLESZTÉS
ANDROID ALKALMAZÁSFEJLESZTÉS Google Maps V2 sicz- m e s z i a r. j a n o s @ n i k. u n i - o b u d a. h u Sicz-Mesziár János 2017. április 6. Újdonságok Minimum Android 2.2/2.3/4.0 kell! Google Play SDK
GeoServer, OpenLayers és WFS. Dolleschall János 2009. 08. 17.
GeoServer, OpenLayers és WFS Dolleschall János 2009. 08. 17. A GeoServer A GeoServer egy nyílt forráskódú szerver szoftver, ami lehetővé teszi térbeli adatok megosztását. Java-ban íródott, így platformfüggetlen.
A HTML5 hirdetések előkészítéséhez szükséges műszaki előírások
A HTML5 hirdetések előkészítéséhez szükséges műszaki előírások Általános információk A hirdetések egy tag-be ágyazzuk be. A paramétereket az tag forráshivatkozásán keresztül adjuk át
Java Server Pages - JSP. Web Technológiák. Java Server Pages - JSP. JSP lapok életciklusa
Web Technológiák Java Server Pages - JSP Répási Tibor egyetemi tanársegéd Miskolc Egyetem Infomatikai és Villamosmérnöki Tanszékcsoport (IVM) Általános Informatikai Tanszék Iroda: Inf.Int. 108. Tel: 2101
Osztályok. 4. gyakorlat
Osztályok 4. gyakorlat Az osztály fogalma Az objektumok formai leírása, melyek azonos tulajdonsággal és operációkkal rendelkeznek. Osztályból objektum készítését példányosításnak nevezzük. Minden objektum
C#---Access adatbáziskezelési gyakorlat
C#---Access adatbáziskezelési gyakorlat 1. Feladat: adatbázis kezelő alkalmazás készítése C# környezetben, Access adatbázist használva. 2. Minta adatbázis létrehozása ACCESS-ben 3. A Projekt létrehozása
HTML. Ismerkedés a JavaScripttel. A JavaScript lehet ségei. A JavaScript kód helye. Önálló JavaScript fájlok
HTML Ismerkedés a JavaScripttel webprogramozó A weblapokat HTML nyelven készíthetjük el. A HTML egyszer leírónyelv, nem alkalmas válaszolni a felhasználóknak, nem tud döntéseket hozni, nem tud végrehajtani
1. Alapok. Programozás II
1. Alapok Programozás II Elérhetőség Név: Smidla József Elérhetőség: smidla dcs.uni-pannon.hu Szoba: I916 2 Irodalom Bjarne Stroustrup: A C++ programozási nyelv 3 Irodalom Erich Gamma, Richard Helm, Ralph
Hozzunk létre két rekordot a táblában, majd véglegesítsünk (commit):
Oracle adatbázis elérése A gyakorlat célja az, hogy a hallgató tapasztalatot szerezzen egy szerver oldali adatbázis kezelő rendszer elérésében, gyakorolja a vizuális eszközök és a kapcsolat nélküli (Disconnected
AJAX Framework építés. Nagy Attila Gábor Wildom Kft. nagya@wildom.com
AJAX Framework építés Wildom Kft. nagya@wildom.com Mi az AJAX? Asynchronous JavaScript and XML Ennél azért kicsit több: Koncepció váltás a felhasználói interface tervezésben Standard kompatibilis HTML!
3. Osztályok II. Programozás II
3. Osztályok II. Programozás II Bevezető feladat Írj egy Nevsor osztályt, amely legfeljebb adott mennyiségű nevet képes eltárolni. A maximálisan tárolható nevek számát a konstruktorban adjuk meg. Az osztályt
Lenyíló menük készítése. Összetett programok készítése
Lenyíló menük készítése Összetett programok készítése webprogramozó Akkor érdemes használni, ha a webhelyünk túl sok lehet séget tartalmaz ahhoz, hogy azok kényelmesen elférjenek egy oldalon. Pár oldal
Swing GUI készítése NetBeans IDE segítségével
Programozási Swing e NetBeans IDE segítségével Informatikai Kar Eötvös Loránd Tudományegyetem 1 Tartalom 1 2 2 Eddig a grafikus felhasználói felületet kódból hoztuk létre kézzel. A mi feladatunk volt az
Smalltalk 2. Készítette: Szabó Éva
Smalltalk 2. Készítette: Szabó Éva Blokkok Paraméter nélküli blokk [műveletek] [ x := 5. 'Hello' print. 2+3] Kiértékelés: [művelet] value az értéke az utolsó művelet értéke lesz, de mindet kiírja. x :=
Térkép szerver (MapServer)
Térkép szerver (MapServer) MAP EXTENT 465638 79800 851291 313008 IMAGETYPE "png" NAME "QGIS-MAP" SHAPEPATH "/home/user/mo" SIZE 600 600 STATUS ON UNITS METERS OUTPUTFORMAT NAME "png" MIMETYPE "image/png"
E-Freight beállítási segédlet
E-Freight beállítási segédlet Az E-Freight rendszer működéséhez szükséges programok és beállítások v08 A legújabb verzióért kérjük, olvassa be az alábbi kódot: 1. Támogatott böngészők Az E-Freight az Internet
Bevezetés a QGIS program használatába Összeálította dr. Siki Zoltán
Bevezetés Bevezetés a QGIS program használatába Összeálította dr. Siki Zoltán A QGIS program egy nyiltforrású asztali térinformatikai program, mely a http://www.qgis.org oldalról tölthető le. Ebben a kis
Építésügyi Monitoring Rendszer (ÉMO) komplex működését biztosító településrendezési tervek digitalizálása EKOP /B kiemelt projekt megvalósítása
Építésügyi Monitoring Rendszer (ÉMO) komplex működését biztosító településrendezési tervek digitalizálása EKOP 1.2.17./B kiemelt projekt megvalósítása Felhasználói kézikönyv ÉMO Területrendezési modul
QGIS tanfolyam (ver.2.0)
QGIS tanfolyam (ver.2.0) I. Rétegkezelés, stílusbeállítás 2014. január-február Összeállította: Bércesné Mocskonyi Zsófia Duna-Ipoly Nemzeti Park Igazgatóság A QGIS a legnépszerűbb nyílt forráskódú asztali
Cikktípusok készítése a Xarayában
Cikktípusok készítése a Xarayában A Xaraya legfontosabb tulajdonsága az egyedi cikktípusok egyszerű készítésének lehetősége. Ezzel kiküszöbölhető egyedi modulok készítése, hiszen néhány kattintással tetszőleges
HTML és CSS. Horváth Árpád május 6. Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár
Óbudai Egyetem Alba Regia M szaki Kar (AMK) Székesfehérvár 2015. május 6. Vázlat 1 2 A világháló Története statikus és dinamikus oldal URL DNS-feloldás IP-cím ügyfél (kliens, böngész ) és szerver (kiszolgáló)
Javacript alapismeretek
Javacript alapismeretek Mi az a JavaScript, mire alkalmazzuk? A JavaScript egy olyan programozási nyelv, melyet eleinte direkt a HTML hiányosságainak pótlására fejlesztettek ki. Segítségével létrehozhatunk
Adabáziselérés ODBC-n keresztül utasításokkal C#-ban
Adabáziselérés ODBC-n keresztül utasításokkal C#-ban 1. Előkészítés Access adatbázis lemásolása, ODBC DSN létrehozása Másoljuk le az alábbiakat: Mit Honnan Hova list.mdb p:\johanyák Csaba\Vizualis programozas\data\
Google Web Toolkit. Elek Márton. Drótposta kft.
Google Web Toolkit Elek Márton Drótposta kft. Tartalom A GWT általában Java forrás, Web mód, Hosted mód Speciális szolgáltatások History kezelés, távoli eljárás hívás, Külső függvénykönyvtárak GWT-Ext,
Felhasználói kézikönyv - Android kliens
Felhasználói kézikönyv - Android kliens Tartalom Telepítés Indítás Fő képernyők Térkép Rétegválasztó ablak Kilépés Keresés Lista Részletek Telepítés Az Élő Berek Android alkalmazás letölthető a www.e-berek.hu
Tájékoztató. Használható segédeszköz: -
A 35/2016. (VIII. 31.) NFM rendelet szakmai és vizsgakövetelménye alapján. Szakképesítés, azonosító száma és megnevezése 54 481 06 Informatikai rendszerüzemeltető Tájékoztató A vizsgázó az első lapra írja
Navigációs GPS adatok kezelése QGIS programmal (1.4 verzió) Összeállította dr. Siki Zoltán
Navigációs GPS adatok kezelése QGIS programmal (1.4 verzió) Összeállította dr. Siki Zoltán A QGIS program GPS eszközök modulja segítségével kétirányú kommunikációt folytathatunk a navigációs GPS vevőnkkel.
Internet TV Broadcaster kézikönyv
Internet TV Broadcaster kézikönyv Rövid ismertetető: Az Internet TV broadcaster segítségével flv vagy mp4 videó fájlokat műsorlistába rendezve sugározhatunk Internetes TV adásokat. Annyi a dolgunk, hogy
PHP gyorstalpaló, avagy a Hello World-től az űrlapellenőrzésig
PHP gyorstalpaló, avagy a Hello World-től az űrlapellenőrzésig
Egészítsük ki a Drupal-t. Drupal modul fejlesztés
Egészítsük ki a Drupal-t Drupal modul fejlesztés Drupal 6.0 2008. február 13. Miért írjunk Drupal modult? Nincs az igényeinknek megfelelő modul Valamilyen közösségi igény kielégítése Valami nem úgy működik
PHP. Telepítése: Indítás/újraindítás/leállítás: Beállítások: A PHP nyelv
PHP A PHP rövidítés jelentése hivatalosan: PHP Hypertext Preprocessor. Ez egy kiszolgáló-oldali parancsnyelv, amit jellemzően HTML oldalakon használnak. A különbség a két nyelv között az, hogy a kiszolgáló
A WEB programozása - Bevezetés. 2010. őszi félév Dr. Gál Tibor
A WEB Programozása Dr. Gál Tibor Automatizálási és Alkalmazott Informatikai Tanszék Általános információ Kommunikáció az előadóval Iroda: V2. épület, IV. emelet 454. szoba Tel: 2835 email: gal@aut.bme.hu
Bevezetés a programozásba. 9. Előadás: Rekordok
Bevezetés a programozásba 9. Előadás: Rekordok ISMÉTLÉS Függvényhívás #include #include #include #include using using namespace namespace std; std; double double terulet(double
VALUTAISMERTETŐ FUNKCIÓNÁLIS SPECIFIKÁCIÓ
VALUTAISMERTETŐ FUNKCIÓNÁLIS SPECIFIKÁCIÓ Tartalomjegyzék. Áttekintés Rendszerkövetelmények A szoftver funkciói Interfészek Képernyőképek Főképernyő Általános ismertető Valuta nézet Bankjegy nézet Csekkek
Hasznos gyűjtemények:
Az oldalon néhány nagyon hasznos JQuery plugin kíséreltem meg összegyűjteni. A gyűjtemény kifejezetten használhatósági szempontokat vett figyelembe. Hasznos gyűjtemények: JQuery hivatalos plugin oldala
Képnézeget. Gépigény: Bármilyen számítógépen m ködik, amin található böngész és Internet elérés.
Képnézeget Felhasználói dokumentáció Feladat: Java Script segítségével, olyan programot írni, mely képnézeget ként szolgál. Legalább 10 képet kell elhelyezni benne. Gombok választásával kell a design-ok
BME MOGI Gépészeti informatika 7.
BME MOGI Gépészeti informatika 7. 1. feladat Írjon Windows Forms alkalmazást egy kör és egy pont kölcsönös helyzetének vizsgálatára! A feladat megoldásához hozza létre a következő osztályokat! Pont osztály:
Adatbázis-kezelés ODBC driverrel
ADATBÁZIS-KEZELÉS ODBC DRIVERREL... 1 ODBC: OPEN DATABASE CONNECTIVITY (NYÍLT ADATBÁZIS KAPCSOLÁS)... 1 AZ ODBC FELÉPÍTÉSE... 2 ADATBÁZIS REGISZTRÁCIÓ... 2 PROJEKT LÉTREHOZÁSA... 3 A GENERÁLT PROJEKT FELÉPÍTÉSE...
Magyar Nemzeti Bank - Elektronikus Rendszer Hitelesített Adatok Fogadásához ERA. Elektronikus aláírás - felhasználói dokumentáció
ERA Elektronikus aláírás - felhasználói dokumentáció Tartalomjegyzék 1. Bevezető... 3 1.1. Általános információk... 3 2. DesktopSign... 3 2.1. Általános információk... 3 2.2. Telepítés... 3 3. MNBSubscriber...
A függvény kód szekvenciáját kapcsos zárójelek közt definiáljuk, a { } -ek közti részt a Bash héj kód blokknak (code block) nevezi.
Függvények 1.Függvények...1 1.1.A függvény deníció szintaxisa... 1..Függvények érték visszatérítése...3 1.3.Környezettel kapcsolatos kérdések...4 1.4.Lokális változók használata...4 1.5.Rekurzív hívások...5.kód
Programozás II. 4. Dr. Iványi Péter
Programozás II. 4. Dr. Iványi Péter 1 inline függvények Bizonyos függvények annyira rövidek, hogy nem biztos hogy a fordító függvényhívást fordít, hanem inkább az adott sorba beilleszti a kódot. #include
Ajax és Echo 2. Bokor Attila
Ajax és Echo 2 Bokor Attila attila.bokor@netvisor.hu Tartalom Ajax áttekintés Echo2 Echo2 kiegészítések Asynchronous JavaScript and XML Webfejlesztési technika interaktív webalkalmazásokhoz Kifejezés közösen
Mobil Telefonon Keresztüli Felügyelet Felhasználói Kézikönyv
Mobil Telefonon Keresztüli Felügyelet Felhasználói Kézikönyv Tartalomjegyzék 1. Symbian rendszer...2 1.1 Funkciók és követelmények...2 1.2 Telepítés és használat...2 2. Windows Mobile rendszer...6 2.1
9.óra CodeIgniter Framework #1. Gyimesi Ákos
9.óra CodeIgniter Framework #1 Gyimesi Ákos gyimesi.akos@gmail.com http://webprog.gy-i-m.com Miért van szükség keretrendszerre? Keretet ad, hogyan álljunk neki a feladatnak Előre definiált felépítés, ami
WEB PROGRAMOZÁS 3.ELŐADÁS. Űrlapok
WEB PROGRAMOZÁS 3.ELŐADÁS Űrlapok 2 Globális és környezeti változók Globális és környezeti változók 3 A globális változók azok a változók, amelyeket a program legfelső szintjén, azaz a függvényeken kívül
OTP Egészségpénztár OTP Nyugdíjpénztár OTP SZÉP Kártya OTP Cafeteria Nyilatkoztató. https://www.otpportalok.hu. Készítette: Konyicsák Zoltán
https://www.otpportalok.hu Készítette: Konyicsák Zoltán Tartalom 1 Néhány szó az OTP Portálok programról... 3 1.1 Az OTP Portálok bevezetésének célja... 3 2 Belépés az OTP Portálok oldalra... 4 2.1 A bejelentkezéshez