Showing posts with label code. Show all posts
Showing posts with label code. Show all posts

Thursday, November 9, 2017

Stratégie et tactique des défenses contre la classe des armes numériques conçues pour cibler et détruire une installation industrielle déterminée: cas du "Stuxnet"


 Abordons succintement comment se défendre de la classe des armes numériques conçues pour cibler et détruire une installation (industrielle) déterminée. Cas du "Stuxnet", un virus découvert en 2010 par VirusBlockAda (en Biélorussie)
Ce code est de Très haut niveau de développement
  • Plusieurs failles zéro-day de windows exploités
  • Plusieurs langages du C++ à l’assembleur
  • Quelle cible ?

L'unité 8200

En septembre 2010, Le Monde diplomatique publie un article en anglais qui décrit le réseau d'espionnage massif mis en œuvre par l'unité 8200 à partir de la base d'Urim SIGINT dans le désert du Neguev, l'une des plus importante base d'écoute au monde capable d'intercepter des appels téléphoniques, des courriels et d'autres types de communications, à travers le Moyen-Orient, l'Europe, l'Asie et l'Afrique, ainsi que de localiser des navires. L'unité 8200 met également en place des postes d'écoute cachés dans les ambassades israéliennes à l'étranger, surveille les câbles sous-marins, maintient des unités d'écoute cachées dans les Territoires palestiniens et dispose de jets Gulfstream équipés de matériel de surveillance électronique. En 2010, le New York Times, citant « un ancien membre de la communauté du renseignement des États-Unis », affirma que l'unité avait leurré (et non brouillé) le système de défense aérienne syrien pendant l'opération Orchard. Cela suppose une parfaite connaissance des emplacements des radars, de leurs caractéristiques techniques et modes de fonctionnement, sans compter le réseau de transmission des informations de défense aérienne aux centres de détection et de contrôle. Cela reste classique. Leurrer est plus puissant que brouiller.
Ce que je veux souligner ici est que l'unité 8200 a été suspectée d'être co-responsable de la conception du virus informatique Stuxnet qui infecta plusieurs ordinateurs industriels en 2010, en particulier ceux situés à l'intérieur des installations nucléaires iraniennes.
Le 11 septembre 2013, The Guardian publie un document fourni par Edward Snowden révélant comment l'unité 8200, mentionnée sous le nom d'ISNU, recevait des données brutes concernant des citoyens américains, conformément à un accord secret conclu avec la National Security Agency américaine NSA.
En outre le 12 septembre 2014, 43 officiers et soldats réservistes de l'unité 8200 signent une tribune dans le quotidien israélien Yediot Aharonot, dans laquelle ils déclarent refuser désormais de « participer aux actions contre les Palestiniens et de continuer à être les outils du renforcement du contrôle militaire sur les territoires occupés ». Ils écrivent : « le renseignement permet le contrôle permanent de millions de personnes à l'aide d'une surveillance profonde et intrusive, qui s'immisce dans la plupart des secteurs du quotidien des individus. Tout cela ne permet pas aux gens de mener des vies normales et incite à plus de violence, nous éloignant toujours davantage de la fin du conflit; mais certains pensent que ce type de guerre doit rester un état permanent...

Ultima ratio regum

Cette locution latine ultima ratio regum, traduite littéralement, signifie « [la force est] le dernier argument des rois » (du latin ultima : dernier ; ratio : raison, argument et regum : des rois)
Cette locution signifie que, lorsque tous les recours pacifiques et diplomatiques ont été épuisés et qu'il ne reste plus aucune solution raisonnable, on peut se résigner à utiliser la force destructrice.
La formule « ultima ratio regum » était l'expression favorite du cardinal de Richelieu décédé en 1632 comme Galilée. Le Roi Louis XIV reprit cette formule à son compte et la fit graver sur ses canons.

Stuxnet

