LAB06 - nvbach91/4IZ268-2022-2023-ZS GitHub Wiki

Tvorba webových stránek v HTML5 + CSS

Obsah

  • CSS transition, transform, filter
  • CSS animation
  • CSS spinner
  • CSS flexbox layout
  • HTML <link> a <meta>
  • Multimédia - obrázky, ikony, web fonty, audio
  • SVG v rychlosti
  • Domácí úkol

Retrospekt

  • Body za semester zkontrolovat v Attendance při hlášení docházky, v InSIS se body objeví až na konci semestru
  • Formátování kódu - použijte automatický formátovač Ctrl+Alt+F + pluginy
  • Opakování stejné vlastnosti se stejnou hodnotou je blbost
  • Názvy tříd, id v angličtině, pojmenovat podle toho, co element obsahuje/je
  • Příliš velká specifičnost se nevyplatí - čím méně specifické tím lépe - ale ne za každou cenu, tj. ne dávat všecho do selektoru *
  • Seskupení hodnot v některých vlastnostech: padding, margin, border, ...

CSS transition, transform, filter

image

  • vyzkoušejte vlastnost transition
    • změňte barvu pozadí tlačítka z modré na zelenou při najetí myši

CSS animation

image

CSS spinner

<div class="spinner"><div>
* { 
  box-sizing: border-box; 
}
body { 
  font-family: sans-serif; 
}
.spinner {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border: 30px solid transparent;
  border-top-color: firebrick;
  border-bottom-color: firebrick;
  animation: spinning 2s linear infinite;
  transition: border-color 0.5s ease;
}
.spinner:hover {
  border-top-color: cadetblue;
  border-bottom-color: cadetblue;
}
@keyframes spinning {
  from { 
    transform: rotate(0deg); 
  }
  to { 
    transform: rotate(360deg); 
  }
}

CSS flexbox layout

image

image

image

image

HTML <link> a <meta> 

<meta charset="UTF-8">
<meta name="description" content="popisek stránek...">
<meta name="author" content="autor stránky">
<meta name="keywords" content="klíčová slova, ...">
<link rel="canonical" href="https://abc.com/xyz">
<link rel="stylesheet" href="./css/main.css">

<link rel="icon" type="image/png" sizes="180x180" href="./img/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="96x96" href="./img/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="32x32" href="./img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./img/favicon-16x16.png">

Multimédia - obrázky, ikony, web fonty, audio

  • Obrázky JPEG, PNG, ICO, SVG
    • optimalizovat - zmenšit velikost, komprese - rychlejší načtení stránky
    • nezneužívat obrázky kvůli pozadí
  • Ikony
  • Fonty
    • Web safe
    • Google Fonts - import jako CSS v <link> - https://fonts.google.com/
    • Stránka by měla využívat jen pár fontů - nepřekombinovat
    • Výběr fontů musí být vhodný pro typ obsahu - dbejte na čitelnost a výraznost
  • Audio - MP3 / WAV, Video - MP4 / OGG
    • Zabírají velkou přenosovou kapacitu - je dobré je hostovat mimo web
    • Lze ovládat pomocí JavaScriptu
   <audio controls>
       <source src="audio/sound1.mp3" type="audio/mpeg">
       Your browser does not support the audio element.
   </audio>
   <video width="320" height="240" controls autoplay poster="video/movie.jpg">
       <source src="video/movie1.mp4" type="video/mp4">
       <source src="video/movie1.ogg" type="video/ogg">
       <track src="video/subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
       Your browser does not support the video tag.
   </video>
  • video embedding pomocí iframe:
<iframe src="https://www.youtube.com/embed/4-QbSIMEnYo" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>

SVG orientačně

  • https://github.com/4iz268/cviceni/tree/master/06-svg/
  • Vektorová grafika 2D, standard SVG 1.1 - matematické základy!
  • Standardní formát v XML 1.0 - lze editovat jako text
  • "Snadná" animace
  • Doporučený editor: svg-edit, Inkscape, Corel Draw, AI, Sketch
  • Vytváří tvary jako kruh, obdélník i složitější věci
    • Nelze použít pro fotografie (tam je rastr/pixely)
  • Pro ilustrace - logo, ikony, ...
  • Škáluje do nekonečna, flexibilní, dynamický, čistý, responzivní
  • Lze manipulovat pomocí CSS v případě inline SVG (dát tomu class)
  • Příklady - https://github.com/4iz268/cviceni/tree/master/06-svg/ image

Domácí úkol

  • Vytvořte následující stránku s uvedeným layoutem pomocí flexbox
  • Vypracovaný úkol nahrajte na server eso aby stránky byly dostupné přes následující odkaz (doplnit xname) + napište odkaz do určeného vlákna v Issues:
  • Termín do příští Čt 23:59:59

POZOR - pokyny pro odevzdání SP1

Příště

  • Konzultace SP1
  • Úvod do JavaScriptu
⚠️ **GitHub.com Fallback** ⚠️