fbpx

Google premia i siti di qualità e per poter raggiungere questo risultato è importante utilizzare un linguaggio Html corretto perché ti permette di ridurre tempo e di creare pagine leggere e veloci; questo farà si che successivamente ci saranno pochi problemi sia per te che l’hai sviluppato, sia per gli utenti che lo visiteranno. Vediamo perché. (altro…)

Quando progetti un sito web è utile aiutarsi con strumenti che permettono di facilitare il tuo lavoro. La creatività nel mondo del web design è illimitata ed ogni giorno, programmatori e designers,  sviluppano applicazioni utili per progettare un sito web.
Ne ho scoperti alcuni e li elenco qui sotto: potrebbero fare al caso tuo.

#1 – COLOR THIEF


Color Thief è un’ottimo strumento realizzato da Lokesh Dhakar, sviluppatore e designer, che permette di generare palette di colori da un’immagine grazie a Javascript. Sul sito dell’applicazione ci sono già degli esempi ma puoi anche tu caricare una tua immagine per vedere cosa succede. Si apre una sezione con il colore dominante e la palette degli altri colori. Davvero utile!

#2 – CURSOMIZER


Cursomizer è un bellissimo progetto sia nel design che nella interattività realizzato da KRIKDESIGN per stimolare i designer a creare cursori mouse custom e quindi creare nuove esperienze visuali con la possibilità di modificare forma, colore e effetto visuale, provare diverse opzioni, fare dei test e condividere con un link i lavori realizzati con i propri colleghi.

#3 – MOCKFLOW


Mockflow permette ai designer di trasformare velocemente la loro idea in un’interfaccia per gli utenti. È possibile accedere a varie opzioni sui modelli di grafica wireframe, mappa sito, specifiche del design, annotazioni su schermate e hosting sito. È possibile provarlo gratuitamente per vedere come funziona e dopo se ti piace puoi sottoscrivere un abbonamento ad un prezzo accessibile.

#4 – SIMPLE PARALLAX


Simple Parallax è una piccola libreria Javascript che ti permette di aggiungere animazioni parallasse, facilmente e velocemente alle immagini. E’ facile da utilizzare proprio perché l’effetto parallasse è applicato direttamente sul tag “img” dell’immagine.

#5 – BOORDS


Boords ti permette di creare bozzetti, elaborati e animazioni in un solo posto grazie all’animation tool che aggiunge dinamismo e grazie all’editore online permette di aggiungere del testo. È possibile aggiungere anche feedback dei clienti e narrazione fuori campo.

#6 – UX APP


Ux App è un utile strumento che aiuta i designer ad utilizzare e sperimentare prototipi interattivi per applicazioni desktop, mobile, app e siti web senza necessita di scrivere codice. Fornisce componenti html, javascript già pronti con la possibilità di modificarli, realizzando eventi custom, transizioni ed azioni o di esportare design come file png.

#7 – KEYNOTOPIA


Keynotopia rappresenta una collezione impressionante di più di 5000 immagini vettoriali libere che si basano su interfacce di siti web e componenti e più di 200 icone. Sono state create per lo più con Keynote e Power Point e possono essere modificate e custodite senza altri strumenti. Sono disponibili sia elementi singoli che pacchetti a partire da 39 dollari.

#8 – STENCIL


Questa collezione di stencil offre gadget molto belli ed unici e strumenti per designers per realizzare bozze, interfacce fatti in plastica traslucido; offre anche cornici con icone stampate al suo interno che supportano iphone, Android, Ipad e Siti web che possono essere disegnati su carta nella fase di progettazione di un sito web.
Interessante ed unico nel suo genere di prodotto offerto.

#9 – SVG FILTER


Svg Filter è un’applicazione creata dalla sviluppatrice russa Yoksel che ha pensato di creare qualcosa che permettesse di poter sperimentare i filtri SVG per l’immagine ed il testo. È possibile sperimentare gli effetti sia selezionando solo l’immagine o solo il testo che selezionando entrambi.

#10 – LUNR


Lunr è una libreria Javascript molto utile creata da Oliver Nightingale che permette di svolgere funzioni molto importanti all’interno di un testo come la ricerca del testo che può essere avanzata e personalizzata.

