Design & Développement web - Le topic des canards qui mangent des cookies

[Awake]

Pour le centrage vertical il n'y a pas vraiment de solutions miracles, si tu connait les dimensions de l'image à l'avance tu peux faire (disons 400px * 300px) :

#header {
  position:relative;
}
#header img {
  position:absolute;
  top:50%; left:50%;
  margin-top:-150px; /* = hauteur/2 */
  margin-left:-200px; /* = largeur/2 */
}

[superlag]

Ok, la balise tel quelle ne donnait rien (ça partait très haut), mais en adaptant:

	#header img {
        	position:absolute;
        	margin-top:8px;
        	margin-left:300px
		}
	#header {
		background-image:URL(http://www.machin.fr/text_carb.png);
		width:600px;
		width:100%;
		height: 160px;
                }

Ca marche

Merci!


Au passage ça à l'air assez souple comme code les css, c'est pas ultra sensible à la case, c'est assez logique (on peut compiler pas mal de truc dans une balise), je découvre le truc et j'aime bien.

[tenshu]

Tu oubliera pas de mettre un H1 sur ta page

[superlag]

Pour le Référencement ou pour le "design"?

[grmain]

Le "lorem ipsum" a été déclaré obsolète. Veuillez dorénavant, pour vos maquettes, utiliser le Samuel L. Ipsum motherfucking placeholder text motherfucker.

http://slipsum.com

[Tomaka17]

Ok, la balise tel quelle ne donnait rien (ça partait très haut), mais en adaptant:

	#header img {
        	position:absolute;
        	margin-top:8px;
        	margin-left:300px
		}
	#header {
		background-image:URL(http://www.machin.fr/text_carb.png);
		width:600px;
		width:100%;
		height: 160px;
                }

Ca marche

Merci!


Au passage ça à l'air assez souple comme code les css, c'est pas ultra sensible à la case, c'est assez logique (on peut compiler pas mal de truc dans une balise), je découvre le truc et j'aime bien.

À noter que dans ton exemple, le "width:100%" écrase le "width:600px".
Ce dernier n'est pas du tout pris en compte.

[superlag]

Ouaip ok, au début je pensais que ça disais un truc du genre "taille incompressible 600px, mais étale sur toute la largeur".
J'apprends ces trucs depuis hier soir je connais pas encore vraiment, genre <div> j'ai pas trop capté (un paragraphe lié à du CSS?).

---------- Post added at 20h48 ---------- Previous post was at 19h29 ----------

Erf ça marchait pas en fait, enfin sur ma définition d'écran oui, mais ça se décalait ailleurs.
Et le margin top donne rien.

En gros, soit je centre horizontalement, soit verticalement, mais pas les deux.

Et Google me donne rien de probant.

J'essaiera d'analyser des feuilles de style de sites qui font ça comme il faut.

[Awake]

Réessaie avec ma méthode sans oublier le top:50%; left:50% sur #header img et le position:relative sur #header, ce n'est pas joli (parce que le positionnement absolu c'est moche) mais plutôt solide normalement. Oublie pas non plus de changer des margin-left et margin-top pour qu'elles soient égales à moins la moitié des dimensions de l'image.

Pour la taille incompressible suffit de faire "min-width:600px; width:100%".

Les balises <div> et <span> agissent comme des conteneurs sans sémantique (au contraire de <p> qui doit contenir un paragraphe de texte ou <em> qui doit mettre en avant un morceau de texte). La seule différence entre les deux c'est que <div> s'affiche en display:block par défaut et <span> en display:inline.

[zatura]

Y'en a qui gère le htaccess par ici ? Je galère comme un porc depuis deux heures sur une petite dizaine d'url qui proviennent d'un ancien site et qui donnent des 404 maintenant.

Elles sont toutes du types

monsite.com/actualite.do?variableALaConDontJOSEFTotal=beurk

Je veux toutes les rediriger vers la homepage, du coup j'ai pensé faire un truc de ce style.

RedirectPermanent /actualite.do(.*) /

Ca me redirige bien vers la homepage mais je me retrouve avec ça :

monsite.com/?variableALaConDontJOSEFTotal=beurk

Je n'arrive pas à virer ces ******** de paramètres.

Si quelqu'un voit comment faire, mon cerveau commence à bouillir.

[Tomaka17]

Je pense que tu ne peux pas.

Par contre tu peux utiliser l'url rewriting à la place, c'est à dire un truc comme ça :

RewriteEngine on
RewriteRule /actualite.do(.*)  /  [R=301]

Si t'es sur hébergement mutualisé, pas sûr que ce soit disponible par contre.

[Anon26492]

RedirectPermanent /actualite.do(.*) /

Si quelqu'un voit comment faire, mon cerveau commence à bouillir.

RedirectPermanent /actualite.do(.*) /?

Si tu rajoutes une Query String, il portera pas la query string.

