Les anglonautes

About | Search | Vocapedia | Learning | Podcasts | Videos | History | Culture | Science | Translate

 Previous Home Up Next

 

Les Anglonautes > About us

 

Qui sommes-nous ?

 

Codapart

 

Codage participatif / édition participative

 

Collaborative coding / editing

 

codages, CSS, méta-données,

navigation, référencement, listes de liens :

 

problèmes à régler en 2024-2025

 

 

 

1 / 10

 

PCs

(apparemment pas de souci

sur les Macs / Apple)

 

navigation > Chrome

 

page Anglonautes <-navigation-> autre page Anglonautes

ou page externe

(par exemple une page du Guardian)

 

 

terminologie : nous parlons de liens,

pas de signets.

 

 

objectif :

 

après avoir cliqué sur un lien

depuis une page Anglonautes,

retourner exactement

au point de navigation

dans cette page Anglonautes /

 

going back

to previous Anglonautes page

in the same scroll position.

 

 

 

description du problème :

 

lien http / https

listé dans une page Anglonautes

autre page Anglonautes

ou

page externe

(par exemple

une page du Guardian) :

 

 

depuis un lien listé

dans une page Anglonautes,

en théorie un clic-retour

(avec la souris

ou la flèche back du navigateur)

suffit pour revenir exactement

à votre point de navigation,

c'est à dire au lien

 que vous avez cliqué

dans la page Anglonautes.

 

 

Avec les pages Anglonautes

comportant un ou plusieurs iframe-s,

et nous insérons un iframe ci-dessous

pour rappeler

ce qu'est visuellement un iframe,

 

 

 

 

 

la navigation est

moins précise / pratique :

 

un clic-retour vous renvoie

non pas au point de navigation

dans la page Anglonautes,

mais en haut de cette page.

 

Il faut donc ensuite descendre

dans la page pour retrouver

le point de navigation.

 

 

Rappelons qu'un iframe

est un code inséré

dans le code HTML :

 

<iframe src="https://www.npr.org/player/embed/1120332628/1120377525"
width="100%" height="290" frameborder="0" scrolling="no"
title="NPR embedded audio player"></iframe>

 

 

 

Les iframes correspondent

aux éléments multimédia

intégrés

dans la page Anglonautes

(podcasts NPR,

vidéos YouTube,

cartes Google).

 

 

Lorsqu'une page Anglonautes

intègre un ou plusieurs codes iframes,

un clic-retour depuis une autre page Anglonautes

ou depuis une page d'un autre site

ne vous renvoie pas,

dans la page Anglonautes de départ,

au point de navigation (scrolling point),

mais en haut de cette page ;

il faut donc descendre (scroll down)

pour retrouver le point de navigation.

 

 

La présence d'un seul iframe

empêche le retour

au point de navigation.

 

 

Cliquez

sur la page Anglonautes

listée ci-dessous,

qui comporte plusieurs iframes

(depuis cette page

consacrée à Joan Rivers,

un clic-retour vous amènera

en haut de la page

que vous consultez maintenant) :

 

http://www.anglonautes.eu/arts/stage_theater_comedy_dance/comedy/
21_20_usa_rivers_joan_1933_2014/rivers.htm

 

 

 

 

 

 

 

2 cas particuliers

où il n'y a pas ce problème de navigation :

 

 

1 / 2 - Navigation entre 2 pages sans iframe

 

Quel que soit le navigateur,

un  clic-retour permet

de revenir précisément

au point de navigation / point de clic

dans la page précédente.

 

Faites le test en cliquant

sur cette page Anglonautes

sans iframe :

 

http://www.anglonautes.eu/history/
21_16_centuries_america_usa_timeline_in_pictures_photos_podcasts_videos/
20_usa_civil_rights/civil_rights_menu.htm

 

depuis cette page-menu,

cliquez sur Medgar Evers

(milieu du menu).

 

Depuis la page

consacrée à Medgar Evers,

vous revenez exactement

au point de navigation

dans le menu Civil rights.

 

 

 

 

 

2 / 9 - Navigation

depuis une page sans iframe

vers une page avec iframes

 

Cliquez

sur cette page Anglonautes

sans iframe :

 

http://www.anglonautes.eu/history/
21_16_centuries_america_usa_timeline_in_pictures_photos_podcasts_videos/
20_usa_civil_rights/civil_rights_menu.htm

 

depuis cette page-menu,

cliquez sur Emmett Till

(milieu du menu).

 

Depuis la page

consacrée à Emmett Till

- page avec iframes -

vous revenez exactement au point de navigation

dans le menu Civil rights,

qui ne contient aucun iframe,

comme tous les menus Anglonautes.

 

 

 

 

 

 

 

 

Pourquoi régler

ce problème de navigation

- sur tous les navigateurs -

est important :

 

même si de nombreuses

pages Anglonautes

sont divisées chaque semaine

en pages micro-thématiques

- elles sont donc moins longues -,

beaucoup de pages listent

des dizaines et des dizaines de liens,

et sont longues à parcourir :

 

il est urgent d'insérer un code

qui permette de "dire" aux navigateurs

de revenir précisément

au point de navigation.

 

 

 

 

 

Avec Firefox,

la navigation est aléatoire :

 

à partir d'une page Anglonautes

contenant des iFrames,

par exemple

 

http://www.anglonautes.eu/english%20words_vocabulary_in_news_by_topic_2000s_2010s_2020s_uk_usa/
economy/work_jobs/jobs_types/truckers/truck_drivers.htm

 

ou

 

http://www.anglonautes.eu/arts/stage_theater_comedy_dance/
comedy/21_20_usa_rivers_joan_1933_2014/rivers.htm

 

cliquer sur un lien externe

listé dans l'une de ces pages,

puis faire un clic-retour pour revenir

à la page Anglonautes de départ,

vous ramène soit au point de navigation,

soit en haut de cette page.

 

 

 

Avec Firefox Focus

(pour les smartphones)

aucun problème.

 

 

Une solution serait de déplacer les podcasts

vers des pages qui ne contiendraient

que des podcasts :

 

climate change > timeline in podcasts

 

 

 

2025 > Frontpage > Code > podcasts avec préfixe http >

rajouter un s à http;

sinon le podcast ne s'affiche pas en ligne.

Exemple :

http://www.npr.org/player/embed/475006489/475015351" width="100%" height="290"
frameborder="0" scrolling="no" title="NPR embedded audio player"></iframe></p>

 

https://www.npr.org/player/embed/475006489/475015351" width="100%" height="290"
frameborder="0" scrolling="no" title="NPR embedded audio player"></iframe></p>

 

 

 

 

 

 

 

 

 

2 / 10

 

autre problème à régler :

 

La CSS actuelle transforme

un texte en gras + 18 + n'importe quelle couleur

en

texte en gras + 18 + blanc.

 

Au départ,

lors du passage au dark mode,

il s'agissait de rendre plus lisible

certains textes en 18 gras

qui étaient en bleu sur fond blanc,

et donc de les afficher

en blanc sur fond noir

(bleu sur noir

étant peu lisible).

 

Donc tous les textes en

gras + 18 + n'importe quelle couleur

s'affichent en blanc,

ce qui pose problème

lorsqu'on veut par exemple

afficher un élément

du groupe verbal / modal

en gras + 18 + rouge.

 

Avec la CSS actuelle,

ce type d'élément s'affiche en blanc :

on perd l'information

rouge = verbe ou modal.

 

Travailler à partir de cette page :

http://www.anglonautes.eu/
english_grammar_explained_grammaire_anglaise_explicative_en_contexte/
prepositions/to/adjectif_ou_adverbe_to_preposition_nom.htm

pour faire notamment ressortir

la particule adverbiale du verbe go back

en

gras + 18 + rouge.

 

En attendant de modifier la CSS,

les éléments verbaux en gras + 18

ont été modifiés en maigre + 18 :

avec cette astuce,

le verbe s'affiche en rouge.

 

 

 

 

 

 

 

3 / 10

 

Longueur des pages :

les pages thématiques

seront divisées

en pages micro-thématiques.

 

 

Plus il y a

de pages micro-thématiques,

plus il faut créer de sous-menus

