/Articles/HowTo/DOC2HTML.cs.html
0,0 → 1,287
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3c.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> DOC 2 HTML </title>
<meta name="keywords" content="stavebnice MLAB převod Word DOC HTML">
<meta name="description" content="Projekt MLAB, Převod Word dokumentu na HTML">
<!-- AUTOINCLUDE START "Page/Head.cs.ihtml" DO NOT REMOVE -->
<link rel="StyleSheet" href="../../Web/CSS/MLAB.css" type="text/css" title="MLAB základní styl">
<link rel="shortcut icon" type="image/x-icon" href="../../Web/PIC/MLAB.ico">
<script type="text/javascript" src="../../Web/JS/MLAB_Menu.js"></script>
<!-- AUTOINCLUDE END -->
</head>
 
<body lang="cs">
 
<!-- AUTOINCLUDE START "Page/Header.cs.ihtml" DO NOT REMOVE -->
<!-- ============== HLAVICKA ============== -->
<div class="Header">
<script type="text/javascript">
<!--
SetRelativePath("../../");
DrawHeader();
// -->
</script>
<noscript>
<p><b> Pro zobrazení (vložení) hlavičky je potřeba JavaScript </b></p>
</noscript>
</div>
<!-- AUTOINCLUDE END -->
 
<!-- AUTOINCLUDE START "Page/Menu.cs.ihtml" DO NOT REMOVE -->
<!-- ============== MENU ============== -->
<div class="Menu">
<script type="text/javascript">
<!--
SetRelativePath("../../");
DrawMenu();
// -->
</script>
<noscript>
<p><b> Pro zobrazení (vložení) menu je potřeba JavaScript </b></p>
</noscript>
</div>
<!-- AUTOINCLUDE END -->
 
<!-- ============== TEXT ============== -->
<div class="Text">
<p class="Title">
Převod DOC na HTML
</p>
<p class=Autor>
Milan Horkel
</p>
<p class="Subtitle">
Převod dokumentu z programu Word do HTML nelze plně zautomatizovat protože
kvalita podkladu obvykle není dostatečná. Proces převodu lze však celkem
úspěšně zjednodušit a na uživatele zbydou pouze drobné opravné práce.
Podstatou převodu je odstranění všech formátovacích značek a vyčištění
kódu tak, aby mohlo být formátování plně zajištěno pomocí kaskádových
stylů.
</p>
 
<p class="Remark">
Stránka vzniká jak konvertuji další stránky do HTML.
</p>
 
<h1> Úvodem </h1>
 
<p>
Základním problémem převodu je to, že program Word umožňuje uživateli
vkládat do textu spustu formátovacích povelů, které pak nejsou viditelné
a v programu Word se tedy ani nedají odstranit. Bohužel nelze uživatele
omezit pouze na elementy definované v šabloně dokumentu a ani nelze
nadefinovat šablonu tak, aby v ní nebyly nedbytečné předdefinované styly.
</p>
 
<p>
Druhý problém vzniká tím, že uživatelé používají Word nejen jako editor
ale i jako lámací program (protože potřebují aby se výsledek vytiskl dle
jejich představ). Tak se do dokumentu dostávají různé fixní mezery,
lámání stránek a podobné věci. Pokud není autor zvíře, bývá v dokumentu
těchto speciálností jen pár a není problém je odstranit.
Umístění obrázků we Wordu je kapitola sama pro sebe. V HTML se obvykle
umísťují obrázky do samostatných odstavců. Příslušné úpravy nejsou
obtížné.
</p>
 
<p>
Základem úspěchu je použití jednoduché šablony, příliš neformátovat
dokument explicitními nastaveními a už vůbec ne tabulkami (nebo dokonce
tabulkami v tabulkách).
</p>
 
<h1> Export dat z programu Word </h1>
 
<p>
Cílem tohoto kroku je získat hrubá HTML data stránky.
</p>
 