Ti piace la mia scelta? Sono sicura che nel tuo progetto di realizzazione del sito web troverai utile almeno uno di questi progetti che ho elencato perché ti faciliteranno il lavoro.
Buon lavoro!

Dove può spingersi il web? Non c’è limite alla creatività e questo articolo lo dimostra. Ecco la lista di 10 incredibili siti web da cui trarre ispirazione per diversi motivi: interattività, animazione, colori, suoni ed altro ancora. Sei a mare o sei seduta su una sdraio per rilassarti? Questo è l’articolo giusto per te perché si parla di un argomento leggerlo, bello ed entusiasmante. 

#1 – KOOK

Kook

KOOX è una specie di fast-food con chef della Michelin e artigiani del caffè che propongono del buon cibo e ottime ricette. Si tratta di un sito web molto fresco e pulito nei colori e nella grafica realizzato con la tecnica del parallasse che viene fuori scrollando la sezione del sito web sia per il testo che per le immagini. Queste ultime sono illustrazioni molto belle e al tempo stesso semplici. La particolarità di questo sito web è la pagina delle ricette dove per passare da una ricetta all’altra viene utilizzata la tecnica del drag and drops.

www.koox.co.uk

#2 – LOPESCE

Lopesce

Sito web di prodotti surgelati che utilizza la stessa tecnica del sito KOOX : illustrazioni e tecnica parallasse. I colori rispecchiano l’elemento del mare. Molto belli i colori utilizzati per passare da una sezione all’altra con effetto scrolling. Si tratta di un sito web ad una pagina molto semplice. Quando clicchi sul prodotto surgelato si crea un effetto slide che sposta il surgelato nella sezione di sinistra della pagina, mentre a destra si apre un box con gli ingredienti contenuti nella busta.

lopesce.com

#3 – NUCLEAR DISSENT

Nuclear Dissent

Sito web di tipo documentaristico che parla del dissenso nucleare e del disarmo di alcune aree. Il tutto nasce da una campagna internazionale che ha lo scopo di abolire le armi nucleari e di promuovere il bando nucleare globale. Si tratta di un’esperienza visiva ed uditiva molto forte con immagini e video straordinari.

nucleardissent.com

#4 – DRIP POP

Drip Pop

Sito web che colpisce tutti i sensi creando un’esperienza visiva e di colori molto bella e vivace agli occhi degli utenti, in particolare per l’interattività poiché ad ogni azione del mouse corrisponde una reazione con colori ed animazioni molto belle. Si tratta di un’azienda sudamericana che vende gelati ed utilizza ingredienti naturali per realizzare gelati dal gusto formidabile e sono prodotti realizzati a mano. Molto bella la pagina dei prodotti con i colori e la grafica a cui segue muovendo il mouse un’interattività ed animazione ancor più bella.

drippop.com

#5 – BAIBAKOV ART PROJECT

Baibakov Art Project

Sito web molto semplice e pulito di Baibakov, curatrice, editrice e filantropica che utilizza principalmente due colori: bianco e nero. Ciò che rende accattivante il sito web è la tecnica parallasse utilizzata nella home con un contrasto tra il colore, testo e l’animazione dell’immagine in background che crea delle forme particolare che si muovono al movimento del mouse. Per altri elementi come il logo ed il menù sono state utilizzate delle piccole animazioni molto semplici e belle.

http://www.baibakovartprojects.com/

#6 – TRUNK DUNK

Trunk Dunk

Trunk dunk è una birra indiana ed è raccontata molto bene nel sito web che utilizza l’illustrazione e l’animazione abbinata alla tecnica della parallasse che insieme ai colori e allo scrolling della pagina crea un’esperienza unica. Sito web ad una pagina molto esaustivo che contiene tutte le informazioni essenziali su questo prodotto.

https://www.trunkdunk.com/

#7 – BRAND STUDIO

Brand Studio

