css

Umbriaway Consulting e i Cascade Style Sheet 1

css3-nFogli di stile a cascata che saranno mai si chiede introspettivo web marketing Umbria! Controllare il look and feel di un documento, roba da grafici? Che ci fai della struttura HTML se non la rivesti con orpelli di presentazione? Separtare lo stile dai contenuti che figata pazzesca. Un lavoro ben fatto dovrebbe essere quello che hai i contenuti da una parte e i css dall’ altra separati in maniera ordinata! Vediamo i fogli di stile inline. Hai un singolo stile da applicare a un unico elenmento direttamente sulla parte interessata:

<p style=”color:white;background-color:gray;”>

Questo é un esempio di style in linea Umbriaway!

Vediamo adesso i fogli di stile incorporati, definiti nell’ head:

<HTML>

<HEAD>

<TITLE>Umbriaway the best!</TITLE>

<style>

p {

color:white;

background-color:gray;

}

</style>

</HEAD>

<BODY>

<p>questo é il paragrafo della formazione umbriaway</p>

</BODY>

</HTML>

Fogli di stile esterni.

<HTML>

<HEAD>

<TITLE>Umbriaway the best!</TITLE>

<link rel=”stylesheet” href=”umbriaway.css”>

</HEAD>

<BODY>

<p>questo é il paragrafo della formazione umbriaway</p>

</BODY>

</HTML>

il file umbriaway.css conterrà al suo interno:

p {

color:white;

background-color:gray;

}

programming-in-cssCSS é composto da un insieme di regole di stile che il browser interpreta e che applica in corrispondenza dell’ elemento presente nel tuo documento. Per esempio per definire una headline H1 potremmo scrivere h1 {color:orange;}. In dettaglio h1 viene definito SELETTORE la PROPRIETA’ è COLORE e il VALORE arancione. Il blocco istruzioni che può definire più dichiarazioni é separato da un punto e virgola ma in alcune dichiarazioni abbiamo anche una lista di proprietà –>valore separate da virgole. Il selettore serve a definire l’elemento dove verrà applicato lo stile. Un tipo di selettore che marca un paragrafo lo abbiamo visto anche in precedenza:

p {

color:red;

font-size:130%;

}

Le singole dichiarazioni finiscono sempre con ; mentre un gruppo di dichiarazioni compare sempre tra i blocchi graffa {}

Un ID selettore serve a contrassegnare una istruzione presente nel CSS che ha un ID attributo in modo da definire le aree di applicazione dello stile:

esempio di superparagrafo umbriaway

<p>paragrafo fuori marcatura selettore ID</p>

Il CSS avrà al suo interno:

#intro

{

color:white:

background-color:gray;

}

Selezionare un elemento con specifico ID di riconoscimento e usare un carattere hash per seguire l’ID dell’ area da stilizzare.

Un CLASS selettore é molto simile con la differenza che l’identificazione univoca data da un ID qui ha il vantaggio di avere una porzione di codice che lavora su più pagine essendo il classo applicabile ovunque senza univocità dell’ elemento:

esempio di superparagrafo umbriaway

paragrafo normale

esempio di nuova stilizzazione umbriaway

il css:

.uwfirst

{font-size:200%;}

Poi ci sono i selettori a cascata. Nel senso che devo intervenire all’ interno di un area univoca che ha elementi interni da stilizzare:

esempio di superparagrafo umbriaway

paragrafo normale

esempio di nuova stilizzazione umbriaway

il css:

#umbriaway.uwfirst em {

color:white:

background-color:gray;

}

se avessi voluto modificare tutti i paragrafi di quel div specifico avrei scritto:

#umbriaway.p {

color:white:

background-color:gray;

}

Per fare in modo che i browser ignorino cose scritte si usa il commento multiriga: /* questo é un supercommento umbriaway che non verrà visualizzato */

Per ereditarietà si intende un elemento figlio che prende le caratteristiche del genitore ossia se definisco nell’ head una porzione di style dove dico che il colore del testo sarà fucsia e il font-family:Gothic 456, quando scriverò nel body un paragrafo marcato <p> figlio del parent lo vedrò con le caratteristiche definite nel body inserito in head. Se nel body definisco anche un class con .pippo assegnando colore blue e sotto avrò un div marcato class=”pippo” avrò lo stesso colore anche se il body é magari genericamente settato su colore green. La prima sessione di allenamento targata web marketing Umbria é conclusa, alla prossima!

 

