This commit is contained in:
Salvador de la Puente González 2015-12-29 16:10:01 +01:00
Родитель 267f352b4c
Коммит 97c467c3dd
32 изменённых файлов: 342 добавлений и 5 удалений

Двоичные данные
android-icon-144x144.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 7.2 KiB

Двоичные данные
android-icon-192x192.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 8.8 KiB

Двоичные данные
android-icon-36x36.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 2.1 KiB

Двоичные данные
android-icon-48x48.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 2.3 KiB

Двоичные данные
android-icon-72x72.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 3.2 KiB

Двоичные данные
android-icon-96x96.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 4.3 KiB

Двоичные данные
apple-icon-114x114.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 5.4 KiB

Двоичные данные
apple-icon-120x120.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 5.8 KiB

Двоичные данные
apple-icon-144x144.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 7.2 KiB

Двоичные данные
apple-icon-152x152.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 7.8 KiB

Двоичные данные
apple-icon-180x180.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 9.4 KiB

Двоичные данные
apple-icon-57x57.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 2.6 KiB

Двоичные данные
apple-icon-60x60.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 2.7 KiB

Двоичные данные
apple-icon-72x72.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 3.2 KiB

Двоичные данные
apple-icon-76x76.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 3.5 KiB

Двоичные данные
apple-icon-precomposed.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 9.3 KiB

Двоичные данные
apple-icon.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 9.3 KiB

2
browserconfig.xml Normal file
Просмотреть файл

@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

Просмотреть файл

