The webdesigner goes mobile

•

0 j'aime•397 vues

Codemotion

La presentazione di Salvatore Laisa in occasione del Codemotion, Roma 5 marzo 2011 http://www.codemotion.it

Technologie

THE WEBDESIGNER
GOES MOBILE
SalvatoreLaisa.net
IN T E R A C T I V E DESI G NER

Roma, 5 Marzo 2011

Roma, 5 Marzo 2011

2009
MoebiusMania
2008

2007
SalvatoreLaisa.net
I N TE RACT IVE D ESIGNER

2006

SalvatoreLaisa.net
I NTERACTI VE DESI GNER

Roma, 5 Marzo 2011

Qual’è il problema?

Un webdesigner, quindi una persona che si
occupa principalmente di costruire siti web, si
affaccia al mondo degli smartphone/tablet
(siti mobile e app).

SalvatoreLaisa.net
I NTERACTI VE DESI GNER

Roma, 5 Marzo 2011

Arsenale di un webdesigner

tool grafici e non linguaggi lato client

<Html>
{CSS}
JavaScript
AS3
SalvatoreLaisa.net
I NTERACTI VE DESI GNER

Roma, 5 Marzo 2011

Design Sviluppo

SalvatoreLaisa.net
I NTERACTI VE DESI GNER

Roma, 5 Marzo 2011

Come faccio il mockup di un sito/app mobile?
Alcuni siti come Mobile Love mettono a disposizione
template grafici (.psd o .ai) per realizzare le bozze di
applicazioi o siti mobile.
mobilelove.org/category/design/design-templates/

SalvatoreLaisa.net
I NTERACTI VE DESI GNER

Roma, 5 Marzo 2011

Considerazioni per il design mobile
- Layout “arioso”, pochi elementi e buone spaziature
- Non usare posizionamenti CSS fissi
- Evitare “overflow: auto”
- Meglio le animazioni CSS3 che JS
- Sfruttare gli effetti CSS3 per creare elementi
- Lavorare con click e touch (jQuery UI)
- Pensare in drag & drop quando si può
SalvatoreLaisa.net
I NTERACTI VE DESI GNER

Roma, 5 Marzo 2011

E una volta che passo al codice Html/Css?
Come per il webdesign “desktop” stanno nascendo
una serie di framework specifici per il design mobile,
come jQuery Mobile (Css+Js) e Less Framework (Css)

SalvatoreLaisa.net
I NTERACTI VE DESI GNER

Roma, 5 Marzo 2011

I limiti delle web app mobile
- Non sono native
- Niente accelerometro e bla bla bla...
- Non sono distribuibili negli store
- Necessitano connessione sempre attiva
- Le gesture via Javascript sono “mimate”

SalvatoreLaisa.net
I NTERACTI VE DESI GNER

Roma, 5 Marzo 2011

Come passare alle vere app
Abbiamo il vantaggio che lavorando con i linguaggi
web non si sviluppa per una piattaforma precisa e
grazie a software come Titanium Developer o
Corona è possibile convertire queste applicazioni
web in applicazioni native mobile

SalvatoreLaisa.net
I NTERACTI VE DESI GNER

Roma, 5 Marzo 2011

Che vantaggi avremmo?
- Possono essere installate
- Grazie a nuove API si accede a tutte le funzionalità
del device senza imparare nuovi linguaggi
- Possono essere vendute
- Esportiamo sia per iOS che Android (prima sarà
necessario installare una o entrambe le SDK)

SalvatoreLaisa.net
I NTERACTI VE DESI GNER

Roma, 5 Marzo 2011

Flash ha qualcosa da dire...
Con i nuovi runtime Flash Player 10.1 e Adobe AIR
2.5 è possibile creare applicazioni mobile (non
native) direttamente da Flash CS5.

SalvatoreLaisa.net
I NTERACTI VE DESI GNER

Roma, 5 Marzo 2011

ActionScript 3 è stato esteso
Nuovi event listener per gestire sia le gestures native
(pinch, swipe, rotazione) che dati touch grezzi, in
più grazie ad AIR può accedere ad accelerometro,
gps, rubrica, database SQLite e processori GPU (se
presenti nel device)

SalvatoreLaisa.net
I NTERACTI VE DESI GNER

Roma, 5 Marzo 2011

Let’s get to work webdesigners!
Tutte le tecnologie appena elencate sono già
disponibili ed utilizzabili (jQuery Mobile è in alpha)
e attualmente tutti gli store supportano applicazioni
create con queste ultime.

