Így érdemes:

Ha teljesen laikus vagy, akkor az első résztől olvasd el a honlapot, mert egymásra vannak építve az oldalak! Jobbra a menü...

2017. március 2., csütörtök

Célok

Nemzetárulók weboldal látogatása nem kívánatos! 

A weboldal célja:
-Egyszerű számítási, játék, stb. programok megírásának elsajátítása.
-Robotok, egyszerűbb eszközök vezérlésének elsajátítása,   illetve ilyenek építése.
-Ezeket minél egyszerűbben, és minél kevesebb ráfordítással, néhány óra, pár nap alatt elérni!

Például képes leszel egy
ilyen apró lottó program megírására:


(Meg jósolja a jövőheti lottószámokat! Az első mezőbe írd be hányas lottót játszol (pl 90), a másodikba, hogy hány számot húznak ki (pl.5). A nyereményből kérek 5%-ot! Játszd meg, szerencsét fog hozni, meglátod, de a millió feletti nyeremény 5%-át kérem jutalékként!)

vagy robotkart, vagy akár egy 3D-s nyomtatót készíteni (a kapcsolódó projektek a menüben jobboldalt)!

Bármit állítani, tanítani, filmet csinálni, stb., a holokausztról etikátlan mindaddig, amíg nem lehet szabadon beszélni róla!


Tehát a cél az volt, hogy minél egyszerűbben, és gyorsabban elérjük a célt. Ehhez kerestem meg a legegyszerűbb módszereket, programnyelveket, és fejlesztői környezetet (szoftvereket), így egy teljesen laikus, akár egy tornából, a műszaki világból, és a józan észből felmentett, a CEU-n, gendeszakon lebutított agyhalott is, néhány óra, pár nap  alatt elérheti, hogy  MacGyverként  építhet eszközöket. Persze ez az oldal nem nekik szól, mert ők humanista köpönyeg alól, azonnal pusztításra használnák... Na, csapjunk bele:

Alapok:
A számítógép alapjai nagyon régiek, ha bővebben érdekel olvasd el a wikin. Én leginkább egy zenedoboztól indulnék ki, egy ilyenből:
https://www.youtube.com/watch?v=zUM6DeZvZH4
Itt már lyukszalag tartalmazza az információt, hogy a hangfésű melyik foga mikor pendüljön meg:
https://www.youtube.com/watch?v=LLgd72t4brA
Ha a zenedoboz fésűiből elektromos érintkezőket csinálnánk, akkor nem hang, zene, hanem például LED-ek (olyan kis villanykörtéhez hasonló világító izék) kapcsolnának be-és ki. (A monitor vagy 3 millió ilyen kis "lámpából" áll, és ezek fel, és lekapcsolásának a kombinációjából bármilyen képet kirajzolhatunk.)

A lyukszalagon lévő lyukat 1-nek jelölik a számítástechnikában, amikor nincs lyuk, akkor azt 0-nak.
A számítógépben manapság olyan "lyukszalagot" használnak amelyen egy sorban nyolc oszlop lyukhely van, vagyis nyolc fésűs. Tehát nyolc LED-ed (vagy villanykörtét, stb.) lehet vele egyszerre vezérelni.  A lyuk helyét bitnek hívjunk.  A bit szó egy angol rövidítés, a binary digit szavakból áll össze, jelentése: bináris (kétértékű) számjegy. A nyolc bitet összesen, vagyis egy sort bájtnak (Byte ) hívunk. Tehát ha a nyolc oszlopos lyukszalagunkon az első sorban nincs lyuk, akkor az így írjuk le:
00000000 ha pedig minden helyen lyuk van, akkor így: 11111111. Ha pedig ezt írom: 00100001 akkor az azt jelenti, hogy abban a sorban csak kettő lyuk van, amikor ehhez a sorhoz ér a fésű, akkor a harmadik, és a nyolcadik LED világít. Az egész lyukszalagot le lehet írni így egy jó hosszú, a 0 és 1 kombinációjából álló sorral. Ezt hívják gépi kódnak. Amikor csinálsz egy ilyen lukszalagot, akkor programozol. Még annyit, hogy amikor beszélnénk erről a lyukszalagról egymás között, és annak az egyik lyukhelyéről, akkor azt ehhez hasonlóan tennénk.
-A kilencedik sorban a második bitnél (vagy oszlopban lévő lyukhelynél) el van tépődve a papír.
Tehát megadnánk a lyukhelynek a koordinátáját, vagyis címet adnánk neki.