Annunci
javascript

JavaScript con Umbriaway Consulting, training 1!

indexContenuti con HTML, presentazione con i CSS e il comportamento interattivo con JavaScript, la santissima trinità da web developer acquisita da illuminati, il tutto lato client. Ma sviluppo web Umbria non vuole essere sacrilego quindi entra subito nel vivo di Java Script prima sessione. Le pagine web senza interattività non avrebbero nulla da offrire! Precisiamo subito che JavaScript si trova all’ interno del browser e puoi mostrare informazioni aggiornate nell’ unità di tempo, individuare il browser utente, validare form e controllare dati, creare cookies, cambiare le pagine dinamicamente e tanto altro di più! Gli script possono essere server side o client side nel primo caso abbiamo a che fare con un host, nel secondo con il nostro computer di casa che dispone di un software chiamato navigatore. jsJavaScript ha anche a che fare con situazioni server side (Node ad esempio o Angular JS) ma in questo caso studieremo la forma classica lato utente. Per partire abbiamo bisogno del solito editor di testo, come notepad ++ ad esempio. Come detto JS vive all’ interno di un documento HTML e può insinuarsi sia all’ interno dell’ HEAD come riferimento da eseguire poi nel corpo o direttamente nella pagina dei contenuti BODY. JS va inserito come istruzioni tra i tag .,…. Vediamo la classica forma del ciao umbriaway ciau!

<HTML>

<HEAD>

<TITLE>wow che network umbriaway!</TITLE>

</HEAD>

<BODY>

document.write(“ciao ciao supersviluppatore eh”);

</BODY>

</HTML>

la funzione document.write() è usata per scrivere testo nell’ HTML ma può includere anche dei tag html. Si usa molto anche in fase di testing per stampare variabili e verificare la corretta funzionalità dei cicli. Come si diceva permette anche di formattare il testo:

Catturajs

risultato il testo sarà grassettato.

Vediamo adesso l’uso JS nell’ head che ha lo svantaggio di rallentare la pagina. Gli attributi language=”javascript” type=”text/javascript” sono orpelli non necessari il primo é anche deprecato dall’ evoluzione tecnologica

 

Vediamo adesso un JS esterno che ha il vantaggio di rendere più ordinata l’architettura progettuale e rendere più fluida la velocità di rendering della pagina. I file esterni hanno estensione .js e per addizionarli si usa l’attributo src

js1

e umbriaverde.js al suo interno avrà scritta l’istruzione:

alert(“questo é un terribile avvertimento!”);

Per commentare su singola linea si usa il doppio slesh //. Per i commenti multiriga si usa /* seguito dalla chiusura */. Questa sessione di allenamento si chiude qui, sviluppo web Umbria proseguirà le sue scorribande interattive entrando nel vivo di questo linguaggio nella seconda lezione!

php

PHP 2 secondo Umbriaway Consulting: intro, variabili e costanti

 

ide-php-confrontoPosizionamento strategico delle parole chiave o Umbriaway Consulting nell’ ottica della formazione e dello sviluppo digitale prefissato come vision e obiettivi inaugura il corso di PHP per iniziati! PHP é l’acronimo di Hypertext Preprocessor e indica un linguaggio di programmazione molto diffuso (wordpress e facebook sono in php!) lato server open source che é in grado di generare contenuti dinamici, manipolare file, raccogliere dati da un form, manipolare informazioni all’ interno di un database, controllare accessi utente, criptare dati e tanto altro. Per acquisire una comprensione base di PHP o server side programming language servono basi acquisite dal linguaggio di scripting HTML. PHP é multipiattaforma quindi gira su linux, windows, unix, Mac OS X e altro. E’ compatibile con tutti i server moderni come Apache e IIS. Supporta una grande quantità di database, MA SOPRATTUTTO IS FREEEEEEEEEEEEE!!!!!!!!!!!!!!!!!!!!!!!!!!!

Per iniziare occorrerà installare uno di quei pacchetti completi tipo XAMPP dove tutto é integrato tra mysql database, server apache in locale e parser PHP. Per creare file occorre uno dei tanti editor (ce ne sono una infinita) ma non essendo questa la sede per specificare le operazioni preliminari per partire accingiamoci ad entrare direttamente nel vivo del codice, creiamo ad esempio il file buonanotte.php che di solito in XAMPP finisce come locazione sotto C:\xamp\htdocs per essere correttamente richiamato dal 127.0.0.1 o localhost dalla finestra del browser. Un file PHP deve avere estensione .php;

