Best Practices for Web Maps - Versionsgeschichte

Stefan: /* Metadata for Social Media */

2018-11-04T16:48:36Z

Metadata for Social Media

← Nächstältere Version		Version vom 4. November 2018, 16:48 Uhr
Zeile 85:		Zeile 85:

	* Generic(?):		* Generic(?):
	<pre><meta content=" /images/~~bild~~.png" itemprop="image"> </pre>		<pre><meta content="/images/twitter-share-image.png" itemprop="image"> </pre>

	Notes:		Notes:

Stefan: /* HTML and CSS */

2018-11-04T16:47:47Z

HTML and CSS

← Nächstältere Version		Version vom 4. November 2018, 16:47 Uhr
Zeile 70:		Zeile 70:
	The following examples add site specific metadata for various social media pages. The images should be high resolution screenshots of the current page, they will be displayed under posts where your page is mentioned.		The following examples add site specific metadata for various social media pages. The images should be high resolution screenshots of the current page, they will be displayed under posts where your page is mentioned.

	* Open Graph protocol (Facebook etc.)		* Open Graph protocol (Facebook etc.):
	<pre><meta property="og:image" content="http://mypage.com/images/facebook_share.png"/>		<pre><meta property="og:image" content="http://mypage.com/images/facebook_share.png"/>
	<meta property="og:title" content="Do stuff with My App"/>		<meta property="og:title" content="Do stuff with My App"/>
Zeile 77:		Zeile 77:
	<meta property="og:type" content="website"/></pre>		<meta property="og:type" content="website"/></pre>

	* Twitter Card		* Twitter Card:
	<pre><meta name="twitter:card" content="summary_large_image"/>		<pre><meta name="twitter:card" content="summary_large_image"/>
	<meta name="twitter:title" content="Do stuff with My App"/>		<meta name="twitter:title" content="Do stuff with My App"/>
Zeile 83:		Zeile 83:
	<meta name="twitter:image" content="http://mypage.com/images/twitter-share-image.png"/>		<meta name="twitter:image" content="http://mypage.com/images/twitter-share-image.png"/>
	<meta name="twitter:creator" content="@MyTwitterHandle"/> </pre>		<meta name="twitter:creator" content="@MyTwitterHandle"/> </pre>

			* Generic(?):
			<pre><meta content=" /images/bild.png" itemprop="image"> </pre>

	Notes:		Notes:

Stefan: /* Metadata for Social Media */

2018-07-25T13:32:41Z

Metadata for Social Media

← Nächstältere Version		Version vom 25. Juli 2018, 13:32 Uhr
Zeile 84:		Zeile 84:
	<meta name="twitter:creator" content="@MyTwitterHandle"/> </pre>		<meta name="twitter:creator" content="@MyTwitterHandle"/> </pre>

	Example: https://openmaptiles.org/		Notes:
			* Example: https://openmaptiles.org/
	Note that "twitter:title" can be ommitted if "og:title" exists.		* Test https://cards-dev.twitter.com/validator
			* Note that "twitter:title" can be ommitted if "og:title" exists.

	=== Layout ===		=== Layout ===

	* Don’t use float and fixed pixel numbers for the layout. Most layout problems (including responsive design) can be solved using flexbox. See http://www.w3.org/TR/css-flexbox-1/ for more information.		* Don’t use float and fixed pixel numbers for the layout. Most layout problems (including responsive design) can be solved using flexbox. See http://www.w3.org/TR/css-flexbox-1/ for more information.

Stefan: /* Metadata for Social Media */

2018-07-25T09:45:24Z

Metadata for Social Media

← Nächstältere Version		Version vom 25. Juli 2018, 09:45 Uhr
Zeile 78:		Zeile 78:

	* Twitter Card		* Twitter Card
	<pre><meta name="twitter:card" content="summary_large_image">		<pre><meta name="twitter:card" content="summary_large_image"/>
	<meta name="twitter:title" content="Do stuff with My App">		<meta name="twitter:title" content="Do stuff with My App"/>
	<meta name="twitter:description" content="You can do lots of fun things with My App">		<meta name="twitter:description" content="You can do lots of fun things with My App"/>
	<meta name="twitter:image" content="http://mypage.com/images/twitter-share-image.png">		<meta name="twitter:image" content="http://mypage.com/images/twitter-share-image.png"/>
	<meta name="twitter:creator" content="@MyTwitterHandle"></pre>		<meta name="twitter:creator" content="@MyTwitterHandle"/> </pre>

	Example: https://openmaptiles.org/		Example: https://openmaptiles.org/

Stefan: /* Metadata for Social Media */

2018-05-10T11:35:04Z

Metadata for Social Media

← Nächstältere Version		Version vom 10. Mai 2018, 11:35 Uhr
Zeile 84:		Zeile 84:
	<meta name="twitter:creator" content="@MyTwitterHandle"></pre>		<meta name="twitter:creator" content="@MyTwitterHandle"></pre>

	Example: ~~http~~://~~osm2vectortiles~~.org/		Example: https://openmaptiles.org/

	Note that "twitter:title" can be ommitted if "og:title" exists.		Note that "twitter:title" can be ommitted if "og:title" exists.

Stefan: /* Metadata for Social Media */

2017-03-08T16:06:05Z

Metadata for Social Media