---------- Post added at 18h02 ---------- Previous post was at 17h59 ----------

Pour le Référencement ou pour le "design"?

h1 sur chaque page est une règle d'accessibilité de mémoire.

[tenshu]

h1 sur chaque page est une règle d'accessibilité de mémoire.

Sémantique, même si effectivement pour l'accessibilité c'est mieux.

Et comme Google est le premier aveugle du monde, il aime beaucoup trouver un H1.
D'ailleurs c'est précisé en "error" dans google webmaster tools.

[Anon26492]

Si je ne m'abuse, depuis HTML5 tu peux utiliser plusieurs h1 sur une même page. Genre une par <article>.
Mais Google n'aime pas spécialement.

---------- Post added at 19h31 ---------- Previous post was at 18h19 ----------

Est-ce qu'on peut prétendre récompenser le meilleur du web tout en ayant un site à la limite de l'inavigable ?
http://winners.webbyawards.com/

[deathdigger]

Y'en a qui gère le htaccess par ici ? Je galère comme un porc depuis deux heures sur une petite dizaine d'url qui proviennent d'un ancien site et qui donnent des 404 maintenant.

Elles sont toutes du types

monsite.com/actualite.do?variableALaConDontJOSEFTotal=beurk

Je veux toutes les rediriger vers la homepage, du coup j'ai pensé faire un truc de ce style.

RedirectPermanent /actualite.do(.*) /

Ca me redirige bien vers la homepage mais je me retrouve avec ça :

monsite.com/?variableALaConDontJOSEFTotal=beurk

Je n'arrive pas à virer ces ******** de paramètres.

Si quelqu'un voit comment faire, mon cerveau commence à bouillir.

Au pire tu rediriges tout vers une page qui ne fait qu'un redirect.

[suiX]

Tiens j'ai une autre question pour la converstion Word (.doc ou .docx) -> XML, il existe déjà des api pour çà ? Parce que sinon qu'elle solution vous utiliserez ?

[deathdigger]

les docx sont des fichiers zip avec du xml dedans en gros (renomme un .docx en .zip et tu verras), mais il me semble avoir vu des bibliothèques toute faites sur ce même topic

[SPL1T]

B'soir, camarades canards, je me retourne vers vous car je coince pas mal sur mon Javascript
En effet, j'ai un formulaire et je souhaite vérifier à chaque action de l'utilisateur (bouton radio coché, image sélectionnée, champ rempli) les informations dans leur intégralité afin d'afficher ou non le bouton de validation.
Aussi, je passe donc par une succession de boucle dont une qui appelle une autre fonction, celle de vérification des fichiers. A un moment, pour la vérification de la taille/poids de l'image, je crée un objet image puis j'utilise la méthode onload qui appelle une fonction.
Problème, ce qui se passe dans cette fonction ne se déroule qu'une fois ma fonction initiale terminée. J'image que c'est lié à la lecture de l'image, mais ça m'empêche de récupérer la bonne valeur de ma variable dans ma boucle vu que celle-ci ne s'incrémente qu'une fois la fonction terminée.
Je ne sais pas si mes explications sont claires, voici mon code Js au cas où :

    var champ_valide = 0;

    function recuperer_extension(input)
   {
         if (input!='')
         {
            var nom_fichier = input;// on récupere le chemin complet du fichier
			var extension = nom_fichier.split(".")[1];
			extension = nom_fichier.substring(nom_fichier.indexOf(".")+1);
            extension = extension.toLowerCase(); //on uniforme les caractères en minuscule au cas ou cela aurait été écris en majuscule
            return extension; // on renvoi l'extension vers la fonction appelante
         }
   }


function verifier_fichier(input, mode){
// on appelle la fonction permettant de récuperer l'extension du fichier envoyé et on stocke le résultat dans une variable	
	var extension = recuperer_extension(input.value);// 
	var erreur = "";
	var mode = mode;
//on vérifie si l'extension récupérée est valide ou non   
	if(extension!="jpg" && extension!="jpeg" && extension!="gif" && extension!="png" && extension!=undefined){
		erreur +=  "L'extension "+extension+" n'est pas valide.\n Veuillez utiliser des images au format JPEG/GIF/PNG uniquement.";
		if(mode == 0)
		{
		alert(erreur);
		}
	}
	else{
	var poids = input.files[0].size;
	if(poids > 51200){// si le poids de l'image dépasse 1 Mo
		erreur += "Le poids de votre image est trop élevé.\n";
	}
	var fichier = input.files[0];
	window.URL = window.URL || window.webkitURL;
	img = new Image();
	img.onload = function(){ 
		var bool = bool;
		if(img.width >= 100 && img.height >= 100){
			erreur += "La résolution de votre image est incorrecte.";
		}
		if(erreur!='' && mode==0) {
			alert(erreur);
		}
		else if(erreur!='' && mode==1) {
			alert("test");
		}
		else if(erreur=='' && mode==1) {
			champ_valide++;
			alert(champ_valide);
			//alert(input.id + "\n" + champ_valide);
		}
	}
	img.src = window.URL.createObjectURL(fichier);
	}
}

