Kamobbah

Hello  @Wurov2,

 

C'est sympa ce que tu as fais, mais la partie des news semble avoir un défaut au niveau de la taille (il y a un vide à droite du 2e articles). Je kiff pas trop le header, mais il est plutôt original dans son genre donc sa va. C'est possible d'avoir le lien du site ?

Le 23/12/2017 à 17:33, Wurov2 a dit :

Très original, j'adore !

merci c:

Le 09/12/2017 à 16:07, CazasOfficiel a dit :

Malheusement le cms n'est pas fonctionnel (toutes les fonctionnalités ne sont pas codés ...

 

Oui, d'où la partie "INACHEVÉ?" de mon topic :p, mais si tu regardes bien les codes, il y a tous les codes qu'il te faut pour terminer le CMS.

Hello,

 

Sa doit surement être un $_GET['publier'] et non un $_POST['publier'].

Fais nous voir ton formulaire?

J'avais une idée de menu: un menu qui s'ouvre autour du curseur quand on fait double-clique. Fais toi plaise si elle te plait l'idée.

 

EDIT: Pour ton menu, le menu déroulant est pas top.

Il y a 21 heures, CptHenri a dit :

Merci à toi! De plus que Adobe Flash Player a annoncé sa fin, soit habbo va littéralement disparaître, soit il va s'adapter en HTML5 ou même, sortir une adaptation en C

De nada c; Oui j'en avais entendu parlé, mais ils sont peu à s'y mettre..

il y a 6 minutes, Calypso a dit :

Je trouve sa très réussie 
Surtout que je suis pro en cours d'émulation mdrr  

Merci de ton partage  

Merci c:

HAHAHAHAHAHAHHAHAHAHAHAHAHAHAH ouai c'est parce que j'avais vu un vieux poste de toi sur un autre site de ressource et tu étais le plus actif en ce qui concerne le codage d'ému. D'ailleurs merci tu m'as permis d'avoir Visual Studio 2015 c:

De nada c:

Hello,

 

je viens de voir ce topic: 

Et je me suis dis, que sa serais bien que cette histoire de "Habbo HTML5" finisse vite pour tous profiter..

C'est pourquoi j'ai décidé de partager un navigateur que j'avais fais en me basant sur une image.

A la base il était pour un collègue qui lui aussi avait un projet HTML5, mais je m'en suis séparé par manque de motivation (désolé encore bg). Du coup je fais profiter à tous (après réadaptation en full HTML/CSS) afin que ce projet voit le jour et que tout le monde puisse passé dans un "nouvel air".

 

IMAGE

 

 

modèle:  

résultat:  

 

TÉLÉCHARGEMENT

 

Navigateur: https://www.mediafire.com/file/s3er2zo10avjarv/navigateur.zip

 

Peace

 

@DivID Thanks bro

Il y a 1 heure, ???0z a dit :

T'es un génis toi, tu as eu de la bonne idée

Comment je me sent quand tu me dis sa bg: 

 

 

Sinon merci sa fait très plaisir, mais sérieux pas encore un commentaire d'une personne assez chaude pour l'achevé ? :c

@Sangraldv De nada c;

il y a 38 minutes, Sangraldv a dit :

Je les est sortis du dossier cms

edit : tient les screens si tu ne les à pas vue 

@Kamobbah

C'est bien ce que je me disais, sors les fichiers du dossier "AchilleCMS" et mets les directement dans le htdocs

à l’instant, Sangraldv a dit :

Oui je pense avoir tout config, j'ai mis la db, j'ai relier la db au CMS ( power -> info.php ) 

 

Se qui donne sa :

 define('Site', 'Localhost');//------------ Nom du site
define('ShortSite', 'local');//---------- Nom du site raccourci
define('Retro', 'Wibbo');//---------------- Nom du retro
define('LRetro', 'https://localhost/');// Lien du retro
define('Host', 'localhost');//------------- Host (défaut: localhost)
define('NomBDD', 'dbtest');//------------- Nom de la base de donnée
define('Nom', 'root');//------------------- Nom d'accès (défaut: root)
define('MDP', '');//------------------- Mot de passe de la base de donnée (défaut: MAMP=root | XAMP=vide)

 

Faut mettre aussi les info à gauche ? ( le site s'affiche, sauf le background de dérrière l'écran est noir, et aucune bouton marche )