Stuxnet est un ver informatique découvert en 2010 qui aurait été conçu par la NSA en collaboration étroite avec l'unité 8200 pour cibler les centrifugeuses iraniennes d’enrichissement d'uranium. C'est un nouveau ultima ratio regum.
Cette Advanced Persistent Threat (traduction littérale, menace persistante avancée ; en anglais, souvent abrégé APT) est un type de piratage informatique furtif et continu, souvent orchestré par des humains ciblant une entité spécifique. Une APT cible généralement une organisation pour des motifs d'affaires ou un État pour des motifs divers. Une APT exige un degré élevé de dissimulation et d'infiltration sur une assez longue période de temps. Le but d'une telle attaque est de placer du code malveillant personnalisé sur un ou plusieurs ordinateurs pour effectuer des tâches spécifiques et rester inaperçu pendant la plus longue période possible.
La première attaque de ce type, l'opération Titan Rain, a été découverte en 2003. Elle aurait duré environ 3 ans.

Ce serait le premier ver découvert qui espionne et reprogramme des systèmes industriels, ce qui comporte un risque élevé. Il cible spécifiquement les systèmes SCADA utilisés pour le contrôle commande de procédés industriels. Stuxnet a la capacité de reprogrammer des automates programmables industriels (API) produits par Siemens et de camoufler ses modifications. Les automates programmables Siemens sont utilisés tant par quelques centrales hydro-électriques ou nucléaires que pour la distribution d'eau potable ou les oléoducs.
Le ver a affecté 45 000 systèmes informatiques, dont 30 000 situés en Iran, y compris des PC appartenant à des employés de la centrale nucléaire de Bouchehr. Les 15 000 autres systèmes informatiques sont des ordinateurs et des centrales situés en Allemagne, en France, en Inde et en Indonésie, utilisateurs de technologies Siemens.
Le virus est inoculé par des clés USB infectées ; il contamine ensuite d’autres ordinateurs WinCC du réseau à l’aide d’autres exploits. Une fois dans le système, il utilise les mots de passe par défaut pour faire des requêtes au logiciel. Siemens déconseille cependant de changer les mots de passe par défaut car « cela pourrait affecter le bon fonctionnement de l’usine ».
Stuxnet a une taille 500kiloOctet et est écrit dans différents langages de programmation (y compris C et C++) ce qui est également peu courant.
La stratégie d'attaque nécessite de "voler" les certificats Verisign de Realtek Semiconductor Corps (pour se copier sans se faire détecter sur les disques amovibles comme les clés USB grâce au "vol" des certificats Verisign) et JMicron Technology Corp (à Taïwan), ainsi qu'une équipe en Iran qui a fourni les renseignements locaux nécessaires à cette opération.
Il a une antidote: il leurre les anti-virus les plus connus et une particularité intéressante est qu'il ne s'attaque pas aux ordinateurs qui possèdent l'antivirus ETrust v5 et v6.


Ref

https://fr.wikipedia.org/wiki/Stuxnet
https://fr.wikipedia.org/wiki/Unit%C3%A9_8200
8200 en hébreux: le jugement ou le juge.
https://fr.wikipedia.org/wiki/Advanced_Persistent_Threat




Besoins en sécurité matérielle







Sunday, January 29, 2017

Jupiter notebook project and nbconvert: web application that allows you to create and share documents that contain live code, equations, visualizations.



Open source, interactive data science and scientific computing across over 40 programming languages.

The Jupyter Notebook is a web application that allows you to create and share documents that contain live code, equations, visualizations and explanatory text. Uses include: data cleaning and transformation, numerical simulation, statistical modeling, machine learning and much more.

https://jupyter.org/
https://github.com/jupyter

https://github.com/jupyter/nbconvert
Notebooks can be shared with others using email, Dropbox, GitHub and the Jupyter Notebook Viewer.
http://nbviewer.jupyter.org/
This website does not host notebooks, it only renders notebooks available on other websites.

nbconvert: Convert Notebooks to other formats
https://nbconvert.readthedocs.io/en/latest/#

Using nbconvert enables:
  • presentation of information in familiar formats, such as PDF.
  • publishing of research using LaTeX and opens the door for embedding notebooks in papers.
  • collaboration with others who may not use the notebook in their work.
  • sharing contents with many people via the web using HTML.

Primarily, the nbconvert tool allows you to convert a Jupyter .ipynb notebook document file into another static format including HTML, LaTeX, PDF, Markdown, reStructuredText, and more. nbconvert can also add productivity to your workflow when used to execute notebooks programmatically.

some features

