Difference between revisions of "P5js-App-Icon"

From Digipool-Wiki
Jump to: navigation, search
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
Deine Datei muss eine PNG Datei mit transparenten Hintergrund sein mit einer Auflösung von 1024 x 1024 Pixel. Das Bildmotiv sollte aber auch bei einer Auflösung von 50 x 50 px noch gut zu erkennen sein.
+
Deine Datei muss eine PNG Datei mit transparentem Hintergrund sein, mit einer Auflösung von 1024 x 1024 Pixel. Das Bildmotiv sollte aber auch bei einer Auflösung von 50 x 50 px noch gut zu erkennen sein.
  
−
# Wandele die Icon-Datei mit einem Online-Tool in die Icon Formate um - [https://makeappicon.com/ www.makeappicon.com]
+
# Wandele die Icon-Datei mit einem Online-Tool in die Icon-Formate um - [https://makeappicon.com/ www.makeappicon.com]
 
# Kopiere den ios Ordner auf deinem Webspace zu der skatch und index Datei
 
# Kopiere den ios Ordner auf deinem Webspace zu der skatch und index Datei
 
# Füge den mobile-web-app-capable code in die Datei index.html ein - siehe unten!
 
# Füge den mobile-web-app-capable code in die Datei index.html ein - siehe unten!
Line 8: Line 8:
 
     <meta name="mobile-web-app-capable" content="yes">
 
     <meta name="mobile-web-app-capable" content="yes">
 
     <meta name="apple-mobile-web-app-capable" content="yes">  
 
     <meta name="apple-mobile-web-app-capable" content="yes">  
−
       <link rel="apple-touch-icon" href="ios/Icon-App-60x60@2x.png" />
+
       <link rel="apple-touch-icon" href="AppIcon/Icon-App-60x60@2x.png" />
−
       <link rel="apple-touch-icon" sizes="180x180" href="ios/Icon-App-60x60@3x.png" />
+
       <link rel="apple-touch-icon" sizes="180x180" href="AppIcon/Icon-App-60x60@3x.png" />
−
       <link rel="apple-touch-icon" sizes="76x76" href="ios/Icon-App-76x76.png" />
+
       <link rel="apple-touch-icon" sizes="76x76" href="AppIcon/Icon-App-76x76@1x.png" />
−
       <link rel="apple-touch-icon" sizes="152x152" href="ios/Icon-App-76x76@2x.png" />
+
       <link rel="apple-touch-icon" sizes="152x152" href="AppIcon/Icon-App-76x76@2x.png" />
−
       <link rel="apple-touch-icon" sizes="58x58" href="ios/Icon-App-29x29@2x.png" />
+
       <link rel="apple-touch-icon" sizes="58x58" href="AppIcon/Icon-App-29x29@2x.png" />
 
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
</pre>
 
</pre>
  
 
<br>
 
<br>
 +
 +
 +
== Index-HTML-Datei ==
  
 
Beispiel für eine '''index.html''' Datei:  
 
Beispiel für eine '''index.html''' Datei:  
Line 22: Line 25:
 
<pre>
 
<pre>
 
<!DOCTYPE html>
 
<!DOCTYPE html>
−
<html>
+
<html lang="en">
−
  <head>
+
 
−
    <title>Mein-Titel</title>
+
<head>
−
    <meta http-equiv="expires" content="0">
+
  <title>myTitle</title>
−
    <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
+
  <meta http-equiv="expires" content="0">
−
    <style> body {padding: 0; margin: 0;} </style>
+
  <link rel="manifest" href="manifest.json" />
−
    <script src="p5.min.js"></script>
+
  <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
−
    <script src="addons/p5.dom.min.js"></script>
+
  <style>
−
    <script src="addons/p5.sound.min.js"></script>
+
    body {
−
    <script src="sketch.js"></script>
+
      padding: 0;
−
    <meta name="mobile-web-app-capable" content="yes">
+
      margin: 0;
−
    <meta name="apple-mobile-web-app-capable" content="yes">  
+
    }
−
      <link rel="apple-touch-icon" href="ios/Icon-App-60x60@2x.png" />
+
  </style>
−
      <link rel="apple-touch-icon" sizes="180x180" href="ios/Icon-App-60x60@3x.png" />
+
 
−
      <link rel="apple-touch-icon" sizes="76x76" href="ios/Icon-App-76x76.png" />
+
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
−
      <link rel="apple-touch-icon" sizes="152x152" href="ios/Icon-App-76x76@2x.png" />
+
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
−
      <link rel="apple-touch-icon" sizes="58x58" href="ios/Icon-App-29x29@2x.png" />
+
  <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.28.0.js"></script>
−
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
 
−
   </head>
+
  <meta name="mobile-web-app-capable" content="yes">
−
   <body style="background-color:#FAFAFA;">
+
  <meta name="apple-mobile-web-app-capable" content="yes">
−
   </body>
+
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
−
</html>  
+
 
 +