screen stp? tu as mis le dossier "cms" directement dans le htdocs ou tu as sorti les fichiers du dossier "cms"?

Il y a 1 heure, Sangraldv a dit :

Joli  moi le fond est noir, et rien marche fin, les bouton marche pas, qu'est-ce que je doit faire ?

Merci c: Tu as bien tout installé? (db et cms)

il y a 43 minutes, Tuesday | YK a dit :

Incroyable, super design ! Très bonne idée !  

Très bon CMS merci  

HAHAHAHHAHAHAHAHHAHAHAHAH merci et de nada pour le CMS, j'espère que il prendra fin un jour.

il y a 41 minutes, Akushi a dit :

Sa fait un peut bizarre mais j'aime bien le concept du design !

Bravo à toi

HAHAHAHHAHAHAHAHAHAHHAHAAHH ouai le design est pas évident au premier abord, mais il est customisable de fond en comble (j'ai séparer le CSS des différents éléments). Et sa m'a fait penser que il peut être utile pour les projets "RETRO HTML5".. Sinon merci c:

 

 

 

PS:  j'avais déjà annoncé ce CMS il y a un moment déjà, si vous avez pas vu (et que vous voulez voir les légères modifications/évolutions): 

 

il y a 22 minutes, Symbiosis a dit :

Bon ça c'est encore autre chose, et merci

Tu n'as pas d'idée?

 

Je vais déjà mettre en résolu au cas où pour les autres c;

Il y a 7 heures, Symbiosis a dit :

Tu as changé le fichier de l'émulateur ?

Ah je ne savais pas qu'il y avait un fichier à modifier dans l'émulateur. Je viens de regardé et j'ai trouvé un figuredata.xml, du coup je le remplace par celui du dossier télécharger, je test et ... (ouai je test en même temps que j'écris) SA MARCHE! Merci chico (petit +1 des familles pour toi et tout tqt).

 

Mais j'ai toujours un problème pour le problème avec le cms: https://gyazo.com/66d40f83b71b7ac91c60b46bbe232c0d

 

@Tuesday | YK Ah oui? J'en ai vu un mais on avait pas le même problème:

 

Hello,

 

Alors j'ai trouvé des swf de vêtements (https://funky-emu.net/topic/20934-nouveaux-habits/) qui me plaisaient bien et j'ai voulu les ajouter à mon retro local pour les tester et peut-être m'améliorer en swf pourquoi pas?

 

La situation

J'ai pris les swf une fois télécharger et je les ai ajouté à mon dossier de swf (gordon->prodXXX) et j'ai remplacé les figuremap et figuredata par ceux qu'ils m'ont prescris (les fichiers étaient en plus dans le téléchargement).

Je me connecte et les vêtements s'affichent tous correctement du coup je commence à me changer en choisissant des vêtements que je n'avais pas au départ.

 

Le problème

