Embedded Files
Workshopu se účastní SPŠ Karviná. Asistovat budou studenti SŠ INFOTECH. Fotogalerie z akce.
Obsahem školení
Obsahem školení
je především naučit studenty pracovat s Wordpressem a ukázat, jak se vyvíjí šablona, co to jsou custom post type a jak si ušetřit práci např. s využitím pluginu Advanced Custom Fields
Požadované vstupní znalosti: HTML + CSS
Programové vybavení:
Editor: PHP Storm (alternativně Atom.io),
Server: MAMP PRO
Správce databáze: https://www.adminer.org/
OS: Windows 10
Vedení workshopu: DevX
Vedení workshopu: DevX
MAMP - instalace
MAMP - instalace
Stažení: https://www.mamp.info/en/downloads/ (verze pro Windows)
Instalace spuštěním exe souboru do složky "C:\MAMP\" (doporučeno)
Instalace na localhost (127.0.0.1).
Vytvoří ikonu na ploše.
MAMP - konfigurace
MAMP - konfigurace
Parametry konfigurace jsou standardní. Ponechat v deafultním nastavení.
V sekci Hosts pod záložkou Databases vytvořit novou databázi s názvem "wordpress".
Test: http://127.0.0.1/
Informace MAMP: http://localhost/MAMP/
Host
Porty
Databáze
Instalace Wordpressu
Instalace Wordpressu
Stažení archívu zip ze stránek Wordpress.
Zkopírování obsahu archívu do složky: "C:\MAMP\htdocs".
Spuštění instalace WP: http://127.0.0.1/
Další postup dle návodu.
název databáze: wordpress
uživatelské jmeno (databáze): root
heslo (databáze): root
vytvoření uživatele WP: admin
vytvoření hesla pro uživatele admin: <vymyslet>
Přihlášení do administrace: http://127.0.0.1/wp-admin/
C:\MAMP\htdocs\wp-content\themes
Zkopírování šablony Devx Theme
Zkopírování šablony Devx Theme
Překopírování složky devx-theme do /wp-content/themes/
Přihlášení se do administrace
Záložka Vzhled —> Aktivovat šablonu Devx Theme
Šablona je k dispozici na šk. disku "P" a na Google disku.
Adminer - instalace
Adminer - instalace
Správce databáze, stránka projetku: https://www.adminer.org/
Instalace: soubor "adminer-4.7.5.php" zkopírovat do kořenové složky webu.
"C:\MAMP\htdocs"
Spuštění: http://127.0.0.1/adminer-4.7.5.php
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
realizuje se v prostředí administrace WP jako plugin
ACF - instalace
ACF - instalace
V sekci Pluginy vyhledáme "Advanced Custom Fields"
Kliknutím nainstalujeme.
Aktivujeme.
Nu Html Checker - validace (kontrola) HTML.
------------------------
CSS
CSS
Sass: preprocesorový skriptovací jazyk, který interpretuje nebo kompiluje CSS
Vzhled, fonty grafika apod.:
https://fonts.google.com/, české
fonty, respektive písma ke stažení
fonty, grafika, ikony (nutná registrace)
ikony, loga, vektorová grafika
fotobanky s volně dostupnými i placenými fotkami pro webové stránky
barvy: color-hex, scheme generator
web/nástroj - obsahuje sady barevných schémat a jejic různá vyjádření
.gradient {
background: linear-gradient(90deg, rgba(0,33,110,1) 9%, rgba(2,255,250,1) 29%;
}
Grafika, další nástroje
Grafika, další nástroje
https://unsplash.com/ (Fotky)
https://www.manypixels.co/ (Grafika)
https://cssgradient.io/ (Gradient)
https://getwaves.io/ (Vlny)
https://material.io/ (Příručka návrháře)
PHP
PHP
Instalace (je součásti MAMP/XAMPP)
Prohledání konkrétních stránek Googlem:
Nástroje
Nástroje
Grafický online editor: https://pixlr.com/
Redukce velikosti obrázku: https://tinypng.com/
Další nástroje (https://pinetools.com/)
< - alt gr + čárka (alt gr + 60)
> - alt gr + tečka (alt gr + 62)
# - alt gr + X (hashtag) (alt gr + 35)
{ - alt gr + B (alt gr + 123)
} - alt gr + N (alt gr + 125)
div.container-fluid.py-5 (stiskem TAB expanduje)
<div class="container-fluid py-5"></div>
div.col-lg-4 (stiskem TAB expanduje)
<div class="col-lg-4"></div>
div+p (stiskem TAB expanduje)
<div></div>
<p></p>
Další příklady: https://docs.emmet.io/cheat-sheet/; https://www.tabnine.com/
> potomek
+ sourozenec
. třída
# hlavička
* násobení
{} text
@ změna posloupnosti čísel
() seskupení
$ číselná proměnná
[] atribut
PhpStorm
PhpStorm
PHP Storm - stažení
Registrace účtu JetBrains. (k dispozici licence pro nekomerční využití)
Graduation: rok ukončení školy
Email address: školní email (@zszatopkovych.eu)
Visual studio code
Visual studio code
Git
Git
git config user.name "Jméno Příjmení"
git config user.email "lojza@domena.cz"
git init
git status
git clone https://github.com/zszatopkovych/3D-Trinec.git
git add <soubor>
git commit -m "pridame soubor do repo"
git pull
git push origin master
XAMPP - MySQL - změna hesla
XAMPP - MySQL - změna hesla
Změnu hesla a přístup k databázi tvoří dva kroky:
úprava C:\xampp\phpMyAdmin\config.inc.php
$cfg['Servers'][$i]['user'] = 'root';
$cfg['Servers'][$i]['password'] = '<heslo>';
změna samotného hesla v databázi v prostředí phpMyAdmin.
FTP
FTP
Page updated
Report abuse