regroupant ces micro-thèmes :

 

Vocapedia > Earth > wildlife > birds

 

 

Ceci prend du temps,

mais au final

c'est très pratique

pour les utilisateurs,

qui depuis une page

- hummingbirds -

peuvent remonter immédiatement

au menu de la sous-rubrique

birds.

 

 

 

Autres exemples de sous-rubriques :

 

History > UK >

1930s-1940s > WW2 (1939-1945) > UK >

Timeline in articles, pictures, podcasts

 

1910s > WW1 (1914-1918) > UK >

Timeline in articles, pictures, podcasts

 

 

 

 

 

 

 

 

 

4 / 10

 

Vocapedia

 

liste des liens sous chaque mot

 

Créer une collapsible section

pour faire apparaître chaque liste de liens

avec un survol de souris.

 

Les premiers liens

apparaîtraient comme du texte normal,

pour s'estomper progressivement.

 

Est-ce possible ?

 

 

 

 

 

 

 

 

 

5 / 10

 

Référencement par Google

 

Trouver une solution à ce problème :

 

La présence

d'un ou plusieurs iFrames

dans une page Anglonautes

empêche un référencement clair

de cette page par Google.

 

Exemple :

dans la rubrique Histoire,

dans la page consacrée

au criminel de guerre Adolf Hitler,

la présence d'un iFrame

en début de page

amène Google à référencer en premier

le titre de l'IFrame :

 

 

 

et en second / en plus petit

le titre entré dans les métadonnées

des Anglonautes :

 

Anglonautes > History > 20th century >

WW2 > Germany > Nazi era > War criminals >

Adolf Hitler (1889-1945)

 

 

 

 

 

 

 

 

 

6 / 10

 

Référencement par Google > pages > heading

 

Faciliter le référencement

des titres des pages

- le titre que l'on voit

dans chaque page -

en intégrant la balise <h1> ?

 

Conflit

avec le titre en meta données

- que l'on ne voit pas -

dans Page properties > Description ?

 

 

 

 

 

 

 

 

 

7 / 10

 

Sur PC :

 

paramétrer le fond noir

dans la page d'accueil

et

dans toutes les pages de la rubrique

2022 > Enseignants en France :

revendications

salariales, statutaires et sanitaires

(sur PC, le fond est blanc).

 

 

 

En ligne :

ce défaut n'apparaît pas,

on a bien le fond noir.

 

 

 

 

 

 

 

8 / 10

 

Sur Chrome / PC :

le symbole ≠ ne s'affiche pas

correctement.

 

 

 

 

 

 

 

9 / 10

 

Version smartphone uniquement :

 

la barre des rubriques

- sous le nom du site -

s'affiche trop petit :

About | Search | Vocapedia | Learning | News podcasts | Videos | History | Arts | Science | Translate and listen

 

Il faudrait augmenter

la taille de la police de caractères

+

couper cette barre en deux :

 

au final,

sur l'écran d'un smartphone,

la barre des rubriques sera constituée

de 2 lignes :

About | Search | Vocapedia | Learning | News podcasts |

Videos | History | Arts | Science | Translate and listen

 

Le nom des rubriques est sauvegardé

dans l'un des 7 dossiers de gestion du site :

 

_borders

 

_derived

 

_fpclass

 

_overlay

 

_themes

(depuis janvier 2021,

inutile de télécharger ce dossier

sur le serveur car conflit avec la CSS de MC).

 

 

 

 

 

dossiers _vti_cnf à supprimer ?

 

https://social.msdn.microsoft.com/Forums/expression/en-US/
865f7f2e-58d9-4adb-a566-7cf3ec29ab17/problem-deleting-vti-folders?forum=web

 

1 /2 - un dossier _vti_cnf

apparaît à la racine du site,

en haut du toggle pane,

là où se trouvent

tous les dossiers de gestion / navigation.

 

 

 

2 / 2 - De plus,

dans chaque sous-dossier thématique

(health -> asbestos),

un dossier _vti_cnf

est généré par Microsoft.

 

Lorsque l'on crée un sous-dossier thématique

avec Frontpage,

ce dossier _vti_cnf n'apparaît pas.

 

Il est généré uniquement

lors du téléchargement

du fichier sur le serveur :

 

au final,

presque tous les sous-dossiers thématiques

sont chacun doublés d'un dossier _vti_cnf,

aussi bien sur le PC

que sur le serveur.

 

Il y a quelques exceptions :

 

health-> silica n'a pas de dossier _vti_cnf

 

A quoi servent

ces dossiers _vti_cnf ?

 

Faut-il les conserver

sur le PC et / ou le serveur ?)

 

 

 

 

 

dossier _vti_pvt

 

https://answers.microsoft.com/en-us/msoffice/forum/all/
regarding-vticnf-and-vtipvt/d526643e-2603-4b6c-b398-fcbbd32ef524

 

Comme le dossier _vti_cnf,

 ce dossier n'est pas visible / accessible

dans le toggle pane de Frontpage.

 

Il faut ouvrir le dossier Anglonautes

dans Windows.

 

 

 

 

 

 

 

10 / 10

 

Dans Vocapedia uniquement,

et dans cette rubrique

pour tout ce qui est centré,

et pour la version smartphone

uniquement

 

Pour une meilleure lisibilité

sur les smartphones,

il faudrait augmenter légèrement

la taille du mot / des séquences de mots

et la taille des liens, porteurs d'information,

qui se trouvent au centre de chaque page

(vocabulaire, liens, légendes).

 

Est-ce possible ?

 

Vu que sont également centrés

d'autres éléments

comme les titres de chaque page,

certains liens en bas de page...

 

 

 

coal county        USA

 

http://www.npr.org/2017/07/20/
537057946/as-coal-jobs-fade-a-mining-county-struggles-to-redefine-itself

 

 

 

 

 

 

 

coal jobs        USA

 

http://www.npr.org/2017/07/20/
537057946/as-coal-jobs-fade-a-mining-county-struggles-to-redefine-itself

 

http://www.npr.org/2017/05/06/
527047720/as-coal-jobs-decline-solar-sector-shines

 

 

 

 

 

 

 

Big Coal        USA

 

https://www.npr.org/2022/10/29/
1127520991/west-virginia-coal-mining-alpha

 

https://www.nytimes.com/2017/09/18/
opinion/using-the-epa-to-prop-up-big-coal.html

 

http://www.gocomics.com/chrisbritt/2016/12/14

 

http://www.nytimes.com/2016/06/10/
opinion/will-big-coal-pay-to-clean-up-its-messes.html

 

 

 

 

 

 

 

U.S. Coal Giant Peabody        USA

 

http://www.npr.org/sections/thetwo-way/2016/04/13/
474059310/u-s-coal-giant-peabody-energy-files-for-bankruptcy

 

 

 

 

 

 

 

coal baron        USA

 

http://www.nytimes.com/2016/04/08/
opinion/the-undoing-of-a-coal-baron.html

 

 

 

 

 

 

 

colliery        UK

 

http://www.theguardian.com/politics/the-northerner/2015/mar/06/
miners-strike-1984-num-yorkshire-archive

 

 

 

 

 

 

 

Maltby colliery in South Yorkshire        UK

 

http://www.guardian.co.uk/business/2013/apr/11/
slow-death-coal-industry

 

 

 

 

 

 

 

clean coal        USA

 

http://www.nytimes.com/2009/06/29/
opinion/29easterbrook.html

 

 

 

 

 

 

 

coal-fired station        UK

 

http://www.theguardian.com/business/2007/may/02/
politics.nuclearindustry

 

 

 

 

 

 

 

Drax power station in North Yorkshire

Britain's biggest coal-fired power station        UK

 

http://www.theguardian.com/uk/2006/aug/31/
greenpolitics.waste

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Intégration des vidéos YouTube

 

 

dimensions modifiées des vidéos avant 2020 :

 

1200 v 700

 

<iframe width="1200" height="700" src="//www.youtube.com/embed/zmr1iSG3RTA" frameborder="0" allowfullscreen></iframe>

 

sur la version smartphone,

la vignette de la vidéo s'affiche dans sa totalité,

de gauche à droite.

 

 

 

