PureBasic

Forums PureBasic - Français
http://forums.purebasic.com/french/

HTML Maker

http://forums.purebasic.com/french/viewtopic.php?t=16722

Page 1 sur 1

HTML Maker

Publié : jeu. 25/mai/2017 23:29
par SPH
Salut a tous,

je suis en train de coder en PB un generateur de html. Mais je ne voudrais pas trop m'avancer en PB sans savoir si je vais dans la bonne direction. Aussi, voici un petit code html qui affiche 4 images en 2 colonnes.
Pouvez vous me dire si le code html suivant est 'propre' ? :arrow:

Code : Tout sélectionner

<!DOCTYPE html>
<html lang="fr">
<head>
<title>SPH</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" />
</head>
<body background="fond.gif">
<center>

<td width='55' align=center valign=center>
<a href="http://www.google.fr" target="_blank">
<img src="http://xmas.free.fr/blender/mini/SPH003.jpg" border=1></a>
</td>
<td width='55' align=center valign=center>
<a href="http://www.google.fr" target="_blank">
<img src="http://xmas.free.fr/blender/mini/SPH004.jpg" border=1></a>
</td>

<br />

<td width='55' align=center valign=center>
<a href="http://www.google.fr" target="_blank">
<img src="http://xmas.free.fr/blender/mini/SPH005.jpg" border=1></a>
</td>
<td width='55' align=center valign=center>
<a href="http://www.google.fr" target="_blank">
<img src="http://xmas.free.fr/blender/mini/SPH006.jpg" border=1></a>
</td>

<br />
</body>
</html>

Re: HTML Maker

Publié : ven. 26/mai/2017 0:05
par falsam
Pourquoi pour chaque miniature de photo tu as cette ligne ?

Code : Tout sélectionner

<a href="http://www.google.fr" target="_blank">
Pour chacune de tes images tu n'es pas obligé de préciser le nom de ton site. Remplace

Code : Tout sélectionner

<img src="http://xmas.free.fr/blender/mini/SPH006.jpg" border=1></a>
par

Code : Tout sélectionner

<img src="blender/mini/SPH006.jpg" border=1></a>

Re: HTML Maker

Publié : ven. 26/mai/2017 0:08
par Zorro
sinon tu as des sites en ligne pour tester ton code JavaScript oou Html

ici par exemple : https://jsfiddle.net/

Re: HTML Maker

Publié : ven. 26/mai/2017 11:48
par JohnJohnsonSHERMAN
Il y a aussi le validateur officiel du W3C, l'organisme en charge du HTML, du CSS et des technologies Web : https://validator.w3.org/

Ah, il y a deux "mauvaises pratiques" dans ton code :
  • L'utilisation de propriétés CSS dans les balises HTML
  • L'utilisation d'un tableau pour de la mise en page (ie. pour autre chose que le classement de données) :twisted:
Bon pour le </br> on passera pour cette fois :P

Mais si on fait abstraction de ces petits "détails", alors oui c'est clair, c'est toujours super pratique un éditeur WYSIWYG HTML :)
Le plus serait de créer en même temps le css qui va bien ;) En tout cas c'est absolument une idée géniale, bon courage pour ce projet :)

Re: HTML Maker

Publié : ven. 26/mai/2017 11:52
par Marc56
Pourquoi pour chaque miniature de photo tu as cette ligne ?

Code : Tout sélectionner

<a href="http://www.google.fr" target="_blank">
Pour qu'en cliquant sur une des images ça ouvre une nouvelle fenêtre sur http://www.google.fr (ce que ça fait très bien)
Oui, c'est pas du javascript, juste du bon vieux html :wink:

@SPH
  • <!DOCTYPE html> (beurk) :arrow: <html> ça suffit bien.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge"> (beurk)
  • <meta http-equiv=Content-Type content="text/html; charset=utf-8" /> c'est bien pour ne pas avoir à s'emm... avec la gestion des accents (penser à encoder le source en UTF-8)
  • Manque les balises <TABLE></TABLE> (bien que ça marche aussi bien sans)
  • Pas besoin \> <BR> est une balise unique