<ul>
<li> Otevřít dokument v programu Word </li>
<li> Uložit jako zjednodušený HTML </li>
<li> Zavřít Word </li>
</ul>
 
<p>
Při ukládání doplníme příponu tak, aby byla ve tvaru XXX.lang.html
(lang je obvykle buď cs nebo en). Soubor uložíme do adresáře DOC/HTML
příslušného projektu/modulu.
</p>
<h1> Automatická filtrace značek </h1>
<p>
Cílem tohoto kroku je automaticky odfiltrovat co nejvíce nesmyslů
ale moc to nepokazit. Objem stránky klesne asi na 1/3. Odtraní se
skoro všechny formátovací značky a styl.
</p>
<ul>
<li> Spustíme HTML Compress </li>
<li> Založíme si v něm seznam souborů funkcní <i>File/New</i> </li>
<li> Do seznamu přidáme náš HTML soubor funkcí <i>Edit/Add</i> a vybereme ho </li>
<li> Nastavíme šablonu MLAB funkcí <i>View/Optimisation</i> rozsvítme volbu <i>Optimisation</i> a zvolíme <i>Optimisation MLAB</i> </li>
<li> Provedeme filtraci funkcí <i>Files/Compress</i> (nebo F9, nebo ikonou s bleskem) </li>
<li> Soubor odstraníme ze seznamu abychom ho omylem příště nepokazili </li>
</ul>
<p>
Program nemusíme ukončovat pokud ho budeme potřebovat vícekrát. Pozor je
třeba dát na to, abychom nepustili filtraci znova na už dodělaný soubor.
Pokud se to omylem stane je zde k dispozici funkce obnovy předchozí verze
dokumentu (pokud jste si to v programu nevypnuli).
</p>
<p>
Při instalaci je třeba do programu přidat MLAB šablonu. Šablona obvykle
bydlí v adresáři <i>"C:\Program Files\FreeSoft\HTML Compress 5\MLAB.hce"</i>.
Soubor <i>MLAB.hce</i> leží zde
<a href="../../Web/Templates/HTML_Compress/HTML_Compress_5/MLAB.hce">Web/Templates/HTML_Compress/HTML_Compress_5/MLAB.hce</a>.
</p>
<p>
Program mi nechtěl fungovat pod omezeným účtem obyčejného uživatele.
Dá se ale pustit pod výkonějším uživatelem (funkce <i>spustit jako...</i> ).
</p>
 
<h1> Manuální úklid kódu </h1>
<h2> Formátování kódu </h2>
<p>
Cílem toho kroku je sformátovat kód aby se s ním dobře pracovalo.
Současně se automaticky vytvoří pomocné lokální styly, které pak půjdou
snadno zahodit. V tomto kroku přejme na kódování UTF-8.
</p>
 
<ul>
<li> Spustíme editor PSPad a otevřeme soubor </li>
<li> Převedeme formátování na styly funkcí <i>HTML/TiDy/TiDy Upgrade to CSS</i> </li>
<li> Zarovnáme na šířku stránky funkcí <i>HTML/TiDy/TiDy clean Document - Wrap</i> </li>
<li> Nastavíme kódování na UTF-8 funkcní <i>Formát/UTF-8</i> </li>
<li> Uložíme funkcí <i>Soubor/Uložit</i> </li>
</ul>
<h2> Použití šablony </h2>
<p>
Na začátek souboru přikopírujeme šablonu (prázdnou stránku), tedy
například soubor <i>Template.cs.html</i> a provedeme následující úpravy:
</p>
<ul>
<li> Vyplníme název stránky v položce <i>title</i> </li>
<li> Vyplníme klíčová slova v položce <i>meta name="keywords"</i> </li>
<li> Vyplníme popis stránky v položce <i>meta name="description"</i> </li>
<li> Opravíme relativní cesty <i>../../</i>, celkem asi 7x </li>
<li> Přendáme název stránky do značky <i>p class="Title"</i> </li>
<li> Přendáme jméno autora do značky <i>p class=Autor</i> </li>
<li> Přendáme anotaci do značky <i>p class="Subtitle"</i> </li>
<li> Přendáme titulní obrázek do dalšího odstavce typu <i>p class="Subtitle"</i> </li>
<li> Opravíme odkaz na PDF verzi dokumentu </li>
<li> Vezmem text dokumentu od značky <i>h1</i> a nahradíme jím vnitřek vzoru </li>
</ul>
<p>
Po těchto úpravách by měla stránka v zásadě fungovat. Měla by mít hlavičku,
patičku, menu, ikonu a případný odkaz na PDF verzi stránky (pokud jsme jej
nesmazali) by měl taky fungovat.
</p>
 
