Il CMS più usato al mondo ci dà la possibilità di creare di menu personalizzati e multipli a seconda del tema installato.

Per creare il nostro primo menù, dopo esserci loggati nella famosa dashboard (o bacheca) di Wp, selezioniamo dal menù principale (quello sulla sinistra) la sezione Aspetto. In questa sezione possiamo gestire tutti gli aspetti grafici del nostro sito, dalla installazione e gestione del tema grafico, alla gestione dei widget (cioè elementi configurabili e gestibili nelle varie parti del sito con un semplice drag&drop), sino all’editor di codice delle varie pagine del sito.

Nel nostro specifico caso selezioniamo la voce Menu appunto.

Se il menu non è già presente nell’interfaccia che vediamo di sopra, dovremo crearlo appositamente. Clicchiamo sul lik crea un nuovo menu. Scegliamo quindi il nome del menu e salviamolo (Creazione Menu). Ad esempio intitoliamolo Menu Prinicipale.

Ora che il menu è stato creato, possiamo precedere indicando se aggiungere automaticamente al menu tutte le nuove pagine che verranno create e se si tratta del menu primario superiore (quello principale che appare generalmente nella parte alta della pagina) oppure del menu secondario che può essere posizionato a seconda del tema nella sidebar di sinistra o sotto la testata del sito o ancora in un’altra colonna.

Possiamo creare quanti menù vogliamo e poi decidere se inserirli in una delle posizioni che ci vengono proposte (utilizzando la finestra Posizioni). Il numero delle posizioni in cui è possibile collocare il menu varia in base al tema che stiamo utilizzando. Ad esempio ci sono temi che consentono l’inserimento dei menu in una sola posizione e temi che prevedono anche tre/quattro posizioni in cui inserire un menu. È anche presente un widget, nativo di wordpress e quindi indipendente dal tema scelto, che consente di posizionare un menù in una delle aree widget disponibili.

Ora che il menu è stato creato, possiamo procedere con l’inserimento delle varie voci. Gli elementi di base che possiamo inserire sono: Pagine, Link o Categorie di Articoli. Come si vede nella schermata appena proposta questi tre elementi sono presenti a sinistra della schermata.

Possiamo trovare l’elemento che ci interessa, aggiungere il simbolo di spunta e premere il pulsante Aggiungi al menu. Le voci del menu saranno aggiunte in questo modo al box centrale (Struttura del menu). Poi attraverso il trascinamento della voce di menu, potremo riordinarle o scegliere se si tratta di voci principali o sottovoci. Per confermare le modifiche apportate e procedere al salvataggio e alla pubblicazione del menu non ci resta premere il pulsante Salva menu.

E così avremo creato il nostro primo menu di Wp visibile sulla nostra home page e sulle altre pagine del nostro sito.

The post Come creare un menu con WordPress appeared first on Matteo Bayre.

La griglia di immagini sarà responsive, cioè sarà in grado di adattarsi alle dimensioni dello schermo, e quindi sarà ottimizzata per i dispositivi mobili come tablet e smartphone.

La griglia

Impostiamo un file HTML 5 standard index.html (vedi qui come costruire una pagina) con una sezione  a tutto schermo e dei tag article con un id numerato.

<!DOCTYPE html>
<html lang="it" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

		<title>Portfolio</title>
		
		<link rel="stylesheet" type="text/css" href="css/stile.css" />
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
          <header>
              <h1>Pagina Portfolio</h1>
          </header>

          <section id="grid">
           <article id="01">

           </article><article id=“02”>
           
           </article>
          </section>
        </body>
</html>

Aggiungiamo per ogni article un collegamento, un’immagine, un titolo e una descrizione, che corrispenderà all’anteprima del lavoro del nostro portfolio.

<article id="01">
         <a href="#01"><img src="images/01.jpg" /></a>
         <div class="info">
         <div class="description">
            <h1>Primo lavoro</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in massa ultrices 
            diam lobortis convallis quis in risus. Phasellus a augue vitae sapien condimentum 
            condimentum quis at eros. In nisl lacus, pharetra nec commodo quis, accumsan ac sapien.</p>
         </div>
         </div>
</article>

Al solito creiamo le cartelle css, img e js rispettivamente per i fogli di stile, le immagini e il files javascript.

Il CSS

Creiamo ora il file css stile.css inserendo alcuni tag di reset  (una serie di regole css che portano alla stato standard le regole dei fogli di stile):

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

*, *:after, *:before { 

	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
}
body, html { 
	font-size: 100%; 
	padding: 0; margin: 0;
}


body {
	font-family: Arial, sans-serif;
	color: #000;
	background: #B8DDE3;
}

a {
	color: #;
	text-decoration: none;
}
h1{
color:#000;	
}