<?php

echo ‘buonanotte da umbriaway!’;

?>

uno script PHP può essere inserito ovunque in un documento HTML Ha uno stato iniziale di inizio chiamata che parte con <?php e il tag si chiude con ?> e in mezzo troviamo ovviamente tutte le istruzioni che il server parserizzerà. Il classico HTLM con ciao mondo é il seguente:

<HTML>

<HEAD><TITLE>ciao mondo in php!</TITLE></HEAD>

<BODY>

<?php

echo “ciao dagli antichi umbri!”;

?>

</BODY>

</HTML>

Tutte le istruzioni finiscono sempre con il punto e virgola. In alternativa potremmo includere uno script PHP con la convenzione <script language=”php” src=”pippo.php”>. Si può anche usare la convenzione semplice con <? istruzioni ?> senza il php iniziale che comunque é più corretto. La funzione “echo” é usata da php per l’output di testo e stampa a video valori indifferentemente tra apici singoli o doppi. Non richiede parentesi ed é considerato un metodo costruttore non una funzione. Le istruzioni come già detto finiscono sempre con il punto e virgola per essere processate senza errori:

<? php

echo “A”;

echo “B”;

echo “C”;

?>

L’ HTML può essere processato all’ interno di PHP:

<?php

echo “<strong>Questo é testo in evidenza</strong>”;

>

I commenti a singola linea sono caratterizzati da doppio slash // e quelli multiriga da /* e */

Il simbolo del dollaro caratterizza la creazione di una variabile che ha bisogno della sua assegnazione.

$nome_variabile=value;

Qui il nome delle variabile é case sensitive $nome_variabile non é lo stesso di $NOME_VARIABILE. Il nome della variabile non può essere un numero. Può contenere solo caratteri alfanumerici e underscore _ che si utilizza anche per i nomi (ma non i numeri!).

<? php

$name = ‘pippo’;

$age=25;

echo $name;

// output ‘pippo’

?>

PHP non obbliga a dichiarare le variabili riconosce automaticamente il tipo di dato dal suo valore: stringa se é tra virgolette e senza come numero.

Le costanti sono variabili che una volta definite non possono essere cambiate, name e value specificano nome e valore della costante, case insensitive viene usato per stabilire se il nome é o non é case insensitive, di default lo é:

define (name, value, case-insensitive)

<? php

define(“UW”, “umbriaway the best”);

echo UW;

// output ‘umbriaway the best!’

?>

se volessi evitare problemi case sensitive e quindi posso scrivere indifferentemente maiuscolo o minuscolo scriverei:

<? php

define(“UW”, “umbriaway the best”, true);

echo UW;

// output ‘umbriaway the best!’

?>

ide-php-confronto1Mentre per creare una variabile serve il simbolo del dollaro qui per definire le costanti é necessario solo l’uso della parola chiave define. La prima sessione di studio si é conclusa, posizionamento strategico delle parole chiave per ora vi saluta con un ammonimento: sperimentate, sperimentate, sperimentate!

php

La formazione di Umbriaway Consulting: PHP 1