Sito web di uno studio creativo russo che è stato premiato da Awwwards e che utilizza suoni, animazioni ed illustrazioni che ne fanno un sito unico. Vi consiglio di alzare il volume del vostro computer per poter scoprire a pieno l’esperienza interattiva del sito. Il mouse nella homepage si trasforma in una mano vera e propria e nel caricamento della pagina compaiono 4 occhi che si muovono e che, una volta caricata la pagina, si trasformano in degli orologi. Cliccando su uno di quegli orologi si apre un’altra pagina molto bella, piena di animazioni, di suoni e musica con i volti dei protagonisti dello studio. Si apre un ulteriore pagina con altre animazioni ed informazioni aggiuntive come il telefono, l’email e la mappa. Nulla è scontato ma è tutto imprevedibile. Se cliccate sull’icona del telefono vi appare qualcosa che non vi aspetterete. Sito web molto molto creativo in ogni particolare.

https://www.brandstudio.ru/

#8 – FISH FINGER

Fishfinger

Anche Fishfinger è un’agenzia creativa che ha realizzato il sito web facendo dei suoi punti di forza i colori e le animazioni ed utilizzando la parafrasi di un pesce per realizzare delle storie incredibili. Specializzati nel branding, animazione e web design utilizzano esperienze digitali magiche e promettono di non essere noiosi e di creare qualcosa di indimenticabile.

https://www.fishfinger.me/

#9 – BUILD IN AMSTERDAM

Build In Amsterdam

Build in Amsterdam è un’agenzia creativa specializzata nella realizzazione di e-commerce. Sito web molto semplice e pulito con belle immagini fotografiche che utilizza per catturare il suo pubblico. Molto belle le animazioni e lo scrolling delle immagini. In particolare la presentazione dei casi-studio è fatta molto bene sia per l’utilizzo dei colori che per la combinazione delle immagini con il testo e lo scrolling delle varie sezioni. Anche il font è molto bello e rispecchia la pulizia e l’ordine del sito.

https://www.buildinamsterdam.com

#10 – AMAZONIA FONT

Amazonia Font

Questo sito web, Amazonia font è un font ispirato alla vita esotica della Foresta Amazzonica ed è molto bello perché vi è un alfabeto che è ispirato ad un animale dell’Amazzonia che è rappresentato da un’illustrazione ed il nome scritto con il font creato

Questo sito web è stato realizzato per pubblicizzare Amazonia font, un font ispirato alla vita esotica della Foresta Amazzonica ed è molto bello perché vi è un alfabeto che è ispirato ad un animale dell’Amazzonia che è rappresentato da un’illustrazione ed il cui nome è scritto con il font “Amazonia”.

https://www.amazoniafont.com

Hai preso spunto da uno di questi siti web? Quale ritieni più interessante? Perché? Scrivilo nei commenti.

Quanto costa un sito web? E’ difficile rispondere a questa domanda perchè le variabili che influiscono sulla progettazione e sulla realizzazione di un sito web sono numerose.
Questo è uno dei motivi per cui pochi esperti del web osano pubblicare un listino prezzi, ma farlo può essere anche un modo per targhetizzare i propri clienti sin dall’inizio e anche per motivi di chiarezza e coerenza: “ti dico sin dall’inizio quanto ti costa il mio servizio se mi scegli.”
Non tutti i web designer sono uguali: ognuno di noi ha un proprio background ( studi, esperienza ) ha una propria capacità e creatività che influiscono anche sul costo finale del servizio offerto.

Il rapporto qualità/quantità del servizio offerto influisce notevolmente sul costo finale.

