domenica 4 dicembre 2011

JAVASCRIPT II : GLI ALERT

Abbiamo visto come stampare sulla pagina del browser una scritta. Adesso vediamo come vengono scritti gli alert (quelle finestre che ci avvisano di qualcosa).

Apriamo il blocco note
<html>
           <head>
                <script type ="text/javascript">
                 <!--
                    var msg ="Questo è un messaggio di alert";
                     window.alert (msg);
                     alert ("Questo è un altro messaggio");
              //-->
          </script>
    </head>
<body>
RIcarica la pagina (f5) per ricaricare l'alert
</body>
</html>

Questo codice carica due alert. Copiate e incollate

Alla prossima.......

JAVASCRIPT I : IL NOSTRO PRIMO SCRIPT

Cominciamo questa prima lezione scrivendo il primo programma che ogni utente che si affaccia ad un nuovo linguaggio di programmazione non può non incontrare : "Hello World".
Prima di creare lo script vediamo alcune premesse:

  • Il codice javascript è sempre racchiuso tra i tag <script type ="text/javascript">  Codice javascript </script> . Type indica al browser che tipo di linguaggio stiamo utilizzando.
  • Se vogliamo utilizzare un file javascript esterno (opportunamente nominato file.js) deve scrivere il tag <script src="script.js"></script>
  • Il tag <script> può essere inserito nei tag :  <head></head> oppure nei tag:  <body></body>. La differenza sta nel fatto che nel secondo caso viene utilizzato una sola volta durante il flusso d'esecuzione del codice e la prima è che viene riutilizzato ogni volta che è opportunamente richiamato (vedremo questa cosa più in la).
  • Dopo il tag <script> viene utilizzato il tag di commento <!-- per indicare al browser di passare il controllo al javascript e finisce con //-->  per far sì che il compilatore javascript legga l'ultima riga come commento (i commenti in javascript sono scritti : // oppure /* */) e il commento html venga chiuso per poter ripassare il controllo al browser.
  • Le istruzioni terminano con un ;
Adesso apriamo il nostro editor e creiamo il nostro file HelloWorld.html.
<html>
<head>
       <script type ="text/javascript">
<!--
              document.write ("Hello World");
//-->
       </script>
</head>
<body>

</body>
</html>


Notiamo che le stringhe in javascript sono racchiuse tra virgolette. Un altro modo per stampare il messaggio è quello di passarlo ad una variabile e poi richiamarla nel metodo write.

var msg ="Hello World"
document.write (msg);

Da notare che in javascript le variabili non hanno un tipo ma questo viene impostato dopo l'inizializzazione della variabile;

venerdì 11 novembre 2011

Lez 2: Creiamo il nostro database