<h2> Mauální úpravy </h2>
<p>
Jednotlivé blokové značky ohraničíme prázdnou řádkou před a za. Lépe se
čte zdroják.
</p>
 
<h3> Opravy nadpisů <i>h</i> </h3>
 
<p>
Z nadpisů odstraníme čísla kapitol a sformátujeme je tak, že jsou
samostatně na řádce.
</p>
<p>
Občas se stane, že obrázek je uvnitře nadpisu. Ten je třeba dát do
samostatného odstavce <i>p</i>.
</p>
<h3> Opravy odstavců <i>p</i> </h3>
<p>
Občas se stane, že se nějaký text ocitne mimo značku <i>p</i>. Pak pro
něj vytvoříme vlastní odstavec. Je třeba odstarnit formátování pokud
ještě nějaké zůstalo. Zvýraznění děláme pomocí značek <i>i</i>,
<i>em</i>, <i>b</i>. Značka <i>u</i> není dovolená.
</p>
<h3> Vyčištění tabulek <i>table</i> </h3>
<p>
Z tabulek je třeba odstranit nadbytečné značky <i>p</i> a významné
buňky tabulky (například záhlaví) převést na buňky typu <i>th</i> místo
buněk typu <i>td</i>. Významné buňky obvykle mají buď atributy ve své
značce <i>p</i> nebo jsou ohraničené některou zvýrazňující značkou,
typicky <i>b</i>. Veškeré formátování by se mělo odstarnit.
</p>
<p>
Tabulka by měla mít strukturu
</p>
 
<ul>
<li> <i>table</i> tabulka </li>
<li> <i>tr</i> řádka tabulky </li>
<li> <i>th</i> buňka významná nebo <i>td</i> buňka obyčejná </li>
</ul>
<p>
Uvnitř buňek se dá použít <i>br</i> ale v obyčejných tabulkách není
potřeba značka <i>p</i>.
</p>
<h3> Vyčištění seznamu součástí <i>table class="Soupiska"</i> </h3>
<p>
U seznamu součástí provedeme úpravy jako u normální tabulky, doplníme
<i>class="Soupiska"</i> a pokd je tabulka v tabulce tak vnější tabulku
odstraníme.
</p>
<p>
Podnadpisy v seznamu součástek (typicky texty jako <i>odpory</i> a
podobně) označíme také značkou <i>th</i>. Tyto texty by měly být v buňce
vzniklé spojením 2 buněk <i>colspan="2"</i>.
</p>
<p>
Pokud není první řádka seznamu součástek opatřena popisy <i>Reference</i>
a <i>Hodnota</i> doplníme celou řádku s těmito popisy.
</p>
<h3> Oprava obrázků <i>img</i> </h3>
<p>
</p>
 
</div>
 
<!-- AUTOINCLUDE START "Page/Footer.cs.ihtml" DO NOT REMOVE -->
<!-- ============== PATIČKA ============== -->
<div class="Footer">
<script type="text/javascript">
<!--
SetRelativePath("../../");
DrawFooter();
// -->
</script>
<noscript>
<p><b> Pro zobrazení (vložení) hlavičky je potřeba JavaScript </b></p>
</noscript>
</div>
<!-- AUTOINCLUDE END -->
 
</body>
</html>