Tutti possono realizzare un sito web anche a 100€ ed in un solo giorno, ma quanto durerà questo servizio e soprattutto che utilità avrà per il cliente? Nessuna! Posso mettere la mano sul fuoco che questo cliente dopo qualche mese cercherà un professionista più serio che gli proporrà ed offrirà un prodotto che duri nel tempo. Ma intanto il cliente ha speso e perso 100€ inutilmente!
Per questo, quando si decide di investire nel web, è bene pensare che spendere qualche euro in più in un prodotto valido che ti darà dei benefici del tempo e che ti ripagheranno dell’investimento fatto!
Il sito web non ha costo fisso perchè non vendo in questo caso una scarpa di una determinata marca, ma propongo un prodotto che come ho detto dipende da moltissime variabili.
Per questi motivi ho deciso di fare una cosa che anni fa era impensabile, ma che ora si sta diffondendo sempre di più in questo settore; ho deciso di mettere in chiaro e di pubblicare il listino prezzi dei miei servizi. Tieni presente che si tratta solo che il costo vero e proprio è stabilito solo dopo aver preso contatti con il cliente che dovrà accettare il preventivo per iscritto e dopo averlo filmato. Questi sono pressi calcolati in linea di massima. I parametri che utilizzo per creare il mio listino prezzi sono:

  • tipo di design richiesto
  • numero di pagine di un sito web;
  • elementi dinamici extra;

Il listino è stato realizzato per i 4 settori di servizi che offro: Sviluppo, Grafica, Seo & Smm e Stampa. Stai tranquillo, non sono una tuttologa, non faccio tutto io ma mi appoggio ad un team di collaboratori , oguno con le proprie competenze, che ho conosciuto durante la mia esperienza lavorativa e con cui ho mantenuto un’attività di collaborazione e di scambio.
Un’altra caratteristica dei servizi che offro che non è compresa nel costo del sito web, ed è la presenza in ogni mio progetto dell’ aroma del caffè: il gusto, il corpo ed il colore unico, un mix perfetto di elementi che rendono i miei progetti unici, seducenti ed accattivanti.
Se ritieni che il rapporto qualità/prezzo sia conveniente, contattami senza problemi per un preventivo gratuito ed un caffè. Offro io!
Ti chiedo solo di rispondermi una volta che ho definito e ti ho inviato il preventivo: “Si accetto”; “No grazie non mi interessa”. Perchè non c’è maleducazione più grande di una mancata risposta seppure negativa ma almeno una risposta educata.
Quante volte ti è successo? Non è piacevole, perchè ho comunque speso del tempo a calcolare il costo del sito web e quindi un NO grazie me lo merito! Cosa ne pensi in merito? Scrivilo nei commenti.

Vuoi realizzare un semplice effetto parallasse? Non c’è bisogno di utilizzare Jquery ma è sufficiente conoscere qualche regola css. L’effetto è ottimo e hai il vantaggio di non appesantire la pagina con con codice ulteriore.

Il segreto sta nell’aggiungere un’immagine in background in un contenitore con una altezza specifica e ben definita. Inoltre devi utilizzare la seguente regola css:

img{
background-attachments: fixed;
}

Questo serve per creare l’effetto parallasse che lascia l’immagine in background fissa, mentre permette di far scorrere le altre sezioni e le immagini al di sopra con velocità differenti.

Le altre proprietà sono usate per centrare e scalare le immagini perfettamente.