The Notebook has support for over 40 programming languages, including those popular in Data Science such as Python, R, Julia and Scala.

Code can produce rich output such as images, videos, LaTeX, and JavaScript. Interactive widgets can be used to manipulate and visualize data in realtime.

Saturday, January 28, 2017

character encoding conversion UTF-8; transformers converters (by php) of letters in different format like single eight-bit code à © to letter "é"



première                           école
appears
première école

Looks like you originally had a 
UTF-8 file 
which has been interpreted as an 8 bit encoding (e.g. ISO-8859-15) 
and entity-encoded. 

ISO-8859-15
http://en.wikipedia.org/wiki/ISO/IEC_8859-15
ISO 8859-15 encodes what it refers to as "Latin alphabet no. 9". This character set is used throughout the Americas, Western Europe, Oceania, and much of Africa.
Each character is encoded as a single eight-bit code value. 

See below for a list of encoding systems.

I say this because the sequence C3A9 looks like a pretty plausible UTF-8 encoding sequence.
http://en.wikipedia.org/wiki/UTF-8#Description
The W3C recommends UTF-8 as the default encoding in XML and HTML.

You will need to first entity-decode it,
then you'll have a UTF-8 encoding again.

iconv

You could then use something like iconv to convert to an encoding of your choosing.
iconv
http://www.gnu.org/savannah-checkouts/gnu/libiconv/documentation/libiconv-1.13/iconv.1.html
The iconv program converts text from one encoding to another encoding.
https://en.wikipedia.org/wiki/Iconv

iconv : unix, mac OSX, linux
https://developer.apple.com/legacy/library/documentation/Darwin/Reference/ManPages/man1/iconv.1.html

iconv-lite-js

Convert character encodings in pure javascript:
https://github.com/ashtuchkin/iconv-lite

example