Même le plus moderne des navigateurs sait lire le HTML 2.01 donc inutile de se compliquer la vie.
Oui, les tableaux c'est mal, mais ça passe partout et la mise en page restera la même, même si la feuille de style n'est pas chargée.

8)

Re: HTML Maker

Publié : ven. 26/mai/2017 12:44
par Ar-S
Je serai toi je me pencherai sur les CSS avec les id et class.
Même si les tableaux ça marche toujours, ce n'est plus trop d'actualité pour présenter des images.
+1 pour l'utf8, c'est bien de le préciser.
ça te compliquera (un peu) la tâche de gérer le CSS et la page web car ça te fait 2 fichiers au lieu d'un, mais ce sera vraiment plus puissant et te permettra de plus jolis rendus.

En l'état, petites modifs avant ta balise body :

Code : Tout sélectionner

<!DOCTYPE html>
<html lang="fr-FR" dir="ltr">

<head>
<title>SPH</title>
<meta charset="UTF-8">
</head>
<br> suffit au lieur de ton <br />

Re: HTML Maker

Publié : ven. 26/mai/2017 13:08
par TazNormand
Salut SPH,

plusieurs points (dans le désordre) sur ton code HTML généré :
  • On utilise les balises <td> à l'intérieur d'une balise <table>
    comme Ar-S te l'a précisé, on n'utilise plus trop les tables pour "centrer" des images, sauf si l'on doit présenter des "données" sous forme de tableaux
    Concernant les chemins absolus pour les URL de tes images, contrairement à Falsam, je suis plutôt pour les laisser, surtout si l'hébergement du source HTML venait à changer
    <br /> est autorisé, il permet d'aller à la ligne sans générer un nouveau paragraphe, et laisse le / à la fin, c'est une bonne pratique même si la balise est unique
    laisse le DOCTYPE, certains navigateurs (autres que les ténors) en ont besoin
    les styles en ligne ne sont pas conseillés sur une page html => feuille de style externe, ou gros bloc <style>...</style> si tu n'as pas le choix
Voilà, sinon, pour tester en réel tes codes générés en local, tu as soit Wamp soit easyPHP

Re: HTML Maker

Publié : ven. 26/mai/2017 17:13
par SPH
Voila, j'ai fini ma routine :

Code : Tout sélectionner

UseJPEGImageEncoder()
UseJPEGImageDecoder()
UseGIFImageDecoder()
UsePNGImageDecoder()



Repertoire$ = "c:\SPH\photos2017test\" 


vignette=1
colonne=8
cmb=0



