Annonce

Vous pouvez parler de jailbreak sur ce forum. En revanche, il est interdit d'évoquer tout système permettant de pirater des applications ! Merci de respecter le travail des développeurs.

#1 30-08-2009 13:49:50

iLgend
Membre

[TUTO] Créer un site iPhone et l'héberger

Présentation:

Je vous propose un tutoriel pour créer un site pour iPhone très simplement, vous n'aurez besoin de presque pas de connaissance pour faire un site pour iPhone simple. Après si vous êtes un pro du (x)html, du css, du php ou encore du javascript vous pourrez le personnaliser à 100% mais ici, je vais juste utiliser l'html !

Je remercie iWebKit qui ma inspiré pour la base du site pour iPhone.

Ce qu'il vous faut pour résaliser un site pour iPhone/iPod Touch:
-La base à télécharger ICI
-Un minimum de connaissance en (x)html, je vous conseille le Site du Zéro ou un beau tutoriel de _dark mort_ wink


Menu:

- Présentation
- Explication du «Kit de développement iPhone»
- Comment créer son site pour iPhone ?
- Bout de code pour rendre plus attrayant votre site pour iPhone !
- Modifier le thème de base et mettre une icône pour la webapp !
- Comment mettre son site en ligne ?
- Annuaire de vos site iPhone

Dernière modification par iLgend (03-09-2009 20:16:03)


Développeur .NET
                                                       - All Jailbreak -
                    Black iPhone 3GS : 16 GB (4.0) - iPod Touch 1G : 8 GB (3.1)

Hors ligne

#2 30-08-2009 13:55:23

iLgend
Membre

Re : [TUTO] Créer un site iPhone et l'héberger

Explication du «Kit de développement iPhone»:
C'est tout ce que vous avez besoin pour créer votre site pour iPhone, les ressources graphique et la base en html. Maintenant, je vais vous expliquer tous ce que contient le dossier "Kit de développement":

- Home.html
C'est la page sur laquel vous arriverez en allant sur votre site. Elle se termine en .html comme toute les autres pages que nous allons créer.

- Le dossier "images"
Il ne faut pas toucher à ce dossier, il renferme tous les images qui seront utilisées pour créer le design de votre site.

- Les autres pages web en .html
C'est le format de page web que nous allons utilisé pour créer notre site pour iPhone. C'est  le format de base de presque tous les sites sur internet !

- Le dossier "javascript"
Nous ne toucherons pas à ce dossiers.

- Le dossier "thumbs"
C'est ici que réside tous les icônes que vous avez besoin pour votre site pour iPhone. Vous pouvez en rajouter si vous le souhaitez tongue

- Le dossier "css"
Le dossier css contient un fichier css comme son nom l'indique. Le css permet de définir la taille du site, ou se trouve les menus, etc... A ne pas toucher si vous ne connaissez pas le language css !

-Le dossier "pics"
Vous placerez toutes vos images diverses dedans pour avoir plus facile pour la suite wink

-L'image "apple-touch-icon.png"
C'est l'image qui apparaitra quand vous ajouterez un signet de votre site sur votre écrand d'accueil de votre iPod Touch/iPhone.

-Le dossier "DEMO DE SITE"
J'ai créer moi même un site iphone, vous pouvez vous en inspirez pour vous aidez smile

Voilà pour les explications, maintenant on va commencer les pages du site !

Dernière modification par iLgend (30-08-2009 14:41:35)


Développeur .NET
                                                       - All Jailbreak -
                    Black iPhone 3GS : 16 GB (4.0) - iPod Touch 1G : 8 GB (3.1)

Hors ligne

#3 30-08-2009 13:57:23

iLgend
Membre

Re : [TUTO] Créer un site iPhone et l'héberger

Comment créer son site pour iPhone ?:
Suiver le guide smile
Voilà la page home.html est déjà presque prête, il ne vous reste plus qu'a enlever/ajouter des champs et a modfier ce qui est en majuscule.

La page home.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="index,follow" name="robots" />
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<link href="pics/homescreen.png" rel="apple-touch-icon" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="javascript/functions.js" type="text/javascript"></script>


<title>LE TITRE DE VOTRE SITE DANS SAFARI</title>