To work through your example:

  • Ã ©     would be decoded as the byte sequence 0xC3A9
  • 0xC3A9 =  11000011     10101001      in binary
                       octetFist       octetSecond
  • the leading 110 in the first octet tells us this could be interpreted as a UTF-8 two byte sequence
  • second octet starts with  10, we're looking at something we can interpret as UTF-8
  • To do that, we take the last 5 bits of the first octet, and the last 6 bits of the second octet...
  • So, interpreted as UTF-8 it's
    00011101001
    = E9
    = é (LATIN SMALL LETTER E WITH ACUTE
    http://www.fileformat.info/info/unicode/char/e9/index.htm)


You mention wanting to handle this with PHP, something like this might do it for you:

 //to load from a file, use
 //$file=file_get_contents("/path/to/filename.txt");
 //example below uses a literal string to demonstrate technique...

 $file="&Précédent is a French word";
 $utf8=html_entity_decode($file);
 $iso8859=utf8_decode($utf8);

 //$utf8 contains "Précédent is a French word" in UTF-8
 //$iso8859 contains "Précédent is a French word" in ISO-8859

Ref.
http://stackoverflow.com/questions/4177783/xc3-xa9-and-other-codes

run OSX Mac (php is installed)

1/ create this text file (a php script: decode/recode)
<?php
 echo "decode-recode*";
 $file="&Pr&#xC3;&#xA9;c&#xC3;&#xA9;dent is a French word";
 $utf8a=html_entity_decode($file);
 $iso8859a=utf8_decode($utf8a);
 echo $utf8a, "//";
 echo $iso8859a, "//";
?>

2/save as "decode1.hph"

3/use the application "terminal" :

php  /path/YYY/decode1.php


4/you will get:

decode-recode*&Précédent is a French word//&Précédent is a French word//

list of encoding systems

in terminal >>iconv --list gives

ANSI_X3.4-1968 ANSI_X3.4-1986 ASCII CP367 IBM367 ISO-IR-6 ISO646-US ISO_646.IRV:1991 US US-ASCII CSASCII
UTF-8 UTF8
UTF-8-MAC UTF8-MAC
ISO-10646-UCS-2 UCS-2 CSUNICODE
UCS-2BE UNICODE-1-1 UNICODEBIG CSUNICODE11
UCS-2LE UNICODELITTLE
ISO-10646-UCS-4 UCS-4 CSUCS4
UCS-4BE
UCS-4LE
UTF-16
UTF-16BE
UTF-16LE
UTF-32
UTF-32BE
UTF-32LE
UNICODE-1-1-UTF-7 UTF-7 CSUNICODE11UTF7
UCS-2-INTERNAL
UCS-2-SWAPPED
UCS-4-INTERNAL
UCS-4-SWAPPED
C99
JAVA
CP819 IBM819 ISO-8859-1 ISO-IR-100 ISO8859-1 ISO_8859-1 ISO_8859-1:1987 L1 LATIN1 CSISOLATIN1
ISO-8859-2 ISO-IR-101 ISO8859-2 ISO_8859-2 ISO_8859-2:1987 L2 LATIN2 CSISOLATIN2
ISO-8859-3 ISO-IR-109 ISO8859-3 ISO_8859-3 ISO_8859-3:1988 L3 LATIN3 CSISOLATIN3
ISO-8859-4 ISO-IR-110 ISO8859-4 ISO_8859-4 ISO_8859-4:1988 L4 LATIN4 CSISOLATIN4
CYRILLIC ISO-8859-5 ISO-IR-144 ISO8859-5 ISO_8859-5 ISO_8859-5:1988 CSISOLATINCYRILLIC
ARABIC ASMO-708 ECMA-114 ISO-8859-6 ISO-IR-127 ISO8859-6 ISO_8859-6 ISO_8859-6:1987 CSISOLATINARABIC
ECMA-118 ELOT_928 GREEK GREEK8 ISO-8859-7 ISO-IR-126 ISO8859-7 ISO_8859-7 ISO_8859-7:1987 ISO_8859-7:2003 CSISOLATINGREEK
HEBREW ISO-8859-8 ISO-IR-138 ISO8859-8 ISO_8859-8 ISO_8859-8:1988 CSISOLATINHEBREW
ISO-8859-9 ISO-IR-148 ISO8859-9 ISO_8859-9 ISO_8859-9:1989 L5 LATIN5 CSISOLATIN5
ISO-8859-10 ISO-IR-157 ISO8859-10 ISO_8859-10 ISO_8859-10:1992 L6 LATIN6 CSISOLATIN6
ISO-8859-11 ISO8859-11 ISO_8859-11
ISO-8859-13 ISO-IR-179 ISO8859-13 ISO_8859-13 L7 LATIN7
ISO-8859-14 ISO-CELTIC ISO-IR-199 ISO8859-14 ISO_8859-14 ISO_8859-14:1998 L8 LATIN8
ISO-8859-15 ISO-IR-203 ISO8859-15 ISO_8859-15 ISO_8859-15:1998 LATIN-9
ISO-8859-16 ISO-IR-226 ISO8859-16 ISO_8859-16 ISO_8859-16:2001 L10 LATIN10
KOI8-R CSKOI8R
KOI8-U
KOI8-RU
CP1250 MS-EE WINDOWS-1250
CP1251 MS-CYRL WINDOWS-1251
CP1252 MS-ANSI WINDOWS-1252
CP1253 MS-GREEK WINDOWS-1253
CP1254 MS-TURK WINDOWS-1254
CP1255 MS-HEBR WINDOWS-1255
CP1256 MS-ARAB WINDOWS-1256
CP1257 WINBALTRIM WINDOWS-1257
CP1258 WINDOWS-1258
850 CP850 IBM850 CSPC850MULTILINGUAL
862 CP862 IBM862 CSPC862LATINHEBREW
866 CP866 IBM866 CSIBM866
MAC MACINTOSH MACROMAN CSMACINTOSH
MACCENTRALEUROPE
MACICELAND
MACCROATIAN
MACROMANIA
MACCYRILLIC
MACUKRAINE
MACGREEK
MACTURKISH
MACHEBREW
MACARABIC
MACTHAI
HP-ROMAN8 R8 ROMAN8 CSHPROMAN8
NEXTSTEP
ARMSCII-8
GEORGIAN-ACADEMY
GEORGIAN-PS
KOI8-T
CP154 CYRILLIC-ASIAN PT154 PTCP154 CSPTCP154
MULELAO-1
CP1133 IBM-CP1133
ISO-IR-166 TIS-620 TIS620 TIS620-0 TIS620.2529-1 TIS620.2533-0 TIS620.2533-1
CP874 WINDOWS-874
VISCII VISCII1.1-1 CSVISCII
TCVN TCVN-5712 TCVN5712-1 TCVN5712-1:1993
ISO-IR-14 ISO646-JP JIS_C6220-1969-RO JP CSISO14JISC6220RO
JISX0201-1976 JIS_X0201 X0201 CSHALFWIDTHKATAKANA
ISO-IR-87 JIS0208 JIS_C6226-1983 JIS_X0208 JIS_X0208-1983 JIS_X0208-1990 X0208 CSISO87JISX0208
ISO-IR-159 JIS_X0212 JIS_X0212-1990 JIS_X0212.1990-0 X0212 CSISO159JISX02121990
CN GB_1988-80 ISO-IR-57 ISO646-CN CSISO57GB1988
CHINESE GB_2312-80 ISO-IR-58 CSISO58GB231280
CN-GB-ISOIR165 ISO-IR-165
ISO-IR-149 KOREAN KSC_5601 KS_C_5601-1987 KS_C_5601-1989 CSKSC56011987
EUC-JP EUCJP EXTENDED_UNIX_CODE_PACKED_FORMAT_FOR_JAPANESE CSEUCPKDFMTJAPANESE
MS_KANJI SHIFT-JIS SHIFT_JIS SJIS CSSHIFTJIS
CP932
ISO-2022-JP CSISO2022JP
ISO-2022-JP-1
ISO-2022-JP-2 CSISO2022JP2
CN-GB EUC-CN EUCCN GB2312 CSGB2312
GBK
CP936 MS936 WINDOWS-936
GB18030
ISO-2022-CN CSISO2022CN
ISO-2022-CN-EXT
HZ HZ-GB-2312
EUC-TW EUCTW CSEUCTW
BIG-5 BIG-FIVE BIG5 BIGFIVE CN-BIG5 CSBIG5
CP950
BIG5-HKSCS:1999
BIG5-HKSCS:2001
BIG5-HKSCS BIG5-HKSCS:2004 BIG5HKSCS
EUC-KR EUCKR CSEUCKR
CP949 UHC
CP1361 JOHAB
ISO-2022-KR CSISO2022KR
CP856
CP922
CP943
CP1046
CP1124
CP1129
CP1161 IBM-1161 IBM1161 CSIBM1161
CP1162 IBM-1162 IBM1162 CSIBM1162
CP1163 IBM-1163 IBM1163 CSIBM1163
DEC-KANJI
DEC-HANYU
437 CP437 IBM437 CSPC8CODEPAGE437
CP737
CP775 IBM775 CSPC775BALTIC
852 CP852 IBM852 CSPCP852
CP853
855 CP855 IBM855 CSIBM855
857 CP857 IBM857 CSIBM857
CP858
860 CP860 IBM860 CSIBM860
861 CP-IS CP861 IBM861 CSIBM861
863 CP863 IBM863 CSIBM863
CP864 IBM864 CSIBM864
865 CP865 IBM865 CSIBM865
869 CP-GR CP869 IBM869 CSIBM869
CP1125
EUC-JISX0213
SHIFT_JISX0213
ISO-2022-JP-3
BIG5-2003
ISO-IR-230 TDS565
ATARI ATARIST

RISCOS-LATIN1

Example

converts input from the old West-European encoding ISO-8859-9 to Unicode UTF-8

For example, use the application "terminal" :

iconv -f ISO8859-9 -t UTF-8 NameFile

and the inverse
iconv -f UTF-8 -t  ISO8859-9

             

Thursday, December 22, 2016

GitHub, GitPages, GitBooks, Data Visualizalion, One Tool for Everything?


Sign up for a free GitHub account, a free multi-purpose tool that allows you to:

  • View and fork a copy of open-source code from other users
  • Make simple edits to your code directly in the browser
  • Share your code and receive or suggest revisions to others
  • Host a live version of your web code with GitHub Pages

a tutorial

https://www.datavizforall.org/edit/github/

and
 If you're already familiar with GitHub Pages, you may be interested to know that behind the scenes:
https://github.com/blog/2289-publishing-with-github-pages-now-as-easy-as-1-2-3

Saturday, December 17, 2016

balisage and Interchange vs. Interoperability. Proceedings The Balisage Series on Markup Technologies


http://www.balisage.net/Proceedings/topics/Interoperability.html

http://www.balisage.net/Proceedings/vol7/html/Bauman01/BalisageVol7-Bauman01.html


Proceedings

http://www.balisage.net/Proceedings/
The Balisage Series on Markup Technologies is an occasional series that includes the proceedings of conferences, symposia, and other markup-related events.
Balisage: The Markup Conference is an annual peer-reviewed conference designed to meet the needs of markup theoreticians and practitioners who are pushing the boundaries of the field. Balisage is an XML conference and more. It’s all about the markup: how to create it; what it means; hierarchies and overlap; modeling; taxonomies; transformation; query, searching, and retrieval; presentation and accessibility; making systems that make markup dance (or dance faster to a different tune in a smaller space) – in short, changing the world and the web through the power of markup.
Balisage is often accompanied by a one-day symposium examining a particularly difficult issue related to markup: the difficulties arising from revising, extending, or changing XML vocabularies; the challenges involved in processing XML efficiently; etc. The symposium’s aim is to bring together theory and practice – researchers, product engineers, academics, developers, and users – in an attempt to understand the issue and its facets better, and to explore and share approaches to solving them.

bluegriffon, a web editor.


http://bluegriffon.org/
BlueGriffon est un éditeur HTML WYSISWYG (what you see is what you get) qui permet aux novices en matière de code HTML  de modifier le texte d’une mise en page de site sans avoir à plonger dans le code.

Native standalone Windows, MacOS X and Linux app

  • Black and Light themes
  • HTML 4
  • XHTML 1.0
  • XHTML 1.1
  • html 5 (html) including audio, video and forms
  • html 5 (xml) including audio, video and forms
  • CSS 3 including 2D and 3D Transformations, Transitions, Shadows, Columns, Font Features and more
  • CSS Variables
  • SVG
  • Internationalization Tag Set (ITS) 2.0
  • ARIA role
  • Opquast® Accessibility First Step
  • Wysiwyg Authoring
  • Editable source view
  • Editable  @media print   view
  • User Interface in 20 languages
  • Modifyable menu and button keyboard shortcuts
  • Style Properties panel
  • DOM Explorer panel
  • Script Editor panel
  • Stylesheets Manager panel
  • Table of Contents
  • Markdown support
  • FontSquirrel font manager
  • Google Fonts font manager

BlueGriffon® is a product of Disruptive Innovations SAS, a French software company founded in October 2003. Based in Saint-Germain en Laye, France.


Wednesday, December 14, 2016

webGL, large datasets, map and Reactive Programming Model


mapbox gl

https://github.com/mapbox/mapbox-gl-js
see my posts "mapbox" on this blog.

MapboxGL-js provides impressive vector tile rendering capabilities. Although the Mapbox vector tile specification is open source, there aren't yet very many free alternatives to Mapbox's paid vector tile API. Because of this, the examples (of deck.gl) don't use the paid vector tile API and instead use map tiles by Stamen Design, under CC BY 3.0 and data by OpenStreetMap, under ODbL.

deck gl 

deck.gl is a WebGL-powered framework for visual exploratory data analysis of large datasets.
deck.gl is designed to make visualization of large data sets simple. It enables users to quickly get impressive visual results with limited effort through composition of existing layers, while offering a complete architecture for packaging advanced WebGL based visualizations as reusable JavaScript layers.
https://github.com/uber/deck.gl
http://uber.github.io/deck.gl/#/

Understanding the Reactive Programming Model
  • The key to writing good, performant deck.gl layers lies in understanding how to minimize updates and redundant calculations.
  • It is important to understand the implications of the shallow equality comparisons deck.gl performs on layer properties, and how this implies that new data and property objects must only be created when the underlying data actually changes in order to prevent unnecessary updates.
  • There is an impressive amount of information (documentation, blog posts, educational videos, etc.) on the reactive programming paradigm in relation to modern web frameworks such as React, Flux and Redux. Where to start depends mostly on your application architecture choices.

Understanding WebGL

This is only needed if you want to create custom layers in deck.gl. Note that while trying out a new ambitious rendering approach for a new layer will likely require deeper knowledge, it is often possible to modify or extend existing deck.gl layers (including modifying the shader code) with a surprisingly limited amount of WebGL knowledge.
There are many web resources for learning WebGL. The luma.gl documentation can be a starting point.

luma gl

luma.gl versions of the classic "Learning WebGL" lessons:

Tuesday, December 13, 2016

Html headings tag, anchor tag # with id, internal link and blogger blogspot


Create anchor links or bookmark links for fast navigation
Anchor links allow readers to jump to a specific part of the page. If your article is really long or text-heavy, consider creating a table of contents or index using anchor links for quick navigation.

When I write longer articles here on xxx or my blogspot(s), I like to add a Table of Contents to the top to help my reader’s navigate to different sections of the post.

If you prefer to manually insert the Table of Contents into you posts rather than a plugin or javascript snippet adding it to every post/page, i will describe how to do.

Rem: Because SEO and headings are linked, the choice of the name of headings an its id are important.
"A la main" (manually insert)
  1. first create your headings with an id (i=1 to 6):
      <h i id="synop"> Synopsis </h i>
  2. and the link <a href="#synop">Synopsis</a> in your table of contents (or index)
Create anchor links or bookmark links for fast navigation
Anchor links allow readers to jump to a specific part of the page. If your article is really long or text-heavy, consider creating a table of contents or index using anchor links for quick navigation.

When I write longer articles here on xxx or my blogspot(s), I like to add a Table of Contents to the top to help my reader’s navigate to different sections of the post.

If you prefer to manually insert the Table of Contents into you posts rather than a plugin or javascript snippet adding it to every post/page, i will describe how to do.

Rem: Because SEO and headings are linked, the choice of the name of headings an its id are important.
  1. first create your headings with an id (i=1 to 6):
      <h i id="synop"> Synopsis </h i>
  2. and the link <a href="#synop">Synopsis</a> in your table of contents (or index)
Many tags in HTML, including the Heading tags (H1,H2,H3…H6) were developed not to assist formatting but to provide information on the structural hierarchy of a document. In order to facilitate accessibility as well as standards, it is best to use the tags for the intended purpose in the information hierarchy rather than for pure formatting purposes. In many cases, this will make your document easier to edit as well.

examples

At the beginning of your post or your html, write (it's an internal link to "synop"):
<a href="#synop">Synopsis</a>
When you clic on this "internal link" you will go to "synop".

In your text you have this headings (i=1 to 6):
<h i><a id="synop"></a>Synopsis</h i>
<a id="synop"></a> is an anchor tag.

remember that a classic HTML links is also defined with the <a> tag but with "href":
<a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>

Bookmark with the id attribute.

It's shorter than the anchor tag:
<h i id="synop"> Synopsis </h i>
Then, add a link to the bookmark ("Synop"), from within the same page:
<a href="#synop">Synopsis</a>
Or, add a link to the bookmark ("Synop"), from another page (of your domain).
<a href="other_page.html#synop">Visit the Useful Synop Section</a>
Ref: http://www.w3schools.com/html/html_links.asp

The anchor tag

<a id="WhateverNameYouWant">The landing place of the link</a>
and for example at the beginning of your post

See the classic example for the "page content"
http://accessibility.psu.edu/headingshtml/

https://www.w3.org/TR/html4/struct/links.html#h-12.2.3
http://www.w3schools.com/tags/tag_a.asp
Fragment identifiers:
https://www.w3.org/TR/html4/intro/intro.html#fragment-uri
for dummies:
http://stackoverflow.com/questions/8192742/what-is-the-meaning-of-in-url-and-how-can-i-use-that

blogspot:
http://theedifier.com/blogging-blogger/classical-template-modify.php
http://blogknowhow.blogspot.fr/2010/11/add-internal-links-within-blogger-posts.html

Automatically create heading anchor

a javascript
http://renaysha.me/anchorific-js/
I always create single-page project documentations with anchored headings and anchored-based navigations to jump from one section to another. However, I feel that it is repetitive to create the anchored headings and anchored-based navigations manually. I want to focus on writing the documentation and let jQuery generates the anchored headings and nested navigations for me. Thus, Anchorific.js was born.
https://github.com/renettarenula/anchorific.js

some links:
https://www.itsupportguides.com/tech-tips-tricks/jquery-how-to-automatically-create-heading-anchors-for-links/
http://jeroensormani.com/automatically-add-ids-to-your-headings/
http://wordpress.stackexchange.com/questions/94663/dynamically-add-id-to-heading-tags

Other aspects of the structure of an HTML

There's some ambiguity and debate around the proper use of the heading tags, specifically with the use of sectioning elements, like <article> and <section>.

section element 

According to the most recent public draft of the W3C HTML 5.1 specification 4.3.3 The section element:
The <section> element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.  
Sections may contain headings of any rank, and authors are strongly encouraged to use headings of the appropriate rank for the section's nesting level.
https://www.w3.org/TR/html51/semantics.html#the-section-element

article element

According to the specification 4.3.2 The article element:
The <article> element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
Authors are encouraged to use the <article> element instead of the <section> element when it would make sense to syndicate the contents of the element.
http://www.w3schools.com/html/html_layout.asp
http://accessiblehtmlheadings.com/

Blogspot

Sitemap:
http://helplogger.blogspot.fr/2013/12/add-sitemap-table-of-contents-to-blogger.html
a widget:
https://github.com/garafu/blogger.toc

Sunday, December 11, 2016

collection of sites to test your Codes Online

start coding on line with many web services

Full workspace

https://c9.io/
Cloud9 combines a powerful online code editor with a full Ubuntu workspace in the cloud
Workspaces are powered by Docker Ubuntu containers that give you full freedom over your environment, including sudo rights. Do a git push, compile SASS, see server output, and Run apps easily with the built-in Terminal and Runners.
Each new project is stored in a subfolder where you can generate real physical files. HTML, CSS, JS, PHP, anything you need to code will be saved locally in your account. Then you can later export these files as a whole project and download them to your computer.

Many langages

http://codepad.org/
codepad is an online compiler/interpreter, and a simple collaboration tool.
Paste your code below, and codepad will run it and give you a short URL
C, C++, D, Haskell, Lua, OCaml, PHP, Perl, Plain Text, Python, Ruby, Scheme, Tcl,

http://ideone.com/
Ideone is an online compiler and debugging tool which allows you to compile source code and execute it online in more than 60 programming languages.

javascript/html/CSS

http://jsbin.com/
Gist support: import and export
"add library" menu: you can select between any number of JS libraries – jQuery, JQuery UI...

https://jsfiddle.net/
jsFiddle also supports the inclusion of libraries such as jQuery. You can include additional external resources to JS/CSS files into each testing document. Incredibly their app even supports XHR Ajax where you can pass data back-and-forth between the server and client browser window.
https://jsfiddle.net/about

http://jsdo.it/
you must login but you have access to many codes and you can fork.
Here you can share JavaScript, HTML5 and CSS3 code snippets. Their app is not as open as the others, requiring a much more formal registration process. This requires connecting into any other social network such as Facebook, Twitter, Google, or Github. Then you select a username and off we go to code.
Many of the apps appear to have Japanese writing.
What I love about their interface is how you can actually upload files you’ve already created and store them into a project.

https://codepen.io/pen/

http://www.jslint.com/
JSLint is a JavaScript program that looks for problems in JavaScript programs. It is a code quality tool.

CSS

http://cssdesk.com/
you can fork.

For Google API 

 Google code sandbox "explorer".
https://developers.google.com/apis-explorer/?csw=1#p/

si vous voulez inclure un post sur votre blogspot:
https://developers.google.com/apis-explorer/?csw=1#p/blogger/v3/blogger.posts.insert

gérer votre google drive:
https://developers.google.com/apis-explorer/?csw=1#p/drive/v3/
https://developers.google.com/apis-explorer/?csw=1#p/sheets/v4/

Il faut aussi voir:
https://developers.google.com/
https://developers.google.com/maps/documentation/javascript/

Ref:

http://www.hongkiat.com/blog/tools-to-coding-online/

Try the blogger APIs explorer



Just a sample with the structured editor
https://developers.google.com/apis-explorer/?csw=1#p/blogger/v3/blogger.posts.insert