This document discusses building mobile applications using HTML5 and CSS. It recommends tools like PhoneGap and Xcode and mentions that applications developed in this way can be ported to Android. It provides guidelines for using standards-compliant code, separating HTML and CSS files, and using security features like SSL. It also discusses best practices for mobile design and some PhoneGap-specific features like conditional stylesheets and viewport settings.
NOTE many of these slides used animated GIFs which did not survive PDF export.
A talk about the cost and accessibility of custom HTML components, compared with native HTML elements.
Reminder that most of the CSS isn't useful, it just matches Chrome (Windows) default design. In realistic scenarios you will be creating a custom design.
In that custom design you need to handle static, focus, hover, active and disabled states; and set cursor and user-select.
NOTE many of these slides used animated GIFs which did not survive PDF export.
A talk about the cost and accessibility of custom HTML components, compared with native HTML elements.
Reminder that most of the CSS isn't useful, it just matches Chrome (Windows) default design. In realistic scenarios you will be creating a custom design.
In that custom design you need to handle static, focus, hover, active and disabled states; and set cursor and user-select.
CRO is supposed to be really easy. Everyone can set up an A/B-test in the WYSIWYG editors, the testing tool does all the difficult computations for you and it will tell if you have found a winner. It’s child’s play, right? No, you’re wrong! WYSIWYG editors are very error prone (especially with different browsers) and in order to really analyse and interpret A/B-test results correctly you need a basic understanding of statistics.
This presentation will help you understand:
-The importance of Test Power
-How to correctly set up an A/B-test
-How to analyse test results yourself
-The difference between Frequentist and Bayesian statistics
-How to decide to implement a variation
JavaScript Advanced - Useful methods to power up your codeLaurence Svekis ✔
Get this Course
https://www.udemy.com/javascript-course-plus/?couponCode=SLIDESHARE
Useful methods and JavaScript code snippets power up your code and make even more happen with it.
This course is perfect for anyone who has fundamental JavaScript experience and wants to move to the next level. Use and apply more advanced code, and do more with JavaScript.
Everything you need to learn more about JavaScript
Source code is included
60+ page Downloadable PDF guide with resources and code snippets
3 Challenges to get you coding try the code
demonstrating useful JavaScript methods that can power up your code and make even more happen with it.
Course lessons will cover
JavaScript Number Methods
JavaScript String Methods
JavaScript Math - including math random
DOMContentLoaded - DOM ready when the document has loaded.
JavaScript Date - Date methods and how to get set and use date.
JavaScript parse and stringify - strings to objects back to strings
JavaScript LocalStorage - store variables in the user browser
JavaScript getBoundingClientRect() - get the dimensions of an element
JavaScript Timers setTimeout() setInterval() requestAnimationFrame() - Run code when you want too
encodeURIComponent - encoding made easy
Regex - so powerful use it to get values from your string
prototype - extend JavaScript objects with customized powers
Try and catch - perfect for error and testing
Fetch xHR requests - bring content in from servers
and more
No libraries, no shortcuts just learning JavaScript making it DYNAMIC and INTERACTIVE web application.
Step by step learning with all steps included.
Flash over the years, has been used to prop up the regular browser like a sad old man drinking alone in a pub.
Today browsers come shipped with technology designed to rival flash and aim to shut it squarely out of the game.
Are browser ready to rock without Flash?
Fórum de Software Livre do Serpro RJ 2009Fabio Akita
Esta palestra é muito parecida com a que eu também ministrei no evento Dev in Rio 2009, portanto os slides são quase iguais caso você já tenha baixado.
A apresentação fala sobre filosofias, valores e idéias ágeis e como elas são a fundação da comunidade Ruby on Rails e do ecossistema que se formou ao seu redor.
Alguns dos vídeos mostrados estão disponíveis em http://vimeo.com/akitaonrails.com
These are the slides from my YUI3 presentation at Open Hack Day in London.
Code demo can be found here:
http://blog.davglass.com/files/openhackday/openhackday/code/photos/
CRO is supposed to be really easy. Everyone can set up an A/B-test in the WYSIWYG editors, the testing tool does all the difficult computations for you and it will tell if you have found a winner. It’s child’s play, right? No, you’re wrong! WYSIWYG editors are very error prone (especially with different browsers) and in order to really analyse and interpret A/B-test results correctly you need a basic understanding of statistics.
This presentation will help you understand:
-The importance of Test Power
-How to correctly set up an A/B-test
-How to analyse test results yourself
-The difference between Frequentist and Bayesian statistics
-How to decide to implement a variation
JavaScript Advanced - Useful methods to power up your codeLaurence Svekis ✔
Get this Course
https://www.udemy.com/javascript-course-plus/?couponCode=SLIDESHARE
Useful methods and JavaScript code snippets power up your code and make even more happen with it.
This course is perfect for anyone who has fundamental JavaScript experience and wants to move to the next level. Use and apply more advanced code, and do more with JavaScript.
Everything you need to learn more about JavaScript
Source code is included
60+ page Downloadable PDF guide with resources and code snippets
3 Challenges to get you coding try the code
demonstrating useful JavaScript methods that can power up your code and make even more happen with it.
Course lessons will cover
JavaScript Number Methods
JavaScript String Methods
JavaScript Math - including math random
DOMContentLoaded - DOM ready when the document has loaded.
JavaScript Date - Date methods and how to get set and use date.
JavaScript parse and stringify - strings to objects back to strings
JavaScript LocalStorage - store variables in the user browser
JavaScript getBoundingClientRect() - get the dimensions of an element
JavaScript Timers setTimeout() setInterval() requestAnimationFrame() - Run code when you want too
encodeURIComponent - encoding made easy
Regex - so powerful use it to get values from your string
prototype - extend JavaScript objects with customized powers
Try and catch - perfect for error and testing
Fetch xHR requests - bring content in from servers
and more
No libraries, no shortcuts just learning JavaScript making it DYNAMIC and INTERACTIVE web application.
Step by step learning with all steps included.
Flash over the years, has been used to prop up the regular browser like a sad old man drinking alone in a pub.
Today browsers come shipped with technology designed to rival flash and aim to shut it squarely out of the game.
Are browser ready to rock without Flash?
Fórum de Software Livre do Serpro RJ 2009Fabio Akita
Esta palestra é muito parecida com a que eu também ministrei no evento Dev in Rio 2009, portanto os slides são quase iguais caso você já tenha baixado.
A apresentação fala sobre filosofias, valores e idéias ágeis e como elas são a fundação da comunidade Ruby on Rails e do ecossistema que se formou ao seu redor.
Alguns dos vídeos mostrados estão disponíveis em http://vimeo.com/akitaonrails.com
These are the slides from my YUI3 presentation at Open Hack Day in London.
Code demo can be found here:
http://blog.davglass.com/files/openhackday/openhackday/code/photos/
Join us for a session on building incredible iPad apps with Flex. Too good to be true?
Actually the Flex SDK has a whole set of components and classes suited to easily build
iPad apps. I would even say it's the fastest and easiest way to build iPad apps out there.
Don't believe me? Then come and see how I unravel the hidden gems of the Flex SDK
and build 10 application in less than 60 minutes. You will learn how easy it is to build
powerful view navigation with little code. You will explore all the different components that
the Flex SDK provides you. Additionally you will learn in this code intense talk how to build
effective custom item renders. Wait, there is even more, we'll throw in tips and tricks how
to use Swiz to complement the SDKs built in mechanism to pass data among views, how
to integrate google maps and Mapquest, and how to communicate effectively with a
server using XML and JSON. You will acquire all the secret to build kick-ass applications
that can be deployed on Apple App Store.
Innovation and Trangression: exploring Third Spaces and Excess SpacesSalvatore Iaconesi
lesson about the relationship between transgression and innovation at the Alta Scuola Politecnica in 2016
more info and text of the presentation at
https://www.artisopensource.net/2016/06/27/the-transgressive-spaces-of-innovation/
a presentation about the Third Infoscape, presented at DIS2017 in Edinburgh, http://dis2017.org/
Download the presentation here for the version with full presenter notes:
http://artisopensource.net/DIS2017_ThirdInfoscape_SI.pptx
Cosa è successo e quali sono i prossimi passi delle Erbe Indisciplinate, il workshop della Cura con RuralHub e la Casa delle Erbe.
maggiori informazioni qui:
http://la-cura.it/2016/04/22/report-da-erbe-indisciplinate/
La Cura, Erbe Indisciplinate, presentazione di benvenuto, frameSalvatore Iaconesi
La presentazione di Erbe Indisciplinate, il Sabato, per dare il benvenuto e stabilire il frame del workshop.
Maggiori informazioni qui:
http://la-cura.it/2016/04/22/report-da-erbe-indisciplinate/
Human Ecosystems and the Ubiquitous Commons at the STARTS program meetingSalvatore Iaconesi
Slides from the event:
On December 1st and 2nd 2015, at the European Parliament and Royal Flemish Academy of Belgium for Science and the Arts, in Brussels, Belgium, Human Ecosystems and Ubiquitous Commons will take part “Innovation at the intersection of Arts, Sciences and Technology” event, organized by the STARTS program.
We will present the Human Ecosystems and the Ubiquitous Commons cases as the opportunity for creating value and inclusive, radical innovation through the collaboration between sciences, technologies and the arts, creating impacts for society, administrations and businesses.
more info at:
http://www.ubiquitouscommons.org/ubiquitous-commons-and-human-ecosystems-at-the-starts-program-in-brussels/
this is the presentation for the Ubiquitous Commons held at the NetFutures 2015 event in Brussels, during the CAPS concertation meeting.
more information here:
http://www.ubiquitouscommons.org/ubiquitous-commons-at-netfutures-2015/
here:
http://www.ubiquitouscommons.org/
and here:
http://ec.europa.eu/digital-agenda/en/news/collective-awareness-platforms-sustainability-and-social-innovation-caps-consultation-meeting
Our session at the Brand Management and Communication Master at IED Milan, focused on Imaginary Brands, and the role of troublemakers in the creative industry
Ubiquitous Commons workshop at transmediale 2015, Capture AllSalvatore Iaconesi
Here are the slides from the workshop, with a framing of the concept of Ubiquitous Commons, a series of examples and links, and an update about how the development of the toolkits (legal, technological, philosophical, aesthetic) are going, together with some source code and prototypes.
More info can also be gathered here:
human-ecosystems.com/home/ubiquitous-commons-the-slides-from-the-workshop-at-transmediale-festival-in-berlin
Il territorio si trasforma in un info-scape, una nuova geografia composta dalla realtà fisica, dai dati e dalle informazioni, dalle espressioni delle persone, e dalle relazioni che si instaurano tra persone, luoghi, oggetti e situazioni.
Cosa è e come è fatto un museo ubiquo?
Un museo diffuso sul territorio, in cui dati, informazioni, espressioni, emozioni, saperi ed esperienze si ricombinano fluidamente per rendere leggibile una nuova mappa: relazionale, informazionale, comunicazionale, performativa.
Art is Open Source at Visualize: materials and links
Some links and resources explored at the Visualize talk and workshop in Lecce, Italy, June 2014
more info here:
http://www.artisopensource.net/network/artisopensource/2014/04/17/micro-histories-of-cities-and-ubiquitous-commons-at-visualize-in-lecce/
The Incautious Porn presentation held at SSN2014 in Barcelona.
From the Abstract:
"We have radically changed our perception of what is public and what is private.
While using social networks, search engines and websites determining who has access to our information, our personal details, our habits and preferences is often complex or not easily accessible.
Each person's information is sold hundreds of times each day, while surfing websites and social media sites, with information passing from one provider to the other in ways that are subtle and non-transparent: data collected on one site may be used on other sited to sell us advertisements or to investigate on our lives.
On top of that, most people tend to interpret social media sites as new forms of public spaces, and it is fundamental for service providers' strategies that this perception is maintained, to promote our full disclosure, allowing them to collect even more data about ourselves.
We used the project Incautious Porn to investigate on this scenario, to explore the shifting and blurring of the boundaries of what we perceive as our privacy and as our private and public spaces.
Incautious Porn uses the operations of a fake company systematically invading our privacy (even to the point of performing simulated forms of blackmail) to collect enormous amounts of information which we have used to analyze this scenario.
In Incautious Porn art acts both as a sensor on the transformation of human societies and as a tool for analyzing its effects.
The effects of the Incautious Porn project and communication campaign have been massive, bringing it to the attention of a large, global, audience and, thus, allowing the research team to benefit from a large data set.
Furthermore, the actions of the blackmailing fake-company have been led using an ethical approach: no money was taken from people, and all their personal data has been preserved, also using the initiative as a testing lab for novel privacy and security preservation techniques, and as a campaign for awareness about the transformation of people's perception of contemporary private/public spaces."
more info at: http://www.artisopensource.net/projects/incautious-porn.html
Human Ecosystems - the relational ecosystems of cities for a new definition o...Salvatore Iaconesi
The Human Ecosystems project aims to define the concept of Ubiquitous Commons: the new public spaces in which we live in every day become a new common for the whole city to use, to communicate, collaborate, imagine and desire.
This is a concept we developed for the Helsinki City Library competition.
A near future concept for a library, in which innovative fruition, participation, collaboration and production models are engaged, and in which the library becomes an ubiquitous space for the production of knowledge.
EC(m1) the Cultural Ecosystem of Rome, at Cultur+
the cultural ecosystem of the city of Rome, usable by administrations, operators and citizens to explore the relations established through cultural activities in the city.
It has been presented at Porta Futuro, in Rome, during the Cultur+ event with the first municipality of the city of Rome.
What is the topography of the Innovation Ecosystem in Italy? Who are its main influencers? Who are the hubs? How does information circulate inside it? What are its influences from abroad?
How can we map the Innovation Ecosystem in real-time, using social networks?
AOS will be at the Internet Festival 2013 in Pisa to present the Italian Real-time Ecosystem of Innovation.
The project is part of the Human Ecosystems Project, for which we presented the Cultural Ecosystem of the City of Rome just a few days ago.
The Innovation Ecosystem captures from social networks the real-time data about how people discuss the various topics and modalities of Innovation, and uses Natural Language Analysis, Geo-coding, Network Analysis and Machine Learning techniques and technologies to infer the times, places and relations of Innovation.
These are the slides from the workshop we held at the Internet Festival.
More info here:
http://www.artisopensource.net/2013/10/04/innovation-ecosystems-internet-festival/
The Human Ecosystems project:
http://www.artisopensource.net/projects/human-ecosystems.html
3. COSA USEREMO
PHONEGAP
IOS SDK BY APPLE
XCODE DEVELOPMENT ENVIRONMENT
per scaricare i software:
http://www.phonegap.com/
http://developer.apple.com/
LE APPLICAZIONI SVILUPPATE IN QUESTO MODO POTRANNO
ESSERE IMMEDIATAMENTE PORTATE ALLA PIATTAFORMA
ANDROID (INSTALLARE AMBIENTE DI SVILUPPO ECLIPSE ED
ESEGUIRE IL TOOL DI INSTALLAZIONE APPOSITO FORNITO
INSIEME A PHONEGAP)
5. TUTTO OK?
PERFETTO ALLORA:
IMPARIAMO COME SI COSTRUISCE
UNA APPLICAZIONE IPHONE/IPAD
(MA ANCHE ANDROID, BLACKBERRY, WEBOS,
SYMBIAN...)
USANDO HTML5 E CSS
7. HTML + CSS GUIDELINES & BEST PRACTICES
USE STANDARDS
HTML 4.01
XHTML 1.0
CSS 2.1 and partial CSS3
ECMAScript 3 (JavaScript)
DOM Level 2
AJAX technologies, including XMLHttpRequest
8. HTML + CSS GUIDELINES & BEST PRACTICES
GOOD WEB DESIGN
PRACTICES
USE DOCTYPE
SEPARATE HTML E CSS FILES
WELL STRUCTURED HTML
USE BROWSER INDEPENDENT CODE
9. HTML + CSS GUIDELINES & BEST PRACTICES
USE SECURITY FEATURES
SSL
HTTPS
10. HTML + CSS GUIDELINES & BEST PRACTICES
NO FRAMESETS!
USE BLOCKS! (DIV, SPAN..)
CHECK SIZE OF WEB PAGE
11. HTML + CSS GUIDELINES & BEST PRACTICES
USE THE <SELECT> ELEMENT
USE ALERT, CONFIRM, PROMPT
USE HTML5 AUDIO AND VIDEO
REMEMBER DIFFERENCE BETWEEN
CLICK AND TOUCH
12. HTML + CSS GUIDELINES & BEST PRACTICES
USE CONDITIONAL STYLESHEET
EXAMPLE:
SPECIFY STYLESHEET FOR IPHONE
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
OR, INSIDE THE CSS FILE:
@media screen and (min-device-width: 481px) { ... }
13. HTML + CSS GUIDELINES & BEST PRACTICES
USE VIEWPORT
<meta name = "viewport" content = "width = device-width">
<meta name = "viewport" content = "initial-scale = 1.0">
<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">
<meta name = "viewport" content = "width = 590">
<meta name = "viewport" content = "user-scalable=no, width=device-width">
14. HTML + CSS GUIDELINES & BEST PRACTICES
USE WEBKIT
VEDI THIS LINK PER CAPIRE LE ESTENSIONI DEL BROWSER
MOBILE DISPONIBILE SU IPHONE/IPAD
ESTENSIONI COME:
-webkit-border-image
-webkit-border-radius
-webkit-text-size-adjust
-webkit-tap-highlight-color
-webkit-animation
-webkit-mask
-webkit-transition
16. HTML + CSS GUIDELINES & BEST PRACTICES
EVENTS
RENDERE GLI OGGETTI CLICKABLE PER
CONTROLLARLI DA JAVASCRIPT
<span onmouseover = "..."
onmouseout = "..."
onclick = "void(0)">
WHERE TO BUY
</span>
17. HTML + CSS GUIDELINES & BEST PRACTICES
EVENTS
PER GESTIRE GLI EVENTI MULTITOUCH:
<div Alternatively, register handlers in JavaScript as follows:
ontouchstart="touchStart(event);"
ontouchmove="touchMove(event);" element.addEventListener("touchstart", touchStart, false);
ontouchend="touchEnd(event);" element.addEventListener("touchmove", touchMove, false);
ontouchcancel="touchCancel(event);" element.addEventListener("touchend", touchEnd, false);
></div> element.addEventListener("touchcancel", touchCancel, false);
function touchStart(event) {
// Insert your code here
}
Optionally, get all touches on a page using the touches property as follows:
get the number of touches:
var allTouches = event.touches;
event.touches.length
Optionally, get all touches for the target element using the targetTouches property:
Get a specific touch object at index i:
var targetTouches = event.targetTouches;
var touch = event.touches[i];
Optionally, get all changed touches for this event using the changedTouches property: get the location in page coordinates for a single-finger event:
var changedTouches = event.changedTouches; var x = event.touches[0].pageX;
var y = event.touches[0].pageY;
21. PRENDIAMO UN DOCUMENTO HTML
<html>
<head>
<link rel="stylesheet" href="screen.css" type="text/css" />
<title>Salvatore Iaconesi</title>
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="./">Salvatore Iaconesi</a></h1>
<div id="utility">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href="design.html">Design</a></li>
<li><a href="progetti.html">Progetti</a></li>
<li><a href="ricerca.html">Ricerca</a></li>
</ul>
</div>
</div>
<div id="content">
<h2>About</h2>
<p>Salvatore Iaconesi è ingegnere robotico, interaction designer
artista e insegna cross media design alla Facoltà di
Architettura dell'Università di Roma "La Sapienza".
Adora gli animali, la musica elettronica e il circuit bending.
...
</p>
</div>
<div id="sidebar">
<img alt="una immagine di Salvatore Iaconesi"
src="images/salvatore.png"
<p>Salvatore Iaconesi è ingegnere robotico, artista, interaction
designer e professore di design cross-mediale.
</p>
</div>
<div id="footer">
<ul>
<li><a href="design.html">Design</a></li>
<li><a href="about.html">About</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
<p class="subtle">Salvatore Iaconesi, Inc.</p>
</div>
</div>
</body>
</html>
22. Mettiamo uno stylesheet dedicato
<link rel="stylesheet" type="text/css"
href="iphone.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css"
href="desktop.css" media="screen and (min-width: 481px)" />
23. Controlliamo viewport e scala
<meta name="viewport" content="user-scalable=no, width=device-width" />
24. Creiamo look'n feel iOS in “iphone.css”
body {
background-color: #ddd; /* Background color */
color: #222; /* Foreground color used for text */
font-family: Helvetica;
font-size: 14px;
margin: 0; /* Amount of negative space around the outside of the body */
padding: 0; /* Amount of negative space around the inside of the body */
}
#header h1 {
margin: 0;
padding: 0;
}
#header h1 a {
background-color: #ccc;
border-bottom: 1px solid #666;
color: #222;
display: block;
font-size: 20px;
font-weight: bold;
padding: 10px 0;
text-align: center;
text-decoration: none;
}
#header ul {
list-style: none;
margin: 10px;
padding: 0;
}
#header ul li a {
background-color: #FFFFFF;
border: 1px solid #999999;
color: #222222;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
}
#content, #sidebar {
padding: 10px;
}
#footer {
display: none;
}
25. ANDIAMO OLTRE “iphone.css”
#header h1 a {
text-shadow: 0px 1px 0px #fff;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#ccc), to(#999));
}
#header ul li:first-child a {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
}
#header ul li:last-child a {
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}
26. CREIAMO IL BEHAVIOUR
Nascondiamo gli <UL> nell'#header
#header ul.hide {
display: none;
}
DEFINIAMO LO STILE PER UN PULSANTE CHE AGGIUNGEREMO
TRA UN ATTIMO:
#header div.leftButton {
position: absolute;
top: 7px;
left: 6px;
height: 30px;
font-weight: bold;
text-align: center;
color: white;
text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
line-height: 28px;
border-width: 0 8px 0 8px;
-webkit-border-image: url(images/button.png) 0 8 0 8;
}
#header div.pressed {
-webkit-border-image: url(images/buttonActive.png) 0 8 0 8;
}
Le immagini vengono dalla directory “images” di jqtouch
27. CREIAMO IL BEHAVIOUR
Aggiungiamo jQuery e predisponiamo un file per i nostri script:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="iphone.js"></script>
Dentro iphone.js aggiungiamo:
function jQueryStart(){
$('#header ul').addClass('hide');
$('#header').append('<div class="leftButton"
onclick="toggleMenu()">Menu</div>');
}
function toggleMenu() {
$('#header ul').toggleClass('hide');
$('#header .leftButton').toggleClass('pressed');
}
E nella funzione onDeviceReady() aggiungiamo;
jQueryStart();
Le immagini vengono dalla directory “images” di jqtouch
33. COSA USEREMO
PHONEGAP
IOS SDK BY APPLE
XCODE DEVELOPMENT ENVIRONMENT
per scaricare i software:
http://www.phonegap.com/
http://developer.apple.com/
LE APPLICAZIONI SVILUPPATE IN QUESTO MODO POTRANNO
ESSERE IMMEDIATAMENTE PORTATE ALLA PIATTAFORMA
ANDROID (INSTALLARE AMBIENTE DI SVILUPPO ECLIPSE ED
ESEGUIRE IL TOOL DI INSTALLAZIONE APPOSITO FORNITO
INSIEME A PHONEGAP)
35. TUTTO OK?
PERFETTO ALLORA:
IMPARIAMO COME SI COSTRUISCE
UNA APPLICAZIONE IPHONE/IPAD
(MA ANCHE ANDROID, BLACKBERRY, WEBOS,
SYMBIAN...)
USANDO HTML5 E CSS
37. HTML + CSS GUIDELINES & BEST PRACTICES
USE STANDARDS
HTML 4.01
XHTML 1.0
CSS 2.1 and partial CSS3
ECMAScript 3 (JavaScript)
DOM Level 2
AJAX technologies, including XMLHttpRequest
38. HTML + CSS GUIDELINES & BEST PRACTICES
GOOD WEB DESIGN
PRACTICES
USE DOCTYPE
SEPARATE HTML E CSS FILES
WELL STRUCTURED HTML
USE BROWSER INDEPENDENT CODE
39. HTML + CSS GUIDELINES & BEST PRACTICES
USE SECURITY FEATURES
SSL
HTTPS
40. HTML + CSS GUIDELINES & BEST PRACTICES
NO FRAMESETS!
USE BLOCKS! (DIV, SPAN..)
CHECK SIZE OF WEB PAGE
41. HTML + CSS GUIDELINES & BEST PRACTICES
USE THE <SELECT> ELEMENT
USE ALERT, CONFIRM, PROMPT
USE HTML5 AUDIO AND VIDEO
REMEMBER DIFFERENCE BETWEEN
CLICK AND TOUCH
42. HTML + CSS GUIDELINES & BEST PRACTICES
USE CONDITIONAL STYLESHEET
EXAMPLE:
SPECIFY STYLESHEET FOR IPHONE
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
OR, INSIDE THE CSS FILE:
@media screen and (min-device-width: 481px) { ... }
43. HTML + CSS GUIDELINES & BEST PRACTICES
USE VIEWPORT
<meta name = "viewport" content = "width = device-width">
<meta name = "viewport" content = "initial-scale = 1.0">
<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">
<meta name = "viewport" content = "width = 590">
<meta name = "viewport" content = "user-scalable=no, width=device-width">
44. HTML + CSS GUIDELINES & BEST PRACTICES
USE WEBKIT
VEDI THIS LINK PER CAPIRE LE ESTENSIONI DEL BROWSER
MOBILE DISPONIBILE SU IPHONE/IPAD
ESTENSIONI COME:
-webkit-border-image
-webkit-border-radius
-webkit-text-size-adjust
-webkit-tap-highlight-color
-webkit-animation
-webkit-mask
-webkit-transition
46. HTML + CSS GUIDELINES & BEST PRACTICES
EVENTS
RENDERE GLI OGGETTI CLICKABLE PER
CONTROLLARLI DA JAVASCRIPT
<span onmouseover = "..."
onmouseout = "..."
onclick = "void(0)">
WHERE TO BUY
</span>
47. HTML + CSS GUIDELINES & BEST PRACTICES
EVENTS
PER GESTIRE GLI EVENTI MULTITOUCH:
<div Alternatively, register handlers in JavaScript as follows:
ontouchstart="touchStart(event);"
ontouchmove="touchMove(event);" element.addEventListener("touchstart", touchStart, false);
ontouchend="touchEnd(event);" element.addEventListener("touchmove", touchMove, false);
ontouchcancel="touchCancel(event);" element.addEventListener("touchend", touchEnd, false);
></div> element.addEventListener("touchcancel", touchCancel, false);
function touchStart(event) {
// Insert your code here
}
Optionally, get all touches on a page using the touches property as follows:
get the number of touches:
var allTouches = event.touches;
event.touches.length
Optionally, get all touches for the target element using the targetTouches property:
Get a specific touch object at index i:
var targetTouches = event.targetTouches;
var touch = event.touches[i];
Optionally, get all changed touches for this event using the changedTouches property: get the location in page coordinates for a single-finger event:
var changedTouches = event.changedTouches; var x = event.touches[0].pageX;
var y = event.touches[0].pageY;
51. PRENDIAMO UN DOCUMENTO HTML
<html>
<head>
<link rel="stylesheet" href="screen.css" type="text/css" />
<title>Salvatore Iaconesi</title>
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="./">Salvatore Iaconesi</a></h1>
<div id="utility">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</div>
<div id="nav">
<ul>
<li><a href="design.html">Design</a></li>
<li><a href="progetti.html">Progetti</a></li>
<li><a href="ricerca.html">Ricerca</a></li>
</ul>
</div>
</div>
<div id="content">
<h2>About</h2>
<p>Salvatore Iaconesi è ingegnere robotico, interaction designer
artista e insegna cross media design alla Facoltà di
Architettura dell'Università di Roma "La Sapienza".
Adora gli animali, la musica elettronica e il circuit bending.
...
</p>
</div>
<div id="sidebar">
<img alt="una immagine di Salvatore Iaconesi"
src="images/salvatore.png"
<p>Salvatore Iaconesi è ingegnere robotico, artista, interaction
designer e professore di design cross-mediale.
</p>
</div>
<div id="footer">
<ul>
<li><a href="design.html">Design</a></li>
<li><a href="about.html">About</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
<p class="subtle">Salvatore Iaconesi, Inc.</p>
</div>
</div>
</body>
</html>
52. Mettiamo uno stylesheet dedicato
<link rel="stylesheet" type="text/css"
href="iphone.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css"
href="desktop.css" media="screen and (min-width: 481px)" />
53. Controlliamo viewport e scala
<meta name="viewport" content="user-scalable=no, width=device-width" />
54. Creiamo look'n feel iOS in “iphone.css”
body {
background-color: #ddd; /* Background color */
color: #222; /* Foreground color used for text */
font-family: Helvetica;
font-size: 14px;
margin: 0; /* Amount of negative space around the outside of the body */
padding: 0; /* Amount of negative space around the inside of the body */
}
#header h1 {
margin: 0;
padding: 0;
}
#header h1 a {
background-color: #ccc;
border-bottom: 1px solid #666;
color: #222;
display: block;
font-size: 20px;
font-weight: bold;
padding: 10px 0;
text-align: center;
text-decoration: none;
}
#header ul {
list-style: none;
margin: 10px;
padding: 0;
}
#header ul li a {
background-color: #FFFFFF;
border: 1px solid #999999;
color: #222222;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
}
#content, #sidebar {
padding: 10px;
}
#footer {
display: none;
}
55. ANDIAMO OLTRE “iphone.css”
#header h1 a {
text-shadow: 0px 1px 0px #fff;
background-image: -webkit-gradient(linear, left top, left bottom,
from(#ccc), to(#999));
}
#header ul li:first-child a {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
}
#header ul li:last-child a {
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}
56. CREIAMO IL BEHAVIOUR
Nascondiamo gli <UL> nell'#header
#header ul.hide {
display: none;
}
DEFINIAMO LO STILE PER UN PULSANTE CHE AGGIUNGEREMO
TRA UN ATTIMO:
#header div.leftButton {
position: absolute;
top: 7px;
left: 6px;
height: 30px;
font-weight: bold;
text-align: center;
color: white;
text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
line-height: 28px;
border-width: 0 8px 0 8px;
-webkit-border-image: url(images/button.png) 0 8 0 8;
}
#header div.pressed {
-webkit-border-image: url(images/buttonActive.png) 0 8 0 8;
}
Le immagini vengono dalla directory “images” di jqtouch
57. CREIAMO IL BEHAVIOUR
Aggiungiamo jQuery e predisponiamo un file per i nostri script:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="iphone.js"></script>
Dentro iphone.js aggiungiamo:
function jQueryStart(){
$('#header ul').addClass('hide');
$('#header').append('<div class="leftButton"
onclick="toggleMenu()">Menu</div>');
}
function toggleMenu() {
$('#header ul').toggleClass('hide');
$('#header .leftButton').toggleClass('pressed');
}
E nella funzione onDeviceReady() aggiungiamo;
jQueryStart();
Le immagini vengono dalla directory “images” di jqtouch