Apriamo Mysql command line, ovvero il prompt dei comandi che abbiamo installato sul pc e immettiamo la password per accedere a Mysql (quella scelta durante l'installazione per intenderci).
Adesso creiamo il nostro database:


create database NomeDatabase;


Facciamo attenzione al punto e virgola finale che indica a Mysql di eseguire il comando (se lo dimentichiamo rimarrà in attesa di un altro comando) e a premere il tasto invio dopo aver eseguito il comando.


NomeDatabase è il nome che daremo al nostro database.


Per usare il database (e crearci tabelle o fare query) usiamo il comando:


use database NomeDatabase;


Per eliminare il database:


drop database NomeDatabase;


Alla prossima...

domenica 23 ottobre 2011

Lez. 1 :Scaricare Mysql server

In questa prima lezione del nostro corso di Mysql faremo una cosa semplicissima ma importante: scarichiamo il nostro programma dal sito ufficiale.
Andiamo sul sito ufficiale Mysql e scarichiamo Mysql server ( noi useremo il prompt dei comandi di mysql ma è possibile scaricare e installare anche l'interfaccia grafica del programma).
Installiamo il tutto, scegliamo la password e ricordiamocela perché ci servirà per entrare nel server mysql.
Adesso da programmi andiamo su Mysql Command line client. Ci verrà chiesta la password (mettiamo quella che abbiamo scelto in fase di installazione).
Adesso possiamo creare i nostri database, le tabelle ecc.
Questo però lo vedremo alla prossima......

giovedì 7 luglio 2011

Come creare un rete locale

Per far sì che diversi pc facciano parte della stesse rete, dovete far sì che essi facciano parte dello stesso gruppo di lavoro.
Come fare? Semplicissimo: su risorse del computer ( o computer in Windows 7 e Windows vista), cliccare con il tasto destro e poi su proprietà.
Qui verrà visualizzato il nome del computer e il gruppo di lavoro

Cliccando su cambia impostazioni potremo cambiare questi due parametri. Ad esempio per ogni pc il gruppo di lavoro deve essere ufficio, solo così i vari computer potranno "dialogare in rete".
Quando tutti i pc faranno parte dello stesso gruppo di lavoro, basterà andare su risorse di rete e vedremo la nostra rete ufficio e i pc ad essa collegati.

Prerequisiti: collegati tutti con il cavo ethernet.

Alla prossima....

Come impostare una stampante in rete su Windows

Ho scoperto, da pochissimo, che per impostare un stampante in rete su Windows 7 o su Windows xp, bisogna installarla come stampante locale e non come stampante di rete (cosa che facevo tranquillamente con il vecchio Windows 2000).
Innanzitutto dovete condividere la stampante sul pc su cui è installata fisicamente (tramite cavo usb si suppone). Andate in Pannello di controllo- dispositivi e stampanti e cercate la stampante da condividere (premettiamo che sia già stata installata). Con il tasto destro sull'icona della stampante, su condividi potremmo creare la nostra condivisione (ci sarà una mano sotto alla stampante in Windows xp e due omini in Windows 7).

Adesso andiamo sugli altri pc che devono stampare in rete.

Sempre da Pannello di controllo - dispositivi e stampanti - scegliere Aggiungi stampante (in alto per Windows 7 e a sinistra su Windows xp ). 
Qui troveremo l'opzione aggiungi stampante locale. Scegliamo crea nuova porta, porta locale, e gli mettiamo l'indirizzo del pc su cui è installata la nostra stampante con il nome della stessa. (es \\pcfisso\stampante).
A questo punto ti chiederà di installare i driver (puoi prenderli da un elenco di Windows o dal dischetto fornito con la stampante).
Se tutto è andata correttamente dovreste poter vedere la stampante condivisa sul pc e magari provate a fare un stampa di prova.

Prerequisiti: tutti i pc devono far parte dello stesso gruppo di lavoro

Alla prossima..

martedì 21 giugno 2011

CSS III Lezione: il testo

Lezione 3 : i CSS

Vediamo alcune proprietà per formattare il testo:

Per allineare il testo useremo:

  • text-align : center; \* testo al centro*\
  • text-align : left; \* testo a sinistra *\
  • text-align : right; \* testo a destra *\
  • text-align : justify; \* testo giustificato *\

Il grassetto e il corsivo del nostro testo sarà applicato con:

font-style: italic \* se vogliamo scrivere il testo in corsivo*\

a font-style è possibile associare:
  • italic
  • normal
  • oblique
  • inherit

font-weight: bold \* se vogliamo scrivere testo in grassetto *\

Le proprietà di font-weigth sono:
  • normal
  • bold
  • bolder
  • lighter
  • inherit

Per il testo sottolineato:
  1. text-decoration: underline; \*testo sottolineato*\

Le proprietà di text-decoration sono:
  • overline (linea sopra il testo)
  • underline (sottolineato)
  • line-through  (sbarrato)
  • blink (lampeggiante -non IE)
  • none (nessuno)
Per decidere di quanto il testo deve rientrare:

text-indent: 10px
text-indent: 10%

Per lo spazio tra i caratteri:

letter-spacing: 6px;



Per indicare la famiglia di font che il browser utilizzerà per la pagina bisogna utilizzare il tag:

font-family: Arial, verdana, Sans-serif;

La dimensione del font:

  • font-size: 30px;
  • font-size: 30pt;
  • font-size: 30%;
  • font-size: 8em;

Cosa cambia tra le misure? Il pixel è il formato video, mentre il point il formato di stampa, l'em e la percentuale sono misure relative (a differenza delle prime due che sono misure assolute), ad esempio se l'em è 1, e abbiamo dichiarato il font base a 12 px, il font con l'em sarà del 150% in più ovvero di 18 px, la percentuale è simile all'em.

I tag font possono essere raggruppati:

         p {
                
                font-weight: bold;
                font-size: 18px;
                font-family: Verdana, Arial,Sans-serif;
      font-style: italic; 

        }
Può essere riscritta come:

p {
font:bold, small-caps,italic, 18px ,Arial;
}

Con l'ordine:
font-weigth, font-variant (questo attributo ha solo due varianti small-caps, che trasforma tutte le lettere maiuscole in una dimensione minore come fossero lettere minuscole, e normal), font-style, font-size, font-family.

lunedì 20 giugno 2011

CSS: II Lezione La sintassi

CSS: Lezione 2 La sintassi

Nei css, esterni o interni alla classe, abbiamo visto che è possibile ridefinire le caratteristiche di alcuni tag html (nella lezione precedente abbiamo modificato il tag h1), ma possiamo anche ridefinire altre classi ed apllicarle ad un contenitore.

Ad esempio, se nell'<head> scriviamo:

<style type=" text/css">

           .miaclasse {
        font-family: Verdana, Arial,Sans-serif;
        color: red;
        font-size: 11px;
        text-align: center;
        }
</style>

E nel body scriviamo:
            <p class= “miaclasse”> Questo testo è arial e in rosso e allineato al centro </p>

Attenzione: la classe è preceduta da un punto e può essere riutilizzata per più contenitori.

Invece se scriviamo:

<style type ="text/css">
            #mioid {
        font-family: Verdana, Arial,Sans-serif;
        color: red;
        font-size: 11px;
        text-align: center;
        }
</style>

Abbiamo creato un id. Qual'è la differenza con la classe, direte voi?
L'id può essere applicato ad un solo elemento, la classe a più di uno. Solitamente questo è utilizzato col tag <div>, ma nessuno vieta di utilizzarlo con qualche altro contenitore htm.

Per richiamarlo all'interno del body si scrive:

<div id= “mioid”> Questo contenitore è rosso, in Arial e allineato al centro </div>

Facciamo un esempio:

<html>

            <head>

                        <title> Primi esercizi con Css</title>

            <style type="text/css">



                        .miaclasse {

                        font-family: Verdana, Arial,Sans-serif;

                        color: red;

                        font-size: 16px;

                        text-align: center;

                        }



                        #mioid {

                          font-family: Verdana, Arial,Sans-serif;

               color: #990066;

              font-size: 11px;

               text-align: rigth;



                                    }



                        H1 {



             color: #009900;

             font-size: 22px;

             text-align: center;

                 font-style: italic;

                                    }



            </style>

            </head>