If ExamineDirectory(0, Repertoire$, "*.*")  
  
  If CreateFile(0, Repertoire$+"index.html")
  Else
    MessageRequester("Erreur","Fabrication HTML impossible") : End 
  EndIf
  
  WriteStringN(0,"<!doctype html>")
  WriteStringN(0,"<html lang="+Chr(34)+"fr"+Chr(34)+">")
  WriteStringN(0,"<head>")
  WriteStringN(0,"<title>SPH</title>")
  WriteStringN(0,"<meta http-equiv="+Chr(34)+"X-UA-Compatible"+Chr(34)+" content="+Chr(34)+"IE=edge"+Chr(34)+">")
  WriteStringN(0,"<meta charset="+Chr(34)+"utf-8"+Chr(34)+" />")
  WriteStringN(0,"</head>")
  WriteStringN(0,"<body background="+Chr(34)+"fond.gif"+Chr(34)+">")
  WriteStringN(0,"<center>")
  
  
  While NextDirectoryEntry(0)
    If DirectoryEntryType(0) = #PB_DirectoryEntry_File
      file$= DirectoryEntryName(0)
      Debug file$
      
      a$=Right(file$,5)
      Position = FindString(a$,".") ; 'Position' recevra la valeur 5
      If position<>0
        type$=Right(a$,5-position)
        Debug type$
       
        
        
        ;If viguette=1
        If (LCase(type$)="jpg" Or LCase(type$)="jpeg" Or LCase(type$)="bmp" Or LCase(type$)="gif" Or LCase(type$)="png") And file$<>LCase("fond.gif")
          ;creer une mini image
          If vignette<>0
            If wwww=0
              CreateDirectory(Repertoire$+"mini")
              wwww=1
            EndIf
            LoadImage(0,Repertoire$+file$)
            CopyImage(0,1)
            ResizeImage(1, 128,100)
            SaveImage(1,Repertoire$+"mini/"+file$,#PB_ImagePlugin_JPEG)
            FreeImage(1)
          EndIf
          
          WriteStringN(0,"<td width='55' align=center valign=center>")
          WriteStringN(0,"<a href="+Chr(34)+file$+Chr(34)+" target="+Chr(34)+"_blank"+Chr(34)+">")
          WriteStringN(0,"<img src="+Chr(34)+"mini/"+file$+Chr(34)+" border=1></a>")
          WriteStringN(0,"</td>")
          
          cmb+1
          If cmb>=colonne
            cmb=0
            WriteStringN(0,"<br />")
          EndIf
          
        EndIf
        ;EndIf
        
      EndIf
      
    EndIf
    
  Wend
  FinishDirectory(0)
  
  WriteStringN(0,"<br />")
  WriteStringN(0,"</body>")
  WriteStringN(0,"</html>")
  CloseFile(0)
  
  
EndIf
Il faut maintenant que je la mette dans une fenetre et faire des gadgets et tout et tout...
Mais ca marche : renseignez le nombre de colonne que vous voulez et indiquez ou se trouve vos photos 8)

Re: HTML Maker

Publié : ven. 26/mai/2017 22:10
par falsam
Tout en respectant ta philosophie d'écriture de ton code, cette modification permet de ne plus tenir compte des info EXIF pour l'affichage de tes images.

De la même manière que les images miniatures sont dans un dossier que tu as nommé mini, les images à visualiser seront sauvegardées dans le dossier images. La sauvegarde supprime les info EXIF.

Cette méthode permet de préserver les images originales.

Code : Tout sélectionner

UseJPEGImageEncoder()
UseJPEGImageDecoder()
UseGIFImageDecoder()
UsePNGImageDecoder()

Repertoire$ = GetCurrentDirectory()

viguette=1
colonne=8
cmb=0