Formattiamo poi lo stile generale per creare una griglia centrata con una larghezza e una posizione relativa. Stilizziamo article affiancando i box con display: inline-block, con larghezza 50% (per renderli adattabili alla dimensione dello schermo del browser), e impostiamo un allineamento verticale al margine superiore. Le immagini all’interno di article avranno poi una larghezza al 100%. Le immagini all’interno degli articoli avranno un’ombra impostata col box-shadow CSS 3.

section {
     max-width: 1000px;
     margin: 0 auto;
     overflow: hidden;
     position: relative;
     padding: 10px 0px 0px 10px;
   }

section article {
     vertical-align:top;
     display: inline-block;
     width:50%;
     margin-bottom:-5px;
}

section img {
    width:100%;
    height:auto;
    padding:0px;
     border:1px solid #000;
      -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
{

Impostiamo il box delle informazioni del progetto che mostrerà le info sotto il box immagine una volta cliccata l’immagine. L’elemento fondamentale di questa griglia immagini che ci permette di cliccare sulla thumbnail e di visualizzare le informazioni nel box posto sotto l’immagine senza dover usare il codice jQuery è il selettore :target.

La sezione info è quella che dobbiamo visualizzare al click dell’immagine per cui allo stato di partenza dobbiamo nasconderla con la proprietà opacity:0.

Sfruttando il selettore :target possiamo rivelare l’informazione impostando un’altezza auto e una opacità pari a 1. Questo ci permette di visualizzare il box delle informazioni al momento del click.

Coi selettori nth-child invece possiamo selezionare le informazioni numero 1 di ogni 2 e le informazioni numero 2 di ogni 2; però, mentre la prima va bene così come è posizionata, la seconda deve essere spostata a sinistra aggiungendo un valore di -100%.

Per selezionare la quarta informazione di ogni 4 usiamo sempre il selettore nth-child. La prima rimane a un valore di 0, la seconda a un valore di -109%, la terza a un valore di -218%, la quarta -327%.

Infine evidenziamo il box al quale si riferisce l’informazione:

section .info {
      width: 180%;
      padding: 2em 0;
      margin: 0;
      position: relative;
      float: left;
      opacity: 1;
      height: 0;
      font-size: 0;
    }

    section .info h1 {
      margin-bottom: .5em;
	  color:#000;
    }
    section .info p {
      margin-bottom: 2em;
      line-height: 140%;
	  color:#000;
    }
    
    
    section .info .maggioriInfo {
      display: block;
	  margin-left:10px;
      margin-top: 0em;
      padding: .4em;
      background:#4C9ED9;
      color: white;
      text-decoration: none;
      text-transform: uppercase;
      text-align: center;
      font-size: 1em;
       -webkit-transition: 0.5s background-color;
       -moz-transition: 0.5s background-color;
       -ms-transition: 0.5s background-color;
       -o-transition: 0.5s background-color;
       transition: 0.5s background-color;
}
 
    section .info .maggioriInfo:hover {
      background-color: #000;
    }

     article:nth-child(2n+1) .info {
      left: 0;
    }
    article:nth-child(2n+2) .info {
      left: -100%;
    }

    section article:target .info {
      height: auto;
      font-size: 100%;
      opacity: 1;
      -webkit-transition: .4s .4s opacity;
    }

    section article:target img {
     border: 3px solid #4C9ED9; 
      -webkit-transition: .5s;
	  -moz-transition: .5s;
	  -o-transition: .5s;
    }


    section article:nth-child(4n+1) .info {
      left: 0;
    }
    section article:nth-child(4n+2) .info {
      left: -109%;
    }
    section article:nth-child(4n+3) .info {
      left: -218%;
    }
	section article:nth-child(4n+4) .info {
      left: -327%;
    }

Alla fine del foglio di stile inseriamo le regole valide per le risoluzioni di schermo differenti dal classico desktop attraverso le media queries. In questo caso  @media only screen and (min-width: 701px) determinerà le regole per le risoluzioni maggiori di 701px di larghezza , mentre @media only screen and (max-width: 700px) determinerà le regole per le risoluzioni inferiori a 700px di larghezza.

Selezioniamo quindi le nostre immagini e inseriamo le informazioni per ogni progetto. E abbiamo realizzato il nostro portfolio responsive! Qui trovi l’esempio online.

Qui puoi trovare i files d’esempio della pagina portfolio. (zip)

The post Come creare un pagina portfolio in HTML 5 appeared first on Matteo Bayre.

Se abbiamo la necessità di aggiungere e visualizzare su un nostro articolo o pagina un’immagine (ad esempio un jpg), un documento (ad esempio un pdf), o un file di archivo (ad esempio zip), Wp ci fornisce uno strumento semplice e pratico.

Il file multimediale si può infatti inserire sia dall’interfaccia per la creazione/modifica di un articolo o pagina, sia dalla sezione Media (raggiungibile dalla Dashboard) dove sono presenti tutti i file multimediali del sistema.

Questo sistema infatti consente di aggiungere ad esempio una foto in un articolo e di renderla, contemporaneamente, disponibile per altri articoli o pagine. Se inseriamo una foto direttamente dalla schermata “Aggiungi nuovo articolo” verrà comunque salvata e mostrata nella schermata Media.

Gli elementi multimedia della nostra libreria sono visualizzabili nell’interfaccia Media come elenco con tanto di dettagli:

In maniera analoga a quella degli articoli, da questa schermata possiamo eliminare o modificare un contenuto multimediale precedentemente caricato. Se vogliamo aggiungere un nuovo contenuto, possiamo premere il pulsante “Aggiungi nuovo” presente nella sidebar di sinistra.

Ora premiamo il pulsante “Selezionare i file” e cerchiamo il file da caricare direttamente nelle cartelle del nostro computer.

Selezioniamo il file e premiamo Apri.

Il file selezionato dal nostro Sistema Operativo sarà perciò caricato sul server attraverso la libreria Media di WordPress e sarà a disposizione per l’inserimento all’interno di un articolo o di una pagina. Se tentiamo di aggiungere un file media direttamente dalla creazione di un articolo, la libreria Media di Wp ci consentirà di aggiugere il file nello stesso articolo (o pagina) attraverso il bottone azzurro “Inserisci nell’articolo“.

Se stiamo caricando un’immagine potremo poi scegliere il suo allineamento (nessuno, a sinistra, a destra o centrato); la tipologia di link annesso all’immagine, la dimensione della stessa e l’attributo alt. Per tutti i file media potremo anche selezionare il Titolo, la Didascalia, la Descrizione, per agevolare l’indicizzazione sui motori di ricerca dell’oggetto multimediale.

Gallerie

La libreria Media di Wp ci consente inoltre di creare delle gallerie di immagini. Al momento dell’inserimento delle immagini (come descritto sopra), selezioniamo “Crea Galleria” dal menu di sinistra. La selezione delle immagini può avvenire sia caricandole dal nostro Pc sia scegliendole direttamente dalla libreria di Wp.

Selezioniamo poi le immagini che verranno incluse nella galleria. E clicchiamo su “Crea una nuova Galleria“.

Nell’interfaccia delle specifiche della Galleria possiamo scegliere l’ordine delle immagini, il link associati alle immagini, il numero di colonne, o un ordine casuale. Fatte le nostre selezioni clicchiamo su “Inserisci galleria”, per inserirla nel nostro articolo o pagina.  L’aspetto grafico della Galleria poi dipenderà dal nostro tema Wp e dai plugin Gallery installati.

The post Come aggiungere un file media su WordPress appeared first on Matteo Bayre.

Per cominciare vediamo che cosa è il linguaggio HTML.

L’HyperText Markup Language è un linguaggio di markup per documenti ipertestuali. È un linguaggio di pubblico dominio, la cui sintassi è stabilita dal World Wide Web Consortium (W3C). E’ la struttura portante di ogni sito web che vediamo sui nostri browser. Oggi la versione standard è l’HTML 5.

Il linguaggio di struttura HTML, che è utile per costruire siti o applicazioni web, è costituito principalmente dei cosiddetti tag: elementi racchiusi tra i simoboli <> che hanno delle caratteristiche diverse sia per il nome, funzione e scopo semantico. Per scrivere una qualsiasi pagina in HTML possiamo utilizzare un qualsiasi editor di testo come il Blocco Note di Windows o il TextEdit per Mac.

Creiamo la struttura base

Per fare in modo che il codice che andremo ad inserire nel file sia compreso dal browser, dovremo per prima cosa creare un file di testo con estensione .html. Per costruire il nostro primo sito web, quindi, creiamo un nuovo file vuoto con l’editor di testo e salviamo col nome di index.html all’intero di una nuova cartella che chiameremo “Il mio primo sito web”. All’interno della stessa cartella creaimo le sottocartelle “img” (per inserire le immagini del nostro sito), “css” (per i fogli di stile) che vedremo in seguito.

All’interno di questo file potrai inserire un gran numero di elementi (tag) ma l’elemento radice, dovrà essere l’elemento <html>:

<html>
 <head>
   <title>Titolo della pagina</title>
 </head>
 <body>
   Contenuto Pagina
 </body>
</html>

Il tag principale è <html> che contiene direttamente altri due tag: <head> e <body>. Il tag <head> definisce la parte logistica e di servizio della pagina. All’interno di questa parte del file inseriremo infatti il titolo della pagina con il tag <title>, ma anche altri elementi (principalmente codice per il funzionamento: css, javascript e tag meta, feed rss) che andranno a costruire altri aspetti della pagina in HTML 5. E’ la parte che verrà letta per prima dal browser che legge tutte le pagina dall’alto verso il basso. Il tag per definirsi funzionante deve essere chiuso così </head>.

Successivamente abbiamo l’elemento <body>, il corpo della pagina, che contiene tutti gli elementi da visualizzare all’interno della pagina. Anche questo tag deve essere chiuso, come il tag principale del documento.

All’interno del tag <body> possiamo già inserire un numero quasi infinito di tag: <header>, <nav>, <audio> e <video> introdotti in HTML5, oppure i classici <div> o <p>.

Per costruire la pagina quindi andiamo a inserire i tag strutturali (questi hanno un significato ben preciso soprattutto per essere compresi dai motori di ricerca):

• <header> e <footer> :  sono i tag che definiscono all’interno del <body> la testata e il piè di pagina (dell’intera pagina o di una singola sezione e possono essere ripetuti nella pagina);
• <section> : identifica invece una sezione del documento e può contenere al suo interno <header> e <footer>;
• <nav> : identifica il menu della pagina e può essere ripetuto, meglio non abusare perché è un elemento che interessa molto i motori di ricerca;
• <aside> : identifica la classica barra laterale e serve per differenziare del contenuto non correlato alla pagina stessa.

Nelle vecchie versioni del linguaggio HTML i tag che identificavano la struttura della pagina erano principalmente i <div>. Con HTML 5 sono stati adottati dei tag che hanno valore semantico per i motori di ricerca, in modo da identificare in modo univoco le varie parti del sito.

<!DOCTYPE html>
<html lang="it">
 <head>
  <meta charset="utf-8">
  <title>Titolo pagina sito web</title>
  <link href="css/stile.css" rel="stylesheet">
 </head>

 <body>
 <header> 
   <h1>Il nome del mio sito</h1>
     <h2>un eventuale sottotitolo</h2>
  </header>
  
  <nav>
     <ul>
          <li><a href=”#”>link1</a></li>
          <li><a href=”#”>link2</a></li>
          <li><a href=”#”>link3</a></li>
     </ul>
   </nav>

  <section>
   <header></header>

   <article> </article>
   
   <footer></footer>
  </section>

  <aside>
  </aside>
  
  <footer>
  </footer>

 </body>

</html>

Il DOCTYPE

Il tag Doctype è il codice che identifica che tipo di documento è il file che stiamo costruendo. Questo tag serve per capire qual è la versione di HTML in cui è scritta la pagina.

HEAD

All’interno del tag <head>, oltre al titolo della pagina, è necessario collegare il foglio di stile (CSS) che creeremo a breve: <link href="css/stile.css" rel="stylesheet" type="text/css"> che determinerà la formattazione del documento HTML 5.

È buona regola, inoltre, utilizzare come primo elemento nel <head>, il meta tag charset per segnalare al browser che tutti i caratteri presenti nel documento devono essere trascritti seguendo la codifica denominata UTF-8: <meta charset="utf-8"> , mentre la lingua umana che utilizzeremo per i contenuti va specificata come attributo del tag <html>:  <html lang="it"> . Quest’ultima informazione è particolarmente utile per facilitare il compito dei motori di ricerca quando l’utente richiede pagine scritte in una specifica lingua.

Costruiamo la testata del sito web

Header

Il tag <header> è uno dei nuovi tag HTML 5. Non è obbligatorio inserirlo nella pagina come il tag <footer>. Il tag header in nel corpo della pagina può contenere per esempio il logo, il claim, i collegamenti ai social o il menù mentre in article/section/aside può contenere il titolo.

Ad esempio:

<header>
     <h1>Il nome del mio sito</h1>
     <h2>un eventuale sottotitolo</h2>
</header>

 Il Menù di navigazione

Il menu è un elemento fondamentale per le pagine web. E’ identificato in HTML 5 col tag <nav>. Al suo interno si crea tramite le classiche liste (<ul>, <ol> e <li>). Possiamo, ad esempio, creare una navigazione come questa:

<nav>
     <ul>
          <li><a href=”#”>link1</a></li>
          <li><a href=”#”>link2</a></li>
          <li><a href=”#”>link3</a></li>
     </ul>
</nav>

Article & Section

Le nuove pagine HTML 5 per individuare i blocchi di contenuti utilizzano i tag <section> e per la tipologia di news e articoli (utilizzata per i blog ad esempio) il tag <article>.

<article>
     <header>
          <h1>Questo è il titolo dell’articolo</h1>
     </header>
     <p>Contenuto dell'articolo</p>
     <footer>
          Footer articolo
     </footer>
<article>

Un articolo può essere strutturato quindi con una propria testata (dove inserire il titolo) e un proprio footer.

Il tag <section>, invece, rappresenta una generica sezione del documento oppure un capitolo all’interno di un articolo.

<article>
     <header>
          <h1>Questo è il titolo dell’articolo</h1>
     </header>
     <section>
          <h1>Capitolo 1</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
             Mauris rutrum purus tincidunt quam posuere, in placerat 
             eros viverra. Proin dictum, nisi vitae ultricies gravida. 
          </p>
      </section>
      <footer>
          Footer articolo
      </footer>
</article>

Aside

Inseriamo poi la classica barra laterale con il tag <aside>:

<aside>
     <h1>Archivio</h1>
     <ul>
          <li><a href="#">Gennaio</a></li>
          <li><a href="#">Febbraio</a></li>
          <li><a href="#">Marzo</a></li>
     </ul>
</aside>

Per terminare la nostra struttura di pagina in HTML 5 inseriamo il footer dell’intera pagina:

<div class=”footer”>
        <p>copyright 2014 - Mio Sito - numero telefono - info@miosito.com</p>
</div>

Ora salviamo la pagina index.html con l’editor di testo, salvandola nella cartella che abbiamo creato appositamente.

Il foglio di stile

Ora sempre con il nostro editor testuale creiamo un secondo file (stile.css) con estensione .css e salviamolo nella cartella css. Questo piccolo file ci consentira di stabilire la formattazione dei vari tag di struttura (il layout) che abbiamo inserito nella pagina html. Attraverso il semplice linguaggio di stile Cascading Style Sheets potremo infatti costruire la visualizzazione della pagina sul browser, stabilendo la posizione, le dimensioni, i colori, le gerarchie dei box, e dei testi della nostra pagina in HTML 5.

Un regola CSS è composta da due blocchi: il selettore (ad esempio body), che serve a definire la parte del documento cui verrà applicata la regola, e il blocco delle dichiarazioni (qui sotto abbiamo width, margin, font-size), delimitato dalle parentesi graffe, che contiene le proprietà (un aspetto dell’elemento/selettore da modificare del selettore) e i valori di queste ultime.

Stabiliremo ad esempio la larghezza, l’allineamento centrato, e la dimensione standard del font del corpo del nostro sito:

body {
	width: 1200px; /* larghezza del body */
	margin: 0 auto 0 auto; /* l'allineamento centrato */
	font-size: 18px; /* dimensione font */
}

Oppure le dimensioni dell’articolo e della barra laterale:

article {
	width: 760px;
	height: 330px;
	float: left;
	background-color: #dcd6cd;
	padding: 10px;
	margin: 10px;	
}
article header {
	width: 740px;
	height: 50px;
	background-color: #dcd6cd;
	padding: 10px;
	margin: 10px 0 0 0;
}
article section {
	width: 740px;
	height: 120px;
	background-color: #dcd6cd;
	padding: 10px;
	margin: 10px 0 0 0;
}
article footer {
	width: 740px;
	height: 50px;
	background-color: #dcd6cd;
	padding: 10px;
	margin: 10px 0 0 0;
}
aside {
	width: 360px;
	height: 330px;
	float: left;
	background-color: #C57600;
	padding: 10px;	
	margin: 10px;
}

Il menù a tendina

Inseriamo ora un effetto speciale nel nostro menu di navigazione. La struttura di un menu a tendina o dropdown è una lista con elementi annidati. Una lista per un menu è importante perchè i motori di ricerca leggono una lista di link e gli permettono di ottenere una sitemap (mappa del sito) in modo diretto e veloce anche se non completa (un sito può avere più menu o link all’interno della pagina).

<nav>
        <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Chi Sono</a></li>
         <li>
           <a href="#">Portfolio</a>
           <ul>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Web Development</a></li>
            <li><a href="#">Illustrations</a></li>
          </ul>
         </li>
         <li><a href="#">Blog</a></li>
         <li><a href="#">Contatti</a></li>
     </ul>
</nav>

Creiamo una lista non ordinata ovvero il tag ul (unordered list). All’interno scriviamo 5 elementi figli (si chiamano così perchè sono all’interno di un altro tag) della lista con il tag li (list item), dentro a questi tag inseriamo un ancora o link. Inseriamo poi dentro al terzo tag li un’altra lista ul con le relative voci li con altrettanti link di sottomenu.

Ora stilizziamo il menu con il CSS 3 :

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #FFC163;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li a {color:#000;}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

Alla prima lista impostiamo lo stile list-style: none per eliminare graficamente il punto della lista. Per affiancare le voci li impostiamo le regole display: inline-block; (il valore delle proprietà display che da all’elemento la caratteristica di blocco disponendolo orizzontalmente) e position: relative; (la proprietà position è fondamentale per la gestione della posizione degli elementi. Può avere valore static, posizione di default; relative, e in questo caso l’elemento viene posizionato relativamente al suo box contenitore, e la sua posizione viene impostata con le proprietà top, left, bottom o right; absolute, cioè quando il box dell’elemento viene rimosso dal flusso del documento ed è posizionato in base ai valori forniti con le proprietà top, left, bottom o right; e fixed, che come per absolute il box è sottratto al normale flusso del documento, ma il box contenitore è sempre la finestra principale del browser (viewport).
Per creare l’effetto di transizione del colore impostiamo la regola CSS 3 transition (con le varie dichiarazioni per la compatibilità con tutti i browser).

Per la seconda lista annidata (ul li ul), che è inizialmente nascosta con display: none; (regola che ci permette di non mostrare l’elemento) e visibility: hidden; e opacity:0; e in posizione assoluta (position: absolute;) impostiamo lo stato di hover con le regole display: block; e opacity:1; e visibility: visible; per creare al passaggio del mouse la sua apparizione.

All’interno del codice CSS troviamo inoltre un’altro effetto grafico, introdotto insieme a border-radius (bordi arrotondati) coi CSS3, cioè la proprietà box-shadow che ci consente di ottenere un’ombra intorno ai vari box.

Abbiamo così creato con il nostro codice la griglia in HTML 5 e il file CSS 3 per formattare la nostra prima pagina web in HTML 5. Trovi qui l’esempio online.

Qui puoi scaricare l’esempio di pagina HTML5 con il file CSS allegato. (zip)

The post Come creare un sito web in HTML 5 appeared first on Matteo Bayre.

La falla, scoperta da Jouko Pynnönen di Klikki Oy, è stata individuata nel sistema di commenti di WordPress, che potrebbero ospitare codice javascript malevolo e che nelle impostazioni di default del CMS vengono pubblicati in automatico senza filtri o controlli imposti da parte dell’amministratore. Il codice JS potrebbe servire a compiere ogni genere di azione pericolosa per il sito sotto attacco, inclusa la creazione di un nuovo account admin e l’eliminazione delle possibilità di accesso al backend agli admin.

Nei siti che permettono commenti senza autenticazione (impostazione predefinita di WordPress), il baco potrebbe consentire a chiunque di inviare script dannosi all’interno di commenti che potrebbero reindirizzare i visitatori del sito, oppure potrebbero dirottare le sessioni di WordPress degli amministratori, creare nuovi account amministratori con password conosciute, cambiare le password di amministrazione, o lanciare il codice PHP dannoso sul server.

L’attuale versione di WordPress (versione 4.0), che è stato rilasciato nel mese di settembre, non è vulnerabile all’attacco. Tuttavia, WordPress ha rilasciato la scorsa settimana un aggiornamento di sicurezza per la versione 4.0 per risolvere le problemaitiche di vulnerabilità di scripting cross-site.

Fonti: puntoinformatico.it | arstechnica.com

The post WordPress e il bug dei commenti appeared first on Matteo Bayre.

Prima di iniziare a scrivere i contenuti per il nostro sito web/blog con Worpdress è necessario fare una distinzione fra la scrittura di un articolo e quella di una pagina. Gli articoli possono essere utilizzati per pubblicare una notizia o trattare l’argomento del giorno; le pagine sono sezioni del sito più statiche in cui inserire ad esempio informazioni circa la nostra attività, i contatti, la posizione geografica (ad esempio le tipiche pagine di un sito “Chi siamo”, “Contatti”, “Bio” o “L’azienda”). Gli articoli di WordPress possono essere categorizzati e taggati con categorie e tag, mentre le pagine no.

Come accennato in precedenza, gli articoli sono contenuti dinamici dedicati generalmente a news o eventi. WordPress consente di organizzare gli articoli in categorie per facilitare la navigabilità da parte degli utenti. Per amministrare i contenuti possiamo cliccare sulla voce “Articoli” presente nella sidebar di sinistra della Dashboard di WordPress e visualizzare l’elenco di tutti gli articoli presenti nel sistema.

La seguente schermata mostra l’elenco degli articoli. Passando con il mouse sul titolo dell’articolo, vengono mostrate quattro voci: Modifica (accede ad una nuova schermata con tutti gli strumenti di modifica dell’articolo), Modifica Rapida (consente di modificare rapidamente l’articolo direttamente dalla schermata senza aprire nuove finestre. Questa modalità è molto veloce e comoda se si desidera modificare velocemente più articoli senza dover aprire nuove finestre. Naturalmente non offre tutti gli strumenti della modalità “Modifica”), Cestina (sposta l’articolo nel cestino. Successivamente sarà possibile ripristinare l’articolo, oppure eliminarlo definitivamente) e Visualizza (per visualizzare l’articolo così come lo vedono gli utenti del sito).

Oltre all’elenco di tutti gli articoli presenti nel sistema, nella sidebar di sinistra, vengono anche attivate quattro sottovoci: Tutti gli articoli (visualizza l’elenco di tutti gli articoli), Aggiungi nuovo (per inserire un nuovo articolo), Categorie (per amministrare le categorie aggiungendone di nuove, modificando e/o eliminando quelle esistenti) e Tag (creazione di tag. I tag sono delle parole chiave associate al contenuto degli articoli. Grazie a queste parole è possibile utilizzare funzionalità quali, articoli correlati o articoli simili ecc…).

Nella schermata “Aggiungi nuovo articolo” è possibile inserire le seguenti informazioni:

1. Titolo dell’articolo,
2. Contenuto dell’articolo (è possibile utilizzare un comodo editor per la formattazione del testo e degli atri elementi),
3. Aggiungi media per aggiungere contenuti quali foto, tracce audio, video ed allegati,
4. Categoria per specificare la categoria di appartenenza dell’articolo. Nel sistema è presente una schermata dedicata alla gestione delle categorie, ma è possibile aggiungerne di nuove direttamente da questo box selezionando la voce “+ Aggiungi una nuova categoria”,
5. Aggiungere tag,
6. Immagine in evidenza. L’immagine in evidenza è una foto che identifica l’articolo. In molti temi grafici gli articoli sono mostrati nella home page con il titolo, l’immagine in evidenza, una breve descrizione ed il pulsante “Leggi tutto”,
7. Discussione per abilitare o disabilitare i commenti (alcune volte questo box non è attivo. Per attivarlo apriamo il menù “Impostazioni schermata”, presente nella parte superiore destra dello schermo, e spuntiamo la voce discussione.
8. Pubblica. In questo box possiamo procedere alla pubblicazione del nostro nuovo articolo rendendolo visibile a tutti i visitatori del sito. Possiamo anche salvarlo come bozza (per future modifiche prima della pubblicazione), impostare una data specifica di pubblicazione, proteggere l’articolo con una password.

Gestione categorie

Nella sezione categorie (accessibile tramite il pulsante Categorie) possiamo gestire le categorie, crearne di nuove. È anche possibile creare delle sotto categorie. Una volta scritto il vostro articolo dovete assegnarlo alla giusta categoria. Le categorie sono importanti, poiché rappresentano, in sostanza, gli argomenti che tratterete nel blog. A destra dell’editor, sotto Tag articoli, trovate il menu Categorie. Potete benissimo creare da qui le categorie di argomenti che avrà il vostro blog, clickando poi su

Aggiungi una nuova categoria.

In questo caso il menu Categorie si espanderà, per mostrare i campi per creare la vostra nuova categoria. Appena create le categorie mettete un segno di spunta su quella a cui destinare il vostro articolo.

Gestione dei Tag

Nella sezione tag (accessibile tramite il pulsante Tag) possiamo gestire i tag, creandone di nuovi o modificando quelli esistenti).

Salvare e pubblicare gli articoli

Prima di passare ad altre operazioni è bene che salviate il vostro lavoro nelle Bozze. Accanto all’editor di testo, alla sua destra, troverete il menu Pubblica. Tramite il bottone Salva bozza potete salvare il vostro lavoro nelle Bozze e di aprirlo successivamente per eventuali modifiche. Anteprima vi permette di vedere un’anteprima online del vostro articolo. Cliccando invece su Pubblica il vostro articolo sarà pubblicato e visibile quindi online. Nel caso di blog multi-autore, in cui gli articoli devono essere approvati da un amministratore prima della pubblicazione, i collaboratori troveranno, anziché Pubblica, il bottone Invia per la revisione.

Insomma per creare il nostro articolo inseriamo il titolo, il testo all’interno dello spazio di wp: come insegnano le buone regole del giornalismo online è consigliabile riportare all’inizio del post la notizia essenziale con più parole chiave utili per l’argomento trattato. Inseriamo poi qualche immagine (meglio se all’inizio dell’articolo). Scegliamo quindi la categoria o le categorie, e inseriamo le parole chiave (tag) essenziali.

Il nostro articolo ora è pronto per la pubblicazione.

The post Come scrivere un articolo con WordPress appeared first on Matteo Bayre.

Tra febbraio e settembre del 2013, infatti, i ricercatori sono tornati a prendere in esame il panel di 720 aziende di sei diversi settori (alimentare, arredamento, banche, hospitality, moda e pubblica amministrazione), già analizzato nel 2010 e nel 2011, per coglierne i progressi e i cambiamenti. A partire da quest’edizione hanno potuto contare anche sulla piattaforma di monitoraggio ‘Social Listening’, messa a disposizione da Blogmeter.

Ecco alcuni dei risultati emersi dall’indagine:
– ad attivarsi maggiormente sui social media sono soprattutto le aziende grandi: se nella precedente edizione il 57,3% di esse gestiva almeno un social media, nel 2013 tale percentuale è salita all’81,1%. Si allarga così il divario con le piccole e medie imprese, per cui la crescita è stata solo del 7% dal 2011;
– gli spazi social, tuttavia, non sempre sono adeguatamente valorizzati: lo dimostra il fatto che solo il 41% delle aziende analizzate li segnala nella home page del sito aziendale;
– aprire uno spazio social non significa necessariamente saperlo gestire in maniera ottimale. Lo dimostra l’indice di SocialMediAbility che, su una scala da 1 a 10, nel 2011 si attestava a una media di 1,16 e nel 2013 è arrivato soltanto a 1,91. Mediamente, al crescere delle dimensioni aziendali aumenta anche la “qualità” dell’uso dei canali social.

Nel corso dell’incontro Sacha Monotti, founder e ceo di BlogMeter, ha anticipato i macrotrend social dei prossimi mesi: il social customer caring (vale a dire l’attenzione riservata alle richieste del consumatore), le social tv (l’abitudine di commentare live i programmi tv diventerà un potenziale da sfruttare anche per i brand) e il passaggio – deciso e, in parte, già avvenuto – della fruizione del mondo social da dispositivi fissi a dispositivi mobile.

Fonte: primaonline.it – osservatoriosocialmedia.com

The post Il #SocialMediAbility delle aziende italiane (infografica) appeared first on Matteo Bayre.

Howard Rheingold, 65 anni, è uno dei maggiori sociologi di Internet viventi. Docente di nuovi media alla Stanford University e a Berkeley, ha inventato tra l’altro, in passato, il concetto di “comunità virtuali”. Il suo ultimo libro, “Perché la Rete ci rende intelligenti”, è appena stato pubblicato in Italia da Cortina.

I Google Glass saranno un successo? «Sì, credo proprio che questo tipo di tecnologia diventerà popolare e che Google stia aprendo una strada in cui finiranno per competere anche altri soggetti, come Apple e Samsung».

Perché? «Perché i glass rappresentano un cambiamento di paradigma molto significativo nell’amplificare la capacità degli individui di accedere alla conoscenza in ogni momento e in ogni luogo, visualizzando informazioni di ogni tipo sul posto in cui ci troviamo, sulle sue potenzialità per noi, sulla sua storia e molto altro ancora. Ci daranno la possibilità di effettuare ricerche su qualsiasi argomento con un tocco delle dita e un comando vocale; e ci permetteranno di catturare immagini e video ovunque e in qualsiasi momento».

Con quali effetti sociali? «Molte di queste funzionalità sono certamente destinate a modificare le nostre relazioni, con potenzialità anche conflittuali. La maggior parte delle persone nel mondo, ad esempio, si sono abituate a vedere gli altri che tirano fuori i loro cellulari per scattare foto o registrare video. Ora invece qualsiasi estraneo nelle tue vicinanze potrà riprendere immagini (e magari inviare sulla Rete in streaming il video) senza il tuo consenso. E potrà farlo in qualsiasi momento e in qualsiasi luogo. È molto diverso. Ma più in generale, i Glass rappresenteranno un cambiamento del nostro rapporto con la realtà».

Vale a dire? «Con l’arrivo sugli occhiali della Rete e di applicazioni come i motori di ricerca, Wikipedia e YouTube, la nostra realtà diventerà multistrato: uno fisico e uno digitale. E la nostra conoscenza sarà sempre più reticolare».

Lati negativi? «Arriveranno di sicuro le applicazioni di riconoscimento facciale che ci permetteranno di avere subito informazioni su chi incontriamo. Magari ci eviteranno brutte figure, ma questa funzionalità potrà essere utilizzata anche come strumento di sorveglianza di massa, sia da parte dello Stato sia da parte di imprese commerciali».

Fonte: L’Espresso

The post Rheingold: “Google Glass: verso la realtà multistrato” appeared first on Matteo Bayre.

Si tratta di un servizio online di video-chat, in tempo reale, con ”tutor” che offrono consigli e dritte dall’altra parte dello schermo (gratis o a pagamento). Si basa su Hangouts, sistema di video-chat del social network Google+.

Annunciato già la scorsa estate, il servizio è ora online con alcuni partner, quali Weight Watchers, Sephora e One Medical per offrire assistenza sui temi più disparati: dai consigli per mantenersi in forma, alle lezioni su come truccarsi, al confronto con un medico, e ancora ai tutorial per imparare a cucinare o a suonare uno strumento o riparare qualcosa che si è rotto in casa (otto in tutto le categorie). Per ora, Google avrebbe invitato un migliaio di aziende a partecipare e le partnership sarebbero riservate solo su invito. Per usarlo è necessario avere un profilo Google+.

The post Google lancia Helpouts, il tutor sempre online appeared first on Matteo Bayre.

Facebook è il social network che porta più traffico ai siti web: è responsabile del 10% delle visite totali. Non è una sorpresa: il social network di Zuckerberg è il più diffuso al mondo e la prima posizione in questa classifica è una conseguenza quasi naturale.

A stupire invece è la seconda posizione, occupata da Pinterest. Il social network per la condivisione di foto è nato solo nel 2010, ed è il più giovane tra i social network analizzati da Shareaholic. Pinterest porta ai siti web il 3,7% del traffico, tre volte più di quanto fa Twitter, molto più noto e affermato.

Shareaholic ha elaborato i dati raccolti da 200 mila editori online tra settembre 2012 e lo stesso mese di quest’anno, per un traffico totale di 250 milioni di utenti unici.

Fonte: Mashable.

The post Chi porta più traffico ai siti web? Facebook in testa. Pinterest batte Twitter appeared first on Matteo Bayre.