<meta content="iPod Touch et iPhone Web Site !" name="keywords" />
<meta content="Pod Touch et iPhone Web Site !" name="description" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>
<body>


<div id="topbar">
    <div id="title">
        LE TITRE DE VOTRE SITE DANS VOTRE SITE</div>
</div>


<div id="content">
    <ul class="pageitem">
        <li class="textbox"><span class="header">Bienvenue</span>
        <p>Bienvenue sur LE NOM DE VOTRE SITE<br>
           MESSAGES D'ACCUEIL<br></p>
        </li>
        <li class="menu"><a href="PAGE DE VOTRE SITE.html">
        <img alt="changelog" src="thumbs/ICONE.png" /><span class="name">TITRE DU LIEN 1</span><span class="arrow"></span></a></li>


    <span class="graytitle">TITRE 1</span><ul class="pageitem">
        <li class="menu"><a href="PAGE DE VOTRE SITE.html">
        <img alt="list" src="thumbs/ICONE.png" /><span class="name">TITRE DU LIEN</span><span class="comment"></span><span class="arrow"></span></a></li>
        <li class="menu"><a href="PAGE DE VOTRE SITE .html">
        <img alt="music" src="thumbs/ICONE.png" /><span class="name">TITRE DU LIEN</span><span class="arrow"></span></a></li>
        <li class="menu"><a href="PAGE DE VOTRE SITE .html">
        <img alt="store" src="thumbs/ICONE.png" /><span class="name">TITRE DU LIEN</span><span class="arrow"></span></a></li>
    </ul>


</div>
</body>
</html>

Voilà à quoi ressemblera la page d'accueil de votre site. J'ai mis deux espaces pour vous aidez à trouver les différents éléments. Pour ceux qui connessent bien l'html, vous pourrez la modifiée très facilement !

Pour faire les autres pages, je vous laisse faire en prenant des exemples dans le kit et des codes dans la suite big_smile

Les différents code html pour créer des catégories, etc...
A PLACER entre les balises <body> et </body>

-Les liens vers les catégories, souvant utiliser dans la page home:

<span class="graytitle">TITRE 1</span><ul class="pageitem">
        <li class="menu"><a href="PAGE DE VOTRE SITE.html">
        <img alt="list" src="thumbs/ICONE.png" /><span class="name">TITRE DU LIEN</span><span class="comment"></span><span class="arrow"></span></a></li>

-Un titre avec du texte:

<span class="graytitle">TITRE</span>
    <ul class="pageitem">
        <li class="textbox">
        <p>TEXT</p>
        </li>
        </ul>

-La Bar en haut avec un lien pour la page home:

<div id="topbar">
    <div id="title">
        TITRE DE LA CATEGORIE</div>
</div>

-Lien vers un site ou une page:

<a href="PAGE.html OU http://lien.com/">TEXT DU LIEN</a>

-Image:

<img alt="list" src="pics/IMAGES.png" />

Je vous présenterais des d'autres bouts de codes dans la suite big_smile

Dernière modification par iLgend (30-08-2009 15:00:39)


Développeur .NET
                                                       - All Jailbreak -
                    Black iPhone 3GS : 16 GB (4.0) - iPod Touch 1G : 8 GB (3.1)

Hors ligne

#4 30-08-2009 13:58:33

iLgend
Membre

Re : [TUTO] Créer un site iPhone et l'héberger

Bout de code pour rendre plus attrayant votre site pour iPhone !:
Voici une petite liste de code intéressant wink Comme d'habitute, il ne faut que modifier ce qui est en majuscule tongue

-Code vers une application AppStore:

<span class="arrow"></span></a></li></ul><ul class="pageitem"><li class="textbox"><p>TITRE</p></li><li class="menu"><a class="noeffect" href="http://www.itunes.com/app/CameraBag"><img alt="fullscreen" src="thumbs/appstore.png" /><span class="name">NOM DE L'APPLICATION</span><span class="arrow"></span>

-Code vers une map Google Maps:

