Come creare un sito Internet dalla progettazione alla pubblicazione

Work-space

Come si crea un sito Internet dalla progettazione alla pubblicazione

Come creare un sito internet dalla progettazione alla pubblicazione? In questo articolo affronteremo i seguenti argomenti

  • Come il linguaggio HTML descrive la struttura di una pagina web.
  • Imparare ad aggiungere ad una pagina web dei tag o elementi.
  • Scrivere una pagina web.
  • Conoscere cos’è un Cms (Content Management System).
  • Capire quale Cms fa al caso tuo.

Come si crea un sito web dalla progettazione alla pubblicazione

Ogni giorno incontriamo ogni genere di documento. Quotidiani, cataloghi di prodotti, assicurazioni.

Le pagine web si comportano come versioni elettroniche di questi documenti.

Per esempio, i giornali presentano gli stessi articoli sia su carta, sia sulle proprie pagine web; è possibile richiedere un’assicurazione sul Web e molte aziende sono dotate di cataloghi online e di strumenti per il commercio elettronico(più avanti in questo articolo parleremo delle Ecommerce).

Progettazione: La struttura per creare un sito Internet

come creare un sito internet

In tutti i tipi di documenti, la struttura è molto importante per aiutare il lettore a comprendere i messaggi che state cercando di comunicargli e anche per navigare all’interno dei documenti. Pertanto, per poter imparare a creare un sito internet, è molto importante capire la struttura delle singole pagine.

Progettare la struttura delle pagine di un sito internet

L’uso di titoli e sottotitoli all’interno di un documento serve per stabilire la gerarchia nelle varie informazione.

Per esempio, un documento potrebbe iniziare con un grosso titolo, seguito da un’introduzione o dalle informazioni più importanti.


< h1 > Grosso Titolo < /h1 >
< h2 > Informazioni < h2 >
< h3 > Altre Informazioni < h3 >

Articolo, Titoli e Sottotitoli

L’articolo può poi essere espanso grazie all’impiego di sottotitoli, più giù nella pagina.

Quando si usa un word processor per creare un documento, si cerca di separare i testi per dotarli di una struttura.

Ogni agromento potrebbe essere costituito da un nuovo paragrafo e ogni sezione può essere dotata di un titolo che descrive gli argomenti trattati.

HTML: Il linguaggio per descrivere le pagine

Qui sotto potete vedere il codice HTML impiegato per creare una pagina.

Non preoccuparti troppo del significato dei codici. Ma focalizzati sulla struttura.

< html >
< body >
< h1 >Questa è l'intestazione principale< /h1 >
< p >Questo testo potrebbe essere un'introduzione al resto della pagina< /p >
< h2 >Questo è un sottotitolo< /h2 >
< p >Molti articoli lunghi hanno sottotitoli per seguire la struttura di ciò che viene scritto< /p >
< h2 >Un altro sottotitolo< /h2 >
< p >Come puoi vedere un altro sottotitolo< /p >
< /body >
< /html >

Il Codice HTML

Il codice html in rosso è costituito da caratteri che devono trovarsi all’interno di parentesi angolari: questi vengono chiamati elementi HTML.

Gli elemeti sono normalmente costituiti da due tag: uno di apertura e uno di chiusura (il tag di chiusura è costituito dal carattere barra /).

Ogni elemento HTML dice al browser qualcosa a proposito delle informazioni che sono contenute tra i tag di apertura e di chiusura.

Tag Body, Head e Title


< html>
< head >
< title > Questo è il titolo della pagia < title >
< /head >
< body >
< h1> Questo è il corpo della pagia < /h1 >
< p > Tutto quello che si vede all'interno delle pagine Web < /p >
< /body >
< /html >

Il tag Body

All’interno del Tag < body > incontriamo tutto ciò che viene visualizzato all’interno della pagina principale del browser.

Il tag Head

Prima di < body > si trova l’elemento < head > .

Contiene informazioni relative alla pagina, invece che informazioni che vengono presentate nella parte principale delle finestra del browser. Normalmente all’interno del tag head si trova un title.

Il tag Title

Il contenuto del tag < title > viene visualizzato nella parte superiore del browser, sopra la riga dell’indirizzo URL della pagina che si vuole visitare, oppure nella scheda di tale pagina. (se il browser utilizza delle schede per consentire la visualizzazione in contemporanea di più pagine)