img {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

In questo esempio usiamo le percentuali e non i pixel in modo da impostare l’immagine esattamente uguale alla larghezza dello schermo e quindi impostiamo l’altezza del contenitore parallax al 100%.
Molto importante è applicare l’altezza pari al 100% sia al tagche al tag.

Il tag “background-attachment: fixed” crea alcuni problemi ad alcuni dispositivi mobili. Si può ovviare a questo utilizzando le media queries e disattivando l’effetto parallasse con la seguente proprietà:

@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “Come realizzare l’effetto parallasse con i Css”—

In questo video-tutorial vediamo un’altro modo di utilizzare l’effetto parallasse per creare un effetto scrolling pagina accattivante con gli oggetti e gli sfondi che fanno un’azione particolare. In questo articolo sono elencati tutti i tipi di plug-in che possiamo trovare ed utilizzare per creare effetti particolari.

Io ho scelto il plugin MultiScroll.js, realizzato da Alvaro Trigo, poiché crea un effetto di divisione della pagina verticale nello scrolling per passare da una sezione all’altra.

Con questo plugin è possibile modificare ed impostare diverse proprietà importanti come la velocità, il tipo di easing, le opzioni di scrolling della tastiera e molte altre proprietà in modo da poter customizzare l’effetto di cui si ha bisogno.

Ecco l’esempio creato dello sviluppatore del plug-in e che ho cercato di realizzare per voi nella risorsa che ho caricato sul mio blog.

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “Utilizza MultiScroll.js per realizzare un effetto scrolling accattivante”—

In questo video-tutorial ti spiego come realizzare un sito web più dinamico per attrarre maggiormente tuoi utenti. Con l’effetto parallasse crei maggior interesse per il tuo sito web perchè al movimento del mouse si muovono gli oggetti presenti sulla homepage. Quanto è noioso un sito web statico? Sono sufficienti alcuni semplici accorgimenti per vivacizzare e rendere più appetibile il tuo sito web. In questo primo video vi mostrerò come aggiungere movimento ad alcuni elementi della vostra home con l’effetto parallasse utilizzando un semplice plugin.
Il plugin Parallax.js che ho utilizzato nella mia risorsa e che potete scaricare nel link in fondo all’articolo, è stato realizzato da Matthew Wagerfield.

#1 – Scarica i file per il tuo progetto al seguente link e successivamente inserisci lo scrip nel foglio html:

<div id="scene”>
</div>

#2 – Crea i tuoi elementi html ed inseriscili nel codice html. Tieni conto che ogni istanza di Parallax ha bisogno di un elemento contenitore che chiamiamo scena. Puoi indicare il nome che vuoi:


<div id=""scene”"></div>

Tutti gli elementi figli della scena diventeranno oggetti in movimento e dei livelli indipendenti.

#3 – Inserisci l’opzione “data-depth” per definire il movimento e la profondità degli elementi. Questo elemento non deve mancare, altrimenti il plug-in non funziona.


<div id="scene”> <div data-depth=“0.2">Il mio primo livello</div>

<div data-depth="“0.6"">Il mio secondo livello</div>

#4 – Richiama il plugin nel foglio html:

var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);

Per capire come utilizzare le altre opzioni visita la pagina del produttore

Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “Parallax.js: aggiungi un tocco di vivacità al tuo sito web”—

La grande novità del 2018 è il rilascio di un Working Draft del W3C con nuove regole di Css4 che sono ancora in fase di discussione. Per cui prima che il Working Draft diventi Editor’s Draft, le cose potrebbero cambiare, ma credo che valga già la pena di introdurre il discorso che rivoluzionerà il codice Css ed Html. Rispetto al passato, le specifiche standard sono rilasciate in maniera più veloce e anche i browsers stessi, compreso Explorer, possono adottare più velocemente le nuove specifiche e funzionalità in modo da non dover aspettare molto a lungo per poter utilizzarle.
Prima di utilizzare puoi controllare lo stato di supporto attuale dei browser su Caniuse; noterai che molti selettori non sono ancora supportati, ma lo diventeranno ben presto.
La parte più importante dei selettori riguarda lo sviluppo dei form o moduli contatti che presentano tantissime novità.

Ecco i selettori CSS4 che possiamo utilizzare ora e che aggiungono più potere e più flessibilità al tuo lavoro e faccio un paragone tra il vecchio codice ed il nuovo.

SELETTORI CSS4

1# – Negation:
Questo selettore che si esprime con il :not è stato introdotto sin dai CSS3 ma adesso può accettare selettori multipli come un argomento, lasciando il nostro codice più leggibile e coinciso.

La sintassi attuale:

h1:not(.this-element):not (.another-element)
{
font-size: 1.2em
}

Nuova sintassi:

h1:not(.this-element, .another-element)
{
font-size:1.2em;
}

Questo elemento è supportato solo da Safari per ora.

#2 – Matches:

Questo elemento è l’opposto del precedente e può anche accettare selettori multipli come un argomento.
La nuova sintassi non cambia molto rispetto a quella precedente ma migliore in leggibilità.

La sintassi attuale:

h1.this-element,
h1.another-element
{
font-weight:bold;
}

Nuova sintassi:

h1:matches (.this-element, another-element)
{
font-weight:bold;
}

Questo elemento è supportato solo da tutti i Browsers

#3 – Relational

È possibile che questo elemento potrebbe non essere sviluppato a causa della sua complessità ad essere implementato.Questo elemento potrebbe permettere di dare uno stile ad un elemento in base ai suoi contenuti.

