Ma come si fa a costruire un e-commerce? Ci voglio vendere i libri di scacchi di mio nonno che era stato campione dell’ adriatico nel 1922

E vabbè allora procuriamoci un template di base perché bisogna lavorarci sopra puoi usare bootstrap ad esempio come framework. All’ indirizzo http://www.farwebdesign.com/onlinestore/ web design Umbria segnala il nostro tentativo di online store. La prima cosa da fare é modificarlo in base alle nostre esigenze, fare in modo che corrisponda alle nostre aspettative come funzionalità e a quelle del cliente senza alterare le meccaniche di base user-friendly. Si ma gli scacchi? Di solito questi tutorial sono sempre inficiati o disturbati da qualche notizia all’ ultimo grido tipo ma avete visto lo studio di Reti del 1921 all’ indirizzo http://www.farwebdesign.com/chessproject/details.php?pos_id=14 dove il bianco deve dare un colpo al cerchio e uno alla botte? Il pedone nero sembra come la barchetta della famosa cantante come lo si ferma se non sfruttando le potenzialità del proprio pedone bianco? Il Bianco muove e patta. Dal punto di vista didattico siamo di fronte a dei meccanismi elementari ma la pratica agonistica fa fare brutti scherzi a volte, qui la soluzione é semplice: 1.Rg7! h4 (1…Rb6 2.Rf6! h4 3.Re5!) 2.Rf6! Rb6 (se 2…h3, 3.Re6 h2 4.c7 Rb7 5.Rd7) 3.Re5! Ora se 3…Rxc6 il Re Bianco si porta in f4 e ferma il pedone, mentre se 3…h3 4.Rd6. Ma non tergiversiamo e torniamo a bootstrap, le classi del framework le conosci? Ad esempio per vedere i tre riquadri nella pagina che larghezza ho messo come colonne e come viene definito il parametro? Ogni oggetto da vendere nello store ha questa dimensione: prima si imposta un div class= container

, poi si imposta la riga con

poi finalmente viene definita la larghezza, lo spazio occupato dall’ elemento con

dove la classe qui ha una bella sostanza in quanto parliamo di una griglia orizzontale composta da dodici colonne e il tre si somma agli altri due elementi e poi inserisco un oggetto panel finale con

. Ma web designer Umbria lavora in coppia con il programmatore a meno che l’azienda sia centrata sul famoso faccio tutto io per cui deve pensare a semplificare la vita allo sviluppatore. Da notare come sia intanto riuscito ad implementare una lista ordinata contrassegnata dalla classe tematica

    che forma una gabbia a tutti gli elementi UL ed LI racchiusi mentre il compito di spostare tutta la lista a sinistra viene assegnata a una proprieta del foglio stile che é

    float:left;margin-left:50px;margin-right:200px”;> per l’appunto float: left;. Ora un buon web designer non lascia questi settaggi in giro per la pagina ma affianca in un foglio stile esterno tutte le regole che servono per sovrascrivere il css di default. Ora i CSS si chiamano fogli di stile a cascata perché se esistono due regole che parlano dello stesso div viene presa in considerazione l’ultima appunto in cascata per cui ci sarà un link esterno che punta dopo al css di fabbrica al nostro style che servirà a personalizzare. va bene ma adesso che hai una impostazione di base che devi fare? Devi spezzare il codice nelle sue parti costituenti ad esempio HEADER, NAV, CONTENT, ASIDE, FOOTER etc e tutto quello che nella pagina crea ridondanza per il programmatore e semplificare tutto con degli include di php ad esempio se voglio spezzare il codice in porzioni di codice più piccole e in particolare il footer scriverò nella pagina principale, evidenzia web design Umbria, e farò lo stesso come marcatura nello spazio della pagina per tutti gli altri elementi. Un altra questione da sottolineare per la responsività dei siti web é quella di settare il tag meta come si deve: dove l’initial-scale-1 é un parmatero molto importante e ricordarsi di catturare tutto quello che serve per la costruzione della nostra web app con i CDN giusti affidabili per catturare Jquery, bootstrap js e css quindi qualcosa del tipo:

    https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
    https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

    Di solito la tecnica migliore come web design Umbria prevede che alcuni di questi link finiscano sotto il body in modo da velocizzare prima il caricamento della pgina principale e solo dopo preoccuparsi di agganciare le risorse esterne per lo sviluppo della nostra applicazione. Web design Umbria infine fa notare che il famoso componente PANNELLO in bootstrap si può dividere esattamente a sua volta con l’uso delle classi in varie sezioni come header content e footer:

    TITOLO
    Image

    Quindi adesso la fase due prevede per il lavoro di web design Umbria che si crei la struttura file system giusta come cartelle e codice esterno da posizionare per la questione di separare il codice presentazione o il vestito dalla sostanza che dovrà palleggiare lo sviluppatore, quindi css esterni, quindi include e tutto quello che può svuotare la pagina da ogni ridondanza inutile di codice con l’uso appunto degli include. In uno dei prossimi articoli di web design Umbria parleremo di come sia così facile diventare GM negli scacchi con il metodo sette kg in sette giorni ma questa é un’ altra storia, per ora il succo é che dovete tirare su un eccomerce dal nulla e che dovete familiarizzare con bootstrap, ajax, php e mysql e html5 e css3 come se non ci fosse un domani!

    Annunci