Il Tag Title è uno degli oltre 200 parametri che utilizza Google per posizionare le pagine (Per approfondire leggi la nostra guida sulla Search Engine Optimization

Scrivere una pagina Web

  • Per creare la vosta prima pagina web su un PC avviate il blocco note.
  • In alternativa vi consiglio lo strumento gratuito Notepad++
  • Digitate il codice descritto sopra togliendo gli spazi tra < il codice e >
  • Aprite il menu File e selezionate Salva con nome
  • Assegnate al file un nome facile da ricordare.
  • Potete salvare questo file come test.html
  • Assicuratevi che nella casella Salva come sia riportata l’indicazione tutti i file
  • Avviate il Browser web. Richiamate il suo menu File e selezionate Apri.
  • Raggiungete il File che avete appena creato, selezionatelo e fate clic sul pulsante Apri.
  • Dovrebbe apparire la vostra pagina Web.
  • Se il risultato fosse differente assicuratevi di non aver commesso errori di battitura nei codici e che il file sul pc usi l’estensine .html

Imparare Html, CSS e Javascript

Pubblicazione e CMS: Content Management System

Il Content Management System è un sistema che permette di creare un sito web e lavorarci rendendolo il più semplice possibile.

CMS è l’acronimo di Content Management System che tradotto in italiano significa sistema di gestione dei contenuti, ovvero un applicativo finalizzato a gestire siti e portali web senza bisogno di particolari conoscenze tecnologiche.

Chiunque può effettuare cambiamenti ai contenuti (pubblicare, modificare, eliminare, ecc.) del sito senza avere competenze specifiche di HTML o di altri linguaggi di programmazione.

Creare un sito Internet con WordPress

Partiamo dalla definizione su Wikipedia

WordPress è una piattaforma software di “blog” e content management system (CMS) open source ovvero un programma che, girando lato server, consente la creazione e distribuzione di un sito Internet formato da contenuti testuali o multimediali, facilmente gestibili ed aggiornabili in maniera dinamica. Inizialmente fu creato da Matt Mullenweg e distribuito con la licenza GNU General Public License. È sviluppato in PHP con appoggio al gestore di database MySQL.

Se sei un blogger o comunque aspiri a diventarlo, WordPress è la piattaforma che fa al caso tuo.

C’è una grossa differenza tra WordPress.org e WordPress.com

WordPress.com

Pro
  • Gratuito
  • Senza installazione e configurazione iniziale
  • Backup automatico
  • Update automatici
  • Possibilità di acquistare aggiornamenti per renderlo professionale
Contro
  • Non è possibile gestire fisicamente i file che compongono il sito
  • Non possiamo registrare domini.it
  • Non si possono installare temi e plugin
  • Non si può modificare il css
  • Pubblicità vietata (adsense, affiliazioni, link)
  • 50 MB di grandezza file massimo
  • Se per errore si infrangono i “termini del servizi” il sito può essere cancellato senza avviso

WordPress.org

Pro
  • Gratuito
  • Nostro al 100%, possiamo farci qualsiasi cosa
  • temi, plugin e file: totale libertà!
  • Sito professionale
  • Possibilità di creare qualsiasi tipo di sito web
Contro
  • Hosting e dominio a pagamento (ma trovi ottimi hosting professionali a prezzi contenuti)
  • Richiesta installazione iniziale
  • Update manuali

Creare un Ecommerce: Magento o Prestashop?

Se vuoi sviluppare un sito internet per vendere prodotti online, i CMS che fanno al caso tuo sono due:

Entrambe le soluzioni, possiedono una versione gratuita e offrono tutte le funzionalità di base necessarie per creare un Ecommerce on-line. Esistono però delle differenze decisive che ti permetteranno di deciderti per l’una o l’altra.

Creare un sito Internet Ecommerce con Magento

Partiamo dalla definizione su Wikipedia

Magento è un CMS open source per l’e-commerce lanciato il 31 marzo 2008. È stato creato dalla Varien e costruito sopra Zend Framework.[1] È pubblicato con licenza Open Software License versione 3.0. Oltre 250.000 commercianti in tutto il mondo utilizzano la piattaforma Magento Commerce, che rappresenta circa il 30% della quota di mercato totale.

  • Open source
  • Ottime prestazioni, ma solo se installato su un hosting performante
  • Gestione template piuttosto complessa
  • Grande disponibilità di moduli ed estensioni
  • Pannello di amministrazione professionale ma molto tecnico e complicato
  • Curva di apprendimento più elevata soprattutto se non si ha dimestichezza con il framework Zend
  • Adatto a gestire grandi quantità di articoli
  • Adatto a grosse realtà imprenditoriali

Creare un sito Internet Ecommerce con Prestashop

Partiamo dalla solita definizione su Wikipedia

PrestaShop è un CMS open source utilizzato per realizzare siti di commercio elettronico.

Nasce nel 2007 e, a differenza dei CMS più “generici” diffusi all’epoca della sua prima release (WordPress e Joomla!), Prestashop è interamente pensato per lo sviluppo e la gestione dell’e-commerce.

I temi Prestashop sfruttano il motore di template Smarty, il quale permette una netta separazione tra contenuti, grafica e programmazione. Grazie a questa impostazione, il web designer può occuparsi della grafica del sito lavorando sui file di template e CSS, mentre il developer può intervenire sui files PHP (difatti la documentazione ufficiale è divisa in due sezioni ben distinte, una per i web designer ed una per gli sviluppatori).

L’interfaccia utente semplice e intuitiva, e il sistema modulare (per implementare una funzionalità basta installare il relativo modulo), hanno reso Prestashop uno dei CMS per l’e-commerce più diffusi e utilizzati sia dai professionisti sia dai neofiti.

Attorno a Prestashop c’è una comunità molto attiva, soprattutto in Francia e in Spagna, che contribuisce al costante miglioramento del software e allo sviluppo di moduli per implementare sempre nuove funzionalità.

È tradotto in varie lingue.

  • Open source
  • Buone prestazioni
  • Template relativamente facili da gestire
  • Meno estensioni di Magento
  • Pannello di Admin facile da utilizzare
  • Apprendimento immediato
  • Non adatto a trattare un gran numero di prodotti
  • Consigliato alle aziende medio-piccole

Pubblicazione: Acquistare Dominio e Spazio Web

Alcuni tra i migliori Hosting che permettono di acquistare uno spazio per creare il tuo sito web sono:

Una volta acquistato lo spazio per il tuo sito web, ci potrai installare gratuitamente un CMS.

A questo punto potrai iniziare con la realizzazione del tuo sito web aggiungendo le tue immagini ed il tuo logo.

Creare un sito internet: Per approfondire