depuis 2022,

 

nous ne modifions pas les paramètres de base :

 

1280 x 720

 

<iframe width="1280" height="720" src="https://www.youtube.com/embed/i0IzV1q9g9Q" title="LAWRENCE OF ARABIA [1962] – Original Trailer (HD) | Now on 4K Ultra HD" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 

sur la version smartphone,

la vignette de la vidéo est légèrement cropped,

par contre une fois lancée,

la video s'affiche bien dans sa totalité;

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

_____________________________________

 

 

- Version

responsive design et dark mode :

en ligne à partir

du 12 décembre 2020.

 

version bêta pour smartphones :

en ligne et en développement

en 2022-2023- 2024.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

autres informations

pour les éditrices / éditeurs

 

 

 

Téléchargement

 

1 - Ouvrir FileZilla (logiciel gratuit).

 

 

2 - Dans le panneau de gauche Site local,

ouvrir le site Anglonautes.

 

 

3 - Tout en haut à gauche, dans Fichier,

ouvrir Gestionnaire de sites,

choisir Anglonautes dans

Sélectionnez une entrée.

 

 

4 - Dans le panneau de droite (serveur),

une fois effectuée la connexion avec le serveur,

choisir vhosts > anglonautes > htdocs

 

 

5 - Dans le panneau de gauche (ordinateur),

choisir le dossier à envoyer sur le serveur,

faire un clic-droit sur le dossier,

puis cliquer sur envoyer / téléverser.

 

Si le fichier cible existe déjà sur le serveur,

action > remplacer > toujours effectuer cette action

 

 

6 - Pour ouvrir un dossier

à la fois sur le PC et le serveur : Ctrl + y

 

Cette commande synchronise

la liste des dossiers et fichiers

sur l'ordinateur et le serveur.

 

Pratique pour éviter de télécharger un gros dossier

(ex : HISTORY)

lorsque l'on veut télécharger un seul sous-dossier

(ex : HISTORY 2014).

 

Dans l'idéal, il faudrait que,

dès qu'un fichier est sauvegardé sur l'ordinateur,

il soit automatiquement envoyé sur le serveur.

 

 

 

 

 

 

 

 

 

 

 

 

 

Edition

 

Toujours vérifier que l'on travaille sur le disque dur de travail,

et pas sur une copie du site sur un disque de sauvegarde.

 

 

 

- Nettoyage du PC avec SpyBot :

après nettoyage, ouvrir Frontpage -> Open file > Main disc > anglonautes

 

 

- Changement d'ordinateur,

changement de carte-mère

ou réinstallation de Windows ?

 

Réinstaller Frontpage 2003.

 

Une fenêtre peut indiquer

que certains fichiers n'ont pas été copiés :

aucune importance, cliquer sur IGNORER.

 

Ouvrir Anglonautes > Clic droit sur un fichier > Ouvrir avec >

Choisir un logiciel > Chercher logiciel >

Ordinateur > Disque local (C:) > Program Files (X86) >

Microsoft Office > OFFICE11 > FRONTPAGE > Toujours ouvrir avec

 

Attention, ne pas aller dans Disque local (C:) > Program

 

 

 

 

IMPORTANT :

pour renommer un dossier,

ne jamais le renommer depuis Windows :

le "renommage" est instantané,

mais on perd tous les liens de navigation / les icônes de navigation

gauche, haut, droite, maison.

Donc pour renommer un dossier,