If ExamineDirectory(0, Repertoire$, "*.*")  
  
  If CreateFile(0, Repertoire$+"index.html")    ; Ouvre un fichier existant ou en crée un nouveau s'il n'existait pas
                                                ;  FileSeek(0, Lof(0))           ; Place le pointeur à la fin du fichier en utilisant le résultat de Lof() 
  Else
    MessageRequester("Erreur","Fabrication HTML impossible") : End 
  EndIf
  
  WriteStringN(0, "<!DOCTYPE html>")
  WriteStringN(0, "<html lang="+#DQUOTE$+"fr"+#DQUOTE$+">")
  WriteStringN(0, "<head>")
  WriteStringN(0, "<title>SPH</title>")
  WriteStringN(0, "<meta http-equiv="+#DQUOTE$+"X-UA-Compatible"+#DQUOTE$+" content="+#DQUOTE$+"IE=edge"+#DQUOTE$+">")
  WriteStringN(0, "<meta charset="+#DQUOTE$+"utf-8"+#DQUOTE$+" />")
  WriteStringN(0, "</head>")
  WriteStringN(0, "<body background="+#DQUOTE$+"fond.gif"+#DQUOTE$+">")
  WriteStringN(0, "<center>") 
  
  While NextDirectoryEntry(0)
    If DirectoryEntryType(0) = #PB_DirectoryEntry_File
      file$ = LCase(DirectoryEntryName(0))
      Debug file$      
      Type$ = GetExtensionPart(file$)
        Debug type$
        
        If (type$="jpg" Or type$="jpeg" Or type$="bmp" Or type$="gif" Or type$="png") And file$<>"fond.gif"
          ;creer une mini image
          If viguette=1
            If wwww=0
              CreateDirectory(Repertoire$+"mini")
              CreateDirectory(Repertoire$+"images")              
              wwww=1
            EndIf
            LoadImage(0,Repertoire$+file$)
            CopyImage(0,1)
            SaveImage(1,Repertoire$+"images/"+ file$, #PB_ImagePlugin_JPEG, 10)
            
            ResizeImage(1, 128,100)
            SaveImage(1,Repertoire$+"mini/"+file$, #PB_ImagePlugin_JPEG)
            FreeImage(1)
          EndIf
          
          WriteStringN(0,"<td width='55' align=center valign=center>")
          WriteStringN(0,"<a href=" + #DQUOTE$+"images/" + file$ + #DQUOTE$ + " target="+#DQUOTE$+"_blank"+#DQUOTE$+">")
          WriteStringN(0,"<img src="+ #DQUOTE$+"mini/" + file$ + #DQUOTE$ + " border=1></a>")
          WriteStringN(0,"</td>")
          
          cmb+1
          If cmb>=colonne
            cmb=0
            WriteStringN(0,"<br />")
          EndIf        
      EndIf
    EndIf
  Wend
  FinishDirectory(0)
  
  WriteStringN(0,"</body>")
  WriteStringN(0,"</html>")
  CloseFile(0)
EndIf
Sur le serveur (free chez toi) il suffit de transférer le fichier index.html + le dossier mini + le dossier images.

Ton code mériterait un carrossage un peu plus chiadé.
- Sélection du dossier des images à lire.
- Sélection des images à prendre en compte.
- Taille des miniatures.
- Choix d'une couleur de fond ou image de fond.
- Saisir le titre à afficher dans l'onglet.

Ooops j'oubliais : Tu vas devoir coder des fenêtres et des gadgets. :mrgreen:

En tout cas merci pour ce partage. :wink:

Re: HTML Maker

Publié : ven. 26/mai/2017 22:31
par falsam
La qualité par défaut des images sauvegardées dans le dossier images étant fixée à 7, tu pourrais te poser la question "Est ce qu'on peut faire mieux ?" et la réponse et oui.

Remplace

Code : Tout sélectionner

SaveImage(1,Repertoire$+"images/"+file$,#PB_ImagePlugin_JPEG)
par

Code : Tout sélectionner

SaveImage(1,Repertoire$+"images/"+file$,#PB_ImagePlugin_JPEG, 10)

Re: HTML Maker

Publié : sam. 27/mai/2017 10:20
par SPH
http://memolink.free.fr/IMG_0429.jpg
est ce que la photo est en mode portrait ?

J'ai trouvé l'un des problemes : 1.jpg <> 1.JPG
Les majuscules doivent etre respectées sur free.

Bon, je n'y touche plus car la, ca marche... 8)

Re: HTML Maker

Publié : sam. 27/mai/2017 11:23
par cage
La photo est bien en mode portrait.

Re: HTML Maker

Publié : sam. 27/mai/2017 11:43
par falsam
Par contre ton nouveau code ne fonctionne toujours pas. Les photos qui devrait s'affichées en portrait restent en paysage.

Oui tu vas me dire "Chez moi ça fonctionne tu vois bien"

Ca fonctionne parce que tu as retouché chacune de tes photos avec Photofiltre et donc suppression des datas EXIF.

Plutôt fastidieux non ? Regarde mon code de nouveau : Tu n'auras plus besoin de passer par une application tiers pour modifier tes photos une par une et de plus tu ne touches pas à l'intégrité de tes photos initiales :wink:

Re: HTML Maker

Publié : sam. 27/mai/2017 11:50
par falsam
Suite à ton souci de casse j'ai modifié mon code en conséquence.

Re: HTML Maker

Publié : sam. 27/mai/2017 13:14
par SPH
Bon, j'avais un probleme de casse (je crois)

merci pour votre aide 8)
Fuseau horaire sur UTC+01:00
Page 1 sur 1

Développé par phpBB® Forum Software © phpBB Limited

Traduction française officielle © Qiaeru