Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:fejlesztoi_koernyezet_kialakitasa [2019/11/17 21:18]
admin [Szoftverek]
+++ oktatas:web:fejlesztoi_koernyezet_kialakitasa [2023/10/06 18:59] (aktuális)
admin [Visual Studio Code]
@@ Sor 2: / Sor 2: @@
 ====== Webes fejlesztői környezet kialakítása ======
   * **Szerző:** Sallai András
-  * Copyright (c) Sallai András, 2013, 2019
+  * Copyright (c) 2013, Sallai András
-  * [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
+  * Szerkesztve: 2013, 2019
-  * Web: http://szit.hu
+  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
+  * Web: https://szit.hu
 ===== Fejlesztői környezet =====
@@ Sor 30: / Sor 33: @@
   * képességeik a kódolásra korlátozódnak
-Itt most egy kódszerkesztő kerül ajánlásra.
-  * https://geany.org/
+==== Visual Studio Code ====
+Tartalom köré HTML elem:
+  * kijelölöm a tartalmat
+  * F1
+  * Futtatom: Emmet: Wrap with Abbreviation
+  * Beírom a HTML elem nevét (esetleg .osztálynév)
+  * Enter
+Több sor számára HTML elem beállítása. Például van egy ilyen lista:
+<code>
+alma
+körte
+barack
+szilva
+</code>
+Szeretnénk egyetlen menetben li elemek közzé tenni.
+  * Aljunk az első sor elejére a szövegkurzorral (az alma szó elé)
+  * Nyomjuk meg a Shift-End billentyűt
+  * F1
+  * Emmet: Wrap with abbrevation
+  * Írjuk be: li
+  * Enter
+=== Bővítmény ===
+Lehetővé teszi fájlok megnyitását böngészőben.
+  * open in browser
+Az open in broser használata:
+  * Az Explorerben HTML állomány felett jobb egér gomb
+  * Két lehetőség:
+    * Open in Default Browser
+    * Open in Other Browsers
+Ha nincs beállítva az alapértelmezett böngésző, akkor válasszuk a második lehetőséget.
+Opcionális:
+  * HTML CSS Support
 ===== Szerver =====
 Szükségünk van egy szerverre, ahol kipróbálhatjuk fejlesztői változatunkat.
@@ Sor 57: / Sor 108: @@
 A LEMP szerver esetén az Apache-t felváltja a Nginx:
   * Linux
-  * Engixn
+  * Enginx
   * MySQL
   * PHP
@@ Sor 84: / Sor 135: @@
 A LAMP szerverek keresztplatformos változata.
 Telepíthető Windows, Linux és macOS gépekre is.
+=== Windows 10 hiba ===
+  Error: Cannot create file "C:\xammp\xampp-control.ini
+Megoldás:
+  * rendszergazdaként kell indítani az XAMPP-t
+      * Az indító ikonon:
+          * jobb egér, Tulajdonságok
+          * Speciális > [✔]Futtatás rendszergazdaként
+      * vagy a xampp-control.exe állományon:
+          * Tulajdonságok
+          * Kompatibilitás
+          * [✔] A program futtatása rendszergazdaként
+=== Telepítés Chocolatey csomagkezelővel ===
+  choco install xampp-73
+Szükség szerint más verziók is telepíthetők:
+  choco install xampp-74
+  choco install xampp-80
+  choco install xampp-81
 ===== Virtuális gép =====
@@ Sor 116: / Sor 196: @@
     * [[oktatas:web:fejlesztői_környezet_kialakítása:Bracktes]]
     * [[oktatas:web:fejlesztői_környezet_kialakítása:Atom]]
+    * [[oktatas:web:fejlesztői_környezet_kialakítása:Visual Studio Code]]
     * [[http://komodoide.com/komodo-edit/|Komodo-Edit]]
     * [[http://geany.org/|Geany]]
@@ Sor 128: / Sor 209: @@
     * [[http://bluegriffon.org/|Bluegriffon]]
     * [[http://www.sublimetext.com/|Sublime Text]]
-    * Visual Studio Code
-      * [[https://code.visualstudio.com/|Visual Studio Code]]
-      * [[https://vscodium.com/]]
-    * http://www.aptana.com/ (GPL, Native program)
     * http://maqetta.org/ (GPL, Webes felületen)
-    * [[http://lighttable.com/|Light Table]]
     * [[wp>List_of_HTML_editors]]
     * [[wp>Comparison_of_HTML_editors]]
@@ Sor 146: / Sor 222: @@
     * MariaDB, MySQL, PostgreSQL, MSSQL, Oracle Database
     * PHP
-    * PhpMyAdmin
   * LAMP szerver
     * Debian GNU/Linux, Linux Mint stb.
@@ Sor 155: / Sor 230: @@
     * [[https://www.ampps.com/|AAMPS]]
     * [[https://www.mamp.info/MAMP]] (macOS és Windows számára)
+  * Adatbázis kliens
+    * [[https://dbeaver.io/|DBeaver]] GUI
+    * [[https://www.phpmyadmin.net/|PhpMyAdmin]] HTML
   * Tervezés
     * https://wireframe.cc/
@@ Sor 167: / Sor 245: @@
   * http://gs.statcounter.com/
+==== lite-server ====
+Telepítés:
+  npm install -g lite-server
+Leírás: [[oktatas:web:nodejs:lite-server|A lite-server használata]]
@@ Sor 269: / Sor 355: @@
   * [✔] XML Snippets
+==== Snippets ====
+A snippets-ek lehetővé teszik, hogy egy rövid kulcsszó beírása
+után, a Tabulátor gomb megnyomására beírjon a Geany egy
+komplett kódsort. A snippets a fájl kiterjesztéséből tudja,
+hogy milyen snippet-t kell használnia, vagyis előbb szükség
+van egy mentett állományra a működéshez.
+A snippets beállítások a következő helyen találhatók:
+  * Eszközök > Konfigurációs fájlok > snippets.conf
+Kiegészítések a snippets beállításokhoz:
+<code ini snippets.conf>
+[Javascript]
+con=console.log(%cursor%);
+[HTML]
+html=<!DOCTYPE html>\n<html lang="hu">\n<head>\n\t<meta charset="utf-8">\n\t<title></title>\n</head>\n<body>\n\t<h1>%cursor%</h1>\n\t<p></p>\n\n</body>\n</html>\n
+link=<link rel="stylesheet" href="%cursor%">
+sc=<script src="%cursor%"></script>
+</code>
+További beállítások: [[oktatas:programozas:programok:geany#snippets|Geany snippets]]
+===== API teszt =====
+  * https://httpie.io/
+  * https://github.com/frigus02/RESTer
+  * https://www.postman.com/
+===== Futtatás online =====
+  * https://jsfiddle.net/
+  * https://jsbin.com/
+  * https://playcode.io/

szit

Felhasználói eszközök

Eszközök a webhelyen

Különbségek

Eszközök az oldalon