Month: December 2018

Tip o’ the Week 459 – Building a better phone UI

Posted on by ewand

clip_image002Microsoft fangrlz and fanbois, shed a tear for the Windows Phone platform, which relaunched with some fanfare just over 8 years ago as “Windows Phone 7 Series” (recalling the Microsoft redesigns the iPod packaging spoof?). The original idea with the new platform was that you didn’t need to jump in and out of apps all the time, since apps surfaced their info on the home screen and to a series of Hubs. Check out the original 2010 advert that painted the vision (fairly) clearly…

The hastily-renamed Windows Phone 7 showed up in November 2010, and came with a comparatively lavish marketing budget, bring some quite edgy and memorable adverts – like the Season of the Witch, or Really? (try not to boke at the scene where the guy drops his phone…)

A year later, and almost 7 years ago to this day, Canadian DJ and electro-music producer Deadmau5 played an amazing light show in London to celebrate the launch of the first Nokia Lumia phone; the fact that his track “Bad Selection” was the one that showcased what the phone looked like did raise a snigger at the time. He was back a year later with another event to celebrate the launch of the Lumia 820 with Windows Phone 8.

Now that Windows Phone has been in the ground for more than a year, it’s worth celebrating its somewhat spiritualclip_image004 successor – the Microsoft Launcher for Android (see ToWs passim, #345 and #438). One of the upsides of the Android platform is the fact you can effectively re-write the main UI, and most phone manufacturers ship their own variants of common apps (like Contacts, Phone, Messaging etc), so it’s ripe for customizing.

clip_image006The Launcher brings some of the design elements of Windows Phone to Android, while building in great new ideas – like the swipe right to the “Glance” screen, Bing visual search, Timeline integration with Windows PCs and more.

The Microsoft Launcher has had more than 10 million downloads and has a rating of 4.6 / 5, with over 750,000 reviews – and it’s recognised by many commentators as one of the best Android launchers, even in such a crowded market.

If you’re up for trying out a new release, sign up to be a tester for the Microsoft Launcher Beta – currently offering a major update (5.1) that includes better Cortana functionality, To-Do and Sticky Notes synch from PCs and more. See details here. Join the community here (Google+ is still a thing – who knew?)

The beta even has a new “Screen time” function that promises to tell you how often and how long you use the phone, and with which apps. Google has shipped a “Digital Wellbeing” feature for its latest Android release (v9 aka Android “Pie”), but many phones won’t get that release for ages, if at all. Microsoft Launcher works on Android 4.2 and later.

Tip o’ the Week 458 – Grabbing pictures from websites

Posted on by ewand

clip_image001There are plenty of reasons why you might want to get the URL of a picture that is embedded on a web page, and some of them don’t even risk breaching the copyright of the image’s owner or page author!

Legitimate examples might include things like downloading a company logo from its website so you can include it in a PowerPoint slide; try going to just about any major company site and you’ll probably find it’s not straightforward to save the image file. Ditto all sorts of clever pages that might stop you simply saving the picture to your PC.

clip_image003clip_image005Normal behaviour is, mostly, to just right-click on an image and in Edge, you’ll be able to save the picture (or use Cortana to try to give you more details on the image, even trying to guess what’s in the image depending on how straightforward it is – it’s surprisingly good). Ditto, if you’re using Chrome, except you can search Google instead. Try the same on a company logo, and you may find you won’t get the option to save or search.

If you want to grab the actual URL for an image on a web page, the clip_image006foolproof way of getting it is to look at the source – if you don’t mind fishing through maybe a few thousand lines of HTML. It’s not too bad if the image is at the top of the page, but it could prove tedious if elsewhere. In Edge, an easier solution would be to right-click on the image and choose, Inspect element. You may need to press F12 to get these options in your right-click menu. Chrome has a similar thing, simply called Inspect, and can be invoked by CTRL-SHIFT-I.

The Inspect Element funciton in browsers is designed to help web page debugging; it’ll let a user or designer jump straight to the section of a web page’s source, and inspect or even modify the code behind the page.

clip_image008As an example, right-click on the logo on www.microsoft.com and Inspect Element. You’ll see the highlighted section is the bit where the logo sits on the page, and immediately next in the hierarchical representation of the page code, you’ll see the <img> tag, denoting that this pertains to the image itself.

Look for the src= part, double-click on it and you’ll see the URL of the image in an editable text box, meaning you can easily copy that to the clipboard and get ready to paste it wherever you need it clip_image010to go. Try pasting it into a new browser tab just to check that all you’re getting is the logo.

clip_image011

Using a search engine

Of course, there may be easier ways to get an image – using Bing or Google search, for example.

Bing is actually quite a bit better in this regard. When you click on an image in the results from Bing’s Image search, you’ll see a larger preview of the picture along with a few actions you can take – like jump to the originating page; search for other sizes of the same image; use Visual Search to run a query on just some selectable portion of the image; or simply just view it in the browser, thereby opening just that image and showing you the direct URL to it.

In the case of both Google and Bing, if you click on “Share”, then you’ll get a link to the search result of that image rather than the picture itself – so if your plan is to embed the image in another web page or upload it to some other place, then you’ll be frustrated.

clip_image012Another legitimate use of the original URL for a logo might be to change the icon in Teams – assuming you have permissions to Manage a team site (click the ellipsis … to the right of the clip_image013name and if you’re suitably perm-ed up, when you click on the Manage Team option, you’ll see a little pencil icon on the logo if you hover over it. Click that to change the picture).

Simply choose Upload picture, paste in the URL of the logo you want to use and you’re off to the races.

Figuratively speaking, anyway. You might have to jigger about with the proportions of the image by downloading it first and editing it elsewhere, as the image will need to be more-or-less square. Built-in icons in Teams appear to be 240×240 pixels in size so you could try to target that if you’re resizing.