<span class="arrow"></span></a></li></ul><ul class="pageitem"><li class="textbox"><p>TITRE</p></li><li class="menu"><a class="noeffect" href="http://maps.google.com/maps/ms?f=q&hl=fr&geocode=&ie=UTF8&msa=0&msid=106431329189139452431.000458c25e140ead6df80&ll=43.313438,3.417091&spn=0.084934,0.22316&z=13"><img alt="fullscreen" src="thumbs/maps.png" /><span class="name">NOM DE LA MAP</span>

-Code vers une musique ou autre iTunes:

<ul class="pageitem"><li class="textbox"><p>TITRE</p></li><li class="menu"><a class="noeffect" href="http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?id=287810321&s=143442"><img alt="fullscreen" src="thumbs/itunes.png" /><span class="name">NOM DE LA MUSIQUE OU AUTRES</span>

-Code de liste :

<li><a class="noeffect" href="LIEN"><span class="number">1</span><span class="name">TITRE</span><span class="arrow"></span></a></li>

-Code vers une adresse Mail:

<ul class="pageitem">
        <li class="textbox">
        <p>TITRE</p>
        </li>
        <li class="menu">
        <a class="noeffect" href="mailto:VOTRE ADRESSE MAIL?cc=&subject=SUJET&body=Ecriver ici le message ! ">
        <img alt="fullscreen" src="thumbs/mail.png" /><span class="name">NOM DU MAIL</span><span class="arrow"></span></a></li>
    </ul>

-Code pour créer des Popup iPhone:

<li class="menu"><a class="noeffect" onclick="iWebkit.popup('popup1')">
        <img alt="" src="thumbs/ICONE.png" /><span class="name">TITRE</span><span class="comment">TITRE POPUP</span><span class="arrow"></span></a></li>
        <div id="popup1" class="popup">
    <div id="frame" class="confirm_screen">
        <span>LIEN 1</span><a href="PAGE 1.html"><span class="gray">LIEN 2</span></a><a href="PAGE 2.html"><span class="red">Previous
        feature</span></a><a class="noeffect" onclick="iWebkit.closepopup(event)"><span class="black">Annuler</span></a></div>
</div>

-Code pour insérer un Flux RSS:

<div id="content">
    <ul class="pageitem">
        <li class="textbox">
        <script src="ADRESSE DU FLUX RSS" type="text/javascript"></script>
        </li>
    </ul>
</div>

-Code qui ouvre l'application Messages et envoi un sms à un numéro:

<ul class="pageitem"><li class="textbox"><p>TITRE</p></li><li class="menu"><a class="noeffect" href="sms:NUMERO"><img alt="fullscreen" src="thumbs/sms.png" /><span class="name">NOM DU SMS</span>

-Code vers une vidéo Youtube:

<ul class="pageitem">
        <li class="textbox">
        <p>NOM DE LA VIDEO</p>
        </li>
        <li class="menu">
        <a class="noeffect" href="LIEN DE LA VIDEO">
        <img alt="fullscreen" src="thumbs/youtube.png" /><span class="name">YouTube</span><span class="arrow"></span></a></li>
    </ul>

-Code qui ouvre l'application Téléphone et appelle un numéro:

<span class="arrow"></span></a></li></ul><ul class="pageitem"><li class="textbox"><p>TITRE</p></li><li class="menu"><a class="noeffect" href="tel:NUMERO"><img alt="fullscreen" src="thumbs/telephone.png" /><span class="name">NOM DU TELEPHONE</span>

N'hésiter pas a en proposer tongue

Dernière modification par iLgend (30-08-2009 14:47:36)


Développeur .NET
                                                       - All Jailbreak -
                    Black iPhone 3GS : 16 GB (4.0) - iPod Touch 1G : 8 GB (3.1)

Hors ligne

#5 30-08-2009 14:02:09

iLgend
Membre

Re : [TUTO] Créer un site iPhone et l'héberger

Modifier le thème de base et mettre une icône pour la webapp !:
Vous voulez modifier votre thème de base et ajouter une icône à votre webapp ?

Pour changer de thème:
1)Télécharger ce fichier avec tous les thèmes.
2)Copier les deux dossiers à la racine de votre thème.

Pour modifier l'icône de votre webapp:
1)Il suffit de modiffier l'image «apple-touch-icon.png» par l'icône que vous voulez, il faut juste le mettre 64*x64* pixels.


