Presentation

What is the Ionic Framework?

I am giving a presentation at the next San Diego JS Monthly Meeting, May 2 @ 7:30 pm. If you have ever been curious about what Ionic is and how it works, this talk is for you.

What is the Ionic Framework? The Ionic Framework combines Google’s Angular with Apache’s Cordova to create fast and beautiful cross-platform mobile apps for iOS and Android (and Electron or Progressive Web Apps). Built atop the web technologies you know and love, this solution can help take your web skills beyond the browser.

In this talk, I will give you an overview of the Ionic Framework, show how to install it, and finally build a quick app and deploy it to both iOS and Android using some of the additional Ionic.io services.

Hope to see you there!

Live Online Training: Building Hybrid Mobile Apps with Ionic, Angular, and Cordova

 

I am pleased to announce I will be giving live online training on Ionic through O’Reilly training. The online sessions will be held on June 5 & 6, 2017 from 7:00 am – 10:00 am PDT.
By the end of this live, online course, you’ll understand:
  • How Ionic, Cordova, and Angular work together to create hybrid mobile apps
  • How to design and program Ionic apps
  • How to publish your applications to the app stores
And you’ll be able to:
  • Generate Ionic applications using the Ionic CLI
  • Use common Ionic UI components
  • Extend your Ionic applications with Ionic Native
  • Preview your applications on your devices
  • Compile your applications to ready them for submission to mobile app stores
Here is the course outline:
The timeframes are only estimates and may vary according to how the class is progressing

DAY 1

Introduction to Ionic (20 minutes)

  • Lecture: What’s new in Ionic 2; introduction to the Ionic CLI; Ionic file structure
  • Hands-on exercise: Create an Ionic blank template

Introduction to Angular and TypeScript (30 minutes)

  • Lecture: Introduction to Angular and TypeScript
  • Hands-on exercise: Short quiz

Building your first app (30 minutes)

  • Lecture: Building your first app with Ionic2Do; using Ionic serve to preview your application
  • Hands-on exercise: Compile and run your Ionic2Do app locally in the browser

Break (10 minutes)

Styling your Ionic app (30 minutes)

  • Lecture: How Ionic apps are themed; using Ionic View to quickly preview the app on your device
  • Hands-on exercise: Preview your app on your mobile device (with data stored remotely)

Ionic Native (30 minutes)

  • Lecture: Adding native touches to your application using Cordova plugins via Ionic Native; publishing the application to the app stores
  • Hands-on exercise: Replace the JavaScript dialog with a native dialog

Debugging Ionic applications (20 minutes)

  • Lecture: How to debug your application
  • Hands-on exercise: Use Chrome or Safari to remote debug your application

Wrap-up and Q&A (10 minutes)

DAY 2

Building your second app (30 minutes)

  • Lecture: Building an app with IonicParks; exploring Ionic Tabs; loading data; Ionic Lists
  • Hands-on exercise: Build an application using the local data file and rendering the park list

Ionic navigation (30 minutes)

  • Lecture: How navigation works in an Ionic application; using the Ionic generate command to improve your workflow; designing the park details screen
  • Hands-on exercise: Generate and populate the park details screen of the app

Google Maps integration (30 minutes)

  • Lecture: Adding a map to your application; custom classes
  • Hands-on exercise: Add a live Google map to your application

Break (10 minutes)

Exploring other Ionic components (30 minutes)

  • Lecture: Common Ionic components (slides, popover, date and time, toast, grid, and gestures)
  • Hands-on exercise: Short quiz

Accelerate your application’s development and features (30 minutes)

  • Lecture: The larger elements of Ionic that can accelerate your application’s development and features (exploring Ionic.io, deploy, build, notification, and users)
  • Hands-on exercise: Short quiz

Next steps, wrap-up, and Q&A (20 minutes)

I hope to see you there.
To sign up for the course, visit Safari Online.

Making Things Move!

ocmma-logo

On Tuesday, April 21st, I will be leading a hands on session on animating with CSS for the Orange County Multimedia Association. Although our phones and tablets may not be able to run Adobe Flash-based animations, the mobile web is far from static! This presentation is going to explore the use of CSS-based animations as a way to bring motion back into your web design.

We are going to explore using CSS to bring your web-based projects to life. I am also going to demonstrate some additional solutions that you can explore to help bring the web to life!

Details here: http://www.ocmma.org/