Nyilván a számítógép összetettebb, mint a mi elképzelt "zenedobozunk".  Ahhoz, hogy a számítógéphez gépi kódot írjunk, szintén ismernünk kell a gép felépítését, de azt nem lehetne néhány óra alatt megtanulni... Ezért elkezdték a programozást egyszerűsíteni.
Kitaláltak programnyelveket, és azokhoz fordítókat, amelyen keresztül elkezdhetünk programozni úgy, hogy nem ismerjük részleteiben a számítógép felépítését. Mi megírjuk a programot valamilyen programnyelven, majd a számítógép lefordítja azt magának gépi kódba.

Először a bájtot rövidítették le, és kialakították a hexadecimális kódolást, majd az első nyelv az Assemble következett, amely a legközelebb áll a gépi kódhoz. Ez volt az első generációs nyelv. Most a negyedik generációs nyelveknél tartunk, amelyeknél arra törekednek, hogy minél több ember, miné egyszerűbben tudjon kódolni, programozni.

Voltaire "Ha tudni akarod ki uralkodik feletted, elég kiderítened, hogy ki az, akit nem szabad bírálnod."


 Tartalom:
-Ezen az oldalon a továbbiakban, a HTML és a CSS alapjaival ismerkedhetek meg,
- A második oldalon a JavaScript alapjaival, és elsajátítjátok hogyan lehet böngészőbe használható programokat írni, illetve a programozás alapjait.
- A harmadik oldalon a  nyomtató csatlakozóján keresztül képesek lesztek  dolgokat, robotokat vezérelni Visual Basic nyelven.
- A negyedik oldalon mikróvezérlők (önálló robotok) vezérlése a cél, így a C nyelv egy célspecifikus változatával ismerkedünk meg. USB-n keresztül  szintén használni fogjuk a Visual Basic-et is, és egy picike JavaScript példa is lesz, de inkább csak az érdekesség kedvéért.
- Az ötödik oldalon a motorokkal ismerkedünk meg, mert azok mozgatják a robotokat.
- A többi oldalon példaprojektek vannak.
Haladj sorrendben!

HTML alapjai. 

A HTML a weboldalak egyszerű nyelve. Ma már több nyelven is csinálnak weboldalakat, de ez az alap. Ez lényegében a file. Olyan, mintha írnál egy szöveges dokumentumot. Azt elmented. Más által is megoszthatóvá teszed. Azok letöltik a gépükre, és elolvassák.
Írjunk egy weboldalt!
Ehhez első körben olyan szövegszerkesztőt fogunk használni, amelyik nem tesz formázásokat a szövegbe. Amikor programozunk akkor ilyenek nem lehetnek benne. Ezért nem tudunk Word-öt használni, de a WordPad se jó, viszont jó a Jegyzettömb. Ha Windows operációs rendszert használsz, akkor megtalálod ha a Start menüre kattintasz, majd Minden program gombra, majd a Kellékekben megtalálod.
Ha nem Windows használsz, akkor nézz utána,a Te gépeden van e hasonló, vagy tölts le egy forráskód szerkesztő programot.
Amire még szükséges van az, hogy lássad a fájlok kiterjesztését. Ez azt jelenti, hogy ha megnyitod például a dokumentumok mappádat, és az ott tárolt fájlokra nézel, és csak olyan nevük van, hogy pl. kep1 , vagy nevtelen , stb., de nincs a név után pont, és utána két-három betűs rövidítés, akkor nem látod a kiterjesztésüket. Így kéne látnod a fájlokat: pl. nevtelen.rtf vagy kepem.jpg  A pont utáni rövidítés azt jelöli a számítógépnek, hogy milyen programnyelvet illetve kódot tartalmaz a fájl, és így azon fogja elolvasni, így tudja használni.
 Ha Windows operációs rendszered van, és nem látod a fájlok kiterjesztését, akkor így kell beállítanod:
Start menü, vezérlőpult, Mappa beállítások, Ha nem látod a mappabeállításokat a vezérlőpultba, akkor a vezérlőpult nézetét át kell állítani. Windows7-nél Kategória, kis ikonok. Ekkor már megjelenik a mappabeállítások. Abban a Nézet fülön, a speciális beállítások ablakban  vedd ki a pipát a Ismert fájltípusok kiterjesztéseinek elrejtéséből. Ezek után a fájljaid nevében látni fogod a rövidítéseket, de vigyázz, amikor átnevezel majd egy fájlt, akkor a rövidítést ne töröld, és ne írd át, mert akkor a fájlt nem fogja tudni használni, és megnyitni a számítógép, mert nem fogja felismerni milyen nyelven van kódolva.

Csináljuk meg az első honlapunkat, egy html fájlt!
Nyisd meg a Jegyzettömböt, és írd be ezt:
<html>
Hello világ!
</html>

A másik dolog, amiről felismeri a számítógép, hogy html kódolással van dolga, a kiterjesztésen kívül, hogy a kódban megmondjuk neki.
Láthatod, hogy a html kódnak van egy kezdő része, és egy záró része. A záró rész egy plusz / tartalmaz. A kód mindig arra vonatkozik, amely a kezdő és záró rész között van. Tehát itt ez most azt jelenti, hogy html nyelven van a kód közötti rész.

Most a Jegyzettömbbe kattints a File menüre, majd a Mentés másképpen, és mentsd el ezekkel a beállításokkal:
File névnek ezt írd: elso.html
File típusa: minden file
File kódolás: Unicode
A letöltés helye oldalt legyen a dokumentumok, vagy az asztal, mindegy csak találd majd meg. Majd mentés gomb. Itt jegyzem meg, a programozás általában nem szereti az ékezetes betűket. Fájlnévbe se használd (elso)...

Most keresd meg, ezt a fájlt, és kattints rá! A böngésződ fogja megnyitni, mint egy honlapot, mert az is.

Most módosítsad a Jegyzettömbbe a kódot az alábbira, majd File menüre kattints, és a Mentés gombra. Ezután frissítsed, vagy másképpen  tölts újra (nyomd meg a böngésződ felső részében azt a gombot, amelyen egy nyíl önmagába fordul) a böngésződet!

<html>
<b> Ez a szöveg félkövér lesz. </b>
<h1>Ez a rész pedig normál.</h1>
</html>

Most láthatod, hogy a szöveg, ami az egyik új kód között van, félkövér lett, a másik kódtól meg nagy.
Minden kódnak van egy kezdő, és egy befejező része, de mutatok egy kivételt: <br>

<html>
<b> Ez a szöveg félkövér lesz. </b><br>
<h1>Ez a rész pedig normál.</h1>
</html>

Ettől a <br>-től  új sorba került a szöveg...
Egy honlap minimum ezekből a részekből áll: maga a html, a cím (title), egy fejrész (head), mint ahogy ennek a honlapnak is van, és egy test (body).
Minden html részt új sorba szokás írni, kivétel a cím, a szöveg, és a formázásához való kódokat, amelyek egy sorba vannak.

<html>
<title>Ez a címe a honlapnak</title>
<head>
<h1>Az egy felső rész.</h1>
</head>
<body>
Ez a test rész. Itt van a hosszú szöveg,  a tartalom nagy része.
</body>
</html>

Erről a lapról kinézhetsz egyéb formázási kódokat is:
http://htmliskola.uw.hu/tan04.html
pl. a honlap színét, és a betűszíneket is variálhatjuk a kódokkal:

<html>
<title>EZ a címe a honlapnak</title>
<head>
<h1>Az egy felső rész.</h1>
</head>
<body bgcolor="#87ADD3">
<font color="yellow">Az a test rész. Itt van a hosszú szöveg,  a tartalom nagy része. </font>
</body>
</html>

Ezen a honlapon megismerheted a html kódolás alapjait, kb. 1 óra alatt.
http://htmliskola.uw.hu/tan01.html
Természetesen vannak még egyéb kódok is, amikor felmerül valamire az igény, akkor ha az alapokat ismered, és most már be fogod tudni megfelelően illeszteni a kódodba.
És egy jó hír. A fentiek céljából nem kell megtanulnod fejből ezeket a kódokat. Van pl. olyan online program is, amelybe úgy szerkeszthetsz, mintha word dokumentumot csinálnál, és a forráskódját ki tudod menteni. Pl a következő linken. A forráskód gombbal meg tudod nézni a html kódját, és csak az innen-onnan szedet extra kódot kell beillesztened a programodba:
http://htmleditor.in/index.html