Voilà, c'était pas compliqué ^^

Dernière modification par iLgend (30-08-2009 14:52:04)


Développeur .NET
                                                       - All Jailbreak -
                    Black iPhone 3GS : 16 GB (4.0) - iPod Touch 1G : 8 GB (3.1)

Hors ligne

#6 30-08-2009 14:03:09

iLgend
Membre

Re : [TUTO] Créer un site iPhone et l'héberger

Comment mettre son site en ligne ?:
Il vous faut un logiciel pour le FTP, ici je vais procéder avec FileZilla que je vous conseille. Et un hébergeur gratuit comme Multimania big_smile

1)Cliquer sur ce lien  pour créer un compte, remplisser toutes les informations néssecaires et cliquer sur «Continuer» puis remplisser le reste.
2)Vous recevrez un mail, suiver les instructions données.
3)Connecter vous par FTP avec FilleZilla et remplisser ces champs:

Hôte: ftp.lycos.membres.fr
Identifiant: Votre nom de compte FTP
Mot de Passe: Votre mot de passe FTP
Port: 21

Puis cliquer sur «Connexion rapide»
Maintenant, il suffit de faire un glisser-deposer de votre site dans le répertoire.

Dernière modification par iLgend (30-08-2009 14:54:50)


Développeur .NET
                                                       - All Jailbreak -
                    Black iPhone 3GS : 16 GB (4.0) - iPod Touch 1G : 8 GB (3.1)

Hors ligne

#7 30-08-2009 14:07:14

iLgend
Membre

Re : [TUTO] Créer un site iPhone et l'héberger

Annuaire de vos site iPhone:
Un annuaire de tous les site iPhone des membres du forum. wink

-roqyBluetooth version iPhone by iLgend: http://iroqybluetooth.jesuisopen.fr

Venez proposer le lien vers votre site iPhone smile
Voilà la fin de ce long tutoriel tongue

Dernière modification par iLgend (30-08-2009 14:56:07)


Développeur .NET
                                                       - All Jailbreak -
                    Black iPhone 3GS : 16 GB (4.0) - iPod Touch 1G : 8 GB (3.1)

Hors ligne

#8 30-08-2009 14:08:33

iLgend
Membre

Re : [TUTO] Créer un site iPhone et l'héberger

Voilà, j'ajouterai sûrement des images un jour smile


Développeur .NET
                                                       - All Jailbreak -
                    Black iPhone 3GS : 16 GB (4.0) - iPod Touch 1G : 8 GB (3.1)

Hors ligne

#9 30-08-2009 14:09:13

jujucool290
Jujucool290

Re : [TUTO] Créer un site iPhone et l'héberger

c'est moi ou la bar de navigation est vraiment bleu par rapport a la version iPhone os ??

Hors ligne

#10 30-08-2009 14:10:00

iLgend
Membre

Re : [TUTO] Créer un site iPhone et l'héberger

Elle est plus bleu que la normal wink


Développeur .NET
                                                       - All Jailbreak -
                    Black iPhone 3GS : 16 GB (4.0) - iPod Touch 1G : 8 GB (3.1)

Hors ligne

#11 30-08-2009 14:11:39

jujucool290
Jujucool290

Re : [TUTO] Créer un site iPhone et l'héberger

dommage, tu peut pas mètre celle de l'iPhone, sur le site de iwebkit elle est "normale" smile

Hors ligne

#12 30-08-2009 14:23:34

iLgend
Membre

Re : [TUTO] Créer un site iPhone et l'héberger

Dans la pack elle est normal wink
Ps: Comment mettre un lien vers un message du forum ?
EDIT: Trouvé pour ma question

Dernière modification par iLgend (30-08-2009 17:21:11)


Développeur .NET
                                                       - All Jailbreak -
                    Black iPhone 3GS : 16 GB (4.0) - iPod Touch 1G : 8 GB (3.1)

Hors ligne

#13 01-09-2009 08:29:27

_dark mort_
Membre

Re : [TUTO] Créer un site iPhone et l'héberger

Pas mal wink Mais a moins que le l'ai loupé ... où est le CSS ??


ITouch 2G 4.2 jailbreaké wink
Mon tutoriel sur le xHTML et CSS