Like a Pro(totyper): Prototyping for Lean UX

sandchi

Like a Pro(totyper): Prototyping for Lean UX

I am pleased to be on a panel discussing one of my favorite topics, prototyping! Here are the details about the event:

Wednesday, October 29, 2014
6:00 PM to 8:30 PM
The Creative Group
4225 Executive Square, Suite 300, San Diego, CA

Happy October, UXers! We hope you’re keeping your cool during summer’s last stand, and maybe vacationing someplace where the leaves do that thing that leaves are supposed to do this time of year.

This month, we’re proud to offer up a panel of professional prototypers. These designers do prototyping in their daily work, either as their primary role or a fundamental part of their process. They often work within lean UX teams to design and test in collaboration with more traditional UXers. You’ll get to pick their brains, learn more about prototyping as a methodology and deliverable, and get advice on how to incorporate the practice into your own work.

This idea came from our Intuit lab tour event — which hey, by the way, thanks for attending! — where we heard a lot of feedback from folks who wanted to know more about the UX prototyper role that Intuit hires for. You’re smart cookies to be curious: prototyping is a hot topic these days, steadily gaining traction in design circles, and sometimes even replacing wireframes and mockups as a main deliverable. And since caring for our community is the name of our game, we wanted to throw together a little something to help you learn more about it.

We rounded up an awesome group of designers to make this possible, including:
Hooman Anvar
Principal, Hooman Anvar User Experience Design and Strategy

Adam Armstead
Senior Interaction Designer, Intuit, former Design Manager at TakeLessons

Elina Kim
Experience Design Prototyper, Intuit

Heather Daggett
Senior Experience Design Prototyper, Intuit

Chris Griffith
Staff Engineer, Qualcomm UX

And our shiny new president, Paul Hong, as moderator.

Beverages and light appetizers will be served.

RSVP now to ensure you get to attend!

Park in the 4225 parking structure just across Executive Square from the 4225 building. Your parking will be validated.

AppaloozaLA!

AppaloozaLA

I had to miss speaking at the one in San Francisco, but I am back in the saddle to speak at the Los Angeles stop! This is going to be a great event filled with some incredible speakers. Personally, I will be presenting on using PhoneGap Build to quickly build native mobile applications.

The event will be on Saturday, November 15, 2014 from 9:00 AM to 5:00 PM (PST) at the Art Institute of CA-Los Angeles.

For more information, visit the EventBrite page. Hope to see you there!

 

Up and Running with PhoneGap Build released!

Lynda Title Screen

My first title for lynda.com has been released!  It is “Up and Running with PhoneGap Build“. Here is the summary of the course:

See how PhoneGap, an open-source framework, and PhoneGap Build, a service in the Adobe Creative Cloud, allow you to create cross-platform mobile apps using the web technologies you know and love: HTML, CSS, and JavaScript. This course explores how to use PhoneGap Build to create app-store-ready applications for iOS, Android, and Windows Phone. Learn how to build an app from GitHub, Dreamweaver, Edge Code, or even a simple ZIP file; configure icons, splash screens, and other preferences; enable access to camera and location sensor data; and deploy and install your device on your smart phone or tablet.

I am really proud of it and in total awe of what the lynda.com editors can do.

Creating App Store Ready Apps with PhoneGap

5
I recently gave an online presentation on “Creating App Store Ready Apps with PhoneGap” to the Creative Cloud Lovers User Group. So if you are interested in knowing more about PhoneGap and PhoneGap Build, some spend an hour with me. Here is the blurb about the presentation:
So, you have a Creative Cloud subscription… great! Did you know you have the capability to create “app store ready” applications using PhoneGap Build, a part of that Creative Cloud subscription?Join us online to see how PhoneGap (a.k.a. Apache Cordova), an open-source framework, and the Adobe PhoneGap Build service, part of the Adobe Creative Cloud, allow you to create cross-platform mobile apps using the web technologies you know and love: HTML, CSS, and JavaScript.

Learn how PhoneGap works, and how it will enable you to start building mobile apps with web standards. This talk will introduce you to the PhoneGap API (Application Programming Interface), how the software components interact, and walk you through how to work with the JavaScript methods.

PhoneGap allows you to create interactive, feature-rich mobile applications (and if you subscribe to the Creative Cloud, you already own it!). You will also get an introduction to PhoneGap Build which allows you to package mobile apps in the cloud.