Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

BeCloud ISN

No description
by

Cohen Guillaume

on 20 May 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of BeCloud ISN

_____________________ ------------------------------------------------------------------- www.BeCloud.p.ht BeCloud | BeCloud est un site maquette entièrement opérationnel créé dans le cadre des projets de la spécialité ISN en terminale S. Présentation du projet Aujourd’hui, avec l’essor des nouvelles technologies, le besoin de disposer et partager des données depuis différents périphériques quel que soit le lieu dans lequel on se trouve est un enjeu important dans l’utilisation et le partage de l’information. Problématique: Réaliser une structure logicielle permettant de stocker, de consulter et de partager des données à distance. Les contraintes et fonctionnalités Les données doivent pouvoir être consultées et téléchargées depuis tout périphérique connecté à internet, n’importe où dans le monde.
L’accès aux données doit être sécurisé.
Les données doivent pouvoir être cryptées.
L’interface utilisateur doit être simple, intuitive et ergonomique.
Toutes les opérations liées au transfert, traitement et stockage des fichiers doivent être « transparentes » pour l’utilisateur Principe de BeCloud: I. Site Mobile de BeCloud Intérêts et différences
Code HTML et CSS II. Algorithme Inscription/Connexion Algorithme d'inscription
Algorithme de connexion III. Design et baslise Iframe Design et évolution de BeCloud
La balise "Iframe"
Page de chargement Site Mobile de BeCloud I. Les intérêts et les différences Pourquoi un site pour mobile ? -------------------------------------------------------------------- Les smartphones sont de plus en plus présent, les sites internet ne se limites plus aux PC désormais
Contrairement à notre PC, notre Smartphone est toujours dans notre poche, ainsi on l'utilise partout.
Grâce à un site mobile, l'expérience BeCloud est disponible à tout moment Les contraintes d'un site mobile ------------------------------------------------------------------------- Un site optimisé pour mobile doit être complètement différent que le site pour PC (naviguation différente, tactile, taille de l'écran...)
Difficulté a observer ce que l'on code Utilisation d'opéra mobile simulator II. Code HTML et CSS Voilà à quoi ressemblerait BeCloud sur mobile si nous ne faisions pas de site optimisé pour mobile...
Pas très intuitif non ? « <meta name="viewport" content="width=device-width"/> » Le code HTML ci-dessus aurait pu permettre au moins d'adapter la taille du site à l'écran, mais nous voulions vraiment un site mobile très simple d'utilisation - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Plus intuitif
Seulement l'essentiel
Champs de saisis repensé pour le tactile
Plus rapide à charger Version mobile inaccessible depuis un PC HTML --------- Le code HTML à juste été simplifié pour la version mobile de BeCloud. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ------ CSS Utilisation des "Media-Queries" C'est dans le code CSS qu'on remarque le plus de changement, sur un mobile les problème de résolution sont très fréquents car la résolution d'un Smartphone est variable d'un modèle à un autre @media screen and(max-width: 640px) Code fixé en haut de la feuille CSS = S'applique aux écrans ayant une résolution inférieur à 640px Autre exemple de code ----------------------- /* fixer une largeur maximale de 100 % aux éléments potentiellement problématiques */

img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video

{
max-width: 100%;
} Site mobile de BeCloud pas encore en ligne Volonté de continuer le site malgré la fin du projet Algorithme connexion/inscription Deux possibilités sur BeCloud: La connexion
L'inscription Réalisation des deux algorithmes remplissants ces fonctions Collaboration avec un camarade pour traduire ces algorithmes en code PHP I. Algorithme d'inscription II. Algorithme connexion Compréhensible par tous, permettent de disposer ses idées de manière simple avant de les "transformer" en code Initialisation :

Définir les variables « Email » et « mot de passe ».
« Email » prend la valeur envoyée par le formulaire.
« Mot de passe » prend la valeur envoyée par le formulaire.

-------------------------------------------- Début :
On vérifie que les variables if « Email » et « mot de passe » ont été définie.

Si la chaine de caractère de la variable « Email » est déjà présente dans la base de donnée.
Afficher message d'erreur.
Renvoyer l'utilisateur sur la page formulaire.
Sinon
Si l’adresse Email n’est pas valide.
Afficher message d'erreur
Renvoyer l'utilisateur sur la page formulaire
Si le mot de passe est différent de la confirmation.
Afficher message d'erreur
Renvoyer l'utilisateur sur la page formulaire

Ajouter la valeur de la variable « Email » dans la base de données.

Crypter la valeur de la variable « mot de passe » la sauvegarder dans la base de donnée en coïncidence avec la variable « Email ».
Initialiser une nouvelle session PHP
Rediriger l'utilisateur vers la page utilisateur
Fin Si
Fin Code PHP if (isset($_GET['action'])) {
if ($_GET['action']=='register') {
$i =0;
$temps =time();
$email =$_POST['email'];
$password=md5($_POST['password'] . 'XXXXXX');
$confirm =md5($_POST['passconfirm'] . 'XXXXXX');
$userid =md5($_POST['email'] . 'XXXXXX' . $XXXX);

$query=$db->prepare('SELECT COUNT(*) AS nbr FROM user WHERE email =:email');
$query->bindValue(':email', $email, PDO::PARAM_STR);
$query->execute();
$mail_free=($query->fetchColumn()==0) ? 1 : 0;
$query->CloseCursor();

if (!$mail_free) {
$error="<li>Votre adresse email est déjà utilisée par un membre</li>";
$i++;
}

if (!preg_match("#^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]{2,}\.[a-z]{2,4}$#", $email)||empty($email)) {
$error=($error . "<li>Votre adresse e-mail n'est valide</li>");
$i++;
}

if ($password!=$confirm||empty($confirm)||empty($password)) {
$error=($error . "<li>Vos mots de passe sont diffèrents</li>");
$i++;
}

if ($i==0) {
$query=$db->prepare('INSERT INTO user (email, password, userid)
VALUES (:email, :password, :id)');
$query->bindValue(':password', $password, PDO::PARAM_INT);
$query->bindValue(':email', $email, PDO::PARAM_STR);
$query->bindValue(':id', $userid, PDO::PARAM_INT);
$query->execute();

$_SESSION['id'] =$userid;
$_SESSION['email'] =$_POST['email'];
$_SESSION['password']=$password;
$query->CloseCursor();

echo '
<div id="message">
<div class="message-content">
<div class="head-message">
<img src="img/logo.png" style="height: 55px; margin-top: 10px;"/>
</div>
<h2>Inscription réussie !</h2>
<p>Cliquez <a href="userarea.php">ici</a> pour accèder à votre espace BeCloud.</p>
</div>
</div>';

} else {
echo '
<div id="message">
<div class="message-error">
<a href="http://www.becloud.p.ht/"><img src="img/exit.png" style="float:right; width: 25px;"></a>
<div class="head-message">
<img src="img/logo.png" style="height: 55px; margin-top: 10px;"/>
</div>';
echo '<h3>Votre inscription a échouée:</h3>
<fieldset><legend>' . $i . ' erreur(s):</legend>';
echo '<ul>' . $error . '</ul>
</fieldset>
</div>
</div>';

}

} Initialisation :

Définir variables « Email » et « Mot de passe ».

« Email » prend la valeur envoyée par le formulaire.
« Mot de passe » prend la valeur
envoyée par le formulaire.

----------------------------------------------------- Début :

Si la variable « Email » est nul
Afficher message d'erreur.
Renvoyer l'utilisateur sur la page formulaire.
Si la chaine de caractère de la variable email n'est pas présente dans la base de donnée
Afficher message d'erreur
Renvoyer l'utilisateur sur la page d'accueil
Sinon

Si le « Mot de passe » fournit par l’utilisateur est différence que celui de la base donné.
Afficher message d'erreur
Renvoyer l'utilisateur sur la page formulaire

Initialiser une nouvelle session PHP
Rediriger l'utilisateur vers la page utilisateur

Fin Si

Fin Code PHP if ($_GET['action']=='connection') {
$i =0;
$email =$_POST['email'];
$password=md5($_POST['password'] . 'XXXXXX');

if (empty($email)||empty($password)) {
$i++;
} else {
$query=$db->prepare('SELECT password, userid
FROM user WHERE email = :email');
$query->bindValue(':email', $_POST['email'], PDO::PARAM_STR);
$query->execute();
$data=$query->fetch();
if ($data['password']==md5($_POST['password'] . 'XXXXXX')) {
$_SESSION['id'] =$data['userid'];
$_SESSION['email'] =$_POST['email'];
$_SESSION['password']=$password;
header('Location: userarea.php');

} else {
$i++;
echo '
<div id="message">
<div class="message-error">
<a href="http://www.becloud.p.ht/"><img src="img/exit.png" style="float:right; width: 25px;"></a>
<div class="head-message">
<img src="img/logo.png" style="height: 55px; margin-top: 10px;"/>
</div>';
echo '<h3>La connection a échouée:</h3>
<fieldset><legend>' . $i . ' erreur(s):</legend>';
echo '<ul><li>Identifiant ou mot de passe incorrect.</li></ul>
</fieldset>
<a href="index.php?action=reset-password" class="link">Mot de passe oublié ?</a>
</div>
</div>';

}
$query->CloseCursor();
}
} Design et balise "Iframe Le Design a été primordial: BeCloud devait être esthétique
Mais aussi intuitif Les versions du design ont donc été nombreuses afin qu'il plaise à tous les membres du groupe Une des premières version de BeCloud.
Deux gros boutons centrale (connexion et inscription) Code HTML <!DOCTYPE html>
<html>
<head>
<title>BeCloud | You Files, Everywhere, Anytime.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="BeCloud | Your Files, everywhere, anytime " />
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/design.css" />
</head>
<body>
<header>
<img src="img/BeCloud.png"/>
</header>
<div id="content">
<img src="img/BeCloud-logo-BIG.png" width="275px;"/>
</div>
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<h3><a href="1.html">Connection</a></h3>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<h3><a href="2.html">S'inscrire</a></h3>
</div>
</div>
</li>
</ul
</body>
</html> Code CSS @import url(http://fonts.googleapis.com/css?family=Julius+Sans+One);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
body{
margin: 0;
padding: 0;
background: url(../img/pattern.jpg) repeat top left;
color: white;
font-family: 'Open Sans', sans-serif;
min-width: 1280px;
font-size: 25px;
width: 100%;
}
header{
display: block;
width: 100%;
background: url(../img/pattern-head.png) repeat top left rgba(47,47,47,1);
height: 45px;
position: fixed;
box-shadow: 2px 2px 2px black;

}
#footer{
position: fixed;
bottom: 0;
left: 0;
height: 100px;
background: black;
}
#content{
padding-top: 80px;
width: 800px;
margin:auto;
text-align: center;
}
.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.ch-grid:after,
.ch-item:before {
content: '';
display: table;
}
.ch-grid:after {
clear: both;
}
.ch-grid li{
width: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: relative;
cursor: default;
box-shadow:
inset 0 0 0 16px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);
transition: all 0.4s ease-in-out;
}
.ch-img-1 {
background-image: url(../images/1.jpg);
}
.ch-img-2 {
background-image: url(../images/2.jpg);
}
.ch-info{
position: absolute;
background: rgba(63,147,147, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
}
.ch-info h3{
color: #25acce;
padding: 45px 0 0 0;
font-style: italic;
margin: 0 30px;
font-size: 18px;
border-top: 1px solid rgba(255,255,255,0.5);
opacity: 0;
transition: all 1s ease-in-out 0.4s;
height: 140px;
ext-transform: uppercase;
}
.ch-info h3 a {
display: block;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 18px;
letter-spacing: 1px;
padding-top: 30px;
font-family: 'Open Sans', Arial, sans-serif;
text-decoration:none;
}
.ch-info h3 a:hover {
color: rgba(47,47,47, 0.9);
}
.ch-item:hover {
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.1),
0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
transform: scale(1);
opacity: 1;
}
.ch-item:hover .ch-info h3 {
opacity: 1;
} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Les formulaires ressemblaient à cela au début du projet.
Chaque personne personne du groupe à créé sa version de BeCloud. La balise "Iframe" --------------------------------------------------- La page de chargement A quoi sert-elle ? Visionner vos images, vos PDF...
Remplit la fonction du visionnage sur BeCloud Son code: <iframe src="file/logo.png" style="width: 80%; margin-left: 10%; margin-top: 5%; height: 80%; background: white; border-radius: 10px; box-shadow: 0px 1px 2px #ADADAD;" frameborder="0" sandbox="allow-top-navigation"></iframe> __________ ________________________ Nom de la balise Nom du fichier que l'on souhaite visionner Code CSS intégrer dans la balise pour plus de simplicité Ci-dessus, la fonction de visionnage. Ici une simple image. Utilité de cette page: Permet des chargement esthétique Particularité de cette page: Page dynamique (CSS 3 et JavaScript) Sommaire THOMASSET Corentin
TEYSSIER Maxens
COHEN Guillaume
Full transcript