docCorso WordPress IASF - Pegotest
download 
Reclamo Transcript
Corso WordPress IASF - Pegotest
Gestire un sito:
Introduzione a WordPress
Andrea Pegoretti,
Cooperativa Anastasis
Programma di massima
● Hands on: smanettiamo subito con
WordPress
● L’inevitabile parte teorica (ma solo un
pezzo): 0010101010101010011110
● Torniamo su WordPress e
approfondiamo le funzioni base
Hands on:
smanettiamo con
Wordpress
http://www.wordpress.com
Risorse
http://commons.wikimedia.org
http://www.dreamstime.com/free-photos
https://www.iconfinder.com/free_icons
http://www.patterncooler.com/
La famigerata parte
teorica
INTERconnected NETworks
“[...] a livello fisico la rete Internet può
essere vista come una complessa
interconnessione di nodi con
funzionalità di ricetrasmissione,
appoggiata a collegamenti trasmissivi
di vario tipo, sia cablati che wireless
(fibre ottiche, cavi coassiali, doppini
telefonici, cavi elettrici in posa anche in
strutture idrauliche, collegamenti
sottomarini, collegamenti satellitari,
collegamenti a radiofrequenza (WiFi) e
su ponti radio) che consentono
l'interconnessione da estremo a
estremo (end to end) di un agente
umano o automatico a un altro agente
[...]“
Wikipedia
Architettura client - server
Indirizzi IP
Indirizzi IP
IPv4 : 2^32 indirizzi = meno di 4,3 miliardi (teorici)
What is my IP address ?
URL e server DNS
http://www.iasfbo.inaf.it/
HTTP Request a fumetti
????
World Wide Web
“ The terms Internet and World Wide Web are often used in everyday speech
without much distinction. However, the Internet and the World Wide Web are
not the same.
The Internet is a global system of interconnected computer networks.
In contrast, the web is one of the services that runs on the Internet.
It is a collection of text documents and other resources, linked by
hyperlinks and URLs, usually accessed by web browsers from web servers.
In short, the web can be thought of as an application "running" on the Internet. “
Wikipedia
Browser
“ A web browser (commonly referred to as a browser) is a software application
presenting and traversing information resources on
for retrieving,
the World Wide Web.
An information resource is identified by a Uniform Resource Identifier
(URI/URL) and may be a web page, image, video or other piece of content.
Hyperlinks present in resources enable users easily to navigate their browsers
to related resources. “
Wikipedia
HTML
<!DOCTYPE html>
<html>
<body>
<p>
<b>This text is bold</b>
</p>
<p> <strong>This text is strong</strong> </p>
<p> <em>This text is emphasized</em> </p>
<p> <i>This text is italic</i> </p>
<p> <small>This text is small</small> </p>
<p> This is<sub> subscript</sub> and
<sup>superscript</sup> </p>
</body>
</html>
This text is bold
This text is strong
This text is emphasized
This text is italic
This text is small
This is subscript and superscript
Pagine dinamiche - PHP
Evoluzione dei contenuti di
Internet
Evoluzione delle tecnologie
1. pagine HTML statiche
2. pagine dinamiche (PHP, asp, jps,...)
3. CMS: Content Management System
→ WYSIWYG editors
4. (pagine HTML statiche)
E finalmente WordPress
http://trends.builtwith.com/cms
Hands on:
smanettiamo di nuovo
Wordpress
(ma stavolta sappiamo un po’
meglio cosa stiamo facendo)
http://www.wordpress.com
Risorse
http://commons.wikimedia.org
http://www.dreamstime.com/free-photos
https://www.iconfinder.com/free_icons
http://www.patterncooler.com/
Gestire un sito:
HTML, CSS, JS
Personalizzare WordPress
Andrea Pegoretti,
Cooperativa Anastasis
Programma di massima
● Un po’ teoria di base su HTML, CSS,
Javascript
● Smanettiamo con HTML e CSS
imparandoli
● Applichiamo le nuove conoscenze:
scassiamo un tema WordPress
● Curiosiamo Drupal
Anatomia di un URL
SGML, XML, HTML
SGML: Standard Generalized Markup Language
XML: eXtensible Markup Language
HTML: HyperText Markup Language
XML e HTML
<tag attributo = “valore”>
contenuto
</tag>
<div>
<div>
Ciao
</div>
</div>
<p class=”ciccio”>
:)
</p>
XML
HTML
http://jsbin.com/agIKaso/4/edit
CSS
selector {
property: value;
}
body {
color: #CC0000;
}
element {}
p {}
.class {}
.piccolo {}
element.class {}
p.piccolo {}
#id {}
#ilmioelemento {}
element:state{}
p:hover{}
#id element element.class .class element {}
#ilmioelemento a span.piccolo .verde em {}
<body style=”color: #333”></body>
<html>
<head>
<style>
body { color: #333; }
<style>
</head>
<body>
ciao
</body>
</html>
<html>
<head>
<link rel=”stylesheet” href=”path/to/css/stylesheet.css”>
<link rel=”stylesheet” href=”path/to/css/stylesheet2.css”>
…..
oppure...
oppure...
Risorse
HTML Reference:
● https://developer.mozilla.org/enUS/docs/Web/Guide/HTML/HTML5/HTML5_element_lis
t
● http://reference.sitepoint.com/html
CSS Reference:
● https://developer.mozilla.org/enUS/docs/Web/CSS/Reference
● http://www.w3schools.com/cssref/css3_browsersupport.
asp
● http://vogtjosh.com/selectors/
Risorse
Tutorial / corsi:
● http://www.themesandco.
com/customizr/guide-css-html-customizrwordpress-theme/
● Un corso "learn by doing":
http://www.codecademy.com/tracks/web
● Un video corso molto interessante:
http://learncss.tutsplus.com/
jQuery
http://jquery.com/
$(“selettore”).funzione(parametri);
$(“#mioid”).hide();
$(“#mioid”).show(“slow”);
http://jsbin.com/OPAZoYE/1/edit
PHP
...codice HTML…
<?php
comandi PHP
?>
...altro HTML...
<html>
<head>
<?php
get_header(); ?>
</head>
<body>
<div id="primary" class="content-area">
<div id="content" class="site-content">
<?php
if ( have_posts() ) {
while ( have_posts() ) : the_post()
{
get_template_part( 'content', get_post_format() )
}
twentythirteen_paging_nav();
}
else {
get_template_part( 'content', 'none' );
}
?>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
</body>
WordPress: tema figlio
http://codex.wordpress.org/Child_Themes
style.css:
/*
Theme Name:
Description:
Author:
Template:
Version:
*/
PEGO Twenty Thirteen Child
PEGO Twenty Thirteen Child
Pego
twentythirteen
1.0.0
@import url("../altervista/style.css");
/* =Theme customization starts here
-------------------------------------------------------------- */
Attributo style in elemento da formattare
Si perdono molti dei vantaggi dei fogli di stile
Si mischia il contenuto con la presentazione
Es. cambiare il colore e il margine sinistro di un