Une fois que je suis satisfais (le screen qui va suivre n'est pas le look que je veux, ce n'est qu'un exemple) je clique donc sur sauvegarder.

look choisis - https://gyazo.com/6228b8650e0a5ab5ed08a4f68d76d19b

Le hic c'est qu'une fois que je sauvegarde mon look ce n'est pas la présélection faite dans l'éditeur de look qui est enregistrer mais d'autres vêtements.

look une fois sauvegarder - https://gyazo.com/d7c2f122966a49f2981afdd23e1cd851

 

Aide en plus

J'ai donc observé au maximum la situation et j'ai constaté que lorsqu'on enregistre le look avant de le sauvegarder il restait, mais une fois qu'on revient dans le client il change d'apparence.

avant - https://gyazo.com/6228b8650e0a5ab5ed08a4f68d76d19b / après - https://gyazo.com/1cc499ae56f4a989106819f94549b8d6

Ensuite, lorsque je suis toujours sur le client (avant d'avoir rafraîchis la page) et que je récupère le look sauvegarder, il s'affiche bien dans l'éditeur.

Look sauvegardé, récupérer avant rafraîchissement de la page - https://gyazo.com/6228b8650e0a5ab5ed08a4f68d76d19b

Lorsque je me suis changer et que je re-clique sur Se changer j'ai mon look qui s'est modifier.

Look une fois qu'on se re change - https://gyazo.com/938333864ee93c975895e3cc450fcaf8

Sur le CMS aussi mon look ne s'affiche pas (il a même un look différent de mon look du client).

Look sur la page me - https://gyazo.com/7091962ecf597e48775374c6b7d1c80b

 

Selon vous le problème viens d'où? Comment je peux fixer ça?

Merci d'avance pour votre aide.

Peace.

 

 

@Calypso De nada c:

Hello,

"Comment mettre 2 box côte à côte?"

 

Si je vous fais ce tutoriel c'est parce que je me suis moi-même déjà posé cette question et j'ai vu qu'il y avait plusieurs manières et que certaines étaient déconseiller et tout le tralala…

C'est pourquoi j'ai voulu en parler aujourd'hui pour améliorer l'efficacité de vos futurs design ou peut-être répondre à certains questionnements. Commençons!

 

ÉTAPE 1 - La base HTML

Je vais vous poser la structure de base d'une page HTML (non relié à une page CSS) afin que vous puissiez mieux suivre ce tutoriel avec moi.

Citation

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>Titre que vous voulez (pour ma part: "Side by Side")</title>
</head>

<style type="text/css">



</style>

<body>



</body>
</html>

 

Je vous épargne les explications, parce que je suppose que si vous suivez un tutoriel CSS c'est que vous connaissez déjà les bases en HTML.

On a fini avec la base HTML on va mettre en place le contenu de la page qu'on veux voir s'afficher, le contenu s'écrit toujours dans les balises <body></body>. Voici celui que j'ai fait pour le tutoriel:

Citation

<body>
<div class="contenu">
	
	<div class="gauche">
		Contenu de gauche
	</div>
	<div class="droite">
		Contenu de droite
	</div>

</div>
</body>

 

La div avec la classe "contenu" = Les limites, c'est-à-dire que les informations (textes, images, liens, etc…) se trouveront entre ces limites.

La div avec la classe "gauche" = Les informations qui s'afficheront à gauche dans la box de contenu.

La div avec la classe "droite" = Les informations qui s'afficheront à droite dans la box de contenu.

 

ÉTAPE 2 - La (ma) base CSS

Vous vous demandez sûrement pourquoi j'ai mis "(ma)" pour l'étape 2. Et bien c'est parce que on a tous notre propre base CSS, certaines peuvent se ressembler et je ne sais pas si il y vraiment une base générale. dans la balise <style type="text/css"></style> vous mettrez donc:

Citation

<style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Roboto');
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none;
	vertical-align: top;
}
body {
	font-family: 'Roboto', sans-serif;
}
</style>

 

L'étoile représente toutes les balises, ce qui signifie que le style accorder à * s'affectera à toutes les balises. Si j'ai mis le font-family dans le body {}, c'est parce que * a des critères absolus, c'est-à-dire qu'on ne peut pas lui changer sa valeur en la modifiant sur une autre balise. Pour le font-family, je vous invite à choisir celle que vous voulez en allant sur https://fonts.google.com ou un autre site si vous en avez de meilleurs.

Il est important que vous mettiez le box-sizing: border-box; car il évitera que les box soient déformer par un padding ou autre.

Il est important que vous mettiez le vertical-align: top; car il évitera qu'il y ai un décalage vertical entre 2 box, elles resteront alignées.

Les styles 0 et none c'est une question d’esthétique.

 

On a fini avec les bases on va donc poser le style pour notre contenu. Ce qu'on veut c'est pouvoir mettre 2 box côte à côte et afficher du contenu sur la gauche et sur la droite. Dans ce cas, en dessous de notre style pour le body {} on va ajouter:

Citation

div {
	border-style: solid;
	border-width: 1px;
}

.contenu {
	width: 1000px;
	margin: auto;
	margin-top: 10px;
	border-color: black;
	padding: 5px;
}

.contenu .gauche,
.contenu .droite {
	width: 50%;
	display: inline-block;
}

.contenu .gauche {
	border-color: blue;
}
.contenu .droite {
	border-color: red;
}

 

Le style de la div nous affichera les différentes box qu'on aura créer, on les accordera des couleurs différentes (noir pour le contenu, bleu pour la box de gauche et rouge pour la box de droite).

Le style du contenu fera donc 1000px de large et sera centrer sur notre page grâce au margin: auto;.

le padding nous servira à mieux afficher les couleurs des box que le contient notre div.contenu.

On donne à notre div.gauche et notre div.droite une largeur de 50%; afin qu'elles prennent toutes les deux la moitié de notre div.contenu et de faire un affichage équilibrer.

On donne à notre div.gauche et notre div.droite un display: inline-block; pour qu'elles se posent l'une à côté de l'autre.

 

ÉTAPE 3 - Étude

Rassurez-vous, quand je dis étude je ne parle pas d'apprendre des choses marquer dans un cahier ou quoi que ce sois. Non je veux plutôt parler de l'étude de notre page, voir ce qu'il se passe avec tout ce qu'on a fait.

 

https://gyazo.com/89d3b5793155d01cb208b02f5057ff19

Premièrement on constate que les box s'affichent bien

Le problème c'est que les box droite et gauche ne sont pas côte à côte, pourquoi?

 

Si on diminue la largueur de ces box, on remplace donc width: 50%; par width: 100px; - https://gyazo.com/41f09367d7818d980c59dba0fe00a881

On constate que nos box sont bien côte à côte mais que celles-ci sont espacées, ajoutons encore une div.gauche pour voir. Ce qui vous donnera:

Citation

<body>
<div class="contenu">
	
	<div class="gauche">
		Contenu de gauche
	</div>
	<div class="droite">
		Contenu de droite
	</div>
	<div class="gauche">
		Contenu de gauche
	</div>

</div>
</body>

 

https://gyazo.com/fb808d3d03fbf25cdf603dab2adcb7d0

On constate donc que les box mettent automatique un espace, alors comment les supprimés ces espaces?

Pour se faire on va juste retirer l'espace entre la fin de la div.gauche et le début de la div.droite, comme ceci:

Citation

<body>
<div class="contenu">
	
	<div class="gauche">
		Contenu de gauche
	</div><div class="droite">
		Contenu de droite
	</div>

</div>
</body>

 

https://gyazo.com/454e7f651d56066f6fa0884a8cfefa0b

Bingo! plus d'espaces indésirables, ils nous restent plus qu'à remettre un widht: 50%; et hop. - https://gyazo.com/c3519fbc7a012f3a8352a99ac9fb897c

 

On a donc 2 box côte à côte où on pourra afficher différentes informations, on peut aussi disproportionner les largeurs des box, en retirant la largeur générale des div.gauche et div.droite et en attribuant la valeur de la largeur individuellement, comme ceci: https://gyazo.com/5c04374bc1751d814b59dbee6ed8b1f6

Citation

.contenu .gauche,
.contenu .droite {
	display: inline-block;
}

.contenu .gauche {
	width: 30%;
	border-color: blue;
}
.contenu .droite {
	width: 70%;
	border-color: red;
}

 

 

ÉTAPE 4 - Alternatives

Pour supprimer les espaces indésirables entre 2 box en display: inline-block; tout en gardant la structure de votre code HTML afin qu'il soi plus facile à lire il y a d'autre méthode mais celle-ci est la plus simple.

 

Vous pouvez aussi ne pas utiliser les display: inline-block; et créer le même effet avec des float: left;  mais cette méthode est fortement déconseiller, voyer par vous-même:

https://gyazo.com/d311895175f0b64f9087ba998e331bc5

Si vous voulez essayer:

Citation

.contenu .gauche,
.contenu .droite {
	float: left;
	width: 50%;
}

.contenu .gauche {
	border-color: blue;
}
.contenu .droite {
	border-color: red;
}

 

On pourrais essayer avec des floats de par et d'autre mais cela ne changera toujours rien: https://gyazo.com/d311895175f0b64f9087ba998e331bc5

Si vous voulez essayer:

Citation

.contenu .gauche,
.contenu .droite {
	width: 50%;
}

.contenu .gauche {
	float: left;
	border-color: blue;
}
.contenu .droite {
	float: right;
	border-color: red;
}

 

Voilà la méthode du display: inline-block; avec la suppression entre la div supérieur et la div inférieur reste la plus efficace à mes yeux, libre à vous de faire ce que vous voulez.

 

 

C'est tout pour ce tutoriel, j'espère qu'il vous aura plu et que sa aidera pour répondre à certaines questions.

Peace.

Hello,

 

En gros tu veux un CMS de forum qui fonctionne comme celui de HabboCIty pour ensuite le customiser à ta "sauce" ?

C'est pas très explicite…

à l’instant, Choope a dit :

comment sa ?

 

Quand tu ouvres xampp ou WAMP tu démarres ton apache et ton mysql

Peut-être le mot de passe de connexion ?