La formazione di Umbriaway Consulting: PHP 2

HTMLWeb Design Umbria nell’ ottica di un rafforzamento del proprio skill affronta in questa seconda lezione su php una rapida panoramica sul linguaggio di marcatura ipertestuale HTML oggi evoluto in HTML5. Come detto HTML é un linguaggio di contrassegno ossia di descrizionedelle pagine web e non possiede di tutte quelle caratteristiche proiprie di un linguaggio di programmazione. E’ interpretabile unicamente dal browser. Nessuna variabile, ciclo, struttura o tipo di dati quindi. L’unica interazione con l’utente é quella offerta dai form o moduli che spedisce al server tramite request. Linguaggio di contrassegno per ipertesti é la traduzione dell’ acronimo. index2Essendo un linguaggio interpretato due browser diversi possono visualizzare in due modi diversi le stesse marcature. L’elemento caratterizzante é il <TAG> o targhetta di contrassegno. Gli elementi sono fondamentali nel testo, esempi sono testate, tabelle, paragrafi e liste. Un end tag si riconosce per la presenza dello slesh di chiusura <tag></tag>. Un documento HTML si compone di una intestazione o header con tag come head title e script di collegamento e il body il corpo del documento dove ci sono i contenuti visibili a schermo.

<html>

<head>

<title>Titolo della pagina…</title>

</head>

<body>

<!– Questo è un commento! –>

</body>

</html>

I tag in grassetto sono essenziali e caratterizzano l’identificazione della pagina HTML sui browser. Nell’ <head> si possono inserire tutte quelle info descrittive che servono anche a posizionare meglio la pagina sui motori di ricerca:

<head>

<meta charset=”utf-8″>

<meta name=”description” content=”Umbriaway il sito leader della formazione”>

<meta name=”keywords” content=”html wml xml smil javascript js dhtml xhtml vbscript coldfusion photoshop paint shop pro risorse webmaster webdesigner flash grafica css applet java asp cgi”> <title>Umbriaway Consulting the best</title>

</head>

