    
|
|
|
By Potomac Photonics
January 27, 2014.
Category: Company, Industry
Integration of microelectronics and microfluidics
New technologies and advances in automated machinery have given rise to a host of new contract service providers in the digital fabrication market. But Potomac is different in that we do more than just purchase off the shelf machines. Here at Potomac we have a 30-year history of R&D to drive fundamental understanding and improvement in digital fabrication tools and processes. Potomac’s depth of knowledge helps our customers solve their manufacturing problems in unique and cost-effective ways that standard tools can’t match.
One of Potomac’s new areas of work is fabrication of advanced microfluidic devices. We’re using new technologies such as hot embossing and 3D Printing in combination with laser micromachining to reduce fabrication time and cost. As we manufacture for specific applications, customers are requesting advanced characterization and control of the fluids in the devices. Responding to customer challenges, Potomac founder Dr. Paul Christensen started an R&D project to address the problems and also tapped the Mechanical Engineering Department at the University of Maryland, Baltimore County [UMBC].
Dr. Christensen’s new microfluidic R&D project draws from PotomacMeso’s recent results generated by a National Science Foundation SBIR Phase II grant to investigate new techniques for building highly miniaturized electronic systems. He has devised ways to embed the smallest surface mount electronic components in a thermoset epoxy block and interconnect them with fine-feature nanoparticle silver conductors. A sample structure is shown here.
At UMBC, Professor Tony Farquhar and Ph.D. student Amir Harandi have carried out in-depth studies of heating and cooling of microfluidic structures using patterned copper structures for heat transfer. In the course of their work, they’ve developed a thorough understanding of issues involved in heating and cooling microfluidic systems, techniques for local temperature measurement, and expertise in thermal modeling and analysis.
It is our hope that both research areas can be combined to develop simple and inexpensive methods for customizable thermal distributions in a microfluidic structure, using surface mount electronic components. Watch this space for updates on the R&D, as Potomac drives digital fabrication forward for improved microfluidic devices.
]]>A roundup of the most interesting stories from other sites, collected by the staff at MIT Technology Review.
The New Snowden Revelation Is Dangerous for Anonymous—And for All of Us
Anthropologist Gabriella Coleman explains why news that U.K. intelligence attacked chat rooms used by the nebulous hacker collective Anonymous is bad for online life and democracy as a whole.
—Tom Simonite, senior editor, IT
When I was looking through the analytics data for a product I recently launched I was taken aback by just how much mobile traffic the web app was getting. After seeking some feedback from users it became clear that people were using the ‘Add to Home Screen’ feature in Safari on iOS to create a shortcut to the app right on their home screen. The app was already designed to be responsive but after discovering how popular this user behaviour was I started thinking about how I could make the mobile experience even better for these users.
In this post I want to share with you some of the techniques I’ve learned about how to optimize mobile web apps for iOS. You’re going to learn how to set the launcher icon, startup image, status bar styling, and more.
Lets get started!
The first thing you can do to ensure that you’re delivering a great mobile experience to users is to correctly set the viewport for your app. This will ensure that the layout and content is displayed nicely within the dimensions of the screen your app is being viewed on.
To set the viewport you just need to add the following <meta> tag to the <head> of the document.
<meta name="viewport" content="width=device-width, initial-scale=1">This will set the width of the viewport to match the width of the device. The initial-scale value ensures that no zoom will be applied to the page when it first loads.
Launcher Icon
One of the most important things to do when optimizing your web app for iOS is to set the launcher icon. This is the icon that will be displayed on the home screen of the user’s device. If you don’t set this yourself, iOS will use a screenshot of the page instead.
You can specify the launcher icon by adding a <link> element to the <head> of your document. Make sure that you set the rel attribute on this element to apple-touch-icon.
<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png">Your icon image should be supplied in PNG format.
As Apple hardware has evolved we’ve seen the introduction of new screen sizes and densities. This means that you cannot create a single icon that will be displayed nicely on all Apple devices. Instead you need to create icons that specifically target devices with retina and non-retina screens.
You can specify icons aimed at particular device resolutions by adding multiple <link> elements with sizes attributes. This attribute should contain the size of the icon referenced in the href attribute. Safari will pick out the icon that is most appropriate to the user’s device.
<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">The icon sizes needed to target specific devices can be found in the table below. If you don’t specify a sizes attribute, the default size of 60x60 will be used.
| Icon Size | Devices |
|---|---|
| 60×60 | iPhone & iPod Touch (Non-Retina) |
| 76×76 | iPad 2 & iPad mini (Non-Retina) |
| 120×120 | iPhone & iPod Touch (Retina) |
| 152×152 | iPad & iPad mini (Retina) |
Note: Safari on iOS 7 doesn’t add any effects to your icons, however older versions of Safari will. If you don’t want older versions of Safari to apply effects to your icons make sure that the filenames end with -precomposed.png.
The startup image for the Jawbone UP app.
Next up you’re going to learn how to add a startup image for your app. This will be displayed to the user whilst the page is loading. If you don’t specify a startup image the user will just see a blank white screen.
You can specify a startup image using a <link> tag with the rel attribute set to apple-touch-startup-image.
<link rel="apple-touch-startup-image" href="/startup-image.png">The size of the startup image for iPhone 5S/5C is 640 x 1136 (pixels).
Unlike with launcher icons, you cannot use the sizes attribute to target different screen resolutions when it comes to startup images. Instead you need to use media queries. Github user Taylor Fausak has put together a great gist that demonstrates how to do this.
By default Safari will use the contents of the page’s <title> element to set the initial title for the launcher icon. You can however override this by adding a <meta> tag with apple-mobile-web-app-title set as the value of the name attribute. The value of the element’s content attribute will then be used as the launcher title.
<meta name="apple-mobile-web-app-title" content="Kojitsu">Explicitly setting the title of your web app like this can be useful if the <title> element contains a lot of text that’s used for SEO purposes.
Another great optimization is to hide the browser UI so that you can maximize the screen space available to your app. This can be done by adding a <meta> element with the name attribute set to apple-mobile-web-app-capable, and the content attribute set to yes.
<meta name="apple-mobile-web-app-capable" content="yes">This will cause your app to run in standalone mode. It’s worth noting that any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. To get around this you could build your app as a single-page application (SPA).
Browser UI Comparison: Visible (left) and Hidden (right).
Note: Chrome for Android also supports the ability to run an app in standalone mode. Be sure to add a <meta> element with the name attribute set as mobile-web-app-capable to enable this.
<meta name="mobile-web-app-capable" content="yes">You can check to see if your app is running in standalone mode by examining the navigator.standalone property using JavaScript.
if (window.navigator.standalone) {
// The app is running in standalone mode.
}As well as hiding the browser UI, you can also alter how the iOS status bar is displayed. This is done using a <meta> element with the name attribute set to apple-mobile-web-app-status-bar-style.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">There are a number of different values that you can use to set the style of the status bar. These should be specified as the value for the content attribute.
The ‘default’ status bar style (iOS 7).
default – The default system status bar will be displayed above the web content.
The ‘black’ status bar style (iOS 7).
black – The status bar will be displayed above the web content with a black background.
The ‘black-translucent’ status bar style (iOS 7).
black-translucent – The status bar will be displayed over the top of the web content, with a translucent background.
If you use the black-translucent value be sure to add an extra 20 pixels of padding to the top of your page to ensure that the status bar does not obscure your content.
Note: Setting the status bar style will only work if you have also specified an apple-mobile-web-app-capable meta tag.
The last optimization we’re going to look at is how to link to native apps. This allows you to do things like make a phone call, send an SMS message, or even launch the YouTube app.
To launch native apps you need to use one of the URL schemes supported by Safari on iOS.
To launch the mail app you just use the standard mailto scheme that you may already be familiar with.
<a href="mailto:hello@example.com">Send Email</a>The tel URL scheme is used to launch the dialer from your mobile web app. An alert will be displayed prompting the user to confirm that they wish to make the call.
<a href="tel:01234567890">Call Jim</a>You can launch the FaceTime app using the facetime URL scheme. You should specify either the phone number or email address of the person you wish to call. Again the user will be asked to confirm the call before the app is launched.
<a href="facetime:01234567890">Call using FaceTime</a>
<a href="facetime:hello@example.com">Call using FaceTime</a>You can launch the Messages app using the sms URL scheme. You have the option to specify the phone number for the person you wish to message. If you leave it blank the app will still be launched, just without a pre-filled recipient.
<a href="sms:">Launch Messages App</a>
<a href="sms:01234567890">Send an SMS</a>The Maps app can be launched by specifying a maps.apple.com URL. There are a number of parameters that can be used to specify the behavior of the Maps app when it is launched (e.g. location, directions, zoom level, etc…). You can find a full list of these parameters here.
<a href="http://maps.apple.com/?q=cupertino">Cupertino</a>For driving directions, you can specify the destination and start addresses using the daddr and saddr parameters.
<a href="http://maps.apple.com/?daddr=San+Francisco,+CA&saddr=cupertino">Directions</a>Links that use a full YouTube URL will be intercepted by the native YouTube app (if it’s installed). Ensure that the URL matches one of the formats in the examples below.
<a href="http://www.youtube.com/watch?v=VIDEO_ID">Play Video</a>
<a href="http://www.youtube.com/v/VIDEO_ID">Play Video</a>Despite the popularity of native applications, I don’t think that anyone should write-off the demand for mobile web apps. Browsing on mobile devices has been growing at a staggering rate over the past few years and is showing no signs of slowing down. By applying the techniques you’ve learned in this post you can ensure that you’re delivering the best possible experience to your mobile users.
The post Optimizing Mobile Web Apps for iOS appeared first on Treehouse Blog.
]]>Social-networking apps that eschew real names are gaining ground.
For just over a decade, Facebook has enforced the idea of an authentic online identity tied to each user of a social network. This might be fine for sharing news of a promotion or new baby with friends, but sometimes you’d probably like to post a status update that won’t go on your permanent record.
]]>