Also, keep in mind, this is, of course, just my list and I deliberately wanted to keep it short because if I specified 20 trends here, I'm not sure if they're really all trends.
Future of the Web with Conversational InterfaceTomomi Imura
Using voice commands has been ubiquitous nowadays, as more mobile phone users use voice assistants like Siri, as well as devices like Amazon Echo and Google Home have been invading our living rooms. You can interact with the intelligent assistant without leaving your couch. At the same time, chatbots have gained popularity, and services like Slack and Facebook Messenger let you achieve tasks without leaving the client- you can schedule a meeting, order some pizza, call a taxi, etc.
Historically in web development, we have been relying on various UI elements to interact with users. Now with the new technologies, you can develop rich applications with the natural user interactions with a minimal visual interface. This enables countless use cases for richer and more accessible web applications.
In this talk, Tomomi Imura talks about the trend of the conversational interface, and what and how you can build with JavaScript.
The talk is given at:
- TokyoJS (shorter ver) July 28, 2017
- ModernWeb Taiwan Aug 10, 2017
Also, keep in mind, this is, of course, just my list and I deliberately wanted to keep it short because if I specified 20 trends here, I'm not sure if they're really all trends.
Future of the Web with Conversational InterfaceTomomi Imura
Using voice commands has been ubiquitous nowadays, as more mobile phone users use voice assistants like Siri, as well as devices like Amazon Echo and Google Home have been invading our living rooms. You can interact with the intelligent assistant without leaving your couch. At the same time, chatbots have gained popularity, and services like Slack and Facebook Messenger let you achieve tasks without leaving the client- you can schedule a meeting, order some pizza, call a taxi, etc.
Historically in web development, we have been relying on various UI elements to interact with users. Now with the new technologies, you can develop rich applications with the natural user interactions with a minimal visual interface. This enables countless use cases for richer and more accessible web applications.
In this talk, Tomomi Imura talks about the trend of the conversational interface, and what and how you can build with JavaScript.
The talk is given at:
- TokyoJS (shorter ver) July 28, 2017
- ModernWeb Taiwan Aug 10, 2017
[DevRelCon Tokyo 2017] Creative Technical Content for Better Developer Experi...Tomomi Imura
Let’s say, you are searching certain frameworks, or APIs to satisfy your new project- what if you stumble on some awesome-sounding shiny website, but it comes with very poor documentations. Do you want to try it out, or keep searching something else? Or when you see a GitHub project with no README, how do you feel? I think this developer experience is one of big key factors for you to decide what technologies to use.
User-Experience (UX) focuses on understanding what users' need and value, and provide practical products or services. This human-computer interaction acts the same when the users are developers. The ideas of “Developer Experiences” is to establish a good relationship between developers and platform providers.
So, as a developer evangelist, what can we do to improve DX to get developers' interests?
In this talk, Tomomi Imura will talk about her experiences, and how I create developer-centric contents and docs to drive the community and acquired new developers and customers.
Notice Me, Senpai! Get Discovered with Creative Technical ContentTomomi Imura
"Notice me, Senpai!" - well, in this case, Senpai = developers.
Developer acquisition and adoption don't go proportionally to the quality of your platform, APIs, dev tools etc. If developers out there have never heard of your products, you fail no matter how awesome your developer offerings are. You must be discovered first, and getting discovered is not so easy.
In this talk, Tomomi Imura will share her experiences at various companies, including large corporates to start-ups and how she created developer-centric contents and docs to drive the community and acquire new developers.
Mistakes I Made Building Netflix for the iPhonekentbrew
Slides for the talk by the same name I gave at SxSW 2011. You can view the demo app at http://iflx.com, and fork the source from https://github.com/kentbrew/iflx.
[DevRelCon Tokyo 2017] Creative Technical Content for Better Developer Experi...Tomomi Imura
Let’s say, you are searching certain frameworks, or APIs to satisfy your new project- what if you stumble on some awesome-sounding shiny website, but it comes with very poor documentations. Do you want to try it out, or keep searching something else? Or when you see a GitHub project with no README, how do you feel? I think this developer experience is one of big key factors for you to decide what technologies to use.
User-Experience (UX) focuses on understanding what users' need and value, and provide practical products or services. This human-computer interaction acts the same when the users are developers. The ideas of “Developer Experiences” is to establish a good relationship between developers and platform providers.
So, as a developer evangelist, what can we do to improve DX to get developers' interests?
In this talk, Tomomi Imura will talk about her experiences, and how I create developer-centric contents and docs to drive the community and acquired new developers and customers.
Notice Me, Senpai! Get Discovered with Creative Technical ContentTomomi Imura
"Notice me, Senpai!" - well, in this case, Senpai = developers.
Developer acquisition and adoption don't go proportionally to the quality of your platform, APIs, dev tools etc. If developers out there have never heard of your products, you fail no matter how awesome your developer offerings are. You must be discovered first, and getting discovered is not so easy.
In this talk, Tomomi Imura will share her experiences at various companies, including large corporates to start-ups and how she created developer-centric contents and docs to drive the community and acquire new developers.
Mistakes I Made Building Netflix for the iPhonekentbrew
Slides for the talk by the same name I gave at SxSW 2011. You can view the demo app at http://iflx.com, and fork the source from https://github.com/kentbrew/iflx.
Slides from a presentation I gave at these conferences:
— Big Design
— Front Porch
— Thunder Plains
— Web Afternoon
I co-presented at Big Design with Matt Baxter.
http://twitter.com/mbxtr
JQuery Mobile vs Appcelerator Titanium vs Sencha TouchSteve Drucker
During this briefing for developers and I.T. managers, you'll get an in-depth review of the three most popular javascript-based mobile application development platforms - jQuery Mobile, Sencha Touch, and Appcelerator Titanium! You'll review the development tools, hear about the developer and debugging experience, and participate in a brief code review in order to determine which framework is the most appropriate for your next mobile project! We'll demonstrate how each framework can be used to develop the same mobile app, highlighting the strengths and weaknesses of each.
Note that the full 2.5 hour video of this presentation is available at http://bit.ly/Y04lDi
Web development is evolving at a breakneck speed every passing year. New website technologies are being discovered regularly as developers explore new ways of innovation.
To make it easier for you, I have analyzed the shifts across industries and created an ultimate list of some of the latest web development trends in 2022.
Luckily, there’s plenty of good quality coding training available here on the Internet. What better place to learn web development than the web itself?
Welcome to
What is web development and how it can benefit your business | SEO Exparte BD Ltd.
Consider all of the web applications you have used in the past week. You probably can't even keep track of how many websites you visited, including your favorite news site, Facebook, and shopping sites. The internet is probably the first site you turn to if you need to find gifts, reserve a hotel room, or make a doctor's appointment. Even when the actual purchase takes place in a store, 80% of significant transactions begin with online research. The fact that 1 in 4 small businesses still don't have a website or a web app is somewhat astonishing, then. Especially in light of the numerous advantages that web apps may provide for organizations.
A web app can help your company grow by positioning you as a reliable partner who values its clients. But how can you build a feature-rich web application that your users would adore? Web development services might be used in this situation if you lack the time or the necessary abilities to create one yourself.
What is Web Development?
The entire process of creating, developing, testing, and maintaining websites and web applications is known as web development. This refers to the entire process of web design, web content development, client-side/server-side scripting, network security settings, and occasionally SEO optimization that goes into making a web app look great, operate well, and have a smooth user experience.
Full-stack web developers typically write lengthy lines of code in text editors, style it with CSS, and then combine all the components to make these products. Today, however, they can also create a new website without having to start from scratch by using tools like Adobe Dreamweaver or content management systems.
The three main types of web developers are front-end developers, back-end developers, and full-stack developers. All of a website's visual elements are the responsibility of front-end development experts (layout, navigation bar, etc.). Its functionality and interactivity are also the responsibility of front-end developers.
Less visible duties and development areas handled by backend developers include administering the web app services, databases, and applications. To fix server-side concerns with back-end development, backend developers may also need to use additional server-side languages like Python, Ruby, Java, and PHP. Full-stack developers can work on both the front end and the back end.
What tools do web developers use?
When people refer to "web app development tools," they typically refer to the HTML, Java, and CSS programming languages, apps, and environments that enable developers to write and debug the code for online applications. However, the job of a web developer changes along with the digital world.
They now need to be capable of more than just writing code fragments. They must be knowledgeable with graphic elements, responsive UI/UX design, prototyping, wire-framing
Ecommerce Mini Project / Group Project CodingHemant Sarthak
This is an Ecommerce Mini Project / Group Project Presentation that I created as part of the college curriculum, this presentation is a more coding focused presentation that you might need to give in your college.
If you want Design focused presentation please see Ecommerce Mini Project / Group Project Design PPT that I uploaded.
It has things explained like VS Code, Adobe XD, Owl Carousel etc.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
<img src="../i/r_14.png" />
1. wexarts.org iPhone Project: Developer Documentation ~ Page 1 of 20
wexarts.org iPhone Project: Developer Documentation
Alex Ford
Wexner Center for the Arts
Introduction
In the process of creating the iPhone version of wexarts.org, we learned and absorbed many concepts, tips,
tricks, conventions, code snippets, and "gotchas" related to building such a site from scratch. Our initial design
concepts didn't seem suited to something pre-built like iUI, and so the student assistant developer (me) began
to explore just what a project like this entails.
To coincide with the official launch of our mobile view, we decided to release a kind of "brain dump" or
overview of some specific things we learned that might help someone (be they a person, a company, or a non-
profit arts organization) embarking on something similar, which is what you're reading now.
Most of these concepts and methods can be found elsewhere online in various forms, and I try to link out to
resources as much as possible. Sometimes, though, our code was written in a "spur of the moment" type
scenario during which I failed to make note of the source of the idea or process (or maybe I actually came up
with it, you never know). Thereʼs no earth shattering revelations in this document, and seasoned iPhone web
developers are almost certainly familiar with everything here. This isnʼt written for those people.
I wrote our iPhone site from the prospective of a designer (and design major) with a strong interest in web
programming, not as a computer science major, so a lot of this code could probably be refined. We welcome
those refinements and encourage you to share them with us and other like-minded groups. Feel free to use
any code here you like for any of your projects, and distribute this document to anyone. Please try to keep this
document intact, however, if you do redistribute it.
What this document is
This is a relatively in depth write-up of many of the things I discovered while writing our iPhone site. The
document covers conceptual ideas, code snippets, development process tips, some coding "gotchas", and a
look at what I consider to be our more unique features. All of this stuff is believed to be accurate as of iPhone
OS 3.0, and consists solely of client-side JavaScript and some CSS. Most of what I talk about here will not
work on any browser except for Mobile Safari or the most recent version of desktop Safari (4, at the time of this
writing).
2. wexarts.org iPhone Project: Developer Documentation ~ Page 2 of 20
What this document is not
This doesn't contain any code that relates specifically to the Wexner Center's content or structure, or that of
any structure/content, hypothetical or otherwise. To that end, this document contains no server-side code with
the exception of an example in PHP in the section of device sniffing.
This document is also not the only set of methods you can use to build an iPhone (or generic mobile) friendly
site. This is the angle I took when I built wexarts.org/iphone, and it works pretty well for us. In fact, I expect
people who read this document to have refinements and new ideas for making what's presented here better
and/or more efficient.
What you gain from reading this is not a complete solution for building a "web-app" style iPhone site. This is a
ground floor overview of some things you might run into over the process of building your iPhone view from
scratch.
If you want to quickly and easily create something that completely emulates an iPhone's interface and behaves
like a native app, something like iUI (http://code.google.com/p/iui/) is definitely the way to go. Many of the
things I discuss here are handled by this library beautifully. Something else to look at, which I discovered mid-
way through the project but that you may already know about, is Apple's own Dashcode, which is part of their
developer tools (http://www.apple.com/developer/). It also has some great starting points and frameworks for
building these "native-ish" web-app style sites.
Who this document is for
This is for anyone trying to build an iPhone specific mobile view of their website, from scratch. You will need a good,
working understanding of HTML, CSS, and JavaScript (and their relationship to each other) to build something like this. If
you're already familiar with the jQuery framework (http://jquery.com), thatʼs great, because it's essentially the lifeblood of
our methods. Personally, my JavaScript (and jQuery) skills increased probably ten-fold over the course of doing this
project.
I'm not going to cover things like HTML structure or JavaScript syntax, CSS, how to include JavaScript in your pages, or
anything of that nature. If you need to learn these technologies first, here are a few tutorials:
CSS: http://www.w3schools.com/css/
HTML: http://www.w3schools.com/html/
JavaScript: http://www.w3schools.com/js/
jQuery: http://docs.jquery.com/Tutorials
3. wexarts.org iPhone Project: Developer Documentation ~ Page 3 of 20
If you are familiar with everything except jQuery, I suggest you read the jQuery "How jQuery Works" tutorial by John Resig
at the least. Also, ideally you have a MySQL or similar database solution/backend for your content that you can tap into
yourself using your server-side language of choice.
Why didn't I use something prebuilt like iUI? Isn't this more work?
Yes, it is more work. What we gain from building from scratch, though, is total control over design, behavior,
and format. Being an arts organization, design is essential in any project the Wexner Center does. We also
have the advantage of truly understanding what it is that makes Mobile Safari tick, and as an added bonus, we
learn more as we develop. That was the biggest draw to me.
Alright, let's get to it.
Tools & Software
There aren't many tools required to get an iPhone site off the ground; a text editor and some web server space
are all that's required. There are a few things that will help you immensely along the way, though:
Safari 4 (http://www.apple.com/safari/) free: This runs on Mac & PC, and allows you to preview your
iPhone site using essentially the same rendering engine as on the device itself. It's developer tools are
also fantastic, no plug-ins required.
iPhone SDK / iPhone Simulator (http://developer.apple.com/iphone/) free: If you haven't already, and
you're using a Mac, go sign up for a free Developer account and download the iPhone SDK. It includes,
among many, many other things, Apple's own iPhone Simulator, running the real Mobile Safari, but
using your Mac's network connection. You'll need this (or a real iPhone) to test things like touch events
and orientation changes. Also, many of the Apple documents I reference or link to require a developer
account to view, so just go get one!
Coda (http://panic.com/coda) $99: This is just an excellent (though not free) web development tool.
I've used it for years and it was used exclusively to develop wexarts.org/mobile. It integrates a text
editor with syntax coloring, FTP and local file editing, multiple tabs, free web technologies
documentation, a Unix shell, CSS editor, and the list goes on. You can use whatever editor you want,
but I can't say enough good things about this one. Itʼs Mac only, unfortunately.
You'll also of course need whatever else you normally use to develop web sites or web graphics.
4. wexarts.org iPhone Project: Developer Documentation ~ Page 4 of 20
Code listing conventions used here:
The only thing that should need explaining is that I have marked line wraps with ». You shouldnʼt actually
break here in your code.
iPhone Safari Basics
The iPhone browser is a kind of cross between a desktop browser and a mobile browser. It is WebKit based,
like desktop Safari, Google Chrome, and several other browsers. From now on, when I refer to “Safari”, I mean
iPhone Safari. The use of WebKit propels Safari to be a more advanced browser than many desktop browsers
in terms of standards support, and it consistently blows away other mobile browsers, though this is beginning
to change with platforms like Android and Palm Pre (which also use variants of WebKit). Some of the
interesting things Safari supports are several draft HTML5 tags (including <video>), CSS3 (including
transforms and “hardware accelerated” animation), a very fast JavaScript implementation (especially for a
mobile browser, and especially in OS 3.0), and PNG alpha transparency.
The Viewport
Read more at: Safari Reference Library document: “Configuring the Viewport”
The viewport on a desktop browser and the viewport on iPhone Safari behave slightly differently. This is best
described at the Apple document referenced above, so I wonʼt try to reinvent their description here. I highly
recommend you read Appleʼs article.
You describe how you want your viewport to behave using a <meta> tag in the <head> of an HTML
document. You should always have a viewport <meta> tag!
When in doubt, try this in your <head> tag:
<meta name = "viewport" content = "user-scalable=no,
» width=device-width, initial-scale=1, maximum-scale=1,
» minimum-scale=.66667">
The above example is whatʼs running on wexarts.org/iphone and does a good job for websites that are
designed specifically for the iPhone. The minimum-scale seems weird, but it fixed a bug I encountered when
handling orientation changes and scaling. You might not need that part, but if youʼre having problems in
landscape mode give it a try.
5. wexarts.org iPhone Project: Developer Documentation ~ Page 5 of 20
Other <meta> tags
Read more at: Safari HTML Reference article: “Supported Meta tags”
There a few other things you can do at the start of the document that deserve to be mentioned here:
UTF-8
<meta http-equiv="content-type" content="text/html; charset=utf-8">
This isnʼt really iPhone specific, but recommended for everyone. Using UTF-8 helps special characters
(accents, dashes, etc.) come across correctly in your pages. This tag ended some headaches for me.
Mobile Web App Capable
<meta name="apple-mobile-web-app-capable" content="yes" />
This is an interesting one – it affects the way your site behaves when added to a users home screen.
If itʼs enabled, when the user taps your icon (see below), your site is opened and loaded outside of
Safariʼs interface. This has a few effects. First, Safariʼs “chrome” (toolbars, addressbar, etc). is gone,
giving you more space to work. Second, if your site isnʼt contained entirely in one HTML document,
clicking a link will drop you out of your new “web app” and open up the full Safari browser, where it
opens the new page. Third, orientation-detection is apparently broken, and JavaScript touch events
donʼt work. The latter two effects are real bummers.
Read more at: http://nrbd.tumblr.com/post/55066018/apple-mobile-web-app-capable-is-really-broken
Format Detection
<meta name="format-detection" content="telephone=no">
This simply stops Safari from automatically turning phone numbers into clickable links, if for some
reason you donʼt want that. This tag is left out on wexarts.org/iphone, which allows our “Visit” tab to be
populated with “callable” phone number links.
Handling Orientation Change
Read more at: Safari Reference Library document: “Handling Events”
The iPhone has an accelerometer that detects the angle your user is holding the device (either in landscape or
portrait). When that changes, Safari conveniently sends your <body> element an event. Set up a JavaScript
event handler like this:
<body onorientationchange="updateOrientation();">
6. wexarts.org iPhone Project: Developer Documentation ~ Page 6 of 20
For wexarts.org/iphone, I took Appleʼs example JavaScript function for handling orientation events (see article
referenced above) and had it add a class to my <body> element to “inform” my CSS of the change. I have
special styles set up for many key elements on the page (mostly width attributes, as youʼd imagine) that get
automatically applied by simply adding or removing the horizontal class:
function updateOrientation()
{
var portrait;
var landscape;
switch(window.orientation)
{
case 90:
landscape=true;
break;
case -90:
landscape=true;
break;
case 180:
portrait=true;
break;
case 0:
portrait=true;
break;
}
//portrait
if (portrait)
{
$('body').removeClass('horizontal');
}
//landscape
if (landscape)
{
$('body').addClass('horizontal');
}
}
You can also see the use of jQuery here to target the <body> element with $(‘body’). addClass() is
provided by jQuery and does just what it says. The CSS rule below is a good example of something applied by
this code to bump up the text size just a bit when we go to horizontal mode in order to keep a nice line length:
body.horizontal p
{
font-size:15px;
line-height:20px;
}
7. wexarts.org iPhone Project: Developer Documentation ~ Page 7 of 20
CSS Tricks
CSS Transforms and Animation
Read more at: http://webkit.org/blog/138/css-animation/ & http://www.ferretarmy.com/css-animation-examples/
Hands down, this is (to me) the coolest feature in CSS3 and the Safari browser. This technology is at the core
of the way wexarts.org/iphone handles the “sliding” or “swinging” panels effect, and will become even more
important as we explore new ways to provide our visually-heavy content. There are some great, concrete
examples in the links above of this basic concept, so I wonʼt give any of these examples here. I recommend
you read those posts and become familiar with how to set these up on your own. Note that these links wonʼt
work unless youʼre running Safari (either mobile or desktop). There will be more examples of this when I start
talking about the panels model.
CSS Text Shadows
Read more at: http://fredericiana.com/2009/06/10/stylish-text-with-the-css-text-shadow-property/
Another neat (and under-supported in other browsers) CSS trick is text-shadow. It can be used for very
gratuitous effects like huge drop shadows, but it comes in real handy when you want to do a nice, Apple-esque
“bezel” or “chiseled” text effect, like wexarts.org/iphone uses on some of its controls and elsewhere:
text-shadow: #ddd 0px -1px 0px;
Itʼs subtle, but itʼs there. The text-shadow property accepts first a color for the shadow, followed by the
horizontal offset (in pixels), the vertical offset (in pixels) and an optional blur radius. For the chiseled effect, I
just used a light grey shadow moved 1 pixel down using the vertical offset. This effectively duplicates our text
behind the original, one pixel down, and in a lighter color. This is great because we donʼt have to use images to
get the effect, and itʼs a good reference to the iPhoneʼs native UI.
1 pixel super easy gradient bars
In order to minimize bandwidth, whenever I want to use a gradient effect like the one in the button above, I
create the appropriate gradient at the correct height, use Photoshop to make my image 1 pixel wide, and save
it as PNG24. This almost always results in a file thatʼs less than a kilobyte, and using CSS we can simply
repeat it across our element to give the appearance of one solid background:
background:url('../graphics/button_gradient.png') top left repeat-x;
8. wexarts.org iPhone Project: Developer Documentation ~ Page 8 of 20
We can take this idea even further by combining all the gradients needed into one PNG file, stacked on top of
one another, using CSS to specify a vertical-position for the background of our element. This minimizes HTTP
requests. In the words of Martha Stewart, “itʼs a good thing”. I use this for the colored event area bars on
wexarts.org/iphone, but it could be expanded to handle every gradient on the site (and probably should be).
original image 1px PNG
div#today .sectionheader
{
background:white url('../graphics/gradients.png') repeat-x 0px 0px;
}
div#ex .sectionheader
{
background:white url('../graphics/gradients.png') repeat-x 0px -39px;
}
div#fv .sectionheader
{
background:white url('../graphics/gradients.png') repeat-x 0px -78px;
}
div#pa .sectionheader
{
background:white url('../graphics/gradients.png') repeat-x 0px -117px;
}
div#ed .sectionheader
{
background:white url('../graphics/gradients.png') repeat-x 0px -156px;
}
This is a very good way to help load time, especially on 3G networks where latency can be a big issue, but this
isnʼt limited to mobile sites. Do this!
9. wexarts.org iPhone Project: Developer Documentation ~ Page 9 of 20
The Panels Model
Many iPhone native apps (Mail is a good example) utilizes what I and others call sliding “panels.” It gives a
nice visual representation of “drilling down” into different layers of content or levels of detail. If you have ever
used an iPhone, you know what Iʼm talking about. It works like this:
On the web, the basic way to do this is with two constant elements (#viewer and #strip, here), and several
panel elements (.panel here) within the #strip. The #viewer element is specified with
position:absolute; and overflow-x:hidden, making it easy for #strip to be moved left and right to
show and reveal the panels within it. Only the panel youʼre interested in can be seen “through” the #viewer
element. All of these elements are usually <div>. A strong article that helped me implement and refine this
concept for use in wexarts.org/iphone: http://css-tricks.com/create-a-slick-iphonemobile-interface-from-any-rss-
feed/ (scroll down to “step” 4 to get to the slider interface stuff). Also, iUI has some good code for doing this if
you peak into their files (itʼs totally open source, so steal to your hearts content!).
10. wexarts.org iPhone Project: Developer Documentation ~ Page 10 of 20
Wexarts.org/iphone Panels Code
Iʼve included a simplified version of the wexarts.org/iphone panels code below. I implemented CSS
animation/transforms for “hardware accelerated” animation, and it really does look really smooth, especially on
a 3GS. This is something that the latest iUI has as an “experimental” feature, but it works great for us, with one
caveat (explained below). Iʼll explain some specific points after the code dump:
HTML
<div id='wrapper'>
<div id='viewer'>
<div id='strip' class='panel1'>
<div class='panel 1 shown'>
<!-- default calendar page view -->
</div>
</div>
</div>
</div>
CSS
div#viewer
{
overflow-x:hidden;
width:320px;
}
div#strip
{
position:relative;
width:1500px;
-webkit-transform:translateX(0px);
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: .3s;
-webkit-transition-timing-function: ease-out;
}
div#strip.panel1
{
-webkit-transform:translateX(0px);
}
div#strip.panel2
{
-webkit-transform:translateX(-320px);
}
div#strip.panel3
{
-webkit-transform:translateX(-640px);
}
div.panel.shown
11. wexarts.org iPhone Project: Developer Documentation ~ Page 11 of 20
{
display:block;
visibility:visible;
height:auto;
}
div.panel
{
width:320px;
float:left;
position:relative;
height:1px;
overflow:hidden;
}
JavaScript
var currentPanel=1;
function loadPanel(panelURL)
{
$.ajax({
url: panelURL,
cache: false,
success: function(data)
{
$("#strip").append(data); //append the wrapper
},
});
var oldPanel = currentPanel; //keep track of where we are
currentPanel = currentPanel + 1;
scrollTo(0,1); //make sure we’re at the top
$("#strip").removeClass("panel" + String(oldPanel)); //remove #strip class
$("#strip").addClass("panel" + String(currentPanel)); //add #strip class
$(".panel:last").addClass(String(currentPanel));
$(".panel." + String(currentPanel)).addClass("shown"); //show it
setTimeout('$(".panel." + '+ String(oldPanel+').removeClass("shown")',500);
//hide previous panel so it's height doesn't interfere after we’ve slid
}
function prevPanel()
{
if (currentPanel > 1) //dont swing into the abyss!
{
var oldPanel = currentPanel;
currentPanel = currentPanel - 1;
}
12. wexarts.org iPhone Project: Developer Documentation ~ Page 12 of 20
scrollTo(0,1);
$("#strip").removeClass("panel" + String(oldPanel));
$("#strip").addClass("panel" + String(currentPanel));
$(".panel." + currentPanel).addClass("shown");
setTimeout('$(".panel." + ' + oldPanel + ').remove()',500);
//remove panel we just came from from DOM
}
Several things are happening here at once. First, we set up the structure I described earlier in HTML (inside a
wrapper <div> just to keep things tidy). The classnames are important here. The class “panel1” on our
#strip tells the CSS which position it should be in. The two classes on our only div.panel indicate which
panel it is, and whether or not it is shown.
The CSS uses the class of #strip to determine itʼs position and consequentially which panel is in front of
#viewer. The shown class on the panel serves a special purpose. You can see in the CSS that any panels
without this class have a height of 1px, this is so that longer panels that are not being viewed donʼt extend
#viewer past the viewable content, allowing the user to scroll into nothingness. The other important thing
thatʼs happening in the CSS is the use of -webkit-transition and -webkit-transform. Hopefully
youʼve read the links earlier that explain how these work —these properties are what make the animation
happen. Youʼll notice in our JavaScript that there is no mention of animation; just changing the translateX()
value on an element triggers Safari to animate to the new value. The reason we donʼt just use the left
property here is because -webkit-transform is performance optimized on the iphone for the smoothest
possible animation.
The JavaScript does all the nifty manipulation of these classes (made especially easy through jQuery). It keeps
track of the current panel through a global variable, and adds and removes classes to the various panels and
the #strip element to make all this work. Thereʼs also an example of using jQuery for AJAX. If youʼre not
familiar with it, AJAX is a method for making requests to a server from within JavaScript. This allows us to
dynamically load in content (say, an “Event Page” panel) without having to reload the entire page. So, if you
called loadPanel(‘/panels/event.php?eventid=1029’); for example, this function is going to load
that file and inject it into the DOM. The ʻ/panels/event.php” file (remember, this is just an example; that file
could be anything) is where the hook to your own CMS or database goes. In this case, the file you are loading
returns one element, a <div> with class panel. scrollTo(0,1); attempts to keep Safari scrolled to the top
of the page, as well as hide the address bar, as you go through panels. However, itʼs a little unpredictable as to
how often the address bar disappears with this method.
13. wexarts.org iPhone Project: Developer Documentation ~ Page 13 of 20
Implementing the panels model is a hairy process. You are going to run into issues, especially when it comes
to things like <video> tags and Safariʼs built in functionality for automatically turning YouTube videos into links
to the iPhoneʼs own YouTube app. When using a CSS transform on their container element, these elements
simply disappear on mobile Safari, and sometimes, desktop Safari as well. I havenʼt found a solution.
wexarts.org/iphone uses a workaround: a special site-wide embed code for videos that generates a YouTube
link on iPhone using an image, and an embed on desktop browsers. This embed code is going to be improved
upon in the future as we begin to support our upcoming video portal and the <video> tag on iPhone.
Another problem I came across was the way my implementation of panels worked when the deviceʼs
orientation (and therefore, page width) changed. The way I ended up handling this was using hard coded pixel
values for the width of the relevant <div>s and their CSS transform values, which get updated via CSS when
the orientation changes (see the section on that earlier in this document). There are a number of options for
getting this done in a cleaner way, mostly involving setting the CSS transform values directly from JavaScript.
Hopefully, I will make progress in this area in future versions of wexarts.org/iphone, in which case Iʼll update
this document.
14. wexarts.org iPhone Project: Developer Documentation ~ Page 14 of 20
Expanding/Contracting Categories
To keep iPhone users from scrolling through a stupidly long page on our calendar and about pages, we
decided on using expanding and contracting “sections” or “categories” that drop open or closed when a user
touches them. This is pretty easy to implement with jQuery, so letʼs get straight to the code.
HTML
<!--today section-->
<div id='today' class='section'>
<div id='today_header' section='today' class='sectionheader clickable'>Today
<span class='hideshow'><img src='graphics/open_arrow.png' /></span>
</div>
<div id='today_content' class='sectioncontent sectionopen'>
<?php …load content …?>
</div>
</div>
<!-- end today section-->
…continued on next page
15. wexarts.org iPhone Project: Developer Documentation ~ Page 15 of 20
<!--film video section-->
<div id='fv' class='section'>
<div id='fv_header' section='fv' class='sectionheader clickable'>Film/Video
<span class='hideshow'><img src='graphics/closed_arrow.png' /></span>
</div>
<div id='fv_content' class='sectioncontent'>
<?php …load content …?>
</div>
</div>
<!--end film video section-->
(There is one of these blocks of code for each category.)
CSS
div.sectioncontent
{
display:none;
}
div.sectioncontent.sectionopen
{
display:block;
}
div.sectionheader
{
height:29px;
padding-left:7px;
padding-top:10px;
/* these rules don’t really apply to this example
in general, they are just for appearance */
}
JavaScript
function switchSectionHeader(section_id)
{
if (!$('#' + section_id + " .sectioncontent").hasClass('sectionopen'))
//currently closed?
{
//close others
$('.sectioncontent').slideUp(250).removeClass('sectionopen');
$('span.hideshow img').attr("src", "graphics/closed_arrow.png");
//open this one
$('#' + section_id + »
.sectioncontent").slideDown(250).addClass('sectionopen');
$('#' + section_id + " span.hideshow img").attr("src", »
"graphics/open_arrow.png");
//adjust view to currently open
setTimeout(function(){$('body, html').scrollTop($('#' + section_id + "
» .sectioncontent").scrollTop());},300);
}
16. wexarts.org iPhone Project: Developer Documentation ~ Page 16 of 20
else //currently open?
{
//close it
$('#' + section_id + " »
.sectioncontent").slideUp(250).removeClass('sectionopen');
$('#' + section_id + " span.hideshow img").attr("src", »
"graphics/closed_arrow.png");
}
}
$(document).ready(function ()
{
$(".sectionheader.clickable").click(function(){
switchSectionHeader($(this).attr('section'))
});
}
The CSS/HTML is pretty minimal, all it does is make sure panels are hidden by default, except for the one we
specify by giving it the class .sectionopen. I also showed some example rules for setting up the “button”
element.
The JavaScript is where it gets more fun. In $(document).ready(), I set up an event handler for any
.sectionheader element which I specify as .clickable (sometimes these headers are used for other
things). The function it calls checks to see if the section that was “clicked” (really, touched), is open (by tracking
the sectionopen class) and handles it appropriately. If the section in question is closed, we first close any
other open sections on the page before opening the one we want. Iʼm using jQueryʼs built in slideUp() and
slideDown() functions to handle the animation. There is an opportunity to use CSS transitions here, but itʼs
too buggy for me to release for now. I also attempt to scroll the userʼs view up to the one they just opened,
because sometimes with longer sections you can end up in the middle of one after the switch. iPhoneʼs support
of scrollTop is still a little buggy (you canʼt animate it, for example), so this can be erratic at times. The other
thing that happens here is switching the little arrow graphic on the headers to help reflect their state to the
user.
17. wexarts.org iPhone Project: Developer Documentation ~ Page 17 of 20
Device Sniffing
For wexarts.org, we wanted to redirect iPhone users visiting an area, series, event, or the homepage of
wexarts.org to our new mobile site, unless they had specified in the past that they prefer the desktop version.
Similarly, we needed to redirect users of anything but an iPhone away from wexarts.org/iphone and into
wexarts.org/mobile (the generic mobile view). Note that the example below does not redirect users of say,
Opera mini, to the mobile view by default from wexarts.org. This is the only example in this document that uses
server side scripting, because we want this redirect to be totally transparent to the end user. In the end, thereʼs
a combination of PHP, a little JavaScript, and cookies used to get this done.
PHP for http://wexarts.org/
This code is in our header files and decides if and how an iPhone or iPod touch user should be redirected:
$iphoneURL = “http://wexarts.org/iphone/”;
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$itouch = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
if ($iphone !=false || $itouch!=false)
$iphoneVisitor=true;
if ($iphoneVisitor)
{ //using an iPhone?
if (isset($_COOKIE['iphonechoice']))
{ //we've been here before?
if ($_COOKIE['iphonechoice']=='iphoneview')
$iphoneRedirect=true; //they want iPhone view
else
$iphoneRedirect=false; //keep us here
}
else
{ //or, first time iPhone visitor
$iphoneRedirect=true; //let them see the iPhone site
setcookie("iphonechoice","iphoneview",time()+60*60*24*365,"/",".wexarts.org");
}
//////iphone redirects
//are we on an event page?
if($_GET['eventid'])
$iphoneRedirectURL = "$iphoneURL?eventid=".$_GET['eventid'];
//what about a series page?
if($_GET['seriesid'])
$iphoneRedirectURL = "$iphoneURL?seriesid=".$_GET['seriesid'];
18. wexarts.org iPhone Project: Developer Documentation ~ Page 18 of 20
//are we on an area page?
if ($_SERVER['REQUEST_URI']=='/ex/')
$iphoneRedirectURL = "$iphoneURL?area=ex";
if ($_SERVER['REQUEST_URI']=='/fv/')
$iphoneRedirectURL = "$iphoneURL?area=fv";
if ($_SERVER['REQUEST_URI']=='/ed/')
$iphoneRedirectURL = "$iphoneURL?area=ed";
if ($_SERVER['REQUEST_URI']=='/pa/')
$iphoneRedirectURL = "$iphoneURL?area=pa";
//cal or index page?
if ($_SERVER['REQUEST_URI']=='/cal/' || $_SERVER['REQUEST_URI']=='/' ||
$_SERVER['REQUEST_URI']=='/index.php')
$iphoneRedirectURL = $iphoneURL;
//if we're go for redirect, do it.
if ($iphoneRedirect && iphoneRedirectURL) header("Location: ".$iphoneRedirectURL);
/////decide if we should alert the user to the existence of an iPhone version//////
$iphoneHidePrompt = $_COOKIE['iphonehideprompt'];
if ($iphoneRedirectURL && $iphoneHidePrompt!='yes')
$iphoneAlert=true;
}
Itʼs pretty straightforward. I wonʼt get into PHP syntax, but itʼs similar enough to JavaScript (“C-Style”) that you
should be able to follow if youʼre used to something else. The first thing we do is check for the existence of the
string “iPhone” or “iPod” in the user agent string. Every browser sends information about itself and the
environment itʼs running in with each request to a web server. If either of these words exists in this string, itʼs
safe enough for our purposes to assume this is a request from an iPhone (or iPod touch).
Once weʼve established that weʼre dealing with an iPhone, we check to see if our “iphonechoice” cookie is set.
If itʼs not (first time iPhone visitor), or if itʼs set to “iphoneview”, we set the variable $iphoneRedirect as
true to be used in our logic further down. If itʼs set to anything else, this variable gets set to false.
The next block of code decides if this page has an iPhone equivalent, and if so sets $iphoneRedirectURL
accordingly. Then, PHP checks to see if A) This is a request from an iPhone and the user has not chosen to
see the desktop view ($iphoneRedirect set to true) and B) This page has an iPhone equivalent
($iphoneRedirectURL is not null). If both of these conditions are met, we use header() to redirect to the
equivalent page. All of this happens before the iPhone user even knew what was coming to them.
19. wexarts.org iPhone Project: Developer Documentation ~ Page 19 of 20
If the user has specified that they donʼt want to see iPhone versions of applicable pages, but this opportunity
does exist for this page, we set a flag variable to show an alert that they can see this in an iPhone view.
Clicking no once on this sets a cookie (that expires at the end of the session) to hide this prompt as well. This
is done in JavaScript:
<?php if ($iphoneAlert) { ?>
<script type="text/javascript">
$(document).ready(function(){
var redirect = confirm("View iPhone version of this page?")
if(redirect)
{
window.location="<?=$iphoneRedirectURL?>";
}
else
{
var options = { domain:'.wexarts.org', path: '/', expires: 0 };
$.cookie('iphonehideprompt', 'yes', options);
}
});
</script>
<?php } ?>
Note that this alert is only shown to iPhone users who have opted out of automatic redirects, are on a page that
has an iPhone equivalent, and havenʼt said no to this yet this session. This makes use of the excellent jQuery
cookie plug in, found here: http://plugins.jquery.com/project/cookie. That takes care of the desktop site, but
what happens behind the scenes at wexarts.org/iphone?
PHP in http://wexarts.org/iphone/
Thereʼs some user agent and cookie reading going on here, too:
$genericURL="http://wexarts.org/mobile/";
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$itouch = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
if ($iphone==false && $itouch==false)
header("Location:$genericURL");
if (!isset($_COOKIE['iphonechoice'])) //dont have a choice for iphone?
//default to show iphone view
setcookie("iphonechoice","iphoneview",time()+60*60*24*365,"/",".wexarts.org");
If weʼre not dealing with an iPhone, we need to redirect to the generic mobile site so these users can still
access content. Also, if the user doesnʼt have an iPhone preference yet, (they may have typed
http://wexarts.org/iphone/ into Safari directly after hearing about it, for example) we go ahead and set that
20. wexarts.org iPhone Project: Developer Documentation ~ Page 20 of 20
cookie. By the way, you canʼt really set cookies to never expire as far as I know, so I just set them for a year as
an effectively “permanent” preference.
For the “iPhone view preferences” on wexarts.org/iphone, I implemented a quick “toggle” switch in jQuery that
just sets the “iphonechoice” cookie when activated. I wonʼt go into that here, consider it homework!
Conclusion
Hopefully you came away from this document with a few tricks up your sleeve for iPhone development. I tried
to be as clear as possible, but Iʼm not a tech writer, so if you have any questions or need some clarification,
email me and Iʼll see what I can do. That being said, Google and Appleʼs Developer Connection website taught
me everything I know about iPhone development. Chances are you can find the answer to your question
somewhere. I tried to focus this document on things I couldnʼt find explained clearly to me. Thanks for reading,
and feel free to share your feedback and suggestions.
Alex Ford
Student Assistant, Wexner Center for the Arts
Columbus, OH
aford@wexarts.org
This is the first version of this file, released publicly August 24, 2009.
Thanks to the many internal test group iPhone users at the Wexner Center for the Arts, and also to Robert Duffy, Jerry Dannemiller,
and Chris Jones for guidance throughout the project. When in Columbus, Ohio, visit the Wexner Center for the Arts, 1871 N. High St.