<body>

            <H1> Questo è il titolo della pagina</H1>

<div id = "mioid">

<ul>

            <li>  Primo elemento </li>

            <li> Secondo elemento </li>

</ul>

</div>

<div class ="miaclasse"> Documento creato da: </div>

<p class = "miaclasse"> Firma</p>

</body>

</html>



Il risultato:


Primi esercizi con Css

Questo è il titolo della pagina



  • Primo elemento
  • Secondo elemento


Documento creato da:

Firma




martedì 14 giugno 2011

CSS: I lezione

I CSS: Lezione I

I css, detti anche fogli di stile, sono nati con il preciso compito di occuparsi della formattazione di una pagina web, cosa che prima era demandata al linguaggio html.
Oggi, i contenitori vengono sempre creati con i tag html mentre per la formattazione il loro uso è deprecato a favore dei fogli di stile.
Formattare un testo in css vuol dire anche creare un codice che può essere utilizzato per un intero sito web senza che si debba modificare a mano ogni singola pagina.
I css, Cascading Style Sheets, possono essere utilizzati in tre modi:

  1. Come fogli di stile in linea
  2. come fogli di stile incorporati
  3. come fogli di stile esterni


  1. Fogli di stile in linea

In questo caso non ci spostiamo molto da quello che è l'utilizzo dell'html, infatti le proprietà verranno dichiarate nel contenitore (ricordiamo che esso può essere ad esempio un paragrafo <p> o <div> o <span>), e avrà effetto solo ed esclusivamente su questo contenitore.

Ad esempio:

<div style = “font-size: 8px; color: red”> testo in rosso </div>


Come avrai già notato gli attributi vengono seguiti dai due punti invece che dall'uguale, questa è una prima differenza nella sintassi dei Css.
  1. Fogli di stile incorporati

Le proprietà vengono inserite nell'head della pagina html e hanno effetto su tutta la pagina, non sul tutto il sito web, utilizzando il tag <style type= “text/css”>

Ad esempio:

<html>
  <head>
       <style type = “text/css”>
       body {background-color: red;}
       </style>
 </head>
Nota che:
  1. Sono utilizzate le parentesi graffe
  2. Al posto dell'uguale utilizziamo i due punti
  3. Gli argomenti sono separati dal punto e virgola invece della virgola
  4. Non vi sono le virgolette

Una migliore indentazione sarebbe:

<html>
        <head>
                <style type = “text/css”>
                    H1 {
                            font-size: 13px;
                            font-family: Arial;
                             color: red;
                          }
                   </style>
          </head>

Con gli argomenti uno sotto l'altro.
In questo caso tutti gli elementi racchiusi tra i tag H1 avranno il colore rosso, font Arial e grandezza 13.

  1. Fogli di stile esterni

All'interno dell'head viene richiamato un foglio si stile esterno alla pagina:

<html>
<head>
<link rel="stylesheet" type="text/css" href="fogliodistile.css">
</head>


Stando ben attenti a inserire il percorso corretto in cui si trova il foglio di stile, in questo modo potremo applicare la stessa formattazione a tutte le nostre pagine web, basta inserire questa dicitura nell'head delle pagine in cui vogliamo utilizzarlo.

Vedremo meglio la sintassi dei css nelle prossime lezioni....

HTML: Lezione 15 I Form (II parte)


Lez 15 i Forms II parte

Vediamo gli attributi che possiamo utilizzare con ogni campo.

  1. <input type= text”> 


  • size: larghezza del campo, a seconda di questo attributo si definisce la quantità di dati che visualizzeremo.
  • Maxlength: massima quantità di dati che possiamo immettere
  • name: nome interno al campo, che il programma che preleverà i dati
  • value: valore di default. 
  • align: l'allineamento del field. Puoi scegliere tra : top, middle, bottom, right, left.



Gli stessi attributi si possono applicare ai field password, che sono sempre campi di testo, quello che cambia e che la password immessa non è visibile sul monitor.

Per la textarea, invece abbiamo gli attributi:
  1. <textarea> Questa è l'area di testo </texarea >
    • cols e rows, ovvero il numero massimo di righe e di colonne del campo.
    • Name= aggiungere un nome interno al field
    • wrap = questo attributo può essere, wrap = “off “(il testo è visto come una lunga serie senza gli a capo), wrap = “virtual” (il testo va a capo, ma quando viene inviato diventa una riga unica, 2wrap=physical “il testo va a capo e quando viene inviato rimane così com'è, con tutti gli a capo).

  1. La checkbox, permette di selezionare più scelte, a differenza dei bottoni radio, per cui ne vale solo una.

  • Name= nome del campo, utili per il programma che riceverà le informazioni.

  • Value= indica quale opzione è stata scelta, e quindi, ciò che verrà inviato al programma ricevente.
    Align= il solito allineamento.
  • Se aggiungiamo l'attributo checked="checked", vuol dire che stiamo scegliendo questa opzione come standard.
Inutile dire che questi attributi valgono anche per il type = radio, ovvero per i bottoni radio.

I menù a discesa, permettono anch'essi la scelta tra varie opzioni, funziona come i bottoni radio o la checkbox.
Il tag è :

<select>
<option value= “primascelta”> primo </option>
<option value = “secondascelta”> secondo </option>
</select>

Gli attributi di select sono:
  • name = nome del menù a discesa. Viene scritto select .
  • Size = quante scelte sono visibili nello stesso momento, di default è una.
  • Multiple = è presente la scelta multipla.

Gli attributi di option
  • value =cosa verrà inviato al programma ricevente.
  • Selected = la voce selezionata di default.

I bottoni di invio < input type = “submit”>, hanno come attributi
  • name = il nome del bottone
  • value = il nome visualizzato sul bottone
  • align = allineamento
  • tabindex = ordine in cui i campi verranno attivati.

Il tasto reset <input type = “reset”> ha come attributi:
  • name = il nome del bottone
  • value = il nome visualizzato
  • align = l'allineamento
  • tabindex = ordine in cui i campi verranno attivati.

Gli attributi dell' <input type =”image”> sono:
  • name = il nome dell'immagine
  • src = l'indirizzo dell'immagine
  • align = l'allineamento
  • border = il bordo intorno all'immagine
  • height = l'altezza dell'immagine
  • width = la larghezza dell'immagine
  • vspace = lo spazio bianco sopra e sotto l'immagine
  • hspace = lo spazio a destra e sinistra dell'immagine
  • tabindex = ordine in cui i campi verranno attivati
Facciamo un esempio:

<html>

<title> Il mio form </title>
<body>
<form name = "Contattaci" method ="post" action="http://www.miodominio.com/myformhandler.cgi" >
<fieldset>
<p align = "center">
<legend > dati utente :</legend>
<input type = "text" name = "nome" value = "Il tuo Nome">
<input type = "text" name = "cognome" value = "Il tuo Cognome">

</p>
<p align ="center">
<label > Scrivici: <br/>
<textarea cols ="60" rows="10" wrpa ="physycal">
Scrivi qui il tuo messaggio
</textarea>
</p>
</fieldset>
<p align = "center">

<label> Password: <input type ="password"></label><br/>
<label> Linguaggio di programmazione preferito: <br />

<select>
<option>Java</option>
<option>C++</option>
<option> Php </option>
<option> Altro </option>
</select>
</label><br/>
<label> Linguaggi conosciuti: <br />
<select multiple ="multiple" size ="5">
<option>Java</option>
<option>C++</option>
<option> Php </option>
<option> Html</option>
<option> Css </option>
</select>

<p>
<fieldset>
<p align = "center">
<label> Accetti termini e condizioni?
<input type= "radio" name = "option1" checked = "checked"> Si
<input type = "radio" name= "option2" > No
</label>
</filedset><br />
<input type ="submit" name ="invia" value="Invia" align ="center">
</p>
</form>
</body>
</html>

Il risultato sarà:

dati utente :













Il mio form

HTML: Lezione 14 I Form (I parte)


Lez 14 I forms I parte

I forms sono semplicemente dei moduli che ci permettono di interagire con l'utente. In realtà, per lavorare su questo tipo di elementi abbiamo bisogno, oltre che della pagina che verrà visualizzata dall'utente anche di una pagina secondaria che verrà creata con un linguaggio più complesso come asp o php, ad esempio.
Quindi sono dei form quei moduli che ci permettono di iscriverci ad un sito web o di fare una ricerca all'interno di un sito.

Dato che questo è un corso di html, ci occuperemo solo della parte grafica di questi elementi.

L'inizio e la fine di un form viene indicata dal tag

<form>
<!--Questo è un form-->
</form>

Per dare un nome al form utilizziamo l'attributo name:
<form name=”mandaci un'email>

Con action, indichiamo l'indirizzo a cui inviare il form.

<form name= “mandaci un'email” action= “mailto:lezioninformatica@gmail.com”>

Infine, dobbiamo indicare se il metodo di invio è di tipo post o get.

<form name= “mandaci un'email” method= “post” action= “mailto:lezioninformatica@gmail.com”>

Il metodo get è indicato quando devono essere inviati pochi parametri e per lo più testuali, dato che questi vengono passati come indirizzo alla pagina che li riceverà.
Quindi nell'url di risposta avremo tutti i dati dopo il punto interrogativo:

<form name="datiUtenti" action="paginadirisposta.php"method="GET">

paginadirisposta.php?nome=Mario&cognome=Rossi&datiInviati=messaggio+ di+ prova

Il metodo post, invece, è indicato se abbiamo una gran mole di dati e se dobbiamo passare dei dati sensibili come una password, infatti esso non usa la barra degli indirizzi, ma contatta la pagina che deve gestire i dati e poi li invia direttamente ad essa

<form name="datiUtenti" action="paginadirisposta.php"method="POST">

All'interno di un form, indichiamo con fieldtest delle aree in cui andremo a suddividere il nostro form

<form>
<fieldset>
<legend> dati utente</legend>
</fieldset>

<fieldset>
<legend>dati di fatturazione</legend>
</fieldset>

<fieldset>
<legend>termini e condizioni</legend>
</fieldset>

</form>



Avremo:

dati utente

dati di fatturazione

termini e condizioni

Abbiamo creato un form con tre sezioni e con il tag <legend>, gli abbiamo assegnato un nome.
Se vogliamo dare un etichetta ad un campo, dobbiamo usare il tag <label>

Vediamo come creare i campi.
Essi possono essere di testo, dei bottoni, una checkbox, ecc....
Per crearli dobbiamo scrivere: <input type = text>, ad esempio se vogliamo creare un campo di testo.

<form>
<fieldset>
<legend> dati utente</legend>
</fieldset>
<label> Nome: <input type= “text”></label>
<input type=”text”><label> : Cognome </label>
</form>


Il risultato sarà:
dati utente


Vediamo i vari tipi di campi:

  • <input type=”text”> = inserisce una riga di testo
  • <textarea> più righe di testo </texarea>
  • <input type= “password”> = inserisce il campo per una password
  • <input type=”checkbox” name = “option” value=”Accetto”> Accetto termini e condizioni = consente la scelta di più opzioni spuntando una casella
  • <input type= “radio” name = “option” value=”Accetto”> Accetto termini e condizioni = come checkbox, con la differenza che si può spuntare solo una casella
  • <select>
    <option>Privato</option>
    <option>Partita iva</option>
    </select>

= con option e select creiamo dei menù a discesa. Questi contengono tante opzioni, quanti option ci sono tra il campo select.
  • <input type= “submit” value= “invia”> = bottone di invio
  • <input type= “submit” value= “cancella”> = riporta i tutto ai valori di default
  • <input type= “image” src =”immagine.jpg” value= “invia”> = hanno lo stesso effetto dei valori di invio ma con la differenza che viene visualizzata un'immagine al posto del bottone
Nota che qui il tag input non ha bisogno di chiusura.
Vedremo che questi tag possono essere formattati a piacere.


Alla prossima....