php_mysqlCoerenti con le politiche di sviluppo di Umbriaway Consulting si parte a formare la figura dell’ aspirante web developer. Il software é sempre di più orientato verso la rete e la condivisione e il web genera figure professionali nuove: web manager, web developer e web designer esperti di ottimizzazione e di web marketing sono richieste sul mercato. Quello che conta oggi é garantire la customer satisfaction e servono approcci modulari e flessibili per ingegnerizzare il software e creare veloci e solide interfacce performanti. Per quanto riguarda la programmazione server side PHP é un linguaggio di scripting che rientra nella famiglia open-source, é utilizzabile su più piattaforme, ha comandi che si possono incapsulare nella parte frontale delle pagine web con una elaborazione di separazione nascosta fatta da web server Apache, genera contenuti dinamici on-the-fly, si interfaccia con una marea di DB. Con PHP e MySQL si può sperimentare il potenziale di sviluppo, facendo direttamente sul campo e studiando contemporaneamente i dettagli di implementazione: come sempre la magia del fare é quella che fa la differenza! Avvertenza: alcuni script hanno un funzionamento vincolato alle versioni sviluppo di php, ovviamente la più recente consente maggiore libertà di implementazione e anche il modo di programmare si evolve con nuove funzionalità! Procediamo in questa prima sessione a studiare la rete internet, il www, i protocolli, l’instradamento delle informazioni, il protocollo TCP, i protocolli applicativi HTTP, FTP e mailto, Uniform Resource Locator, il significato di server web. foto_php.450La rete delle reti dove sono le nostre pagine web é costituita da una serie di computer dislocati nel mondo, è un sistema informativo complesso che unisce migliaia di individualità, milioni di nodi collegati in una rete aperta regolati dal protocllo di comunicazione TCP/IP. Nasce alla fine degli anni ’60 con il progetto ARPANET della difesa americana e passa a unire università locali. Si creano dorsali o backbone e nel 1986 20000 computer sono connessi. Negli anni novanta la rete esplode e nascono nuove tecnologie di comunicazione, vengono sviluppati browser ed eruttano applicazioni distribuite, il linguaggio di contrassegno lato client noto come HTML stimola tutti a iniziare una assurda caccia all’ oro, a occupare nuovi spazi e praterie che vengono ad aprirsi grazie a queste nuove opportunità nate da Internet. Nascono i primi linguaggi di programmazione come vbscript o jscript, le applet java incapsulate nelle pagine, animazioni in flash considerate oggi oggetti da museo solo per citare qualche novità dei tempi. I primi linguaggi interpretati dal browser distinguevano anche il modo di funzionare dei primi browser, con Netscape la parserizzazione avveniva contemporaneamente tra testi e immagini mente con l’avvento di Explorer si ebbe un lavoro del parser differenziato. Dopo Internet la rete globale caratterizzata dall’ uso dei protocolli TCP/IP e dall’ architettura client/server nascono le intranet che usano la stessa logica dei protocolli citati. WEB e FTP sono due servizi dispensati dai server omonimi che comunicano con i client web ed FTP e che sono noti anche come HOST. Per gestire le connessioni esistono Server router che instradano le informazioni e ISP che distribuiscono punti di accesso per la connessione. Per host si intende una risorsa che ha al suo interno delle informazioni che diventano grazie ad internet condivisibili. Per protocollo www che fa parte di Internet si intende l’insieme delle pagine ipermediali, contenuti video audio e testo, che confluiscono sui browser, la parte finale front-end durante l’acquisizione dei dati. Un protocollo di comunicazione é un pacchetto di regole che servono a regolare la comunicazione tra due parti che si scambiano informazioni, del tipo docente e allievo se vogliamo immaginarci una situazione reale e non solo astratta. La comunicazione si sviluppa su vari livelli da quello fisico a quello del software ed esistono varie parti in questa stratificazione a pila definite dal modello ISO/OSI che partono dal basso e risolvono in progressioni gli step fino alla visualizzazione a video dell’ utente passando per i protocolli di trasporto e altri artefici dislocati appunto su sette livelli: fisico, data link, network con ip e protocolli di routing, trasporto vero e proprio con TCP e UDP, session. Presentation e application finale. Un indirizzo IP é un numero a 32 bit che viene scritto come quattro segmenti di otto bit ciascuno (byte) espressi in forma decimale e separati da punti. L’indirizzo é composta dalla parte campo rete e campo host. Il campo rete identifica all’ interno di internet la rete a cui l’host é connesso (così che tutti gli host di una stessa rete hanno lo stesso campo rete), mentre il campo host identifica un particoilare computer connesso a una certa rete. Gli indirizzi IP vengono suddivisi in tre classi che si differenziano in funzione di quanto nei 4 bytes sono usati per identificare la rete e quanti gli host. A: 1 bytes e 3 per il campo host; C é l’opposto ed equilibrio per la classe B divisa in maniera paritaria. 436Il protocollo IP4 non basta più per connettere in maniera univoca il globo nelle sue particelle elementari e quindi si sta diffondendo IP6 che usa 128 bit e un numero stratosferico di connessioni distinte. Per conoscere il proprio indirizzo IP durante la navigazione basta digitare dal prompt dei comandi ipconfig, Tra il nodo mittente e quello destinatario esistono molteplici nodi intermedi definiti router. I percorsi dei dati vengono tracciati dalle tabelle di routing. Gli indirizzi IP hanno una corrispondenza tracciabili con un domain name server in modo da semplificare le richieste. Per Name Server intendiamo un gigantesco data base che regola le richieste senza coinvolere gli indirizzi IP corrispondenti che vengono interrogati dagli host. Per verificare questi percorsi esiste anche un sito interessante che é www.visularoute.it; i dati che viaggiano da un computer a un altro vengono pacchettizzati con l’aggiunta di una intestazione tramite il protocollo TCP analogamente a una lettera che viene contrassegnata da un indirizzo. I pacchetti vengono poi passati al protocollo IP che aggiunge un altro contrassegno sopra l’header per instradare le informazioni che vengono smistate tramite router, dispositivo di comunicazione che interconnette due o più reti e che direziona i pacchetti per il recapito ottimizzando il traffico in modo adeguato. Elephpant.svgQuando la cartolina arriva a destinazione gli header vengono rimossi e i pacchetti riassemblati nella loro forma convenzionale di comprensione semantica. Il protocollo HTTP trasferisce dati ipertestuali e si colloca sopra il protocollo TCP/IP nell’ architettura concettuale della comunicazione di rete. Abbiamo messaggi di request e di response: si apre il dialogo tra client e server, il browser chiede una risorsa, il server risponde fonendo la richiesta, si chiude il dialogo o la connessione. Più dettagliatamente il browser analizza l’URL e ne estrae il dominio, il browser estrapola il DNS e ottiene l’indirizzo IP corrispondente al nome di dominio, il browser apre un canale tramite TCP con il server sulla porta 80, con la connessione stabilita client e server si parlano tramite HTTP e la pagina viene caricata in locale. I pizzini che HTTP usa hanno un header preceduto da respons o request e un body. Nell’ intestazione iniziale si ritrovano anche i metodi per la spedizione tipo POST e GET ma possiamo anche trovare altro tipo HEAT, TRACE o PUT etc. Nelle risposte comparirà anche il tipo di esito dato dal server, ad esempio la classe 400-499 contempla una richiesta incompleta, il famoso 404 per esempio di server non trovato.Il protocollo FTP viene utilizzato per trasferire file. phpI protocolli SMTP e POP vengono utilizzati per far funzionare la posta elettronica. URL sta per risorsa localizzata univocamente, l’indirizzo completo dove andare a reperire l’oggetto cercato. Per server web si intende un programma in esecuzione che fornisce le pagine web a tutti i client che ne fanno richiesta, pagine che nella maggior parte dei casi vengono costruite dinamicamente interrogando dei database. Il motore PHP parserizza le pagine le processa e restituisce la parte statica all’ utente dopo aver generato dinamicamente i contenuti. Facciamo un rapido riepilogo. Il router instrada i pacchetti mentre ISP distribuisce le connessioni ai client web e host é sinonimo di computer che ospita un sito. In una rete il protocollo di comunicazione stabilisce gli aspetti fisici e logici della comunicazione secondo una gerarchia che prevede che ogni protocollo si appoggi a quello di livello immediatamente superiore. Un Indirizzo IP4 viene codificato su 32 bit contro i 128 di IP6. La comunicazione in ordine logico secondo il protocollo HTTP funziona con il browser che chiede a un server web, si apre una connessione TCP tra client e server il server risponde dando possibilmente la risorsa richiesta e si chiude la connessione. A livello di dettaglio funziona che sulla porta 80 si apre una connessione, browser e server si parlano tramite protocollo HTTP, il browser consulta DNS per ottenere l’indirizzo IP, viene estratto il dominio corrispondente e la pagina ipertestuale é caricata sul browser. Per quanto riguarda un processo PHP tra client e server accade che prima si cerca la risorsa e la si localizza, parte il motore di scripting per l’interpretazione lato server, se non ci sono errori verrà generata la parte statica da rispedire al browser a liuvello locale di client. deleteWishNella prossima sessione di allenamento vedremo il linguaggio di scripting HTML e osserveremo la formattazione del testo, gli stili fisici, la formattazione del carattere, gli ancoraggi, le mappe ipertestuali, il download dei file,le tabelle, le immagini, i frame, l’uso dei form in HTML, gli oggetti multimediali. Lo scopo é quello di riconoscere la sintassi HTML, definire pagine web con collegamenti ipertestuali, includere elementi multimediali, scrivere pagine ed eseguirle tramite browser. Durante la prima lezione4 in sostanza abbiamo familiarizzato con i tipi di rete, locali e Internet; i concetti client-server e host adesso dovrebbero essere più chiari, con l’instradamento delle informazioni, con gli URL, riconoscere domini, protocolli di rete ed eventuali host!