Itt pedig gyakorlatilag kipróbálhatod az összes HTML kódot:
https://www.w3schools.com/html/

Annyit még hozzátennék, hogy a html fájlt, vagyis az internet népének is meg lehet megmutatni, de ahhoz fel kell töltened az internetre. Az internet, itt szervergépet jelent. Szervergép az, amelyiken egy szerver program fut. A te számítógépeden is futhat szerver program, de ma már elvárás a szerver gépektől, hogy napi 24 órába be legyenek kapcsolva, és a rajtuk tárolt, és a szerverprogram segítségével mindenki felé megosztott honlapok éjjel-nappal elérhetőek legyenek. Ezért leginkább cégek üzemeltetnek ilyen szerver számítógépeket. Most nem cél részletesebben belemenni, de vagy fizetned kell évente, hogy feltöltöd rá a honlapodat (html fájlodat), vagy egy reklámot helyeznek rá. Van azonban ingyenes, és reklámmentes megoldás, pl. az, amit most is olvasol, a google blogspot szolgáltatása. Az itteni reklámot én raktam rá, aminek a bevételéből részesedést kapok..

Folytatva:
Az elkészült  html fájlodra amikor megnyitod a böngésződdel, kattints jobb egérgombbal, és ott van egy olyan választási lehetőség, hogy az oldal forrásának megtekintése. Itt láthatod a kódodat, amit készítettél, és más html honlap kódját így meg tudod nézni.
Ma már nem csak html-be készítenek honlapokat, hanem más nyelveken is, pl. php, stb. Ezekkel úgynevezett dinamikus honlapokat lehet csinálni, amelyek elrejtik a forrásukat a felhasználók elől. A honlap ugyanis nem töltődik le a felhasználónál, hanem a program fő része a szerver gépen fút, és állít elő egy html oldalt, amit amikor felkeresed a weboldalt, akkor ideiglenesen letölt a számítógéped, és elolvas. Az ilyen lapok forráskódjából nem tudod lelesni a programba írt jelszót, mert a program azon része a szervergépen fut, hozzád csak az jut el, ami nem titkos. Ezekkel viszont most itt nem foglalkozunk, de ennyire megemlítettem.

Ami nekünk fontos, egy számító programhoz, az pl. a beviteli mező html kódja!
alapból két dolog kell nekünk, egy olyan beviteli mező, amibe számot, vagy szöveget írhatunk, pl. egy ilyen:
<input name="valamiadat">
és egy gomb, aminek a megnyomásával például megkapjuk egy számításnak az eredményét, pl. egy ilyen:
<input type="button" value="Klikkelj rám" onclick= "plusz();" />
Most ezek beleillesztve a honlapunkba, így néz ki a teljes kód:

<html>
<title>Ez a címe a honlapnak</title>
<head>
<h1>Az egy felső rész.</h1>
</head>
<body bgcolor="#87ADD3">
<font color="yellow">Az a test rész. Itt van a hosszú szöveg,  a tartalom nagy része. </font><br>
<br>
<input name="valamiadat">
<input type="button" value="Klikkelj rám" onclick= "plusz();" />
</body>
</html>

Persze tapasztalhatod, hogy lenyomva a gombot most semmit nem csinál, majd a második részbe mutatom meg, hogy kell egy gombnak funkciót adni! Természetesen többféle beviteli mező van, legördülő menű, rádió gomb, stb.

Űrlapelemek
<form name="urlap" action="oldal.php">

<input name="adat" size="15">

<textarea name="szoveg" rows="4" cols="10"></textarea>

<input type="radio" name="valasztas" value="igen"> Igen<br>

<input type="checkbox" name="valasztas" value="férfi"> Férfi<br>

<input type="button" value="KATT" onClick="utasitas()">


<input type="submit" value="MEHET">


<input type="cancel" value="TÖRLÉS">


<select name="valaszto" size="1">


<option value="elso">ELSŐ</option>


<option selected value="masodik">MÁSODIK</option>
</select>
* Űrlap megnyitása, neve és submit esetén az adattovábbítás helye