@ -30,7 +30,7 @@ header .wrapper {
}
header .titles {
background-image: url('../icons/progressive.svg');
background-image: url('../icons/progressive-hq.svg');
background-repeat: no-repeat;
background-position: left center;
background-size: 120px;
@ -50,7 +50,6 @@ header h1 {
header h2 {
color: #d1d2d3;
font-size: 1.7rem;
text-align: right;
}
header strong {
@ -79,8 +78,8 @@ input {
padding: 0.5rem 0.5rem 0.5rem 2rem;
border: 0;
border-radius: 3px;
max-width: 1020px;
width: 80ex;
max-width: 900px;
width: 70ex;
font-size: 1.1rem;
background-image: url('../icons/search.svg');
background-repeat: no-repeat;

Двоичные данные
favicon-16x16.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.3 KiB

Двоичные данные
favicon-32x32.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.9 KiB

Двоичные данные
favicon-96x96.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 4.3 KiB

Двоичные данные
favicon.ico Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 1.1 KiB

Двоичные данные
favicon.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 8.8 KiB

Просмотреть файл

@ -0,0 +1,128 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href='https://fonts.googleapis.com/css?family=Fira+Sans:400,500,300,300italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" />
<title>Progressive Web Apps HQ</title>
<meta name="description" content="Discover Progressive Web Applications, the new way for making most out of your web sites. Check if the Web is the ultimate platform for you." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<header class="blueprint">
<div class="wrapper">
<section class="titles">
<h1>Progressive Web Apps <strong>HQ</strong></h1>
<h2>The <strong>Web</strong> is the platform</h2>
</section>
<nav>
<ul>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
<form>
<input type="search" placeholder="Search HQ" />
</form>
</header>
<section class="main">
<div class="wrapper">
<h2>Features</h2>
<p>Progressive Web Applications are like good old web sites but <strong>better</strong>. In a modern browser they exhibit <strong>super&ndash;powers</strong> and become&hellip;</p>
<ul>
<li>
<a href="#" target="_blank">
<div class="icon network-independent"></div>
<h3 id="network-independent">Network&nbsp;Independent</h3>
<p>Work offline or on low quality networks.</p>
</a>
</li>
<li>
<div class="icon re-engagement"></div>
<h3 id="re-engageable">Re-engageable</h3>
<p>Make engagement easy by drawing user attention.</p>
</li>
<li>
<div class="icon discoverable"></div>
<h3 id="discoverable">Discoverable</h3>
<p>Are identifiable as <em>applications</em> and search engines can find them.</p>
</li>
<li>
<div class="icon progressive"></div>
<h3 id="progressive">Progressive</h3>
<p>Work for every user, regardless of browser choice.</p>
</li>
<li>
<div class="icon responsive"></div>
<h3 id="responsive">Responsive</h3>
<p>Fit any form factor: desktop, mobile, tablet, or whatever is next.</p>
</li>
<li>
<div class="icon fresh"></div>
<h3 id="fresh">Fresh</h3>
<p>Always up-to-date.</p>
</li>
<li>
<div class="icon safe"></div>
<h3 id="safe">Safe</h3>
<p>Served to prevent snooping and ensure content hasnt been tampered with.</p>
</li>
<li>
<div class="icon installable"></div>
<h3 id="installable">Installable</h3>
<p>Keep user's most useful app on their home screen without the hassle of an app store.</p>
</li>
<li>
<div class="icon linkable"></div>
<h3 id="linkable">Linkable</h3>
<p>Easily share via URL and not require complex installation.</p>
</li>
</ul>
<h2>Technologies</h2>
<p>Progressive Web Applications use the correct set of <strong>technologies</strong> to leverage UX in the Web&hellip;</p>
<ul>
<li>
<h3 id="Service Workers">Service Workers</h3>
<p>Cache network resources and enable <strong>super fast</strong> access to them.</p>
</li>
<li>
<h3 id="Web Application Manifest">Web Application Manifest</h3>
<p>Distribute your applications through the ultimate platform: the Web.</p>
</li>
<li>
<h3 id="Push API">Push API</h3>
<p>Stand your application out and draw the user attention.</p>
</li>
<li>
<h3 id="Add to homescreen">Add to homescreen</h3>
<p>Allow the web application to become a first-class citizen in your device.</p>
</li>
<li>
<h3 id="Background Sync">Background Sync</h3>
<p>Perform tasks on regaining connection.</p>
</li>
<li>
<h3 id="App Shell">App Shell</h3>
<p>Use app shell architecture to reach almost instant first draw.</p>
</li>
<li>
<h3 id="Media Query">Media Query</h3>
<p>Adapt your design to bring the best user experience.</p>
</li>
</ul>
</div>
</section>
<footer>
<div class="wrapper">
<p class="license">
Content available under a <a href="http://mozilla.org/en-US/foundation/licensing/website-content/" target="_blank">Creative Commons license</a>.
</p>
<ul>
<li><a id="link-repo" href="https://github.com/mozilla/progressive-apps-hq/">View source</a></li>
<li><a id="link-issue" href="https://github.com/mozilla/progressive-apps-hq/issues/new">Submit feedback</a></li>
</ul>
</div>
</footer>
</body>
</html>

149
icons/progressive-hq.svg Normal file
Просмотреть файл

@ -0,0 +1,149 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="29.77286mm"
height="15.556004mm"
viewBox="0 0 105.49439 55.119698"
id="svg154683"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="progressive-hq.svg"
inkscape:export-filename="/Users/salva/workspace/progressive-apps-hq/favicon.png"
inkscape:export-xdpi="218.39999"
inkscape:export-ydpi="218.39999">
<defs
id="defs154685">
<inkscape:perspective
sodipodi:type="inkscape:persp3d"
inkscape:vp_x="0 : 27.559849 : 1"
inkscape:vp_y="0 : 1000 : 0"
inkscape:vp_z="105.49439 : 27.559849 : 1"
inkscape:persp3d-origin="52.747195 : 18.373233 : 1"
id="perspective178450" />
<symbol
id="symbol167118">
<title
id="title167120">Chevron Right</title>
<path
d="M 20,12 17.17,14.83 26.34,24 17.17,33.17 20,36 32,24 Z"
style="stroke:none"
id="path167122"
inkscape:connector-curvature="0" />
</symbol>
<symbol
id="symbol167112">
<title
id="title167114">Chevron Left</title>
<path
d="M 30.83,14.83 28,12 16,24 28,36 30.83,33.17 21.66,24 Z"
style="stroke:none"
id="path167116"
inkscape:connector-curvature="0" />
</symbol>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.8"
inkscape:cx="-12.592924"
inkscape:cy="59.533682"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:window-width="2560"
inkscape:window-height="1391"
inkscape:window-x="1280"
inkscape:window-y="1"
inkscape:window-maximized="1"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0">
<sodipodi:guide
position="27.363835,41.539296"
orientation="1,0"
id="guide178241" />
<sodipodi:guide
position="0.042405176,27.610726"
orientation="0.70710671,-0.70710685"
id="guide178323" />
<sodipodi:guide
position="6.7857143,-20.357147"
orientation="-0.70710677,0.70710679"
id="guide178325" />
<sodipodi:guide
position="67.720983,33.503586"
orientation="1,0"
id="guide178327" />
<sodipodi:guide
position="-10.714287,-23.571432"
orientation="0.70710708,-0.70710648"
id="guide178329" />
<sodipodi:guide
position="94.863843,27.610726"
orientation="-0.70710715,0.70710641"
id="guide178331" />
</sodipodi:namedview>
<metadata
id="metadata154688">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Capa 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-54.42188,-423.96038)">
<text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:45px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="111.42857"
y="460.93362"
id="text172931"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan172933"
x="111.42857"
y="460.93362"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45px;line-height:125%;font-family:Raanana;-inkscape-font-specification:'Raanana, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start" /></text>
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#f0f0f0;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.00000006;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 122.06053,424.79492 -40.3807,39.95117 -13.150533,-13.20117 13.150533,-13.33036 0,-14.25418 -27.25795,27.47126 27.25795,27.46289 40.3807,-40.08594 13.06056,12.73633 -13.06056,13.37277 0,14.16239 27.21288,-27.64844 z"
id="path178245"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccccccc" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#969696;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.00000012;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 126.42047,424.37765 -40.380691,39.95117 0,14.14844 40.380691,-40.08594 13.06056,12.73633 -13.06056,13.37277 0,14.16239 27.21289,-27.64844 z"
id="path178245-6"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#333333;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.00000012;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 130.42047,424.37765 0,14.01367 13.06056,12.73633 -13.06056,13.37277 0,14.16239 27.2129,-27.64844 z"
id="path178245-6-5"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccc" />
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 8.1 KiB

Просмотреть файл

@ -7,6 +7,24 @@
<title>Progressive Web Apps HQ</title>
<meta name="description" content="Discover Progressive Web Applications, the new way for making most out of your web sites. Check if the Web is the ultimate platform for you." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body>
@ -32,7 +50,7 @@
<p>Progressive Web Applications are like good old web sites but <strong>better</strong>. In a modern browser they exhibit <strong>super&ndash;powers</strong> and become&hellip;</p>
<ul>
<li>
<a href="#" target="_blank">
<a href="features/network-independant.html">
<div class="icon network-independent"></div>
<h3 id="network-independent">Network&nbsp;Independent</h3>
<p>Work offline or on low quality networks.</p>

41
manifest.json Normal file
Просмотреть файл

@ -0,0 +1,41 @@
{
"name": "App",
"icons": [
{
"src": "\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}

Двоичные данные
ms-icon-144x144.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 7.2 KiB

Двоичные данные
ms-icon-150x150.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 7.7 KiB

Двоичные данные
ms-icon-310x310.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 21 KiB

Двоичные данные
ms-icon-70x70.png Normal file

Двоичный файл не отображается.

После

Ширина:  |  Высота:  |  Размер: 3.2 KiB