ict.ken.be

 

Posts in Category: HTML

Support multiple languages on your site 

Categories: HTML

From: https://support.google.com/webmasters/answer/182192?hl=en&ref_topic=2370587

Content

  • don't mix languages in the content
  • block robots from crawling auto translated pages -> can harm site perception
  • keep content for each language on a separated url
  • do not use cookies to change content language
  • cross link each version of a page (so user can switch with one click)
  • avoid automatic redirect on perceived language
  • always use UTF-8 in the url and as much as possible
  • google will use TLD as strong signal for that country
  • if single country and general TLD then you should use country targetting of the google search console settings
  • server ip should be close to the users
  • indicators of address, google my business, phone,... will be used to localize your content
  • google does not use geo.position, distribution and/or html tags
  • use canonical when same translation in more then one place
  • use hreflang and regional urls

Domain Examples

  • example.ie (server location irrelevant)
  • de.example.com (country or language?)
  • example.com/de/ (can use console targetting)
  • site.com?loc=de (not recommended)

Culture

From: https://support.google.com/webmasters/answer/189077

  • tailored to language, market and culture.
  • have support available for the language.
  • english dollar vs english pound
  • when using culture specific hreflang, also use an only language one
  • x-default for mixed and language selectors
  • specify only on the cannonical url
  • all alternatives should be included, also the page itself
  • prefered to keep alternatives in a similar directory structure as main language
  • be consistend with your url structure
  • display a banner to suggest an alternative page in user language instead of redirecting
  • avoid putting language or country in a url parameter
  • use UTF-8 for urls
  • !! it's not clear if one should or should not translate the urls !!
  • page speed within the country is a strong signal
  • add ability to swith language
  • ensure tourist experience, do not lock users into their current ip location

Html Elements

<link rel="alternate" hreflang="es" href="http://es.example.com/page.html" />

or with html header

Link: <a href="http://es.example.com/" target="_blank">http://es.example.com/; rel="alternate"; hreflang=es"

or in sitemap

<xhtml: link rel="alternate" hreflang="en-gb" ...

Static generators

Jekyll example: https://github.com/sylvaindurand/multilingual-jekyll

Advanced HTML5 techniques - Notes 

Categories: HTML Notes

Advanced HTML5
Craig Shoemaker

1. Offline Applications
  • Browser Events + Application Cache
  • Manifest, Assets, Application Cache, Online Status Awereness 
<html manifest="journal-manifest.aspx">
 
CACHE MANIFEST
# version 1.1
 
CACHE:
journal.aspx
journal-css.aspx
scripts/jquery-1.5.1.min.js
offline.js
journal-bkg.jpg
 
NETWORK;
journal/list
 
FALLBACK:
/home /journal-fallback.aspx 
  • If one file gives a 404, none will work offline.
  • Network are pages you do not want to be cached.
  • Fallback if offline different from online.
  • The manifest must have mime type: text/cache-manifest with encoding utf-8.
 
Browser Caching (images, css, javascript)
Application Caching (manifest, html, images, css, scripts)
 
  • Do not mix browser with application caching!
 
Response Headers
Cache-Control: no-cache
Pragma: no-cache
Expires: -1 
  • window.applicationCache
  • checking - downloading - progress - cached (updated manifest)
  • checking - no update (if manifest not updated)
 
Cache States
0	UNCACHED	Cache not initialized
1 IDLE Cache not being updates
2 CHECKING Looking at manifest changes
3 DOWNLOADING Serving files in manifest to browser
4 UPDATEREADY All files in manifest are downloaded
5 OBSOLETE Contents of cache are stale and need to be downloaded again
 
this.Response.Cache.SetCacheability(HttpCacheability.NoCache);
<%@ Page ContentType="text/cache-manifest" ResponseEncoding="utf-8" ... >
 