* Beviteli mező, neve és mérete


* Többsoros szövegdoboz, neve, magassága és szélessége karakterben

* Rádió gomb, neve, értéke. Azonos nevű rádiógombok közül egyet választani lehet.

* Választó gomb, neve, értéke. Ki és bekapcsolni lehet.



* Nyomógomb, felirata és a kattintáshoz rendelt javascript utasítás


* Az űrlap adatait továbbító gomb és felirata


* Az űrlap adatait törlő gomb és felirata* Legördülő lista választó. A size érték megadja, hogy gördítés nélkül hány elem látható.

* Az első választás


* A második választás, előre kijelölve



* Legördülő lista zárás

Itt az alapvető kódokat megtalálod:
http://www2.akg.hu/info/11-12/html.html

Evvel ki is lőttük a HTML programozás számunkra fontos részét!

Mindig az az agresszor, a "náci, a "fasiszta", a gennyláda, stb., aki nem akar racionális vitát!

CSS programozás!

Ez még rövidebb lesz, mint a HTML! Ez szintén a honlapok formázásáról szól. A CSS-nek két célja van. Evvel két dolog miatt foglalkozunk. Az egyik, hogy használatával  átláthatóbb lesz a programkódunk, a másik, hogy néhány formázás leginkább evvel oldható meg. A CSS használatánál egy nagyobb weboldal stílusjegyeit, pl. a betűszíneket, vagy a méreteket a head részben meg tudjuk adni, és a továbbiakban már nem zavar a kód a body részben. Persze ha van egy mondat, amit más stílussal akarsz megjeleníteni a szövegben, akkor azt közvetlenül ugyanúgy formázhatod, mint a HTML-nél, és akkor arra a részre az lesz az érvényes. Sőt, ha olyan weblapokat készítesz, amelyek több oldalúak, akkor a CSS formázás kódját meg tudod adni egy külön fájlba is, és a lapokon csak hivatkozni kell rá, és ilyen egyszerűen az összes oldalnak meg tudod csinálni a formázását. Most evvel nem foglalkozunk, mert erre most nincs szükségünk, de ha érdekel, illetve a CSS-ről többet is meg akarsz tudni, illetve az alap kódokat itt találod, ez se vesz el az életedből többet, mint fél órát!
http://weblabor.hu/cikkek/cssalapjai1

Csináljunk egy CSS kóddal formázott lapot:
A CSS kódot ez:
<style type="text/css"><!--
és ez közé kell írni:
</style>
A CSS kód úgy néz ki, hogy megadjuk az elemet, hogy mit fogunk formázni, pl a body részt, majd kapcsos zárójelbe megadjuk a formázási utasításokat, pl. ebben a példában a betűtípust, a betű méretét, a háttérszínt, stb. A adott elemhez kettősponttal társítjuk a jellemzőjét, és a lista egységeit pontos vesszővel választjuk szét. Pl.
body { font-family: Arial, Helvetica, sans-serif; font-weight: bold;font-size: 40px; color: #58408F; text-align: center; background-color: #6BB4DF;}

Példa egy teljes HTML kódba:

<html>
<head>
<title>Lottó</title>
<style type="text/css"><!--
body { font-family: Arial, Helvetica, sans-serif; font-weight: bold;font-size: 40px;
color: #58408F; text-align: center; background-color: #6BB4DF;}
h1 { font-size: 30px; color: #a00000}
input[name="mennyibol"] { color: #E81569}
input[type="button"] { color: #00a000}
</style>
</head>
<body>
<h1>Ez egy CSS-sel formázott oldal!</h1>
<input name="mennyibol"> <input name="mennyi"> <input type="button"

value="A számokért klikkelj rám" onclick= "plusz();" />
</body>
</html>

Evvel le is tudtuk a CSS formázást. Erről a weboldalról lelesheted azt a kódot, amire szükséged van, ha pedig ott nem találod meg, akkor beütöd a google-ba, hogy pl. félkövér betű css kód, és bizonyosan rá fogsz találni!
A második részbe a Javascript-tel ismerkedünk meg, és pár perc múlva már képes leszel egy számológépet, vagy egy számítási feladatot végző programot csinálni!

Mindannyiunk legfőbb kötelessége, hogy a jövő generációit fontosabbnak tekintsük magunknál!