← Nächstältere Version		Version vom 8. März 2017, 16:06 Uhr
Zeile 83:		Zeile 83:
	<meta name="twitter:image" content="http://mypage.com/images/twitter-share-image.png">		<meta name="twitter:image" content="http://mypage.com/images/twitter-share-image.png">
	<meta name="twitter:creator" content="@MyTwitterHandle"></pre>		<meta name="twitter:creator" content="@MyTwitterHandle"></pre>

	Example: http://osm2vectortiles.org/		Example: http://osm2vectortiles.org/

			Note that "twitter:title" can be ommitted if "og:title" exists.

	=== Layout ===		=== Layout ===

	* Don’t use float and fixed pixel numbers for the layout. Most layout problems (including responsive design) can be solved using flexbox. See http://www.w3.org/TR/css-flexbox-1/ for more information.		* Don’t use float and fixed pixel numbers for the layout. Most layout problems (including responsive design) can be solved using flexbox. See http://www.w3.org/TR/css-flexbox-1/ for more information.

Das-g: New section /* Layout */ as this note is not about "Metadata for Social Media"

2017-03-03T15:14:10Z

New section Layout: as this note is not about "Metadata for Social Media"

← Nächstältere Version		Version vom 3. März 2017, 15:14 Uhr
Zeile 84:		Zeile 84:
	<meta name="twitter:creator" content="@MyTwitterHandle"></pre>		<meta name="twitter:creator" content="@MyTwitterHandle"></pre>
	Example: http://osm2vectortiles.org/		Example: http://osm2vectortiles.org/

			=== Layout ===

	* Don’t use float and fixed pixel numbers for the layout. Most layout problems (including responsive design) can be solved using flexbox. See http://www.w3.org/TR/css-flexbox-1/ for more information.		* Don’t use float and fixed pixel numbers for the layout. Most layout problems (including responsive design) can be solved using flexbox. See http://www.w3.org/TR/css-flexbox-1/ for more information.

Das-g: /* Metadata for Social Media */ fix HTML syntax (can't use typographic quotes for attribute values)

2017-03-03T12:50:45Z

Metadata for Social Media: fix HTML syntax (can't use typographic quotes for attribute values)

← Nächstältere Version		Version vom 3. März 2017, 12:50 Uhr
Zeile 82:		Zeile 82:
	<meta name="twitter:description" content="You can do lots of fun things with My App">		<meta name="twitter:description" content="You can do lots of fun things with My App">
	<meta name="twitter:image" content="http://mypage.com/images/twitter-share-image.png">		<meta name="twitter:image" content="http://mypage.com/images/twitter-share-image.png">
	<meta name=~~”twitter~~:creator" content="@MyTwitterHandle"></pre>		<meta name="twitter:creator" content="@MyTwitterHandle"></pre>
	Example: http://osm2vectortiles.org/		Example: http://osm2vectortiles.org/

	* Don’t use float and fixed pixel numbers for the layout. Most layout problems (including responsive design) can be solved using flexbox. See http://www.w3.org/TR/css-flexbox-1/ for more information.		* Don’t use float and fixed pixel numbers for the layout. Most layout problems (including responsive design) can be solved using flexbox. See http://www.w3.org/TR/css-flexbox-1/ for more information.

Stefan am 20. November 2016 um 16:04 Uhr

2016-11-20T16:04:38Z

← Nächstältere Version		Version vom 20. November 2016, 16:04 Uhr
Zeile 42:		Zeile 42:
	== HTML and CSS ==		== HTML and CSS ==

	Header elements:		=== Header elements ===
	* Favicon (png can have any name), icon that will be displayed in the browser tabs: an favicon.ico in root is enough. Else use <pre><link rel="icon" type="image/png" href="favicon.png"/></pre>.		* Favicon (png can have any name), icon that will be displayed in the browser tabs: an favicon.ico in root is enough. Else use <pre><link rel="icon" type="image/png" href="favicon.png"/></pre>.
	* Sometimes a current IE version is installed, but system settings force it to use legacy document modes. Add following line to your head to make IE use the most current available mode:		* Sometimes a current IE version is installed, but system settings force it to use legacy document modes. Add following line to your head to make IE use the most current available mode:
Zeile 66:		Zeile 66:


	Metadata for ~~social media pages:~~		=== Metadata for Social Media ===

	The following examples add site specific metadata for various social media pages. The images should be high resolution screenshots of the current page, they will be displayed under posts where your page is mentioned.		The following examples add site specific metadata for various social media pages. The images should be high resolution screenshots of the current page, they will be displayed under posts where your page is mentioned.

Stefan am 20. November 2016 um 16:03 Uhr

2016-11-20T16:03:23Z

← Nächstältere Version		Version vom 20. November 2016, 16:03 Uhr
Zeile 69:		Zeile 69:

	The following examples add site specific metadata for various social media pages. The images should be high resolution screenshots of the current page, they will be displayed under posts where your page is mentioned.		The following examples add site specific metadata for various social media pages. The images should be high resolution screenshots of the current page, they will be displayed under posts where your page is mentioned.

	* Open Graph protocol (Facebook etc.)		* Open Graph protocol (Facebook etc.)
	<pre><meta property="og:image" content="http://mypage.com/images/facebook_share.png"/>		<pre><meta property="og:image" content="http://mypage.com/images/facebook_share.png"/>
Zeile 75:		Zeile 76:
	<meta property="og:site_name" content="My App"/>		<meta property="og:site_name" content="My App"/>
	<meta property="og:type" content="website"/></pre>		<meta property="og:type" content="website"/></pre>
	* Twitter
			* Twitter Card
	<pre><meta name="twitter:card" content="summary_large_image">		<pre><meta name="twitter:card" content="summary_large_image">
	<meta name="twitter:title" content="Do stuff with My App">		<meta name="twitter:title" content="Do stuff with My App">