Webfejlesztés
A tudás forrásai
Webes technológiák, referenciák, útmutatók rengeteg példán keresztül dokumentálva. Nagyon jó kiindulópont a tanulásban
Gyakorlatok: HTML | CSS | JavaScript
Kvízek: HTML | CSS | JavaScript
Webes technológiák, referenciák és útmutatók.
HTML; HTML5; CSS és az összes többi technológia
HTML, CSS, JavaScrypt
HTML, CSS, JavaScript, Bootstrap, jQuery PHP, ...
Ingyenes könyvek:
HTML Handbook: online olvasható; letölthető pdf és epub
CSS Handbook: online olvasható; letölthető pdf és epub
JavaScript Handbook: online olvasható; letölthető pdf és epub
PHP Handbook: online olvasható; letölthető pdf és epub
Tiszta kód ↔ CMS
A régi weboldalam (infodobos.cew.hu) tisztán HTML5 + CSS3 + JavacSript technikával készült. Demóként (és mert sok munka van benne) megtartom, szemléltetendő azt, hogy saját fejlesztéssel teljesen rugalmasan bármi megoldható. Nincs semmi kötöttség, csak a tudás határozza meg, hogy mit és hogyan valósít meg a tervező. Az ára az, hogy nagy munka a módosítása. Ezért is tértem át egy tartalomkezelő rendszer használatára ↓
~~~~~
Tartalomkezelő rendszerekkel (CMS) is készíthető website, ezekkel sokkal egyszerűbb a tartalmakat létrehozni, de sok kötöttséggel kell számolni. Ez az oldal a Google Webhelyek CMS rendszerrel készült. Sok ilyen rendszer van, csak néhány példa:
Google Webhelyek (akinek van Google azonosítója, annak ez is a rendelkezésére áll)
WordPress (jelenleg a legnépszerűbb, de nagyon támadják)
Joomla!; Drupal, ...
Tanpéldák
Online editorok
Sok online alkalmazást felsorolok, mert mindegyik más szolgáltatásokat nyújt. Kinek az egyik tetszik jobban, kinek inkább a másik. Érdemes kipróbálni őket és kiválasztani a legszimpatikusabb(aka)t.
Több mint 50 programnyelven biztosítja a kódírást, akár társakkal együtt, közösen is.
Valós idejű együttműködés: hívja meg barátait, csapattársait, kollégáit, tanítványait közvetlenül a kódjába. A Google Dokumentumokhoz hasonló szerkesztési élményt nyújt, ahol láthatja munkatársainak kurzorait.
Az ingyenes változat korlátozott, de jól használható HTML + CSS + JS kódok írására és megosztására. Mások kódjai tanulmányozhatók és saját változat is készíthető azok alapján (fork).
Egyik kedvenc példám a közismert "Életjáték" (Game of Life), ami egy klasszikus programozási példa webes megoldása. Az algoritmusról olvashatsz a Wikipédián.
Jól használható és megosztható a kódunk. Ha JavaScript-et is használ, érdemes lehet a Settings-ben bekapcsolni az "Auto Run Js" funkciót.
Lehet vele többen együtt is dolgozni, még a többiek egérkurzora is látszik.
Tipp: a tag neve kacsacsőr nélkül, majd Tab billentyű.
Lehet vele többen együtt is dolgozni, még a többiek egérkurzora is látszik.
Tipp: a tag neve kacsacsőr nélkül, majd Tab billentyű.
A CodeSandbox egy online szerkesztő a gyors webfejlesztéshez. A CodeSandbox segítségével gyorsan prototípusokat készíthet, egyszerűen kísérletezhet, és egy kattintással megoszthatja alkotásait. Statikus webhelyek, full-stack webalkalmazások vagy összetevők létrehozására használható bármilyen eszközön webböngészővel.
Tipp: az eredmény a fájl(ok) mentése után aktualizálódik
A letölthető HTML jód kicsit furcsa, mert a style nem a head-ban, hanem a body végén van. Működik igy is, de a helye a head-ban van. A nyomtatott kódok és futás jól használható kisebb példakódok dokumentálására. Itt a három rész (HTML, JS, CSS egymás itán van, s ezt követi a megjelenített eredmény.
Egyszerű, jól áttekinthető felület, de a letöltés nálam nem működött.
"A leggyorsabb és legegyszerűbb javascript online szerkesztő", valós idejű eredmény nézettel és konzollal. MDN referencia a kódból közvetlenül elérhető.
Olyan eszköz, amely kijavítja a HTML-t, így érvényes kód lesz (kiegészíti a hiányzó címkéket, átrendezi az összekevert címkéket, ...). Ezenkívül formázza a HTML-t (elrendezés és behúzás)
A HTML-dokumentumot (vagy töredéket) egyszerű HTML-címkékké és attribútumokká redukálja (tiszta HTML kód). Eltávolítja a szkripteket, a CSS-t és más nem alapelemeket (pld. <object>, <canvas>, ...), valamint kijavítja a hibákat és formázza a HTML dokumentumot.
Érdekesség: egy Word dokumentumot (.docx) tiszta HTML-lé alakít át (jelenleg képek nélkül)
A létrehozott grafika HTML Source kódja letölthető, illetve .svg fájlba elmenthető. Képet is be lehet importálni.
Google ingyenes betűtípusok
Google karakterkészletek. Sajnos nem minden font tartalmaz minden magyar ékezetet. Érdemes a tesztszöveget erre átírni:
Árvíztűrő tükörfúrógép Il1O0
A Google egy új betűtípust tett elérhetővé. A "Roboto Serif"-nek elnevezett betűkészletről a cég azt állítja, hogy azzal jóval könnyebbé válik az olvasás szinte minden kijelzőn, mint az eddig használt társaival.
"A Roboto Serif egy változó betűtípusú család, amely kényelmes és súrlódásmentes olvasási élményt biztosít. Minimális és magas fokon funkcionális, bárhol hasznos (még az alkalmazások interfészeiben is), mivel súlyok és szélességek átfogó készletét kínálja az optikai méretek széles skáláján. Bár kifejezetten arra tervezték, hogy jól működjön a digitális médiában, a mai méretek és felbontások teljes skáláján, de ugyanolyan kényelmes az olvasás és a munka vele a nyomtatott médiában is", írja új betűtípusáról a Google annak oldalán.
Helyőrző képek
Könnyen kezelhető, stílusos helyőrzők. Webes fejlesztésnél szükség lehet adott méretű véletlenszerű helyőrző kép beillesztésére (hasonlóan, mint szövegeknél az elterjedt lorem ipsum). Innen lehet ingyenesen helyőrző képeket nyerni.
Példa: https://picsum.photos/200/300
Adott méretű helyőrző képet lehet lekérni. Opcionálisan megadható a háttér színe, a szöveg színe, maga a szöveg és akár a képformátum is.
Példa: https://via.placeholder.com/400x100.png/f00/fff?text=Informatika+kisokos
A linkben megtalálhatók a kép méretei (egy méretszám esetén négyzet), formátuma, háttérszíne, a szöveg színe, valamint maga a szöveg (szóköz helyett + karakter kell)
Webes fejlesztésnél szükség lehet adott méretű véletlenszerű helyőrző kép beillesztésére (hasonlóan, mint szövegeknél az elterjedt lorem ipsum). Innen lehet ingyenesen helyőrző képeket nyerni akár adott kategóriában, választhatóan színes vagy fekete-fehér kivitelben.
Példa: http://lorempixel.com/400/200/sports/Dummy-Text/
(minden frissítésnél más-más képet ad, de meg lehet hívni fix képpel is)
Szövegek, ikonok
Innen megtudhat mindent az 1500-as évek óta mindenki által használt tesztszövegről és generálhat is adott tosszúságú tesztszöveget.
Szabadon felhasználható fontok és ikonok gyűjteménye. Érdemes figyelni arra, hogy a magyar ékezeteket nem minden font jeleníti meg, ezért a linkem tartalmazza a magyar ékezetes tesztszöveget (Árvíztűrő tükörfúrógép), valamint az optikailag keverhető karaktereket (Il1O0).
A Google egy új betűtípust tett elérhetővé. A "Roboto Serif"-nek elnevezett betűkészletről a cég azt állítja, hogy azzal jóval könnyebbé válik az olvasás szinte minden kijelzőn, mint az eddig használt társaival.
"A Roboto Serif egy változó betűtípusú család, amely kényelmes és súrlódásmentes olvasási élményt biztosít. Minimális és magas fokon funkcionális, bárhol hasznos (még az alkalmazások interfészeiben is), mivel súlyok és szélességek átfogó készletét kínálja az optikai méretek széles skáláján. Bár kifejezetten arra tervezték, hogy jól működjön a digitális médiában, a mai méretek és felbontások teljes skáláján, de ugyanolyan kényelmes az olvasás és a munka vele a nyomtatott médiában is", írja új betűtípusáról a Google annak oldalán.
Tipográfiai közösség, amely az alkotóknak nyújt segítséget a gyönyörű, ingyenes, nyílt forráskódú tipográfia használatában.
Rengeteg fantasztikus ikon, amiből sok ingyenes.
Több mint 5 millió ikon, amiből 321 ezer ingyenes. PNG és legtöbbször SVG formátumban is letölthetők. lehetőleg SVG legyen, mert az felbontástól függetlenül jól néz ki.
Ez a domain a dokumentumok szemléltető példáihoz használható. Ezt a domaint előzetes egyeztetés vagy engedélykérés nélkül használhatja.
Tesztek
HTML5 test - Az adott böngészőt teszteli a HTML5 képességek szerint. A dokumentációk is elérhetők innen
CSS3 teszt - Az adott böngésző CSS3 kompatibilitását teszteli. A dokumentációk is elérhetők innen
web.dev - Measure - Nézze meg, mennyire teljesít a webhelye. Ezután szerezzen tippeket a felhasználói élmény javításához. Jelentkezzen be, hogy nyomon kövesse az idő előrehaladását.
Ajánlott YouTube oktatóvideók
Az alább felsorolt YouTube videók nem fontossági sorrendben vannak. Nagyrészük angol nyelvű, de igyekszem a magyar nyelvű tartalmakat is listázni.
Wes Bos (angol nyelvű)
Színek
Készítsen tökéletes színpalettát, vagy inspirálódjon több ezer gyönyörű színvilágból.
A felhasználók legújabb kedvenc színei; Népszerű színpaletták; Népszerű színek; Színnevek; "Web Safe" színek
Ha a színkörben kiválasztunk egy színt, a program automatikusan ajánlja hozzá a továbbiakat. Több felosztás közül választhatunk (monochromatic, triad, tetrad stb.)
Maximum 4 MB méretű fotókat tölthetünk fel, amiről gyorsan megállapítja, hogy melyek a legjellemzőbb színek.
Színpalettát jelenít meg a képre legjellemzőbb színek alapján. A színkivonás működik JPEG-, PNG- és GIF-fájlok esetén. Hasonló színvilágú képek keresésére is alkalmas.
Fordított képkeresés - segítségével kinyomozhatjuk egy fotó eredetiségét, vagy rálelhetünk azokra a közösségi bejegyzésekre is, ahol megosztották azt.
CSS
Flexbox Froggy - Játékos CSS Flexbox tanulás (magyarul)
Webdesign - Ingyenes oktatóanyagok, tanulási útmutatók és online tanfolyamok
CSS selectors cheatsheet - látványosan bemutatja a szelektorok használatát. Letölthető pdf-ben (6 oldal)
A CSS Diner egy webes játék, amely szinte mindent megtanít a szelektorok kombinálásával kapcsolatban
Oktatóvideók
CSS3 Zero to Hero (ArniWebDev, YouTube lejátszási lista)
~~~~~
Egy nagyon jó oldal (volt), amit arra készítettek, hogy bemutassa, mit lehet elérni a CSS alapú tervezéssel. Minden variáció pontosan ugyanazt a HTML oldalt jeleníti meg, csak a formázásra szóló CSS fájl változik. Sajnos már jó ideje az oldalon felkínált választás nem működik! Ha a "VIEW ALL DESIGNS" gombra kattint, már nem jelenik meg a dizájnok választására szolgáló oldal, de egy kis trükkel még meg lehet tekinteni az egyes megvalósításokat.
A trükk a következő: a domain név végén lévő számot kell megváltoztatni, így egyesével meg lehet tekinteni a variációkat. Az értelmezett számtartomány: 100...221. Ha más számot ad meg, a nyers HTML-t látja formázás nélkül.
Mind a HTML, mind a CSS fájl letölthető tanulmányozásra, sokat lehet belőlük tanulni.
HTML
HTML üres keret - Ez a file tartalmazza a célszerű kiinduló állapotot, hogy ne kelljen minden alkalommal bepötyögni. Komolyabb fejlesztői környezetek automatikusan generálnak hasonlót.