SalvatoreLaisa.net
I NTERACTI VE DESI GNER

Roma, 5 Marzo 2011

GRAZIE!
e un grazie anche a:
Codemotion - per il mio angolino nell’evento
Artua.com - per le icone usate
i Rush - per la compagnia durante la realizzazione di queste slide

SalvatoreLaisa.net
I NTERACTI VE DESI GNER

Contenu connexe

En vedette

3d sesión atl 3

NAVARRO ELBAL ALBERTO

HNI Brochure 2

Jacalenne Buentello

Webmon presentation photography4 no_animation

GFI_software

Fitalp 22082011 Lok Pal Bill

AJAY PRATAP SHARMA

El máximo y el mínimo

Seminario de Guadalajara (Facultad de Filosofía)

A sesión 8 cuerpo

NAVARRO ELBAL ALBERTO

BiodiversityStrategyReport

Steve Farone, MBA

SCWCD : The web client model : CHAP : 1

Ben Abdallah Helmi

Team6 week10

NTCBmkt

Lhs holiday house tour-Dec 8, 2013

Gemey McNabb

Circuito1

sobreruedasclasicas

Microsoft power point time management

tuyethong8888

Team5-Week5

NTCBmkt

Brown, chapter 4 By Savaedi

Savaedi

2c sesión et 4

NAVARRO ELBAL ALBERTO

2i sesión ex 4

NAVARRO ELBAL ALBERTO

C tarea

NAVARRO ELBAL ALBERTO

En vedette (17)

3d sesión atl 3

HNI Brochure 2

Webmon presentation photography4 no_animation

Fitalp 22082011 Lok Pal Bill

El máximo y el mínimo

A sesión 8 cuerpo

BiodiversityStrategyReport

SCWCD : The web client model : CHAP : 1

Team6 week10

Lhs holiday house tour-Dec 8, 2013

Circuito1

Microsoft power point time management

Team5-Week5

Brown, chapter 4 By Savaedi

2c sesión et 4

2i sesión ex 4

C tarea

Similaire à The webdesigner goes mobile

Come realizzare siti mobile - Buginar 29 Maggio 2011

Rocco Passaro

Cv ivano esposito2012_settembre

Ivan_xp

Aperinfo maggio-2012 - Mobile

aperinfo

Android Workshop

Emanuele Palazzetti

Mobile - Quali approcci?

Gaspare Novara

Sviluppo Mobile , quali approcci?

lostrettodigitale

Cv Ivano Esposito2012 Gen

Ivan_xp

follow-ap DAY 4: HTML5 e jQuery

QIRIS

App vs mobile website - Intervento di Claudio Tonti (Websolute) a Branding 2....

Branding 2.0

App vs Mobile website: quale lo scenario vincente?

Websolute

Web Domus Italia - Guida ai servizi

Web Domus

Whymca - Sviluppare applicazioni mobile native in html e javascript

Fabio Franzini

Il progetto si propone di fornire e-skills e soft skills agli studenti del liceo "Antonio Labriola " di Ostia. Al progetto hanno aderito circa 40 studenti del liceo che hanno seguito i corsi su come costruire una APP dopo la fine delle lezioni. L'obiettivo del progetto è stato quello di costruire una APP che avrebbe permesso di gestire i corsi durante la settimana autogestita dagli studenti. Questa App ha permesso di gestire il periodo di autogestione al liceo e potrà essere usata in modo più ampio per gestire eventi vari. Dal lato utilizzatore ha permesso di visualizzare i corsi esistenti, di controllare la disponibilità, l'aula dove si sarebbe svolto il corso e di iscriversi quindi ai corsi. Dal lato amministratore di inserire eventi con i relativi dati: L’argomento, il luogo dove è svolto, i numero di posti disponibili, il relatore. Con la collaborazione della community Dot Net Code, un gruppo di professionisti che si occupano di condividere e divulgare le principali tecniche di programmazione sulla piattaforma Microsoft .NET, gli studenti del liceo Labriola hanno cominciato a scoprire il mondo delle APP.

Meet no Neet: presentazione del progetto App per organizzare eventi

Fondazione Mondo Digitale

Ivano esposito

Ivano Esposito

Domainshow.it

Francesco Cetraro

Salvatore Laisa, WordPress + JQuery

KnowCamp

Cv ivano esposito_2012

Ivano Esposito

Sviluppare plugin per google Chrome

