Pokročilý redaktor webu

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

Tvorba posterů v PowerPointu a InDesignu

HTML - Úvod. Zpracoval: Petr Lasák

Úpravy fotografií v Adobe Photoshop CS5

Vývoj Internetových Aplikací

Tvorba WWW stránek. Mojmír Volf

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák

Ing. Přemysl Brada, MSc., Ph.D. Ing. Martin Dostal. Katedra informatiky a výpočetní techniky, FAV, ZČU v Plzni

Mgr. Vlastislav Kučera Struktura stránky, hlavička,

(X)HTML, CSS a jquery

Tvorba posterů prakticky

Mgr. Vlastislav Kučera lekce č. 2

Mgr. Vlastislav Kučera přednáška č. 2

NSWI096 - INTERNET. Úvod do HTML

TNPW1 Cvičení aneta.bartuskova@uhk.cz

Úvod do aplikací internetu a přehled možností při tvorbě webu

CSS Stylování stránek. Zpracoval: Petr Lasák

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN

Úvod do tvorby internetových aplikací

Tvorba PDF Práce s Adobe Acrobatem

1. Začínáme s FrontPage

Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování

WEBOVÉ STRÁNKY

Úvod do tvorby internetových stránek v jazyce HTML

Tomáš Herout

HTML Hypertext Markup Language

Nápověda k redakčnímu systému InstantWeb.cz

WWW a HTML. Základní pojmy. Ivo Peterka

Tvorba webu v HTML. Redakční systém. CMS Joomla! Co je Joomla

SEO v CeSYSu. CeSYS manuál pro uživatele

Uspořádání klient-server. Standardy pro Web

Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML

WEBOVÉ STRÁNKY

1. Webový server, instalace PHP a MySQL 13

Manuál pro obsluhu Webových stránek

Úvod do Adobe Photoshopu CS5

(X)HTML-TAGY. VOŠ a SŠT Česká Třebová

Nabídka internetového obchodu

Registr práv a povinností

Tvorba webu. Úvod a základní principy. Martin Urza

Uživatelská dokumentace

Nástrojová lišta v editačním poli

Analýza webových stránek andreaspctipps.de

DOKUMENTACE REDAKČNÍHO SYSTÉMU PINYA

14. února 2013 Mgr. Miroslav Fiala

Obsah. Úvod 11 O autorovi 11 Koncept knihy 11 Zpětná vazba od čtenářů 12 Zdrojové kódy ke knize 12 Errata 12 ČÁST I VÝVOJ MOBILNÍ APLIKACE

Novinky IPAC 3.0. Libor Nesvadba Karel Pavelka

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Jak se orientovat ve světě ESTOFANu verze 3.0.3?

Pro využití aktivního odkazu (modrý a podtržený) použijte klávesu Ctrl + kliknutí myší.

PŘEHLED A MOŽNOSTI VYUŽITÍ WEBOVÝCH MAPOVÝCH SLUŽEB

Základní popis obsluhy lokalizačního serveru systému REX

Přihlášení Přihlaste na server: a zvolte přihlášení jako Charles University Prague: Medical students, employees and graduates.

Kromě dodávek celých webů nabízíme také zakázkové programátorské práce formou subdodávek. GlobalDAT a.s. Předseda představenstva:

Internet 2 css, skriptování, dynamické prvky

1 Webový server, instalace PHP a MySQL 13

Registr práv a povinností

Obsah. Úvodem 9 Zpětná vazba od čtenářů 10 Zdrojové kódy ke knize 10 Errata 10

NÁVOD NA OBSLUHU INTERNETOVÉ PREZENTACE. Ataxo Czech s.r.o.

INTERNET A SÍTĚ. Role při tvorbě webových aplikací. Rozhodovací vrstvy při tvorbě webových aplikací. povrch kostra struktura obsah strategie

Uživatelská příručka 6.A6. (obr.1.)

Kaskádové styly (CSS)

13. Vytváření webových stránek

Jak vznikala webová aplikace kolonizace.asp2.cz

WEBOVÉ STRÁNKY

CSS Kaskádové styly. formátování webových stránek

Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

ČNHP. Příručka pro pacienty. Institut biostatistiky a analýz. Vytvořil:

HLEDEJCENY.mobi. Obsah. Mobilní verze e-shopu. Důvody instalace

Inovace bakalářského studijního oboru Aplikovaná chemie

Dobrý SHOP Popis produktu a jeho rozšíření

- 1 - Smlouva o dílo. uzavřená podle 536 a násl. obchodního zákoníku v účinném znění

WEBOVÉ STRÁNKY

Manuál k administraci

Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka

Nové přístupy tvorby web site. Doc. Ing. Zdeněk Havlíček, CSc. KIT PEF CZU - 13/11/2001

Kromě dodávek celých webů nabízíme také zakázkové programátorské práce formou subdodávek. GlobalDAT a.s. Předseda představenstva:

VÝVOJ INTERNETOVÝCH APLIKACÍ - VIA

Úvod do aplikací Adobe Creative Suite CS5

Mgr. Vlastislav Kučera přednáška č. 1

Maturitní projekt do IVT Pavel Doleček

Programování v jazyce JavaScript

Základy CSS (3. přednáška)

WEBOVÉ STRÁNKY ŠKOLY A REDAKČNÍ SYSTÉM

Individuální projekt z předmětu webových stránek 2012/ Anketa

PowerPoint lekce II.

REPORTING. Příručka pro Partnery a zákazníky -1-

Printris. Hra Printris je psána pomocí příkazů Javascriptu a standardních příkazů HTML.

Správa obsahu webové platformy

1. Struktura stránky, zásady při psaní kódu, MVC pattern. Web pro kodéry (Petr Kosnar, ČVUT, FJFI, KFE, PINF 2008)

Dokumenty umístěné na počítačových serverech jsou adresovány pomocí URL (Uniform Resource Locator).

CSS. SEO Search Engine Optimization (optimalizace pro vyhledávače)

Programování v jazyce JavaScript

Easycars Aplikace pro správu autobazaru

Analýza webových stránek webgay.net

EPLAN Electric P8 2.7 s databázemi na SQL serveru

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku:

Student. Funguje: Přihlášení Výběr školy Výběr role Změna Akademického roku Změna kurzu Odhlášení Přihlášení offline

Základy informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant

Transkript:

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/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"> <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

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 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

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: 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 (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 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

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

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