Při sestavování své závěrečné práce se můžete inspirovat pracemi svých kolegů, kteří již předmět úspěšně absolvovali – viz téma Seminární práce na konci osnovy.

Nejprve si ovšem zopakujeme a procvičíme to, co jsme se naučili v předchozí lekci.

Tvorbu tabulek a seznamů si procvičíme na příkladech - slovníčku pojmů a několika tabulkách.

Sestavování tabulek v textovém editoru je práce hodně náročná na pozornost. V následujícím vzorovém dokumentu naleznete několik tabulek, které zkuste přepsat do HTML a patřičně zformátovat. Přeju vám opravdu bystré oko a pevné nervy:-))

Pro inspiraci přikládám odkaz na další nevšední možnosti zobrazení tabulek.

V lekci tohoto tématu se poprvé setkáme s externími zdroji používanými v kódu HTML - s obrázky, naučíme se též vytvářet spojení mezi soubory pomocí odkazů.

V následujícím cvičení si ukážeme roli odkazů při vytváření větších vzájemně provázaných celků webových stránek.

Cvičení - odkazy

Vytvořte nový soubor, uložte ho ke svým ostatním souborům z minulých cvičení, pojmenujte ho index.html.
V tomto novém souboru sestavte odrážkový seznam, v němž budou odkazy na soubory HTML vytvořené v předchozích cvičeních. Stránku opatřete rovněž hlavním nadpisem, popř. dalšími informacemi podle vlastního uvážení.
Může to dopadnout např. takto:

Do všech souborů, které jste takto navázali na index, vložte zpětné odkazy na index.html, např.

Cvičení - obrázky

Vkládání obrázků si procvičíme při sestavování tabulky s obrázky a jednoduché obrázkové galerie, v níž navíc uplatníme odkazy.

Pro inspiraci přikládám komentovanou tabulku stylů, kterou můžete porovnat se svým návrhem formátování galerie obrázků.

Pro srovnání vám nabízím vlastní návrh tabulky stylů CSS.

Cílem lekce je zvládnutí dalších technik - připojení vnějších formátovacích stylů k dokumentům HTML a formátování dokmentů pomocí mechanismu tříd.

V rámci opakování vytvoříme osnovu rozsáhlejšího dokumentu s využitím záložek.

Nejprve si stáhněte a rozbalte zdrojové soubory:

Mezi nimi naleznete soubor plyocyemata.html, ten využijeme pro editaci.

Pro obrázky vytvořte novou složku (nazvěte např. obrazky).

V dokumentu vytvořte obsah, tj. seznam nadpisů s odkazy na příslušné záložky v nadpisech.

V dnešní lekci si ukážeme, jakým způsobem můžeme stránku rozdělit na dílčí bloky (hlavičku, navigační menu, vlastní věcný obsah). Využijeme k tomu obecné blokové prvky div.

Obecná chemie

Výukový text s ikonami

Další stránky pro inspiraci

Formátování dokumentu s využitím mechanismu tříd v CSS bude hlavním obsahem následujícího cvičení.

Zdrojový text zformátujte do podoby výsledného vzorového dokumentu

Servery nabízející umístění stránek zdarma

Registrace domény

Tutoriály v češtině a slovenštině

Tutoriály v angličtině

Symboly

Cílem dnešní lekce je seznámit se s časovou osou (panel Timeline), ve kterém se nastavuje a řídí mj. i průběh animace.

Dále se seznámíme s prvním typem animace používané ve Flashi - Motion Tween.

Naznačíme si rovněž obecný postup při navrhování a sestavování animovaných scén.

Zdroj: http://www.btinternet.com/~martin.chaplin/vibrat.html

Kód pro vložení flashové animace do webové stránky

<object width="480" height="360" data="/authanimace.swf" type="application/x-shockwave-flash">
  <param name="movie" value="animace.swf" />
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="allowFullScreen" value="true" />
  <param name="quality" value="high" />
</object>

Obrázek spektra

V dnešní lekci si zopakujeme tvoření animace pohybu po křivce. Na příkladu si procvičíme rovněž práci s časovou osou. Seznámíme se s prvními interaktivními prvky - tlačítky - a ukážeme si, jak se s pomocí jednoduchých skriptů ovládá průběh animace.

Programování tlačítek v AS2

Tento případ je nejjednodušší: stačí vytvořit instanci tlačítka na scéně, vybrat ji, otevřít panel Akce (F9) a zde připsat kód

on (press) { ... kod, ktery se ma provest ... } 

popř.

tl_start.onPress = function() { ... kod, ktery se ma provest ... } 

Programování tlačítek v AS3

 Zde je třeba

1. pojmenovat instanci tlačítka
2. vytvořit ovládací funkci
3. přiřadit tuto funkci ovladači tlačítka

např. pro tlačítko pojmenované tl_start:

function prehrat(event) { play()}


tl_start.addEventListener(MouseEvent.CLICK, prehrat);

V dnešní lekci vytvoříme komplexnější scénu - ukázku pohybu nabitých i neutrálních částic v magnetickém poli, v níž budou animace Motion Tween doplněné ovládacími prvky (tlačítky se skripty).

Aromatická substituce – schéma k animaci

Pohyb částic v homogenním magnetickém poli

V dnešní lekci si ukážeme, jakým způsobem lze vytvářent vnořené animace.

