Categoria: Siti Web

Come creare un’ottima struttura per una corretta pagina HTML

Posted on by Dam Company

Una corretta struttura HTML è fondamentale per avere più possibilità di essere indicizzati dai motori di ricerca.

In questo articolo scopriremo come creare un’ottima struttura per una corretta pagina HTML.

Per prima cosa utilizziamo il <!doctype html> che serve a dire al browser, che la pagina è scritta in HTML 5.

Dopodichè apriamo il tag <html> che serve a contenere gli altri tag html.

All’interno inseriremo i tag <head> e il tag <body>.

Ci concentreremo sui tag contenuti all’interno di <head> poichè il tag <body> varia radicalmente a seconda della pagina web che si vuole creare.

Per creare un’ottima struttura per una corretta pagina HTML è necessario inserire i giusti tag all’interno della sezione <head>.

Di seguito proponiamo un’ottima struttura HTML che può essere utilizzata come base per la tua pagina web:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titolo della pagina</title>
<meta name="description" content="Descrizione della pagina web.">
<meta name="robots" content="index,follow">
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="icon" type="type="image/png" href="favicon.png">
</head>
<body>
....
</body>
</html>

Abbiamo aggiunto i metatag che servono a dare importanti informazioni ai motori di ricerca oltre al tag <title>.

Il metatag <meta charset=”utf-8″> serve a definire il charset utilizzato nella pagina e di solito il più utilizzato è utf-8.

Il metatag <meta name=”viewport” content=”width=device-width, initial-scale=1″> invece è utilizzato per ottimizzare il layout da mobile della pagina web.

Il tag <titlte> invece contiene il titolo che compare nella scheda del browser (insieme alla favicon) e compare nei risultati dei motori di ricerca.

Il metatag <meta name=”description”> invece contiene la descrizione della pagina che viene mostrata dai motori di ricerca.

Il metatag <meta name=”robots” content=”index,follow”> serve a dire al motore di ricerca di “indicizzare” la pagina web e di fare “follow” (cioè seguire) le pagine presenti all’interno della pagina per andare ad indicizzare anche quelle.

Il tag <link rel=”stylesheet” type=”text/css” href=”layout.css”> serve per aggiungere un file css esterno. È sempre meglio separare i file css, in modo da avere una struttura della pagina web più organizzata.

Infine l’ultimo tag <link rel=”icon” type=”type=”image/png” href=”favicon.png”> serve a dire al browser qual è la favicon del nostro sito web. Solitamente vengono utilizzati file .ico oppure .png oppure entrambi.

Con questa semplice struttura abbiamo dato tutte le informazioni essenziali al browser, per ottimizzare al meglio la nostra pagina web.

Come creare animazioni con CSS3

Posted on by Dam Company

È davvero possibile creare delle animazioni su una pagina web utilizzando semplicemente CSS3?

La risposta è…certo che si!

Con l’arrivo di CSS3 i web designer hanno potuto iniziare ad inserire, all’interno dei loro progetti, delle splendide animazioni che prima venivano fatto in Flash o in Javascript.

Vediamo insieme allora come funzionano le animazioni con CSS3!

Per prima cosa dobbiamo definire un’animazione e darle un nome tramite la keywork @-keyframes, ed indicare in essa quali saranno i comportamenti dell’elemento che vogliamo animare.

Supponiamo di voler creare una semplice animazione, che cambi il colore di sfondo di un elemento continuamente:

@-keyframes "change-background"{
0%{
   background: "blue";
}
25%{
   background: "green";
}
50%{
   background: "yellow";
}
75%{
   background: "orange";
}
100%{
   background: "red";
}
}

La percentuale definita nell’animazione ci permette di decidere quando modificare l’elemento. In questo caso avremmo un cambio di background costante durante l’animazione, ma avremmo anche potuto decidere di far durare lo sfondo giallo più di quello arancione per esempio.

A questo punto, per poter utilizzare la nostra animazione fatta con CSS3, non ci resta altro da fare che richiamare la nostra animazione “change-background” all’interno della definizione CSS di un elemento.

Supponiamo di avere nella nostra pagina il seguente elemento HTML:

<div id="testElement">Test</div>

Benissimo per completare e vedere la nostra animazione fatta con CSS3, non ci resta altro che scrivere il seguente codice CSS:

#testElement{
   width:200px;
   height:200px;
   border: 1px solid #000;
   animation-name: change-background; /* Nome dell'animazione da richiamare */
   animation-duration: 10s; /* Durata dell'animazione */
   animation-animation-iteration-count: infinite; /* Numero di ripetizioni dell'animazione, possiamo infatti decidere di far partire l'animazione solo 1 volta per esempio */
   animation-timing-function: linear; /* Modo in cui l'animazione viene eseguita  */
}

Abbiamo visto in questo articolo quanto sia semplice creare un animazione in CSS3, infatti non ci sono limiti in termini di animazioni che si possono realizzare.

