Minecraft (22.11.2012), Open Thought (21.04.2015)
-
22.11.2012, 15:00 #1
- Registriert seit
- 16.11.2012
- Beiträge
- 8
Thanked 3 Times in 2 PostsMobile Webseiten - Der Einstieg
Hallo liebe Community,
mobile Webseiten werden immer bekannter, die Zahl der mobilen Nutzer im Web steigt stetig.
Aus diesem Grund habe ich mich damit beschäftigt, wie man diese entwickelt.
In diesem Tutorial wird es allerdings nur um die Grundlagen gehen, ich werde weder auf APIs noch auf andere Hilfsmittel eingehen, das wird in einem weiteren Tutorial folgen.
HTML5- und CSS3-Kenntnisse sollten vorhanden sein.
Zuerst einmal der Quelltext der Datei index.html
Code:<!DOCTYPE html> <html lang="de"> <head> <title>#1 Mobile</title> <meta charset="UTF-8" /> <link rel="stylesheet" href="style.css" /> <meta name="viewport" content="width=device-width" /> <link rel="apple-touch-icon" sizes="114x114" href="img/apple.jpg" /> </head> <body> <!-- Kopfbereich --> <header> <h1>#1 Mobile</h1> <nav></nav> </header> <!-- Content --> <section> <p>#1 Mobile ist mein erster Versuch eine mobile Webseite zu entwicklen. Dabei benutze ich ausschließlich HTML5 und CSS3.<br> Außerdem habe ich ein apple-touch-icon eingebunden, sodass man diese Webseite auf dem Homescreen des iPhones abgelegen kann.<br> </p> </section> <!-- Fußbereich --> <footer> © <a href="index.html">#1 Mobile</a> 2012 </footer> </body> </html>
Code:<meta name="viewport" content="width=device-width" />
Code:<link rel="apple-touch-icon" sizes="114x114" href="img/apple.jpg" />
Der Rest sollte bekannt sein.
Kommen wir zur CSS-Datei style.css:
Code:html,body{ margin:0; padding:0; } body{ font-family:Helvetica,Arial; background:#E8E8E8; } header,footer{ width:100%; background:black; color:white; padding:2px 0px 2px 10px; opacity: 0.7; } section{ padding:2px 10px 2px 10px; text-align:justify; font-size:14px; } footer{ font-size:12px; text-align:center; } h1{ padding:0; margin:0; } a{ color:white; }
Code:margin:0; padding:0;
Der Rest sollte auch bekannt sein. Diese Datei sollte man allerdings noch verkleinern, um zu erreichen, dass bei einem Aufruf der Seite weniger Quellcode geladen werden muss, d.h. höhere Geschwindigkeit,
Verkleinert:
Code:html,body{margin:0;padding:0;}body{font-family:Helvetica,Arial;background:#E8E8E8;}header,footer{width:100%;background:black;color:white;padding:2px 0px 2px 10px;opacity: 0.7;}section{padding:2px 10px 2px 10px;text-align:justify;font-size:14px;}footer{font-size:12px;text-align:center;}h1{padding:0;margin:0;}a{color:white;}
Solltet ihr noch Fragen haben, könnt ihr euch gerne hier im Thread oder per PN bei mir melden
-
The Following 2 Users Say Thank You to Entrafiz For This Useful Post:
-
22.11.2012, 16:14 #2
- Registriert seit
- 25.11.2011
- Beiträge
- 275
- Blog Entries
- 13
Thanked 50 Times in 34 PostsAW: Mobile Webseiten - Der Einstieg
Sehr schönes Tutorial!
Passt mir gerade auch ziemlich gut weil ich mich seit einigen Tagen mit Webentwicklung beschäftige.
Ich hätte aber eine Frage zu diesem Apple Touch Icon, also das hier:
Code:<link rel="apple-touch-icon" sizes="114x114" href="img/apple.jpg" />
-
22.11.2012, 16:18 #3
- Registriert seit
- 16.11.2012
- Beiträge
- 8
Thanked 3 Times in 2 PostsAW: Mobile Webseiten - Der Einstieg
Das kann ich dir leider nicht sagen, kann man bei Android Webseiten auf dem Homescreen ablegen? Ich habe das bis jetzt nur für's iPhone gesehen, tut mir leid.
-
22.11.2012, 16:23 #4
- Registriert seit
- 25.11.2011
- Beiträge
- 275
- Blog Entries
- 13
Thanked 50 Times in 34 PostsAW: Mobile Webseiten - Der Einstieg
Klar geht das: Android: Webseiten auf dem Startbildschirm ablegen | schieb.de
Mir ging es darum dass ich auch so ein Icon für Android festlegen kann.
Hab auch schon ein bisschen in Google danach gesucht aber nichts gefunden.
-
22.11.2012, 17:30 #5
- Registriert seit
- 17.09.2012
- Beiträge
- 1.865
Thanked 384 Times in 258 PostsAW: Mobile Webseiten - Der Einstieg
Geiles tut , hoffe ich Kann bald mehr von dir lessen
Gerne auch mit PHP & Datenbank würde mir gut passen
LG chriss
Ps: 10/10
-
21.10.2014, 17:17 #6
- Registriert seit
- 12.10.2014
- Beiträge
- 23
Thanked 0 Times in 0 PostsAW: Mobile Webseiten - Der Einstieg
Hey, wenn ich mich mit einer mobilen Webseite beschäftige, arbeite ich immer mit width oder height in % und nicht in px da es immer an den gerade benutzten Bildschirm zugerechnet wird
Ähnliche Themen
-
Suche: Programm zur Erstellung von Webseiten
Von Accountuser im Forum WebmasterAntworten: 13Letzter Beitrag: 23.01.2014, 14:46 -
[S] User zum GameHacking Einstieg
Von rVs14 im Forum HochsprachenAntworten: 8Letzter Beitrag: 26.06.2012, 13:15 -
[S] Webseiten zum Bücherkauf
Von Reactin im Forum OffTopicAntworten: 2Letzter Beitrag: 06.06.2012, 20:58 -
[GFX] Webseiten - Banner
Von St0nY im Forum ShowroomAntworten: 7Letzter Beitrag: 25.04.2012, 07:12 -
Minecraft Einstieg für Newbie?
Von Essah im Forum MinecraftAntworten: 3Letzter Beitrag: 13.03.2012, 18:40
Diese Seite nutzt Cookies, um das Nutzererlebnis zu verbessern. Klicken Sie hier, um das Cookie-Tracking zu deaktivieren.