il faut être sur Frontpage (logiciel d'édition Microsoft).

 

Autre problème lié à un renommage de dossier ou de page / fichier,

cette fois-ci depuis Frontpage : les icônes de navigation gauche, haut, maison, droite

apparaissent bien, mais lorsqu'on clique sur l'une de ces icônes,

on tombe sur une page blanche (avec l'ancienne adresse).

Pour rétablir la navigation, il suffit de faire une sauvegarde,

dans la page / le fichier concerné-e,

et / ou  dans les pages de gauche, de droite et de haut.

Cette sauvegarde peut être insignifiante,

on peut par exemple enregistrer un retour ligne, ça suffit.

 

Page d'accueil / Home page > Autre problème lié à un renommage de dossier :

par exemple, si je change le dossier Vocapedia en dossier Vocabulary,

et si je clique ensuite sur Vocapedia depuis  la barre des rubriques dans la page d'accueil,

on tombe sur une page blanche.

A nouveau, il suffit de faire une modification / suavegarde dans la page d'accueil

pour que le lien avec le dossier renommé marche,

et que l'on accède au menu Vocabulary.

 

Tout ceci est fastidieux mais ça marche.

 

 

 

 

 

- Dans la bannière de l'index / la page d'accueil,

ne jamais supprimer la mention

"Edit the properties for this link bar".

 

Supprimer cette mention

supprime toutes les icônes de navigation du site.

 

 

 

 

 

 

 

2022

 

Ressources Sitemap :

https://www.youtube.com/watch?v=xtoAfUB6Ubw

 

 

 

 

 

 

 

 

- Typographie

 

-> Janvier 2021 > Noto Sans

pour tous les titres / textes signalétiques / liens.

 

Arial pour les autres textes.

 

- > Avril 2021 > Régler le bug de <font size="1">

qui parasite les liens internes en <font size="5" face="Arial">,

et, en ligne,fait apparaître ces liens en size 1

(par contre ils apparaissent en size 5 dans FrontPage).

 

2020s > African-Americans

 

2010s > African-Americans

 

Donc supprimer <font size="1"> uniquement lorsqu'il y a ce problème

dans une section du code.

 

 

 

 

 

 

 

 

LIEN CSS

 

</script><link rel="stylesheet" type="text/css" href="z_css_table.css">

 

CSS > HOME PAGE > CSS MODIF 1er SEPTEMBRE 2022 POUR IMAGE :

 

body,p,img,span,iframe,font{box-sizing:border-box;}
table:first-of-type p:nth-of-type(2) nobr a{display:inline-block!important;/*Android Chrome?*/letter-spacing:initial;font-size:13px!important/*?*/;font-size:.82rem!important;}
table:first-of-type p:nth-of-type(2),p,p font,table{max-width:100vw!important;word-wrap:break-word!important;/*Android Chrome?*/}
table:first-of-type img,table:last-of-type img,img[src$="logo_google_sherlock.gif"],img[src*="z_symbol_at_guardian"]{filter:invert(1) hue-rotate(470deg) brightness(1) sepia(1) grayscale(1);max-width:276px !important;}
.in-house-logo-no-filter{filter:none!important;width:calc(100vw - 16px)!important;}
p[style*="margin-left:"],p[align="left"]/*,table+table p+p+p>font:only-child,table+table p>b:only-child,table+table p font[size="2"]
#if activated, bug on Videos cat*/{max-width:600px!important;width:calc(100vw - 16px);margin:16px auto!important;padding:0 8px;display:block;}
table:first-of-type td>font p+p>b>font{/*! white-space:pre-wrap !important/\*Android Chrome?*\/; *//*! margin-top:-1.5em; */display:block;}/*test for smartphone devices*/
input{filter:invert(1) hue-rotate(220deg);font-size:16px;max-width:213px;height:25px!important;}
img[src*="z_id_ill_emoji"]{filter:hue-rotate(390deg) invert() sepia(.3);}
img[src*="z_ill_headphones"]{filter:invert() hue-rotate(200deg);}
img[src*="z_ill_nyt_hat"]{filter: invert() hue-rotate(30deg);}
.long-img{max-height:none!important;}

 

 

table:last-of-type img

 

devient

 

table+table+ table:last-of-type img

 

 

 

 

 

 

 

CSS AU 1er SEPTEMBRE 2022

 

body{text-align:center;font-family:Arial;}
p{font-family:arial;}
table{width:1000px;text-align:left;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;line-height:200%;margin:auto;position:relative;}
a{text-decoration:none!important;}
a:visited{color:#8EA2C6;}
/*SUMMED-UP (+p:r;) WORKING ARCHIVES FROM BEFORE 2020 Major Tom Birthday*/
/*CURRENT OVERRIDING CSS*/

body{margin:0;padding:0;max-width:100vw!important;position:relative;overflow-x:hidden;scroll-behavior:unset;background-color:black;color:#ccc;letter-spacing:.02em!important;scrollbar-color:grey black;scrollbar-width:thin;line-height:1.15;-webkit-text-size-adjust: 100%;/*iOS*/;font-size:16px!important;}
img {
height:unset!important;
width:unset!important;
border-style:none;/*IE10*/
}
img, iframe{
max-width:100vw!important;
max-height:100vh!important;
}
iframe[src^="https://www.npr.org/player/embed/"]{width:100vw!important;max-width:750px!important;}

body,p,img,span,iframe,font{box-sizing:border-box;}
table:first-of-type p:nth-of-type(2) nobr a{display:inline-block!important;/*Android Chrome?*/letter-spacing:initial;font-size:13px!important/*?*/;font-size:.82rem!important;}
table:first-of-type p:nth-of-type(2),p,p font,table{max-width:100vw!important;word-wrap:break-word!important;/*Android Chrome?*/}
table:first-of-type img,table:last-of-type img,img[src$="logo_google_sherlock.gif"],img[src*="z_symbol_at_guardian"]{filter:invert(1) hue-rotate(470deg) brightness(1) sepia(1) grayscale(1);max-width:276px !important;}
.in-house-logo-no-filter{filter:none!important;width:calc(100vw - 16px)!important;}
p[style*="margin-left:"],p[align="left"]/*,table+table p+p+p>font:only-child,table+table p>b:only-child,table+table p font[size="2"]
#if activated, bug on Videos cat*/{max-width:600px!important;width:calc(100vw - 16px);margin:16px auto!important;padding:0 8px;display:block;}
table:first-of-type td>font p+p>b>font{/*! white-space:pre-wrap !important/\*Android Chrome?*\/; *//*! margin-top:-1.5em; */display:block;}/*test for smartphone devices*/
input{filter:invert(1) hue-rotate(220deg);font-size:16px;max-width:213px;height:25px!important;}
img[src*="z_id_ill_emoji"]{filter:hue-rotate(390deg) invert() sepia(.3);}
img[src*="z_ill_headphones"]{filter:invert() hue-rotate(200deg);}
img[src*="z_ill_nyt_hat"]{filter: invert() hue-rotate(30deg);}
.long-img{max-height:none!important;}

/*Priority css here for colors in general*/
a:link{color:#6653ff!important;/*contrast on white bg*/color:#8280ff !important;/*contrast on black bg*/background-color:transparent;/*IE10*/}
font[color*="0000FF"],a[href^="#"]/*,table:nth-of-type(2) a[href^="../../"]*/{color:cornflowerblue!important;color:#6495ed!important;}
font[color*="FF0000"]{color:deeppink;color:#ff425b;color:#ff421b!important;}
font[color*="000000"],p[style*="color: rgb(0, 0, 0)"],b font[size="5"],font[size="5"] b{color:#ccc!important;}
::selection{background:goldenrod;color:black;}
/**/span[style*="background-color: #FFFFFF"],span[style*="background-color:#FFFFFF"],p[style*="background-color: rgb(255, 255, 255)"]{background:transparent!important;font-style:italic!important;}
/**/span[style*="#FFFF00"]{background:transparent !important;color:#fef717;}
/**/span[style*="background-color: #C0C0C0"]{background:transparent!important;color:inherit;text-underline-offset:.5em;text-decoration:underline 1px solid #ffab71;}
/**/u{text-underline-offset:.5rem;text-decoration-color:white;}

/*Priority css here for titles and links which can overide colors's priority, if needed - keep in order !*/
a font[size="5"],font[size="5"] a{font-size:24px;}/*in case of manual typing error*/
/*font[size="4"] a,a font[size="4"],font[size="4"] a+br+a,font[size="1"]+a,font[size="2"]+a,font[size="3"]+a,font[size="4"]+a{}
font[size="4"] a+br+a,font[size="4"] a:only-of-type,a:only-of-type font[size="4"]{}*/
/**/table:nth-of-type(2) a,a,font[size="5"],p>b>font[size="2"],p>font[size="2"]>b,body:before{font-family:Noto Sans,Noto Sans CJK JP,Arial!important;}
/*font[size="4"] a,a font[size="4"],font[size="4"] a+br+a,font[size="1"]+a,font[size="2"]+a,font[size="3"]+a,font[size="4"]+a,*/
font[size="1"] a,a font[size="1"],font[size="1"] a+br+a{font:1em /*Verdana,*/Liberation Mono!important;letter-spacing:initial!important;font-size:12px!important;line-height:120%!important;}
a:hover,a:focus,font[size="5"]>a:hover>font,font[size="5"]>a:focus>font{color:white!important;outline:none;}

table:first-of-type td>p>a{display:inline-block}
table:last-of-type td>p>a:first-of-type:focus{position:relative}
table:first-of-type td>p>a:active,
table:last-of-type td>p>a:last-of-type:active{outline-color:transparent!important}
table:first-of-type td>p>a:focus,
table:last-of-type td>p>a:last-of-type:focus{outline:1px solid white}
table:last-of-type td>p>a:first-of-type:active:before{display:none!important}
table:last-of-type td>p>a:first-of-type:focus:before{content:"";display:block;position:absolute;width:50px;height:50px;border:1px solid white;box-sizing:border-box;
margin:-20px 0 0 -12px;z-index:10}
table:last-of-type p:nth-of-type(2){margin-bottom:0}
table:last-of-type a:first-of-type{padding-bottom:16px}

input[type="submit"]::-moz-focus-inner{border:none}


/**/
@media(max-width:430px) or (max-height:430px){
table{line-height:120%;}
font[size="5"],font[size="6"]{line-height:140%!important;}
table:first-of-type td>p a{width:40px;overflow:hidden;display:inline-block;}
table:first-of-type td>p a img{margin:0 0 0 -2em;}
p:empty+p:empty+p:empty+p:empty+p:empty+p:empty,
p:-moz-only-whitespace+p:-moz-only-whitespace+p:-moz-only-whitespace+p:-moz-only-whitespace+p:-moz-only-whitespace+p:-moz-only-whitespace,
p:blank+p:blank+p:blank+p:blank+p:blank+p:blank{display:none;}/*will work soon in css*/
}

@media print {
body,p,font,table:first-of-type a:first-of-type>font{color:#717171!important;background:white!important;}
/**/img,input{filter:none !important;}
/**/span[style*="#FFFF00"]{background:#fef717!important;color:#717171;}
}
@media not screen and (display-mode: fullscreen){
body:before{content:"Best viewed in fullscreen";width:190px;display:block;font-size:12px;font-weight:bold;text-transform:uppercase;position:relative!important;margin:.5em auto 2em auto;}
@media(min-width:1300px){body:before{content:"Best viewed in fullscreen";position:absolute!important;right:1em;top:1em;}}
}


/*BUGS OUTSIDE OF MOZILLA*/
b,strong{font-weight:bolder;/*Chrome, Safari, Edge*/}
body::-webkit-scrollbar {width:8px;}
body::-webkit-scrollbar-track {background:black;}
body::-webkit-scrollbar-thumb {background-color:grey;}
/*Full or semi-hiding scrollbar for browsers' codes updates*/
html{width:100%;height:100%;overflow:hidden;}
body{width:100%;height:100%;overflow-y:scroll;padding-right:0px;box-sizing:content-box;}


/*
Documentation for further changes to css stylesheet.
============================

ANTICIPATION OF THROWBACKS :

============================

=================
font[size="4"]+ a
=================

NO known occurence.
Anticipation :

IF the first <p> (paragraph) of the page content that is not empty,
ie Tree Organisation Manual Presentation where lies the page
ex Arts > Books > Writers > 20th century > USA > James Arthur Baldwin 1924-1987

contains an <a> (link) which is not inside a <font> :
the <a> will be applied the same style as the <a> below, (or more precisely
the <a> below which follow directly a <br> which follow directly a <font>
(which implicitely contains 1st part of the cut <a>) )which as of now is small bold uppercase.

MANUAL solution being =
on frontpage, a) create the link AND THEN add font sizes and family
b) make sure the link <a> is inside the space impacted by/called <font>
either by checking source code ;
or by clicking at least one character before the end of the no-problem zone
to write, even if the characted has to be retyped afterwards ;
or by relying on systemic frontpage and frontpage user's coordinated habits
which have worked so far... for this.

CSS solution being =
table:nth-of-type(2) p:nth-of-type(2) a{text-transform: none;font-size:24px !important;font-weight:400;}
which itself would necessitate the Tree Organisation Manual Presentation
always being the 2nd paragraph (above) or 1st or 2nd (under) =
table:nth-of-type(2) p:nth-of-type(2) a,
table:nth-of-type(2) p:nth-of-type(1) a{text-transform: none;font-size:24px !important;font-weight:400;}

CSS solution 2nd being (chosen) =
font[size="1"]+a,font[size="2"]+a,font[size="3"]+a,font[size="4"]+a
instead of =
font + a
This last solution does not reajust the links in Tree Organisation Manual Presentation



=========================
font[size="4"]>a
=========================

An occurence which declined, can cause the problem :
p > font[size="4"] > font[size="4"][face="Arial"] > a

Anticipation :
font[size="4"]>a
would not work if frontpage writes
p > font[size="4"] > [face="Arial"] > a
CSS solution being
font[size="4"] a
CONCLUSIVELY ALL RELATIONS BETWEEN <font> AND <a>
MUT BE WRITTEN IN GENERAL AND NOT DIRECT CHILD-PARENT RELATION.


=============================================================================
NB /\
IF ONE WHISHES TO CREATE MORE SPACE AT THE BEGINING OF WEBSITE PAGE CONTENT =
table:nth-of-type(2) p:nth-of-type(1) {margin-top:calc(4em + 8vh)}
BEST AT THIS STAGE NOT TO CHANGE THE SEMANTIC HTML SINCE IT IS OUR ONLY
HOPE OF MIMICKING CSS CLASSES
NO NEED FOR ADDING OR EVEN ERASING PARAGRAPHS
IF ONE WISHES TO ERASE FIRST PARAGRAPH SPACE VIA CSS =
table:nth-of-type(2) p:nth-of-type(1) {display:none}
=============================================================================


============================

TO INVESTIGUATE :

============================

=====
fixed
=====

IN GRAMMAR SECTION : difference in sizes between
a>font[size="1"]
font[size="1"]>a

=========
not fixed
=========


CHROME MEDIA BUG - MUST FIND BANNER FILE TO ADD :
<meta name="viewport" content="width=device-width,initial-scale=1">
OBSERVATION:
Has been reported by x as a problem. No problem has shown so far.

DOES NOT HAVE LEVERAGE ON :
ANYTHING relating to audio players (npr)
ex : #player-main
which has its own css stylesheet priority
hence a) tame with it directly
or b) create another stylesheet
a) would need to host directly
https://bundles.npr.org/dist/bundles/playerEmbed-css-b565230000754872ad68.css
instead of hosting it externally
b) would have to find a way to surpass
the priority of embeded stylesheets
a) would need to edit all the pages
containing this embeded stylesheet
to replace it with an internal css link,
either future-led recursive monk-ly or through bash script.
b) would need simpler but perhaps inexisting documentation.
test https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe
OBSERVATION: a) results in ENORMOUS data inefficient storage.
The Web Archive would be more suited to that aim.
b)javascript) results in continous action, albeit small.
(css is cache-stored, js acts for each new page)
b)bash-like-script: I can't help liking this option.

DOES NOT HAVE LEVERAGE ON :
LACK OF SYSTEMIC HTML PATTERNS :
difference between usage elements :
- reference section links at bottom of page
- Tree Organisation Manual Representation at bottom of page

unicity in structural elements :
font[size="4"] > a

no systemic difference in parent structural elements :
p[align="center"] (Vocapedia 2nd Tree : http://www.anglonautes.eu/)
p[style*="text-align: center"] (Vocapedia 2nd Tree : http://www.anglonautes.eu/english%20words_vocabulary_in_news_by_topic_2000s_2010s_2020s_uk_usa/arts/architecture_cities_towns/home/home_green/green_homes.htm)




>--------------> CONCLUSION: BASH SCRIPT.

============================

ACCESSIBILITY

============================

CONTRAST: Most compliant.
IMG ALT: in need of decent automatic tools due to data amount.
VIDEO CAPTION: in need of decent automatic tools due to data amount.
TITLES: must check if changes in fonts with no unit (1,2,3,4,5) are
understood by screen readers to be titles.
Otherwise: Must edit the whole site via bash.
LINK TEXT: Approriately descriptive (no view more, etc.)
except for naviguation images. /\
FOCUS STYLE: clear contrast.
SKIP TO MAIN CONTENT: Not yet /\
NAV & MAIN HTML5 ELEMENTS: Not yet /\
FORM: Not yet

COLOR-CODED INFO: ADD js for color-blind folks. Simple underline.


BIN

a font,font a{font-size:unset;}
@media only screen and not (display-mode:fullscreen){
body::before{content:"Best viewed in fullscreen F11 on your keyboard";position:absolute;right:1em;top:1em;width:190px;display:block;font-size: 12px;font-weight:bold;text-transform: uppercase;}
@media(max-width:730px) or (max-height:730px){body::before{content:"Best viewed in fullscreen";position:initial;margin:.5em auto 2em auto;}}
@media(min-width:1300px){body::before{content:"Best viewed in fullscreen F11 on your keyboard";position:absolute;right:1em;top:1em;width:190px;display:block;font-size: 12px;font-weight:bold;text-transform: uppercase;}}
}
text-decoration: underline 2px solid #fef717;filter:hue-rotate(320deg);
color:#dd6c2e;background:#ffaa00;color:#ffcc58;color:#add392;color:#ffcc86;color:#ffcc28 !important;background:#ffab71;color:#ffab71;
*/









<script type="text/javascript" src="zmyscript.js"></script>

 

 

 

 

Ancienne CSS (avant décembre 2020) :

 

- lien CSS :

 

 

- 1er Code CSS (avant juillet 2014) :

 

body { text-align: center; }
table{ width: 1000px; text-align:left }


<script type="text/javascript" src="zmyscript.js"></script>

 

 

 

 

 

- 2e code CSS (à partir de fin juillet 2014)

 

body { text-align: center; }


table{ width: 1000px; text-align: left; line-height:200%; margin:auto }


a:link { text-decoration: none; }

a:visited { text-decoration: none; }

a:hover { text-decoration: none; }

a:active { text-decoration: none; }


<script type="text/javascript" src="zmyscript.js"></script>

 

 

 

 

 

- 3e code CSS (à partir du 25 juillet 2014)

 

body { text-align: center; }


table{ width: 1000px; text-align: left; line-height:200%; margin:auto }


a:link { text-decoration: none; color: #6050DC !important; }

a:visited { text-decoration: none; color: #8EA2C6 !important; }

a:hover { text-decoration: none; color: #6F00FF !important; }

a:active { text-decoration: none; color: #000000 !important; }


<script type="text/javascript" src="zmyscript.js"></script>

 

 

 

 

 

2021

 

- voir si #6653ff ne conviendrait pas mieux pour a:link

 

- IMPORTANT : CSS responsive design et dark mode

développée le 12 décembre 2020 par MC et mise en ligne le 15.

A tester en 2021.

 

- Attention au bug suivant, qui se déclenche

lorsqu'on supprime des rubriques de la barre des rubriques

(en l'occurrence STATS et DOCS).

 

Le nom des rubriques est sauvegardé

dans l'un des 7 dossiers de gestion du site :

_borders

_derived

_fpclass

_overlay

_themes

(depuis janvier 2021, inutile de télécharger ce dossier sur le serveur).

_vti_cnf (à supprimer offfine online ?)

_vti_pvt (IMPORTANT : contient les noms de la barre des rubriques,

barre qui s'affiche sous "Les Anglonautes".)

 

11 janvier 2021 : après suppression de 2 rubriques,

le fond noir disparaît (car changement de thème dans Frontpage,

erreur rectifiée.)

 

Même après réinstallation de la version non modifiée des Anglonautes

et donc des 6 fichiers d'origine, le problème persiste :

le fond noir de la CSS est remplacé par du blanc.

Donc il y a 1 élément, dans ces fichiers,

qui n'accepte plus la CSS fond noir

lorsque l'on modifie la barre des rubriques

et que l'on télécharge sur le serveur

la nouvelle version : la CSS "n'accroche" pas aux pages..

 

Problème résolu :

conflit avec le dossier THEMES sur le serveur.

Après suppression de ce dossier sur le serveur,

la CSS fonctionne parfaitement.

 

 

Dossier _vti_pvt :

le téléchargement de ce dossier

a toujours pris un temps anormalement long.

Contacter serveur.

 

 

 

 

 

2021

 

- Documents iconographiques affichés plein écran > Diaporama :

la bannière-titre "Les Anglonautes + barre principale de navigation"

pourrait disparaître par le haut automatiquement

pour laisser place à un diaporama plein écran,

avec flèches latérales avant / après,

flèches positionnées au milieu, à gauche et à droite de l'écran.

 

 

 

 

La bannière

et toutes les données de navigation

sont dans le dossier -vti-pvt.

 

 

- Barre des rubriques :

quand on modifie le titre d'une rubrique,

par exemple Podcasts -> Podcasts - Videos,

ou quand on supprime une rubrique dans le menu des rubriques

par exemple Images,

ce changement n'apparaît sur une page donnée

(et donc sur toutes les pages)

que si le nom du fichier cette page,

ou le contenu de cette page

(il suffit de faire un retour ligne en bas de page)

est modifié puis sauvegardé.

Trouver une solution pour que le changement

du titre d'une rubrique apparaisse immédiatement

sur toutes les pages.

 

 

On rencontre le même problème quand on modifie

la bannière Les Anglonautes (par exemple la taille de la police).

Certaines pages prennent en compte immédiatement la modification.

 

D'autres pages demandent une modification (un retour ligne suffit)

puis une sauvegarde pour afficher la bannière modifiée.

 

Sinon on a l'ancienne bannière

et les liens de la barre de navigation sont invalides;

par exemple si on clique sur Vocapedia,

on a le message suivant :

Not Found

The requested URL /menu_main_voc.htm was not found on this server.

 

Il en va de même lors de l'insertion de nouveaux fichiers dans un dossier.

 

Par exemple, si on insère une nouvelle page entre deux pages A et B

dans la rubrique Photography, la navigation ne se fera correctement

que si l'on modifie (un retour ligne suffit) A et B.

De ce point de vue, Frontpage n'a pas été bien conçu.

 

Ces bugs aléatoires ont presque disparu depuis janvier 2021.

 

Autre manque de souplesse de Frontpage :

si l'on modifie la bannière ou le footer

et qu'on télécharge sur le serveur

les fichiers contenant ces modifications,

ces modifs ne seront pas visibles en ligne :

il faut télécharger toutes les pages du site

pour que ces modifs soient visibles.

 

 

 

 

 

 

 

 

 

- Important : Méta-données > Titre des pages

(titres qui apparaissent dans les résultats Google).

 

Explication :

le titre d'une page (une partie de son URL / adresse Internet)

n'est pas le nom du fichier de cette page.

 

Exemple : le fichier menu_main_about_french

a pour titre, page description et keywords :

Anglonautes > About us > Learning English with UK / US media / press

 

On retrouve également

Anglonautes > About us > Learning English with UK / US media / press

dans l'arborescence du site,

à laquelle on accède via le menu View,

puis l'option Navigation.

 

Exception :

nous donnons aux pages qui sont des têtes de rubrique

- ces têtes de rubrique apparaisssent dans la barre des rubriques :

ABOUT, SEARCH, VOCAPEDIA, HISTORY, etc. -

un titre précis, très court (souvent 1 mot),

car c'est ce titre qui apparaît dans cette barre.

 

 

Important : dans l'arborescence, pour les vignettes représentant

les rubriques principales (About, Search, Vocapedia, Learning, etc.),

le nom de la rubrique - par exemple LEARNING -

est entré dans l'arborescence (VIEW -> NAVIGATION ->

CLIQUER SUR TAB

pour arriver sur l'icône / l'icône précédente (bug Frontpage).

Par contre, toujours pour une rubrique principale

- prenons le même exemple, la rubrique LEARNING -

il faut faire un clic droit pour aller dans PAGE PROPERTIES,

puis  rentrer les champs TITLE, PAGE DESCRIPTION et KEY WORDS :

TITLE : Learning English with Anglonautes / Apprendre l'anglais avec les Anglonautes > Main page, main menu, main section, menu principal, page principale

PAGE DESCRIPTION : Learning English with Anglonautes / Apprendre l'anglais avec les Anglonautes > Main page, main menu, main section, menu principal, page principale

KEY WORDS : Learning English with Anglonautes / Apprendre l'anglais avec les Anglonautes > Main page, main menu, main section, menu principal, page principale

 

 

 

Avec Frontpage 2003,

après avoir cliqué sur View > Navigation,

et avoir ainsi accédé

à un schéma représentant l'arborescence du site,

on entre ces titres de pages

(ex : Anglonautes > History > 2013 > White House)

dans le champ de l'icône correspondant à la page

et dans le menu Page properties.

 

 

Pour faire apparaître ce menu,

il faut faire un clic droit dans n'importe quelle page,

cliquer sur Page properties,

puis remplir 3 champs :

- title

- page description

- key words

 

 

Si ces champs sont remplis de mots précis + et de dates,

plus Google les "servira" de manière précise

dans les résultats de recherche.

 

 

Attention : Comme il a été dit plus haut,

pour les pages qui sont des têtes de rubrique

et dont les titres figurent donc dans la barre de navigation de la bannière,

tout en haut de l'écran

(exemple : About - Search - Vocapedia - History, etc.),

il ne faut surtout pas que ce titre ait le même titre

que celui qui se trouve dans Page properties.

 

On aurait alors des titres beaucoup trop longs

dans la barre des rubriques.

 

Par exemple,

au lieu d'avoir ABOUT,

on aurait le long titre du menu Properties de la page :

 

Anglonautes > About us / Who we are / what we do > Learning English

and discovering UK / US history with news stories

 

 

 

 

 

 

 

 

 

- Architecture du site > Arborescence

 

insertion d'un nouveau fichier / déplacement de fichiers existants.

 

Important :

dans Frontpage > Toogle Pane,

pour déplacer un fichier vers un autre dossier

tout en gardant les liens de navigation,

il faut glisser ce fichier vers le nouveau dossier,

et non pas le copier.

 

Si on copie le fichier dans le nouveau dossier,

on perd les liens de navigation.

 

 

En 2021,

Frontpage est depuis longtemps obsolète

et il comporte des bugs,

mais ce logiciel a un immense avantage

pour quii veut faire un site en arborescence

(// dans le monde physique : galleries, musées) :

 

on peut modifier facilement et rapidement

une architecture en pyramide inversée complexe

(en 2021, les Anglonautes compte plus de 5 000 pages

réparties sur plusieurs niveaux)

grâce à la représentation graphique de l'arborescence du site,

où chaque rectangle représente une page) :

 

pur accéder à cette arborescence,

cliquer sur VIEW puis NAVIGATION

 

 

 

 

 

 

Le nouveau logiciel

 

devra garder la simplicité de Frontpage (drag and drop) :

on clique dans le toggle pane sur une icône

représentant la nouvelle page html,

et on place l'icône où on veut dans un schéma

représentant l'arborescence du site.

 

Pour accéder à l'arborescence du site,

ouvrir le toggle pane

avec la sixième icône dans la barre d'outils.

 

Le toggle pane s'ouvre à gauche de l'écran

et affiche une folder list (liste des dossiers).

 

Accès :

cliquer sur l'icône TOGGLE PANE (à gauche de la TOOLBAR),

ouvrir une page,

cliquer dans cette page,

cliquer le menu VIEW,

cliquer NAVIGATION

pour afficher l'arborescence dans la fenêtre principale,

cliquer sur TAB -> pour accéder à l'icône représentant cette page

dans l'arborescence (bug fréquent de Frontpage :

on accède en fait non à cette icône-cible,

mais à l'icône qui se trouve juste à droite).

 

 

- Téléchargement > gain de temps >

fichier sauvegardé en interne

= fichier automatiquement envoyé sur le serveur.

Actuellement, le téléchargement ne marche pas depuis Frontpage.

Il s'effectue manuellement avec FileZilla,

 

 

- Sauvegarde en ligne > avec FileZilla,

on peut exporter vers le PC,

depuis le serveur,

les dossiers des Anglonautes,

en conservant les données de navigation

(barre, icônes, place dans l'arborescence).

Cet export est réutilisable sans problème avec Frontpage

(export réussi de Vocapedia + édition Frontpage sans problème

le 6 décembre 2022).

 

 

 

 

RAPPEL IMPORTANT :

sur Frontpage,

pour déplacer un sous-dossier

dans le sous-dossier d'une autre rubrique

- par exemple un sous-dossier de la rubrique IMAGES

dans un sous-dossier de la rubrique PHOTOGRAPHY,

ne pas copier, ne pas couper,

mais faire glisser ce sous-dossier

dans son nouveau dossier.

 

En le faisant glisser,

on conserve les liens de navigation (gauche, haut, home, droite).

 

 

 

 

 

 

 

 

 

TEXTES

 

FEUILLE DE STYLE FRONTPAGE

AVANT LA CSS DEVELOPPEE PAR C

DE DECEMBRE 2020 A JANVIER 2021 :

 

A PARTIR DE JUILLET 2014 ET JUSQU'EN NOVEMBRE 2020,

LES PARAMETRES CI-DESSOUS

SONT APPLIQUES A L'ENSEMBLE DU SITE

(ATTENTION, IL NE S'AGIT PAS D'UNE CSS) :

 

- Police : Arial

 

- Taille : 14

 

- Pas d'italiques.

 

- Format > Paragraph > Indentation > Line spacing > Double (200%),

sauf pour le haut de la page d'accueil (30%).

 

Si on laisse 200 %, il y a un trop grand espace entre la bannière titre

et la photo dans le body, à cause de l'absence de la barre de navigation

PREVIOUS UP HOME NEXT dans la page d'accueil.

 

- Page avec seulement du texte ;

Format > Paragraphe > Identation : 250px after and  before text

 

- Images : format JPEG + baseline pour les photos.

Ceci implique de mettre en baseline les photos du Guardian.

Les photos du NYT sont déjà en baseline.

 

- Images > Format maximal à ce jour (août 2022) : 2600px de large.

Exemple : photo du QAnon shaman

https://www.npr.org/sections/pictureshow/2022/01/06/
1070610129/photos-one-year-later-a-look-back-on-the-jan-6-insurrection

 

Lorsqu'on insère une image à 1800px de large,

dans FORMAT -> PARAGRAPH,

le texte des articles

doit avoir une identation de 650px (avant et après).

 

Si l'image fait 2000 px de large, indentation de 750px.

 

Plus l'image est large, plus l'indentation est large.

 

- Important : au-dessus et au-dessous de chaque document iconographique,

laisser un espace de 15 lignes,

pour que l'image ne soit pas "parasitée" par d'autres éléments.

 

- Vidéos et cartes interactives intégrées > Taille > 1200 x 700

Dans une page pù il n'y a pas d'éléments non-texte (photo, etc.) plus larges,

la présence d'une vidéo 1200 (largeur) x 700 (hauteur)

implique de formater le texte (articles) en 350.

 

 

- Polices pour le titre Les Anglonautes dans la bannière :

 

- resources : https://www.google.com/fonts#

 

 

_______________________

 

 

 

Anglonautes > Barre de navigation > Icônes Frontpage

 

Emplacement > Documents > Sites > Anglonautes > dossier _derived

 

Attention,

ces icônes (LEFT, UP, HOME, RIGHT) doivent être en GIF,

sinon elles n'apparaissent pas dans la barre de navigation.

 

 

Anglonautes > Résoudre le problème suivant :

ces nouvelles icônes (flèches bleues) apparaissent bien en ligne,

mais les anciennes icônes oranges

continuent d'apparaître sur Frontpage hors ligne

(par contre les nouvelles icônes apparaissent bien

dans DreamWeaver d'Adobe).

 

Comment ces icônes peuvent-elles s'afficher dans Frontpage

alors qu'elles ont été supprimées du dossier -derived ?

 

Autre problème :

les anciennes icônes oranges de Frontpage (ci-dessous)

se réinstallent automatiquement dans le dossier _derived.

 

 

 

+

 

Dans Frontpage,

e pas supprimer le dossier _themes :

la police de caractères change.

 

Sur le serveur,

par contre, avec la nouvelle CSS,

le dossier _themes doit être supprimé du serveur

pour que la CSS s'applique.

 

Avec le le dossier _themes sur le serveur,

le fond blanc revient.

 

______________________

 

ICONES

 

1 - Les icônes de navigation (flèches)

se trouvent dans le dossier DERIVED.

 

2 - L'icône du pied de page

se trouve dans le dossier BORDER.

 

3 - Pour pouvoir être utilisée dans plusieurs pages,

une icône doit être insérée dans une page.

 

Toutes les icônes utilisées dans les Anglonautes

sont sauvegardées ci-dessous :

 

 

 

à réorienter comme on veut.

 

 

Anciennes icônes de navigation proposées par Frontpage :

 

 

 

_________________________________________________

 

 

Important > Bug Frontpage

 

Depuis janvier 2021, ce bug aléatoire a presque disparu.

 

Lorsqu'on renomme un dossier contenant un ou plusieurs fichiers,

ou lorsqu'on insère un nouveau fichier entre deux autres fichiers

dans l'arborescence,

en ligne - seulement en ligne, pas sur le PC -

la navigation - gauche, droite, haut, page d'accueil - entre les pages

ne se fait plus :

les nouveaux noms de fichiers - donc les nouveaux liens -

sont parfois brisés.

 

C'est un bug aléatoire,

qui ne se produit pas avec tous les dossiers.

 

On ne peut donc plus naviguer dans les pages / fichiers

qui viennent d'être renommés.

 

Astuce : il faut faire un changement

dans les pages / fichiers concernés

(n'importe quel changement,

même un espace ou un retour ligne).

 

Après ces changements,

et après téléchargement sur le serveur

des fichiers ainsi modifiés / "réactualisés",

la navigation en ligne se fera correctement.

 

Problème résolu :

sur le PC et dans Frontpage,

après suppression du dossier vti_cnf dans chaque dossier,

la navigation n'est plus rompue

lorsque l'on modifie les noms de fichiers.

 

Ces sous-dossiers vti-cnf,

générés automatiquement par Frontpage,

contiennent un menu aberrant

qui entre en conflit avec le fichier menu de chaque dossier,

créé par les Anglonautes.

 

Il faut ensuite supprimer sur le serveur

les dossiers contenant un sous-dossier vti-cnf,

puis télécharger les nouveaux dossiers, sans aucun vti_cnf.

 

A noter que après suppression d'un dossier vti_cnf,

celui peut réapparaître

car il est généré automatiquement par Frontpage.

 

Ceci n'est plus un problème

car on sait qu'on peut le supprimer

en cas de problème en ligne.

 

Voir si l'on peut aussi supprimer le dossier vti_cnf

qui se trouve à la racine du site.

 

Plus d'infos :

 

https://webmasters.stackexchange.com/questions/21164/
how-to-disable-usage-of-frontpages-vti-folders

 

 

_____________________________________________

 

Mode navigation :

 

Ouvrir un fichier.

Ouvrir le TOGGLE PANE à gauche

en cliquant en haut sur l'icône TOGGLE PANE

puis aller sur VIEW > NAVIGATION :

 

l'arborescence du site s'affiche.

 

Pour aller directement à l'icône représentant un fichier,

appuyer sur la touche TAB.

 

Attention, on arrive parfois à l'icône précédente - vérifier.

 

 

Google tools

 

https://support.google.com/webmasters/topic/4598466

 

 

 

______________________________________________________________

 

 

List of Special Files and Directories Maintained by FrontPage
Archived content. No warranty is made as to technical accuracy.
Content may contain URLs that were valid when originally published, but now link to sites or pages that no longer exist.

This appendix lists all the files and directories that FrontPage adds to each root web or sub-web.

Folders

Files

Purpose

_overlay

*.gif

Overlay files for FrontPage's text on GIF and navigation button features.
These files are transparent GIFs that are overlaid on top of base button or banner images to build a complete text on GIF or navigation button composite image.

_derived

*.htx, *.gif

Files that are dynamically generated by FrontPage that can be regenerated at any time, such as *.htx files created by the FrontPage Search Component (only when using IIS with Microsoft Index Server) and composite text on GIF images (for example, theme buttons and banners).

_borders

top.htm, left.htm, right.htm, bottom.htm

Shared border definition files that are included into pages using shared borders.

_themes

*.gif, *.inf, *.css files for each theme

FrontPage themes storage.
Each theme that is applied to the web is uploaded into a uniquely named subfolder of the _themes directory. Each theme consists of GIF, CSS, and INF files that define the theme.

_fpclass

*.class

Compiled Java class files that implement the Banner Ad Manager and Hover Button FrontPage components.

_private



This folder is created in each FrontPage web. It is intended to contain user files that are not browsable.
This feature does not work on IIS servers.

_vti_bin

shtml.dll
shtml.exe

Stub FrontPage Server Extensions executables for runtime functionality.



fpcount.exe

Runtime portion of the FrontPage Hit Counter component.



*.idq

Query files created by the FrontPage Search component
when using IIS with Microsoft Index Server. These files reside in the _vti_bin directory in order to get execute permissions.

_vti_bin/_vti_aut

author.dll
author.exe

Stub FrontPage Server Extensions executables for authoring functionality.

_vti_bin/_vti_adm

admin.dll
admin.exe

Stub FrontPage Server Extensions executables for security functionality.

_vti_bot



Used for custom FrontPage (WebBot) components created using the FrontPage SDK. This folder contains the implementations of custom FrontPage components. FrontPage custom components installed in these directories are optionally downloaded to the user's machine when that Component is inserted by the user.

_vti_cnf

For each HTML page and graphics file in a FrontPage web there is a configuration file of the same name.

Each configuration page contains a set of name value pairs, identifying such things as the last author to edit a page or the program associated with a file.

_vti_log



Root web only.
Only populated after the web administrator has enabled logging in the frontpg.ini or we<port>.cnf file.
When active,
an author.log file gets created here logging only FrontPage authoring and administration operations.

_vti_pvt

_x_todo.htm

Contains the current settings of the To Do List.



_x_todoh.htm

Contains the changes to the To Do List.



access.cnf

Contains HTTP server-specific access control information.



administrators.pwd

On Netscape servers only. Encrypted names and passwords of administrators.



authors.pwd

On Netscape servers only. Encrypted names and passwords of authors.



bots.cnf

Used for custom WebBot components created using the FrontPage SDK.



botinfs.cnf

Custom FrontPage (WebBot ) components information listing



deptodoc.btr

Dependency database for the web.



doctodep.btr

Dependency database for the web.



frontpg.lck

Root Web only. Lock file to keep web server resources from being accessed simultaneously. Should be a zero-byte file at idle time. With IIS and WebSite servers, this file is located in C:\Program Files\Microsoft FrontPage\version3.0\temp, not in the web content area's _vti_pvt directory.



linkinfo.cnf

Back links for URLs not in the current web.



service.cnf

Contains meta-information about the web.



service.grp

Lists the members of the Administrator and Author groups. Used only for CERN and NCSA servers.



service.pwd

Contains the encrypted password files. Not used on IIS and WebSite servers.



Service.stp

Contains the absolute file system path to the FrontPage web's service.pwd and service.grp files. Used only for CERN and NCSA servers.



services.cnf

Root web only. Contains the list of sub-webs.



services.org

Root web only. File used as the basis for services.cnf when reinstalling the Server Extensions, so that sub-webs are recreated as sub-webs instead of as subdirectories of the root web.



service.lck

Lock file to keep web resources from being accessed simultaneously. Should be a zero-byte file at idle time.



structure.cnf

Contains FrontPage web navigational information storage.



svcacl.cnf

Root web only. File used to store whether sub-webs have unique permissions settings and any IP Address restrictions, so that when reinstalling the Server Extensions the correct permissions settings are reapplied to any sub-webs.



users.pwd

On Netscape servers only. Encrypted names and passwords of end-users.



uniqueperm.cnf

Used on IIS only. The presence of this file indicates that the sub-web has unique permissions settings, as opposed to inheriting permissions from the root web. Present only in sub-webs.



writeto.cnf

Back links for files that can be written to by users of the web, such as Save Results Form handler result files. Files that can be written to by users of the web have a looser security setting than regular web content.

_vti_map



Contains image map files.

_vti_txt



This folder contains text indices for the WAIS search engine only. It is not used by Index Server on IIS.

FrontPage also includes Server Extensions configuration files.

See Using the FrontPage Configuration File

for details on Server Extensions configuration files naming convention and file locations.

Subsystem

Definition

Affected Stores

Document parsing and attribute discovery

Document parser plus title, base, link extractor

• _vti_cnf, link
• content (read only)
• _vti_txt

Document expansion

Bot expansion, themes, borders,URL macros, link fix-up,

taking page styles from other pages

• _vti_cnf · link map
• service.cnf (read)
• deptodoc, doctodep
• structure store (read)
• bot meta-info (read)
• _themes
• content
• _vti_map
• _overlay (read)
• frontpg.ini (read)

Source control

VSS integration

• VSS database
• content
• _vti_cnf
• service.cnf
• structure.cnf
• _overlay

Structure store

Web structure store

• structure store · content
• _vti_cnf
• trigger dependency recalculation

Access control

Setting permissions on web

• svcacl.cnf, access.cnf
• content
• web server config (read)

Todo list

Todo list

• to do list

File system management

Generic reading, writing, etc. of files

• content
• trigger dependency recalculation
• _vti_cnf

Meta-info store

Combined meta-information stores

• _vti_cnf
• service.cnf
• frontpg.ini (read)
• trigger dependency recalculation

Dependency management

Managing relationships between documents,

structure store, time, meta-info, etc.

• _vti_cnf
• deptodoc, doctodep
• service.cnf (autorecalc bit)

Text indexing/searching

Internal WAIS text index

• service.cnf
• frontpg.ini (read)
• _vti_txt

Logging

Only author and admin ops

• _vti_log

"Open bot" management

Install and execution of open bots

• bots.cnf (read)
• botinfs.cnf (read)
• _vti_bot (read)

Web server management

Marking folders as executable, readable, etc.

Getting URL to file mappings, etc.

• frontpg.ini (read)
• web server configuration

Locking

Internal based, not user driven

• _vti_pvt/service.lck


Show: Inherited Protected
© 2013 Microsoft

© 2013 Microsoft. All rights reserved.
 

http://www.softpanorama.org/Office/Frontpage/
special_files_and_directories_maintained_by_frontpage.shtml

 

 

 

_______________________________________________

 

 

 

computers, tablets, phones

 

Thousands of NPR podcasts

are embedded

into les Anglonautes.

 

Block cookies

to see NPR podcasts

without cookie wall

hiding podcast title

and play button:

 

go to Chrome or Firefox settings

and block NPR cookies

or all cookies

 

or

 

block cookies with add-ons

for Chrome and Firefox

 

___________________

 

 

 

pages Anglonautes

avec podcasts NPR

 

Les Anglonautes proposent

plus de 10 000 podcasts NPR,

regroupés dans

des pages thématiques.

 

Comment voir / écouter ces podcasts

depuis une page Anglonautes,

sans "cookie wall"

qui cache le titre du podcast

et le bouton "lecture" ?

 

Allez dans les paramètres

de Chrome ou Firefox

et bloquez soit les cookies NPR,

soit tous les cookies.

 

Sans aller dans les paramètres,

vous pouvez aussi

ajouter à ces navigateurs

des extensions

pour bloquer les cookies,

aussi bien sur Chrome

que sur  Firefox.

 

 

 

 

 

 

 

 

 

Anglonautes > About us

Qui sommes-nous ?

 

 

 

home Up