Perchè WordPress è il CMS più utilizzato al mondo?

Posted on by Dam Company

I CMS sono strumenti software che aiutano uno web designer nella creazione e nella gestione di un sito web. Oggi, questi strumenti sono tanto avanzati che anche i più inesperti possono costruire un sito web funzionante senza una formazione informatica e senza dover scrivere una riga di codice.

Tra i CMS più avanzati, quello più conosciuto di tutti è sicuramente WordPress. Nel 2021, quasi il 40% dei web è organizzato e gestito attraverso questa piattaforma! Ma quali sono i fattori che determinano tanto successo? E’ davvero WordPress il CSM migliore sul mercato al momento?

Perché WordPress è il CMS più utilizzato?

1 – E’ open source

WordPress è una piattaforma open source… in altre parole, è gratuita! Chiunque la può scaricare sul proprio computer o server e utilizzarla per creare e gestire il proprio sito. Oltre al download gratuito, poi, WordPress – dal punto di vista del costo – offre anche numerosi altri vantaggi: non ci sono abbonamenti mensili da pagare, né fee legate alle vendite… 

2 – Versatilità

WordPress è il website builder più versatile a disposizione dei web designer. Oltre ad essere concepito in modo flessibile, le possibilità di WordPress si ampliano enormemente grazie ai plug in. 

I plug in sono funzionalità aggiuntive che svolgono azioni o permettono di gestire aspetti specifici e che possono essere installati su WordPress dal suo marketplace. Alcuni di questi plug-in sono a pagamento e altri sono gratuiti.

3 – WooCommerce

Uno dei plug-in più utilizzati è WooCommerce: una funzionalità aggiuntiva che permette di creare e gestire un ecommerce con WordPress. La disponibilità di WooCOmmerce ha fatto sì che WordPress sia il CMS più utilizzato anche in ambito ecommerce, superando addirittura piattaforme come Shopify che sono nate e costruite specificatamente per l’ecommerce management.

4 – SEO

L’ottimizzazione per i motori di ricerca dei siti web è importantissima in quanto la maggior parte del traffico in arrivo sul tuo sito arriverà proprio da essi. WordPress ha tante funzionalità che ti permettono di gestire la SEO, alle quali puoi aggiungere plug in sempre più specifici e avanzati. Tuttavia, WordPress ha già di per sé un codice pulito e ottimizzato per la SEO che migliora la visibilità dei siti costruiti su WordPress nei motori di ricerca.

Questo fa sì che, anche se si è inconsapevoli dell’ottimizzazione del codice WP, i siti costruiti su questa piattaforma tendono ad avere più successo di altri, proprio perché risultano più visibili sui motori di ricerca.

5 – Integrazioni

L’attività di un sito web è sempre accompagnata da una parallela sui social. Grazie ai plugin di WordPress, l’integrazione con i social network e l’automazione di tanti processi diventa molto più facile da gestire. Questo è un altro elemento che ha contribuito al suo successo.

Oltre alle integrazioni con i social, poi, i plug in ne permettono altre altrettanto fondamentali, come quella con gli strumenti di email marketing, advertising, e tanto altro.

Conclusioni

Tutti i fattori che abbiamo utilizzato hanno fatto sì che WordPress sia oggi il CSM più utilizzato in tutto il mondo. All’inizio dell’articolo, ci siamo chiesti se fosse davvero il migliore tra gli strumenti in circolazione, e la nostra analisi sembra aver dato risposta affermativa: WordPress è il CMS più facile da utilizzare, più completo e versatile, ed è anche open source!

Impostare un colore o un’immagine di sfondo con i fogli di stile CSS

Posted on by Dam Company

Per gestire la parte grafica di una pagina web è fondamentale conoscere i fogli di stile CSS.

Grazie a questi speciali fogli è possibile gestire ogni singolo aspetto, di ogni singolo elemento presente sulla pagina. Dimensione e colore del carattere, colore di sfondo, animazioni e molto altro.

Impostare lo sfondo di un elemento è semplice. Ci basta utilizzare le proprietà background-color o background-image o più semplicemente background.

Per impostare un colore di sfondo (rosso ad esempio) ci basta utilizzare il seguente codice:

#contenitore{
   background-color: #ff00000;
}

Il testo “#ff0000” indica il codice esadecimale del colore rosso. Ma con i CSS possiamo utilizzare anche i colori RGB oppure scrivere semplicemente il nome del colore in inglese (nel nostro esempio avremmo dovuto scrivere “red”).

Per impostare invece un’immagine di sfondo basta specificare l’url dell’immagine:

#contenitore{
   background-image: url('percorso/verso/immagine/sfondo.jpg');
}

Grazie poi a diverse proprietà come background-repeat, background-position e molte altre, possiamo gestire il comportamento dell’immagine di sfondo.