Pokročilý redaktor webu

Rozměr: px

Začít zobrazení ze stránky:

Download "Pokročilý redaktor webu"

Petr Urban
před 7 lety
Počet zobrazení:

1 Pokročilý redaktor webu Ivo Šnábl Web studio Institut biostatistiky a analýz MU snabl@iba.muni.cz Operační program Vzdělávání pro konkurenceschopnost Projekt Zvyšování IT gramotnosti zaměstnanců vybraných fakult MU Registrační číslo: CZ.1.07/2.2.00/ , Oblast podpory: 7.2.2

2 Obsah identifikace a reportování chyb hromadný export z MS Office a formátů docx, pptx hromadné zpracování v Photoshopu, doostřování poslední verze redakčních systémů demo novinky v modulech nový CKeditor validační nástroje optimalizační (SEO) úkony: doporučení CSS a pokročilý layout stránky, manipulace s obsahem stránky pomocí javacriptu (efekty) tipy, triky, nejčastější chyby jak identifikovat a reportovat chyby novinky ohledně prohlížečů, CSS future: HTML5 ukázky 2

3 Prohlížeče, error reporting - Doporučovat prohlížeč Mozilla Firefox 4 Uživatelé Internet Exploreru: pokud nechtějí měnit, tak verzi 9 - Něco na webu nefunguje? Pošlete vývojáři vč. informací: - prohlížeč a jeho verze - URL adresu (popř. URL adresu výchozí stránky + adresu cílové problematické stránky) - obsah stránky, výpis chyby, print screen,... 3

4 Programovací jazyk PHP Chyba v PHP kódu: stránka vypisuje chybu typu: Fatal error: Call to undefined function arrray() in /.../index.php on line 6 Chyba připojení k databázi: 4

Skriptovací jazyk XHTML TIP: Zobrazit zdrojový kód stránky <?xml version="1.0" encoding="utf-8"?><!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.

org/1999/xhtml"> <head> <title>demo: Úvod</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="description" content="test popis popis" /> <meta name="keywords"

5 Skriptovací jazyk XHTML TIP: Zobrazit zdrojový kód stránky <?xml version="1.0" encoding="utf-8"?><!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html lang="cs" xml:lang="cs" xmlns=" <head> <title>demo: Úvod</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="description" content="test popis popis" /> <meta name="keywords" content="global keywords, keywords" /> <meta name="robots" content="index,follow" /> <link rel="stylesheet" type="text/css" href="styles/style.css" /> <script type="text/javascript" src="styles/common.js"></script> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> </head> <body> <div id="whole">... <div id="head"> <a href="index.php">na úvodní stranu</a> Firefox: Zobrazit zdrojový kód výběru CSS: kaskádové styly body { margin: 0; padding: 0; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif; font-size: 0.75em; color: #000; background: #d1d6da url('../images/bg.jpg') repeat-x; line-height: 1.4; } a { color: #009edf; } a:hover { color: #009edf; text-decoration: none; } 5

6 Důsledky chyb v XHTML chyba v parsování neuzavřený tag (značka) nebo chyba v CSS důsledek: rozsypaný layout (rozvržení) stránky chyba v jazykovém kódování 6

7 Problémy s cache: načítání staré verze stránek Načíst znovu / Refresh / F5 / CTRL+F5 / CTRL+R (reload) restart prohlížeče, zadat adresu webu vymazat cache prohlížeče (dočasné soubory) Chyba na naší straně: někdy je to naše chyba, je nutné při změnách v kódu aktualizovat i databázi (lib. údaj v Aktualitách, Plných stránkách, nebo přímo v Nastavení, kde je cílový parametr sledující aktuálnost webu: POSL. AKTUALIZACE nutno změnit alespoň 1 znak, jinak se časové razítko neaktualizuje) někdy můžou být rozbité tzv. triggery v databázi, které registrují změny v Aktualitách,... a aktualizují toto časové razítko. To musím vždy ověřit já přímo nad db. Dá se to ověřit dobře v IE, FF je mnohem agresivnější, často si rovnou vyžádá novou verzi stránek. 7