<link rel="apple-touch-startup-image" href="AppIcon/Icon-App-60x60@3x.png">
 +
  <link rel="apple-touch-icon" href="AppIcon/Icon-App-60x60@2x.png" />
 +
  <link rel="apple-touch-icon" sizes="180x180" href="AppIcon/Icon-App-60x60@3x.png" />
 +
  <link rel="apple-touch-icon" sizes="76x76" href="AppIcon/Icon-App-76x76@1x.png" />
 +
  <link rel="apple-touch-icon" sizes="152x152" href="AppIcon/Icon-App-76x76@2x.png" />
 +
  <link rel="apple-touch-icon" sizes="58x58" href="AppIcon/Icon-App-29x29@2x.png" />
 +
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
 +
 
 +
   <link rel="stylesheet" type="text/css" href="style.css">
 +
   <meta charset="utf-8" />
 +
 
 +
</head>
 +
 
 +
<body>
 +
   <script src="sketch.js"></script>
 +
</body>
 +
 
 +
</html>
 +
 
 +
</pre>
 +
 
 +
 
 +
 
 +
== Manifest ==
 +
 
 +
manifest.json
 +
 
 +
<pre>
 +
 
 +
{
 +
  "lang": "en",
 +
  "dir": "ltr",
 +
  "name": "myDoor",
 +
  "short_name": "myDoor",
 +
  "icons": [{
 +
    "src": "AppIcon/Icon-App-60x60@2x.png",
 +
    "sizes": "180x180",
 +
    "type": "image/png"
 +
  }, {
 +
    "src": "AppIcon/Icon-App-76x76@1x.png",
 +
    "sizes": "72x72"
 +
  }, {
 +
    "src": "AppIcon/Icon-App-29x29@2x.png",
 +
    "sizes": "58x58"
 +
  }],
 +
  "scope": "/",
 +
  "id": "superracer",
 +
  "start_url": "https://olafval.de/door_4p8rc5z3u2jt08l4/index.html",
 +
  "display": "minimal-ui",
 +
  "orientation": "portrait",
 +
  "theme_color": "aliceblue",
 +
  "background_color": "red"
 +
}
 +
 
 
</pre>
 
</pre>

Latest revision as of 18:39, 8 January 2023

Deine Datei muss eine PNG Datei mit transparentem Hintergrund sein, mit einer Auflösung von 1024 x 1024 Pixel. Das Bildmotiv sollte aber auch bei einer Auflösung von 50 x 50 px noch gut zu erkennen sein.

  1. Wandele die Icon-Datei mit einem Online-Tool in die Icon-Formate um - www.makeappicon.com
  2. Kopiere den ios Ordner auf deinem Webspace zu der skatch und index Datei
  3. Füge den mobile-web-app-capable code in die Datei index.html ein - siehe unten!
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes"> 
      <link rel="apple-touch-icon" href="AppIcon/Icon-App-60x60@2x.png" />
      <link rel="apple-touch-icon" sizes="180x180" href="AppIcon/Icon-App-60x60@3x.png" />
      <link rel="apple-touch-icon" sizes="76x76" href="AppIcon/Icon-App-76x76@1x.png" />
      <link rel="apple-touch-icon" sizes="152x152" href="AppIcon/Icon-App-76x76@2x.png" />
      <link rel="apple-touch-icon" sizes="58x58" href="AppIcon/Icon-App-29x29@2x.png" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black">



Index-HTML-Datei

Beispiel für eine index.html Datei: 

<!DOCTYPE html>
<html lang="en">

<head>
  <title>myTitle</title>
  <meta http-equiv="expires" content="0">
  <link rel="manifest" href="manifest.json" />
  <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
  </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
  <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.28.0.js"></script>

  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">

<link rel="apple-touch-startup-image" href="AppIcon/Icon-App-60x60@3x.png">
  <link rel="apple-touch-icon" href="AppIcon/Icon-App-60x60@2x.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="AppIcon/Icon-App-60x60@3x.png" />
  <link rel="apple-touch-icon" sizes="76x76" href="AppIcon/Icon-App-76x76@1x.png" />
  <link rel="apple-touch-icon" sizes="152x152" href="AppIcon/Icon-App-76x76@2x.png" />
  <link rel="apple-touch-icon" sizes="58x58" href="AppIcon/Icon-App-29x29@2x.png" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8" />

</head>

<body>
  <script src="sketch.js"></script>
</body>

</html>


Manifest

manifest.json 


{
  "lang": "en",
  "dir": "ltr",
  "name": "myDoor",
  "short_name": "myDoor",
  "icons": [{
    "src": "AppIcon/Icon-App-60x60@2x.png",
    "sizes": "180x180",
    "type": "image/png"
  }, {
    "src": "AppIcon/Icon-App-76x76@1x.png",
    "sizes": "72x72"
  }, {
    "src": "AppIcon/Icon-App-29x29@2x.png",
    "sizes": "58x58"
  }],
  "scope": "/",
  "id": "superracer",
  "start_url": "https://olafval.de/door_4p8rc5z3u2jt08l4/index.html",
  "display": "minimal-ui",
  "orientation": "portrait",
  "theme_color": "aliceblue",
  "background_color": "red"
}
Retrieved from "http://www.digipool.info/m/index.php?title=P5js-App-Icon&oldid=94002"