V souvislosti s tím se seznámíme se třetím typem symbolů používaných ve Flashi, s Movie Clipy.

Ukážeme si též, jak fungují časové osy jednotlivých typů symbolů. S tlačítky jsme se už seznámili, dnes jsou na řadě symboly typu Graphic a Movie Clip.

Nejprve si zopakujeme tvorbu animací typu Motion a Shape Tween. Zkuste sami vytvořit následující animaci allosterické inhibice enzymů.

Obrázek na pozadí scény

V dnešní lekci si rozšíříme spektrum vlastností Movie Clipů, které lze ovládat skripty, zkombinujeme s maskovací vrstvou.

Ukážeme si, jak lze vytvořit vlastní kurzor a jak lze vkládat do flashové scény odkazy na internetové stránky.

Ovládání kolečka myši

 var mouseListener = new Object ()
 
mouseListener.onMouseWheel = function (delta:Number) {
  if (delta > 0 ) { //akce při skrolování nahoru 
  }

if (delta < 0 ) { //akce při skrolování dolů
   }
}
Mouse.addListener(mouseListener)

Zoomování mapy

var mouseListener = new Object ()
 
mouseListener.onMouseWheel = function (delta:Number) {
	if (vyber_oblasti.hitTest(_root._xmouse, _root._ymouse)) return;
	if (delta > 0 && mapa._xscale < 286 /*8*mapa.origSf */) {

		_root.changeZoom(10)
		
		}
	if (delta < 0 && mapa._xscale > mapa.origSf) {
		_root.changeZoom(-10)
	}
	}
Mouse.addListener(mouseListener)

function updateZoom() {
	zoomer.setZoom(Math.floor((mapa._xscale-36)/2.5))
	}
	
function changeZoom(zmena) {
	
	if (mapa._xscale + zmena > 286 || mapa._xscale + zmena < 36) return
	
	mapa._xscale += zmena;
	mapa._yscale += zmena;
		
	mapa._x += mapa.sx*(-zmena/100)
	mapa._y += mapa.sy*(-zmena/100)
	
	updateZoom()
}

function setZoom(percent) {
	mapa._xscale = percent*2.5 + 36
	mapa._yscale = percent*2.5 + 36
	
	mapa._x = sx - mapa.sx*(mapa._xscale/100)
	mapa._y = sy - mapa.sy*(mapa._yscale/100)
	updateZoom()
	}

mapa.onMouseDown = function () {
	if (this.hitTest(_root._xmouse, _root._ymouse) && 
		!vyber_oblasti.hitTest(_root._xmouse, _root._ymouse) &&
		!zoomer.hitTest(_root._xmouse, _root._ymouse)
		
		) 
	{ this.startDrag()
	this.dragged = true;
	}
	
	}

mapa.onMouseUp = function () {
	 this.stopDrag() 
	 this.dragged = false
	 
	 this.sx = (_root.sx - this._x)/this._xscale*100
	 this.sy = (_root.sy - this._y)/this._yscale*100
	}

var sx = 450
var sy = 300


mapa.onLoad = function() {
	this.origSf = this._xscale
	this.origX = this._x
	this.origY = this._y

	this.sx = (sx - this._x)/mapa._xscale*100
	this.sy = (sy - this._y)/mapa._yscale*100

	this.podklad._xscale = 65
	this.podklad._yscale = 65
	this.podklad._x = -932
	this.podklad._y = -935
	_root.setZoom(0)
	}

Videoklipy pro přehrávač

Indexování videoklipů

Rozsah a další parametry práce

Vzhledem k zaměření výuky po Vás budu na zápočet chtít soubor webových stránek s danými parametry:

• obsah stránek je výukového charakteru (tutoriál  - téma nechám na vás, pokud se bude týkat nějakého zajímavého tématu z HTML5 nebo programování, budu rád :-))
• rozsah: titulní stránka (nazvaná index.html) + min. 3 stránky s obsahem + test (viz dále) + literatura - seznam použitých odkazů. V seznam odkazů použijte citační hormu ISO-690 - vizte publikaci Metodika tvorby bibl. citací.
• min. 1 interaktivní stránka; skript na této stránce nebo jeho podstatná část bude vaše autorské dílo (pokud využijete skript jiného autora, zřetelně ve skriptové části vyznačte, která část je vaším dílem. 
• součástí stránek bude test na procvičení a upevnění probrané látky o rozsahu min. 5 otázek různého typu (tedy single/multichoice, vepisovací políčka,atd.), ale jednoznačně vyhodnotitelné, se zpětnou vazbou pro uživatele.
• v kód u stránky se vyvarujte značek typu b, i, u, font, center
• dejte si pozor na diakritiku a mezery v názvech souborů

Vaši práci si zkusím nahrát do ISu (např. do odevzdávárny) a pokud zde nastanou problémy s odkazy nebo obrázky, budu trvat na jejich nápravě. Proto vám doporučuju vyzkoušet funkčnost stránek v odevzdáváně (viz níže).

Termín odevzdání práce

Nechám na vás, podle vašich časových možností, klidně i do začátku dalšího semestru.

Konzultace

Pokud se budete chtít s nějakým problémem poradit, jsem vám k dispozici.

Místo odevzdání

Stránky mi můžete

• přinést osobně
• zaslat mailem
• vložit do úschovny
• nebo nejraději je nahrejte do níže uvedené odevzdávárny (v ní si vytvořte svou složku)