Hors ligne

#14 03-09-2009 17:51:21

iLgend
Membre

Re : [TUTO] Créer un site iPhone et l'héberger

Dans le fichier en téléchargement dans la partie "css", et ce serait trop dure d'expliquer comment le faire.

Dernière modification par iLgend (03-09-2009 17:51:41)


Développeur .NET
                                                       - All Jailbreak -
                    Black iPhone 3GS : 16 GB (4.0) - iPod Touch 1G : 8 GB (3.1)

Hors ligne

#15 03-09-2009 20:06:31

_dark mort_
Membre

Re : [TUTO] Créer un site iPhone et l'héberger

Ok, mais si tu veux, rajoute le lien de mon tutoriel, comme cela les visiteurs pourront mieux comprendre wink


ITouch 2G 4.2 jailbreaké wink
Mon tutoriel sur le xHTML et CSS

Hors ligne

#16 03-09-2009 20:57:04

Anonyme
Compte Supprimé

Re : [TUTO] Créer un site iPhone et l'héberger

AHHHH ! 8 posts a la suite iLegend !!!!!!!! fouet.gif

Sérieux, c'est superbe !! Il ne manque rien ! Super fluide, beau, parfait !

#17 05-09-2009 11:02:16

okattitudeok
Membre

Re : [TUTO] Créer un site iPhone et l'héberger

$$$$$$$$$$

Dernière modification par Anonyme (05-09-2009 22:42:04)

Hors ligne

#18 05-09-2009 11:57:09

jujucool290
Jujucool290

Re : [TUTO] Créer un site iPhone et l'héberger

va voir ailleurs avec ta pub de merd* roll

Hors ligne

#19 05-09-2009 12:11:16

okattitudeok
Membre

Re : [TUTO] Créer un site iPhone et l'héberger

Entendu vieux entendu
$$$$$$$$$$

Dernière modification par Anonyme (05-09-2009 22:46:55)

Hors ligne

#20 05-09-2009 12:13:12

Flym4n
Hackint0sher

Re : [TUTO] Créer un site iPhone et l'héberger

Bon alors on va faire "pourrissons le mail à ce crevard"
Le premier qui lui a envoyé 1000 messages avec le formulaire du forum à gagné...


 iTouch 4G 4.3.1 JAILBROKEN - JB Monte- Hackint0sh Sow leopard 10.6.7 Vanilla - Custom DSDT
Envoyez-moi un mail si vous voulez gagner des points MU facilement smile

Hors ligne

#21 05-09-2009 12:18:42

okattitudeok
Membre

Re : [TUTO] Créer un site iPhone et l'héberger

Relax man, essaye plutot clodogame c'est excellent et apaisant !

Hors ligne

#22 05-09-2009 12:42:34

Flym4n
Hackint0sher

Re : [TUTO] Créer un site iPhone et l'héberger

Va te faire foutre.


 iTouch 4G 4.3.1 JAILBROKEN - JB Monte- Hackint0sh Sow leopard 10.6.7 Vanilla - Custom DSDT
Envoyez-moi un mail si vous voulez gagner des points MU facilement smile

Hors ligne

#23 05-09-2009 12:46:13

okattitudeok
Membre

Re : [TUTO] Créer un site iPhone et l'héberger

Bravo ! Quel language !

Hors ligne

#24 05-09-2009 13:11:51

jujucool290
Jujucool290

Re : [TUTO] Créer un site iPhone et l'héberger

okattitudeok a écrit :

Relax man, essaye plutot clodogame c'est excellent et apaisant !

mais quesqu'ont s'en fout de truck de merd*, ont a franchement rien a battre hmm

ton jeux de clochard là, sa fait pitier

Hors ligne

#25 05-09-2009 13:20:31

okattitudeok
Membre

Re : [TUTO] Créer un site iPhone et l'héberger

Est ce que t'as essayé ce jeu au moin ? On t'as jamais appris a être poli aussi ? Tu ne sais même pas à qui tu t'adresse alors je te deconseille de manquer de respect aux gens dorénavant.
C'est quoi le souci, c'est pas parce que t'es un GEEK que les autres n'ont pas le droit a la parole

Hors ligne

Pied de page des forums