indexLe keywords (a seconda del webmaster) compaiono separate da virgola, da punto e virgola, oppure senza alcun segno di interpunzione. Il body ha diversi attributi tipo background e bgcolor altri parametri sono link, vlink e text, ad esempio <BODY TEXT=”CYAN”>. Il testo si può foirmattare con tag di intestazione che vanno dal più grande <H1> al più piccolo <H6>. I paragrafi nel testo sono marcati con il tag <P> e </P> dove si possono decidere gli allineamenti del testo con l’attributo ALIGN. Con <BR> si va a capo. Per creare linee sulla pagina si utilizza <HR> e non necessità del tag di chiusura e si possono settare attributi come align, color, noshade, size, width. Il famoso testo a scorrimento oggi é deprecato ma ai tempi d’oro pioneristici il <marquee> era molto utilizzato. Il testo ha molti tag di formattazione tipo <B>, <I>, <U>. Face, size e color sono attributi del tag <FONT>. Il DIV é molto importante e serve a strutturare le pagine, al suo interno si può decidere l’allineamento del testo con il solito attributo ALIGN. Il <center> si spiega da solo. Per inserire uno spazio si usa un carattere di ESPACE, &nbsp; con il punto e virgola finale. Il carattere apice e pendice hanno rispettivamente i marcatori <SUB> e <SUP>. Con <PRE> si ottiene testo preformattato. Gli ancoraggi servono per saltare da una pagina all’ altra ma con le LABEL anche all’ interno dello stesso documento. Per i collegamenti multipli si possono usare anche le mappe ipertestuali. Per consentire il download si usa sempre il tag ancora del tipo <A href=”file.zip”>file</a>. Con l’HTML si possono creare elenchi numerati e puntati o non ordinati. Esistono poi le liste di definizione con i tag <DL> che incorporano <DT> e <DD>. Gli elenchi si possono anche nidificare. Un ampia personalizzazione avviene con le tabelle oggi in via di estinzione e i tag tipo <table><tr><td> dove gli attributi cellspacing, cellpadding, border definiscono gli ingombri. Rowspan e Colspan uniscono le celle adiacenti in celle più grandi. Il gruppo di attributi align, valign, nowrap. Con <IMG SRC=”immagine.gif”> incorporiamo immagini e all’ interno possiamo definire gli attributi ALT, WIDTH, HEIGHT, BORDER, HSPACE, VSPACE. w3cL’attributo ALIGN anche qui é gestibile con espressioni tipo top, middle, bottom, left, right. I frame stanno scomparendo ma si gestiscono con il tag <IFRAME> dentro i <FRAMESET> e vari attributi attivi come scrolling, noresize, name etc. Oggetti multimediali come suoni, filmati e plug-in si possono incorporare con varie modalità secondo web design umbria ma non solo, molto diffuse sono ad esempio le APPLET JAVA. Ma la vera forza interattiva alla fine di questo rapido riassunto consiste nei FORM, gestibili con PHP, dove l’utente invia le sue richieste client side al server per chiedere informazioni o iscriversi a un corso di uncinetto. La validazione dei dati é molto importante e controllabile tramite PHP. Nella prossima sessione vedremo come acquisire competenze per inserire FORM gestendone eventi e azioni, gli elementi essenziali dei form, come selezionare gli oggetti giusti e saper gestire il flusso del codice per la gestione degli errori nei form. Vedremo quindi, le caselle di testo e le aree di testo, opzioni esclusive con radio button, opzioni multiple con i check box, i menu con le select option, i pulsanti reset-button-image-password-submit e per finire i campi nascosti! Ed ora un rapido riassiunto. Per creare un documento HTML metterò un tag <HTML> e </HTML> alla fine. Le due strutture principali sono <HEAD> e <BODY>. Esistono due tipi di ancoraggio, interno ed esterno. Quale comando permette di richiamare una pagina al posto di quella attuale in una nuova window usando come link l’immagine a.jpg? Risposta: <a href=”nuovapagina.html” target=”_blank”><img src=”a.jpg”></a>. I frame sono finestre indipendenti che possono contenere file HTML indipendenti tra di loro. Per creare una etichetta per un ancoraggio interno si usa una marcatura tipo: <A Name=”#etichetta”>. E concludiamo con un quiaz che spingerà tutti a studiare l’HTML più approfonditamente magari tramite le ultime novità del W3C, cosa produce il seguente tag <a href=”f2.html#abc” target=”b”>???

Web Design Umbria affronterà nella prossima sessione di consolidamento un tema cruciale, quello dell’ interazione con l’utente tramite i FORM che rappresentano un ponte di collegamento tra parte statica e dinamica!