.container:has(.this-element)
{
background:green:
}

 

#4 – Drop

Questo selettore permette di aggiungere lo stile agli obiettivi di HTML5 drop. Lo stile può essere applicato se la parte da trascinare è valida, invalida o attiva.

.element:drop
{
border: 3px solid, background:grey
}
.element:drop(active)
{
border-color:blue;
}
.element:drop(valid)
{
border-color:green;
}
.element:drop(invalid)
{
border-color:red
}

#5 – Indeterminate

Associa elementi che sono in uno stato indeterminato. Checkboxes, radio button e progress bars possono essere in questo stato. Per esempio un checkbox genitore con 2 checkbox figli selezionati, può essere indeterminato. Questo può essere fatto solo in Javascript e non in HTML

input[type=“checkbox”]: indeterminate
{
opacity: 0.75
}

Questo selettore è supportato solo dai browser: Firefox, Chrome e Safari

#6 – Default

Associa elementi in default tra una serie di elementi simili, come per esempio l’evento selezionato in un elemento:

option:default
{
font-weight:bold;
}

Questo selettore è abbastanza supportato da tutti i Browsers.

#7 – Validity

Il selettore validity è utilizzato per gli elementi cha hanno uno stato di valido o invalido.

input:invalid
{
border:1px solid red;
}

input:valid
{
border:1px solid green;
}

Questo selettore è supportato da tutti i Browsers

#8 – Range

Il selettore Range applica agli elementi che hanno un limite di raggio come uno slide o un numero di input con valore massimo o minimo.

input: in-range.
{
background:green;
}
input:out-of-range
{
background:red:
}

Questo selettore è supportato da tutti i Browsers tranne Opera mini.

#9- Optionality

Questo selettore serve a chiarire quali elementi sono opzionali e quali invece sono richiesti in un form.

:required
{
border: 2px solid black
}
:optional
{
border:1px dashed grey;
}

#10 – User interaction

Questo selettore serve a creare lo stile ad un elemento invalido solo dopo che un elemento ha interagito con un’altro e non quando la pagina si carica. Questo è il caso di un campo di un modulo contatti che viene compilato in modo errato:

input: user-error
{
border:1px solid red;
}

#11 – Mutability

Questo elemento attribuisce uno stile al campo input o textarea che si basa solo sulla lettura o sulla scrittura:

textarea:read-only
{
color:grey;
}
tetarea: read-write
{
color: black;
}

#12 – Placeholder Shown

Questo selettore è abbastanza supportato dai Browser. Di solito gli elementi input di un form possono mostrare il testo segnaposto tramite click sul campo input. Ora invece possiamo dare lo stile a questi elementi che mostrano il testo segnaposto.

input:placeholder-shown {
border-color:blue;
}

#13 – Local Link

Questo selettore non è supportato da nessun browser. Il selettore Local link ti permette di creare stili diversi a link ( per esempio in un menù di navigazione

:local-link(0)
{
color: red;
}
:local-link(1)
{
color: green;
}

:local-link(2)
{
color: yellow;
}

#14 – Time Dimensional

Il funzionamento di questo selettore è simile a Matches( ) con la differenza che può selezionare l’elemento riferito ad un tempo che può essere corrente, passato e futuro. Questo selettore può risultare utile durante la visualizzazione di sottotitoli di un video HTML5.

:current(p, span) {
background-color: yellow;
}

:past(p, span),
:future(p, span) {
background-color: gray;
}

#15 – Hiperlink

Questo selettore associa tutti i link e sostituisce a:link e a:visited

:any-link{
text-decoration:underline;
}

Hai utilizzato questi selettori per i tuoi progetti? Se non l’hai ancora fatto, scarica gratuitamente la risorsa che ho creato per te ed utilizzala per i tuoi progetti.
Ti consiglio di visitare anche questo sito web per chiarire ulteriormente le tue idee e le possibilità di utilizzo dei selettori Css4.
Per scaricare la risorsa che ho creato per te, per favore inserisci nome ed email.
Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “15 nuovi selettori CSS4 per creare form d’impatto”—