Primo commit!
|
@ -0,0 +1,13 @@
|
|||
# editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
// Usare IntelliSense per informazioni sui possibili attributi.
|
||||
// Al passaggio del mouse vengono visualizzate le descrizioni degli attributi esistenti.
|
||||
// Per altre informazioni, visitare: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "Launch index.html",
|
||||
"type": "firefox",
|
||||
"request": "launch",
|
||||
"reAttach": true,
|
||||
"file": "${workspaceFolder}/index.html"
|
||||
},
|
||||
{
|
||||
"name": "Launch localhost",
|
||||
"type": "firefox",
|
||||
"request": "launch",
|
||||
"reAttach": true,
|
||||
"url": "http://localhost/index.html",
|
||||
"webRoot": "${workspaceFolder}"
|
||||
},
|
||||
{
|
||||
"name": "Attach",
|
||||
"type": "firefox",
|
||||
"request": "attach"
|
||||
},
|
||||
{
|
||||
"name": "Launch WebExtension",
|
||||
"type": "firefox",
|
||||
"request": "launch",
|
||||
"reAttach": true,
|
||||
"addonPath": "${workspaceFolder}"
|
||||
}
|
||||
]
|
||||
}
|
|
@ -0,0 +1,62 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Page Not Found</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
* {
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
color: #888;
|
||||
display: table;
|
||||
font-family: sans-serif;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
margin: 2em auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #555;
|
||||
font-size: 2em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 auto;
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 280px) {
|
||||
|
||||
body,
|
||||
p {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
margin: 0 0 0.3em;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Page Not Found</h1>
|
||||
<p>Sorry, but the page you were trying to view does not exist.</p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<!-- IE needs 512+ bytes: https://blogs.msdn.microsoft.com/ieinternals/2010/08/18/friendly-http-error-pages/ -->
|
|
@ -0,0 +1,19 @@
|
|||
Copyright (c) HTML5 Boilerplate
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
||||
of the Software, and to permit persons to whom the Software is furnished to do
|
||||
so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html class="no-js" lang="it">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>GEST366 - Cos'è</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="apple-touch-icon" href="icon.png">
|
||||
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
|
||||
<meta name="theme-color" content="#fafafa">
|
||||
<meta name="author" content="ReF Artistic Services">
|
||||
<meta name="description" content="Scopri GEST366, il gestionale open source, derivato da gestionale360.">
|
||||
<meta name="keywords" content="gestionale, gest366, gestionale360">
|
||||
<!-- Open Graph Tags -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://www.gest366.it/">
|
||||
<meta property="og:title" content='GEST366'>
|
||||
<meta property="og:image" content="https://www.gest366.it/img/logo.png">
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
<meta property="og:image:width" content="800" />
|
||||
<meta property="og:image:height" content="515" />
|
||||
<meta property="og:image:alt" content="Logo GEST366" />
|
||||
<meta property="og:description" content="Documentazione GEST366">
|
||||
<meta property="og:locale" content="it_IT">
|
||||
</head>
|
||||
|
||||
<body class="secondary-page">
|
||||
<!--[if IE]>
|
||||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
|
||||
<![endif]-->
|
||||
|
||||
<header class="clearfix">
|
||||
<a href="https://www.gest366.it"><img src="img/logo.png" id="logo" alt="gest366 logo"></a>
|
||||
<nav role="navigation">
|
||||
<img id="menu-logo" onclick="toggleMenuVisibility()" src="img/menu.svg" alt="menu icon">
|
||||
<ul id="menu">
|
||||
<li><a href="#">Cos'è</a></li>
|
||||
<li><a href="./download.html">Download</a></li>
|
||||
<li><a href="./doc.html">Documentazione</a></li>
|
||||
<li><a href="https://www.gest366.it/forum/">Forum</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main id="about">
|
||||
<div>
|
||||
<h1>Informazioni</h1>
|
||||
<p>GEST366 è un software gestionale, adatto a tutte le aziende e PMI italiane, completo, veloce e facile da usare.
|
||||
Consente la creazione di documenti, anagrafiche, fatture e molto altro. È basato su Gestionale360, di Massimo Pizzato e,
|
||||
come questo, è distribuito con licenza libera e open source GPLv3.
|
||||
</p>
|
||||
<p>Il progetto è sostenuto da due aziende, ReF Services e ImmensoNET, e da un gruppo di volontari che si occupano dello sviluppo dell'applicativo.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<footer role="contentinfo">
|
||||
<p>Sostenuto da:</p>
|
||||
<ul id="maintainers">
|
||||
<li><a href="https://www.refservices.eu">ReF Services</a></li>
|
||||
<li><a href="https://www.immensonet.it">Immenso NET</a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
<script src="js/vendor/modernizr-3.7.1.min.js"></script>
|
||||
<script src="js/plugins.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Please read: https://msdn.microsoft.com/en-us/library/ie/dn455106.aspx -->
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square70x70logo src="tile.png"/>
|
||||
<square150x150logo src="tile.png"/>
|
||||
<wide310x150logo src="tile-wide.png"/>
|
||||
<square310x310logo src="tile.png"/>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
|
@ -0,0 +1,764 @@
|
|||
/*! HTML5 Boilerplate v7.2.0 | MIT License | https://html5boilerplate.com/ */
|
||||
|
||||
/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
|
||||
/*
|
||||
* What follows is the result of much research on cross-browser styling.
|
||||
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
|
||||
* Kroc Camen, and the H5BP dev community and team.
|
||||
*/
|
||||
|
||||
/* ==========================================================================
|
||||
Base styles: opinionated defaults
|
||||
========================================================================== */
|
||||
|
||||
html {
|
||||
color: #222;
|
||||
font-size: 1em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove text-shadow in selection highlight:
|
||||
* https://twitter.com/miketaylr/status/12228805301
|
||||
*
|
||||
* Vendor-prefixed and regular ::selection selectors cannot be combined:
|
||||
* https://stackoverflow.com/a/16982510/7133471
|
||||
*
|
||||
* Customize the background color to match your design.
|
||||
*/
|
||||
|
||||
::-moz-selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #b3d4fc;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* A better looking default horizontal rule
|
||||
*/
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the gap between audio, canvas, iframes,
|
||||
* images, videos and the bottom of their containers:
|
||||
* https://github.com/h5bp/html5-boilerplate/issues/440
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove default fieldset styles.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Allow only vertical resizing of textareas.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Browser Upgrade Prompt
|
||||
========================================================================== */
|
||||
|
||||
.browserupgrade {
|
||||
margin: 0.2em 0;
|
||||
background: #ccc;
|
||||
color: #000;
|
||||
padding: 0.2em 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Author's custom styles
|
||||
========================================================================== */
|
||||
@font-face {
|
||||
font-family: alata;
|
||||
src: url(../fonts/alata-regular.ttf);
|
||||
}
|
||||
|
||||
@keyframes slider {
|
||||
0% {left: 0; opacity: 0;}
|
||||
5% {left: -50%; opacity: 1;}
|
||||
15% {left: -50%;}
|
||||
20% {left: -50%;}
|
||||
25% {left: -50%; opacity: 1;}
|
||||
30% {opacity: 0;}
|
||||
35% {left: -150%; opacity: 1;}
|
||||
40% {left: -150%;}
|
||||
45% {left: -150%; opacity: 1;}
|
||||
50% {opacity: 0;}
|
||||
55% {left: -250%; opacity: 1;}
|
||||
60% {left: -250%;}
|
||||
65% {left: -250%; opacity: 1;}
|
||||
70% {opacity: 0;}
|
||||
75% {left: -350%; opacity: 1;}
|
||||
80% {left: -350%;}
|
||||
85% {left: -350%;}
|
||||
90% {left: -350%; opacity: 1;}
|
||||
95% {opacity: 0;}
|
||||
100% {left: -450%;}
|
||||
}
|
||||
|
||||
@keyframes pulse_animation {
|
||||
0% { transform: scale(1); }
|
||||
30% { transform: scale(1); }
|
||||
40% { transform: scale(1.08); }
|
||||
50% { transform: scale(1); }
|
||||
60% { transform: scale(1); }
|
||||
70% { transform: scale(1.05); }
|
||||
80% { transform: scale(1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
25% {transform: rotate(90deg);}
|
||||
50% {transform: rotate(180deg);}
|
||||
75% {transform: rotate(270deg);}
|
||||
100% { transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Elementi comuni
|
||||
========================================================================== */
|
||||
|
||||
body {
|
||||
min-width: 320px;
|
||||
grid-area: main;
|
||||
background-image: url("../img/background.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center 18em;
|
||||
color: #2269ff;
|
||||
font-family: alata;
|
||||
}
|
||||
|
||||
main {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.secondary-page {
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #2269ff;
|
||||
border-radius: 10px;
|
||||
padding: .6rem 1.2rem;
|
||||
color: white;
|
||||
border: none;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Header
|
||||
========================================================================== */
|
||||
|
||||
header {
|
||||
max-height: 15rem;
|
||||
font-size: 2em;
|
||||
margin: 1rem 1rem 0 1rem;
|
||||
}
|
||||
|
||||
#logo {
|
||||
max-height: 7rem;
|
||||
float: left;
|
||||
}
|
||||
|
||||
nav {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#menu {
|
||||
visibility: hidden;
|
||||
list-style-type: none;
|
||||
top: 13%;
|
||||
right: 2%;
|
||||
z-index: 20;
|
||||
margin: 0;
|
||||
max-width: 35%;
|
||||
position: absolute;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
-webkit-border-radius: .5em;
|
||||
-moz-border-radius: .5em;
|
||||
-ms-border-radius: .5em;
|
||||
border-radius: .5em;
|
||||
box-shadow: .1em .1em .2em #2269ff;
|
||||
}
|
||||
|
||||
#menu-logo:hover {
|
||||
animation: rotate;
|
||||
animation-duration: 1.5s;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
#menu a{
|
||||
font-size: 1.5rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Homepage
|
||||
========================================================================== */
|
||||
|
||||
#impressum {
|
||||
font-size: 2em;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#slider {
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#features {
|
||||
list-style-type: none;
|
||||
font-size: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
left: 0;
|
||||
width: 500%;
|
||||
animation: slider 10s linear infinite;
|
||||
}
|
||||
|
||||
.feature {
|
||||
display: inline-block;
|
||||
font-size: 1.5rem;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
#features > li > p {
|
||||
margin: 0 auto;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
text-align: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.feature-icon > img {
|
||||
max-width: 5em;
|
||||
}
|
||||
|
||||
.button > a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#download {
|
||||
margin: 4rem auto;
|
||||
padding: 2rem 0;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
#download {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
#download p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#download-icon {
|
||||
max-width: 5em;
|
||||
}
|
||||
|
||||
#paypal {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
padding: 1rem 0;
|
||||
margin: 3rem auto;
|
||||
}
|
||||
|
||||
#paypal > p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#paypal-button-icon {
|
||||
max-width: 4em;
|
||||
}
|
||||
|
||||
#paypal-button-icon {
|
||||
animation-name: pulse_animation;
|
||||
animation-duration: 2000ms;
|
||||
transform-origin: 70% 70%;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
#paypal-button-icon:hover,
|
||||
#paypal-button-icon:focus {
|
||||
animation-name: unset;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Cos'è
|
||||
========================================================================== */
|
||||
#about {
|
||||
font-size: 1.2em;
|
||||
margin: 4rem auto;
|
||||
padding: 2rem 0;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
max-width: 80%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Download
|
||||
========================================================================== */
|
||||
|
||||
#download-page ul {
|
||||
margin: auto;
|
||||
max-width: 40%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#stable-section {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
#testing-section {
|
||||
opacity: 0;
|
||||
padding: 2rem 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Documentazione
|
||||
========================================================================== */
|
||||
|
||||
#categorie-doc {
|
||||
padding: 3rem 0;
|
||||
max-width: 80%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.categoria {
|
||||
width: 20rem;
|
||||
height: 10rem;
|
||||
border-radius: 15px;
|
||||
background-image: linear-gradient(to bottom right, #c025ff 0%, #2269ff 100%);
|
||||
margin: 0 0 2rem 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.categoria > p {
|
||||
background-color: white;
|
||||
border-radius: 15px;
|
||||
font-size: 1.4em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: stretch;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.titolo-categoria > a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.doc-icon {
|
||||
max-width: 40%;
|
||||
max-height: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.titolo-categoria {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.no-background {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.doc-page {
|
||||
text-align: left;
|
||||
max-width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.doc-page h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gui-interactive {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.gui-input {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.gui-suggestion {
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.gui-element {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.vertical-rectangle {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.non-inline {
|
||||
max-width: 80%;
|
||||
margin: 3em auto;
|
||||
box-shadow: .4em .4em .8em #2269ff;
|
||||
}
|
||||
|
||||
.non-inline img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
margin: 0 .1em;
|
||||
}
|
||||
|
||||
.square {
|
||||
max-width: 2em;
|
||||
}
|
||||
|
||||
.rectangle {
|
||||
max-height: 2.5em;
|
||||
}
|
||||
/* ==========================================================================
|
||||
Footer
|
||||
========================================================================== */
|
||||
|
||||
footer {
|
||||
grid-area: footer;
|
||||
background-color: #2269ff;
|
||||
text-align: center;
|
||||
color: white;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
#maintainers {
|
||||
list-style: none;
|
||||
padding: .5rem 0 2rem 0;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#maintainers li {
|
||||
display: inline;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#maintainers li:first-child {
|
||||
margin-right: 10rem;
|
||||
}
|
||||
|
||||
#maintainers a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#maintainers a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Helper classes
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Hide visually and from screen readers
|
||||
*/
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide only visually, but have it available for screen readers:
|
||||
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
||||
*
|
||||
* 1. For long content, line feeds are not interpreted as spaces and small width
|
||||
* causes content to wrap 1 word per line:
|
||||
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
|
||||
*/
|
||||
|
||||
.sr-only {
|
||||
border: 0;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
/* 1 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Extends the .sr-only class to allow the element
|
||||
* to be focusable when navigated to via the keyboard:
|
||||
* https://www.drupal.org/node/897638
|
||||
*/
|
||||
|
||||
.sr-only.focusable:active,
|
||||
.sr-only.focusable:focus {
|
||||
clip: auto;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
position: static;
|
||||
white-space: inherit;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide visually and from screen readers, but maintain layout
|
||||
*/
|
||||
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
* Clearfix: contain floats
|
||||
*
|
||||
* For modern browsers
|
||||
* 1. The space content is one way to avoid an Opera bug when the
|
||||
* `contenteditable` attribute is included anywhere else in the document.
|
||||
* Otherwise it causes space to appear at the top and bottom of elements
|
||||
* that receive the `clearfix` class.
|
||||
* 2. The use of `table` rather than `block` is only necessary if using
|
||||
* `:before` to contain the top-margins of child elements.
|
||||
*/
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: " ";
|
||||
/* 1 */
|
||||
display: table;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
EXAMPLE Media Queries for Responsive Design.
|
||||
These examples override the primary ('mobile first') styles.
|
||||
Modify as content requires.
|
||||
========================================================================== */
|
||||
@media only screen and (min-width: 1440px) {
|
||||
|
||||
body {
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
#features {
|
||||
margin: 3rem auto;
|
||||
}
|
||||
|
||||
#menu {
|
||||
top: 5rem;
|
||||
max-width: 35%;
|
||||
}
|
||||
|
||||
#download,
|
||||
#paypal {
|
||||
margin-top: 12rem;
|
||||
}
|
||||
|
||||
#categorie-doc {
|
||||
padding: 8rem 0;
|
||||
}
|
||||
|
||||
.categoria {
|
||||
width: 25rem;
|
||||
}
|
||||
|
||||
#paypal {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
max-height: 30rem;
|
||||
}
|
||||
|
||||
#download {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
#maintainers li:first-child {
|
||||
margin-right: 6rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 769px) and (max-width: 840px) {
|
||||
|
||||
#categorie-doc {
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
|
||||
body {
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
#menu {
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
#download {
|
||||
background: none;
|
||||
}
|
||||
|
||||
main {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
#categorie-doc {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
|
||||
body {
|
||||
background: none;
|
||||
}
|
||||
|
||||
#menu {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media print,
|
||||
(-webkit-min-device-pixel-ratio: 1.25),
|
||||
(min-resolution: 1.25dppx),
|
||||
(min-resolution: 120dpi) {
|
||||
/* Style adjustments for high resolution devices */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Print styles.
|
||||
Inlined to avoid the additional HTTP request:
|
||||
https://www.phpied.com/delay-loading-your-print-css/
|
||||
========================================================================== */
|
||||
|
||||
@media print {
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
background: transparent !important;
|
||||
color: #000 !important;
|
||||
/* Black prints faster */
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
abbr[title]:after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
/*
|
||||
* Don't show links that are fragment identifiers,
|
||||
* or use the `javascript:` pseudo protocol
|
||||
*/
|
||||
a[href^="#"]:after,
|
||||
a[href^="javascript:"]:after {
|
||||
content: "";
|
||||
}
|
||||
pre {
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
/*
|
||||
* Printing Tables:
|
||||
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
|
||||
*/
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,349 @@
|
|||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
|
@ -0,0 +1,120 @@
|
|||
<!doctype html>
|
||||
<html class="no-js" lang="it">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>GEST366 - Documentazione</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="apple-touch-icon" href="icon.png">
|
||||
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
|
||||
<meta name="theme-color" content="#fafafa">
|
||||
<meta name="description" content="Scopri come usare GEST366, il gestionale open source, derivato da gestionale360.">
|
||||
<meta name="author" content="ReF Artistic Services">
|
||||
<meta name="keywords" content="gestionale, software, gestione aziendale">
|
||||
<!-- Open Graph Tags -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://www.gest366.it/">
|
||||
<meta property="og:title" content='GEST366'>
|
||||
<meta property="og:image" content="https://www.gest366.it/img/logo.png">
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
<meta property="og:image:width" content="800" />
|
||||
<meta property="og:image:height" content="515" />
|
||||
<meta property="og:image:alt" content="Logo GEST366" />
|
||||
<meta property="og:description" content="Documentazione GEST366">
|
||||
<meta property="og:locale" content="it_IT">
|
||||
</head>
|
||||
|
||||
<body class="secondary-page">
|
||||
<!--[if IE]>
|
||||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
|
||||
<![endif]-->
|
||||
|
||||
<header class="clearfix">
|
||||
<a href="https://www.gest366.it"><img src="img/logo.png" id="logo" alt="gest366 logo"></a>
|
||||
<nav role="navigation">
|
||||
<img id="menu-logo" onclick="toggleMenuVisibility()" src="img/menu.svg" alt="menu icon">
|
||||
<ul id="menu">
|
||||
<li><a href="./about.html">Cos'è</a></li>
|
||||
<li><a href="./download.html">Download</a></li>
|
||||
<li><a href="#">Documentazione</a></li>
|
||||
<li><a href="https://www.gest366.it/forum/">Forum</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<h1>Documentazione</h1>
|
||||
<div id="categorie-doc">
|
||||
<div class="categoria">
|
||||
<p>
|
||||
<img class="doc-icon" src="img/doc1.svg" alt="documentation icon 1">
|
||||
<span class="titolo-categoria">
|
||||
<a href="guida-installazione.html">Guida all'installazione</a>
|
||||
</span>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<div class="categoria">
|
||||
<p>
|
||||
<img class="doc-icon" src="img/doc1.svg" alt="documentation icon 1">
|
||||
<span class="titolo-categoria">
|
||||
<a href="impostazioni-di-base.html">Impostazioni di base</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="categoria">
|
||||
<p>
|
||||
<img class="doc-icon" src="img/doc2.svg" alt="documentation icon 2">
|
||||
<span class="titolo-categoria">
|
||||
<a href="documenti.html">Documenti<br>
|
||||
<small>creazione e gestione</small>
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="categoria">
|
||||
<p>
|
||||
<img class="doc-icon" src="img/doc2.svg" alt="documentation icon 2">
|
||||
<span class="titolo-categoria">
|
||||
<a href="moduli.html">Moduli<br>
|
||||
<small>creazione e gestione</small>
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="categoria">
|
||||
<p>
|
||||
<img class="doc-icon" src="img/doc3.svg" alt="documentation icon 3">
|
||||
<span class="titolo-categoria">
|
||||
<a href="magazzino.html">Magazzino e Multimagazzino</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="categoria">
|
||||
<p>
|
||||
<img class="doc-icon" src="img/doc3.svg" alt="documentation icon 3">
|
||||
<span class="titolo-categoria">
|
||||
<a href="ordini.html">Ordini</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer role="contentinfo">
|
||||
<p>Sostenuto da:</p>
|
||||
<ul id="maintainers">
|
||||
<li><a href="https://www.refservices.eu">ReF Services</a></li>
|
||||
<li><a href="https://www.immensonet.it">Immenso NET</a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
<script src="js/vendor/modernizr-3.7.1.min.js"></script>
|
||||
<script src="js/plugins.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,34 @@
|
|||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/)
|
||||
|
||||
## Getting started
|
||||
|
||||
* [Usage](usage.md) — Overview of the project contents.
|
||||
* [FAQ](faq.md) — Frequently asked questions along with their answers.
|
||||
|
||||
## HTML5 Boilerplate core
|
||||
|
||||
* [HTML](html.md) — Guide to the default HTML.
|
||||
* [CSS](css.md) — Guide to the default CSS.
|
||||
* [JavaScript](js.md) — Guide to the default JavaScript.
|
||||
* [Everything else](misc.md).
|
||||
|
||||
## Development
|
||||
|
||||
* [Extending and customizing HTML5 Boilerplate](extend.md) — Going further
|
||||
with the boilerplate.
|
||||
|
||||
## Related projects
|
||||
|
||||
The [H5BP organization](https://github.com/h5bp) maintains several projects
|
||||
that complement HTML5 Boilerplate, projects that can help you improve different
|
||||
aspects of your website/web app (e.g.: the performance, security, etc.).
|
||||
|
||||
* [Server Configs](https://github.com/h5bp/server-configs) — Fast and
|
||||
smart configurations for web servers such as Apache and Nginx.
|
||||
* [Apache](https://github.com/h5bp/server-configs-apache)
|
||||
* [Google App Engine (GAE)](https://github.com/h5bp/server-configs-gae)
|
||||
* [Internet Information Services (IIS)](https://github.com/h5bp/server-configs-iis)
|
||||
* [lighttpd](https://github.com/h5bp/server-configs-lighttpd)
|
||||
* [Nginx](https://github.com/h5bp/server-configs-nginx)
|
||||
* [Node.js](https://github.com/h5bp/server-configs-node)
|
||||
* [Front-end Developer Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions)
|
|
@ -0,0 +1,49 @@
|
|||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# The CSS
|
||||
|
||||
HTML5 Boilerplate's CSS includes:
|
||||
|
||||
* [Normalize.css](#normalizecss)
|
||||
* [main.css](#maincss)
|
||||
|
||||
This starting CSS does not rely on the presence of
|
||||
[conditional class names](https://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/),
|
||||
[conditional style sheets](https://css-tricks.com/how-to-create-an-ie-only-stylesheet/),
|
||||
or [Modernizr](https://modernizr.com/), and it is ready to use no matter what
|
||||
your development preferences happen to be.
|
||||
|
||||
|
||||
## Normalize.css
|
||||
|
||||
In order to make browsers render all elements more consistently and in line
|
||||
with modern standards, we include Normalize.css — a modern, HTML5-ready
|
||||
alternative to CSS resets.
|
||||
|
||||
As opposed to CSS resets, Normalize.css:
|
||||
|
||||
* targets only the styles that need normalizing
|
||||
* preserves useful browser defaults rather than erasing them
|
||||
* corrects bugs and common browser inconsistencies
|
||||
* improves usability with subtle improvements
|
||||
* doesn't clutter the debugging tools
|
||||
* has better documentation
|
||||
|
||||
For more information about Normalize.css, please refer to its [project
|
||||
page](https://necolas.github.io/normalize.css/).
|
||||
|
||||
|
||||
## main.css
|
||||
|
||||
Several base styles are included that build upon `Normalize.css`. These
|
||||
styles:
|
||||
|
||||
* provide basic typography settings that improve text readability
|
||||
* protect against unwanted `text-shadow` during text highlighting
|
||||
* tweak the default alignment of some elements (e.g.: `img`, `video`,
|
||||
`fieldset`, `textarea`)
|
||||
* style the prompt that is displayed to users using an outdated browser
|
||||
* and more...
|
||||
|
||||
These styles are included in [main.css](https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css). See the [main.css](https://github.com/h5bp/main.css) project [documentation](https://github.com/h5bp/main.css/blob/master/README.md#features) for a full discussion of these styles.
|
|
@ -0,0 +1,640 @@
|
|||
[HTML5 Boilerplate homepage](https://html5boilerplate.com) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# Extend and customise HTML5 Boilerplate
|
||||
|
||||
Here is some useful advice for how you can make your project with HTML5
|
||||
Boilerplate even better. We don't want to include it all by default, as
|
||||
not everything fits with everyone's needs.
|
||||
|
||||
|
||||
* [App Stores](#app-stores)
|
||||
* [DNS prefetching](#dns-prefetching)
|
||||
* [Google Universal Analytics](#google-universal-analytics)
|
||||
* [Internet Explorer](#internet-explorer)
|
||||
* [Miscellaneous](#miscellaneous)
|
||||
* [News Feeds](#news-feeds)
|
||||
* [Search](#search)
|
||||
* [Social Networks](#social-networks)
|
||||
* [URLs](#urls)
|
||||
* [Web Apps](#web-apps)
|
||||
* [security.txt](#security.txt)
|
||||
|
||||
## App Stores
|
||||
|
||||
### Smart App Banners in iOS 6+ Safari
|
||||
|
||||
Stop bothering everyone with gross modals advertising your entry in the
|
||||
App Store. Including the following [meta tag](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html) will unobtrusively give the user the option to download your iOS app, or open it with some data about the user's current state on the website.
|
||||
|
||||
```html
|
||||
<meta name="apple-itunes-app" content="app-id=APP_ID,app-argument=SOME_TEXT">
|
||||
```
|
||||
|
||||
## DNS prefetching
|
||||
|
||||
In short, DNS Prefetching is a method of informing the browser of domain names
|
||||
referenced on a site so that the client can resolve the DNS for those hosts,
|
||||
cache them, and when it comes time to use them, have a faster turn around on
|
||||
the request.
|
||||
|
||||
### Implicit prefetches
|
||||
|
||||
There is a lot of prefetching done for you automatically by the browser. When
|
||||
the browser encounters an anchor in your html that does not share the same
|
||||
domain name as the current location the browser requests, from the client OS,
|
||||
the IP address for this new domain. The client first checks its cache and
|
||||
then, lacking a cached copy, makes a request from a DNS server. These requests
|
||||
happen in the background and are not meant to block the rendering of the
|
||||
page.
|
||||
|
||||
The goal of this is that when the foreign IP address is finally needed it will
|
||||
already be in the client cache and will not block the loading of the foreign
|
||||
content. Fewer requests result in faster page load times. The perception of this
|
||||
is increased on a mobile platform where DNS latency can be greater.
|
||||
|
||||
#### Disable implicit prefetching
|
||||
|
||||
```html
|
||||
<meta http-equiv="x-dns-prefetch-control" content="off">
|
||||
```
|
||||
|
||||
Even with X-DNS-Prefetch-Control meta tag (or http header) browsers will still
|
||||
prefetch any explicit dns-prefetch links.
|
||||
|
||||
**_WARNING:_** THIS MAY MAKE YOUR SITE SLOWER IF YOU RELY ON RESOURCES FROM
|
||||
FOREIGN DOMAINS.
|
||||
|
||||
### Explicit prefetches
|
||||
|
||||
Typically the browser only scans the HTML for foreign domains. If you have
|
||||
resources that are outside of your HTML (a javascript request to a remote
|
||||
server or a CDN that hosts content that may not be present on every page of
|
||||
your site, for example) then you can queue up a domain name to be prefetched.
|
||||
|
||||
```html
|
||||
<link rel="dns-prefetch" href="//example.com">
|
||||
<link rel="dns-prefetch" href="https://ajax.googleapis.com">
|
||||
```
|
||||
|
||||
You can use as many of these as you need, but it's best if they are all
|
||||
immediately after the [Meta
|
||||
Charset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-charset)
|
||||
element (which should go right at the top of the `head`), so the browser can
|
||||
act on them ASAP.
|
||||
|
||||
#### Common Prefetch Links
|
||||
|
||||
Amazon S3:
|
||||
|
||||
```html
|
||||
<link rel="dns-prefetch" href="//s3.amazonaws.com">
|
||||
```
|
||||
|
||||
Google APIs:
|
||||
|
||||
```html
|
||||
<link rel="dns-prefetch" href="https://ajax.googleapis.com">
|
||||
```
|
||||
|
||||
Microsoft Ajax Content Delivery Network:
|
||||
|
||||
```html
|
||||
<link rel="dns-prefetch" href="//ajax.microsoft.com">
|
||||
<link rel="dns-prefetch" href="//ajax.aspnetcdn.com">
|
||||
```
|
||||
|
||||
### Further reading about DNS prefetching
|
||||
|
||||
* https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-DNS-Prefetch-Control
|
||||
* https://dev.chromium.org/developers/design-documents/dns-prefetching
|
||||
* https://blogs.msdn.microsoft.com/ie/2011/03/17/internet-explorer-9-network-performance-improvements/
|
||||
|
||||
|
||||
## Google Universal Analytics
|
||||
|
||||
### More tracking settings
|
||||
|
||||
The [optimized Google Universal Analytics
|
||||
snippet](https://mathiasbynens.be/notes/async-analytics-snippet#universal-analytics)
|
||||
included with HTML5 Boilerplate includes something like this:
|
||||
|
||||
```js
|
||||
ga('create', 'UA-XXXXX-X', 'auto'); ga('send', 'pageview');
|
||||
```
|
||||
|
||||
To customize further, see Google's [Advanced
|
||||
Setup](https://developers.google.com/analytics/devguides/collection/analyticsjs/),
|
||||
[Pageview](https://developers.google.com/analytics/devguides/collection/analyticsjs/pages),
|
||||
and [Event](https://developers.google.com/analytics/devguides/collection/analyticsjs/events) Docs.
|
||||
|
||||
### Anonymize IP addresses
|
||||
|
||||
In some countries, no personal data may be transferred outside jurisdictions
|
||||
that do not have similarly strict laws (i.e. from Germany to outside the EU).
|
||||
Thus a webmaster using the Google Universal Analytics may have to ensure that
|
||||
no personal (trackable) data is transferred to the US. You can do that with
|
||||
[the `ga('set', 'anonymizeIp', true);`
|
||||
parameter](https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced#anonymizeip)
|
||||
before sending any events/pageviews. In use it looks like this:
|
||||
|
||||
```js
|
||||
ga('create', 'UA-XXXXX-X', 'auto');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
```
|
||||
|
||||
### Track jQuery AJAX requests in Google Analytics
|
||||
|
||||
An article by @JangoSteve explains how to [track jQuery AJAX requests in Google
|
||||
Analytics](https://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/).
|
||||
|
||||
Add this to `plugins.js`:
|
||||
|
||||
```js
|
||||
/*
|
||||
* Log all jQuery AJAX requests to Google Analytics
|
||||
* See: https://www.alfajango.com/blog/track-jquery-ajax-requests-in-google-analytics/
|
||||
*/
|
||||
if (typeof ga !== "undefined" && ga !== null) {
|
||||
$(document).ajaxSend(function(event, xhr, settings){
|
||||
ga('send', 'pageview', settings.url);
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### Track JavaScript errors in Google Analytics
|
||||
|
||||
Add this function after `ga` is defined:
|
||||
|
||||
```js
|
||||
(function(window){
|
||||
var undefined,
|
||||
link = function (href) {
|
||||
var a = window.document.createElement('a');
|
||||
a.href = href;
|
||||
return a;
|
||||
};
|
||||
window.onerror = function (message, file, line, column) {
|
||||
var host = link(file).hostname;
|
||||
ga('send', {
|
||||
'hitType': 'event',
|
||||
'eventCategory': (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error',
|
||||
'eventAction': message,
|
||||
'eventLabel': (file + ' LINE: ' + line + (column ? ' COLUMN: ' + column : '')).trim(),
|
||||
'nonInteraction': 1
|
||||
});
|
||||
};
|
||||
}(window));
|
||||
```
|
||||
|
||||
### Track page scroll
|
||||
|
||||
Add this function after `ga` is defined:
|
||||
|
||||
```js
|
||||
$(function(){
|
||||
var isDuplicateScrollEvent,
|
||||
scrollTimeStart = new Date,
|
||||
$window = $(window),
|
||||
$document = $(document),
|
||||
scrollPercent;
|
||||
|
||||
$window.scroll(function() {
|
||||
scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height());
|
||||
if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90%
|
||||
isDuplicateScrollEvent = 1;
|
||||
ga('send', 'event', 'scroll',
|
||||
'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's'
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## Internet Explorer
|
||||
|
||||
### IE Pinned Sites
|
||||
|
||||
Enabling your application for pinning will allow IE users to add it to their
|
||||
Windows Taskbar and Start Menu. This comes with a range of new tools that you
|
||||
can easily configure with the elements below. See more [documentation on IE
|
||||
Pinned Sites](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg491731(v%3dvs.85)).
|
||||
|
||||
### Name the Pinned Site for Windows
|
||||
|
||||
Without this rule, Windows will use the page title as the name for your
|
||||
application.
|
||||
|
||||
```html
|
||||
<meta name="application-name" content="Sample Title">
|
||||
```
|
||||
|
||||
### Give your Pinned Site a tooltip
|
||||
|
||||
You know — a tooltip. A little textbox that appears when the user holds their
|
||||
mouse over your Pinned Site's icon.
|
||||
|
||||
```html
|
||||
<meta name="msapplication-tooltip" content="A description of what this site does.">
|
||||
```
|
||||
|
||||
### Set a default page for your Pinned Site
|
||||
|
||||
If the site should go to a specific URL when it is pinned (such as the
|
||||
homepage), enter it here. One idea is to send it to a special URL so you can
|
||||
track the number of pinned users, like so:
|
||||
`https://www.example.com/index.html?pinned=true`
|
||||
|
||||
```html
|
||||
<meta name="msapplication-starturl" content="https://www.example.com/index.html?pinned=true">
|
||||
```
|
||||
|
||||
### Recolor IE's controls manually for a Pinned Site
|
||||
|
||||
IE will automatically use the overall color of your Pinned Site's favicon to
|
||||
shade its browser buttons. UNLESS you give it another color here. Only use
|
||||
named colors (`red`) or hex colors (`#ff0000`).
|
||||
|
||||
```html
|
||||
<meta name="msapplication-navbutton-color" content="#ff0000">
|
||||
```
|
||||
|
||||
### Manually set the window size of a Pinned Site
|
||||
|
||||
If the site should open at a certain window size once pinned, you can specify
|
||||
the dimensions here. It only supports static pixel dimensions. 800x600
|
||||
minimum.
|
||||
|
||||
```html
|
||||
<meta name="msapplication-window" content="width=800;height=600">
|
||||
```
|
||||
|
||||
### Jump List "Tasks" for Pinned Sites
|
||||
|
||||
Add Jump List Tasks that will appear when the Pinned Site's icon gets a
|
||||
right-click. Each Task goes to the specified URL, and gets its own mini icon
|
||||
(essentially a favicon, a 16x16 .ICO). You can add as many of these as you
|
||||
need.
|
||||
|
||||
```html
|
||||
<meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico">
|
||||
<meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico">
|
||||
```
|
||||
|
||||
### (Windows 8) High quality visuals for Pinned Sites
|
||||
|
||||
Windows 8 adds the ability for you to provide a PNG tile image and specify the
|
||||
tile's background color. [Full details on the IE
|
||||
blog](https://blogs.msdn.microsoft.com/ie/2012/06/08/high-quality-visuals-for-pinned-sites-in-windows-8/).
|
||||
|
||||
* Create a 144x144 image of your site icon, filling all of the canvas, and
|
||||
using a transparent background.
|
||||
* Save this image as a 32-bit PNG and optimize it without reducing
|
||||
colour-depth. It can be named whatever you want (e.g. `metro-tile.png`).
|
||||
* To reference the tile and its color, add the HTML `meta` elements described
|
||||
in the IE Blog post.
|
||||
|
||||
### (Windows 8) Badges for Pinned Sites
|
||||
|
||||
IE will poll an XML document for badge information to display on your app's
|
||||
tile in the Start screen. The user will be able to receive these badge updates
|
||||
even when your app isn't actively running. The badge's value can be a number,
|
||||
or one of a predefined list of glyphs.
|
||||
|
||||
* [Tutorial on IEBlog with link to badge XML schema](https://blogs.msdn.microsoft.com/ie/2012/04/03/pinned-sites-in-windows-8/)
|
||||
* [Available badge values](https://docs.microsoft.com/en-us/uwp/schemas/tiles/badgeschema/element-badge)
|
||||
|
||||
```html
|
||||
<meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=https://www.example.com/path/to/file.xml">
|
||||
```
|
||||
|
||||
### Disable link highlighting upon tap in IE10
|
||||
|
||||
Similar to [-webkit-tap-highlight-color](https://davidwalsh.name/mobile-highlight-color)
|
||||
in iOS Safari. Unlike that CSS property, this is an HTML meta element, and its
|
||||
value is boolean rather than a color. It's all or nothing.
|
||||
|
||||
```html
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
```
|
||||
|
||||
You can read about this useful element and more techniques in
|
||||
[Microsoft's documentation on adapting WebKit-oriented apps for IE10](https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/)
|
||||
|
||||
## Search
|
||||
|
||||
### Direct search spiders to your sitemap
|
||||
|
||||
After creating a [sitemap](https://www.sitemaps.org/protocol.html)
|
||||
|
||||
Submit it to search engine tool:
|
||||
* [Google](https://www.google.com/webmasters/tools/sitemap-list)
|
||||
* [Bing](https://www.bing.com/toolbox/webmaster)
|
||||
* [Yandex](https://webmaster.yandex.com/)
|
||||
* [Baidu](https://zhanzhang.baidu.com/)
|
||||
OR
|
||||
Insert the following line anywhere in your robots.txt file, specifying the path to your sitemap:
|
||||
```
|
||||
Sitemap: https://example.com/sitemap_location.xml
|
||||
```
|
||||
|
||||
### Hide pages from search engines
|
||||
|
||||
According to Heather Champ, former community manager at Flickr, you should not
|
||||
allow search engines to index your "Contact Us" or "Complaints" page if you
|
||||
value your sanity. This is an HTML-centric way of achieving that.
|
||||
|
||||
```html
|
||||
<meta name="robots" content="noindex">
|
||||
```
|
||||
|
||||
**_WARNING:_** DO NOT INCLUDE ON PAGES THAT SHOULD APPEAR IN SEARCH ENGINES.
|
||||
|
||||
### Firefox and IE Search Plugins
|
||||
|
||||
Sites with in-site search functionality should be strongly considered for a
|
||||
browser search plugin. A "search plugin" is an XML file which defines how your
|
||||
plugin behaves in the browser. [How to make a browser search
|
||||
plugin](https://www.google.com/search?ie=UTF-8&q=how+to+make+browser+search+plugin).
|
||||
|
||||
```html
|
||||
<link rel="search" title="" type="application/opensearchdescription+xml" href="">
|
||||
```
|
||||
|
||||
|
||||
## Miscellaneous
|
||||
|
||||
* Use [polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills).
|
||||
|
||||
* Use [Microformats](http://microformats.org/wiki/Main_Page) (via
|
||||
[microdata](http://microformats.org/wiki/microdata)) for optimum search
|
||||
results
|
||||
[visibility](https://webmasters.googleblog.com/2009/05/introducing-rich-snippets.html).
|
||||
|
||||
* If you're building a web app you may want [native style momentum scrolling in
|
||||
iOS 5+](https://www.johanbrook.com/writings/native-style-momentum-scrolling-to-arrive-in-ios-5/)
|
||||
using `-webkit-overflow-scrolling: touch`.
|
||||
|
||||
* If you want to disable the translation prompt in Chrome or block Google
|
||||
Translate from translating your web page, use [`<meta name="google"
|
||||
content="notranslate">`](https://support.google.com/webmasters/answer/79812).
|
||||
To disable translation for a particular section of the web page, add
|
||||
[`class="notranslate"`](https://support.google.com/translate/?hl=en#2641276).
|
||||
|
||||
* If you want to disable the automatic detection and formatting of possible
|
||||
phone numbers in Safari on iOS, use [`<meta name="format-detection"
|
||||
content="telephone=no">`](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html).
|
||||
|
||||
* Avoid development/stage websites "leaking" into SERPs (search engine results
|
||||
page) by [implementing X-Robots-tag
|
||||
headers](https://github.com/h5bp/html5-boilerplate/issues/804).
|
||||
|
||||
|
||||
## News Feeds
|
||||
|
||||
### RSS
|
||||
|
||||
Have an RSS feed? Link to it here. Want to [learn how to write an RSS feed from
|
||||
scratch](http://www.rssboard.org/rss-specification)?
|
||||
|
||||
```html
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml">
|
||||
```
|
||||
|
||||
### Atom
|
||||
|
||||
Atom is similar to RSS, and you might prefer to use it instead of or in
|
||||
addition to it. [See what Atom's all
|
||||
about](https://en.wikipedia.org/wiki/Atom_(Web_standard)).
|
||||
|
||||
```html
|
||||
<link rel="alternate" type="application/atom+xml" title="Atom" href="/atom.xml">
|
||||
```
|
||||
|
||||
### Pingbacks
|
||||
|
||||
Your server may be notified when another site links to yours. The href
|
||||
attribute should contain the location of your pingback service.
|
||||
|
||||
```html
|
||||
<link rel="pingback" href="">
|
||||
```
|
||||
|
||||
* High-level explanation: https://codex.wordpress.org/Introduction_to_Blogging#Pingbacks
|
||||
* Step-by-step example case: https://www.hixie.ch/specs/pingback/pingback-1.0#TOC5
|
||||
* PHP pingback service: https://web.archive.org/web/20131211032834/http://blog.perplexedlabs.com/2009/07/15/xmlrpc-pingbacks-using-php/
|
||||
|
||||
|
||||
|
||||
## Social Networks
|
||||
|
||||
### Facebook Open Graph data
|
||||
|
||||
You can control the information that Facebook and others display when users
|
||||
share your site. Below are just the most basic data points you might need. For
|
||||
specific content types (including "website"), see [Facebook's built-in Open
|
||||
Graph content
|
||||
templates](https://developers.facebook.com/docs/sharing/opengraph/using-objects).
|
||||
Take full advantage of Facebook's support for complex data and activity by
|
||||
following the [Open Graph
|
||||
tutorial](https://developers.facebook.com/docs/sharing/webmasters/getting-started).
|
||||
|
||||
For a reference of Open Graph's markup and properties, you may check
|
||||
[Facebook's Open Graph Protocol reference](https://ogp.me). Finally,
|
||||
you can validate your markup with the [Facebook Object
|
||||
Debugger](https://developers.facebook.com/tools/debug/) (needs
|
||||
registration to Facebook).
|
||||
|
||||
```html
|
||||
<meta property="fb:app_id" content="123456789">
|
||||
<meta property="og:url" content="https://www.example.com/path/to/page.html">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="">
|
||||
<meta property="og:image" content="https://www.example.com/path/to/image.jpg">
|
||||
<meta property="og:description" content="">
|
||||
<meta property="og:site_name" content="">
|
||||
<meta property="article:author" content="">
|
||||
```
|
||||
|
||||
### Twitter Cards
|
||||
|
||||
Twitter provides a snippet specification that serves a similar purpose to Open
|
||||
Graph. In fact, Twitter will use Open Graph when Cards is not available. You
|
||||
can read more about the various snippet formats and application process in the
|
||||
[official Twitter Cards documentation](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards),
|
||||
and you can validate your markup with the [Card validator](https://cards-dev.twitter.com/validator)
|
||||
(needs registration to Twitter).
|
||||
|
||||
```html
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@site_account">
|
||||
<meta name="twitter:creator" content="@individual_account">
|
||||
<meta name="twitter:url" content="https://www.example.com/path/to/page.html">
|
||||
<meta name="twitter:title" content="">
|
||||
<meta name="twitter:description" content="">
|
||||
<meta name="twitter:image" content="https://www.example.com/path/to/image.jpg">
|
||||
```
|
||||
|
||||
### Google+ / Schema.org
|
||||
|
||||
Google also provides a snippet specification that serves a similar
|
||||
purpose to Facebook's Open Graph or Twitter Cards. While it helps you
|
||||
to control information displayed on Google+, this metadata is a subset
|
||||
of [schema.org's microdata vocabulary](https://schema.org/), which
|
||||
covers many other schemas that can describe the content of your pages
|
||||
to search engines. For this reason, this metadata is more generic for
|
||||
SEO, notably for Google's search-engine, although this vocabulary is
|
||||
also used by Microsoft, Pinterest and Yandex.
|
||||
|
||||
You can validate your markup with the [Structured Data Testing
|
||||
Tool](https://developers.google.com/structured-data/testing-tool/).
|
||||
Also, please note that this markup requires to add attributes to your
|
||||
top `html` tag.
|
||||
|
||||
```html
|
||||
<html class="no-js" lang="" itemscope itemtype="http://schema.org/Article">
|
||||
<head>
|
||||
|
||||
<link rel="author" href="">
|
||||
<link rel="publisher" href="">
|
||||
<meta itemprop="name" content="">
|
||||
<meta itemprop="description" content="">
|
||||
<meta itemprop="image" content="">
|
||||
```
|
||||
|
||||
## URLs
|
||||
|
||||
### Canonical URL
|
||||
|
||||
Signal to search engines and others "Use this URL for this page!" Useful when
|
||||
parameters after a `#` or `?` is used to control the display state of a page.
|
||||
`https://www.example.com/cart.html?shopping-cart-open=true` can be indexed as
|
||||
the cleaner, more accurate `https://www.example.com/cart.html`.
|
||||
|
||||
```html
|
||||
<link rel="canonical" href="">
|
||||
```
|
||||
|
||||
### Separate mobile URLs
|
||||
|
||||
If you use separate URLs for desktop and mobile users, you should consider
|
||||
helping search engine algorithms better understand the configuration on your
|
||||
web site.
|
||||
|
||||
This can be done by adding the following annotations in your HTML pages:
|
||||
|
||||
* on the desktop page, add the `link rel="alternate"` tag pointing to the
|
||||
corresponding mobile URL, e.g.:
|
||||
|
||||
`<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/page.html" >`
|
||||
|
||||
* on the mobile page, add the `link rel="canonical"` tag pointing to the
|
||||
corresponding desktop URL, e.g.:
|
||||
|
||||
`<link rel="canonical" href="https://www.example.com/page.html">`
|
||||
|
||||
For more information please see:
|
||||
|
||||
* https://developers.google.com/search/mobile-sites/mobile-seo/separate-urls
|
||||
|
||||
|
||||
## Web Apps
|
||||
|
||||
There are a couple of meta tags that provide information about a web app when
|
||||
added to the Home Screen on iOS:
|
||||
|
||||
* Adding `apple-mobile-web-app-capable` will make your web app chrome-less and
|
||||
provide the default iOS app view. You can control the color scheme of the
|
||||
default view by adding `apple-mobile-web-app-status-bar-style`.
|
||||
|
||||
```html
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
```
|
||||
|
||||
* You can use `apple-mobile-web-app-title` to add a specific sites name for the
|
||||
Home Screen icon. This works since iOS 6.
|
||||
|
||||
```html
|
||||
<meta name="apple-mobile-web-app-title" content="">
|
||||
```
|
||||
|
||||
For further information please read the [official
|
||||
documentation](https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)
|
||||
on Apple's site.
|
||||
|
||||
|
||||
### Apple Touch Icons
|
||||
|
||||
Apple touch icons are used as icons when a user adds your webapp to the home
|
||||
screen of aniOS devices.
|
||||
|
||||
Though the dimensions of the icon can vary between iOS devices and versions
|
||||
one `180×180px` touch icon named `icon.png` and including the following in
|
||||
the `<head>` of the page is enough:
|
||||
|
||||
```html
|
||||
<link rel="apple-touch-icon" href="icon.png">
|
||||
```
|
||||
|
||||
For a more comprehensive overview, please refer to Mathias' [article on Touch
|
||||
Icons](https://mathiasbynens.be/notes/touch-icons).
|
||||
|
||||
|
||||
### Apple Touch Startup Image
|
||||
|
||||
Apart from that it is possible to add start-up screens for web apps on iOS. This
|
||||
basically works by defining `apple-touch-startup-image` with an according link
|
||||
to the image. Since iOS devices have different screen resolutions it maybe
|
||||
necessary to add media queries to detect which image to load. Here is an
|
||||
example for an iPhone:
|
||||
|
||||
```html
|
||||
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="img/startup.png">
|
||||
```
|
||||
|
||||
|
||||
### Chrome Mobile web apps
|
||||
|
||||
Chrome Mobile has a specific meta tag for making apps [installable to the
|
||||
homescreen](https://developer.chrome.com/multidevice/android/installtohomescreen)
|
||||
which tries to be a more generic replacement to Apple's proprietary meta tag:
|
||||
|
||||
```html
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
```
|
||||
|
||||
Same applies to the touch icons:
|
||||
|
||||
```html
|
||||
<link rel="icon" sizes="192x192" href="highres-icon.png">
|
||||
```
|
||||
|
||||
### Theme Color
|
||||
|
||||
You can add the [`theme-color` meta extension](https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color)
|
||||
in the `<head>` of your pages to suggest the color that browsers and
|
||||
OSes should use if they customize the display of individual pages in
|
||||
their UIs with varying colors.
|
||||
|
||||
```html
|
||||
<meta name="theme-color" content="#ff69b4">
|
||||
```
|
||||
|
||||
The `content` attribute extension can take any valid CSS color.
|
||||
|
||||
Currently, the `theme-color` meta extension is supported by [Chrome 39+
|
||||
for Android Lollipop](https://developers.google.com/web/updates/2014/11/Support-for-theme-color-in-Chrome-39-for-Android).
|
||||
|
||||
|
||||
## security.txt
|
||||
|
||||
When security risks in web services are discovered by users they often lack the
|
||||
channels to disclose them properly. As a result, security issues may be left unreported.
|
||||
|
||||
Security.txt defines a standard to help organizations define the process for
|
||||
users to disclose security vulnerabilities securely. Include a text
|
||||
file on your server at `.well-known/security.txt` with the relevant contact details.
|
||||
|
||||
Check [https://securitytxt.org/](https://securitytxt.org/) for more details.
|
|
@ -0,0 +1,42 @@
|
|||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# Frequently asked questions
|
||||
|
||||
* [Why is the Google Analytics code at the bottom? Google recommends it be
|
||||
placed in the `<head>`.](#why-is-the-google-analytics-code-at-the-bottom-google-recommends-it-be-placed-in-the-head)
|
||||
* [How can I integrate Bootstrap with HTML5
|
||||
Boilerplate?](#how-can-i-integrate-bootstrap-with-html5-boilerplate)
|
||||
* [Do I need to upgrade my site each time a new version of HTML5 Boilerplate is
|
||||
released?](#do-i-need-to-upgrade-my-site-each-time-a-new-version-of-html5-boilerplate-is-released)
|
||||
* [Where can I get help with support
|
||||
questions?](#where-can-i-get-help-with-support-questions)
|
||||
|
||||
---
|
||||
|
||||
### Why is the Google Analytics code at the bottom? Google recommends it be placed in the `<head>`.
|
||||
|
||||
The main advantage of placing it in the `<head>` is that you will track the
|
||||
user's `pageview` even if they leave the page before it has been fully loaded.
|
||||
|
||||
Here's a handy quote from [Mathias Bynens](https://mathiasbynens.be/notes/async-analytics-snippet#comment-50) about our placement choice.
|
||||
>I should point out that it’s Google — not me — recommending to place this
|
||||
script before all other scripts in the document. The only real advantage is to
|
||||
catch a pageView call if your page fails to load completely (for example, if
|
||||
the user aborts loading, or quickly closes the page, etc.). Personally, I
|
||||
wouldn’t count that as a page view, so I actually prefer to place this script
|
||||
at the bottom, after all other scripts. This keeps all the scripts together and
|
||||
reinforces that scripts at the bottom are the right move. (Usually I
|
||||
concatenate and minify all my scripts into one .js file — the GA snippet being
|
||||
the suffix.)
|
||||
|
||||
### Do I need to upgrade my site each time a new version of HTML5 Boilerplate is released?
|
||||
|
||||
No, just as you don't normally replace the foundation of a house once it
|
||||
was built. However, there is nothing stopping you from trying to work in the
|
||||
latest changes, but you'll have to assess the costs/benefits of doing so.
|
||||
|
||||
### Where can I get help with support questions?
|
||||
|
||||
Please ask for help on
|
||||
[StackOverflow](https://stackoverflow.com/questions/tagged/html5boilerplate).
|
|
@ -0,0 +1,205 @@
|
|||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# The HTML
|
||||
|
||||
By default, HTML5 Boilerplate provides two `html` pages:
|
||||
|
||||
* [`index.html`](#indexhtml) - a default HTML skeleton that should form the
|
||||
basis of all pages on your website
|
||||
* `404.html` - a placeholder 404 error page
|
||||
|
||||
|
||||
## `index.html`
|
||||
|
||||
|
||||
### The `no-js` Class
|
||||
|
||||
The `no-js` class is provided in order to allow you to more easily and
|
||||
explicitly add custom styles based on whether JavaScript is disabled
|
||||
(`.no-js`) or enabled (`.js`). Using this technique also helps [avoid the
|
||||
FOUC](https://www.paulirish.com/2009/avoiding-the-fouc-v3/).
|
||||
|
||||
|
||||
## Language Attribute
|
||||
|
||||
Please consider specifying the language of your content by adding a [value](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) to the `lang`
|
||||
attribute in the `<html>` as in this example:
|
||||
|
||||
```html
|
||||
<html class="no-js" lang="en">
|
||||
```
|
||||
|
||||
### The order of the `<title>` and `<meta>` tags
|
||||
|
||||
The charset declaration (`<meta charset="utf-8">`) must be included completely
|
||||
within the [first 1024 bytes of the document](https://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset)
|
||||
and should be specified as early as possible (before any content that could
|
||||
be controlled by an attacker, such as a `<title>` element) in order to avoid a
|
||||
potential [encoding-related security issue](https://code.google.com/archive/p/doctype-mirror/wikis/ArticleUtf7.wiki)
|
||||
in Internet Explorer
|
||||
|
||||
## Meta Description
|
||||
|
||||
The `description` meta tag provides a short description of the page.
|
||||
In some situations this description is used as a part of the snippet
|
||||
shown in the search results.
|
||||
|
||||
```html
|
||||
<meta name="description" content="This is a description">
|
||||
```
|
||||
|
||||
Google's [Create good meta descriptions](https://support.google.com/webmasters/answer/35624?hl=en#meta-descriptions)
|
||||
documentation has useful tips on creating an effective description.
|
||||
|
||||
## Mobile Viewport
|
||||
|
||||
There are a few different options that you can use with the [`viewport` meta
|
||||
tag](https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4 "Viewport and
|
||||
Media Queries - The Complete Idiot's Guide"). You can find out more in [the
|
||||
MDN Web Docs](https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag).
|
||||
HTML5 Boilerplate comes with a simple setup that strikes a good balance for general use cases.
|
||||
|
||||
```html
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
```
|
||||
|
||||
If you want to take advantage of edge-to-edge displays of iPhone X/XS/XR you can do
|
||||
so with additional viewport parameters. [Check the WebKit blog](https://webkit.org/blog/7929/designing-websites-for-iphone-x/)
|
||||
for details.
|
||||
|
||||
## Web App Manifest
|
||||
|
||||
HTML5 Boilerplate includes a simple web app manifest file.
|
||||
|
||||
The web app manifest is a simple JSON file that allows you to control how your
|
||||
app appears on a device's home screen, what it looks like when it launches
|
||||
in that context and what happens when it is launched. This allows for much greater
|
||||
control over the UI of a saved site or web app on a mobile device.
|
||||
|
||||
It's linked to from the HTML as follows:
|
||||
|
||||
```html
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
```
|
||||
Our [site.webmanifest](https://github.com/h5bp/html5-boilerplate/blob/master/src/site.webmanifest) contains a very skeletal "app" definition, just to show the basic usage.
|
||||
You should fill this file out with [more information about your site or application](https://developer.mozilla.org/en-US/docs/Web/Manifest)
|
||||
|
||||
## Favicons and Touch Icon
|
||||
|
||||
The shortcut icons should be put in the root directory of your site. `favicon.ico`
|
||||
is automatically picked up by browsers if it's placed in the root. HTML5
|
||||
Boilerplate comes with a default set of icons (include favicon and one Apple
|
||||
Touch Icon) that you can use as a baseline to create your own.
|
||||
|
||||
Please refer to the more detailed description in the [Extend section](extend.md)
|
||||
of these docs.
|
||||
|
||||
## The Content Area
|
||||
|
||||
The central part of the boilerplate template is pretty much empty. This is
|
||||
intentional, in order to make the boilerplate suitable for both web page and
|
||||
web app development.
|
||||
|
||||
### Browser Upgrade Prompt
|
||||
|
||||
The main content area of the boilerplate includes a prompt to install an up to
|
||||
date browser for users of IE 9 and lower. If you intended to support IE, then you
|
||||
should edit or remove the snippet of code.
|
||||
|
||||
## Modernizr
|
||||
|
||||
HTML5 Boilerplate uses a custom build of Modernizr.
|
||||
|
||||
[Modernizr](https://modernizr.com/) is a JavaScript library which adds classes to
|
||||
the `html` element based on the results of feature test and which ensures that
|
||||
all browsers can make use of HTML5 elements (as it includes the HTML5 Shiv).
|
||||
This allows you to target parts of your CSS and JavaScript based on the
|
||||
features supported by a browser.
|
||||
|
||||
Starting with version 3 Modernizr can be customized using the [modernizr-config.json](https://github.com/h5bp/html5-boilerplate/blob/master/modernizr-config.json) and the
|
||||
[Modernizr command line utility](https://www.npmjs.com/package/modernizr-cli).
|
||||
|
||||
## What About Polyfills?
|
||||
|
||||
If you need to include [polyfills](https://remysharp.com/2010/10/08/what-is-a-polyfill)
|
||||
in your project, you must make sure those load before any other JavaScript. If you're
|
||||
using a polyfill CDN service, like [cdn.polyfill.io](https://cdn.polyfill.io/),
|
||||
just put it before the other scripts in the bottom of the page:
|
||||
|
||||
```html
|
||||
<script src="js/vendor/modernizr-3.7.1.min.js"></script>
|
||||
<script src="https://cdn.polyfill.io/v3/polyfill.min.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
|
||||
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
|
||||
<script src="js/plugins.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
```
|
||||
|
||||
If you like to just include the polyfills yourself, you could include them in
|
||||
`js/plugins.js`. When you have a bunch of polyfills to load in, you could
|
||||
also create a `polyfills.js` file in the `js/vendor` directory or include the files
|
||||
individually and combine them using a build tool. Always ensure that the polyfills
|
||||
are all loaded before any other JavaScript.
|
||||
|
||||
There are some misconceptions about Modernizr and polyfills. It's important
|
||||
to understand that Modernizr just handles feature checking, not polyfilling
|
||||
itself. The only thing Modernizr does regarding polyfills is that the team
|
||||
maintains [a huge list of cross Browser polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills).
|
||||
|
||||
### jQuery CDN for jQuery
|
||||
|
||||
The jQuery CDN version of the jQuery JavaScript library is referenced towards
|
||||
the bottom of the page. A local fallback of jQuery is included for rare instances
|
||||
when the CDN version might not be available, and to facilitate offline
|
||||
development.
|
||||
|
||||
The jQuery CDN version was chosen over other potential candidates
|
||||
([like Google's Hosted Libraries](https://developers.google.com/speed/libraries/))
|
||||
because it's fast ([comparable or faster than Google by some
|
||||
measures](https://www.cdnperf.com/#jsdelivr,cdnjs,google,yandex,microsoft,jquery,bootstrapcdn/https/90))
|
||||
and, (unlike Google's CDN) is available to China's hundreds of millions of internet users.
|
||||
For many years we [chose](https://github.com/h5bp/html5-boilerplate/issues/1191)
|
||||
the Google Hosted version over the jQuery CDN because it was available
|
||||
over HTTPS (the jQuery CDN was not,) and it offered a better chance of
|
||||
hitting the cache lottery owing to the popularity of the Google CDN.
|
||||
The first issue is no longer valid and the second is far outweighed by
|
||||
being able to serve jQuery to users in China.
|
||||
|
||||
While the jQuery CDN is a strong default solution your site or application may
|
||||
require a different configuration. Testing your site with services like
|
||||
[WebPageTest](https://www.webpagetest.org/) and browser tools like
|
||||
[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) will help you examine the real
|
||||
world performance of your site and can show where you can optimize your specific
|
||||
site or application.
|
||||
|
||||
### Google Universal Analytics Tracking Code
|
||||
|
||||
Finally, an optimized version of the Google Universal Analytics tracking code is
|
||||
included.
|
||||
|
||||
We use `analytics.js` rather than the newer `gtag.js` as
|
||||
[it's faster and supports tasks and plugins](https://github.com/philipwalton/analyticsjs-boilerplate/issues/19#issuecomment-333714370)
|
||||
|
||||
The beacon transport mechanism is used to send all hits [which saves HTTP requests and improves performance](https://philipwalton.com/articles/the-google-analytics-setup-i-use-on-every-site-i-build/#loading-analytics.js).
|
||||
|
||||
Google recommends that this script be placed at the top of the page.
|
||||
Factors to consider: if you place this script at the top of the page, you’ll
|
||||
be able to count users who don’t fully load the page, and you’ll incur the max
|
||||
number of simultaneous connections of the browser.
|
||||
|
||||
Further information:
|
||||
|
||||
- [Introduction to
|
||||
Analytics.js](https://developers.google.com/analytics/devguides/collection/analyticsjs/)
|
||||
- [Google Analytics Demos & Tools](https://ga-dev-tools.appspot.com/)
|
||||
|
||||
**N.B.** The Google Analytics snippet is included by default mainly
|
||||
because Google Analytics is [currently one of the most popular tracking
|
||||
solutions](https://trends.builtwith.com/analytics/Google-Analytics) out there.
|
||||
However, its usage isn't set in stone, and you SHOULD consider exploring the
|
||||
[alternatives](https://en.wikipedia.org/wiki/List_of_web_analytics_software)
|
||||
and use whatever suits your needs best.
|
||||
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# The JavaScript
|
||||
|
||||
Information about the default JavaScript included in the project.
|
||||
|
||||
## main.js
|
||||
|
||||
This file can be used to contain or reference your site/app JavaScript code.
|
||||
If you're working on something more advanced you might replace this file
|
||||
entirely. That's cool.
|
||||
|
||||
## plugins.js
|
||||
|
||||
This file can be used to contain all your plugins, such as jQuery plugins and
|
||||
other 3rd party scripts for a simple site.
|
||||
|
||||
One approach is to put jQuery plugins inside of a `(function($){ ...
|
||||
})(jQuery);` closure to make sure they're in the jQuery namespace safety
|
||||
blanket. Read more about [jQuery plugin
|
||||
authoring](https://learn.jquery.com/plugins/#Getting_Started).
|
||||
|
||||
By default the `plugins.js` file contains a small script to avoid `console`
|
||||
errors in browsers that lack a `console`. The script will make sure that, if
|
||||
a console method isn't available, that method will have the value of empty
|
||||
function, thus, preventing the browser from throwing an error.
|
||||
|
||||
## vendor
|
||||
|
||||
This directory can be used to contain all 3rd party library code.
|
||||
|
||||
Minified versions of the latest jQuery and Modernizr libraries are included by
|
||||
default. You may wish to create your own [custom Modernizr
|
||||
build with the online builder](https://modernizr.com/download/) or [command
|
||||
line tool](https://modernizr.com/docs#command-line-config).
|
|
@ -0,0 +1,173 @@
|
|||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# Miscellaneous
|
||||
|
||||
* [.gitignore](#gitignore)
|
||||
* [.editorconfig](#editorconfig)
|
||||
* [Server Configuration](#server-configuration)
|
||||
* [robots.txt](#robotstxt)
|
||||
* [humans.txt](#humanstxt)
|
||||
* [browserconfig.xml](#browserconfigxml)
|
||||
|
||||
--
|
||||
|
||||
## .gitignore
|
||||
|
||||
HTML5 Boilerplate includes a basic project-level `.gitignore`. This should
|
||||
primarily be used to avoid certain project-level files and directories from
|
||||
being kept under source control. Different development-environments will
|
||||
benefit from different collections of ignores.
|
||||
|
||||
OS-specific and editor-specific files should be ignored using a "global
|
||||
ignore" that applies to all repositories on your system.
|
||||
|
||||
For example, add the following to your `~/.gitconfig`, where the `.gitignore`
|
||||
in your HOME directory contains the files and directories you'd like to
|
||||
globally ignore:
|
||||
|
||||
```gitignore
|
||||
[core]
|
||||
excludesfile = ~/.gitignore
|
||||
```
|
||||
|
||||
* More on global ignores: https://help.github.com/articles/ignoring-files/
|
||||
* Comprehensive set of ignores on GitHub: https://github.com/github/gitignore
|
||||
|
||||
|
||||
## .editorconfig
|
||||
|
||||
The `.editorconfig` file is provided in order to encourage and help you and
|
||||
your team define and maintain consistent coding styles between different
|
||||
editors and IDEs.
|
||||
|
||||
By default, `.editorconfig` includes some basic
|
||||
[properties](https://editorconfig.org/#supported-properties) that reflect the
|
||||
coding styles from the files provided by default, but you can easily change
|
||||
them to better suit your needs.
|
||||
|
||||
In order for your editor/IDE to apply the
|
||||
[properties](https://editorconfig.org/#supported-properties) from the
|
||||
`.editorconfig` file, you may need to [install a
|
||||
plugin]( https://editorconfig.org/#download).
|
||||
|
||||
__N.B.__ If you aren't using the server configurations provided by HTML5
|
||||
Boilerplate, we highly encourage you to configure your server to block
|
||||
access to `.editorconfig` files, as they can disclose sensitive information!
|
||||
|
||||
For more details, please refer to the [EditorConfig
|
||||
project](https://editorconfig.org/).
|
||||
|
||||
|
||||
## Server Configuration
|
||||
|
||||
H5BP includes a [`.htaccess`](#htaccess) file for the [Apache HTTP
|
||||
server](https://httpd.apache.org/docs/). If you are not using Apache
|
||||
as your web server, then you are encouraged to download a
|
||||
[server configuration](https://github.com/h5bp/server-configs) that
|
||||
corresponds to your web server and environment.
|
||||
|
||||
A `.htaccess` (hypertext access) file is an [Apache HTTP server
|
||||
configuration file](https://github.com/h5bp/server-configs-apache).
|
||||
The `.htaccess` file is mostly used for:
|
||||
|
||||
* Rewriting URLs
|
||||
* Controlling cache
|
||||
* Authentication
|
||||
* Server-side includes
|
||||
* Redirects
|
||||
* Gzipping
|
||||
|
||||
If you have access to the main server configuration file (usually called
|
||||
`httpd.conf`), you should add the logic from the `.htaccess` file in, for
|
||||
example, a <Directory> section in the main configuration file. This is usually
|
||||
the recommended way, as using .htaccess files slows down Apache!
|
||||
|
||||
To enable Apache modules locally, please see:
|
||||
https://github.com/h5bp/server-configs-apache#enable-apache-httpd-modules.
|
||||
|
||||
In the repo the `.htaccess` is used for:
|
||||
|
||||
* Allowing cross-origin access to web fonts
|
||||
* CORS header for images when browsers request it
|
||||
* Enable `404.html` as 404 error document
|
||||
* Making the website experience better for IE users better
|
||||
* Media UTF-8 as character encoding for `text/html` and `text/plain`
|
||||
* Enabling the rewrite URLs engine
|
||||
* Forcing or removing the `www.` at the begin of a URL
|
||||
* It blocks access to directories without a default document
|
||||
* It blocks access to files that can expose sensitive information.
|
||||
* It reduces MIME type security risks
|
||||
* It forces compressing (gzipping)
|
||||
* It tells the browser whether they should request a specific file from the
|
||||
server or whether they should grab it from the browser's cache
|
||||
|
||||
When using `.htaccess` we recommend reading all inline comments (the rules after
|
||||
a `#`) in the file once. There is a bunch of optional stuff in it.
|
||||
|
||||
If you want to know more about the `.htaccess` file check out the
|
||||
[Apache HTTP server docs](https://httpd.apache.org/docs/) or more
|
||||
specifically the [htaccess
|
||||
section](https://httpd.apache.org/docs/current/howto/htaccess.html).
|
||||
|
||||
Notice that the original repo for the `.htaccess` file is [this
|
||||
one](https://github.com/h5bp/server-configs-apache).
|
||||
|
||||
|
||||
## robots.txt
|
||||
|
||||
The `robots.txt` file is used to give instructions to web robots on what can
|
||||
be crawled from the website.
|
||||
|
||||
By default, the file provided by this project includes the next two lines:
|
||||
|
||||
* `User-agent: *` - the following rules apply to all web robots
|
||||
* `Disallow:` - everything on the website is allowed to be crawled
|
||||
|
||||
If you want to disallow certain pages you will need to specify the path in a
|
||||
`Disallow` directive (e.g.: `Disallow: /path`) or, if you want to disallow
|
||||
crawling of all content, use `Disallow: /`.
|
||||
|
||||
The `/robots.txt` file is not intended for access control, so don't try to
|
||||
use it as such. Think of it as a "No Entry" sign, rather than a locked door.
|
||||
URLs disallowed by the `robots.txt` file might still be indexed without being
|
||||
crawled, and the content from within the `robots.txt` file can be viewed by
|
||||
anyone, potentially disclosing the location of your private content! So, if
|
||||
you want to block access to private content, use proper authentication instead.
|
||||
|
||||
For more information about `robots.txt`, please see:
|
||||
|
||||
* [robotstxt.org](https://www.robotstxt.org/)
|
||||
* [How Google handles the `robots.txt` file](https://developers.google.com/webmasters/control-crawl-index/docs/robots_txt)
|
||||
|
||||
## humans.txt
|
||||
|
||||
The `humans.txt` file is used to provide information about people involved with
|
||||
the website.
|
||||
|
||||
The provided file contains three sections:
|
||||
|
||||
* `TEAM` - this is intended to list the group of people responsible for the website
|
||||
* `THANKS` - this is intended to list the group of people that have contributed
|
||||
to the website
|
||||
* `TECHNOLOGY COLOPHON` - the section lists technologies used to make the website
|
||||
|
||||
For more information about `humans.txt`, please see: http://humanstxt.org/
|
||||
|
||||
|
||||
## browserconfig.xml
|
||||
|
||||
The `browserconfig.xml` file is used to customize the tile displayed when users
|
||||
pin your site to the Windows 8.1 start screen. In there you can define custom
|
||||
tile colors, custom images or even [live tiles](https://msdn.microsoft.com/library/dn455106.aspx#CreatingLiveTiles).
|
||||
|
||||
By default, the file points to 2 placeholder tile images:
|
||||
|
||||
* `tile.png` (558x558px): used for `Small`, `Medium` and `Large` tiles.
|
||||
This image resizes automatically when necessary.
|
||||
* `tile-wide.png` (558x270px): user for `Wide` tiles.
|
||||
|
||||
Notice that IE11 uses the same images when adding a site to the `favorites`.
|
||||
|
||||
For more in-depth information about the `browserconfig.xml` file, please
|
||||
see [MSDN](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/dn320426(v=vs.85)).
|
|
@ -0,0 +1,130 @@
|
|||
[HTML5 Boilerplate homepage](https://html5boilerplate.com/) | [Documentation
|
||||
table of contents](TOC.md)
|
||||
|
||||
# Usage
|
||||
|
||||
The most basic usage of HTML5 Boilerplate is to create a static site or simple
|
||||
app. Once you've downloaded or cloned the project, that process looks something
|
||||
like this:
|
||||
|
||||
1. Set up the basic structure of the site.
|
||||
2. Add some content, style, and functionality.
|
||||
3. Run your site locally to see how it looks.
|
||||
4. Deploy your site.
|
||||
|
||||
Cool, right? _It is_. That said, the smart defaults, baseline elements, default
|
||||
attribute values and various other utilities that HTML5 Boilerplate offers can
|
||||
serve as the foundation for whatever you're interested in building.
|
||||
|
||||
Even the basic use-case of a simple static site can be enhanced by manipulating
|
||||
the code through an automated build process. Moving up in complexity HTML5
|
||||
Boilerplate can be integrated with whatever front-end framework, CMS or
|
||||
e-commerce platform you're working with. Mix-and-match to your heart's content.
|
||||
Use what you need (toss it in a blender if you need to) and discard the rest.
|
||||
HTML5 Boilerplate is a starting point, not a destination.
|
||||
|
||||
## Basic structure
|
||||
|
||||
A basic HTML5 Boilerplate site initially looks something like this:
|
||||
|
||||
```
|
||||
.
|
||||
├── css
|
||||
│ ├── main.css
|
||||
│ └── normalize.css
|
||||
├── doc
|
||||
├── img
|
||||
├── js
|
||||
│ ├── main.js
|
||||
│ ├── plugins.js
|
||||
│ └── vendor
|
||||
│ ├── jquery.min.js
|
||||
│ └── modernizr.min.js
|
||||
├── .editorconfig
|
||||
├── .htaccess
|
||||
├── 404.html
|
||||
├── browserconfig.xml
|
||||
├── favicon.ico
|
||||
├── humans.txt
|
||||
├── icon.png
|
||||
├── index.html
|
||||
├── robots.txt
|
||||
├── site.webmanifest
|
||||
├── tile.png
|
||||
└── tile-wide.png
|
||||
```
|
||||
|
||||
What follows is a general overview of each major part and how to use them.
|
||||
|
||||
### css
|
||||
|
||||
This directory should contain all your project's CSS files. It includes some
|
||||
initial CSS to help get you started from a solid foundation. [About the
|
||||
CSS](css.md).
|
||||
|
||||
### doc
|
||||
|
||||
This directory contains all the HTML5 Boilerplate documentation. You can use it
|
||||
as the location and basis for your own project's documentation.
|
||||
|
||||
### js
|
||||
|
||||
This directory should contain all your project's JS files. Libraries, plugins,
|
||||
and custom code can all be included here. It includes some initial JS to help
|
||||
get you started. [About the JavaScript](js.md).
|
||||
|
||||
### .htaccess
|
||||
|
||||
The default web server configs are for Apache. For more information, please
|
||||
refer to the [Apache Server Configs
|
||||
repository](https://github.com/h5bp/server-configs-apache).
|
||||
|
||||
Host your site on a server other than Apache? You're likely to find the
|
||||
corresponding server configs project listed in our [Server Configs
|
||||
](https://github.com/h5bp/server-configs/blob/master/README.md) repository.
|
||||
|
||||
### 404.html
|
||||
|
||||
A helpful custom 404 to get you started.
|
||||
|
||||
### browserconfig.xml
|
||||
|
||||
This file contains all settings regarding custom tiles for IE11 and Edge.
|
||||
|
||||
For more info on this topic, please refer to
|
||||
[Microsoft's Docs](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/dn320426(v=vs.85)).
|
||||
|
||||
### .editorconfig
|
||||
|
||||
The `.editorconfig` file is provided in order to encourage and help you and
|
||||
your team to maintain consistent coding styles between different
|
||||
editors and IDEs. [Read more about the `.editorconfig` file](misc.md#editorconfig).
|
||||
|
||||
### index.html
|
||||
|
||||
This is the default HTML skeleton that should form the basis of all pages on
|
||||
your site. If you are using a server-side templating framework, then you will
|
||||
need to integrate this starting HTML with your setup.
|
||||
|
||||
Make sure that you update the URLs for the referenced CSS and JavaScript if you
|
||||
modify the directory structure at all.
|
||||
|
||||
If you are using Google Universal Analytics, make sure that you edit the
|
||||
corresponding snippet at the bottom to include your analytics ID.
|
||||
|
||||
### humans.txt
|
||||
|
||||
Edit this file to include the team that worked on your site/app, and the
|
||||
technology powering it.
|
||||
|
||||
### robots.txt
|
||||
|
||||
Edit this file to include any pages you need hidden from search engines.
|
||||
|
||||
### Icons
|
||||
|
||||
Replace the default `favicon.ico`, `tile.png`, `tile-wide.png` and Apple
|
||||
Touch Icon with your own.
|
||||
|
||||
If you want to use different Apple Touch Icons for different resolutions please
|
||||
refer to the [according documentation](extend.md#apple-touch-icons).
|
|
@ -0,0 +1,152 @@
|
|||
<!doctype html>
|
||||
<html class="no-js" lang="it">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>GEST366 - Documenti</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="apple-touch-icon" href="icon.png">
|
||||
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
|
||||
<meta name="theme-color" content="#fafafa">
|
||||
<meta name="description" content="Come creare e gestire i documenti con GEST366, fork di gestionale360">
|
||||
<meta name="author" content="ReF Artistic Services">
|
||||
<meta name="keywords" content="gest366, gestionale, gestionale360">
|
||||
<!-- Open Graph Tags -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://www.gest366.it/">
|
||||
<meta property="og:title" content='GEST366'>
|
||||
<meta property="og:image" content="https://www.gest366.it/img/logo.png">
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
<meta property="og:image:width" content="800" />
|
||||
<meta property="og:image:height" content="515" />
|
||||
<meta property="og:image:alt" content="Logo GEST366" />
|
||||
<meta property="og:description" content="Gestionale open source">
|
||||
<meta property="og:locale" content="it_IT">
|
||||
</head>
|
||||
|
||||
<body class="no-background">
|
||||
<!--[if IE]>
|
||||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
|
||||
<![endif]-->
|
||||
|
||||
<header class="clearfix">
|
||||
<a href="https://www.gest366.it"><img src="img/logo.png" id="logo" alt="gest366 logo"></a>
|
||||
<nav role="navigation">
|
||||
<img id="menu-logo" onclick="toggleMenuVisibility()" src="img/menu.svg" alt="menu icon">
|
||||
<ul id="menu">
|
||||
<li><a href="./about.html">Cos'è</a></li>
|
||||
<li><a href="./download.html">Download</a></li>
|
||||
<li><a href="./doc.html">Documentazione</a></li>
|
||||
<li><a href="https://www.gest366.it/forum/">Forum</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="doc-page" id="tipologia-documenti">
|
||||
<h1>Documenti</h1>
|
||||
<div>
|
||||
<h2>Tipologia Documenti</h2>
|
||||
<p>All’interno del sottomenu <span class="gui-interactive">Tabelle</span>, a sua volta contenuto nel menu <span class="gui-interactive">Strumenti</span>, trovate il sottomenu <span class="gui-interactive">Tipologia Documenti</span>, tramite il quale è possibile modificare e personalizzare tipologie di documenti, azioni preimpostate, eccetera.</p>
|
||||
<p class="non-inline vertical-rectangle"><img src="img/doc-img/menu-strumenti-2.jpg"></p>
|
||||
<p>Tra le numerose impostazioni parametriche disponibili, di seguito elenchiamo alcune tra le più articolate:</p>
|
||||
<p class="non-inline"><img src="img/doc-img/schermata-tipologia-documenti-1.jpg" alt="dettaglio schermata tipologia documenti"></p>
|
||||
<ul>
|
||||
<li><span class="gui-input">Tipologia</span>: indica se si tratta di un documento in entrata (es. vendita) o uscita (es. acquisto).</li>
|
||||
<li><span class="gui-input">Giacenza</span>: se abilitato, consente di modificare le quantità presenti nel vostro magazzino.</li>
|
||||
<li><span class="gui-input">Movimento</span>: se abilitato, registra il movimento dell’articolo in questione.</li>
|
||||
<li><span class="gui-input">Statistiche</span>: se abilitato, il documento viene preso in considerazione nella generazione di statistiche, sia in entrata che in uscita.</li>
|
||||
<li><span class="gui-input">Num.Propria</span>: se abilitato, il documento seguirà una numerazione progressivo. La funzione è associata al campo <span class="gui-input">Gruppo numerazione</span>.</li>
|
||||
<li><span class="gui-input">Suffisso</span>: consente di associare un suffisso identificativo al documento.</li>
|
||||
<li><span class="gui-input">Aggiungi anno</span>: consente l’inserimento automatico dell’anno di generazione documento nella numerazione dello stesso.</li>
|
||||
<p class="non-inline"><img src="img/doc-img/schermata-tipologia-documenti-2.jpg" alt="dettaglio sezioni dei comportamenti in tipologia documenti"></p>
|
||||
<li><span class="gui-input">Dati fiscali obbligatori</span>: se abilitato, consentirà la stampa solo nel caso in cui l’Anagrafica cliente/fornitore selezionata sia compilata.</li>
|
||||
<li><span class="gui-input">Consenti transazioni</span>: se abilitato, il documento può generare documenti successivi.</li>
|
||||
<li><span class="gui-input">Riepilogo IVA</span>: se abilitato, il documento verrà inserito nel conteggio della stampa contabile Registro IVA.</li>
|
||||
</ul>
|
||||
<p>È possibile impostare la generazione automatica di un documento successivo in base allo stato di quello precedente. La personalizzazione avviene mediante i seguenti campi compilabili:</p>
|
||||
<p class="non-inline"><img src="img/doc-img/schermata-tipologia-documenti-3.jpg" alt="dettaglio di altre sezioni compilabili in tipologia documenti"></p>
|
||||
<ul>
|
||||
<li><span class="gui-input">Quando lo stato diventa</span>: Impostare lo stato che il documento precedente avere per automatizzare la creazione del nuovo.</li>
|
||||
<li><span class="gui-input">Generazione documento</span>: Tipologia del documento che deve essere generato.</li>
|
||||
<li><span class="gui-input">Stato New Doc</span>: Stato iniziale del nuovo documento creato.</li>
|
||||
<li><span class="gui-input">Stato Old Doc</span>: Stato che si vuole applicare al documento precedente.</li>
|
||||
</ul>
|
||||
<p>Nella sezione <span class="gui-element">Preformattazione invio email ed archiviazione</span> è possibile utilizzare alcune variabili, che il gestionale sostituirà con i relativi valori, recuperati dalle anagrafiche. I valori in questione sono i seguenti:</p>
|
||||
<p class="non-inline"><img src="img/doc-img/schermata-tipologia-documenti-4.jpg"></p>
|
||||
<ul>
|
||||
<li><span class="gui-input">%NUM</span>: verrà sostituito dal numero del documento</li>
|
||||
<li><span class="gui-input">%NUMS</span>: verrà sostituito dal numero secondario del documento</li>
|
||||
<li><span class="gui-input">%SUFFISSO</span>: verrà sostituito dal suffisso del documento</li>
|
||||
<li><span class="gui-input">%DATA</span>: verrà sostituito dalla data del documento</li>
|
||||
<li><span class="gui-input">%RAGIONESOCIALE</span>: verrà sostituito dalla ragione sociale dell’anagrafica per la quale viene generato il documento.</li>
|
||||
</ul>
|
||||
<p>Tra le altre impostazioni personalizzabili troverete quelle relative ai magazzini (principale e secondario), l’abilitazione alla fatturazione elettronica e la creazione di una Voce di menu dedicata.</p>
|
||||
<p><span class="gui-interactive">Fatturazione elettronica</span>: nella generazione di un nuovo tipo di fattura elettronica, una volta spuntata la relativa casella nella scheda <span class="gui-element">Impostazioni comportamento generale</span> e salvato le impostazioni, vi si presenterà un nuovo pannello dedicato, che potrete compilare con ulteriori specifiche.</p>
|
||||
</div>
|
||||
<div id="emissione-documenti">
|
||||
<h2>Emissione documenti</h2>
|
||||
<p>Per creare un documento, sia esso una fattura, un preventivo o un documento di altro tipo, selezionate <span class="gui-interactive">Documenti</span> nel menu e, successivamente, la voce del sottomenu di vostro interesse.</p>
|
||||
<p class="non-inline vertical-rectangle"><img src="img/doc-img/menu-documenti.jpg"></p>
|
||||
<p>Nella schermata alla quale accederete, cliccate sul <img class="inline square" src="img/doc-img/+button.png" alt="pulsante di aggiunta elemento"> situato accanto al nome della sezione. Si aprirà un popup nel quale compilare i campi richiesti e, eventualmente, aggiungere una nuova anagrafica non ancora presente in archivio, aprendo la relativa sezione.</p>
|
||||
<p class="non-inline"><img src="img/doc-img/popup-documenti-1.jpg"></p>
|
||||
<h3>Esempio</h3>
|
||||
<p>Supponendo di voler creare un <span class="gui-interactive">Preventivo</span>, troverete la relativa voce di sottomenu (salvo vostre modifiche al Menu di GEST366). In alternativa, selezionando la voce di sottomenu <span class="gui-interactive">Documenti</span> e, successivamente sul <img class="inline square" src="img/doc-img/+button.png" alt="pulsante di aggiunta elemento"> nella relativa schermata, potrete creare qualunque tipo di documento.</p>
|
||||
<p>Una volta compilato il popup, verrà creato un preventivo con diverse possibilità di personalizzazione e relativi pulsanti. Vediamone un riepilogo e poi, nel dettaglio, i più articolati:</p>
|
||||
<p class="non-inline"><img src="img/doc-img/schermata-preventivo-1.jpg"></p>
|
||||
<ul>
|
||||
<li><span class="gui-input">Salva</span>: consente il salvataggio di tutto il documento, sia dati di testata che eventuali posizioni inserite o modificate.</li>
|
||||
<li><span class="gui-input">Crea Transazione</span>: presente nel caso il tipo di documento preveda transazioni. Le transazioni verranno elencate nel campo <span class="gui-input">T.Successive</span>. <span class="gui-suggestion">Attenzione</span>: in caso di documento senza posizione inserite o con transazioni di tutte le posizioni già effettuate il pulsante non verrà mostrato.</li>
|
||||
<li><span class="gui-input">Archivia ed Invia mail</span>: consente l’archiviazione e l’invio a mezzo mail del documento.</li>
|
||||
<li><span class="gui-input">Elimina</span>: consente l’eliminazione del documento in esame. <span class="gui-suggestion">Attenzione</span>: nel caso il documento risulti concluso o preveda transazioni successive, il pulsante non verrà mostrato.</li>
|
||||
<li><span class="gui-input">Stampa</span>: consente la stampa del documento.</li>
|
||||
<li><span class="gui-input">Anagrafica</span>: permette di accedere all’anagrafica del cliente in questione.</li>
|
||||
</ul>
|
||||
<p>Selezionando il pulsante <img class="inline rectangle" src="img/doc-img/+articolo-button.png" alt="pulsante di aggiunta articolo"> si aprirà un popup dedicato, dove potrete ricercare un articolo presente in archivio e impostare l’offerta. È possibile anche inserire valori nei campi <span class="gui-input">Sconto</span> ed <span class="gui-input">Extra Sconto</span> (fino a tre livelli di sconto). Se lo sconto è di tipologia Fisso, gli sconti saranno sommati. Una volta terminato l’inserimento dati e cliccato su <img class="inline rectangle" src="img/doc-img/+add.png" alt="pulsante aggiungi">, il riepilogo sarà aggiunto al preventivo e i valori di sconto calcolati e sommati.</p>
|
||||
<p class="non-inline"><img src="img/doc-img/popup-preventivo-1.jpg"></p>
|
||||
<p>Similmente, tramite il pulsante <img class="inline rectangle" src="img/doc-img/+riga-button.png" alt="pulsante di aggiunta riga generica">, potrete aggiungere un nuovo elemento, compilandone i vari campi, tra i quali il valore dell’IVA, gli sconti, il costo unitario e il conto predefinito (quest’ultimo, selezionando tra le varie possibilità proposte).</p>
|
||||
<p class="non-inline"><img src="img/doc-img/popup-preventivo-2.jpg"></p>
|
||||
<p>È anche possibile inserire transazioni successive tramite il pulsante <img class="inline rectangle" src="img/doc-img/crea-transazione-button.png" alt="pulsante crea transazione">, che comparirà solo in seguito all’aggiunta di articoli.</p>
|
||||
<p class="non-inline"><img src="img/doc-img/schermata-preventivo-2.jpg"></p>
|
||||
<p><span class="gui-suggestion">N.B.</span> È possibile accedere ad altre funzioni cliccando sul relativo pulsante <img class="inline rectangle" src="img/doc-img/funzioni-button.png" alt="pulsante funzioni">.</p>
|
||||
</div>
|
||||
<div id="fatture">
|
||||
<h2>Fatture</h2>
|
||||
<p>Alcuni documenti, come le Fatture, qualora specificato in fase di compilazione, possono generare una statistica, che verrà rappresentata nel grafico presente nel <span class="gui-interactive">Pannello di controllo</span>.</p>
|
||||
</div>
|
||||
<div id="fatturazione-elettronica">
|
||||
<h2>Fatturazione elettronica</h2>
|
||||
<p>Per abilitare la fatturazione elettronica sarà necessario modificare alcuni parametri.</p>
|
||||
<ol>
|
||||
<li>In <span class="gui-interactive">Tipologia Documenti</span> (sottomenu <span class="gui-interactive">Tabelle</span>, a sua volta contenuto nel menu <span class="gui-interactive">Strumenti</span>) spuntate la casella <span class="gui-input">Elettronica</span> e cliccate su <img class="inline rectangle" src="img/doc-img/save-button.png" alt="pulsante di salvataggio">. <span class="gui-suggestion">Attenzione</span>: questa procedura va ripetuta per ogni tipo di fattura che vorrete abilitare come elettronica.</li>
|
||||
<p class="non-inline"><img src="img/doc-img/schermata-tipologia-documenti-5.jpg"></p>
|
||||
<li>Compilate i campi della sezione <span class="gui-element">Impostazioni Documento elettronico</span></li> <p class="non-inline"><img src="img/doc-img/schermata-tipologia-documenti-6.jpg"> e spuntate la casella <span class="gui-input">Allegato documento in XML</span>.</p>
|
||||
</ol>
|
||||
<p><span class="gui-suggestion">N.B.</span> La sezione <span class="gui-element">Impostazioni Documento elettronico</span> sarà visibile e compilabile solo se avrete eseguito tutti i passaggi del punto 1.</p>
|
||||
<p><span class="gui-suggestion">N.B.</span> Tra le voci selezionabili nella creazione di un nuovo documento (sottomenu <span class="gui-interactive">Documenti</span>, a sua volta contenuto nel menu <span class="gui-interactive">Documenti</span>) è presente, di default, la tipologia <span class="gui-input">Fattura elettronica PA</span>. Per emettere fattura elettronica a privati, potrete creare un nuovo tipo di documento cliccando sul {+button}. Vedere <a href="#tipologia-documenti" class="gui-interactive">Tipologia Documenti</a>.</p>
|
||||
<h3>Esempio</h3>
|
||||
<p>Supponendo di voler creare una <span class="gui-interactive">Fattura immediata di vendita</span>, affinché possiate accedere all’esportazione del file XML della vostra fattura, sarà fondamentale compilare adeguatamente i campi. In particolar modo dovrete prestare attenzione al riempimento dei campi che trovate indicati dalle frecce rosse nelle immagini seguenti:</p>
|
||||
<p class="non-inline"><img src="img/doc-img/schermata-fattura-1.jpg" alt="indicazione di campi da compilare"></p>
|
||||
<p class="non-inline"><img src="img/doc-img/schermata-fattura-2.jpg" alt="indicazione di altri campi da compilare"></p>
|
||||
<p>Una volta completato il riempimento e cliccato sul pulsante <img class="inline rectangle" src="img/doc-img/save-button.png" alt="pulsante di salvataggio">, accanto alla scheda <span class="gui-element">Documenti</span>, comparirà la scheda <span class="gui-element">Elettronica Xml</span>.</p>
|
||||
<p class="non-inline"><img src="img/doc-img/schermata-fattura-3.jpg"></p>
|
||||
<p>Qui potrete compilare ulteriori campi e, infine, cliccare su <img class="inline rectangle" src="img/doc-img/genera-xml-button.png" alt="pulsante di generazione file xml">. La vostra fattura sarà quindi disponibile consultando <span class="gui-interactive">Invio SDI – XML</span> (accessibile tramite la relativa voce di sottomenu), dove troverete un riepilogo dei dati e informazioni riguardanti lo stato di invio e l’esito.</p>
|
||||
<p class="non-inline"><img src="img/doc-img/schermata-invio-xml-1.jpg"></p>
|
||||
</div>
|
||||
</main>
|
||||
<footer role="contentinfo">
|
||||
<p>Sostenuto da:</p>
|
||||
<ul id="maintainers">
|
||||
<li><a href="https://www.refservices.eu">ReF Services</a></li>
|
||||
<li><a href="https://www.immensonet.it">Immenso NET</a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
<script src="js/vendor/modernizr-3.7.1.min.js"></script>
|
||||
<script src="js/plugins.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,101 @@
|
|||
<!doctype html>
|
||||
<html class="no-js" lang="it">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>GEST366 - Download</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="apple-touch-icon" href="icon.png">
|
||||
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
|
||||
<meta name="theme-color" content="#fafafa">
|
||||
<meta name="description" content="Scarica subito GEST366, il gestionale open source gratuito per la tua azienda.">
|
||||
<meta name="author" content="ReF Artistic Services">
|
||||
<meta name="keywords" content="download, gestionale, gratis">
|
||||
<!-- Open Graph Tags -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://www.gest366.it/">
|
||||
<meta property="og:title" content='GEST366'>
|
||||
<meta property="og:image" content="https://www.gest366.it/img/logo.png">
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
<meta property="og:image:width" content="800" />
|
||||
<meta property="og:image:height" content="515" />
|
||||
<meta property="og:image:alt" content="Logo GEST366" />
|
||||
<meta property="og:description" content="Documentazione GEST366">
|
||||
<meta property="og:locale" content="it_IT">
|
||||
</head>
|
||||
|
||||
<body class="secondary-page">
|
||||
<!--[if IE]>
|
||||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
|
||||
<![endif]-->
|
||||
|
||||
<header class="clearfix">
|
||||
<a href="https://www.gest366.it"><img src="img/logo.png" id="logo" alt="gest366 logo"></a>
|
||||
<nav role="navigation">
|
||||
<img id="menu-logo" onclick="toggleMenuVisibility()" src="img/menu.svg" alt="menu icon">
|
||||
<ul id="menu">
|
||||
<li><a href="./about.html">Cos'è</a></li>
|
||||
<li><a href="#">Download</a></li>
|
||||
<li><a href="./doc.html">Documentazione</a></li>
|
||||
<li><a href="https://www.gest366.it/forum/">Forum</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main id="download-page">
|
||||
<h1>Download</h1>
|
||||
<div id="stable-section">
|
||||
<h2>GEST366 2.4.5 (Stabile)</h2>
|
||||
<ul>
|
||||
<li><a href="https://gitea.gest366.it/Gest366/gest366/archive/2.4.5.zip" download>GEST366-2.4.5.zip</a></li>
|
||||
<li><a href="https://gitea.gest366.it/Gest366/gest366/archive/2.4.5.tar.gz" download>GEST366-2.4.5.tar.gz</a></li>
|
||||
</ul>
|
||||
<h2>Changelog</h2>
|
||||
<ul>
|
||||
<li>Prima release!</li>
|
||||
<li>Corretti alcuni problemi grafici minori</li>
|
||||
<li>Aggiornati i link alla documentazione</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="paypal">
|
||||
<p>Il download di GEST366 è gratuito e lo sarà sempre. Se vuoi, puoi ringraziarci effettuando una donazione, che ci aiuterà a portare avanti lo sviluppo del progetto!</p>
|
||||
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
|
||||
<input type="hidden" name="cmd" value="_s-xclick" />
|
||||
<input type="hidden" name="hosted_button_id" value="4PP78ZF3XRBSJ" />
|
||||
<input type="image" id="paypal-button-icon" src="img/heart.svg" border="0" name="submit"
|
||||
title="PayPal - The safer, easier way to pay online!"
|
||||
alt="Fai una donazione con il pulsante PayPal" />
|
||||
<img alt="" border="0" src="https://www.paypal.com/it_IT/i/scr/pixel.gif" width="1" height="1" />
|
||||
</form>
|
||||
</div>
|
||||
<div id="testing-section">
|
||||
<h2>GEST366 3.0.0-Alpha0 (Testing)</h2>
|
||||
<ul>
|
||||
<li>GEST366-3.0.0-Alpha0.zip</li>
|
||||
<li>GEST366-3.0.0-Alpha0.tar.gz</li>
|
||||
</ul>
|
||||
<h2>Changelog</h2>
|
||||
<ul>
|
||||
<li>Corretti alcuni problemi grafici</li>
|
||||
<li>Nuove icone!</li>
|
||||
<li>Riorganizzato il menu principale</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
<footer role="contentinfo">
|
||||
<p>Sostenuto da:</p>
|
||||
<ul id="maintainers">
|
||||
<li><a href="https://www.refservices.eu">ReF Services</a></li>
|
||||
<li><a href="https://www.immensonet.it">Immenso NET</a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
<script src="js/vendor/modernizr-3.7.1.min.js"></script>
|
||||
<script src="js/plugins.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>ERROR 400 - Bad Request!</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="robots" content="noindex" />
|
||||
<style type="text/css"><!--
|
||||
body {
|
||||
color: #444444;
|
||||
background-color: #EEEEEE;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
font-size: 80%;
|
||||
}
|
||||
h1 {}
|
||||
h2 { font-size: 1.2em; }
|
||||
#page{
|
||||
background-color: #FFFFFF;
|
||||
width: 60%;
|
||||
margin: 24px auto;
|
||||
padding: 12px;
|
||||
}
|
||||
#header {
|
||||
padding: 6px ;
|
||||
text-align: center;
|
||||
}
|
||||
.status3xx { background-color: #475076; color: #FFFFFF; }
|
||||
.status4xx { background-color: #C55042; color: #FFFFFF; }
|
||||
.status5xx { background-color: #F2E81A; color: #000000; }
|
||||
#content {
|
||||
padding: 4px 0 24px 0;
|
||||
}
|
||||
#footer {
|
||||
color: #666666;
|
||||
background: #f9f9f9;
|
||||
padding: 10px 20px;
|
||||
border-top: 5px #efefef solid;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
}
|
||||
#footer a {
|
||||
color: #999999;
|
||||
}
|
||||
--></style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header" class="status4xx">
|
||||
<h1>ERROR 400 - Bad Request!</h1>
|
||||
</div>
|
||||
<div id="content">
|
||||
<h2>The following error occurred:</h2>
|
||||
<p>You have used invalid syntax.</p>
|
||||
<P>Please contact the <!--WEBMASTER//-->webmaster<!--WEBMASTER//--> with any queries.</p>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>Powered by <a href="http://www.ispconfig.org">ISPConfig</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>ERROR 401 - Unauthorized!</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="robots" content="noindex" />
|
||||
<style type="text/css"><!--
|
||||
body {
|
||||
color: #444444;
|
||||
background-color: #EEEEEE;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
font-size: 80%;
|
||||
}
|
||||
h1 {}
|
||||
h2 { font-size: 1.2em; }
|
||||
#page{
|
||||
background-color: #FFFFFF;
|
||||
width: 60%;
|
||||
margin: 24px auto;
|
||||
padding: 12px;
|
||||
}
|
||||
#header {
|
||||
padding: 6px ;
|
||||
text-align: center;
|
||||
}
|
||||
.status3xx { background-color: #475076; color: #FFFFFF; }
|
||||
.status4xx { background-color: #C55042; color: #FFFFFF; }
|
||||
.status5xx { background-color: #F2E81A; color: #000000; }
|
||||
#content {
|
||||
padding: 4px 0 24px 0;
|
||||
}
|
||||
#footer {
|
||||
color: #666666;
|
||||
background: #f9f9f9;
|
||||
padding: 10px 20px;
|
||||
border-top: 5px #efefef solid;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
}
|
||||
#footer a {
|
||||
color: #999999;
|
||||
}
|
||||
--></style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header" class="status4xx">
|
||||
<h1>ERROR 401 - Unauthorized!</h1>
|
||||
</div>
|
||||
<div id="content">
|
||||
<h2>The following error occurred:</h2>
|
||||
<p>The URL requested requires authorisation.</p>
|
||||
<P>Please contact the <!--WEBMASTER//-->webmaster<!--WEBMASTER//--> with any queries.</p>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>Powered by <a href="http://www.ispconfig.org">ISPConfig</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>ERROR 403 - Forbidden!</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="robots" content="noindex" />
|
||||
<style type="text/css"><!--
|
||||
body {
|
||||
color: #444444;
|
||||
background-color: #EEEEEE;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
font-size: 80%;
|
||||
}
|
||||
h1 {}
|
||||
h2 { font-size: 1.2em; }
|
||||
#page{
|
||||
background-color: #FFFFFF;
|
||||
width: 60%;
|
||||
margin: 24px auto;
|
||||
padding: 12px;
|
||||
}
|
||||
#header {
|
||||
padding: 6px ;
|
||||
text-align: center;
|
||||
}
|
||||
.status3xx { background-color: #475076; color: #FFFFFF; }
|
||||
.status4xx { background-color: #C55042; color: #FFFFFF; }
|
||||
.status5xx { background-color: #F2E81A; color: #000000; }
|
||||
#content {
|
||||
padding: 4px 0 24px 0;
|
||||
}
|
||||
#footer {
|
||||
color: #666666;
|
||||
background: #f9f9f9;
|
||||
padding: 10px 20px;
|
||||
border-top: 5px #efefef solid;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
}
|
||||
#footer a {
|
||||
color: #999999;
|
||||
}
|
||||
--></style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header" class="status4xx">
|
||||
<h1>ERROR 403 - Forbidden!</h1>
|
||||
</div>
|
||||
<div id="content">
|
||||
<h2>The following error occurred:</h2>
|
||||
<p>You are not permitted to access the requested URL.</p>
|
||||
<P>Please contact the <!--WEBMASTER//-->webmaster<!--WEBMASTER//--> with any queries.</p>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>Powered by <a href="http://www.ispconfig.org">ISPConfig</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>ERROR 404 - Not Found!</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="robots" content="noindex" />
|
||||
<style type="text/css"><!--
|
||||
body {
|
||||
color: #444444;
|
||||
background-color: #EEEEEE;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
font-size: 80%;
|
||||
}
|
||||
h1 {}
|
||||
h2 { font-size: 1.2em; }
|
||||
#page{
|
||||
background-color: #FFFFFF;
|
||||
width: 60%;
|
||||
margin: 24px auto;
|
||||
padding: 12px;
|
||||
}
|
||||
#header {
|
||||
padding: 6px ;
|
||||
text-align: center;
|
||||
}
|
||||
.status3xx { background-color: #475076; color: #FFFFFF; }
|
||||
.status4xx { background-color: #C55042; color: #FFFFFF; }
|
||||
.status5xx { background-color: #F2E81A; color: #000000; }
|
||||
#content {
|
||||
padding: 4px 0 24px 0;
|
||||
}
|
||||
#footer {
|
||||
color: #666666;
|
||||
background: #f9f9f9;
|
||||
padding: 10px 20px;
|
||||
border-top: 5px #efefef solid;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
}
|
||||
#footer a {
|
||||
color: #999999;
|
||||
}
|
||||
--></style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header" class="status4xx">
|
||||
<h1>ERROR 404 - Not Found!</h1>
|
||||
</div>
|
||||
<div id="content">
|
||||
<h2>The following error occurred:</h2>
|
||||
<p>The requested URL was not found on this server.</p>
|
||||
<P>Please check the URL or contact the <!--WEBMASTER//-->webmaster<!--WEBMASTER//-->.</p>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>Powered by <a href="http://www.ispconfig.org">ISPConfig</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>ERROR 405 - Method Not Allowed!</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="robots" content="noindex" />
|
||||
<style type="text/css"><!--
|
||||
body {
|
||||
color: #444444;
|
||||
background-color: #EEEEEE;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
font-size: 80%;
|
||||
}
|
||||
h1 {}
|
||||
h2 { font-size: 1.2em; }
|
||||
#page{
|
||||
background-color: #FFFFFF;
|
||||
width: 60%;
|
||||
margin: 24px auto;
|
||||
padding: 12px;
|
||||
}
|
||||
#header {
|
||||
padding: 6px ;
|
||||
text-align: center;
|
||||
}
|
||||
.status3xx { background-color: #475076; color: #FFFFFF; }
|
||||
.status4xx { background-color: #C55042; color: #FFFFFF; }
|
||||
.status5xx { background-color: #F2E81A; color: #000000; }
|
||||
#content {
|
||||
padding: 4px 0 24px 0;
|
||||
}
|
||||
#footer {
|
||||
color: #666666;
|
||||
background: #f9f9f9;
|
||||
padding: 10px 20px;
|
||||
border-top: 5px #efefef solid;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
}
|
||||
#footer a {
|
||||
color: #999999;
|
||||
}
|
||||
--></style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header" class="status4xx">
|
||||
<h1>ERROR 405 - Method Not Allowed!</h1>
|
||||
</div>
|
||||
<div id="content">
|
||||
<h2>The following error occurred:</h2>
|
||||
<p>The method used is not permitted.</p>
|
||||
<P>Please contact the <!--WEBMASTER//-->webmaster<!--WEBMASTER//--> with any queries.</p>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>Powered by <a href="http://www.ispconfig.org">ISPConfig</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>ERROR 500 - Internal Server Error!</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="robots" content="noindex" />
|
||||
<style type="text/css"><!--
|
||||
body {
|
||||
color: #444444;
|
||||
background-color: #EEEEEE;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
font-size: 80%;
|
||||
}
|
||||
h1 {}
|
||||
h2 { font-size: 1.2em; }
|
||||
#page{
|
||||
background-color: #FFFFFF;
|
||||
width: 60%;
|
||||
margin: 24px auto;
|
||||
padding: 12px;
|
||||
}
|
||||
#header {
|
||||
padding: 6px ;
|
||||
text-align: center;
|
||||
}
|
||||
.status3xx { background-color: #475076; color: #FFFFFF; }
|
||||
.status4xx { background-color: #C55042; color: #FFFFFF; }
|
||||
.status5xx { background-color: #F2E81A; color: #000000; }
|
||||
#content {
|
||||
padding: 4px 0 24px 0;
|
||||
}
|
||||
#footer {
|
||||
color: #666666;
|
||||
background: #f9f9f9;
|
||||
padding: 10px 20px;
|
||||
border-top: 5px #efefef solid;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
}
|
||||
#footer a {
|
||||
color: #999999;
|
||||
}
|
||||
--></style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header" class="status5xx">
|
||||
<h1>ERROR 500 - Internal Server Error!</h1>
|
||||
</div>
|
||||
<div id="content">
|
||||
<h2>The following error occurred:</h2>
|
||||
<p>The requested URL caused an internal server error.</p>
|
||||
<P>If you get this message repeatedly please contact the <!--WEBMASTER//-->webmaster<!--WEBMASTER//-->.</p>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>Powered by <a href="http://www.ispconfig.org">ISPConfig</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>ERROR 502 - Bad Gateway!</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="robots" content="noindex" />
|
||||
<style type="text/css"><!--
|
||||
body {
|
||||
color: #444444;
|
||||
background-color: #EEEEEE;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
font-size: 80%;
|
||||
}
|
||||
h1 {}
|
||||
h2 { font-size: 1.2em; }
|
||||
#page{
|
||||
background-color: #FFFFFF;
|
||||
width: 60%;
|
||||
margin: 24px auto;
|
||||
padding: 12px;
|
||||
}
|
||||
#header {
|
||||
padding: 6px ;
|
||||
text-align: center;
|
||||
}
|
||||
.status3xx { background-color: #475076; color: #FFFFFF; }
|
||||
.status4xx { background-color: #C55042; color: #FFFFFF; }
|
||||
.status5xx { background-color: #F2E81A; color: #000000; }
|
||||
#content {
|
||||
padding: 4px 0 24px 0;
|
||||
}
|
||||
#footer {
|
||||
color: #666666;
|
||||
background: #f9f9f9;
|
||||
padding: 10px 20px;
|
||||
border-top: 5px #efefef solid;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
}
|
||||
#footer a {
|
||||
color: #999999;
|
||||
}
|
||||
--></style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header" class="status5xx">
|
||||
<h1>ERROR 502 - Bad Gateway!</h1>
|
||||
</div>
|
||||
<div id="content">
|
||||
<h2>The following error occurred:</h2>
|
||||
<p>This server received an invalid response from an upstream server it accessed to fulfill the request.</p>
|
||||
<P>If you get this message repeatedly please contact the <!--WEBMASTER//-->webmaster<!--WEBMASTER//-->.</p>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>Powered by <a href="http://www.ispconfig.org">ISPConfig</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>ERROR 503 - Service Unavailable!</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="robots" content="noindex" />
|
||||
<style type="text/css"><!--
|
||||
body {
|
||||
color: #444444;
|
||||
background-color: #EEEEEE;
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
font-size: 80%;
|
||||
}
|
||||
h1 {}
|
||||
h2 { font-size: 1.2em; }
|
||||
#page{
|
||||
background-color: #FFFFFF;
|
||||
width: 60%;
|
||||
margin: 24px auto;
|
||||
padding: 12px;
|
||||
}
|
||||
#header {
|
||||
padding: 6px ;
|
||||
text-align: center;
|
||||
}
|
||||
.status3xx { background-color: #475076; color: #FFFFFF; }
|
||||
.status4xx { background-color: #C55042; color: #FFFFFF; }
|
||||
.status5xx { background-color: #F2E81A; color: #000000; }
|
||||
#content {
|
||||
padding: 4px 0 24px 0;
|
||||
}
|
||||
#footer {
|
||||
color: #666666;
|
||||
background: #f9f9f9;
|
||||
padding: 10px 20px;
|
||||
border-top: 5px #efefef solid;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
}
|
||||
#footer a {
|
||||
color: #999999;
|
||||
}
|
||||
--></style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="header" class="status5xx">
|
||||
<h1>ERROR 503 - Service Unavailable!</h1>
|
||||
</div>
|
||||
<div id="content">
|
||||
<h2>The following error occurred:</h2>
|
||||
<p>The Service is not available at the moment due to a temporary overloading or maintenance of the server. Please try again later.</p>
|
||||
<P>Please contact the <!--WEBMASTER//-->webmaster<!--WEBMASTER//--> with any queries.</p>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>Powered by <a href="http://www.ispconfig.org">ISPConfig</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
After Width: | Height: | Size: 4.2 KiB |
|
@ -0,0 +1,93 @@
|
|||
Copyright 2016 The Alata Project Authors (https://github.com/sorkintype/alata)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
|
@ -0,0 +1 @@
|
|||
google-site-verification: google6c326da01b9d90b0.html
|
|
@ -0,0 +1,107 @@
|
|||
<!doctype html>
|
||||
<html class="no-js" lang="it">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>GEST366 - Guida all'installazione</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="manifest" href="site.webmanifest">
|
||||
<link rel="apple-touch-icon" href="icon.png">
|
||||
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
|
||||
<meta name="theme-color" content="#fafafa">
|
||||
<meta name="description" content="GEST366 è un applicativo server-side, che può essere installato in un ambiente LAMP seguendo la nostra guida.">
|
||||
<meta name="author" content="ReF Artistic Services">
|
||||
<meta name="keywords" content="installazione gestionale, gest366, gestionale360">
|
||||
<!-- Open Graph Tags -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://www.gest366.it/">
|
||||
<meta property="og:title" content='GEST366'>
|
||||
<meta property="og:image" content="https://www.gest366.it/img/logo.png">
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
<meta property="og:image:width" content="800" />
|
||||
<meta property="og:image:height" content="515" />
|
||||
<meta property="og:image:alt" content="Logo GEST366" />
|
||||
<meta property="og:description" content="Gestionale open source">
|
||||
<meta property="og:locale" content="it_IT">
|
||||
</head>
|
||||
|
||||
<body class="no-background">
|
||||
<!--[if IE]>
|
||||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
|
||||
<![endif]-->
|
||||
|
||||
<header class="clearfix">
|
||||
<a href="https://www.gest366.it"><img src="img/logo.png" id="logo" alt="gest366 logo"></a>
|
||||
<nav role="navigation">
|
||||
<img id="menu-logo" onclick="toggleMenuVisibility()" src="img/menu.svg" alt="menu icon">
|
||||
<ul id="menu">
|
||||
<li><a href="./about.html">Cos'è</a></li>
|
||||
<li><a href="./download.html">Download</a></li>
|
||||
<li><a href="./doc.html">Documentazione</a></li>
|
||||
<li><a href="https://www.gest366.it/forum/">Forum</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main id="guida-installazione" class="doc-page">
|
||||
<h1>Guida all'installazione</h1>
|
||||
<div id="premessa">
|
||||
<h2>Prerequisiti</h2>
|
||||
<p>GEST366 è un applicativo <em>server-side</em>, che richiede un ambiente di esecuzione dotato di:</p>
|
||||
<ul>
|
||||
<li>Apache</li>
|
||||
<li>MySQL (o MariaDB)</li>
|
||||
<li>PHP</li>
|
||||
</ul>
|
||||
<p>Questa guida non tratterà i passaggi che precedono la vera e propria installazione del gestionale.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Guida all’installazione di Gest366</h2>
|
||||
<ol>
|
||||
<li>Scaricate l'archivio compresso (ZIP o TAR.GZ) di GEST366 dalla <a href="http://www.gest366.it/">pagina di download</a> del nostro sito.</li>
|
||||
<li>All’interno della cartella del webserver di vostra preferenza è necessario creare una sottocartella, nella quale estrarre il contenuto dello .zip. Il nome della sottocartella è a discrezione dell’utente, purché sia scritto tutto in minuscolo e senza spazi.</li>
|
||||
<li>A questo punto bisogna creare il database. Potete farlo tramite riga di comando o, per esempio, su phpMyAdmin. La nostra guida segue questa seconda eventualità.</li>
|
||||
<li>Per iniziare accedete alla vostra installazione di phpMyAdmin, selezionate la scheda <span class="gui-interactive">Database</span> e create un database mySQL inserendone il nome nell’apposito campo Nome del database, quindi cliccate su <span class="gui-interactive">Crea.</span><p class="non-inline"><img src="img/doc-img/installazione-1.jpg"></p> <span class="gui-suggestion">Attenzione</span>: in questa fase sarà possibile impostare nome utente e password: non è obbligatorio ma, qualora decidiate di averle, è importante che ricordiate le credenziali. </li>
|
||||
<li>Una volta creato il database, se installato in locale, nella barra degli indirizzi del vostro browser digitate <span class="gui-input">locahost/</span><span class="gui-suggestion">nomecartella</span>. Se installato su server esterno, dovrete digitare l’indirizzo configurato nel vostro web server per accedere alla cartella contenente i file estratti al punto 1.<p class="non-inline"><img src="img/doc-img/installazione-2.jpg"></p></li>
|
||||
<li>Spuntate la casella <span class="gui-input">Ho letto e accettato</span>, relativa al contratto di licenza (scheda <span class="gui-element">1. Licenza</span>) e cliccate su <span class=" gui-interactive">Successivo</span> per procedere.</li>
|
||||
<li>Riempite i campi nella scheda <span class="gui-element">2. Configurazione</span>.</li>
|
||||
<section>
|
||||
<ol>
|
||||
<li><span class="gui-input">Database host*</span> nome del server host su cui è installato il database (es. <span class="gui-interactive">localhost</span>)</li>
|
||||
<li><span class="gui-input">Database username*</span> Il nome utente eventualmente impostato al punto 4</li>
|
||||
<li><span class="gui-input">Nome database*</span> Il nome assegnato al database al punto 4</li>
|
||||
<li><span class="gui-input">Database password</span> La password eventualmente impostata al punto 4 per accedere al database</li>
|
||||
<li><span class="gui-input">Password dell’amministratore</span> e <span class="gui-input">Email dell’utente principale</span> non rientrano tra i campi a compilazione obbligatoria, ma suggeriamo di effettuare (e ricordare) una scelta. In caso contrario, ad entrambi i campi verrà di default assegnato il valore <span class="gui-suggestion">admin</span>.</li>
|
||||
</ol>
|
||||
</section>
|
||||
<p class="non-inline"><img src="img/doc-img/installazione-3.jpg"></p>
|
||||
<li>Cliccate su <span class="gui-interactive">Installa</span>. Solo per la prima installazione la pagina che vi si presenterà sarà la seguente:</li>
|
||||
<p class="non-inline"><img src="img/doc-img/installazione-4.jpg"></p>
|
||||
<p><span class="gui-suggestion">Attenzione</span>: nel caso visualizzaste il seguente messaggio di errore, verificate i permessi di scrittura della cartella di cui al punto 2 di questa guida.</p>
|
||||
<p class="non-inline"><img src="img/doc-img/installazione-4.1.jpg"></p>
|
||||
<li>Cliccate su <span class="gui-interactive">Installa</span> e, successivamente, confermate cliccando su <span class="gui-interactive">ok</span> nel popup che apparirà.</li>
|
||||
<p class="non-inline"><img src="img/doc-img/installazione-5.jpg"></p>
|
||||
<li>Procedete con l’installazione. Una volta arrivati al 100%, aggiornate la pagina e inserite le credenziali di accesso.</li>
|
||||
<p class="non-inline"><img src="img/doc-img/installazione-6.jpg"></p>
|
||||
<p class="non-inline"><img src="img/doc-img/installazione-7.jpg"></p>
|
||||
<li>Buon lavoro con GEST366!</li>
|
||||
<p class="non-inline"><img src="img/doc-img/installazione-8.jpg"></p>
|
||||
</ol>
|
||||
</div>
|
||||
</main>
|
||||
<footer role="contentinfo">
|
||||
<p>Sostenuto da:</p>
|
||||
<ul id="maintainers">
|
||||
<li><a href="https://www.refservices.eu">ReF Services</a></li>
|
||||
<li><a href="https://www.immensonet.it">Immenso NET</a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
<script src="js/vendor/modernizr-3.7.1.min.js"></script>
|
||||
<script src="js/plugins.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
|
@ -0,0 +1,18 @@
|
|||
# humanstxt.org/
|
||||
# The humans responsible & technology colophon
|
||||
|
||||
# TEAM
|
||||
|
||||
<name> -- <role> -- <twitter>
|
||||
Francesco Marinucci -- Web Developer -- @framarinucci
|
||||
Riccardo Adamo -- Web Designer
|
||||
Martino Colucci -- Web Master -- @ultra_men
|
||||
|
||||
# THANKS
|
||||
|
||||
Massimo Pizzato
|
||||
|
||||
# TECHNOLOGY COLOPHON
|
||||
|
||||
CSS3, HTML5
|
||||
Apache Server Configs, jQuery, Modernizr, Normalize.css
|
After Width: | Height: | Size: 82 KiB |
After Width: | Height: | Size: 1.1 MiB |
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Слой_1" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||
<linearGradient id="SVGID_1__52550" gradientUnits="userSpaceOnUse" x1="32" y1="5.625" x2="32" y2="59.1799" spreadMethod="reflect">
|
||||
<stop offset="0" style="stop-color:#1A6DFF"/>
|
||||
<stop offset="1" style="stop-color:#C822FF"/>
|
||||
</linearGradient>
|
||||
<path style="fill:url(#SVGID_1__52550);" d="M24.028,58h-1.963c-0.688,0-1.318-0.347-1.688-0.927c-0.369-0.582-0.416-1.302-0.123-1.926 L27.011,40H15.999c-1.188,0-2.232-0.673-2.726-1.757c-0.494-1.086-0.313-2.32,0.471-3.219L38.468,6.684 C38.848,6.249,39.396,6,39.971,6h1.964c0.687,0,1.316,0.346,1.686,0.926c0.371,0.581,0.417,1.302,0.126,1.926L36.667,24h11.335 c1.188,0,2.232,0.673,2.726,1.757c0.494,1.086,0.313,2.32-0.471,3.219L25.531,57.316C25.153,57.75,24.605,58,24.028,58z M39.971,8 l-24.72,28.339c-0.395,0.452-0.221,0.938-0.157,1.077C15.157,37.553,15.406,38,15.999,38h14.095l-8.021,17.979L24.028,56 l24.721-28.339c0.395-0.452,0.221-0.938,0.157-1.077C48.843,26.447,48.594,26,48.001,26H33.524l8.41-17.995L39.971,8z"/>
|
||||
<linearGradient id="SVGID_2__52550" gradientUnits="userSpaceOnUse" x1="31.9999" y1="18.75" x2="31.9999" y2="44.8088" spreadMethod="reflect">
|
||||
<stop offset="0" style="stop-color:#6DC7FF"/>
|
||||
<stop offset="1" style="stop-color:#E6ABFF"/>
|
||||
</linearGradient>
|
||||
<path style="fill:url(#SVGID_2__52550);" d="M31.226,43.457l4.006-8.011C35.564,34.782,35.081,34,34.338,34H23.093 c-0.849,0-1.313-0.99-0.769-1.642l9.974-11.968c0.393-0.472,1.128,0.038,0.823,0.571l-4.311,7.545 C28.428,29.171,28.909,30,29.676,30h11.231c0.833,0,1.302,0.958,0.79,1.616l-9.625,12.375C31.7,44.47,30.954,44.001,31.226,43.457z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.9 KiB |
|
@ -0,0 +1,15 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Слой_1" x="0px" y="0px" viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
|
||||
<linearGradient id="SVGID_1__48185" gradientUnits="userSpaceOnUse" x1="32" y1="10.25" x2="32" y2="53.9113" spreadMethod="reflect">
|
||||
<stop offset="0" style="stop-color:#1A6DFF"/>
|
||||
<stop offset="1" style="stop-color:#C822FF"/>
|
||||
</linearGradient>
|
||||
<path style="fill:url(#SVGID_1__48185);" d="M59,47V14c0-1.654-1.346-3-3-3H14c-1.654,0-3,1.346-3,3v5h-1c-1.654,0-3,1.346-3,3v3H6 c-1.654,0-3,1.346-3,3v22c0,1.654,1.346,3,3,3h22h30c1.654,0,3-1.346,3-3v-3H59z M13,14c0-0.552,0.449-1,1-1h42c0.551,0,1,0.448,1,1 v33H31v-2h24V17c0-1.103-0.897-2-2-2H17c-1.103,0-2,0.897-2,2v2h-2V14z M28,19H17v-2h36v26H31V22C31,20.346,29.654,19,28,19z M6,51 c-0.551,0-1-0.448-1-1V28c0-0.552,0.449-1,1-1h12c0.551,0,1,0.448,1,1v22c0,0.552-0.449,1-1,1H6z M25,51h-4.184 C20.928,50.686,21,50.352,21,50V28c0-1.654-1.346-3-3-3H9v-3c0-0.552,0.449-1,1-1h18c0.551,0,1,0.448,1,1v28c0,0.552-0.449,1-1,1H25 z M59,50c0,0.552-0.449,1-1,1H30.816C30.928,50.686,31,50.352,31,50v-1h28V50z"/>
|
||||
<linearGradient id="SVGID_2__48185" gradientUnits="userSpaceOnUse" x1="47.355" y1="17.25" x2="47.355" y2="27.75" spreadMethod="reflect">
|
||||
<stop offset="0" style="stop-color:#6DC7FF"/>
|
||||
<stop offset="1" style="stop-color:#E6ABFF"/>
|
||||
</linearGradient>
|
||||
<path style="fill:url(#SVGID_2__48185);" d="M51,25.786V20c0-0.552-0.448-1-1-1h-5.786c-0.448,0-0.672,0.542-0.356,0.858l6.283,6.283 C50.458,26.458,51,26.234,51,25.786z"/>
|
||||
<circle style="fill:#7933FF;" cx="12" cy="47" r="2"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 4.8 KiB |
After Width: | Height: | Size: 3.0 KiB |
After Width: | Height: | Size: 6.6 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 25 KiB |
After Width: | Height: | Size: 1.4 KiB |
After Width: | Height: | Size: 8.8 KiB |
After Width: | Height: | Size: 6.9 KiB |
After Width: | Height: | Size: 8.3 KiB |
After Width: | Height: | Size: 195 KiB |
After Width: | Height: | Size: 43 KiB |
After Width: | Height: | Size: 167 KiB |
After Width: | Height: | Size: 58 KiB |
After Width: | Height: | Size: 155 KiB |
After Width: | Height: | Size: 58 KiB |
After Width: | Height: | Size: 60 KiB |
After Width: | Height: | Size: 7.0 KiB |
After Width: | Height: | Size: 60 KiB |
After Width: | Height: | Size: 9.4 KiB |
After Width: | Height: | Size: 66 KiB |
After Width: | Height: | Size: 9.5 KiB |
After Width: | Height: | Size: 69 KiB |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 119 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 67 KiB |
After Width: | Height: | Size: 37 KiB |
After Width: | Height: | Size: 26 KiB |
After Width: | Height: | Size: 3.9 KiB |
After Width: | Height: | Size: 52 KiB |
After Width: | Height: | Size: 8.6 KiB |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 142 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 123 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 46 KiB |
After Width: | Height: | Size: 7.6 KiB |
After Width: | Height: | Size: 118 KiB |
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 41 KiB |
After Width: | Height: | Size: 6.6 KiB |
After Width: | Height: | Size: 40 KiB |
After Width: | Height: | Size: 6.1 KiB |
After Width: | Height: | Size: 61 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 69 KiB |
After Width: | Height: | Size: 13 KiB |
After Width: | Height: | Size: 71 KiB |
After Width: | Height: | Size: 9.7 KiB |
After Width: | Height: | Size: 36 KiB |
After Width: | Height: | Size: 4.4 KiB |
After Width: | Height: | Size: 104 KiB |
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 72 KiB |
After Width: | Height: | Size: 8.8 KiB |
After Width: | Height: | Size: 149 KiB |
After Width: | Height: | Size: 17 KiB |