HTML Maker

Vous débutez et vous avez besoin d'aide ? N'hésitez pas à poser vos questions
Avatar de l’utilisateur
SPH
Messages : 4947
Inscription : mer. 09/nov./2005 9:53

HTML Maker

Message 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>

!i!i!i!i!i!i!i!i!i!
!i!i!i!i!i!i!
!i!i!i!
//// Informations ////
Intel Core i7 4770 64 bits - GTX 650 Ti
Version de PB : 6.12LTS- 64 bits
Avatar de l’utilisateur
falsam
Messages : 7324
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :

Re: HTML Maker

Message 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>
Configuration : Windows 11 Famille 64-bit - PB 6.20 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Avatar de l’utilisateur
Zorro
Messages : 2186
Inscription : mar. 31/mai/2016 9:06

Re: HTML Maker

Message par Zorro »

sinon tu as des sites en ligne pour tester ton code JavaScript oou Html

ici par exemple : https://jsfiddle.net/
Avatar de l’utilisateur
JohnJohnsonSHERMAN
Messages : 648
Inscription : dim. 13/déc./2015 11:05
Localisation : Allez, cherche...
Contact :

Re: HTML Maker

Message 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 :)
"Le bug se situe entre la chaise et le clavier"
Votre expert national en bogage et segfaults.

CPU : AMD A8 Quad core - RAM 8Gb - HDD 2To
  • Windows 10 x64 - PB 5.61 x64
  • Linux Ubuntu 16.04 LTS x64 (dual boot) - PB pas encore réinstallé
Marc56
Messages : 2198
Inscription : sam. 08/févr./2014 15:19

Re: HTML Maker

Message 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)
Avatar de l’utilisateur
Ar-S
Messages : 9540
Inscription : dim. 09/oct./2005 16:51
Contact :

Re: HTML Maker

Message 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 />
~~~~Règles du forum ~~~~
⋅.˳˳.⋅ॱ˙˙ॱ⋅.˳Ar-S ˳.⋅ॱ˙˙ॱ⋅.˳˳.⋅
W11x64 PB 6.x
Section HORS SUJET : ICI
LDV MULTIMEDIA : Dépannage informatique & mes Logiciels PB
UPLOAD D'IMAGES : Uploader des images de vos logiciels
Avatar de l’utilisateur
TazNormand
Messages : 1297
Inscription : ven. 27/oct./2006 12:19
Localisation : Calvados (14)

Re: HTML Maker

Message 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
Image
Image
Avatar de l’utilisateur
SPH
Messages : 4947
Inscription : mer. 09/nov./2005 9:53

Re: HTML Maker

Message 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)
Dernière modification par SPH le sam. 27/mai/2017 11:08, modifié 1 fois.

!i!i!i!i!i!i!i!i!i!
!i!i!i!i!i!i!
!i!i!i!
//// Informations ////
Intel Core i7 4770 64 bits - GTX 650 Ti
Version de PB : 6.12LTS- 64 bits
Avatar de l’utilisateur
falsam
Messages : 7324
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :

Re: HTML Maker

Message 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:
Configuration : Windows 11 Famille 64-bit - PB 6.20 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Avatar de l’utilisateur
falsam
Messages : 7324
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :

Re: HTML Maker

Message 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)
Configuration : Windows 11 Famille 64-bit - PB 6.20 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Avatar de l’utilisateur
SPH
Messages : 4947
Inscription : mer. 09/nov./2005 9:53

Re: HTML Maker

Message 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)

!i!i!i!i!i!i!i!i!i!
!i!i!i!i!i!i!
!i!i!i!
//// Informations ////
Intel Core i7 4770 64 bits - GTX 650 Ti
Version de PB : 6.12LTS- 64 bits
Avatar de l’utilisateur
cage
Messages : 604
Inscription : ven. 16/oct./2015 18:22
Localisation : France
Contact :

Re: HTML Maker

Message par cage »

La photo est bien en mode portrait.
■ Win10 Pro 64-bit (Intel Celeron CPU N2920 @ 1.86GHz, 4,0GB RAM, Intel HD Graphics) & PB 6.12 LTS
■ Vivre et laisser vivre.
■ PureBasic pour le fun
■ Gérard sur le forum Anglais
■ Mes sites: http://pbcage.free.fr - http://yh.toolbox.free.fr
Avatar de l’utilisateur
falsam
Messages : 7324
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :

Re: HTML Maker

Message 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:
Configuration : Windows 11 Famille 64-bit - PB 6.20 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Avatar de l’utilisateur
falsam
Messages : 7324
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :

Re: HTML Maker

Message par falsam »

Suite à ton souci de casse j'ai modifié mon code en conséquence.
Configuration : Windows 11 Famille 64-bit - PB 6.20 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Avatar de l’utilisateur
SPH
Messages : 4947
Inscription : mer. 09/nov./2005 9:53

Re: HTML Maker

Message par SPH »

Bon, j'avais un probleme de casse (je crois)

merci pour votre aide 8)

!i!i!i!i!i!i!i!i!i!
!i!i!i!i!i!i!
!i!i!i!
//// Informations ////
Intel Core i7 4770 64 bits - GTX 650 Ti
Version de PB : 6.12LTS- 64 bits
Répondre