Codemotion

Sviluppare applicazioni mobile native in html e java script

Fabio Franzini

Responsive Web Design & Single Page Application

Alessandro Colla

Similaire à The webdesigner goes mobile (20)

Come realizzare siti mobile - Buginar 29 Maggio 2011

Cv ivano esposito2012_settembre

Aperinfo maggio-2012 - Mobile

Android Workshop

Mobile - Quali approcci?

Sviluppo Mobile , quali approcci?

Cv Ivano Esposito2012 Gen

follow-ap DAY 4: HTML5 e jQuery

App vs mobile website - Intervento di Claudio Tonti (Websolute) a Branding 2....

App vs Mobile website: quale lo scenario vincente?

Web Domus Italia - Guida ai servizi

Whymca - Sviluppare applicazioni mobile native in html e javascript

Meet no Neet: presentazione del progetto App per organizzare eventi

Ivano esposito

Domainshow.it

Salvatore Laisa, WordPress + JQuery

Cv ivano esposito_2012

Sviluppare plugin per google Chrome

Sviluppare applicazioni mobile native in html e java script

Responsive Web Design & Single Page Application

Plus de Codemotion

Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...

Codemotion

Pompili - From hero to_zero: The FatalNoise neverending story

Codemotion

Pastore - Commodore 65 - La storia

Codemotion

Rivivere l'ebbrezza di progettare un vecchio computer o una consolle da bar è oggi possibile sfruttando le FPGA, ovvero logiche programmabili che consentono a chiunque di progettare il proprio hardware o di ricrearne uno del passato. In questa sessione si racconta come dal reverse engineering dell'hardware di vecchie glorie come il Commodore 64 e lo ZX Spectrum sia stato possibile farle rivivere attraverso tecnologie oggi alla portata di tutti.

Pennisi - Essere Richard Altwasser

Codemotion

There's a lot of talk about blockchain, but how does the technology behind it actually work? For developers, getting some hands-on experience is the fastest way to get familiair with new technologies. So let's build a blockchain, then! In this session, we're going to build one in plain old Java, and have it working in 40 minutes. We'll cover key concepts of a blockchain: transactions, blocks, mining, proof-of-work, and reaching consensus in the blockchain network. After this session, you'll have a better understanding of core aspects of blockchain technology.

Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...

Codemotion

When was the last time you were truly lost? Thanks to the maps and location technology in our phones, a whole generation has now grown up in a world where getting lost is truly a thing of the past. Location technology goes far beyond maps in the palm of our hand, however. In this talk, we will explore how a ridesharing app works. How do we discover our destination?How do we find the closest driver? How do we display this information on a map? How do we find the best route?To answer these questions,we will be learning about a variety of location APIs, including Maps, Positioning, Geocoding etc.

Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019

Codemotion

Eward Driehuis, SecureLink's research chief, will guide you through the bumpy ride we call the cyber threat landscape. As the industry has over a decade of experience of dealing with increasingly sophisticated attacks, you might be surprised to hear more attacks slip through the cracks than ever. From analyzing 20.000 of them in 2018, backed by a quarter of a million security events and over ten trillion data points, Eward will outline why this happens, how attacks are changing, and why it doesn't matter how neatly or securely you code.

Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019

Codemotion

IoT revolution is ended. Thanks to hardware improvement, building an intelligent ecosystem is easier than never before for both startups and large-scale enterprises. The real challenge is now to connect, process, store and analyze data: in the cloud, but also, at the edge. We’ll give a quick look on frameworks that aggregate dispersed devices data into a single global optimized system allowing to improve operational efficiency, to predict maintenance, to track asset in real-time, to secure cloud-connected devices and much more.

Francesco Baldassarri - Deliver Data at Scale - Codemotion Amsterdam 2019 -

Codemotion

What if Virtual Reality glasses could transform your environment into a three-dimensional work of art in realtime in the style of a painting from Van Gogh? One of the many interesting developments in the field of Deep Learning is the so called "Style Transfer". It describes a possibility to create a patchwork (or pastiche) from two images. While one of these images defines the the artistic style of the result picture, the other one is used for extracting the image content. A team from TNG Technology Consulting managed to build an AI showcase using OpenCV and Tensorflow to realize such goggles.

Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...

Codemotion

