Ako vytvoriť webové stránky pre mobily a urobiť pre to minimum snahy?
Najprv si ale povedzme prečo weboví kreatívci nechcú tvoriť weby v xhtml+xml. Odpoveď je veľmi jednoduchá: Sú príliš darební aby si dali záležať na zdrojovom kóde. Ide vlastne o to že ak tvorca webu urobí akúkoľvek chybu v základných predpisoch zápisov, tak sa webová stránka vôbec nezobrazí alebo sa zobrazí s výstražným (ako na obrázku) hlásením. Keďže, radšej použijú html, html 4.01, xhtml 1.0 alebo html5 a web sa zobrazí kedykoľvek. Ide v podstate o pohodlnosť nad tým že nech si poradia roboti a prehliadače ako chcú. Validita webu takýchto tvorcov vonkoncom nezaujíma. Mala by ich zaujímať!
Webmastri nevedia ba ani netušia čo je základom dobrého SEO a oháňajú sa preferenciami koľko webov vytvorili. Na druhej strane keď tie weby preskúmate tak majú vážne problémy návštevnosti, dlhé časy pri načítaní webu a dokonca aj dlhý čas načítania pri pre-kliku na samotnom webe a mnohé iné problémy v umiestnení vo vyhľadávačoch. Nepočítam seznam a zoznam ako vyhľadávače lebo to sú katalógy. Nebudem ani hovoriť o tom že ich weby ani nespĺňajú ani základné medzinárodné predpisy a normy. WCAG2, SECTION 508, US CAN-SPAM Act 2003, EU Privacy Regulations 2003, Usability.gov Guidelines, W3C Practices, Readability, Google Search Guidelines, Bing Search Guidelines, Yahoo Search Guidelines, Robots.txt Guidelines, vyhľadávacie praktiky, prehľadávačová kompaktnosť, chyby linkov 404, presmerovania 301 alebo 302, server configurácia, ASP, ASP.NET a PHP script chyby, Internet RFCs a spelovanie. No komu sa už len chce zaoberať takými drobnosťami ako sú normy? Keď sa web zobrazuje tak sa zobrazuje všetkým. Pravda je však niekde inde.
Poďme teda podľa vzoru xhtml+xml ako vzor použijem svoj zdrojový kód webu pre mobilné aplikácie:
Znak "#" je otvárací tág "<" aj zatvárací tág ">" keďže táto šablóna neumožňuje zobrazovanie html zdrojového kódu alebo aj prvkov html.
#!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"#
#html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
#head>
#meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
#!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"#
#html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk"#
#head#
#meta name="description" content="Sem patrí 145 znakov aj s použitými medzerami, a nepoužívajte @ & € zanky." /#
#meta name="keywords" content="optímálne su slova z relevantnostou od 2% do 4% v rovnováhe z textom, vyvarujte sa slov ktoré na webe používate. " /#
#meta name="robots" content="index, follow" /#
#link rel="alternate" type="application/powder+xml" href="http://m.vasadomena.sk/powder.xml" title="Mobile valid" /#
#link rel="alternate" href="http://m.vasadomena.sk/sk/" hreflang="sk-SK" /#
#link rel="alternate" href="http://m.vasadomena.sk/" hreflang="en" /#
#link rel="alternate" href="http://m.vasadomena.sk/cz/" hreflang="cs" /#
#link rel="alternate" href="http://m.vasadomena.sk/de/" hreflang="de" /#
#link rel="alternate" href="http://m.vasadomena.sk/es/" hreflang="es" /#
#link rel="alternate" href="http://m.vasadomena.sk/fr/" hreflang="fr" /#
#link rel="alternate" href="http://m.vasadomena.sk/pt/" hreflang="pt" /#
#link rel="alternate" href="http://m.vasadomena.sk/ru/" hreflang="ru" /#
#link rel="alternate" href="http://m.vasadomena.sk/sk/" hreflang="sk" /#
#title#
Ruletový systém Knut hlavná stránka#/title#
#link rel="stylesheet" type="text/css" href="http://r.cdnsun.net/all.css" media="screen" /#
#link rel="canonical" href="http://m.vasadomena.sk/sk/" /#
#link rel="stylesheet" type="text/css" href="http://r.cdnsun.net/print.css" media="print" /#
#link rel="alternate" type="application/rss+xml" href="http://m.vasadomena.sk/feed_rss.xml" title="RSS feed for My Page" /#
#meta name="revisit-after" content="daily" /#
#meta name="author" content="Pavol Knut Navrátil - Ruletový systém Knut" /#
#link rel="icon" href="http://598043096.r.cdnsun.net/sk/img/favicon.ico" type="image/x-icon" /#
#meta name="viewport" content="width=device-width, initial-scale=1" /#
#meta name="apple-mobile-web-app-capable" content="yes" /#
#meta name="apple-mobile-web-app-status-bar-style" content="black" /#
#meta name="DC.Title" content="Ruletový systém Knut hlavná stránka" /#
#meta name="DC.Creator" content="Pavol Knut Navrátil - Ruletový systém Knut" /#
#meta name="DC.Description" content="145 znakov aj s použitými medzerami, a nepoužívajte @ & € zanky." /#
#meta name="DC.Language" content="sk" /#
#link rel="apple-touch-icon" href="http://598043096.r.cdnsun.net/img/apple-touch-icon.png" /#
#link rel="publisher" href="https://plus.google.com/+Systemknut/" /#
#link rel="author" href="https://plus.google.com/+Systemknut/" /#
#/head#
#body#
Ukážka pri nevhodnom zápise v xhtml+xml:
Takto vyzerá kompletný zdrojový kód webu bez pochybení v tágoch:
XHTML+XML je najháklivejšia webová aplikácia a preto všetko čo zapíšete musí mať jednotnú sémantiku, čiže všetky príkazy musia byť podľa hlavičky dokumentu. Jedna z mála noriem je že xhtml+xml pre mobily zakazuje popup okná s odkazom "href="javascript:void(window.open" ale aj tu je možnosť ako tento proces zmeniť. Takéto otvorenie stránky v novom okne prehliadača sa zapisuje nasledovne:
href="https://www.vasa.domena.sk/nieco.html" onclick="window.open('https://www.vasa.domena.sk/nieco.html'); return false">Stránka v novom okne prehliadača>vstúp sem.#koniec a href#
Takto zapísaný link tam síce je, ale je pre validátory všetkého druhu je akoby neviditeľný a teda na url adrese je všetko podľa noriem.
Najprv si ale povedzme prečo weboví kreatívci nechcú tvoriť weby v xhtml+xml. Odpoveď je veľmi jednoduchá: Sú príliš darební aby si dali záležať na zdrojovom kóde. Ide vlastne o to že ak tvorca webu urobí akúkoľvek chybu v základných predpisoch zápisov, tak sa webová stránka vôbec nezobrazí alebo sa zobrazí s výstražným (ako na obrázku) hlásením. Keďže, radšej použijú html, html 4.01, xhtml 1.0 alebo html5 a web sa zobrazí kedykoľvek. Ide v podstate o pohodlnosť nad tým že nech si poradia roboti a prehliadače ako chcú. Validita webu takýchto tvorcov vonkoncom nezaujíma. Mala by ich zaujímať!
Webmastri nevedia ba ani netušia čo je základom dobrého SEO a oháňajú sa preferenciami koľko webov vytvorili. Na druhej strane keď tie weby preskúmate tak majú vážne problémy návštevnosti, dlhé časy pri načítaní webu a dokonca aj dlhý čas načítania pri pre-kliku na samotnom webe a mnohé iné problémy v umiestnení vo vyhľadávačoch. Nepočítam seznam a zoznam ako vyhľadávače lebo to sú katalógy. Nebudem ani hovoriť o tom že ich weby ani nespĺňajú ani základné medzinárodné predpisy a normy. WCAG2, SECTION 508, US CAN-SPAM Act 2003, EU Privacy Regulations 2003, Usability.gov Guidelines, W3C Practices, Readability, Google Search Guidelines, Bing Search Guidelines, Yahoo Search Guidelines, Robots.txt Guidelines, vyhľadávacie praktiky, prehľadávačová kompaktnosť, chyby linkov 404, presmerovania 301 alebo 302, server configurácia, ASP, ASP.NET a PHP script chyby, Internet RFCs a spelovanie. No komu sa už len chce zaoberať takými drobnosťami ako sú normy? Keď sa web zobrazuje tak sa zobrazuje všetkým. Pravda je však niekde inde.
Poďme teda podľa vzoru xhtml+xml ako vzor použijem svoj zdrojový kód webu pre mobilné aplikácie:
Znak "#" je otvárací tág "<" aj zatvárací tág ">" keďže táto šablóna neumožňuje zobrazovanie html zdrojového kódu alebo aj prvkov html.
Desktop verzia
#!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"#
#html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
#head>
#meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
Pre mobily tablety a dotykové obrazovky monitoru.
#!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"#
#html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk"#
#head#
#meta name="description" content="Sem patrí 145 znakov aj s použitými medzerami, a nepoužívajte @ & € zanky." /#
#meta name="keywords" content="optímálne su slova z relevantnostou od 2% do 4% v rovnováhe z textom, vyvarujte sa slov ktoré na webe používate. " /#
#meta name="robots" content="index, follow" /#
#link rel="alternate" type="application/powder+xml" href="http://m.vasadomena.sk/powder.xml" title="Mobile valid" /#
#link rel="alternate" href="http://m.vasadomena.sk/sk/" hreflang="sk-SK" /#
#link rel="alternate" href="http://m.vasadomena.sk/" hreflang="en" /#
#link rel="alternate" href="http://m.vasadomena.sk/cz/" hreflang="cs" /#
#link rel="alternate" href="http://m.vasadomena.sk/de/" hreflang="de" /#
#link rel="alternate" href="http://m.vasadomena.sk/es/" hreflang="es" /#
#link rel="alternate" href="http://m.vasadomena.sk/fr/" hreflang="fr" /#
#link rel="alternate" href="http://m.vasadomena.sk/pt/" hreflang="pt" /#
#link rel="alternate" href="http://m.vasadomena.sk/ru/" hreflang="ru" /#
#link rel="alternate" href="http://m.vasadomena.sk/sk/" hreflang="sk" /#
#title#
Ruletový systém Knut hlavná stránka#/title#
#link rel="stylesheet" type="text/css" href="http://r.cdnsun.net/all.css" media="screen" /#
#link rel="canonical" href="http://m.vasadomena.sk/sk/" /#
#link rel="stylesheet" type="text/css" href="http://r.cdnsun.net/print.css" media="print" /#
#link rel="alternate" type="application/rss+xml" href="http://m.vasadomena.sk/feed_rss.xml" title="RSS feed for My Page" /#
#meta name="revisit-after" content="daily" /#
#meta name="author" content="Pavol Knut Navrátil - Ruletový systém Knut" /#
#link rel="icon" href="http://598043096.r.cdnsun.net/sk/img/favicon.ico" type="image/x-icon" /#
#meta name="viewport" content="width=device-width, initial-scale=1" /#
#meta name="apple-mobile-web-app-capable" content="yes" /#
#meta name="apple-mobile-web-app-status-bar-style" content="black" /#
#meta name="DC.Title" content="Ruletový systém Knut hlavná stránka" /#
#meta name="DC.Creator" content="Pavol Knut Navrátil - Ruletový systém Knut" /#
#meta name="DC.Description" content="145 znakov aj s použitými medzerami, a nepoužívajte @ & € zanky." /#
#meta name="DC.Language" content="sk" /#
#link rel="apple-touch-icon" href="http://598043096.r.cdnsun.net/img/apple-touch-icon.png" /#
#link rel="publisher" href="https://plus.google.com/+Systemknut/" /#
#link rel="author" href="https://plus.google.com/+Systemknut/" /#
#/head#
#body#
Ukážka pri nevhodnom zápise v xhtml+xml:
Takto vyzerá kompletný zdrojový kód webu bez pochybení v tágoch:
<?xml version="1.0" encoding="UTF-8"?>Skute skopírovať a vložiť zdrojový kód do w3c validátoru alebo českého validátoru webylon.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk">
<head>
<meta name="description" content="Text do 145 až 150 znakov aj s medzerami." />
<meta name="keywords" content="text jednoslovne, dvojslovne,trojslovne do 70 znakov" />
<meta name="robots" content="index, follow" />
<link rel="alternate" type="application/powder+xml" href="http://vasadomena.sk/powder.xml" title="Mobile valid" />
<link rel="alternate" href="http://vasadomena.sk/nieco.html" hreflang="en-CA" />
<link rel="alternate" href="http://vasadomena.sk/nieco.html" hreflang="en-AU" />
<link rel="alternate" href="http://vasadomena.sk/nieco.html" hreflang="en-US" />
<link rel="alternate" href="http://vasadomena.sk/nieco.html" hreflang="en-GB" />
<link rel="alternate" href="http://vasadomena.sk/nieco.html" hreflang="en-NZ" />
<link rel="alternate" href="http://vasadomena.sk/nieco.html" hreflang="en-ZA" />
<link rel="alternate" href="http://vasadomena.sk/nieco.html" hreflang="en-TT" />
<link rel="alternate" href="http://vasadomena.sk/nieco.html" hreflang="en-BZ" />
<link rel="alternate" href="http://vasadomena.sk/nieco.html" hreflang="en-JM" />
<link rel="alternate" href="http://vasadomena.sk/nieco.html" hreflang="en-IE" />
<link rel="alternate" href="http://vasadomena.sk/nieco.html" hreflang="en" />
<link rel="alternate" href="http://vasadomena.sk/cz/nieco.html" hreflang="cs" />
<link rel="alternate" href="http://vasadomena.sk/de/nieco.html" hreflang="de" />
<link rel="alternate" href="http://vasadomena.sk/es/nieco.html" hreflang="es" />
<link rel="alternate" href="http://vasadomena.sk/fr/d-nieco.html" hreflang="fr" />
<link rel="alternate" href="http://vasadomena.sk/pt/nieco-de-nieco.html" hreflang="pt" />
<link rel="alternate" href="http://vasadomena.sk/ru/njeco.html" hreflang="ru" />
<link rel="alternate" href="http://vasadomena.sk/sk/nieco.html" hreflang="sk" />
<title>Einstein Theory about Roulette</title>
<link rel="stylesheet" type="text/css" href="http://vasadomena.sk/main-head.css" media="screen" />
<link rel="alternate" type="application/rss+xml" href="http://vasadomena.sk/feed_rss.xml" title="RSS feed for My Page" />
<meta name="revisit-after" content="1 month" />
<meta name="author" content="Pavol Knut Navratil - Roulette System Knut" />
<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="DC.Title" content="vas nazov trebars webu" />
<meta name="DC.Creator" content="autor textov alebo z footra" />
<meta name="DC.Description" content="Text do 145 až 150 znakov aj s medzerami." />
<meta name="DC.Language" content="sk" />
<link rel="publisher" href="https://plus.google.com/+vasplus/" />
<link rel="author" href="https://plus.google.com/+vasplus/" />
</head>
<body>
<div id="header"><h1><a href="http://vasadomena.sk/" title="Domov"><span>vas nazov trebars webu</span></a></h1></div>
<ul id="jsddm">
<li>
<a class="pure-menu-heading">Domov</a>
<ul>
<li>
<a href="http://vasadomena.sk/">Domov</a>
</li>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
</ul>
</li>
<li>
<a class="pure-menu-heading">nieco</a>
<ul>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
</ul>
</li>
<li>
<a class="pure-menu-heading">nieco</a>
<ul>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
</ul>
</li>
<li>
<a class="pure-menu-heading">nieco</a>
<ul>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
<li>
<a href="/nieco.html">Názov článku</a>
</li>
</ul>
</li>
<li>
<a class="pure-menu-heading">nieco</a>
<ul>
<li>
<a href="/cz/nieco.html">Názov článku</a>
</li>
<li>
<a href="/de/nieco.html">Názov článku</a>
</li>
<li>
<a href="/es/nieco.html">Názov článku</a>
</li>
<li>
<a href="/fr/d-nieco.html">Názov článku</a>
</li>
<li>
<a href="/pt/nieco-de-nieco.html">Názov článku</a>
</li>
<li>
<div lang="ru-RU" xml:lang="ru-RU"><a href="/ru/njeco.html">Názov článku</a></div>
</li>
<li>
<a href="/sk/nieco.html">Názov článku</a>
</li>
</ul>
</li>
</ul>
<div id="web"><h2>niečo do 50 znakov aj s medzerníkom</h2>
<p>
<a href="/img/nieco.jpg" onclick="window.open('/img/nieco.jpg'); return false">
<img class="image" src="/img/nieco.jpg" title="Nieco." alt="Nieco." width="117" height="149"/></a>Loren Ipsum <strong>Loren Ipsum</strong> Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum <strong>Mr Loren Ipsum</strong>, Loren Ipsum <strong>Loren Ipsum Loren Ipsum</strong> Loren Ipsum end again.
</p><br /><h3>Loren Ipsum</h3><br />
<p><strong>Loren Ipsum calculated</strong> Loren Ipsum <strong>Loren Ipsum</strong> Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum Loren Ipsum <strong>Mr Loren Ipsum</strong>, Loren Ipsum <strong>Loren Ipsum Loren Ipsum</strong> Loren Ipsum end again.
</p><br />
</div>
<div id="footer"><div class="vcard">
<p>Created 2014, Copyright © <span class="fn">nieco</span> - nieco</p>
<p><a href="http://vasadomena.sk/privacy-policy.html" title="Privacy Policy">Privacy Policy</a></p><br />
</div></div>
<script type="text/javascript">var node1=document.createElement("script");node1.type="text/javascript";node1.async=true;node1.src="http://vasadomena.sk/js-all.js";document.getElementsByTagName("head")[0].appendChild(node1);</script><script type="text/javascript">(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create','UA-XXXXXXXX-1','auto');ga('send','pageview');</script>
</body>
</html>
 |
| Každý vhodný zápis v zdrojovom kóde zjednoduší prechod bootmi zdrojom stránok. |
XHTML+XML je najháklivejšia webová aplikácia a preto všetko čo zapíšete musí mať jednotnú sémantiku, čiže všetky príkazy musia byť podľa hlavičky dokumentu. Jedna z mála noriem je že xhtml+xml pre mobily zakazuje popup okná s odkazom "href="javascript:void(window.open" ale aj tu je možnosť ako tento proces zmeniť. Takéto otvorenie stránky v novom okne prehliadača sa zapisuje nasledovne:
href="https://www.vasa.domena.sk/nieco.html" onclick="window.open('https://www.vasa.domena.sk/nieco.html'); return false">Stránka v novom okne prehliadača>vstúp sem.#koniec a href#
Takto zapísaný link tam síce je, ale je pre validátory všetkého druhu je akoby neviditeľný a teda na url adrese je všetko podľa noriem.
Ak potrebujete rozobrať problém alebo čokoľvek okolo webu tak píšte komentáre s url adresou webu.
Žiadne komentáre:
Zverejnenie komentára