Crearsi un’opportunità di lavoro con Amazon
Vi avevo parlato in questo articolo come poter vendere su Amazon. Il problema che per aprire un’attività e vedere dei prodotti in private label, si deve avere una budget da investire che avevo quantificato, per iniziare seriamente, in circa €5.000. Ma per chi non ha questa disponibilità, deve desistere a diventare un imprenditore? La risposta è NO. Perché con l’avvento della pandemia si sono aperti degli scenari che prima in pochi avevano capito. Con la pandemia milioni di persone hanno cominciato a utilizzare Amazon e anche dopo la fine del lockdown ha continuato a utilizzarlo. Praticamente Amazon ha fidelizzato i nuovi compratori. Questo a comportato l’aumento del fatturato dei venditori su Amazon. Ha fatto capire a molti imprenditori che non utilizzavano l’on line, che non potevano fossilizzarsi sulla vendita dei loro prodotti utilizzando solo il modello tradizionale ma bensì di diversificare le loro vendite anche sull’on line.
Cosa sta succedendo? Moltissime aziende vorrebbero vendere su Amazon ma non sanno come fare e altre che si credono più intraprendenti credono di poterlo fare senza un’aiuto. A volte ci si appoggia a aziende che danno servizi nel campo digitale. Il problema che non si è ancora capito che in italia mancato figure professionali in questo campo. Questo comporta che molte aziende che provano a vendere su Amazon ne rimangono deluse perché vendono poco e molto spesso non vendono niente. Si pensa di poter vendere su Amazon utilizzando una modalità vecchia, cioè scatto delle foto metto un titolo una descrizione e il gioco e fatto, vendo vendo vendo. Chi si approccia al mondo Amazon in questa modalità, io gli faccio le mie più sentite condoglianze.
Avete capito cosa vi sto consigliando? C’è un buco di mercato in questo campo. Bisogna crearsi un’opportunità. Vi spiego brevemente cosa consiste questo nuovo lavoro. Praticamente sarebbe quello di portare i prodotti delle aziende sul marketplace di Amazon prendendovi una percentuale su fatturato dei prodotti. Vi starete chiedendo come faccio, dove trovo le informazioni per poter iniziare? E secondo voi, io che scrivo a fare questo articolo se poi non vi do le informazioni. Vi posso dire come ho iniziato io, perciò l’ho provato sulla mia pelle ed è per adesso il miglior corso in circolazione. Anche se chiamarlo corso è riduttivo perché si tratta di una community di 2200 persone, con tutto quello che vi può servire per non sbagliare. Con professionisti in ogni campo e con moltissime info che si trovano in chat. Io una visione alla lezione interattiva la darei poi deciderete. Premetto che anche se faccio parte della community non sono un affiliato e non prendo nessun compenso per la pubblicità che gli faccio. Voglio solo condividere la mia esperienza. Rimango sempre a disposizione per qualsiasi info che vogliate chiedermi. Premetto che ovviamente il corso non è gratis!! cliccate qui
Vendere su Amazon
8 Aprile 2020
Vi voglio raccontare la mie esperienza o meglio la mia ricerca d’informazioni in merito alla vendita di prodotti sulla piattaforma di Amazon. Comincio nel dire che io fino a 5 mesi fa non credevo che una persona con un lavoro a tempo indeterminato potesse vendere dei prodotti su Amazon. Pensavo che visto, che io non produco nessun tipo di prodotto non avrei mai potuto vendere niente.
Facendo ricerche ho capito che si può fare in tre modi differenti. Abbiamo tre modalità di vendita. Anche se le tre modalità di vendita sembrerebbero uguali, in fondo si tratta di vendere, in verità sono molti diversi, sia per la modalità di vendita sia per la gestione delle vendite.
E sono Amazon FBA, Amazon FBM e Amazon Retail.
Amazon FBA (Fulfillment by Amazon) è un servizio che Amazon offre ai venditori per aiutarli a gestire il loro inventario, la parte di magazzino, le spedizioni ed il servizio clienti. Praticamente si compra il prodotto, lo si spedisce ai magazzini Amazon e il resto lo gestisce tutto Amazon, sono i vari prodotti con la dicitura PRIME.
Amazon FBM (Fulfillment by Merchant) vuol dire che si spedisce il prodotto ai magazzini Amazon e tutto il resto gestione magazzino, spedizioni, resi e clienti a fatto tutto dal venditore.
Amazon Retail può essere FBA o FBM la differenza è la tipologia del prodotto. MI spiego meglio. Ci sono due distinte categorie di prodotti che si possono vendere su Amazon. Il prodotto che cerco in una qualsiasi parte del mondo (prevalentemente CINA) e una volta trovato ci metto il mio marchio (private label) o il prodotto di marche già esistenti.
Come in tutte le cose ci sono i pro e i contro. Perciò prima di decidere uno deve informarsi specialmente da chi lo sta già facendo o acquistando corsi. In merito ai corsi bisogna stare molto attenti perché come in tutte le cose ci sono corsi buoni e meno buoni. I prezzi dei corsi che si trovano in rete possono partire dai 1000€ ai 2500€ e non necessariamente quello più caro è migliore. Qui non voglio dare giudizi sui corsi perché non avendoli acquistati tutti non posso dare un giudizio ma se qualcuno volesse avere una mia opinione mi può contattare.
La cosa da tenere bene in mente, è che non è un gioco, ma è un lavoro vero e proprio ed è da prendere sul serio. Ovviamente si deve aprire P.IVA, ma questo può essere fatto anche se già avete un’altro lavoro. Quanto costa avviare questa attività? Varia molto dalla tipologia di vendita e dal prodotto che si vende. Calcolando l’aperture della P.IVA più il corso del corso (media 1500) più l’acquisto dei prodotti può variare molto, comunque da un minimo 3000€/3500€ in su. Da ricordarsi e non mi stancherò mai di dirlo non è un gioco va preso seriamente e ricordatevi che come Impresa c’è sempre il rischio di perdere tutto. Non è cosi semplice come potrebbe sembrare.
Per adesso vi ho dato delle informazioni grossolane tanto per capire a grosse linee in cosa consiste, più avanti non è detto che faccia degli articoli più dettagliati sull’argomento.
15 Luglio 2021
Volevo precisare che Amazon Retail è un business poco profittevole per via della concorrenza. Di solito si parla di un utile del 10%. C’è anche un’altro aspetto molto importante che per riuscire in quanto “metodo” di vendita bisogna disporre di grossi capitali. Per il semplice motivo che per poter vendere prodotti già commercializzati si deve combattere sul prezzo, e questo lo si può fare solo riuscendo ad acquistare il prodotto al più prezzo più basso dei tuoi competitor. Le cifre di cui si parla per poter entrare in questo business è di 50k€.
Con Amazon FBA o FBM le cose cambiano radicalmente come avevo già anticipato. Utile qui si parla del 30% al 40%, a volte anche di più a seconda del prodotto. Adesso comunque si è aggiunto anche la possibilità, una volta che il tuo business è avviato, è quello di poter vendere il proprio marchio. Ci sono molte aziende che cercano marchi con un certo fatturato che possono partire dai 60k€/70K€ in su. E sono disposti a comprarti il marchio dalle 2,5/3 volte il tuo fatturato. Con la possibilità pure che ti facciano gestire ancora tutto a te con una percentuale sulle vendite oltre che aver incasso l’importo della vendita del tuo marchio.
Calculator for King of Avalon
In molti mi scrivete chiedendomi consigli e spiegazioni. Mi chiedete modifiche di svariato genere. Qui voglio cominciare col spiegare come si utilizza l’App.
Questa è la videata principale. Troviamo in alto a sinistra il tasto Info dove vi porterà alla pagina della Privacy Policy. Poi abbiamo:
- Calculate Speed up
- Calculate Resource
- Language
- Instructions
- Comma to separate the thousaunds
- Point to separate the thousaunds
I due tasti che trovate in parte a Comma e Point servono per attivare o disattivare una delle due voce di vostra scelta. A seconda se volte il separatore delle migliaia come punto o virgola.
Calculate Speed up
Questa è lo schermo che vi trovate premendo Calculate Speed up . A cosa serve questa schermata? Serve per poter calcolare in giorni, ore e minuti tutti gli speed up che abbiamo negli oggetti. In molti mi scrivete che è inutile. Perché l’ho creata? In passato, soprattutto agli inizi del gioco se volevo sviluppare una struttura per raggiungere degli obbiettivi in un evento rischiavo che dopo aver utilizzato le risorse non potevo svilupparlo subito perché non avevo sufficienti speed up e di conseguenza perdevo il mio evento. In questo modo potevo sapere se potevo quale struttura potevo sviluppare.
Come si usa?
Molto semplice. Vi trovate un elenco dei speed up, non dovete far altro che premere lo spazio bianco in parte allo speed up scelto, che diventerà rosso, e inserire la quantità. Una volta inserite tutte le quantità che volete calcolare basta premere To Calcolate. Vi apparirà in sovra impressione il totale dei giorni, ore e minuti. Reset serve per cancellare tutte le quantità inserite.
Calculate Resource
In molti mi chiedete che sarebbe meglio far si che l’app faccia il calcolo in automatico senza doverle inserire manualmente. Qui voglio precisare che questa possibilità è impossibile, perché tutti i dati che mi servirebbero per fare questo calcolo si trovano sul server di KoA, e vorrebbe dire prenderli illegalmente perché dovrei violare la sicurezza dei loro server
Quando premete Calculate Resource vi troverete in una schermata intermedia che altro non è il totale di tutte le risorse che avete inserito manualmente.
Per entrare nella pagina d’inserimento delle risorse si deve premere Resources management.
Questa è la videata :
Qui si possono inserire tutte le risorse che avete. Nell’App gratuita avrete la possibilità di gestire tre castelli, mentre nella versione a pagamento oltre a togliere tutta la pubblicità si potranno gestire fino a novantanove (99) castelli. Vediamo come funziona.
1) Qui trovate il numero di castelli attivati e il massimo di castelli che potete attivare.
5) Qui trovate una breve spiegazione su come inserire le risorse.
6) Con questo tasto potete aggiungere più castelli e per eliminarli si deve premere sul simbolo del cestino che si trova in ogni schede del castello. Il simbolo del cestino non lo trovate nel primo castello ma dal secondo in poi.
4) Qui potete dare un nome. Sarebbe consigliabile per chi ne ha molti castelli, dare il nome dello stesso per ricordarsi quali castelli ha già inserito in modo di non confondersi, ma comunque potete dare il nome che volete.
2)Per inserire le risorse dovete tenere premuto fino a quando non vi apparirà la videata in sopra impressione. In questa sezione, Resources in the castle, si devono inserire le risorse che si hanno nel castello che sono quelle risorse che vi trovate attaccando altri castelli o che mi vengono dati da altri giocatori che fanno parte della vostra alleanza o che avete dopo aver raccolto le risorse nelle piastrelle. La cosa importante è che non devono essere inserita quantità con virgola o punto. Es. 2000000 cosi è corretto — 2.000.000 e 2,000,000 in questo modo è sbagliato è l’app non farà i calcoli giusti.
3)Per inserire le risorse dovete tenere premuto fino a quando si aprirà un’altra videata come quella che vedete qui. Ogni videata è diversa a seconda 
della tipologia delle risorse che volete inserire. Avete un elenco con in parte la possibilità di inserire la quantità corrispondente. Anche qui quando premete la il campo bianco della quantità scelta diventerà rossa. Una volta inserita la quantità se tenete premuto sul campo rosso(vedi 7) ti apparirà un messaggio (vedi 8) col totale di quella rss.
Quando avrete finito d’inserire le quantità si deve premere su To calcolate e vi ritroverete nella videata dei castelli. Il tasto reset serve per cancellare le quantità inserite.
Instructions
Il pulsante instructions non è altro che un collegamento a questa pagina.
Language
Qui si sceglie la lingua che si vuole premendo sulla bandiera.
Considerazioni
Voglio precisare che io non faccio parte del Team KoA perciò non fatemi domande a qui non posso rispondere. Se avete problemi col gioco dovete contattare l’assistenza di KoA col tasto Aiuto. Questa app è stata fatta con amore è molte ore passate davanti a uno schermo per risolvere delle mie esigente che ho poi voluto condividere con tutti voi. Spero che apprezziate anche se sono soggetto a più critiche che complimenti. In futuro ci saranno dei miglioramenti consigliatemi da giocatori che usano l’app e che mi contattano via email.
Grazie a tutti per il supporto che mi date e buon gioco!!!
Sono disponibili tutti gli aggiornamenti. Dovreste disinstallare quelle vecchie e installare quelle nuove.
Per qualsiasi aggiornamento potete lasciare un commento in fondo alla pagina. Saranno tutte prese in considerazione e valutate. Grazie
Calculator for King of Avalon (FREE)
Calculator for King of Avalon – Ultimate
Vuoi essere avvisato sulle prossime offerte dell’App, compila il form in fondo alla pagina
Costruire un sito Web 7 – CSS – Parte 5
I font
Vediamo come dare stile al nostro testo. Per il tipo di font si devono usare quelli che hanno tutti i pc per non evitate che il nostro sito vada in errore o che visualizzi un font che non avevamo scelto. I font che si trova in tutti i pc li trovate qui. Mentre se volete dei font particolari li trovate qui. Come vedete sono i font che mette a disposizione google gratuitamente. Una volta che avete scelto il vostro font e modificato come volete premete sul + a questo punto in basso a destra cliccate sulla barra che vi apparire e copiate il codice. es: <link href=”https://fonts.googleapis.com/css?family= Spartan:300&display=swap” rel=”stylesheet”> questa linea va messa in <head> . Sotto troverete il codice per richiamarlo. es. font-family: Spartan ; lo potete inserire nell’esempio che ho messo sotto al posto della linea font-style:italic;
<html>
<head>
<title>Webpage di stile</title>
<style type="text/css">
.bold {
font-weight: bold;
}
.italic {
font-style:italic;
}
.underlined {
text-decoration: underline;
}
a {
text-decoration:none;
}
a:hover {
text-decoration:underline;
color:green;
}
.big {
font-size: 200%
}
</style>
</head>
<body>
<p class="bold">This is some bold text!</p>
<p class="italic">This is some italic text! <span class="bold">And this is bold and italic.</span></p>
<p class="underlined">This text is underlined!</p>
<a href="">This is a non-underlined link</a>
<p class="big">This text is BIG!</p<
</body>
</html>
Allineamento del testo
Di seguito metto un es. su come allineare il testo.
<html>
<head>
<title>;Webpage With Style</title>
<style type="text/css">
p {
text-align:right;
}
div {
width:300px;
background-color:green;
}
.centered {
text-align: center;
}
.justified {
text-align: justify;
}
</style>
</head>
<body>
<div>
<p>Questo testo è a destre</p>
<p class="centered">Questo testo è centrato</p>
<p class="justified">Nei primi tredici anni del suo impero il giovane imperatore dovette affrontare due guerre civili, causate - come testimonia Michele Psello nelle sue cronache - dai generali Barda Sclero e Barda Foca, che lo ritenevano troppo giovane per governare l'Impero. Una volta sconfitti i due generali ribelli, Basilio II conseguì notevoli risultati in ambito militare conquistando</p>
</div>
</body>
</html>
I Link
Vediamo come possiamo dare dello stile a dei link.
<html>
<head>
<title>Webpage With Style</title>
<style type="text/css">
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color:green;
}
</style>
</head>
<body>
<div>
<p><a href="http://www.google.com">Google</a></p>
<p><a href="http://www.google.it" target="_blank">Google in a new tab</a></p>
</div>
</body>
</html>
Nel codice si sono quattro novità.
- text-decoration: none; Toglie il testo sottolineato che è standard nei link
- a:hover Hover è una pseudo classe che vuol dire quando il mouse va sopra alla linea text-decoration: underline; viene sottolineata
- a:visited visited è una speudo classe che vuol dire che quando un link è stato visitato color:green; cambia il colore in verde
- target=”_blank” se vogliamo che quando si clicca sul link si apra una pagina nuova
Se volete approfondire tutti gli argomenti fin qui trattati basta cercare su internet e troverete tutto.
Costruire un sito Web 6 – CSS – Parte 4
Oggi parliamo di Margin, Padding e Border.
Margin
Margin serve per dare un margine tutto intorno a una fotografia piuttosto che a un paragrafo ect. Se noi scriviamo Margin:100px; vuol dire che metteremo 100px tutto intorno all’oggetto. Possiamo anche decidere di fare dei margini diversi. Se invece di un varolo ne mettiamo due Margin:100px 50px; metterono 100px sopra e sotto e 50px a destra e sinistra. Volendo possiamo anche cambiare il margine per ogni lato Margin:100px 50px 20px 40px; in questo caso avremo 100px sopra, 50px a destra, 20px sotto e 40px a sinistra del nostro oggetto. Esiste un’altro modo per dare margine.
- margin-top:100px;
- margin-left:50px;
- margin-bottom:20px;
- margin-right:40px;
In questo modo se lo desideriamo possiamo avere i margini dove vogliamo in modo più leggibile.
Padding
Il Padding funzione allo stesso modo di margin. La differenza sostanziale è che mentre margine da del margine intorno all’oggetto, padding da margine all’interno dell’oggetto stesso.
<html>
<head>
<title>Pagina web con CSS</title>
<style type=”text/css”>
.secondo {
color:pink;
background-color:#000080;
width:200px;
float:left;
text-align: justify;
position:relative;
padding:50px ;}
</style>
</head>
<body>
<p class=”secondo”>Nei primi tredici anni del suo impero il giovane imperatore dovette affrontare due guerre civili, causate – come testimonia Michele Psello nelle sue cronache – dai generali Barda Sclero e Barda Foca, che lo ritenevano troppo giovane per governare l’Impero.</p>
</body>
</html>
Il risultato.
Come vedete tutto intorno al testo abbiamo del margine. Senza padding il risultato è questo:
Border
Border si utilizza per dare uno stile al bordo dell’oggetto. Es:
<html>
<head>
<title>Webpage With Style </title>
<style type="text/css">
#quadrato-red {
background-color:red;
border: 10px yellow solid;
}
#quadrato-blue {
background-color:blue;
border-style: ridge solid dotted dashed;
border-color: green beige pink palegoldenrod;
border-width: 10px 5px 2px 1px;
}
#quadrato-green {
background-color:green;
border-radius:50%;
}
.quadrato{
width:400px;
height:400px;
margin:40px;
float:left;
}
</style>
</head>
<body>
<div id="quadrato-red" class="quadrato"> </div>
<div id="quadrato-blue" class="quadrato"> </div>
<div id="quadrato-green" class="quadrato"> </div>
</body>
</html>
Potete copiare il codice e vedere quello che fa. Col border bisogna specificare tre valore; la grandezza del bordo il colore e lo stile. border: 10px yellow solid;
- border-style:ridge solid dotted dashed; si da uno stile diverso per ogni bordo
- border-color: green beige pink palegoldenrod; si da un colore diverso per ogni bordo
- border-width: 10px 5px 2px 1px; si da una grandezza diversa per ogni bordo
- border-radius:50%; per creare dei cerchi o se utilizzate px anche bordi arrotondati
Se volete approfondire tutti gli argomenti fin qui trattati basta cercare su internet e troverete tutto.
Costruire un sito Web 5 – CSS – Parte 3
Questa lezione vediamo come dare stile a un gruppo di tag, vediamo come gestire i colori per tutti i browser e per ultimo vedremo come posizionare gli elementi in una pagina.
I Divs
Nella lezione precedente abbiamo visto come dare stile ai tag. Il problema era che dovevo utilizzare le classi per ogni linea di codice. Se invece volessi dare lo stesso stile a più tag si utilizza <div></div>.
<html>
<head>
<title>Pagina web con CSS</title>
<style type=”text/css”>
.blue {
color:blue
background-color:pink;
text-align: justify;}
<!– con text-align: justify; si giustifica il testo background-color:pink; si il colore allo sfondo–>
</style>
<body>
<h1>Titolo</h1>
<!– con div tutto quello che sta all’interno viene modificato –>
<div class=”blue”>
<p>Nei primi tredici anni del suo impero il giovane imperatore dovette affrontare due guerre civili, causate – come testimonia Michele Psello nelle sue cronache – dai generali Barda Sclero e Barda Foca, che lo ritenevano troppo giovane per governare l’Impero. Una volta sconfitti i due generali ribelli, Basilio II conseguì notevoli risultati in ambito militare conquistando</p>
<p>Nei primi tredici anni del suo impero il giovane imperatore dovette affrontare due guerre civili, causate – come testimonia Michele Psello nelle sue cronache – dai generali Barda Sclero e Barda Foca, che lo ritenevano troppo giovane per governare l’Impero. </p>
</div>
Tutto molto semplice e veloce. Se noi creiamo molte classi con specifiche diverse all’inizio del codice, quando avremo bisogno di dare uno stile particolare non dovremo far altro che richiamarlo tutte le volte che vogliamo, vi ricordo che si posso usare più stili in una class.
I colori
Come avete visto i colori si possono inserire come parola in inglese, Blue=Blue, Rosa=Pink, Verde=green ect. ect. L’unico inconveniente che possiamo incorrere ad utilizzare il colori in questo modo è che ogni browser può decifrarli in modo diverso. Se vogliamo che i colori siamo uguali in tutti i browser dobbiamo utilizzare i colori in formato esadecimale. Basta cercare in rete. Vi metto due link HTML Color Codes e Htmlcolorcodes.
- Il rosso Color:#FF0000;
- Il Blu Color:#0000FF;
- Il nero Color:#000000;
- Il verde Color:#008000;
- Il bianco Color:#FFFFFF;
Se poi vedere un colore particolare in un sito e vi piace ma non sapete come trovare il codice esadecimale, potete installare un’estensione di Crome. Dopo averla installata vi troverete il simbolo del contagocce. Basta andare sopra al colore che volete replicare che vi restituirà il codice esadecimale di quel colore. L’estensione di Crome si chiama ColorZilla
Il posizionamento
Fino a desso abbiamo visto che come creare paragrafi e come dargli dello stile. Per poterli posizionare in una determinata posizione dello schermo si utilizza il comando float:
div #myDIV {
width:100px;
background-color:red;
float:left;
}
In questo modo il nostro paragrafo si posizionerà a sinistra. Ho introdotto un nuovo comando width. Nell’esempio sopra scrivendo width:100px; vuol dire che tutto il paragrafo sarà contenuto in 100 pixel col colore di ù
sfondo rosso e a sinistra. Per posizionarlo a destra si utilizza right.
Se invece non volessimo utilizzare il float si può posizionare il paragrafi in un’altro modo. Utilizzando l’elemento position.
div .relative {
position:relative;
left:30px;
}
L’esempio sopra vuol dire che do una posizione relativa e da quella mi sposto a sinistra di 30 pixel. Cosa cosa vuol dire posizione relativa?
Praticamente utilizzando relative diciamo al browser che sposteremo un paragrafo dalla posizione originaria. Si possono utilizzare anche valori negativi -50px. Per spostarsi in alto o in basso si utilizza l’elemento top: +o-px;
div .basso {
position:relative;
top:10px;
}
div .alto {
position:relative;
top:-10px;
}
Ci altre due posizione che vi voglio spiegare. Fixed e absolute. Con position:absolute; quando vogliamo spostare un elemento il calcolo dei pixel verà calcolato da in alto a sinistra. Con position:fixed; il nostro elemento rimarrà fissato in quella posizione anche quando andremo a scorrere la pagina. Molto utile se voglio che il menù si sempre visibile nella pagina.
Costruire un sito Web 4 – CSS – Parte 2
CLASSI e ID
Nel precedente articolo vi avevo parlato del CSS inline. Adesso cominciamo a vedere il CSS interno. Col CSS interno si può da stile a tutto quello che si vuole, vediamo come si fa.
All’interno del tag <head></head> si deve specificare che tutto quello che si scriverà sarà CSS. Si utilizza il tag <style></style> ma non basta bisogna specificare anche il tipo. Perciò <style type=”text/css”> </style>. In questo modo diciamo a HTML che tutto quello che scriviamo all’interno del tag <style> è CSS. Se voglia dare dello stile a tutti i paragrafi e cioè <p></p> basta aggiungere la p seguita dalle parentesi graffe. E tutto quello che scriviamo all’interno delle parentesi graffe di p mi darà stile a tutti i <p>. Di conseguenza se volessi cambiare lo stile al tag <h1> si procede come abbiamo fatto con <p>. La procedura è uguale per tutti i tag. La cosa importante che alla fine di ogni linea di comando è mettere il ;.
In questo modo noi possiamo dare stile uguale ad es. a tutti i paragrafi. Ma come faccio se ho più paragrafi e voglio cambiare stile a ogni paragrafo? Si devono usare le classi e gli ID.
<style type=”text/css”>
.size {
font-size:200%;
}</style>
</head>
<body>
<h1 class=”size”>Titolo</h1>
Praticamente noi creiamo una class dandogli il nome che vogliamo in questo esempio size. Per poterla richiamare dovremo utilizzare il punto davanti al nome .size, in questo modo noi possiamo utilizzare la class size in tutti i tag che vogliamo e dare lo stesso stile a tutti i tag, dove la utilizziamo in questo esempio utilizzando font-size:200% il testo sarà il 200% più grande dell’originale. Possiamo anche utilizzare più classi in un tag. Se noi avessimo delle classi che si chiamano size e font li potremo richiamare mettendoli all’interno delle virgolette distanziati dallo spazio. Es. <h1 class=”size font”>Titolo</h1> in questo modo utilizzeremo due classi. Per quanto riguarda gli ID la struttura è identica, l’unica differenza sarà che per richiamarli non si utilizzerà il punto ma bensì il #. E al posto di class si utilizza id.
<style type=”text/css”>
#size {
font-size:200%;
}</style>
</head>
<body>
<h1 id=”size”>Titolo</h1>
La domanda sporge spontanea, ma se sono uguali perché utilizzare sia le classi che gli id? Le classi servono per definire una tipologia di elementi, cioè per attribuire uno scopo e/o una presentazione ad un sottoinsieme di elementi con caratteristiche e funzionalità comuni di una pagina HTML. Gli id servono per definire un elemento unico in una pagina, con un unico e preciso scopo, nella maggior parte dei casi tale scopo è determinare una sezione in una pagina HTML. In sostanza, quando sappiamo che un elemento sarà unico useremo un id. Negli altri casi, se non disponiamo di alternative (come ad esempio il selettore discendente) possiamo usare una classe.
Costruire un sito Web 3 – CSS – Parte 1
CSS – Parte 1
Qui cominciamo a vedere il CSS che serve per mettere più stile alla nostra pagina web. Se non avete visto gli altri articoli dove parlo del HTML vi invito a farlo cliccando HTML parte 1, HTML parte 2.
Ci sono due metodi per inserire del CSS nel HTML. Il metodo inline e interno. Oggi vediamo molto brevemente il metodo inline.
Se volessimo dare del colore e delle dimensione al nostro testo si utilizza il comando color: e font-size:. Come si vede dopo il comando ci vanno i : e alla fine ci va il ; . ES: <h1 style=”color:green;font-size:50%;”>Titolo</h1> . Per far riconoscere il CSS bisogna iniziare con style= e deve essere contenuto tra ” “. Col comando color: si da il colore e basta mettere il nome del colore in inglese, comunque la gestioni dei colori la approfondiremo nelle prossime lezioni. Mentre con font-size: si mette una percentuale, in questo caso il carattere sarà il 50% più grande dell’originale. Con questo metodo si possono utilizzare tutti i comandi CSS, ma capite bene che se dovessimo inserire per ogni linea di HTML il CSS sarebbe lunghissimo da fare. Per questo ci viene in soccorso il metodo interno che ci permetterà di poter raggruppare più linee e codice.
Costruire un sito Web 2 – HTML – Parte 2
HTML
Come annunciato nell’articolo precedente parliamo di Form e Tabelle.
Form
Il form è una pagina dove l’utente può interagire, dando o chiedendo delle informazioni. Es. quando dobbiamo accedere in un sito web dobbiamo inserire le nostri credenziali, Username e Password.
Si utilizza il tag <input> e per dargli una tipologia di dati, che vanno inseriti si utilizza l’attributo type. Nell’esempio utilizzo il type=”text” per definire che sarà un imput di tipo testo, mentre nella linea sotto utilizzo il type=”password”. In questo modo quando digitalizzo la password si vedranno dei punti al posto dei carattere premuti. Nella terza linea utilizzo il type=”checkbox” per dare all’utente una scelta, in questo caso se rimanere loggato o no. Infine col type=”submit” si crea un pulsante per la conferma della fine dell’inserimento del form. Trovate anche l’attributo placeholder che è praticamente un segnaposto. Quando si andrà a inserire Username o Password la scritta sparirà e riapparirà quando il form è vuoto. Mentre l’attributo value si utilizza per cambiare la scritta sul pulsante. La scritta di defult è Submit o Invia a seconda della lingua che utilizzate, inglese o italiano.
Abbiamo l’attributo radio. Che viene utilizzato per far fare una scelta tra molte opzione.
Qui troviamo due nuovi attributi. Name e values. Name serve per poter “legare” le scelte. Per far questo gli diamo lo stesso nome. Cosi facendo l’utente dovrà scegliere tra le due opzioni. Se non avessimo utilizzato l’attributo name l’operatore avrebbe potuto scegliere tutte e due le opzione. Values serve per dare un valore alla scelta che si fa. Perciò se si sceglie, Ho più di 18 anni, avremo come valore di ritorno “a18”. Comunque per la gestione values si vedrà più avanti.
Infine nel form potremo creare una scelta a tendina.
Si utilizza il tag <select> </select> e il tag <option></option> per definire le opzioni di scelta.
Se volete approfondire gli attributi del tag <input> potete cliccare qui.
Le Tabelle 
Le tabelle servono per mostrare in modo ordinato dei dati, (tipo excel). Tutto quello che si trova tra il tag <table>….</table> fa parte della tabella. Per il titolo si utilizza <thead></thead>. Come si vede nell’esempio si procede con <tr></tr> al suo interno il titolo con <th>Cognome</th>. Se il titolo fosse composto da più parola si utilizza <br> per andare a capo. es. <th>Numero<br>civico</th>.
Mentre il corpo dei dati della tabella deve essere all’interno del tag <tbody></tbody>. Ogni linea di dato sta all’interno di <tr></tr> per poi ogni campo all’interno del tag <td>Rossi</td>.
Inserire contenuti di altri siti web nella tua pagina
Se si volesse inserire per esempio un video di Youtube o altre pagine web, si utilizza il tag <iframe></iframe>. Si possono dare le dimensione di quello che volete includere. Se volessi includere la pagina di Wikipedia scriverei : <iframe width=”560″ height=”315″ src=”https://it.wikipedia.org/wiki/Pagina_principale” frameborder=”0″ </iframe> . Nell’esempio trovo degli attributi width che è la lunghezza in pixel mentre height è l’altezza. Abbiamo src= dove si inserisce l’Url. Mentre frameborder serve per mettere o meno il bordo, i valori sono 0 (zero) e 1.
Nella prossima parte comincerò a parlare di CSS
Se volete approfondire meglio HTML potete cercare su internet.
Costruire un sito Web 1 – HTML – Parte 1
HTML
Metterò i comandi (Tag) più usati per la costruzione di una pagina web. Per prima cosa ci vuole un buon editor. Io uso Notepad++.
L’HTML ha uno schema iniziale da rispettare.
Come si vede un tag è composto da < >. Se fate caso, quando si apre un tag es. <html> si deve chiudere con / es. </html>. Come vedete tutti hanno un’apertura e una chiusura. Perciò tutto il linguaggio html deve essere scritto tra <html> e </html>. Poi si mette <head>… </head> qui ci si mette prevalentemente il titolo. Invece in <body>..</body> tutto il resto del codice.
Adesso vediamo altri tag. Cominciamo col titolo. <title>La mia prima pagina Web</title>. Tutto quello che viene scritto tra il tag <title> sarà il titolo della scheda del Browser.
Qui a sinistra avete tre modi in cui si può scrivere del testo. Nel primo caso non ho utilizzato nessun tag e anche se vado a capo, il browser non l’ho riconosce. Perchè come vedete nella figura sopra mette le due righe a fianco. Per poter andare a capo ci sono due modi. Il primo è quello di utilizzare il tag <p></p> che sarebbe un paragrafo, e utilizzerei due paragrafi uno per ogni riga. Nel secondo caso utilizzo un solo tag <p></p> e dove voglio andare a capo utilizzo il tag <br> che come vedete non ha bisogno del tag di chiusura. Si chiama tag autochiudente. L’unica differenza tra le due modalità per andare a capo sono gli spazi tra una riga e l’altra.
Adesso vi metto degli esempi di formattazione del testo.
Infine abbiamo il tag <h1></h1> che viene utilizzato come titolo e per questo è utile per il SEO per il semplice fatto che viene indicizzato da Google. Da questo tag ne esistono 6 tipi.
Merita un discorso a parte la lista non ordinata e quella ordinata.
Per poter fare una lista non ordinata si utilizza il tag <ul></ul> e al suo interno per ogni lista si utilizza <li></li>
Mentre per le liste ordinate si usa il tag <ol></ol> e al suo interno per ogni lista si utilizza <li></li>
Volendo le liste si possono far partite da un numero prestabilito. Non necessariamente devono partire da 1. Se nel tag di apertura scrivo <ol start=10> ……. </ol> il primo numero della lista sarà 10 poi 11 ect. Inserendo nel tag reversed, cioè <ol reversed> ……… </ol> la numerazione sarà decrescente.
Utilizzando la lista type possiamo scegliere tra 5 modi diversi lista. Scrivendo <ol type=”a”>……</ol> la numerazione sarà alfabetica. Le altre numerazioni sono “1”,”i”,”I”,”a” e “A”.
Per quanto riguarda la formattazione del testo in HTML per il momento è tutto. Adesso vediamo come inserire delle immagine in un sito web. Prima di tutto consiglio di copiarsi le immagini nella cartella del sito web. Perchè si possono fare dei collegamenti con altri siti web, il problema è che non ne abbiamo il controllo, per il semplice fatto che gli potrebbero cambiare percorso e non li troveremo più.
Si scrive <img src=”nomefile.estensione”> anche questo è un tag autochiudente. In questo modo l’immagine appare nel suo formato originale. Se volessimo ridurre o ingrandire l’immagine si utilizza width per la larghezza height per l’altezza. Scrivendo ad es. <img src=”nomefile.estensione” width=”100″ height =”130″> i numeri corrispondono ai pixel. Per finire si può decidere se mettere l’immagine a destra (right) o a sinistra (left) col comando align. Scrivendo es. <img src=”nomefile.estensione” width=”100″ height =”130″ align=right>
Mentre per visualizzare un’immagine che si trova in un’altro sito web.
<img src=https://upload.wikimedia.org/wikipedia/it/thumb/3/37/Marge_Simpson_in_A_proposito_di_Margie.png/120px-Marge_Simpson_in_A_proposito_di_Margie.png width=”100″ height =”150″ align=left>
Per concludere questa Parte con HTML, se si volesse scrivere dei commenti del codice si utilizza il tag <!– Qui si puo scrivere tutto quello che si vuole. –> Vedo che non si capisce come si scrive. Dopo <! ci sono due – come nella chiusura del tag.
Se proverete a scrivere in HTML vi accorgerete che graficamente non è bello. Per questo si utilizza il CSS che si utilizza insieme HTML. Con questo codice si potrà abbellire il tutto.
Nella prossima parte vi parlerò dei Form e delle Tabelle.
Se volete approfondire meglio HTML potete cercare su internet.
