Prezentace

Transkript

Prezentace

Pokročilý redaktor webu
Ivo Šnábl
Web studio Institut biostatistiky a analýz MU
[email protected]
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/15.0224, Oblast podpory: 7.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
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
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/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="cs" xml:lang="cs" xmlns="http://www.w3.org/1999/xhtml">
Firefox: Zobrazit
<head>
zdrojový kód výběru
<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>
body {
<div id="whole">
margin: 0; padding: 0;
<div id="head">
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
<a href="index.php">na úvodní stranu</a>
font-size: 0.75em;
color: #000;
...
background: #d1d6da url('../images/bg.jpg') repeat-x;
line-height: 1.4; }
CSS: kaskádové styly
a { color: #009edf; }
a:hover { color: #009edf; text-decoration: none; } 5
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
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
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
Ladící nástroj pro každého do FF
Nástroje > Správce doplňků > Získat nové doplňky
Web Developer
Firebug:
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
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
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
Aktuality

nové parametry Rubrik

přihlašování:



rubrika pouze
pro přihlášené
připojení výpisu
(fotog., soubory)
formátované newslettery
12
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
Další novinky

Překlady:



Centra



výchozí nastavení: pouze fráze z FO
skrytí přeložených frází (v plánu)
načítání GPS pomocí API beta.mapy.cz
zadání kliknutím
manipulace s objekty, efekty


pomocí knihovny JQUERY (http://jqueryui.com/
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
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

inline CSS:
style=”text-align:center;color:#00f”


využijte raději více tříd:
class=”center gray”
HTML5:



http://www.rgraph.net/
http://www.1stwebdesigner.com/freebies/example
s-html5-javascript-uses/
..google
16
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!

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




JPG logo s artefakty,
krajinky
NĚKDY nevhodné (ukázka: odběry.jpg)
zvolíme Tón automaticky (SHIFT+CTRL+L)
Další úpravy: Obraz > Natočení
obrazu, ...
18
Doostření
Originál
Přeostřeno funkcí Doostřit



Filtr > Zostřit > Doostřit...
Objekty: použijeme Chytré zostření...
Lepší postup:


Požadovaný výsledek
zvětšíme na 200%, 2x Doostřit (přeostříme)
zmenšíme zpět na 50%
19
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
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/15.0224
21

Prezentace

Transkript

Podobné dokumenty

Linka 32

4IS01F8 mechanická práce.notebook

Vzorové rešerše z minulých semestrů

stáhnout prezentaci 7,2 MB

Sofistikované nástroje pro jednoduchou tvorbu profesionálních

Tréninkový program Servind

Dalekozrakost

PP - Reklama Klapka

Fyzické a psychické přetížení

Vyhledávání na webu - Střední průmyslová škola a Vyšší odborná

ve formátu

Tentokrát zamíříme tak trochu do historie… Vašim úkolem je

Sharon Ehrmeyer - Part 1

Kroho 1.0 Requirement document

Gravex