Blockchain (and Cryptocurrency) is an evolution of 20-year old research from scientists like Chaum, Lamport, and Castro & Liskov. Due to the current hype, it's hard to distinguish beneficial aspects of the technology from a desire for a "silver bullet" for device security, verifiable logistics, or "saving democracy". The problem: blockchain introduces new security challenges - and blind adoption without understanding reduces overall security. In this talk, Melanie Rieback and Klaus Kursawe explain the pitfalls and limits of blockchain, so you can avoid making your applications LESS secure.

Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...

Codemotion

Networking is a core part of computing in the digital world we inhabit. But, how well do you know how it works? Do you understand all the moving parts of the OSI stack inside your computer, and how the network is actually put together? How can this ever work? This guided safari of layers, standards, protocols, and happenstance will bring us close to the copper wire, and up through the layers of CDMA/CD, ARP, routing and HTTP. We will make a few excursions through patchworks that still work forty years later, and cleverly designed mechanisms that show that simplicity is the only way to last.

Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...

Codemotion

Performance tests are not only an important instrument for understanding a system and its runtime environment. It is also essential in order to check stability and scalability – non-functional requirements that might be decisive for success. But won't my cloud hosting service scale for me as long as I can afford it? Yes, but… It only operates and scales resources. It won't automatically make your system fast, stable and scalable. This talk shows how such and comparable questions can be clarified with performance tests and how DevOps teams benefit from regular test practise.

Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...

Codemotion

Sascha will demonstrate the opportunities and challenges of Conversational AI learned from the practice. Both Technology and User Experience will be covered introducing a process finding micro-moments, writing happy paths, gathering intents, designing the conversational flow, and finally publishing on almost all channels including Voice Services and Chatbots. Valuable for enterprises, developers, and designers. All live on stage in just minutes and with almost no code.

Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019

Codemotion

A key challenge we face at Pacmed is quickly calibrating and deploying our tools for clinical decision support in different hospitals, where data formats may vary greatly. Using Intensive Care Units as a case study, I’ll delve into our scalable Python pipeline, which leverages Pandas’ split-apply-combine approach to perform complex feature engineering and automatic quality checks on large time-varying data, e.g. vital signs. I’ll show how we use the resulting flexible and interpretable dataframes to quickly (re)train our models to predict mortality, discharge, and medical complications.

Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019

Codemotion

Coolblue is a proud Dutch company, with a large internal development department; one that truly takes CI/CD to heart. Empowerment through automation is at the heart of these development teams, and with more than 1000 deployments a day, we think it's working out quite well. In this session, Pat Hermens (a Development Managers) will step you through what enables us to move so quickly, which tools we use, and most importantly, the mindset that is required to enable development teams to deliver at such a rapid pace.

Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019

Codemotion

Quantum computers can use all of the possible pathways generated by quantum decisions to solve problems that will forever remain intractable to classical compute power. As the mega players vie for quantum supremacy and Rigetti announces its $1M "quantum advantage" prize, we live in exciting times. IBM-Q and Microsoft Q# are two ways you can learn to program quantum computers so that you're ready when the quantum revolution comes. I'll demonstrate some quantum solutions to problems that will forever be out of reach of classical, including organic chemistry and large number factorisation.

James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...

Codemotion

Chinese food exploded across America in the early 20th century, rapidly adapting to local tastes while also spreading like wildfire. How was it able to spread so fast? The GY6 is a family of scooter engines that has achieved near total ubiquity in Europe. It is reliable and cheap to manufacture, and it's made in factories across China. How are these factories able to remain afloat? Chinese-American food and the GY6 are both riveting studies in product-market fit, and both are the product of a distributed open source-like development model. What lessons can we learn for open source software?

Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...

Codemotion

Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019

Codemotion

Would you fly in a plane designed by a craftsman or would you prefer your aircraft to be designed by engineers? We are learning that science and empiricism works in software development, maybe now is the time to redefine what “Software Engineering” really means. Software isn't bridge-building, it is not car or aircraft development either, but then neither is Chemical Engineering. Engineering is different in different disciplines. Maybe it is time for us to begin thinking about retrieving the term "Software Engineering" maybe it is time to define what our "Engineering" discipline should be.

Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019

Codemotion

What is the job of a CTO and how does it change as a startup grows in size and scale? As a CTO, where should you spend your focus? As an engineer aspiring to be a CTO, what skills should you pursue? In this inspiring and personal talk, I describe my journey from early Red Hat engineer to CTO at Bloomon. I will share my view on what it means to be a CTO, and ultimately answer the question: Should the CTO be coding?

Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019

Codemotion

Plus de Codemotion (20)