09a: Publishing websites and database archiving The Publish menu The Publish menu delivers easily edited CMS websites embedded directly within the database, as well as individual web pages which can be embedded in other sites. It also provides an archiving function which enables the download of a complete, documented copy of the data in the database in open format.   Safeguard file - download - a fully internally documented archive package of all the data in the database Safeguard file - to repository - as above, but uploads the file to a chosen repository (2026 - only Nakala) Website > Create - sets up a new CMS website. A database can have multiple websites for different audiences  Website > Edit - edit an existing CMS website stored in the database  Website >View - view an existing CMS website in a separate window - use to check results and to obtain the URL  Note : You can also access the website record in the Explore Menu, just like any other record. To find the website record, type 'website' in the searchbox, or filter by Entities in the Explore Tray, and choose 'CMS_Home' as the Record Type. Any websites you have created will appear as records in the Results Pane. Standalone web page - create or edit a CMS-generated web page for embedding in a third-party website  Statistics - displays access statistics usign the eidely used Matomo Open Source web tracklign system The CMS : creating a website Why use the Heurist CMS? Heurist provides a powerful CMS capability tightly integrated with the database. There are several advantages to this approach: Functionality: Database search and visualisation widgets can be embedded directly in web pages and have full access to the content of the database, including saved searches; Sustainability: The CMS pages are stored as standard record types in the database. That means that there is no need to have a separate server and cross-server integration (high sustainability risks); as long as the database is accessible through Heurist, the CMS will remain operational, potentially long after the completion of the project which built it, and at practically no cost. Stability Flexibility Multiple websites from one database Embedded in the database and thus saved as an integral part of the database No dependency on connections between servers, avoids multiple points of failure Backed up in archive track package and in normal backups Has access to the most functions directly available as widgets ( reuses the widgets of the main interface) Has direct access to data in the database and respects permissions and visibility down to the individual value level Flexible configuration of widgets using parameters which can be set via forms in the interface Widgets provide powerful functions without any programming  -  mapping, facet searches etc All images or files in the database are accessible for embedding without creating special web image directories (eg. WordPress) and are resampled automatically for web resolution allowing high resolution images to be stored in the database without bogging down the website Allows embedding of remote images and streaming EG or videos and sound audio Instant editing of text elements in the website and change of parameters including styling of widgets and other components Creates embeddable pages independent of the Heurist menu structure as well as complete websites with a couple of clicks Easy linking of pages and records within text, generation of bread crumbs and page headings Hierarchical menus and the possibility of multiple menus Configuring website layout  The initial web page may look somewhat different depending on what template has been set as the default.  The default website is created with a set of commonly used menu entries and web pages with dummy content. Note: If you are not logged in you will first need to login with the login link at top right of the screen, or in the backend interface. The website editor can be displayed by clicking on the website editor link on the top left of the screen At the top of the screen you have some general controls: The << chevrons can be used to temporarily close up the website editor panel, without exiting the website editor. This may be useful to have extra screen space when editing text blocks on the page (which open in a WYSIWYG editor when yu click on them). The website URL is the recommended compact URL for the website. Click on it to copy it to your clipboard. The Website Layout / Properties button  Changes the title, logo, background, languages and other settings of the website as a whole Opens a standard record edit form for the CMS_Home record which defines the website: The “Advanced” tab allows you to provide some custom CSS and/or Javascript : see below. DT_THUMBNAIL (base field 2-39) is used as favicon for the website. The Site tab (menu management) Allows you to add, reorder, rename and delete menu entries The Page tab (widgets) Edits the currently selected page structure and modify the component styles and widget properties. The widgets making up the page are shown on the left. Creating and editing components in a page The element you are currently working on is highlighted by an animated blue border. If you change the element in any way, the changes are immediately visible in the preview. You can therefore use Heurist’s web editor to experiment and learn by doing.  You don’t need to know very much in advance about what these different settings do — just change them, and see the effect. You can actually learn a lot about web development just by playing with Heurist’s website builder. Anything you learn about your Heurist site will apply to most website development. Advanced users can apply custom CSS classes to the element, or write inline CSS as they desire (see below). After inserting the component, you can edit its content in the usual way. You can also add further elements to change the component.  Using widgets If you insert a widget you will first see a list of possible widgets. What is a widget? To add interactive content to your Heurist site, you need to use Heurist widgets. A widget is an interactive component which either retrieves or displays information about records in your database. The Map and Timeline widget, for example, plots records on a map and displays them in chronological order on a timeline below. The Saved Filters widget allows you to embed filters that you have defined in the Explore menu on a webpage, enabling visitors to your site to search the database. Many of the widgets replicate tools that you are already familiar with from the Explore Menu (you are in fact using the same widgets that we use to build the backend interface). However, when you embed a widget on a Heurist site, you will have more ability to customise its look and behaviour, so you can control the user's experience. The available widgets are: Filter: This widget gives visitors access to the standard Heurist search bar, such as you see at the top of the Filtered Results Pane of the Explore Menu. Saved Filters: This widget allows you to embed Saved Filters on a Heurist webpage. In most cases, we recommend that you use Faceted Searches with this widget, as they provide the best user experience. Standard Filter Result: This widget displays records in a similar manner to the Filtered Results Pane of the Explore Menu. Custom Report: This widget displays information using a Custom Report that you have built in the Explore Menu. Custom Reports can also be embedded within other widgets, for instance to configure the popups on the Map and Timeline, or to provide a different view of records in the Standard Filter Result. Table Format: This widget displays records in a tabular format, the same as the List View in the Explore Menu Map and Timeline: This widget plots records on a map with embedded timeline, just like the Map View in the Explore Menu. You can utilise Map Documents defined in your Heurist database to provide additional advanced functionality. Story Map: This widget plots a set of records on the map as a connected series, with an accompanying 'slideshow' of information about each record. This is ideal for 10-20 records. Network Graph: This widget displays records as nodes in a network, much like the Network View in the Explore Menu. Menu: This widget allows you to add a navigation menu to your site, like the one that is automatically generated in your website header. Add Record: This widget allows you to add an 'Add Record' button to your page. Visitors can click the button to open the standard data entry form for a given record type. Email Us Form: This widget allows you to add a contact form to your page, so that visitors can email you without you revealing your email address publicly on the internet. How do I configure a widget? Once you have inserted a widget into a page, it will appear in the treeview to the left. If you click on it, this will open all the settings for the widget, where you can alter its functionality. Note that there are several tabs with different fucntions - nasic setup, onscreen controls, image handling, messages (when data is missing etc.) and Connect (which sets connections between  See the specific page for each widget for information on the specific settings. How do I format a widget? Most widgets will expand to fill up whatever space you provide them on your webpage. If you need to adjust the positioning or external appearance of a widget (e.g. by adding margins around it or a border), then you can do this using the Style tool, as you would for a static component such as some text or a heading. How do widgets talk to each other? You are very likely to add more that one widget to a webpage. When you do, you will probably want them to interact. For example, you might use the Saved Filters Widget to allow visitors to search the database, the Standard Filter Result to list the results of a search, and the Network Graph to display the results visually. When widgets are inserted into a page Heurist links the widgets together so that they interact correctly. You do not need to configure anything for this to happen—it is automatic. More advanced users might wish to know how this works. Behind the scenes, Heurist divides the page into one or more search realms. All the widgets in a given search realm share data with one another. By default, the entire page is a single search realm, so that all widgets on the page will search, filter or display the same set of records at any given time. But it is also possible to divide a page into multiple search realms if required. It is even possible to have search realms which run across pages. When you configure a widget, you have the option to specify which search realm it belongs to. You simply tell Heurist what search realms you would like to exist, and it will take care of creating and utilising them. If your 'Saved Filters' and 'Network Graph' are both in a search realm called 'Bob', then they will be linked. If you instead write 'Jane' in the search realm box for both widgets, then they will be linked together in a search realm called 'Jane'. Types of widgets Simple text box The simplest of all components, the simple text box contains static WYSIYYG text (Simple text boxes can also be loaded in two and three column modes as a shortcut to individual positioning or flexboxes). Simple text can be edited in WYSIWYG mode simply by clicking on the text in website edit mode: Apart from the usual formatting options, one can create a link which inserts a new record in the database (Add Rec), one can insert images and other files from those previously uploaded or by uploading from your local drive or providing a remote URL (Add Media - see data entry of file fields for detailex explanation), or standard web hyperlinks (URL). To insert a link which skips to an another page in the website, use the URL button and simply enter the ID of the web page you wish to load. (find the ID either by a search for CMS Web Pages - open another browser tab to carry out the search - or by editing the site structure - button at top left in website edit more - and looking at hte menu pages which are connected to the CMS Home page)            Filter The Filter widget create a search box (as in the Explore menu) which can be used : To perform a simple search in the database (for example from a keyword) To write a query using the Heurist JSON Query Langage (see documentation chapter 7) To display a Filter builder button to allow your visitors to build their own queries. This widget has to be completed with the Standard filter results widget. Filters Tab The Saved filters allows you to display a selection of filters previously created and saved using the Facets Builder function described in chapter 7 (Explore menu), to enable your visitors to search your database by facet. This widget has to be completed with the Standard filter results widget. Connect Tab Search group: Name the search realm that the widget belongs to. By default, all widgets belong to 'search_group_1'. If you choose to use this feature, do ensure that you type the names of each different search realm exactly. Any typo will prevent the feature from working. Info directs to page: Use this feature if you wish to direct visitors to a different page on the site when they select a record on the map. Unique widget id: A name for the map widget on this page. This feature is only useful if you are using custom Javascript or CSS in your website. ------------------------------------------------------------------------------------------------------------------------- Standard filter results This widget allows you to display a Filtered Results pane, displaying the records in your current 'result set'.  The current 'result set' is the set of records retrieved by the filter you have most recently applied. (see chapter 7). Setup Tab [to be described] Controls tab [to be described] Images/blog tab [to be described] Messages Tab [to be described] The messages accept fairly basic html such as   They can also use simple styles such as:

Please make a selection on the left

We recommend spacing the messages down from the top and in from the left using simple inline CSS for a more attractive appearance. They should only be left in teh default position when space is at a premium. Connect Tab [to be described] Custom report The Custom Report widget lets you display the record selected in the results list in the form of a a custom template that allows you to display the results of a search in the desired format (see chapter 8a : the custom report template must first be built using the editor available in the Record view pane, via the “Report” tab.) Setup Tab [to be described] Tools Tab [to be described] Messages Tab [to be described] Connect Tab [to be described] Table format The Table format widget lets you display the results of a query in a table format. The Table Tab  [to be described] Messages Tab [to be described] Connect Tab [to be described] ---------------------------------------------------------------------------------------------------- Map and Timeline There are many options for controlling the appearance and functionality of the map widget.   Controls Tab General behaviours: Show timeline: Choose whether to include the timeline at the bottom of the map Markerclusters: Choose whether records clump together when the map is zoomed out (recommended) Show rollover: Should tooltips appear when users hover over buttons on the map? Allow modify symbology: Enable custom symbology (only relevant if using a Map Document) Controls to show: Legend: Allow visitors to change the base map, and turn on or off any result sets or map documents currently affecting the map. The legend appears in the top right corner of the map. Other controls appear down the left hand side. Bookmark: Allow visitors to drop pins on the map Geocoder: Allow visitors to search for places on the map Print: Allow visitors to print an image of the map Visible in Legend: If you have enabled the legend under Controls to Show, then you can choose which controls are available in the legend here. Expand at start Zoom limits: Prevent users from zooming too far in or out on the map. Layers Tab Default global base map: Choose the 'basemap' that is used to create the image of the earth's surface. Heurist comes with many base maps. Advanced users can apply 'filters' to the base map to e.g. invert the colours or make the map sepia. Superimpose map document: Select a Map Document from the database to govern the appearance of the map. Infobox Tab Click map item for info: You have three options for how record data will be displayed when a record is clicked on the map. Map info popup format: If you don't wish to use the default format, you can define an alternative format using Heurist's Custom Report builder. If you do this, you will probably wish to change the Map popup size using. Cluster tab Connect Tab Link to custom style: If you wish to inject custom CSS into the map, provide the element here. Search group: Name the search realm that the widget belongs to. By default, all widgets belong to 'search_group_1'. If you choose to use this feature, do ensure that you type the names of each different search realm exactly. Any typo will prevent the feature from working. Info directs to page: Use this feature if you wish to direct visitors to a different page on the site when they select a record on the map. Unique widget id: A name for the map widget on this page. This feature is only useful if you are using custom Javascript or CSS in your website. ----------------------------------------------------------------------------------------------------------------------------- Story Map [TO DO] ----------------------------------------------------------------------------------------------------------------------------- Network Graph [TO DO] ----------------------------------------------------------------------------------------------------------------------------- Menu [TO DO] Add record This widget display a button to add contributions to the database : it open a form to fill in, in the same way as in the populate menu. The administrator has to define the Record Type in which the data will be created : Email Us Form The "email us form" widget allows you to add a contact form to your page, so that visitors can email you without you revealing your email address publicly on the internet. The form will send emails to the owner of the database. ====13/05/2025 - reprendre ici===== 2.2.4. Using CSS (=== Styling) Adding CSS to your Heurist website Publish > Website Cascading Style Sheets (CSS) is a programming language used to format webpages on the internet. If you arrange the appropriate authorisation with your server administrator, then you will be able to write CSS code to adjust the appearance of your website. If you are willing learn some basic CSS, then you will be able to powerfully customise your Heurist site, changing its appearance significantly. If you choose to go further with CSS, you can  even introduce animations and mobile-friendly layouts to your site. It can be daunting when you get started with CSS, but the best approach is trial-and-error. Edit the CSS, see how the website looks, then keep tinkering until you get the appearance you want. You can use the developer tools in Chrome or Firefox to explore the structure of your website, and to see exactly how the CSS is applying to it. For a brief introduction to the fundamental concepts of CSS, and links to some useful resources, see our Publish Menu Tutorial. There are five main ways you can incorporate custom CSS into your website. You can: Add a global stylesheet to the website Add individual stylesheets to particular webpages Add custom CSS into a Custom Report (see the Custom Reports Advanced Usage page). Add CSS to individual page elements (not recommended) Import CSS from elsewhere Before we cover these topics, however, you need to know how the custom CSS you write will link up with your website. Controlling how CSS affects your website A CSS file is made up of a series of selectors and declaration blocks . The  selector   says which elements of a page you would like to format, and the  declaration block says what formatting you would like to apply to the selected element. For example, let's say you wanted all paragraphs on your website to have blue text and two lines of space above and below them. You could write the following code: p {      color: blue;      margin-block-start: 2em;      margin-block-end: 2em;  } In this example, the selector is  p . It will apply to all  p tags – i.e. it will apply to all paragraphs. But what if you only want to apply your formatting to  some elements? For example, perhaps you are writing an internet novel with two narrators. You want all the paragraphs spoken by Narrator One to be in blue, and all paragraphs spoken by Narrator Two to be in red. To achieve this, you can use CSS  classes . Take a look at the code below: p.narrator-one {      color: blue;  } p.narrator-two {      color: red;  } In this example, we use a period "." to select only paragraphs that have a certain class. "p.narrator-one" selects all paragraphs with the class "narrator-one", and "p.narrator-two" selects all paragraphs with the class "narrator-two". You can actually use a class selector on its own. In this case, it will have a slightly different meaning: .narrator-one {      color: blue;  } This example will select all elements with the class .narrator-two, whether they are paragraphs or divisions or headings or any other element. Though this  particular example will only have an effect if the element contains some text, since the 'color' declaration only affect the colour of text. There are different CSS declaration for the colour of the element's border or background. If you just want to style one particular element on a page, you can select it by id using the hash "#" symbol. For example:  #my-special-element {      border: solid green 5px;  } This will select the element on the page with the id 'my-special-element', and give it a green border 5 pixels thick. If you want to be more specific, you could also write something like h1#my-special-element, which would select just the heading level 1 that has the id 'my-special-element.' We could go into much more depth about CSS selectors and declaration blocks, but if you really want to learn all the details, then you should do one of the many excellent CSS Tutorials available on the internet. The key question here is: How do I assign a class or id to an element on my Heurist website? Assign classes To assign one or more classes to an element on a Heurist page, click on the element in the treeview and open the 'Classes' section. You can add as many classes as you like, seperated by spaces. NB: Obviously this means that class names cannot have spaces in them. The convention in CSS is to replace spaces with hyphens. Hence in the example image, the classes are narrator-one, highlighted-element and blue-background. Assign an id or add element CSS (right image) Every element you insert in the Heurist treeview is given an ID automatically. If you click 'Edit source', you will see the automatically assigned id in the ID field. You can change this as you wish. You will also see a box for applying CSS directly to this particular element. This box is only for special cases – as much as possible, you should use stylesheets that apply to entire pages or entire websites, as described below. Editing the source (advanced; right image) If you wish to apply CSS to particular elements inside one of the element in the treeview, then you will need to click 'Edit HTML source' under the 'Edit source' heading, and assign classes or an id to the relevant elements directly. There are good explanations about how to assign a class or give an id to an HTML element on W3Schools. Some useful selectors (advanced) If you are ambitious, and wish to develop a CSS template that thoroughly formats your whole website, it can be useful to know some of Heurist's key selectors. Click below to expand the list.  Useful selectors for Heurist websites #main-content: All Heurist sites by default are packaged into three main div elements. The #main-content element occupies most of the screen, and is where the content of the webpage is loaded. To apply formatting to elements inside #main-content, you can use a child or sibling selector . For example, the selector #main-content p {/* some formatting */} will apply formatting to all paragraphs inside the #main-content division. #main-header: The #main-header element appears at the top of the screen. NB: If you wish to change the appearance of the #main-header using CSS, then you are strongly advised to define your own custom header in the 'custom header' field of the website record. Make sure to include all the named elements below (#main-title etc.), if you want Heurist to automatically generate the website's title, menu and so on. #main-footer:The #main-footer element appears at the bottom of the screen. #main-logo: The #main-logo is a div element in the left of the #main-header, which contains the site logo. #alt-logo: The #alt-logo is a div to the right of the #main-header, which contains the site's second logo, if there is one. #main-title: The #main-title div contains an

element with the main title of the site #main-menu: The #main-menu is a div in the #main-header containing an unordered list (a