offline.js
$(function() {
window.applicationCache.onupdateready = function(e) {
applicationCache.swapCache();
location.reload();
}
window.applicationCache.onchecking = function(e) {}
window.applicationCache.oncached = function(e) {}
window.applicationCache.onnoupdate = function(e) {}
window.applicationCache.onobsolete = function(e) {}
window.applicationCache.ondownloading = function(e) {}
window.applicationCache.onerror = function(e) {}
window.addEventListener("online", function(e) {}, true);
window.addEventListener("offline", function(e) {}, true);
}
 
function isOnline()
{
return navigator.onLine;
2. Geolocation 
  • One Time or Continual
 
IP Address: available everywhere, processed server side, low accuracy, high processing overhead
 
Coordinate Triangulation
GPS: high accuracy, long operation, not optimal for indoors, hardware required
WiFi: accurate, works indoors, quick & cheap response, ineffective in areas with limited access points
Cell Phone: fairly accurate, works indoors, quick & cheap response, Request access to cell phone or modem, ineffective in areas with few cell towers
 
User-Defined: high accuracy, flexibility to designate alternative locations, maybe fastest option, can be very inaccurate (esp. if locations change)
 
  • All major browsers from ie8.
 
Reset location permissions
IE - Options - Privacy - Location - Clear Sites
Chrome - Options - Under the hood - Privacy - Content Settings - Location - Manage Exceptions
Safari/Firefox/Opera - Processes each request individually
var options = {
enableHighAccuracy:true; //default is false
timeout:10000, //in milliseconds, default is no limit
maximumAge:1000 //in milliseconds, default is 0 which is recalculate immediately
};
navigator.geolocation.getCurrentPosition(showPosition, positionError, options);
 
watchId = navigator.geolocation.watchPosition(showPosition, positionError);
navigator.clearWatch(watchId);
3. Web Storage
  • Local + Session (per session, per domain)
  • Client-controlled between 2 and 10MB (mostly around 5MB)
  • Web storage has simple api with key/value pair (vs IndexedDB)
  • All browsers support (only IE supports storage event)
if (window.localStorage)
{
if( window.localStorage.myKey != null) {}
}
window.localStorage.removeItem("myKey");
var session = window.sessionStorage;
var dataString = JSON.stringify(data);
session.setItem("cart", dataString);
var data = JSON.parse(session.getItem("cart"));
 
window.addEventListener("storage", displayStorageEvent, false);
if (typeof(window.onstorage) == "undefinded") { alert('not for this browser'); }
function displayStorageEvent(e) {
$("#key").html(e.key);
$("#newValue").html(e.newValue);
$("#oldValue").html(e.oldValue);
$("#url").html(e.url);
// e.storageArea <- reference to either Local or Session instance 
}
 
var storage = window.localStorage;
try {
...
storage.length
storage.remainingSpace //only IE
...
} catch (e) {
...
QUOTA_EXCEEDED_ERR
...
}
 
storage.clear
4. Web Workers
  • Background threads in the browser. 
  • Dedicated to the window.
  • Shared to the browser, however not yet implemented in most browsers.
  • No access to DOM, Window, Host page (lot of libraries might not work)
  • You have access to Navigator(appName, appVersion, platform, userAgent), Timers, XmlHttpRequest
  • IE doesn't support it yet. (http://bit.ly/r5BSTI or http://bit.ly/oiOiLT for alternative solutions)
  • Arguments between UI and worker are copies.
function getWorker() {
if (_worker == null) {
_worker = new Worker("fib-worker.js");
_worker.onmessage = messageHandler;
_worker.onerror = errorHandler;
}
return _worker;
}
getWorker().postMessage(seriesLength);
getWorker().terminate(); //will terminate immediately
this.close(); //from within the worker will terminate on completion
 
function messageHandler(e) {
var results = e.data;
}
 
function generate(n) {
...
postMessage(results);
}
 
//basic ajax call
var xmlhttp;
if (XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
postMessage(xmlhttp.responseText);
}
}
xmlhttp.open("GET", "ajax-content.htm", true);
xmlhttp.send();
5. Web Sockets
  • Bidirectional, full duplex client/server communication.
  • Real time data before web sockets: ajax + comet 
 
Polling, long polling & streaming.
Http Header: 100's of bytes vs Socket Header: 2 bytes
 
Some browsers turn it off because of security.
firefox - about:config - network.websocket
opera - config#UserPrefs|EnableWebSockets
 
http://nugget.codeplex.com - c# web socket server implementation
interface ISocketServer
{
void Initialize(string serverPath, string originServerAndPort);
void Start();
void Send();
string Input { set; }
}
 
var server = new WebSocket("ws://localhost:8181/server");
server.addEventListener("message", messageHandler, false);
server.addEventListener("open", openHandler, false);
server.addEventListener("close", closeHandler, false);
function messageHandler(e) { logMsg("Server says: " + e.data); }
Stock Ticker example
  • jStockTicker.js to display the scrollbar.
  • NBuilder to generate dummy data.  
6. Microdata
  • Standard HTML Markup + Vocabulary namespace
<div id="container" itemscope itemtype="http://data-vocabulary.org/Person">
<h2 itemprop="name">Ken Van Gilbergen</h2>
<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="region">CA</span>
</span>
</div>
 
Microdata Property Value Origins
<img src="src" itemprop="photo" /> //will take source
<a href="link" itemprop="affiliation">some text</a> //will take href
<time itemprop="startDate" datetime="somedate">Feb 29, 9:00PM</time> //will take datetime attribute
itemid: uniquely identifies at scope-level
itemref: pointer to microdata values not included in itemscope 
itemref will contain a list of ids of elements separated by spaces.
<a href="mylocation" itemprop="url"><span itemprop="affiliation">MyCompany</span></a>
<meta itemprop="currency" content="USD">
 
 

HTML5 Overview 

Categories: HTML

HTML5

Html5 replaces html4 + xhtml1 + dom2.

What is not html5: css3 transitions, web sockets, geolocation, svg, css3 @font-face, messaging api.

Html5 introduces new elements: article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, ruby, section, source, summary, time, video.

Html5 introduces WebForms 2.0: datepickers, numeric steppers, email-search-url fields, put/delete.

Html5 extends api: audio, video, offline apps, editable, drag&drop, history, protocols.

<!DOCTYPE HTML> -> needed cause otherwise will goto quirks
<meta charset="UTF-8" />

<header>multiple headers allowed</header>
<nav>use only for major navigation, eg. not needed for footer link group</nav>
<section>regions with distinct titles</section>
<hgroup>grouping h-tags that belong together, eg. subtitle</hgroup>
<h1>restarting header numbering is encouraged</h1>
<footer>for nearest section</footer>
<article>independently distributable</article>
<aside>inside the tag it relates to</aside>

<figure>group visual content</figure>
<video src="my-movie.mp4" width="320" height="240"></video>
<audio></audio>
<embed></embed>
<canvas>use for report graphics and games, watch out with accessibility friendliness</canvas>

<meter>progress bar if min and max is known</meter>
<progress>progress bar if length of action unknown</progress>
<time></time>
<details>used for tabs and accordions</details>
<command>things that can be invoked by user</command>
<menu>list of commands</menu>

<label for="theAddy">the label</label>
<input name="theAddy" type="email" id="email" tabindex="30" autocomplete="false" autofocus placeholder="suggested input" required>
<input type="number" step="5" min="1" value="1">

getElementsByClassName();

Elements deprecated for authors: basefont, big, center, font, s, strike, tt, u, frame, frameset, noframes

Attributes deprecated for authors: a (link rev, charset), img (longdesc, name), html (version), th (abbr), td (scope), all-block-level(align), body (background), img (hspace, vspace), table (tr, th, td, bgcolor, table border, cell padding, cell spacing), td (th,height,width), table (valign).

CONTENT MODELS

block: div, form, h1, h6, ol, ul, li, p, pre, table
inline: span, a, em, img, input, label, strong

metadata, embedded, interactive, heading, phrasing (similar to inline), flow (in normal flow of document), sectioning (by article, aside, nav, section)

API

Video and Audio API (Ogg Theora .ogv - Google VP8 .webm)

Inline Editing API

Offline Application API

History API

Web Protocol API

TOOLS

html testing:

outline testing:

backward compatibility:

MORE HTML5

HTML Special Characters 

Categories: HTML
left single quote   &lsquo;
right single quote   &rsquo;
single low-9 quote   &sbquo;
left double quote   &ldquo;
right double quote   &rdquo;
double low-9 quote   &bdquo;
dagger   &dagger;
double dagger   &Dagger;
per mill sign   &permil;
single left-pointing angle quote   &lsaquo;
single right-pointing angle quote   &rsaquo;
black spade suit   &spades;
black club suit   &clubs;
black heart suit   &hearts;
black diamond suit   &diams;
overline, = spacing overscore   &oline;
leftward arrow   &larr;
upward arrow   &uarr;
rightward arrow   &rarr;
downward arrow   &darr;
trademark sign &#x2122; &trade;
unused &#00;-
&#08;
   
horizontal tab &#09;    
line feed &#10;    
unused &#11;    
space &#32;    
exclamation mark &#33;   !
double quotation mark &#34; &quot; "
number sign &#35;   #
dollar sign &#36;   $
percent sign &#37;   %
ampersand &#38; &amp; &
apostrophe &#39;   '
left parenthesis &#40;   (
right parenthesis &#41;   )
asterisk &#42;   *
plus sign &#43;   +
comma &#44;   ,
hyphen &#45;   -
period &#46;   .
slash &#47; &frasl; /
digits 0-9 &#48;-
&#57;
   
colon &#58;   :
semicolon &#59;   ;
less-than sign &#60; &lt; <
equals sign &#61;   =
greater-than sign &#62; &gt; >
question mark &#63;   ?
at sign &#64;   @
uppercase letters A-Z &#65;-
&#90;
   
left square bracket &#91;   [
backslash &#92;   \
right square bracket &#93;   ]
caret &#94;   ^
horizontal bar (underscore) &#95;   _
grave accent &#96;   `
lowercase letters a-z &#97;-
&#122;
   
left curly brace &#123;   {
vertical bar &#124;   |
right curly brace &#125;   }
tilde &#126;   ~
ellipses &#133; &hellip;
en dash &#150; &ndash;
em dash &#151; &mdash;
unused &#152;-
&#159;
   
nonbreaking space &#160; &nbsp;  
inverted exclamation &#161; &iexcl; ¡
cent sign &#162; &cent; ¢
pound sterling &#163; &pound; £
general currency sign &#164; &curren; ¤
yen sign &#165; &yen; ¥
broken vertical bar &#166; &brvbar; or &brkbar; ¦
section sign &#167; &sect; §
umlaut &#168; &uml; or &die; ¨
copyright &#169; &copy; ©
feminine ordinal &#170; &ordf; ª
left angle quote &#171; &laquo; «
not sign &#172; &not; ¬
soft hyphen &#173; &shy; ­
registered trademark &#174; &reg; ®
macron accent &#175; &macr; or &hibar; ¯
degree sign &#176; &deg; °
plus or minus &#177; &plusmn; ±
superscript two &#178; &sup2; ²
superscript three &#179; &sup3; ³
acute accent &#180; &acute; ´
micro sign &#181; &micro; µ
paragraph sign &#182; &para;
middle dot &#183; &middot; ·
cedilla &#184; &cedil; ¸
superscript one &#185; &sup1; ¹
masculine ordinal &#186; &ordm; º
right angle quote &#187; &raquo; »
one-fourth &#188; &frac14; ¼
one-half &#189; &frac12; ½
three-fourths &#190; &frac34; ¾
inverted question mark &#191; &iquest; ¿
uppercase A, grave accent &#192; &Agrave; À
uppercase A, acute accent &#193; &Aacute; Á
uppercase A, circumflex accent &#194; &Acirc; Â
uppercase A, tilde &#195; &Atilde; Ã
uppercase A, umlaut &#196; &Auml; Ä
uppercase A, ring &#197; &Aring; Å
uppercase AE &#198; &AElig; Æ
uppercase C, cedilla &#199; &Ccedil; Ç
uppercase E, grave accent &#200; &Egrave; È
uppercase E, acute accent &#201; &Eacute; É
uppercase E, circumflex accent &#202; &Ecirc; Ê
uppercase E, umlaut &#203; &Euml; Ë
uppercase I, grave accent &#204; &Igrave; Ì
uppercase I, acute accent &#205; &Iacute; Í
uppercase I, circumflex accent &#206; &Icirc; Î
uppercase I, umlaut &#207; &Iuml; Ï
uppercase Eth, Icelandic &#208; &ETH; Ð
uppercase N, tilde &#209; &Ntilde; Ñ
uppercase O, grave accent &#210; &Ograve; Ò
uppercase O, acute accent &#211; &Oacute; Ó
uppercase O, circumflex accent &#212; &Ocirc; Ô
uppercase O, tilde &#213; &Otilde; Õ
uppercase O, umlaut &#214; &Ouml; Ö
multiplication sign &#215; &times; ×
uppercase O, slash &#216; &Oslash; Ø
uppercase U, grave accent &#217; &Ugrave; Ù
uppercase U, acute accent &#218; &Uacute; Ú
uppercase U, circumflex accent &#219; &Ucirc; Û
uppercase U, umlaut &#220; &Uuml; Ü
uppercase Y, acute accent &#221; &Yacute; Ý
uppercase THORN, Icelandic &#222; &THORN; Þ
lowercase sharps, German &#223; &szlig; ß
lowercase a, grave accent &#224; &agrave; à
lowercase a, acute accent &#225; &aacute; á
lowercase a, circumflex accent &#226; &acirc; â
lowercase a, tilde &#227; &atilde; ã
lowercase a, umlaut &#228; &auml; ä
lowercase a, ring &#229; &aring; å
lowercase ae &#230; &aelig; æ
lowercase c, cedilla &#231; &ccedil; ç
lowercase e, grave accent &#232; &egrave; è
lowercase e, acute accent &#233; &eacute; é
lowercase e, circumflex accent &#234; &ecirc; ê
lowercase e, umlaut &#235; &euml; ë
lowercase i, grave accent &#236; &igrave; ì
lowercase i, acute accent &#237; &iacute; í
lowercase i, circumflex accent &#238; &icirc; î
lowercase i, umlaut &#239; &iuml; ï
lowercase eth, Icelandic &#240; &eth; ð
lowercase n, tilde &#241; &ntilde; ñ
lowercase o, grave accent &#242; &ograve; ò
lowercase o, acute accent &#243; &oacute; ó
lowercase o, circumflex accent &#244; &ocirc; ô
lowercase o, tilde &#245; &otilde; õ
lowercase o, umlaut &#246; &ouml; ö
division sign &#247; &divide; ÷
lowercase o, slash &#248; &oslash; ø
lowercase u, grave accent &#249; &ugrave; ù
lowercase u, acute accent &#250; &uacute; ú
lowercase u, circumflex accent &#251; &ucirc; û
lowercase u, umlaut &#252; &uuml; ü
lowercase y, acute accent &#253; &yacute; ý
lowercase thorn, Icelandic &#254; &thorn; þ
lowercase y, umlaut &#255; &yuml; ÿ
Alpha &Alpha;   Α
alpha &alpha;   α
Beta &Beta;   Β
beta &beta;   β
Gamma &Gamma;   Γ
gamma &gamma;   γ
Delta &Delta;   Δ
delta &delta;   δ
Epsilon &Epsilon;   Ε
epsilon &epsilon;   ε
Zeta &Zeta;   Ζ
zeta &zeta;   ζ
Eta &Eta;   Η
eta &eta;   η
Theta &Theta;   Θ
theta &theta;   θ
Iota &Iota;   Ι
iota &iota;   ι
Kappa &Kappa;   Κ
kappa &kappa;   κ
Lambda &Lambda;   Λ
lambda &lambda;   λ
Mu &Mu;   Μ
mu &mu;   μ
Nu &Nu;   Ν
nu &nu;   ν
Xi &Xi;   Ξ
xi &xi;   ξ
Omicron &Omicron;   Ο
omicron &omicron;   ο
Pi &Pi;   Π
pi &pi;   π
Rho &Rho;   Ρ
rho &rho;   ρ
Sigma &Sigma;   Σ
sigma &sigma;   σ
Tau &Tau;   Τ
tau &tau;   τ
Upsilon &Upsilon;   Υ
upsilon &upsilon;   υ
Phi &Phi;   Φ
phi &phi;   φ
Chi &Chi;   Χ
chi &chi;   χ
Psi &Psi;   Ψ
psi &psi;   ψ
Omega &Omega;   Ω
omega &omega;   ω
password dot &#9679;  
bullet &#8226;  

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Character Friendly Code Numerical Code Hex Code Description
A A &#65; &#x41; Capital A
a a &#97; &#x61; Lowercase A
À &Agrave; &#192; &#xC0; Capital A-grave
à &agrave; &#224; &#xE0; Lowercase A-grave
Á &Aacute; &#193; &#xC1; Capital A-acute
á &aacute; &#225; &#xE1; Lowercase A-acute
 &Acirc; &#194; &#xC2; Capital A-circumflex
â &acirc; &#226; &#xE2; Lowercase A-circumflex
à &Atilde; &#195; &#xC3; Capital A-tilde
ã &atilde; &#227; &#xE3; Lowercase A-tilde
Ä &Auml; &#196; &#xC4; Capital A-umlaut
ä &auml; &#228; &#xE4; Lowercase A-umlaut
Å &Aring; &#197; &#xC5; Capital A-ring
å &aring; &#229; &#xE5; Lowercase A-umlaut
Ā   &#256; &#x100; Capital A-macron
ā   &#257; &#x101; Lowercase A-macron
Ă   &#258; &#x102; Capital A-breve
ă   &#259; &#x103; Lowercase A-breve
Ą   &#260; &#x104; Capital A-ogonek
ą   &#261; &#x105; Lowercase A-ogonek
Ǟ   &#478; &#x1DE; Capital A-diaeresis and macron
ǟ   &#479; &#x1DF; Lowercase A-diaeresis and macron
Ǻ   &#506; &#x1FA; Capital A-acute ring
ǻ   &#507; &#x1FB; Lowercase A-acute ring
Æ &AElig; &#198; &#xC6; Capital AE Ligature
æ &aelig; &#230; &#xE6; Lowercase AE Ligature
Ǽ   &#508; &#x1FC; Capital AE Ligature-acute
ǽ   &#509; &#x1FD; Lowercase AE Ligature-acute
B B &#66; &#x42; Capital B
b b &#98; &#x62; Lowercase B
  &#7682; &#x1E02; Capital B-dot
  &#7683; &#x1E03; Lowercase B-dot
C C &#67; &#x43; Capital C
c c &#99; &#x63; Lowercase C
Ć   &#262; &#x106; Capital C-acute
ć   &#263; &#x107; Lowercase C-acute
Ç &Ccedil; &#199; &#xC7; Capital C-cedilla
ç &ccedil; &#231; &#xE7; Lowercase C-cedilla
Č   &#268; &#x10C; Capital C-hachek
č   &#269; &#x10D; Lowercase C-hachek
Ĉ   &#264; &#x108; Capital C-circumflex
ĉ   &#265; &#x109; Lowercase C-circumflex
Ċ   &#266; &#x10A; Capital C-dot
ċ   &#267; &#x10B; Lowercase C-dot
D D &#68; &#x44; Capital D
d d &#100; &#x64; Lowercase D
  &#7696; &#x1E10; Capital D-cedilla
  &#7697; &#x1E11; Lowercase D-cedilla
Ď   &#270; &#x10E; Capital D-hachek
ď   &#271; &#x10F; Lowercase D-hachek
  &#7690; &#x1E0A; Capital D-dot
  &#7691; &#x1E0B; Lowercase D-dot
Đ   &#272; &#x110; Capital D-stroke
đ   &#273; &#x111; Lowercase D-stroke
Ð &ETH; &#208; &#xD0; Capital Eth (Icelandic)
ð &eth; &#240; &#xF0; Lowercase Eth (Icelandic)
DZ or Dz   &#497; or &498; &#x1F1; or &#x1F2; Capital DZ Ligature
dz   &#499; &#x1F3; Lowercase DZ Ligature
DŽ or Dž   &#452; or &#453; &#x1C4; or &#x1C5; Capital DZ-hachek
dž   &#454; &#x1C6; Lowercase DZ-hachek
E E &#69; &#x45; Capital E
e e &#101; &#x65; Lowercase E
È &Egrave; &#200; &#xC8; Capital E-grave
è &egrave; &#232; &#xE8; Lowercase E-grave
É &Eacute; &#201; &#xC9; Capital E-acute
é &eacute; &#233; &#xE9; Lowercase E-acute
Ě   &#282; &#x11A; Capital E-hachek
ě   &#283; &#x11B; Lowercase E-hachek
Ê &Ecirc; &#202; &#xCA; Capital E-circumflex
ê &ecirc; &#234; &#xEA; Lowercase E-circumflex
Ë &Euml; &#203; &#xCB; Capital E-umlaut
ë &euml; &#235; &#xEB; Lowercase E-umlaut
Ē   &#274; &#x112; Capital E-macron
ē   &#275; &#x113; Lowercase E-macron
Ĕ   &#276; &#x114; Capital E-breve
ĕ   &#277; &#x115; Lowercase E-breve
Ę   &#280; &#x118; Capital E-ogonek
ę   &#281; &#x119; Lowercase E-ogonek
Ė   &#278; &#x116; Capital E-dot
ė   &#279; &#x117; Lowercase E-dot
Ʒ   &#439; &#x1B7; Capital Ezh
ʒ   &#658; &#x292; Lowercase Ezh
Ǯ   &#494; &#x1EE; Capital Ezh-hachek
ǯ   &#495; &#x1EF; Lowercase Ezh-hachek
F F &#70; &#x46; Capital F
f f &#102; &#x66; Lowercase F
  &#7710; &#x1E1E; Capital F-dot
  &#7711; &#x1E1F; Lowercase F-dot
ƒ   &#402; &#x192; Lowercase F-hook
  &#64256; &#xFB00; Lowercase FF Ligature
  &#64257; &#xFB01; Lowercase FI Ligature
  &#64258; &#xFB02; Lowercase FL Ligature
  &#64259; &#xFB03; Lowercase FFI Ligature
  &#64260; &#xFB04; Lowercase FFL Ligature
  &#64261; &#xFB05; Lowercase FT Ligature
G G &#71; &#x47; Capital G
g g &#103; &#x67; Lowercase G
Ǵ   &#500; &#x1F4; Capital G-acute
ǵ   &#501; &#x1F5; Lowercase G-acute
Ģ   &#290; &#x122; Capital G-cedilla
ģ   &#291; &#x123; Lowercase G-cedilla
Ǧ   &#486; &#x1E6; Capital G-hachek
ǧ   &#487; &#x1E7; Lowercase G-hachek
Ĝ   &#284; &#x11C; Capital G-circumflex
ĝ   &#285; &#x11D; Lowercase G-circumflex
Ğ   &#286; &#x11E; Capital G-breve
ğ   &#287; &#x11F; Lowercase G-breve
Ġ   &#288; &#x120; Capital G-dot
ġ   &#289; &#x121; Lowercase G-dot
Ǥ   &#484; &#x1E4; Capital G-stroke
ǥ   &#485; &#x1E5; Lowercase G-stroke
H H &#72; &#x48; Capital H
h h &#104; &#x68; Lowercase H
Ĥ   &#292; &#x124; Capital H-circumflex
ĥ   &#293; &#x125; Lowercase H-circumflex
Ħ   &#294; &#x126; Capital H-stroke
ħ   &#295; &#x127; Lowercase H-stroke
I I &#73; &#x49; Capital I
i i &#105; &#x69; Lowercase I
Ì &Igrave; &#204; &#xCC; Capital I-grave
ì &igrave; &#236; &#xEC; Lowercase I-grave
Í &Iacute; &#205; &#xCD; Capital I-acute
í &iacute; &#237; &#xED; Lowercase I-acute
Î &Icirc; &#206; &#xCE; Capital I-circumflex
î &icirc; &#238; &#xEE; Lowercase I-circumflex
Ĩ   &#296; &#x128; Capital I-tilde
ĩ   &#297; &#x129; Lowercase I-tilde
Ï &Iuml; &#207; &#xCF; Capital I-umlaut
ï &iuml; &#239; &#xEF; Lowercase I-umlaut
Ī   &#298; &#x12A; Capital I-macron
ī   &#299; &#x12B; Lowercase I-macron
Ĭ   &#300; &#x12C; Capital I-breve
ĭ   &#301; &#x12D; Lowercase I-breve
Į   &#302; &#x12E; Capital I-ogonek
į   &#303; &#x12F; Lowercase I-ogonek
İ   &#304; &#x130; Capital I-dot
ı   &#305; &#x131; Lowercase I-dotless
IJ   &#306; &#x132; Capital IJ Ligature
ij   &#307; &#x133; Lowercase IJ Ligature
J J &#74; &#x4A; Capital J
j j &#106; &#x6A; Lowercase J
Ĵ   &#308; &#x134; Capital J-circumflex
ĵ   &#309; &#x135; Lowercase J-circumflex
K K &#75; &#x4B; Capital K
k k &#107; &#x6B; Lowercase K
  &#7728; &#x1E30; Capital K-acute
  &#7729; &#x1E31; Lowercase K-acute
Ķ   &#310; &#x136; Capital K-cedilla
ķ   &#311; &#x137; Lowercase K-cedilla
Ǩ   &#488; &#x1E8; Capital K-hachek
ǩ   &#489; &#x1E9; Lowercase K-hachek
ĸ   &#312; &#x138; Small Capital K
L L &#76; &#x4C; Capital L
l l &#108; &#x6C; Lowercase L
Ĺ   &#313; &#x139; Capital L-acute
ĺ   &#314; &#x13A; Lowercase L-acute
Ļ   &#315; &#x13B; Capital L-cedilla
ļ   &#316; &#x13C; Lowercase L-cedilla
Ľ   &#317; &#x13D; Capital L-hachek
ľ   &#318; &#x13E; Lowercase L-hachek
Ŀ   &#319; &#x13F; Capital L-middle dot
ŀ   &#320; &#x140; Lowercase L-middle dot
Ł   &#321; &#x141; Capital L-stroke
ł   &#322; &#x142; Lowercase L-stroke
LJ or Lj   &#455; or &#456; &#x1C7; or &#x1C8; Capital LJ Ligature
lj   &#457; &#x1C9; Lowercase LJ Ligature
M M &#77; &#x4D; Capital M
m m &#109; &#x6D; Lowercase M
  &#7744; &#x1E40; Capital M-dot
  &#7745; &#x1E41; Lowercase M-dot
N N &#78; &#x4E; Capital N
n n &#110; &#x6E; Lowercase N
Ń   &#323; &#x143; Capital N-acute
ń   &#324; &#x144; Lowercase N-acute
Ņ   &#325; &#x145; Capital N-cedilla
ņ   &#326; &#x146; Lowercase N-cedilla
Ň   &#327; &#x147; Capital N-hachek
ň   &#328; &#x148; Lowercase N-hachek
Ñ &Ntilde; &#209; &#xD1; Capital N-tilde
ñ &ntilde; &#241; &#xF1; Lowercase N-tilde
ʼn   &#329; &#x149; Lowercase N-apostrophe (before)
Ŋ   &#330; &#x14A; Capital Eng
ŋ   &#331; &#x14B; Lowercase Eng
NJ or Nj   &#458; or &#459; &#x1CA; or &#x1CB; Capital NJ Ligature
nj   &#460; &#x1CC; Lowercase NJ Ligature
O O &#79; &#x4F; Capital O
o o &#111; &#x6F; Lowercase O
Ò &Ograve; &#210; &#xD2; Capital O-grave
ò &ograve; &#242; &#xF2; Lowercase O-grave
Ó &Oacute; &#211; &#xD3; Capital O-acute
ó &oacute; &#243; &#xF3; Lowercase O-acute
Ô &Ocirc; &#212; &#xD4; Capital O-circumflex
ô &ocirc; &#244; &#xF4; Lowercase O-circumflex
Õ &Otilde; &#213; &#xD5; Capital O-tilde
õ &otilde; &#245; &#xF5; Lowercase O-tilde
Ö &Ouml; &#214; &#xD6; Capital O-umlaut
ö &ouml; &#246; &#xF6; Lowercase O-umlaut
Ō   &#332; &#x14C; Capital O-macron
ō   &#333; &#x14D; Lowercase O-macron
Ŏ   &#334; &#x14E; Capital O-breve
ŏ   &#335; &#x14F; Lowercase O-breve
Ø &Oslash; &#216; &#xD8; Capital O-slash
ø &oslash; &#248; &#xF8; Lowercase O-slash
Ő   &#336; &#x150; Capital O-double acute
ő   &#337; &#x151; Lowercase O-double acute
Ǿ   &#510; &#x1FE; Capital O-acute slash
ǿ   &#511; &#x1FF; Lowercase O-acute slash
Π&OElig; &#338; &#x152; Capital OE Ligature
œ &oelig; &#339; &#x153; Lowercase OE Ligature
P P &#80; &#x50; Capital P
p p &#112; &#x70; Lowercase P
  &#7766; &#x1E56; Capital P-dot
  &#7767; &#x1E57; Lowercase P-dot
Q Q &#81; &#x51; Capital Q
q q &#113; &#x71; Lowercase Q
R R &#82; &#x52; Capital R
r r &#114; &#x72; Lowercase R
Ŕ   &#340; &#x154; Capital R-acute
ŕ   &#341; &#x155; Lowercase R-acute
Ŗ   &#342; &#x156; Capital R-cedilla
ŗ   &#343; &#x157; Lowercase R-cedilla
Ř   &#344; &#x158; Capital R-hachek
ř   &#345; &#x159; Lowercase R-hachek
ɼ   &#636; &#x27C; Lowercase R-Long leg
S S &#83; &#x53; Capital S
s s &#115; &#x73; Lowercase S
Ś   &#346; &#x15A; Capital S-acute
ś   &#347; &#x15B; Lowercase S-acute
Ş   &#350; &#x15E; Capital S-cedilla
ş   &#351; &#x15F; Lowercase S-cedilla
Š   &#352; &#x160; Capital S-hachek
š   &#353; &#x161; Lowercase S-hachek
Ŝ   &#348; &#x15C; Capital S-circumflex
ŝ   &#349; &#x15D; Lowercase S-circumflex
  &#7776; &#x1E60; Capital S-dot
  &#7777; &#x1E61; Lowercase S-dot
ſ   &#383; &#x17F; Lowercase S-long
ß &szlig; &#223; &#xDF; Lowercase SZ Ligature
T T &#84; &#x54; Capital T
t t &#116; &#x74; Lowercase T
Ţ   &#354; &#x162; Capital T-cedilla
ţ   &#355; &#x163; Lowercase T-cedilla
Ť   &#356; &#x164; Capital T-hachek
ť   &#357; &#x165; Lowercase T-hachek
  &#7786; &#x1E6A; Capital T-dot
  &#7787; &#x1E6B; Lowercase T-dot
Ŧ   &#358; &#x166; Capital T-stroke
ŧ   &#359; &#x167; Lowercase T-stroke
Þ &THORN; &#222; &#xDE; Capital Thorn
þ &thorn; &#254; &#xFE; Lowercase Thorn
U U &#85; &#x55; Capital U
u u &#117; &#x75; Lowercase U
Ù &Ugrave; &#217; &#xD9; Capital U-grave
ù &ugrave; &#249; &#xF9; Lowercase U-grave
Ú &Uacute; &#218; &#xDA; Capital U-acute
ú &uacute; &#250; &#xFA; Lowercase U-acute
Û &Ucirc; &#219; &#xDB; Capital U-circumflex
û &ucirc; &#251; &#xFB; Lowercase U-circumflex
Ũ   &#360; &#x168; Capital U-tilde
ũ   &#361; &#x169; Lowercase U-tilde
Ü &Uuml; &#220; &#xDC; Capital U-umlaut
ü &uuml; &#252; &#xFC; Lowercase U-umlaut
Ů   &#366; &#x16E; Capital U-ring
ů   &#367; &#x16F; Lowercase U-ring
Ū   &#362; &#x16A; Capital U-macron
ū   &#363; &#x16B; Lowercase U-macron
Ŭ   &#364; &#x16C; Capital U-breve
ŭ   &#365; &#x16D; Lowercase U-breve
Ų   &#370; &#x172; Capital U-ogonek
ų   &#371; &#x173; Lowercase U-ogonek
Ű   &#368; &#x170; Capital U-double acute
ű   &#369; &#x171; Lowercase U-double acute
V V &#86; &#x56; Capital V
v v &#118; &#x76; Lowercase V
W W &#87; &#x57; Capital W
w w &#119; &#x77; Lowercase W
  &#7808; &#x1E80; Capital W-grave
  &#7809; &#x1E81; Lowercase W-grave
  &#7810; &#x1E82; Capital W-acute
  &#7811; &#x1E83; Lowercase W-acute
Ŵ   &#372; &#x174; Capital W-circumflex
ŵ   &#373; &#x175; Lowercase W-circumflex
  &#7812; &#x1E84; Capital W-umlaut
  &#7813; &#x1E85; Lowercase W-umlaut
X X &#88; &#x58; Capital X
x x &#120; &#x78; Lowercase X
Y Y &#89; &#x59; Capital Y
y y &#121; &#x79; Lowercase Y
  &#7922; &#x1EF2; Capital Y-grave
  &#7923; &#x1EF3; Lowercase Y-grave
Ý &Yacute; &#221; &#xDD; Capital Y-acute
ý &yacute; &#253; &#xFD; Lowercase Y-acute
Ŷ   &#374; &#x176; Capital Y-circumflex
ŷ   &#375; &#x177; Lowercase Y-circumflex
Ÿ &Yuml; &#159; &#x9F; Capital Y-umlaut
ÿ &yuml; &#255; &#xFF; Lowercase Y-umlaut
Z Z &#90; &#x5A; Capital Z
z z &#122; &#x7A; Lowercase Z
Ź   &#377; &#x179; Capital Z-acute
ź   &#378; &#x17A; Lowercase Z-acute
Ž   &#381; &#x17D; Capital Z-hachek
ž   &#382; &#x17E; Lowercase Z-hachek
Ż   &#379; &#x17B; Capital Z-dot
ż   &#380; &#x17C; Lowercase Z-dot

 

How to get picture next to search results in Google 

Categories: HTML

On article page

<meta name="Author" content="Ken Van Gilbergen" />
<a rel=”author” href=”https://ken.be/wie-is-ken-van-gilbergen”>Ken Van Gilbergen</a>
 

On author page

<a rel="me" href="https://plus.google.com/103529818965767589982">Ken Van Gilbergen</a>
<a rel="me" href="https://ict.ken.be">ict.ken.be</a> 
(all author pages should link back to each other)
 

Testing: http://www.google.com/webmasters/tools/richsnippets