$button(); }); function target_blank(url){$

8 Programovací jazyk JavaScript obsah souboru /styles/common.js: $(document).ready(function(){ $("a[rel='lightbox']").colorbox(); $(".button").button(); }); function target_blank(url){ var wasopen = false;... důsledek chyby v programovém (js) kódu: 8

9 Ladící nástroj pro každého do FF Nástroje > Správce doplňků > Získat nové doplňky Firebug: Web Developer ukázka: zjišťování zda se načetla stránka z cache nebo jako nová Status: 304 Not Modified (cache) vs. 200 OK (načteno ze serveru) 9

10 CKeditor vkládání vč. XHTML formátování lepší wysiwyg (napojení stylů) zakázány někt. transitional atributy (target) kontrola pravopisu (zatím bez čj) více šablon TODO - dotáhnout: dialogy (titulek na úvodní záložce) formátování kódu chyby v FF, IE9 (patche) 10

11 Plné stránky validace: při dokončení a aktivaci hromadná validace: opatrně, nepřetížit w3c web (zablokování IP na 1 2 dny) 11

12 Aktuality nové parametry Rubrik přihlašování: rubrika pouze pro přihlášené připojení výpisu (fotog., soubory) formátované newslettery 12

13 Fotogalerie automatická rotace při uloadu jpg s údajem v EXIF: Rotation (prosím reportujte selhání této funkce!) lepší řazení (při filtrování dle kategorie): řadit pomocí miniatur edit in place: přímá editace titulků (širší univerzální využití v budoucnu) 13

14 Další novinky Překlady: výchozí nastavení: pouze fráze z FO skrytí přeložených frází (v plánu) Centra načítání GPS pomocí API beta.mapy.cz zadání kliknutím manipulace s objekty, efekty pomocí knihovny JQUERY ( demos, theming,...) předdefinované: lightbox efekt na lib. odkazu: <a href="/res/image/velkafotka.jpg" rel="lightbox" title="velká fotka">zobrazit</a> předdefinované: styl tlačítko - přidej class="button" 14

15 Nejčastější chyby TITLE (a, img,... core atrib), ALT (img) SOUBORY zamčení PDF, pojmenování SEO-like formou, vč. klíčových slov OBRÁZKY kvalita, velikost, korekce,... Plné stránky: TITULEK vs. KRÁTKÝ TITULEK: TITULEK by měl obsahovat hlavní klíčová slova chybějící META DESCRIPTION Struktura: prázdné úvodní stránky sekcí aktivní a dokončené testovací stránky (vs. parametr Skrytá: skrývá pouze odkaz, vyhledávače ji mohou zaindexovat!) 15

16 inline CSS: style= text-align:center;color:#00f využijte raději více tříd: class= center gray HTML5: s-html5-javascript-uses/..google 16

. : obrázky na max velikost (obrázky najdete v podsložce) 2007, 2010:

17 Hromadný export obrázků z MS Office Starší verze: Uložit jako webovou stránku + Možnosti webu.. : obrázky na max velikost (obrázky najdete v podsložce) 2007, 2010: formáty docx, pptx,..: přejmenovat na ZIP rozbalit podsložku /media samostatný obrázek ve verzi 2010: Uložit jako obrázek / původní.. 17

Ořez (s perspektivou), korekce Photoshop: ořez => celkový dojem portrétu!

posun: MEZERNÍK Korekce fotografie (Obraz > Přizpůsobení) nejlépe na pův.

.. zde úprava barevnosti alternativně Jas a kontrast Tón / kontrast / barvy AUTOMATICKY

18 Ořez (s perspektivou), korekce Photoshop: ořez => celkový dojem portrétu! C + volba Perspektiva zvětšení, zmenšení: CTRL+ +, - celý obrázek na celou plochu: CTRL+0, posun: MEZERNÍK Korekce fotografie (Obraz > Přizpůsobení) nejlépe na pův., nezmenšené verzi Úrovně: CTRL+L... úprava histogramu Křivky: CTRL+M... zde úprava barevnosti alternativně Jas a kontrast Tón / kontrast / barvy AUTOMATICKY NĚKDY nevhodné (ukázka: odběry.jpg) zvolíme Tón automaticky (SHIFT+CTRL+L) Další úpravy: Obraz > Natočení obrazu,... JPG logo s artefakty, krajinky 18

19 Originál Doostření Přeostřeno funkcí Doostřit Filtr > Zostřit > Doostřit... Objekty: použijeme Chytré zostření... Lepší postup: zvětšíme na 200%, 2x Doostřit (přeostříme) zmenšíme zpět na 50% Požadovaný výsledek 19

(od verze 7) silné heslo Nejčastější nastavení: Omezit úpravy a

20 Zabezpečení PDF šifrou AES Nastavení: kompatibilita verze Acrobat 7 a vyšší 128bitové šifrování RC-4 (od verze Acrobat 5 šifra AES (od verze 7) silné heslo Nejčastější nastavení: Omezit úpravy a tisk dokumentu (přidáním hesla); sdílené heslo v rámci pracoviště 20

21 Poděkování Konání kurzu financováno z Operačního programu Vzdělávání pro konkurenceschopnost ZVYŠOVÁNÍ IT GRAMOTNOSTI ZAMĚSTNANCŮ VYBRANÝCH FAKULT MU Registrační číslo: CZ.1.07/2.2.00/

Podobné dokumenty

Práce s redakčním systémem, úvod do role redaktora

Práce s redakčním systémem, úvod do role redaktora Ivo Šnábl Web studio Institut biostatistiky a analýz MU snabl@iba.muni.cz Operační program Vzdělávání pro konkurenceschopnost Projekt Zvyšování IT gramotnosti