function afficher_bouton_upload() {
	if(document.form1.mode[0].checked)
	{
		champ_valide = 0;
		var test = 0;
		if(form1.question.value!='') {
			test++;
		}
		var champs = document.getElementById("compteur").value;
		var i=1;
		while(i<=champs) {
			if(document.getElementById('fichier'+i).value!=0)
			{
			var temp = document.getElementById('fichier'+i);
			verifier_fichier(temp, "1");
			}
			i++;
		}
		alert(test + " " + champ_valide + " " + champs);
		if(test==1 && champ_valide==champs) {
			document.getElementById("validation").style.display = "block";
		}
	}
}

[Anon26492]

Dans le doute... Revoque le createObject...

[SPL1T]

J'ai quelques bases en objets (et en développement pour faire simple ), mais je ne vois pas trop où tu veux aller en disant qu'il faille le "révoquer".

[Anon26492]

Dans ton onload : window.URL.revokeObjectURL(fichier)

(En fait j'ai mal lu ton problème, j'avais l'impression que ton truc marchait une première fois mais pas ensuite, je sais pas' comment j'ai pu comprendre ça )

---------- Post added at 20h36 ---------- Previous post was at 20h27 ----------

Hum, en fait t'as juste une race condition à cause du temps de chargement de l'image...
Je pense que ton principe de base (les boucles) est mauvais.

Ce genre de truc soit tu le traites de manière synchrone avec des callbacks, soit asynchrone avec des promesses...

[Awake]

Hum à cause du onLoad il ne pourra que faire le traitement de manière asynchrone. Ce que je ferai c'est passer un callback (genre onDone) en troisième argument de la fonction verifier_fichier, que tu appelle une fois toutes les vérifications faites avec onDone.call(input, erreur);. Le problème c'est que les vérifications s'afficherons au fur-et-à-mesure du chargement des images.

L'autre solution c'est dans un premier temps de charger toutes les images puis de faire les vérifications (en synchrone du coup vu que onLoad ne sera plus nécessaire dans la seconde étape).

[SPL1T]

Justement, ma fonction afficher_bouton_upload() n'affiche à aucun moment les vérifications (deuxième paramètre à 1), donc le faire de façon asynchrone ne pauserait pas vraiment de problème.
Il va juste falloir que je m'intéresse aux callbacks car c'est quelque-peu nouveau pour moi, la soirée risque d'être longue
Merci pour votre aide en tout cas.

Edit : j'ai finalement réussi en ajoutant un setTimeout histoire de laisser le temps à mes images de charger

[Awake]

j'ai finalement réussi en ajoutant un setTimeout histoire de laisser le temps à mes images de charger

Mais c'est pire que tout Si les images mettent du temps à se charger plus rien ne va marcher !

Les callbacks c'est juste passer une fonction en argument genre pour reprendre mon exemple :

verifier_fichier(temp, "1", function(erreur) {
    if (erreur == '') alert("woot woot");
    else alert(erreur);
});

Faut intégrer qu'en javascript une fonction est un object comme un autre, après c'est plus si compliqué.

[Anon26492]

Il peut simplement passer la logique de la boucle dans la fonction verifier. C'est sale mais c'est encore le plus simple à comprendre.
Tout dépend ce qu'il cherche... un truc qui marche ou alors apprendre la bonne méthode.

[SPL1T]

Avoir un truc qui marche et apprendre la bonne méthode serait un bon compromis cependant.
Le problème, c'est que j'ai vraiment du mal me représenter l’utilisation des callbacks dans ma fonction verifier_fichier

[Tomaka17]

Exemple de code :

function faire_un_truc_asynchrone(callback) {
    // ... blablabla ...

    var image = ...;
    image.onLoad = function() {
         callback();    // on appelle le callback
    };
}

faire_un_truc_asynchrone(function() {
    // cette fonction sera appelée lorsque le truc asynchrone sera terminé
    alert('opération asynchrone terminée');
});

[Anon26492]

C'est l'une des raisons pour lesquelles il vaut mieux enseigner la syntaxe
var mafonction = function() {}
que
function mafonction() {}

La première permet tout de suite de comprendre qu'une fonction est un objet

[lekteur]

Je suis en train d'essayer d'utiliser vos impôts pour me faire payer une formation par pôle emploi, pour valider officiellement ce que j'ai appris à l'arrache dans mon précédent job. J'ai été contacté par 3WA, est-ce que cette boîte à une bonne réputation ?

[Anon26492]

Si j'en crois le code de leur site, non.

[Awake]

Si j'en crois le code de leur site, non.

Y'a quelques trucs pas fantastiques mais rien de bien grave de ce que j'ai vu. Tu leur reproche quoi par curiosité ?