<Web-Tech>

Apple's Special Event March 21, 2016 Overview

2016-03-21T15:33:00.001-07:00

Apple revealed 4 things in their Special Event today March 21 2016.

The new 4" iPhone.
The new 9 inch iPad Pro
The iOS 9.3 update
Research Kit & CareKit

The 4" iPhone SE

Sporting the same outer casing and design as its predecessors, the iPhone 5 and 5s, the iPhone SE not only drops the "5" numeral it also brings iPhone 6s and 6s Plus features to the 4" screen size.

Updated with the new A9 chip from its older siblings, the now simply titled iPhone SE gets the processing power to run the updated iSight Camera, and video processing required with it. It basically brings the power and features of the larger iPhones to the smaller screen size.

iOS

All in all a welcome update, and expected one, since Apple has been touting a 5 iPhone lineup since the release of the iPhone 6s and 6S plus last September. If you were put off by the larger screen, this is your chance to get the smaller version, with the smaller price tag, but with the same power and features as the larger offerings

The 9" iPad Pro

Since the iPad Air 2 did not get an update last September in favor of the iPad Pro release, it was pretty much called at that time that it would see an update mid cycle. The 9" iPad Pro as its being called, is now the 7th generation iPad released by Apple in the 9" format.

It features the same Apple Pencil supporting screen technology as its larger sibling, and gets some extra updates. Mainly the new 12MP iSight Camera available on the iPhone 6s and 6s Plus along with a 5MP front facing Facetime camera. It also gets True Tone Flash and Live Picture support which its larger sibling lacks.

The 9" iPad Pro also debuts a new storage size offering with its 256GB version. The 256GB option will also be available in future 12" iPad Pros

Overall an expected update to the 9" lineup. However it leaves some iPad Pro adopters a little miffed, by the extra features not available in the larger more expensive version that now seems slightly outdated with only 6 months in its life span.

iOS 9.3 & CareKIt

iOS 9.3 brings a few new features, and updates to existing ones. Things like Health, and CarPlay get your standard updates. While Notes receives a new security feature which lets you password / Touch ID protect your Notes.

The new update also brings with it Night Shift, which makes the screen light warmer instead of the colder blue light it normally has, for night usage that may help you sleep better.

The update also brings with it new tools to manage iPads in classrooms, and new ways for Teachers and students to interact through their iPads.

iOS 9.3 also brings with it CareKit and ResearchKit, two new frameworks for App developers to help Doctors and care givers more easily track their patients care and status. Along with HealthKit they provide a wealth of information on the patient's health.

Overall a couple of key updates, but nothing really earth shattering in terms of new features. It was not as exciting as there usual September Keynotes, and the reveals were pretty much called since last year, so nothing that we did not expect already

FBI Requests Apple bypass the security of iOS to unlock iPhone used by San Bernardino shooters.

2016-02-17T13:50:00.002-08:00

Apple is currently in a standoff with the FBI regarding an iPhone that was used by one of the perpetrators of the San Bernardino shootings last year.

The FBI is requesting Apple create a version of iOS, the operating system that runs on iPhones and iPads, that would allow them to unlock the iPhone recovered during the course of the investigation to gain access to the data, photos and files within it.

Tim Cook has been adamant that doing this would undermine the security that Apple has been striving for in their operating system for the last 9 years. The FBI is requesting that Apple endanger the privacy of every iPhone user in the world.

iOS by its very nature and design is a highly secure operating system that makes it virtually impossible to access the information on an iPhone or iPad without the passcode. iOS encrypts the data on the iPhone so that it cannot be recovered by normal means without introducing the passcode.

More so, introducing wrong passcodes will disable the iPhone after several attempts for a period of time. After which you can then attempt to enter a passcode again. Subsequent failed attempts increase the amount of time one needs to wait between attempts.

The FBI is requesting Apple create a version of iOS where this would not happen and they can brute force (try passcodes continuously, without stopping) the passcode entry until they find the correct one.

This event will undoubtedly set a precedent for IT legislature in the future.

Tim Cooks letter to Apple Customers: http://www.apple.com/customer-letter/

iOS May 1970 Date Issue.

2016-02-17T11:01:00.001-08:00

Public Service Announcement

It seems recently, a practical joke or attempt at humor has been circulating in social media where by an unsuspecting user is asked to set the date on their iPhone or iPad or iPod Touch back to May 1970 and in so doing the iPhone will obtain a general look and feel of the iOS 6 and below. A retro look if you will. This unfortunately is not the case, and many users have been left with non functional iPhones.

The iPhone will not respond to touch or any of the customary steps including resetting or restoring the i Device to factory condition.

Why this happens is still a bit of a mystery. January 1st 1970, is the moment in time where the Unix Epoch begins. The Unix Epoch is a mechanism that all computers and devices in the world use to handle time and dates. There is no clear reason yet why setting the iPhone, iPad, or iPod touch to this particular date causes them to stop working.

Apple has now made a statement acknowledging this issue, and has stated that it will release an update in the future that will stop the issue from occurring. However it will not fix iPhones already having the problem since while they are in this unresponsive state, there is nothing that can be done to them, so no way to actually apply any update that Apple may release.

Solutions

For now the only solution seems to put the device in DFU mode and restoring the device to factory condition. This however has been hit and miss. Several people report success while several others report failure. Additional info has come to light with this, and it seems if the Restore appears to be stalled at the apple logo and progress bar screen, that it should be left for one to several hours and it will complete. This allows the internal clock to move to a date past January 1st 1970 that the iPhone can work with and completes the restore.

Apple Support - Put Your Device in Recovery Mode.

You can restore it yourself using Apple's instructions in the link provided below, or take it to an Apple Store and have them do it. They will likely do so for free, but make sure to make an appointment before heading out, as Apple Stores are bound to be a little crowded.

Genius Bar Appointment

Restoring the iPhone of course means it will be completely wiped, so if you do not have a backup to restore from, be prepared to loose your info.

Here is Apple's support document acknowledging the issue, and stating an update is in the works: If you changed the date to May 1970 or earlier and can’t restart your iPhone, iPad, or iPod touch - Apple Support

This blog post will be updated when such an update is made available, so stay tuned.

Apple Pay: How does it work?

2015-12-10T08:54:00.000-08:00

What is Apple Pay?

Apple Pay is Apple's foray into the contact-less transaction environment. It uses a special hardware chip most often referred to as an NFC chip, or Near Field Communication chip to effect the transaction. The main draw of Apple Pay, is that you do not need to give your Bank details, credit card numbers, or any personal info to anyone to make a payment.

Stores that support Apple pay must have an NFC terminal at their checkouts to receive Apple Pay payments.

Setting Up Apple Pay

When you set Apple Pay up, Apple sends, in an encrypted transaction, your Credit Card information to your Bank or Card Issuer and a unique device code it generates from your Device and credit card info for your Bank or Credit card issuer to use. The Bank or Issuer network then creates a device account number and other payment data, encrypts it so only they can de-crypt it later, and sends it back to Apple and then your device. Apple cannot decrypt this package, it merely stores it on your device, but nowhere else.

Apple Pay does not store your Credit Card information on your device either, only a portion of your Number is kept so you can identify your card on screen.

You do not need to give your Credit Card information to anyone after this step. Once your credit card has been set up in Apple Pay and all required information entered into it, it is no longer necessary to give out credit card details or make bank transactions to make purchases through Apple Pay.

Paying with Apple Pay

When you initiate a payment with Apple pay in a store or within an App, Apple Pay will transfer the encrypted package it stored, which does not contain your credit card information, and is encrypted by your Bank or Issuer network, in a transaction with the terminals in stores to confirm payment. Your Credit Card info is never given out; and best of all cannot be read by any NFC terminal or reader because its not there.

You can also use Apple Pay to pay within Mobile Apps that support it. These Apps are only running on your device, and again will only send this encrypted package to the merchant and then to your Bank or Issuer network, they do not transfer your credit card or banking details.

After the package has been sent to the terminal or App, the process moves forward like a normal credit card operation would. The bank or issuer is contacted and a request for payment authorization is made. The issuer or Bank de-crypts the data it receives, matches data with their records to find the card being used and okays or denies the purchase.

Your Card details remain with you and your Bank or Credit card issuer.

Payment transactions at stores and within Apps must be authorized by you when requested using your Touch ID, or passcode before the payment package is sent for confirmation. So unless you o.k the operation with your thumb print or passcode nothing is sent from your device.

Availability of Apple Pay

Apple Pay is currently available in the U.S, U.K, and Australia .
UPDATE: It is also available in Canada, but only with direct American Express Cards. Bank issued Amex based cards are not supported yet.
This will be updated when other countries make this process available.

Another thing to keep in mind, is that there is no Website or Transaction Portal for Apple Pay. All operations happen on your device. That is you cannot go to a Website to use Apple Pay. You need to own a supported device (iPhone 6, 6 Plus, 6s, 6s Plus or iPhones 5, 5s, 5c with an Apple Watch) .

Nobody can request you enter Credit Card details in a website to confirm a payment, and no one can sell you anything through Apple Pay if its not done through your Apple Device.

Stores may request you verify your purchase by signature or other means at time of Purchase.

More information on Apple Pay

You can view stores, and Apps that support Apple Pay, as well as compatible devices on Apple's own Apple Pay page:
https://www.apple.com/apple-pay/

More specifics about Apple Pay security and Privacy of data and personal informaton.
Apple Pay security and privacy overview - Apple Support

Top 5 additions in the recently released iOS 9.2 Update for iPhone, iPad and iPod Touch.

2015-12-08T15:24:00.000-08:00

At the time of writing this, Apple has released the iOS 9.2 Update for all iOS devices that support it. And it comes with a slew of fixes, improvements, and new additions to iOS 9. Here's the Top Five most interesting ones.

New Top Stories section in News
Available to English speaking countries, the News App features the most relevant stories for your neck of the woods. Now in iOS 9.2 you get a section entirely devoted to the Top News items, whatever those may be. 10 to 1, Donald Trump is there in some form or another.
3D Touch for iBooks.

For iBooks users on iPhones 6s and 6s Plus, you can now peek and pop the book's table of contents for a quick preview of the relevant section. As well as your Notes, Bookmarks, and search results. This sounds useful in principle, but lets see how useful it really is in practice to get quick glances at these things.
Apple Music Improvements
Apple Music has received a ton of criticism over its lacking set of features. Specially when it came to playlists. With iOS 9.2 You can now more easily manage your playlists. Apple has added the ability to create a Playlist directly on your iOS device from a single song via the Add Song to Playlist option. Previously you were limited to existing Playlists, and would have to go out to the Playlist section of the music App to create one before adding songs to it. Apple also added the ability to download an entire playlist for offline listening with single tap, instead having to download each song individually.
Apple has also added a new indicator for downloaded songs in My Music and Playlists so you know which ones are on your device and which ones are not.
Apple added a few other less relevant features to the Music App, but by far Apple Music got the most attention this time around.
Mail Drop in Mail
Previously limited to Mac and PC, Mail Drop has now been made available on iOS devices. Basically it lets you upload larger attachments, that would otherwise go over normal E-Mail server attachment limits, to iCloud, and share them with your email recipients instead. This is specially handy when trying to send things like videos taken directly on the iPhone.
Camera USB Adapter support for iPhones
Probably the most requested feature ever, since it was only available for iPad. With iOS 9.2 Apple has now made it possible to connect your camera to your iPhone using the USB camera adapter, and transfer photos onto the iPhone directly.
This is probably the most useful new feature since many people now rely solely on their iPhones and being able to transfer photos to the iPhone from a digital camera has always been a necessity for many.

Useful Links

Lightning to USB Camera Adapter

About Mail Drop

About 3D Touch on iPhone 6s and 6s Plus

Apple Music vs iTunes Match

2015-11-30T09:36:00.001-08:00

Let's get ready to ruuuumble!!!!.

With Apple's new music service now available on all promised platforms, including Andriod Devices, lets take a quick look at what it does and compare it to iTunes Match.

iTunes Match

iTunes Match is a $24.99 per year service that will upload your music library to Apple's servers, and make it available to all your devices directly. It will take a max of 25,000 songs, that's twenty five thousand songs. Its been recently updated to take up to 100,000 songs.

The service will attempt to match any song in your computer's iTunes library to a song in the iTunes Store catalog. It if finds a match that song can then be played on any device you own that is using the same Apple ID. Your matched songs will be replaced with the high quality versions of the songs in the iTunes Store catalog. Any song it cannot match will be uploaded to Apple's servers as is, and will be offered to your devices for streaming and download as they were originally in your library.

The Central storage option in Apple's servers allows instant access to stream and download form any Apple device using the same Apple ID for iCloud, and the iTunes Store. This can come in handy, if you have several devices, and do not want to spend a lot of time syncing your library to each of them.

Matched songs are DRM free. Which means you can download the higher quality versions and burn them to CD, or copy them to another computer / device without any problems.

Apple Music

On the surface the service may seem very much the same as iTunes Match, but there are some key differences to be aware of.

Apple Music costs $9.99 a month for single user. or $14.99 a month for Family Membership. This means any member of a Family Sharing group can have access to it, unlike iTunes Match which is a single user service, and cannot be shared.

Like iTunes Match Apple Music will match any song in your library to a song in the iTunes Store Catalog, and will upload as is whatever it cannot match. It will make all your songs available to all your devices using the same Apple ID for streaming and download in as high quality as it can just like iTunes Match would. Up to here, Apple Music appears to be just a more expensive option to iTunes Match.

But Apple Music does a bit more than that. With the $9.99 monthly fee comes access to the entirety of the iTunes Store music Catalog for streaming and offline play back. That is you can play anything in the store for free in its entirety while you remain subscribed to the service. That is literally access to millions of songs and albums.

You also get specially curated lists of songs tailored to your tastes, as well as access to artists and albums features not available otherwise.

Differences

While iTunes Match lacks access to the entire iTunes Store Catalog, its also noticeably cheaper. $7.91 cheaper to be precise, per month. But as said you don't get access to the iTunes store catalog. This may or may not be important to you. But it needs to pointed out.

The other major difference is iTunes Match offers DRM free versions of your matched tracks. Which means you can use these anywhere you want to. Burn to a CD, copy to a USB drive sync to non Wi-Fi iPods etc.. Apple Music on the other hand will offer DRM protected tracks, which means they will only work with authorized devices, and ones that can support the Apple ID authentication. So no copying to USB device or burning to a CD, and no syncing directly form a computer to anything. All music syncing must be done over the internet to validate the subscription to the service. This Applies to all your tracks: matched and uploaded. They all become DRM protected.

This makes Apple Music simultaneously more restricted, but with much more content to offer than iTunes Match.

Cancellation

So what happens when you cancel either of these?

When you cancel iTunes Match, any downloaded songs, to your devices remain functional and playable on the device they are on. You simply loose the central cloud access on Apple's servers. So anything not on a device would need to be synced from your computer normally.

When your Apple Music subscription expires however, any song whether it was matched from your library, or made available offline from the iTunes Store catalog will stop working. You will not be able to play it, or move it, or do really anything with it. Since Apple Music songs are DRM protected, they require the subscription be active for the DRM to validate and let you play them.

Judges' Ruling

At the end of the day, if you can do without access to the iTunes Music catalog, iTunes Match is the better service in most respects. If you do need or just really really want the access to the iTunes catalog then choose Apple Music, but be aware of the DRM limitations.

Useful Links

Apple's Apple Music Website

Apple's iTunes Match Website

How does Apple's IPhone Upgrade Program Work?

2015-11-19T12:16:00.001-08:00

In their now customary September Keynote, Apple announced that this year (2015), would see a new way to get iPhones. No more being locked for 24 months to a carrier. No more waiting to upgrade to the newest iPhone until your plan is up. Now you take control, by being locked into a 12/24 month payment plan with Apple, oh.. wait..
But I'm kidding of course. Its actually a decent deal. Its very close to what Car Dealerships do with their Leasing options. You get a new vehicle every few years when you turn in yours, or keep paying until you've paid off the car you currently have.
Same deal with Apple's iPhones.

The way it works is simple really, its a low payment plan for an iPhone, that lets you get a brand new model every year, or keep the one you have by making a total of 24 payments.

So how does it work:

You start the plan this year, and you can choose between an iPhone 6s or a 6sPlus. Lets go all out and pick a fully decked, 128GB Rose Gold 6sPlus. According to Apple's website, that phone, will cost you a flat $44.91 a month.
After 12 months of paying $44.91, you get an option. Trade up to the new model, or keep your current one. If you Choose to trade up to the new model, you simply return your current one, and you get a new one. No extra payments, or anything. Just like that. Except, your plan, resets, to month 0, so you start again making payments on whatever new iPhone you got for 12 months, and the cycle repeats again.
If you chose to keep your current model, no trade up, then you can keep making payments for another 12 months on it, and at that point, the iPhone is yours. No more payments need to be made after 24 months.

Now, lets do some math:

A 128GB Rose Gold iPhone 6sPlus would cost you outright (in the U.S.A): $949.00 dollars.

If you go for the Plan, and choose the upgrade at the 12 month mark: You will pay $44.91 * 12 = $538.92. That's a little over 56% of the iPhone's full retail price. At that point you can get a new one.

But say you choose to not upgrade, then you keep paying the $44.91 for another 12 months. In that case the total cost of the iPhone comes to: $1077.84. So about $128.00 more than retail. Not such a good deal then right?.

No, the Upgrade Plan includes Apple Care +. A $129.00 value. Which ends up making the 24 month deal $1 dollar less, then if you buy it outright.

All in all, the 12 month upgrade option is a pretty good one, if you don't mind paying for your iPhone every month for as long as you keep upgrading.

To get out, you need to complete a 24 month cycle without upgrading. Which overall is not too bad

The added benefit, of Apple's payment plan, is that you can change carriers whenever you want.

If you take this plan, instead of your carriers upgrade option, then, you are no longer tied to your carrier. You should be able to cancel your service with them at any time, and port your number to a different carrier.

Frequently Asked Questions

Do I need to turn in my current iPhone to start the Upgrade Program?
No, you can start an upgrade program even if you do not own a cell phone at all. You just sign up for the plan, and you get an iPhone.
Does my Cell Service contract have to be up, or do I have to be eligible for an upgrade with my carrier to start the upgrade program with Apple?
No. The upgrade program is completely independent of you carrier. Whether your still in contract with them or not, you can start the program with Apple.
Do I need to make a down payment to start the Upgrade Plan?
No, not at all. There are no down payments, or signup fees.
Do I need to own an iPhone to start the Upgrade Plan
No. You don't even need to own a cell phone at all to start the Upgrade plan.
Are the iPhone's you get on the upgrade plan unlocked?
Yes. Apple will give you an unlocked iPhone of your choice, when you start a plan, so you can use it with any carrier.

Apple's Upgrade Program Website

http://www.apple.com/shop/iphone/iphone-upgrade-program

What to do, when buying a second hand iPad, iPhone, or iPod Touch that supports iOS 7 or above.

2014-07-26T11:07:00.002-07:00

What to do, when buying a second hand iPad, iPhone, or iPod Touch that supports iOS 7 or above.

With iOS 7, released on September of 2013 Apple added a new security feature to all its touch enabled devices in an attempt to cut down on device theft.

This feature was called Activation Lock.

Before iOS 7 when somebody stole a touch enabled Apple device, all they had to do to make it functional was reset to factory settings either via the Erase all Settings and Data option on the device, or through iTunes on a computer.

This would set the device to an "As New" state allowing the thief to use the device without any issues.

iOS 7 changed all that with Activation lock.

Basically, when a device is registered with iCloud, and Find My iPhone is turned on in iCloud Settings on the device, it becomes locked the Apple ID and Password that was used to register it. It cannot be reset to factory condition without the password, and will be locked if it is attempted to be reset through iTunes on a computer.

With Find my iPhone (iPad or iPod) active, the owner can track the device's location through the iCloud.com website or from another device that has the Find my iPhone App installed.

The owner can then choose to delete all content from the device and lock it. When this happens, a screen requesting the Apple ID and password will appear on the device preventing any access to it until the credentials are provided

Many thieves will attempt to sell off these locked devices to unsuspecting customers through online services such as E-Bay or Craigslist where its impossible to view the device before purchase.

But what can one do to avoid falling victim to these sellers? Here's a list of of things you can do to make sure the device is not locked, and properly cleared, or to at least avoid losing money on an ill fated transaction?

Verifying the device is correctly wiped:

When a iDevice is first turned on when it was first bought, it will start up at the Welcome (Hello) screen. When a device is reset, it will return to this screen. However, if the owner did not properly remove the device form their Apple ID, the device will show the activation lock screen after selecting a language and connecting to Wifi.

When buying in person, start the setup process, select a language, and connect to a wifi network. If the device is properly wiped and removed from the Apple ID of the previous owner, the next screen should be the Restore screen, where you can choose to use an iCloud backup to set up the device from, or continue and set up as new.

If buying sight unseen, its best to have the seller provide contact information, and withhold payment until you are certain the device is not locked.

You can also request the seller provide a picture of the device at the iCloud settings screen in Settings->iCloud, and verify that there is no iCloud account signed in, and that Find My iPhone / iPad is turned off there.

Even if it has not been wiped clean, having no iCloud account signed in there, means the device is not locked to an Apple ID, and should not become activation locked to it once restored.

Apple used to have a service at http://icloud.com/activationlock where you could verify the activation lock status of a device, but has since taken it down, and is no longer available.

If it ever returns, it is a great tool to use when buying second hand as it could easily tell you if its locked or not.

Should the device not be correctly wiped, you can direct the seller to this Apple Article What to do before selling or giving away your iPhone, iPad, or iPod touch, and request they follow its instructions to wipe the device and remove it from their account

This is a basic step, as nobody would want to sell a device that may contain private and sensitive information. So a wipe must be performed.

If the seller is unable or unwilling to do this, then this should raise big red flags, and the device should not be purchased from this seller

If the device appears to be at the Activation Lock screen, then it was most likely locked from iCloud by the original owner.

Again, requesting the seller to remove it form their account through iCloud.com should be the first step before any money is exchanged.

If the seller is unable or unwilling to do this, again, red flags should be raised, and purchase of this device should not be considered

If the device is at the standard Passcode unlock scree you should again request it be properly cleared before purchase.

If the device is running iOS 6 or an earlier version:

Request that the previous owner sign out of all services under Settings, and clear the device by going to Settings->General->Reset->Erase all Content and Settings

When properly wiped, and released from the previous owner's Apple ID, the device will have nothing on it except the Default built in Apple Apps. As tempted as you may be to want to keep some of the sellers Apps or other content, this is never a good idea. All Apps, media, books, etc... bought or downloaded from Apple's stores are forever tied to the Apple ID that was used to buy/download them. As such Apps will always require the Apple ID and password that was used to download them, to update them in the future and media and books will remain tied to the Apple ID used to buy them, and may not be accessible later.

Updating Windows XP to Windows 8 Pro

2013-01-21T08:25:00.000-08:00

Just got done updating my old home PC that was running a very trim Windows XP SP3. The machine worked great. And I was weary of updating because I knew I would not be able to run game like Trackmania on Windows 8 among other things. But having gone through the numerous Previews of Windows 8 and actually liking the evolution, I decided to finally take the plunge and update the XP side once the installation of the Windows 8 Release Preview expired.

So I thought I'd give it a shot from a normal user point of view. I put the 32bit DVD of the Windows 8 Pro Update package and waited. (in retrospect, I should have put the 64 bit version, as this is an AMD64 Semprom. Yes, its a low line Pc, but since I don't play top of the line games on it (that's hat the Xbox is for), it works at home fine.)

Anyway, the preparation stages went smoothly. Even the reboot went down without a hitch, but once the final setup was up, problems started arising.

The first one, it wanted to connect to MS servers to activate, and log me in to my "Microsoft Account". However the installation failed to recognize my wireless card. So it could not do that, I had to skip that part, and setup a local account. Once Windows started and was usable, I noticed, I was missing a few things from the Start screen. Namely, the Desktop tile. No biggie, I'll simply go to search and run Explorer to get at it, see if I can get the tile back later. I move the mouse to the side to get the charm bar, and nothing happens.

O.k I'll reboot, see if that helps things. The Pc rebooted rather quickly, and lo and behold still no Desktop Tile. Fortunately the charm bar did come back. So I was able to get into Desktop mode by running explorer, and into control Panel all was looking good, until I tried clicking on Administrative Tools, I got a message saying the location was unavailable. Fine, I'll have to install my wireless card from the driver CD and do a bit of Googling to figure out what happened. So I go to install the drivers, and they appear to install o.k. However the card would connect and disconnect from my network every few seconds. Which made browsing, quite difficult to say the least.

After wrangling for a couple of hours with the network card, I gave in, drove to BestBuy, and bought a cheap USB Wifi card. This one was detected immediately, and required no drivers, Windows picked it up immediately. However, since all my Applications had not been carried over, I had to open IE and get to a suitable browser download.

So I wandered the forums, looking for solutions to problems I was having, and it all boiled down to either a Refresh, and a Reinstall. I really wasn't looking forward to a complete reinstall, but after the refresh did nothing to alleviate the issues, I gave in, having backed up before updating, I had everything on my external, so I just rebooted the machine with the DVD inside and proceeded to wipe out the partition. Windows again went through the setup process without a hitch, and when it booted into the final setup, the USB wifi card was picked up, and I was able to setup the Microsoft Account o.k. Once at the Start Screen,the Desktop Tile was back and functional, and yes Administrative tools was working again.

Hopefully its not something very common among updates. But if it is, I suggest just biting the bullet, and performing a complete clean reinstall.

Overview of iPad Mini and iPad 4 reveals

2012-10-24T10:21:00.000-07:00

I'm by no means an Apple Fanboy... I like their products, but I can still bash them when required.
Today I want to write a bit about their keynote this Tuesday and specifically their reveal of the new iPads

Their Tuesday reveal of their new iPads left many to question many decisions on their new products not because they are bad, but because they are at all.

iPad 4

Having released the iPad 3 only 6 months ago, it puzzles me why they would release a new one so soon. Usually they have a yearly release of products, iPhones for the most part follow the yearly release for major updates, and a 6 month release for and versions such as the 3Gs and the 4s.

iPads have been pretty good at keeping a yearly release until now. but that's not really the puzzling thing. What is more intriguing is the decision to discontinue the iPad 3 in favor if the iPad 4 but leave the iPad 2.
Looking at the specs, it seems the iPad 4 is really only a very minor improvement over iPad 3. So it makes sense that they would not need two extremely similar products competing with each other. However that leaves the question of why release an iPad 3 at all 6 months ago. They could have simply kept the iPad 2 for those 6 months, and release the iPad 4 as the iPad 3 along side the iPhone 5. Then it would have been a major upgrade.

For those fearing the iPad 3 will no longer receive upgrades, I find that extremely hard to believe. Just because they aren't making the device anymore doesn't mean they'll stop supporting it with upgrades. At least one more major update so it gets 2 major updates total like the iPad 2 had.

iPad Mini

This release is the one I have to question more. The iPad mini is not only not a real good competitor in terms of specs in the 7 inch market niche, but its also the more expensive alternative.
Personally I don't think the 7 inch tablet market is the way to go. Nor do I think a 5 inch iPhone is the way to go either. The intermediate sizes make it too cumbersome for a phone and not large enough for a good tablet experience. If I want to watch movies, look at pictures, read books, I want to do it in a larger screen rather than a smaller screen. The 10 inch screen is a good size for a handheld device without sacrificing detail or size. For this reason the 7 inch tablet market is one I'm not particularly interested in. Nor do I think many people are. Walking around places like Starbucks, Libraries, museums etc... People carry 10 inch tablets with them. Very very few opt for the smaller 7 inch ones. Even then more people are going for the 4.x inch screen phones. Samsung even has a niche all its own with the 5 inch Galaxy Note. How many galaxy notes have you seen around? Again the size makes it cumbersome for a phone, and limits the features a tablet can provide.
With 7 inch tablets as low as 150 bucks, what are you getting in the mini for the extra 200 dollars that warrant it. Yes tons of apps and games are available in the store, but the display is a standard display well below other tablets resolutions, the processing power is also not to par with other tablets in the range.
At the time of writing, the Google Nexus 7 beyond its manufacturing issues, still offers the best bang for the buck. Its even more surprising when Steve Jobs himself outlined 5 reasons why 7 inch tablets where not viable options.

Only time will tell if the Mini really is as successful as they hope it is. Personally 7 inches is not enough for me on a tablet and I don't think the mini will get a version 2.

iTunes Survival Tips Part 2

2012-10-10T10:18:00.004-07:00

Usage of an AppleID

As I said in part 1:

# 3. Keep a single Apple ID.

Yes as annoying as it sounds, the best practice is to keep a single Apple ID. Why because you can never merge the extra accounts, and you'll have content in one you won't in the other...

However this should only apply to your Apple ID and devices. If your girlfriend or boyfriend also have an iDevice (particularly an iPhone) you really need to have separate ID's.

Don't use the same Apple ID in 2 or more iPhones

When setting up an iPhone use the apple ID of the person the phone belongs to. Why? Because otherwise both phones are setup as belonging to one Apple ID. What that means is that Apple's servers then think they are supposed to send all notifications, all messages and all events to both devices. Like if you had a iPhone and an iPad and wanted both to get the iMessage notifications. While it may be interesting to read other people's messages it can get a annoying, cumbersome, and obtrusive. Each individual iPhone should have its own individual Apple ID.

Don't use the same AppleID for iCloud backups of different phones.

You should never share an Apple Id for iCloud backup as that can cause issues with the backed up data. This is specially problematic as the backed up contacts of one iPhone can merge with another, or in worst cases overwrite them. So you get either a mess of contacts, or none of your own. I'm sure I don't have ti explain the problems you get from having merged contact lists, or having yours overwritten by your girlfriend's.

Don't share an Apple ID for iTunes purchases

As much as you'd want to, or think its a good idea, it isn't. While having purchased content across the your own devices is good, having purchased content across devices owned by different people is not. Even if its your girlfriend or wife and you want to share the content avoid it. Why because it invariably comes down to having content you don't want downloading to your device. I for instance don't need to have the complete set of Sex & the city episodes downloading to my iPhone because my wife decided she wants to watch them. Also I don't need it using up space in my iPhone or iPad.

With that said, I can appreciate the need for a shared AppleID when purchasing content and being able to use it across everybody's devices, however the iTunes platform is not set up for it, and while you can use say a House Apple ID where you purchase movies and Tv shows to watch at home through an Apple Tv or even an iPad connected through HDMI to the TV it come back to the original issue. The account is independent, and its purchases cannot be merged with Apple ID's iTunes library.

All in all, iTunes, and Apple's platforms were designed for personal Apple ID's sharing was never intended because they first and foremost wanted to prevent piracy, and content copying. So while you may feel inclined to share an Apple ID, don't. In the long run it will only cause more issues than it will solve.

iTunes survival Tips

2012-09-23T20:54:00.000-07:00

Apple has come a long way since the days of the Macintosh Apple II, but it seems in their effort to keep all store purchases secure and "un-pirateable" they've also made their users lives a living nightmare.

iTunes is probably the most hated piece of software out there that isn't a virus, or malware (Well... technically speaking). It makes seemingly simple tasks incredibly complex. And things like recovering your library after a PC crash become almost impossible.

Its less offensive now, but a few years ago, it would seem iTunes updates would show up every couple of days, but were close to 100MB in size. That's not an update, that's the whole damn software to be downloaded every couple of days. Now it seems to have cut back on the frequent updates a little. And also reduced the size a tiny bit too. But still at an average 70 or 80MB a pop it still kind of annoying.

Still since there is no alternative to manage your iDevices, were stuck with it, so here are some tips to keep iTunes under control or at least make it a little less aggravating.

# 1. Consolidate

Consolidation is one of the few things that can aid in maintaining control of your library. If you have music strewn about all over your hard drive or in different hard drives, it makes it very hard to manage, and recover should something go wrong. Consolidating makes iTunes copy all music, videos and playlists to a single location for it to manage.

Go to File->Library->Organize Library and tick the Consolidate check box to make iTunes put everything inside the iTunes library folder.

# 2. Weed Out

We all like to have all our content at our finger tips, but there comes a time when you need to do some spring cleaning, and remove things you no longer need. Clearly 3 moth old Podcasts you downloaded from a website devoted to onion chopping that you've been to only once may not be relevant any more. Remove them not only to free up space the limited storage on your device, but also to make maintenance of your library a little easier.

I've had to backup iTunes libraries for clients that are in the 100's of GB but most of the space is taken up by old podcasts or video files they haven't watched or heard in years. While keeping your video and music library for posterity is always good, there are somethings that are just not worth the space they take up. Things like podcasts and other time relevant content like news casts etc..., can be erased. With iCloud you can still re-download the content should you need to in the future.

# 3. Keep a single Apple ID.

Yes as annoying as it sounds, the best practice is to keep a single Apple ID. Why because you can never merge the extra accounts, and you'll have content in one you won't in the other. It also makes it hard to keep a functional consolidated library if content is strewn about in several accounts. I'm a victim of this myself, I have 2 accounts. The problem used to be you could not download content from a country specific store while in another country. This seems to have changed, as I can now download content from the American store while abroad. So I keep only my american account. But when I used to travel, I had to use a local account to be able to download things. Sadly there's no way to merge account purchases. So my purchases in the other account have had to remain there. As of this writing there is still no way to merge Apple ID's from different countries which is very very annoying for many, many people. It becomes more irritating when you realize content in certain country stores is really bad, and you still have to resort to an american store to download. I would suggest to keep an american account for pretty much everything. It does not affect your carrier fees, or local country data whatsoever, but does it make it easier to manage content, and get the most up to date content.

# 4. Backup.

This is the most important point. Backup your iDevice regularly to your iTunes library, and backup the iTunes library as well. Backing up your iDevice also downloads your Camera Roll. Which otherwise does not get synchronized in iTunes. So its important if you wish to have your photos saved. Backing up your library is also a must, as it will let you restore to any iDevice should the need arise. Backing up the entirety of the library folder whether on a Mac or PC, will preserve everything stored in your library and synced, as well as your iDevice backups. Which contain other things not synchronized to the Library like the camera roll. Should your computer hard drive die, having a backup of your library handy, and up to date and a current backup of your iDevice should reduce headaches to a minimum. And remember, there's no way to restore your library from your device. Though there are some applications out there that claim to do it, but almost all of them cost, and I don't know if they are any good.

iOS 6 Issue List

2012-09-21T18:28:00.000-07:00

I'm starting a list of issues I'm having with Apple's latest iOS update.

This is an iPad 2.

iOS 6 Official download.

I want to point out there's several things I like about the update, and this list will not include the lack of certain features in the release for iPad 2 that exist for the iPhone5 and iPad 3 such as Siri.
This is going to be a list of issues I'm having, with the release as is, and the included features.

I'll update the post with more issues as I encounter, and also solutions to the problems also as i find them.

1. Apple Maps. O.k. I'll cheat on this one but not really because it really isn;t in any release. Lack of Street View:.

As an avid user of Google Maps before, the lack of street view in the new Apple Maps app is quite jarring and sorely missed. This feature really needs to exist very soon. Or hopefully Google will release a new version of Google Maps to the App Store for download. As cool as Fly-through is for the cities that have it, its a gimmick, and not very useful when looking for an address.

2. iTunes: It may be just me, but the iTunes store is pathetically slow now, and keeps saying it can't connect. Loading image tiles in any section takes ages, and search is almost unusable.

Apparently there is a strange fix for this that gets rid of the "Cannot connect to iTunes store" popup. But not the slowness.
Go to Settings > General -> Date & Time, and set the date to one year ahead. You'll get a couple of notices about backups, and the same dreaded popup message. When that happens cancel it, and set the clock back the the correct date. The annoying popup should go away once you log on to the store successfully the next time.
Search is still very slow though, and the image loading inside iTunes still has issues. Before you comment about my internet connection,I actually downloaded a Movie rental from iTunes and it finished in about 25 minutes. Though it did take a while to get started, and even failed the first time. Though once it started it downloaded really fast, and with no other issues.

3. Internet connectivity issues. Seems the iPad is having some issues accessing the internet. Now my PC has no issues, and connects fine to my router, and the iPad had no issues before the upgrade. So something in iOS 6 is not liking my router or takes a while to negotiate the connection. It happens in quite a few apps. Most notably... Facebook.

Well that's it for now. I'll update as i keep using it, and having issues with it of course.

Windows 8 Metro Diary: Day 3

2011-09-30T09:55:00.000-07:00

The following few posts will chronicle my experience with the newly released Microsoft Windows 8 Developer's Preview, made available as a free download from Microsoft themselves.

Monday September 26th - Friday September 30th 2011

Day 3 is a little different, in fact its a week, since I had less time to play around with it, and less things to talk about, I'll bundle the week together.

After several days of digging around, I found a way to get the developer tools for Metro style apps for the other downloads, So I have in fact started to develop one application. However since Microsoft considers this a breach of EULA I cannot disclose the technique here. Suffice it to say, its simple and straight forward. Which makes it even the more puzzling that Microsoft chose not to include this in all the downloads.

However that does not end the issues. After a few days of development Visual Studio 11 crashed on me and has never come back up. It now crashes every time I try to load it. However there is another version that gets installed which is labeled the Experimental Instance which continues to work correctly. So I'm using that.

I've also had an issue with my DVD-Drive, an LG DVD-RAM drive. Its picked up flawlessly by both my BIOS, and Windows XP in the same machine, but Windows 8 just refuses to see it. I guess I could chalk it up to a glitch in this pre-release version and expect it to be fixed b y the time the actual full release hits shelves. Though its still a bit of a mystery as to why it won't see it. More so considering that it was that drive that was used to install Windows 8 from the burnt DVD.

In any case moving on to my Metro style application, I have to say development is very natural if you are familiar with the languages involved. I chose the HTML 5 and Javascript approach, but there is of course the C++, C# or even Visual Basic alternatives if required. All 4 boil down to a full screen website style interface with the engine behind the app being any of the mentioned languages. Its an interesting concept, that actually works surprisingly well for consumer applications such as image management, social site interactions, games, and other none productive apps. However I don't see office based apps as Word, Excel, financial applications, etc.. making the leap to Metro Style.

I do expect however that we'll see Metro based alternatives, with probably less functionality, but nicer interfaces. A Metro style text editor is inevitable as will be a basic Image editor. Standard every day tools like a basic email client and instant messenger are also, no doubt, in the horizon.

For users with more involved requirements the now called Desktop mode is basically an update to the Desktop of any Windows version prior to this, and in which users will be able to run non metro style apps as they would in older Windows versions. This is where most corporate environments, and more technically oriented users will spend most of their Windows using time.

In the end Metro is clearly aimed at final, home or casual users; by offering a nice interface to their most often used apps, without needing to get into the actual system OS. It turns a PC into a tablet which is what most casual users would want for their regular tasks.

As far as my metro App goes, I developed a pretty basic unit converter. From Metric to English units, and so forth. Its not done yet, but here's a screen shot to tide you over until the next post.

Windows 8 Metro Diary: Day Two

2011-09-27T09:41:00.000-07:00

The following few posts will chronicle my experience with the newly released Microsoft Windows 8 Developer's Preview, made available as a free download from Microsoft themselves.

Sunday September 25th 2011

Sunday Morning rolls along and I'm thinking great time to see what this puppy can do. I was all set to start delving into the world of Metro Apps when I realized the 32bit version of the Windows Preview I downloaded does not contain the adequate development packages. So off to Microsoft's site to download the Visual Studio 11 Preview package. Well The download is a Smart Installer, though there is a 3 part download you can opt for as well. The complete setup is close to 2GB. So again Another hour or so waiting for it to download.

Once completed it begins to install, it took about another 30 to 40 minutes to finish configuring everything. It was finally done, I could start checking this out, and start getting up to speed in how the Metro Apps work. So Move out to the Start Screen with all the Metro tiles and *whoah!!* 20 Tiles where added to the screen. I realized then and there that the screen simply takes anything and everything from our old trusty Start Menu location and plops it as 150 by 150 pixel tiles.

Anyway, so I run Visual Studio, and all is o.k. It looks interesting. Lets try creating a new project, something simple, a Hello World tile as is customary to do. So I add a single div to the project, (this is a HTML 5 and Javascript Metro App project), configure a few things and try to run and execute to see what it looks like. Well a couple seconds go by, and bam, 2 errors crop up. makepri.exe cannot be found, and the Modern SDK is not there. Well after a lot of digging it turns up, that Microsoft in all its unparalleled wisdom decided to issue only one of the Developer Preview downloads with all the files required to develop Metro Style apps.

The 64bit 4.8GB full download.

Now, I know what you are thinking, how is that a problem, just download that. Well I can't, and many other people can't either. Why You ask? Well I don't have a 64bt computer, so I can't run that. Many people don't have dual layer DVD's to burn, or their drives can't actually burn them. So we choose the alternative: Download the 32bit Windows OS preview, and then install the Visual Studio Preview separately.

However this method leaves you without the essential Metro App development files which is the entire purpose of these previews. I don't understand the logic behind only providing the tools in one of the packages? What's to gain here? I really don't understand. Its like having rollercoaster with a sign that says come all and try it, but once you are inside you can only get the full ride if you have a $20,000 Rolex watch and have been lugging around a very large duffle bag. Everybody else gets just the shortened route.

So that's It for day 2, hopefully day 3 will bring some much needed solutions..

Any comments or questions, feel free to post below.

Windows 8 Metro Diary: Day One

2011-09-25T10:45:00.000-07:00

The following few posts will recap my experience with the newly released Microsoft Windows 8 Developer's Preview, made available as a free download from Microsoft themselves.

Saturday September 24th 2011

We start off with a hefty 2.8 GB download, that's 2.8 Gigabytes of data, as in your standard USB pen drive capacity these days. It took a little less than 2 hours to complete.
After that we need to build the customary Installation media from the download. A simple matter as its an ISO image, a CD/DVD image file which contains all the information needed to burn an installation disc using any number of tools available. I used ISOburner a free safe tool for just such tasks. Once the DVD is done its on to installation. I decided to do this as an actual install rather than a virtual one just So I could get the full experience. So I went into my Hard drive drawer and picked an empty one I knew was operational. 80GB of space should suffice I thought, I don't think I'll be installing many things onto this, and I it will be basically for testing purposes.
So the Install goes similarly to Windows 7 installation, it lets you pick your destination drive, and ipartition it as you see fit. The installation automatically creates a 300MB system reserved partition regardless of your partitioning choices. It deducts the space from your main OS partition. Once complete it proceeds to copy and install files. It took quite a while to install, about 30 minutes in my not so powerful test PC.

When all is said and done, you are treated to the new Metro Start Screen. Instead of your regular start menu, you get a full screen of what Microsoft now calls tiles. Squares or rectangles that serve as shortcuts for applications and other functions. Several pre-installed apps and games grace the screen, most notably Socialite the Facebook app, and of course IE10 Metro version. (more on this later)
My first task of course was setting up the Internet connection, as Windows did not automatically detect/install my wireless card. Of course you can't really tell what is going on as the interface is aimed at final users, so off the bat we need to dig into the new layout to find the familiar Device Manager. (I wonder If I can add a Device Manager Tile for easy access). Installation of the wireless card was as painless as it has been in previous versions of Windows.
With that done we get a look at the new Wireless network list; a green sidebar, as Microsoft calls it. It offers a very nice, large and crisp font for the network names and the standard bar display for the signal strength. A nice face-lift to what we had been seeing since Vista.

The next test drive was of course IE10. Now here's were things get interesting, Microsoft has divided the applications into 2 categories: Desktop applications and Metro Style applications. Desktop Applications are your run of the mill apps you've been using in other versions of Windows, they open in standard windows, and can be maximized, dragged around, closed etc... The Metro Style App is the new kind of app that takes advantage of the new Metro Engine and runs full screen, cannot be dragged or moved, or even closed in the regular sense of the word. Its basically a full screen dynamic Web application that runs outside a browser and covers the screen. It can be swiped out of the way, or hidden. When hidden or swiped out of the way the app suspends rather than outright closing.
For me this is a slight drawback, as It means you quickly have many many things running in the background you may not want or need, and with no real dedicated closing mechanism, your are left with only the TaskManager route of closing these applications.
Technically speaking Windows memory manager should close apps you haven't used when running low on memory, however I've never been keen on letting Windows handle the memory usage by itself, I like to be able to close things when I'm done.
Going back to IE10, it does come in 2 flavors Desktop, and Metro. In Desktop mode is very similar to other versions of IE, (8 & 9) so nothing much to comment on there. While in Metro Mode its as explained a full screen app, with the address bar now positioned in a smokey dark gray translucent hideaway bar at the bottom of the screen. No other visible controls are present. When navigating the website the bar disappears for the full screen experience. To bring it back you must right click the screen. This brings up the address/tool bar and the tab/page bar at the top. The Address/tool bar offers your regular forward, back and refresh buttons, along with a search button and a Pin to start button. So you can add your favorite sites to the Metro Start Screen.
The Tab/Page bar at the top shows thumbnails of your currently opened tabs, as well as the option to close them or open new ones. Clicking back in the website makes the bars go away and puts you back into browsing mode.
At the end of day I can see the interface is very much designed for touch based devices; however the mouse and keyboard experience is pleasant enough to be quite usable and satisfying. However I can see corporate environments turning it off, in favor the desktop mode.
Day 2 will see me install a few more applications, and wrangle with a few more pieces of hardware So stay tuned for Day 2 of the Windows 8 Metro Diary. .
Comment, subscribe, ask questions...

Ajax 101

2011-05-20T08:53:00.000-07:00

Asycnronous Javascript And XML, the mysterious entity known as AJAX.

What is it? What does it do? In simple terms its a method of connecting a website to a server side script without needing to submit a form, or reload a page.

For years the usual way of getting data from the server was to submit a form with values to be processed by the server which would in turn return the results of its process. This usually slowed down websites considerably, and there was no real time interaction between the user and the website.

Ajax solves this by opening a direct connection to the server, and requesting the data processing without needing to submit a form.

Ajax is composed of 3 main sections:

The Javascript that executes the Ajax call
The Ajax that calls the server side script
The Server side Script that takes the parameters and produces the data to be returned to the website.

The main component of AJAX is the XMLHttpRequest object. This thing does it all. It opens the connection, waits for the results, and then makes them available to JS for any further parsing or usage.

But before we can use that we need our Server Side process. This can be pretty much any script that returns data, and it can be done in pretty much any language the server can execute. PHP, ASP, Coldfusion etc...

For our example we'll be using PHP.

The Server Side Script

The Server Side Script has one important task to accomplish, and that is to produce the results we need. The script should be designed like any server side script, except we don't need full html tags as we are going to deliver this to our Javascript layer for usage in an already established page.

So basically all we want is for our script to output our data. We could include a table structure or some other markup if we require, but only if we don't plan for your JS side to do anything to data, otherwise outputting in usable formats such as comma separated strings, or a JSON object is enough.

For our example script we'll just have a process that takes a value from the POST array and echoes it out in a string.

PHP Script

<?PHP

if(isset($_POST['id'])){

echo "The ID Passed is: $_POST[id]";

}

?>

Javascript and Ajax

No we need a way of calling our server side script, and getting back the results. to do this we will require the XMLHttpRequest object from the JS window object.

We start by defining our request object:

Request Object

var requestObj=new XMLHttpRequest();

We can now use our new object to initiate the call to our server side script. However before we can do that we'll need to make a decision. do we want our call to be synchronous or asynchronous. A synchronous call means the Js stops and waits for the server to complete the processing before continuing on, this effectively makes the website hang and be unresponsive until the call is finished. Ultimately we would only use this if don;t have lots of processing to do and the response would be returned rather quickly.

Otherwise we'll want to use the asynchronous method which as it implies lets the website and all JS functions continue to run while the server process is being executed. This allows the user to keep doing things while the request is under way.

We are going to go for the asynchronous method, so we need to
setup a function to handle the data once it returns. For this we use the onreadystatechange event of our ajax object. onreadystatechange triggers every time the the readystate property changes. The readystate property simply holds the status of our request. We want it to be 4 so the Request is complete. The other values are not relevant in the context of a webpage as you can't actually do anything about them.

We also have to check the status property. The value we want is 200, which stands for "O.K." that means the call to our server side script executed correctly and data was returned. Status has many values that you can check; most are the standard HTTP status codes like the classic 500 Internal Server Error, 404 Not found error etc...

We check for both those values, and if they are 4 and 200 we can proceed to use the responseText value to get whatever our script produced as output.

Request Object and Properties

requestObj.onreadystatechange=function()
{
if (requestObj.readyState==4 && xmlhttp.status==200)
{
var results=requestObj.responseText;
document.getElementByID('myDiv').innerHTML=results;
}
}

We can then use our results to populate anything we need using regular JS calls. In the example above I simply placed everything into a div.

The next part of our Ajax interaction is to call our actual script. We'll use the open() method to define our script address, the method we want to use, and the type of call (synch vs asynch) amongst other things.

The Open method

xmlhttp.open("POST","script.php",true);

The Methods are the same ones used in a From, GET or POST. POST is the better alternative if you plan on sending a lot of data to be processed.

The address of our script is the second value we need to set. the request object is limited to reading scripts form the same domain it originates so you can;t go out and read pages from other websites to mash up into your own site.

We then need to set up our headers. Since we are basically recreating the function of a form, we set it up as such.

Headers

requestObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");

And finally we need to send our parameters to our server side script.

Send Paramters

xmlhttp.send("id=" + value + "&action=list");

The parameters will appear in our POST array inside our server side script. In the case of PHP the $_POST variable.

You can set a string, or you can add values from variables or both like above by using concatenation. "value" is a variable that contains the id we wish to pass. We separate each pair with an ampersand &

With that we are done, we can setup our ajax call to be executed when a button is pressed.

Button Call

Enter ID: <input type="text" id="idbox">

<input type="button" onclick="runAjax();">

With that done, inputing an ID and pressing the bun will run our Ajax function and in turn execute our PHP script without needing to reload the page.

In our next installment we'll be looking at a slightly more complex example, by getting data from a database on the fly.

Working Example

Download the example:

Questions? Comments? Use the comment form.

Common Validation Errors

2011-05-18T13:30:00.000-07:00

In a previous post i talked about the importance of validation, but I never delved into what types of errors you would commonly encounter. Today we are going to take a look at 3 common errors you encounter when validating.

There is no attribute "xxxx"

Html elements or tags have attributes one can assign to them. things like a name, and ID, a class but sometimes we may try to use an attribute that an element doesn't have. Or an attribute it may have in one particular doctype but not in another.

For instance lets say we are building a form to get user input:

From Code

<form name="MyForm" action="mypage.php" method="POST">

<p>User:<input type="text" name="user"></p>

<p>Password:<input type="password" name="user"></p>

...

</form>

If I were using an XHTML strict doctype in the website that contained this, the error would be something like:

Line 7, Column 12: there is no attribute "name"
<form name="MyForm" action="mypage.php" method="POST">
You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element.

In <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> only input elements can have a name. Divs,paragraphs, links etc.. cannot have a name attribute.

Most would think a name is vital to be able to access form elements if you are using JS to validate the form. For XHTML Strict, you only need an ID for the element you wish to access through Javascript.

End tag for "xxxx" omitted, but OMITTAG NO was specified

This one of the more common mistakes simply because its the easiest to over look.

It happens on certain tags such as image, break and any other tag that doesn't require a closing tag to accompany it unlike other tags like divs, links, spans etc...

Closing Tags

<div></div>

<a></a>

<span></span>

----

Self Closing

Self closing tags like above require an extra special character to properly close them. the forward slash. In XHTML strict these tags need to be terminated as .../> to be properly closed, otherwise they generate errors. Since Transitional doctypes don't require this, its easy to forget to add them at the end.

document type does not allow element "xxx" here; missing one of a, b, c,d,e,...

This error is more of a nitpicky error, Basically what is says is that whatever xxx is, it cannot be placed wherever it is you have it because it requires something else to contain it. The most common example of this are label tags. Most would assume you can simply add them in front of an input to add a text label to it. XHTML Strict doctypes will barf at it as they require the label to be inside a block level element such as a div or a paragraph.

Wrong

<form ...>

<label>My Label</label><input type="text">

</form>

Right

<form ...>

<p><label>My Label</label><input type="text"></p>

</form>

There are many more errors, some harder to understand than others, however its important to read the provided reasons for the error, as more often than not they contain vital clues to what may be wrong with that particular line.

Floating 102

2011-04-26T13:08:00.000-07:00

Sop what interesting things can we do with float?

Lets look at a few examples:

Images in Text

When you have a section with text, and you want to have an image in it, you may need to have the text wrap around it so as to not break up the text. By default images will simply break up the text if placed inside, or just sit on top of it if placed before it.

If we want to have the text wrap around the image we need to float it to one side.

CSS

img{
float:left;
}

Here it is in action:

What happens when we have several images to float.

If the are side by side in the html, they'll continue to float left like below:

If would like the to simply drop below eahc other and have the text wrap around them where they end, we simply need to add a clear:float property to out image CSS.

CSS

img{
float:left;
clear:both;
}

It will look like this:

So floats give us nice layout options with images, but what else can it do for us?

Columns

Usually floating is used to create columns in a layout, as you can place divs side by side and fill them with content. Lets say we want a 3 column layout like a newspaper.
Unlike tables, there is no way yet to make floated divs be as high as each other, they'll be as high as the need to be to accommodate their content. As we've seen in previous entries if there's anything floated inside them extra steps need to be taken to make the div correctly wrap around its contents, however in all cases once its wrapped around, it will only be as high as the content requires.

To create the column layout we need to fake the height of the divs, to the observer it will look like they extend down, but in reality the stop where their content ends.

For our 3 column layout here's our basic HTML.

HTML

<div id="wrapper">

<div id="column1">

<h4>Column1</h4>

<p>Content</p>

</div>

<div id="column2">

<h4>Column2</h4>

<p>Content</p>

</div>

<div id="column3">

<h4>Column3</h4>

<p>Content</p>

</div>

</div>

Here's our CSS:

CSS

#wrapper{
width:402px;
background-color:#686868;
color:#DEDEDE;
overflow:hidden;
}

p{
margin:4px;
}

h4{
text-align:center;
}

#column1{
float:left;
width:120px;
}

#column2{
float:left;
background-color:#dedefe;
width:160px;
color:#686868;
}

#column3{
float:left;
width:120px;
}

See it in action:

As you can see the columns appear to match heights, however, if we add a border to the columns on the outside (column 1 and 3) you'll notice they end where their content ends, the rest is an optical illusion caused by the wrapper's background which is gray.

This works for 2 or 3 columns in much the same way, if you need to have more columns then it gets much more complex. We'll talk about multi column layouts in a future article. For now know you can do this for up to 3 columns.

Floating

2011-04-17T10:09:00.000-07:00

The ever present, and most often misused property in CSS after of course position.

Floating takes an element, and pushes it to one side of its container or parent element. It takes the element out of the document flow, so it no longer affects its parent's dimensions directly.

What this means is the floated element while still under its parent's general jurisdiction, no longer has any effect on it. If the parent has no height defined then the it will simply collapse, and the floated element will just float above it.

example:

HTML

<div style="width:300px; border: 2px solid red; background-color:#dedede;">

<div style="float:left; background-color:#464688; width:160px; height:200px; color:#dedede;">This Div is floated left</div>

</div>

See that red line? That's the parent div that collapsed when I floated the inner div.
As said before, floated elements do not contribute to their parent's dimensions.

To resolve this you can do 1 of two things that will be cross browser compliant.

Add an overflow property to the style of the parent div, or add an extra clearing element to clear the float from the inner div.

Adding overflow:

HTML

<div style=" overflow:hidden; width:300px; border: 2px solid red; background-color:#dedede;">

<div style="float:left; background-color:#464688; width:160px; height:200px; color:#dedede;">This Div is floated left</div>

</div>

Any type of overflow will accomplish the same result, however :hidden is better if you don't want to have disabled scrollbars, or just a tiny amount of useless scrolling in some browsers.

Adding a Clearing Element

HTML

Adding an empty element in this case a paragraph element with a style consisting only of clear:both will clear, or reset the floating, and make the container wrap around the floated elements. It looks the same as the overflow method, but has a small caveat. It may cause an extra space to be present, if you have margin or padding applied to the element that is clearing the float.

This is all fine and dandy when there's only one floated element, what happens when you have 2 or 3 or more floated elements. Here's where CSS gets interesting.

Think of a cardboard box for a moment, and imagine you want to place place X amount of objects side by side on one side of the box. You can keep placing them as long as you have room inside the box. Once you exceed the boxes width, you have to move the object "under" the other objects and start a new row.

The same happens in a div with floated elements. When the total width of the objects inside exceeds the the parent's width they drop down. The direction they drop is based on the direction they are floated. If they are floated left, they drop down and move all the way to the left, if they are floated right they'll move to the right.

HTML

<div style="width:300px; border: 2px solid red; background-color:#dedede;">

<div style="float:left; background-color:red; width:70px; height:200px; color:#dedede;">This Div is floated left</div>

<div style="float:left; background-color:green; width:90px; height:200px; color:#dedede;">This Div is floated left</div>

<div style="float:left; background-color:blue; width:60px; height:200px; color:#dedede;">This Div is floated left</div>

<div style="float:left; background-color:yellow; width:120px; height:200px; color:#dedede;">This Div is floated left</div>

<p style="clear:both;"></p>

</div>

<hr>

<div style="width:300px; border: 2px solid red; background-color:#dedede;">

<div style="float:right; background-color:red; width:70px; height:200px; color:#dedede;">This Div is floated left</div>

<div style="float:right; background-color:green; width:90px; height:200px; color:#dedede;">This Div is floated left</div>

<div style="float:right; background-color:blue; width:60px; height:200px; color:#dedede;">This Div is floated left</div>

<div style="float:right; background-color:yellow; width:120px; height:200px; color:#dedede;">This Div is floated left</div>

<p style="clear:both;"></p>

</div>

The width of the parent doesn't need to be explicitly set, it can be inherited from the parent's parent. Or even as far as the browser window dimensions.

What happens when the dimensions are based on the browser window, is the floated elements will drop down or move back up as the window is resized.

An important thing to keep in mind when working with floats is that an element's dimensions aren't only its width and height. Border, padding and margins also contribute to its dimensions.

If you have a parent element with a width of 600px but it has 3 floated elements inside with a width of 200px each then they should float on the same line right?

As long as they have 0 border, margin and padding they will sit side by side. When you start adding padding and border things change a bit.

If you have a container that is 600px wide, and 3 floated elements inside each 200px but each has 2px padding and maybe 2px of border, plus say 4px of margin, then one of them will drop down.

100px width + 2px (padding left), + 2px (padding right) + 2px (border left) + 2px (border right) + 4px (margin left) + 4px (margin right) = 116px total * 3 elements is then 648px in a 600px wide element.

Its all in the math.

Next time will look at how to achieve some more interesting layouts using floated elements.

Javascript 101: The Basics

2010-08-30T10:56:00.000-07:00

Today we'll start our Journey down the wondrous world of client side scripting.
Javascript is an object oriented interpreted language used to give websites a bit more dynamism in the form of user interactions and interface usefulness that gives the website more ease of use.

However Javascript can and frequently is overused, or misused. We'll look at how a little further into this post.

First of all what does Javascript being object oriented and interpreted mean to the web site developer.

Its interpreted, which means you don't need to compile it, as most browsers automatically understand it and interpret it on the fly.

Its also Object Oriented which means its designed to work off of little black boxes called objects that have properties and methods. That is they have traits to them and can do things.

Everything in JS is an object From the browser window, to the HTML button tag they are all objects which have properties that define them like height, width and a name, and methods; things they can do, like the click() method of a button which clicks the button and executes any associated actions.

For the Browser to understand that Javascript is present in a page it can be in 1 of 3 locations.

Between script tags
In an event of an element in the page such as onClick.
Or preceded by the javascript protocol in a link reference or address section < a href="javascript:someFunction();">

When writing Js code, you will be using objects to access and manipulate things on your page, the principal object you will be dealing with the most is the document object.

This object contains most of the other elements and functions you may want or need to access. From page elements to action events.

Its most useful functions are the getElementBy functions. These functions allow you to find an element in a web page and be able top manipulate its properties and methods.

These are getElementById, getElementsbyName , and getElementsByTagName

getElementById allows you to find any element by its ID. It returns a single element you can use, and if erroneously there is more than one element with the same ID it will only return the first element it finds.

getElementsByName returns an array of all elements that have a matching name.

getElementsByTagName returns an array of all the element of a specific type. Say all Divs all inputs, all images etc..

For instance:

var myElement=document.getElementById('theID');
This returns a reference or pointer if you will to the object or element with an id of 'theID'

To exemplify lets say you have a textbox in your page you want to manipulate when a button is pressed:


<input type=text id="myTextBox" value="Sample">

<input type=button name="manipulate" value="Manipulate Text Box">

First we need to determine when the button is pressed for that we use one of the buttons events. Events are actions that occur to the object. An action such as when the button itself is clicked would trigger the onClick event of the object. So we want to have something happen at that time.

Lets say we want to alter the contents of the text box when the button is clicked. so we use the onClick event of the button to have it execute our JS function to change the value of the text box:


<input type=button name="manipulate" id="MyTxtBox" value="Manipulate Text Box"
onClick="changeTxtBox();">

So know we've set our button to execute a function when its pressed, but what would our function look like and where should it go:

Usually our Javascript code should reside in the script section of our page, which goes in between the <head></head> tags.


<html>
<head>
<script type="text/javascript">

function changeTxtBox(){
...
}
</script>
</head>

Notice how the name of your function matches exactly what we placed in the onClick event of our button. Javascript is case sensitive which means uppercase letters are treated differently to lower case letters. so FunctionName would be different to functionname.

So now that we have our function we need to access our textbox and modify its contents. We'll want to access our element using the getElementById method of the document object and passing the ID we gave to our text box "MyTxtBox".


var OurTextBox=document.getElementById('MyTxtBox');

So we now have a reference to our text box in OurTextBox variable. From here we can manipulate the text box as require. Since we want to change the contents of th textbox which currently says "Example" we'll use its value property:


OurTextBox.value="This is the replaced value";

So at the end our function look like:


function changeTxtBox(){
var OurTextBox=document.getElementById('MyTxtBox');
OurTextBox.value="This is the replaced value";
}

And that's it. Our Button will now alter the contents every time it is clicked.

Try it out here, write something into the textbox and press the button.

By the same toke we can access many other properties of the object such as width, height, name etc...

Javascript 102: Reinventing the Wheel

There are many things that can be done with JS, but as I've said before just because you can do something doesn't mean you should.

JS is supposed help you provide a more pleasant experience to the user, but not at the cost of bugs, and strange issues because your code is so complex you have a hard time maintaining it.

If there's already an HTML element for what you want to do its always a good idea to use it rather that to try to reinvent the wheel.

The most common "Wheel Reinvention" I've encountered is of course the lowly link.
Using a button, or some other html element to simulate a link by using JS.

A few examples follow. A Div, a button, an img, and last one is an actual link.
Notice how all of them look pretty much the same, even the picture-less image. There is no point in using JS to make those things act like a link when there's already a link element.

This is a simple example which only required a single line of JS, but you may encounter other times when you want to do something when there's already something there that does it.

Javascript 103: Error Checking

When coding in Javascript its important to check for errors, as you'll find that for the most part a website will lad without complaining about Javascript issues, but your actions may not function properly.

But how does one check for error when none are shown? Simple you request them. Most Browsers offer some type of debugger to let you know that something went wrong with your client side code.

Internet Explorer shows its very conspicuous Gold shield on the bottom left corner of its window. Double clicking there will bring up the debugger window when there are errors.

Firefox has its Error Console which can be accessed from the Tools menu

Safari has an Error Console under its Develop menu which needs to be activated from its Advanced Tab in the Preferences Dialog.

From there you can see any and all errors you may have listed, and attempt to correct them.

DSL Speed and Downloads

2010-08-16T12:01:00.000-07:00

This is slightly tangential to the Web development side of things but its interesting to note none the less since it affects how fast the website will have downloaded to the client machine, and be ready for our users to ... well.. use.

I was going to download a Mandriva Linux ISO image to install, and I noticed by download speed was only around 30KBps (Kilobytes per second) which considering my Internet connection is clocked at 4Mb (4 Megabits) by my ISP was rather strange. I figured out I was downloading from a far away mirror server, once I changed to a closer one, the download speed multiplied to around 350KBps. So I went from a download that was going to take 16 hours, to one that took only 30 minutes to complete.

But how can you tell your speed is not right, well that's what we will be talking about today.

When the internet first became publicly accessible, we had modems with blazing speeds of 9600 Kb/s, then 14400 Kb/s until they reached the modem cap of 56Kbps. Websites were pretty much text based up until the latter days of 36K modems when we started to get more and heavier graphics, flash animations made their debut, and videos and audios starting to trickle into the web consciousness.

But alas, the modems were sadly outclassed because they just weren't fast enough to keep up with the demands of the content. At this point Web developers had to keep a careful eye on how big the site would end up being, how many images were going to have to be downloaded, and how big these files were because the speed of the modems was limited, and you wouldn't want to have your users waiting for the page to load.

Today speeds have multiplied at least 10 times what they were then, but they still cause the same amount of confusion.

ISP's will tell you you have xMb (Megabits) of blazing speed but how does that actually translate into how fast your downloads will be, or how quickly your Youtube videos will start playing. In practice downloads are measured in bytes, while ISP's will use bits to promote their blazing bandwidths.

Lets take a regular 56k modem. That's 56000 bits per second of data transfer.
Since 1 byte equals 8 bits that modem was transferring at a "blazing" speed of 7000 bytes per second or about 7 kilobytes per second. For a reference, a regular text file is about 1 or 2KB. Low res images range in 30 to 50 KB range while mid range images have file sizes in the hundreds of kilobytes, and hi res images move into the thousands of kilobytes or what we know as Megabytes. So a website, with pictures, audio and text quickly starts to add up the download time. A single 200KB image which by today's standards is pretty small, would take about 30 seconds to download through our 56K modem. So for half a minute you'd sit there waiting for the picture to come up. Granted back then 200KB files were considered somewhat large so most WB developers had smaller images sacrificing quality, but imagine a website with more pictures, and code etc... you'd be waiting for a while before you had a fully downloaded website.

Fast forward a few yeas and we get MegaBit speed plans. These DSL plans basically tell you your plan will have a download speed of up to the specified number. That is X will be the maximum speed yo can expect from the connection. However, due to the way DSL works, the speed can't be guaranteed so you'll have a variance of speed. Still there should be an operational margin where you can feel you are getting what you are paying for.

Say your DSL is offering you a 4Mb Plan at $19.99. That's 4,000,000 (Four million)
bits per second maximum data transfer or 488 KiloBytes per second. You should be expecting a bit less than that, somewhere between 250 to 400 KBps; depending on where you are downloading from, is acceptable. Anything less and you can argue you are in the next lowest price package at 2Mb. It may vary from time to time, but as long as it stays more consistently in that range your o.k.

Online DSL speed tests calculate this by measuring how long it takes for you to download a specifically sized file.

If you want to try out your speed, here are a few sites that offer speed tests.

DslReports

SpeedTest

Speakeasy

The :hover Pseudo class

2010-06-14T10:52:00.000-07:00

Lets get into something a bit more interesting now. You build your website, and you find you need some way to say hide parts of your navigation, you need to hide info until requested, heck you may even just want to keep say a small picture of an item hidden until your mouseover a little camera icon.

This can be accomplished with CSS alone.

We will need to use the :hover CSS pseudo class. A pseudo class is a special type of CSS definition, if you will, that allows you to give an object certain effects when the mouse interacts with it in some way. For instance have an area show up when the mouse is hovered over an element.

To get the effect we want, we'll apply the hover pseudo class to our div or section that we wish to hide or show when the mouse hovers over it.

Lets look at a basic example:

CSS

#basic{
border:1px solid #DDDDDD;
background-color:#CADBED;
width:300px;
height:23px;
overflow:hidden;
}

#basic:hover{
height:auto;
}

Html

<div id='basic'>
Hover Here <br>
This content will be seen when hovering over the
titlebar. you could not see it before.
This content will be seen when hovering over the
titlebar. you could not see it before.
This content will be seen when hovering over the
titlebar. you could not see it before.
</div>

Hover Here

This content will be seen when hovering over the
titlebar. you could not see it before.
This content will be seen when hovering over the
titlebar. you could not see it before.
This content will be seen when hovering over the
titlebar. you could not see it before.

Move your mouse over the "Hover Here" text to see it in action. This is a very basic collapsible panel. It uses the hover Pseudo Class and changes only the height definition of the div from the set 30px; to auto so it automatically grows to fit its content.

Of course you can get a bit fancier if you need to, and give the panel a nicer header so you clearly separate the title from the contents.

CSS

#hideaway{
border:1px solid #DDDDDD;
background-color:#CADBED;
width:300px;
height:23px;
overflow:hidden;
}

#hideaway h3{
margin:0px;
padding:0px;
font-family:Verdana;
background-color:#E6DFC8;
border-bottom:1px solid #CCCCCC;
}

#hideaway:hover{
height:auto;

}

Html

<div id='hideaway'>
<h3>Hover Mouse over this Area</h3>
This content will be seen when hovering over the
titlebar. you could not see it before.
This content will be seen when hovering over the
titlebar. you could not see it before.
This content will be seen when hovering over the
titlebar. you could not see it before.
</div>

Hover Mouse over this Area

This content will be seen when hovering over the
titlebar. you could not see it before.
This content will be seen when hovering over the
titlebar. you could not see it before.
This content will be seen when hovering over the
titlebar. you could not see it before.

This one now has a header to hover over, and a defined content section.

There are many things to be done with the Hover pseudo class.

Say you have a list of Products in a table and you wish to add a popup thumbnail of the product image to for instance:

Hover over the camera icon to see a pic pop up.

Product	Description	Price	Picture
Product 1	This is an average Product	$29.99
Product 2	This is a great Product	$9.99
Product 3	This is an expenive Product	$99.99

CSS

.thumb{
background:url('/images/cameraico48.png');
width:48px;
height:48px;
}

.thumb img{
width:128px;
height:128px;
display:none;
}
.thumb:hover{
background:url('none');
}

.thumb:hover img{
position:absolute;
display:block;
}

<table border=0 style="border:1px solid #DDDDDD;"><tr><td>Product</td><td>Description</td><td>Price</td><td>Picture</td></tr>

<tr><td>Product 1</td><td>This is an average Product</td><td>$29.99</td><td><div class="thumb"><img src="/images/picicon.png" alt="thumbnail"></div></td></tr>

<tr><td>Product 2</td><td>This is a great Product</td><td>$9.99</td><td><div class="thumb"><img src="/images/picicon.png" alt="thumbnail"></div></td></tr>

<tr><td>Product 3</td><td>This is an expenive Product</td><td>$99.99</td><td><div class="thumb"><img src="/images/picicon.png" alt="thumbnail"></div></td></tr>

</table>

Lets move onto Navigation. When you are creating menus, you may have options in the menu, and maybe some sub options you wish to group together under an option, but you do;t necessarily need to have them displayed all he time. You can use the hover pseudo class to make your menu a bit more dynamic.

For example, if you hover over options 2 and 4 you'll get extra options displayed:

Option 1

Option 2

Option 3

Option 4

Now the Code and CSS at work:

CSS

#nav{
border:2px solid #DDDDDD;
background-color:#C3D6CB;
width:180px;
}

#nav li{
height:20px;
}

#nav li ul{
display:none;
}

#nav li:hover{
color:#FFFFFF;
height:auto;
border:1px solid #AAAAAA;
}

#nav li:hover ul{
display:block;
background-color:#108541;
}

#nav li li:hover{
background-color:#14E36A;

}

Html

<div id="nav">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a>

<ul>
<li><a href="#">sub Option 1</a></li>
<li><a href="#">sub Option 2</a></li>

<li><a href="#">sub Option 3</a></li>
</ul>
</li>
<li><a href="#">Option 3</a></li>

<li><a href="#">Option 4</a>
<ul>
<li><a href="#">sub Option 1</a></li>

<li><a href="#">sub Option 2</a></li>
<li><a href="#">sub Option 3</a></li>
</ul>

</li>
</ul>
</div>

This is getting quite complex, s lets take a closer look at what the CSS is doing:

First I have the main navigation container, that will hold my options. Then I simply specify a starting width for my nav options using the list tag.

This is where it gets interesting:

#nav li ul{
display:none;
}

Here I specify that any ul tags inside a list tag that is inside an element with an ID of nav should not be displayed to begin with.

#nav li:hover{
color:#FFFFFF;
height:auto;
border:1px solid #AAAAAA;
}

#nav li:hover ul{
display:block;
background-color:#108541;
}

Now the hover pseudo class comes into play. First I just use it to change the color of the hovered option so we know its being hovered.

The second line, specifies what to do with the originally hidden ul that holds the sub option, when the list item they are inside of is hovered. That is they become visible.

Now you can of course style the items as you see fit, removing the bullet, changing fonts etc.. to suit your needs but this is the basic functionality.

For our final example lets suppose we have a horizontal menu, and we need to give it drop down menus, that don't actually push the content under them down as the appear.

For this we will need to actually use the position attribute. I'll go into more depth about this attribute in a later post, but for now, you should now, that unless it is absolutely necessary to be used, the position attribute should not be used. This is because it changes how elements are treated and can cause lots of confusion with its results. Once you know what it does and how to work with it it can be useful, but again its not something you'll want to use all over the page.

Lets look at our drop down example now:

File

Option 1
Option 2
Option 3
Option 4

CSS

#nav2{
height:30px;
width:350px;
border:1px solid #AAAAAA;
background-color:#777777;
position:absolute;
}

#nav2 div{
float:left;
background-color:#777777;
height:28px;
overflow:hidden;
width:116px;
}

#nav2 div:hover{
background-color:#000000;
color:#FFFFFF;
height:auto;
}

#nav2 p{
clear:both;
}

#nav2 div h3{
margin:0;
padding:0;
text-align:center;
}

#nav2 div.dropdown li:hover{
background-color:#FFFFFF;
color:#000000;

}

Html

<div id="nav2">
<div class="dropdown">
<h3>File</h3>
<ul>
<li>Option 1</li>

<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>

</div>
<div class="dropdown">
<h3>Edit</h3>
<ul>
<li>Option 1</li>
<li>Option 2</li>

<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>

<div class="dropdown">

<h3>View</h3>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>

<li>Option 4</li>
</ul>
</div>
<p>&nbsp</p>
</div>
<br>

<br>

This as you can see takes quite a bit more CSS to get it to function.
Notice the single use of the position:absolute; attribute for the nav2 container which will hold our menus. This prevents the drop downs from pushing on the content below them, and instead just open up above it as one would expect.

Basically all I do is float our menu divs, and have them change heights when hovered over so they can show the sub options with in them.

This are just a few examples of how useful the hover pseudo class is in modern browsers.

Now there is a caveat here. IE6, and you know it had to be that particular browser, does not support the hover pseudo class in anything but link tags.

<a href="#">Option 4</a>

So all these techniques fail miserably. Thankfully, users are moving away from IE6, and as I mentioned in a previous post the percentage of users still working on IE6 is so small its almost not worth going out of your way to code something that will work on it.

If for some reason the examples don't work correctly here you can click here to see all the examples in action.

Tables and Validation

2010-05-30T16:28:00.000-07:00

Evil Markup? Maybe not

Tables... The very word sends shivers down any self proclaimed CSS master. Tables are evil, tables should never be used. Tables should be cast into oblivion from this day forth. Baloney!!

Tables like every other tag in HTML have its uses. However like anything in this world it can be misused. Most Web Designers use applications such as Photoshop, or what have you, to design the look of their site, and then have this same application transform it into HTML. Yes it may be HTML it may even look nice in some cases, but is it correct? Is it Valid? Probably not.

Most applications use tables to transform the image rendition of a layout created by a designer into HTML, however these applications will normally use obsolete, difficult and hard to maintain ways of building a website. Like I mentioned in my previous POST, A simple layout is easier to maintain. Most of the time they'll rely on tables to create the layout because that was the technique used years ago. however as the Web has progressed so have the techniques to design and build websites.
A simple 3 column layout like we saw before ends up a mis-mash of cells and columns instead of a nice fluid understandable piece of code.

Tables


<table>
<tr><td colspan=3>Header area</td></tr>
<tr> <td> Left Column</td>
     <td>Center Column with lots of content...</td>
     <td>Right Column</td>
</tr>
</table>

Vs DIV's


<div id="header"></div>
<div id="leftcol"></div>
<div id="contentcol"></div>
<div id="rightcol"></div>

7 Lines of code vs 4. And this is just a basic skeleton. Now suppose you want to change the look, like we did in the previous post. Move Navigation to be horizontal, you'd need to go in and alter the entire markup. Now its seems reasonably simple without any content, but imagine tons of content in the middle column, and trying to find where the right column begins after all that content with more tags and text etc...

With the proper use of CSS you couldn't care less what the content of the DIV is where it starts or where it ends. You look at your CSS and you modify that.

Now I must make a confession, calling your columns left, right and center is not a good idea, because like with tables you give them a predetermined location or layout position, and as I showed with CSS, they really don't need nor should they have one.

So for an accurate representation, you could call them navigation, content, and maybe "adbar" or extra_content pane ro something that is descriptive of its contents, but not of its position in the page.

If you need to change its location, style, dimensions etc.. it you can look for their style definitions in the style sheet and change those. So Navigation moves to the top horizontally, "adbar" may end up at the bottom heck you could even set it as the left column instead. All without altering the markup.

You don't have a left column, you have a navigation "pane" for lack of a better word, and you can place it anywhere you want to.

All this without altering your base markup. Do it with tables, and you'll be starting from scratch every time.

This does not immediately mean tables no longer have a place in the world of Web development and should never again be used or heard of. Tables play an important role if used properly.

But how do you use tables properly? You use them to display tabular data.
But now, what is tabular data? Well, it can be many things. It can be a directory, it can be a product listing, it can be a roster sheet for a baseball league etc... All that can be considered tabular data. The common factor? Its data, its listings, its information that has that particular display need and structure, and will not change. In this context tables become a tag to markup how data is to be structured, not where its going to be on the page, or what its going to look like.


<table border=0 cellspacing=0 cellpadding=0 style="border:1px solid #999999;">
<tr><td colspan=3>Players</td></tr>
<tr> <td> Name</td>
     <td>Position</td>
     <td>Email</td>

</tr>
<tr><td>Peter</td><td>Midfielder</td><td>pete@baseballnuts.com</td></tr>
<tr><td>John</td><td>Rightfielder</td><td>john@baseballnuts.com</td></tr>
<tr><td>Frank</td><td>Pitcher</td><td>frank@baseballnuts.com</td></tr>
<tr><td>Jason</td><td>First Baseman</td><td>jason@baseballnuts.com</td></tr>
</table>

Validation

Validation is simply the product of adhering to the rules and norms set by the W3C for design.

As long as your coding follows those rules it can be considered valid, and stands a good chance of looking the same across all the different platforms.
But hey!, we all make mistakes, and we make even more when we are coding a website. So to help us out the W3C offers a service to check your web pages and make sure it conforms to the set of rules you've specified in your webpage as your Doctype. If you made a mistake and missed something it will tell you and often offer an explanation of the errors.

The W3C's validator is located here:
http://validator.w3.org/

You can use it to run your pages through and make sure there are no errors.

It has 3 ways of checking your website:

By URL

By File Upload

By Direct Input

By Url is the most direct, you give it a URL or address where it can access your website online, and it verifies it.

By File Upload: Takes your base file directly. Reads it and returns its result.

By Direct Input,: By far the easiest option, just copy and paste your entire code, and press the button.

Options 2 and 3 are only useful if your file is 100% pure HTML. If you are working with a server side language like PHP, ASP or Cold Fusion, then its often better to offer the URL. Otherwise the server side code is not processed, and may cause issues that aren't really there in the final page.

Lets take our example website we used in the last post and give it a whirl:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title>Structure Vs Presentation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>

 <div id="header">
  <h1>This is the Main Website Title</h1>
 </div>
 <div id="navigation">
 <ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
 </ul>
 </div>
 <div id="content">
  <h3>This is Content Title</h3>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin odio turpis, hendrerit bibendum fringilla sit amet, lacinia sit amet lacus. Quisque varius tellus vel libero tempor laoreet. Suspendisse vel dignissim tellus. Etiam fringilla consequat eros, in volutpat lectus molestie at. Vivamus vitae mi justo, quis gravida nisi. Tristique senectus et netus et malesuada fames ac turpis egestas...
 </p>
 <div id='subcontent'>
  <p>
Suspendisse potenti. Duis pellentesque, sem varius facilisis vehicula, lectus purus semper mauris, quis laoreet metus sem vel diam. Ut non tellus nulla. Sed egestas dui ac nulla eleifend vulputate. Sed blandit lacus eu arcu luctus et condimentum erat scelerisque...
  </p>
  <p>
Pellentesque mauris assa, aliquet vel volutpat sed, facilisis vitae urna. Vestibulum consequat metus id magna mollis auctor. Nunc id tellus nec sem auctor convallis ut a quam. Suspendisse vel urna velit, feugiat ultrices leo. Vestibulum orci ipsum, venenatis quis ultrices at, varius sed sem. Nulla facilisi. In porta, nunc vel rutrum adipiscing, dui lectus accumsan... </p>
 </div>
 <p>
Quisque sit amet dui libero, at pharetra erat. Nullam ante mauris, hendrerit vel accumsan sed, porttitor et purus. Fusce interdum sodales justo, a pretium velit porta eu. In hac habitasse platea dictumst. Etiam semper laoreet dolor quis pharetra. Integer id est vel tortor iaculis laoreet congue non nibh. Cras non dui massa. Sed nulla tortor, volutpat vitae accumsan eget, imperdiet quis nibh. In accums...
 </p>
 </div>

</body>
</html>

We'll use the Direct Input option, and just copy and paste our website inot the text area as seen in the pic above. Press the button and the Validator Returns 2 Warnings, (about the same thing actually). Our Example Markup is considered valid.

The 2 warnings refer to the lack of character encoding. Its an additional line that tells the browser what encoding to use when displaying the page. Most servers send a predefined header for this, and unless you need a specific encoding you can get by with the standard encoding.


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

I'll get into it more in a future post. For now its just a lesser warning we may safely ignore.

Let's introduce a real error shall we:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title>Structure Vs Presentation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>

 <div id="header">
  <h1>This is the Main Website Title</h1>
 </div>
 <div id="navigation">
 <ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
 </ul>
 </div>
 <div id="content">
  <h3>This is Content Title</h3>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin odio turpis, hendrerit bibendum fringilla sit amet, lacinia sit amet lacus. Quisque varius tellus vel libero tempor laoreet. Suspendisse vel dignissim tellus. Etiam fringilla consequat eros, in volutpat lectus molestie at. Vivamus vitae mi justo, quis gravida nisi. Tristique senectus et netus et malesuada fames ac turpis egestas...
 </p>
 <div id='subcontent'>
  <p>
Suspendisse potenti. Duis pellentesque, sem varius facilisis vehicula, lectus purus semper mauris, quis laoreet metus sem vel diam. Ut non tellus nulla. Sed egestas dui ac nulla eleifend vulputate. Sed blandit lacus eu arcu luctus et condimentum erat scelerisque...
  </p>
  <p>
Pellentesque mauris assa, aliquet vel volutpat sed, facilisis vitae urna. Vestibulum consequat metus id magna mollis auctor. Nunc id tellus nec sem auctor convallis ut a quam. Suspendisse vel urna velit, feugiat ultrices leo. Vestibulum orci ipsum, venenatis quis ultrices at, varius sed sem. Nulla facilisi. In porta, nunc vel rutrum adipiscing, dui lectus accumsan... </p>
 </div>
 <p>
Quisque sit amet dui libero, at pharetra erat. Nullam ante mauris, hendrerit vel accumsan sed, porttitor et purus. Fusce interdum sodales justo, a pretium velit porta eu. In hac habitasse platea dictumst. Etiam semper laoreet dolor quis pharetra. Integer id est vel tortor iaculis laoreet congue non nibh. Cras non dui massa. Sed nulla tortor, volutpat vitae accumsan eget, imperdiet quis nibh. In accums...
 </p>
 </div>
<img src="myimage.jpg">
</body>
</html>

I've added an image. But I neglected to include one of the properties that it requires.

When we run it through the Validator, it spits out a big nasty red error:

And here we have its explanation:

Line 38, Column 21: required attribute "ALT" not specified

✉

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

It tells me the line number, the code around the error, and why it may be wrong.
Now I can go back to my code and fix it:


<img src="myimage.jpg" alt="This is an Image" >

Should we run it again, it will validate.

At the end and like with many other things, correct usage of tags for their intended purposes will help produce a nicer looking website that is easier to maintain.

Well that's it for my second entry into this Blog. Hope you enjoyed it.

Welcome to Web 101

2010-05-15T11:41:00.001-07:00

Welcome to Behind the Web or as I like to call it Web 101. My name is Phil B, I'm a IT consultant and specialize in Web development. Specifically applications involving HTML PHP, and Javascript.

I've created this Blog as away of opening up the web development world to people who want to lear about having a website that is easy to maintain and attractive and comfortable to browse.

I've seen through my years many websites that use overly complex markup to present the simplest of designs. When simpler, easier to understand markups can do the same in less time, and consume less resources for the visitor.

In today's World Wide Web we have to cater to a variety of people, Operating systems, and web browsers. This can make it difficult to create a website that looks the same across all these different platforms. The more complex the markup is, the more likely something is going to break, or fail to look the same for everybody.

I'm also of the idea that a simpler site is a better site. I find sites that have all these transitions and effects and things that change and animate around to be kind of annoying. I also completely despise sites that abuse Flash animations.
Flash can be used as an intro movie to the site if required, but basing the entire site around Flash is just overkill.

Additionally Flash based websites alienate an important part of the browsing population: The mobile population.

The Mobile Population are those people that use their phones, PDA's or other mobile devices to access websites. Well if you are one of the many users (like me) of iPhones, or iPod Touches, and now iPads then you know Flash based sites are a big no no because these devices have no Flash support. At least 30% of the mobile users use one of these devices. That means a Flash based site just turned down 30 out of every 100 users. That's a lot of people that can't see the site at all. Add to that the devices that have limited Flash support and there's no guarantee all the features in your Flash site will work. I've tried to navigate through different flash based sites with mobile devices such as Nokia phones, and there's always some type of issue preventing the full functionality of the site. You might be losing 50% of your target audience because of Flash.

Simpler, easier cleaner sites, have a better chance of looking right in mobile browsers. This also has the benefit of allowing you to design a single site instead of 2 or 3 versions for different devices.

The first thing to know when developing a website is that Internet Explorer is almost always wrong in how it renders elements. Sadly Microsoft's own browser still doesn't know how to properly render websites even in their current version 8 browser. Fortunately the statistics show that the usage of IE is declining rapidly. From 2006 where IE6 garnered about 60% of all browser users to a mere 19% now for IE8.

IE's disability can be overcome with properly coded websites.

The first step to a site that works across most platforms is creating Valid HTML, CSS, JS etc.. What is valid code? Valid code is code that adheres to certain standards established by a group called the World Wide Web Consortium or W3C for short. They determine the set of rules and norms that are to be followed to create a site. Valid code follows these rules and guarantees a consistent look across the different platforms.

One must also let the browser know what these rules are so it can render the content appropriately. These rules are contained in files called Doctypes. Short for Document Types these files basically list the rules the browser should follow to render or display the page. Setting this at the top of your page means that any browser loading your page will know how its supposed to render it. This keeps things consistent. Even IE follows these rules when properly set.

The most common Doctype is the Transitional Doctype.

This gives you the most leeway in coding, by giving you access to presentational and stylistic elements within the markup like font tags and other deprecated tags. Other doctypes like the Strict doctype disallow such tags, and demand all presentational and stylistic coding to be done through CSS.

There are other doctypes that can be used in other specific circumstances but for our purposes will stick mostly with Transitional, and Strict.

What this approach wants to achieve is to separate the presentation from the structure of the document. The structure refers to how the information is organized. You have paragraphs, lists, sections etc.. The Presentation is how those structure elements look. Do they have a border? A background? Are they 10 or 50 pixels tall? etc...

Though as mentioned before, the Transitional doctype lets you have the presentational elements within markup, its always a good idea to avoid their placement there as much as possible.

Here's an example of how a full separation of presentation and structure can make having completely different looking websites with the same base markup a simple task.

Base Markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Structure Vs Presentation</title>

</head>
<body>

<div id="header">
<h1>This is the Main Website Title</h1>
</div>
<div id="navigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</div>
<div id="content">
<h3>This is Content Title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin odio turpis, hendrerit bibendum fringilla sit amet, lacinia sit amet lacus. Quisque varius tellus vel libero tempor laoreet. Suspendisse vel dignissim tellus. Etiam fringilla consequat eros, in volutpat lectus molestie at. Vivamus vitae mi justo, quis gravida nisi. Tristique senectus et netus et malesuada fames ac turpis egestas...
</p>
<div id='subcontent'>
<p>
Suspendisse potenti. Duis pellentesque, sem varius facilisis vehicula, lectus purus semper mauris, quis laoreet metus sem vel diam. Ut non tellus nulla. Sed egestas dui ac nulla eleifend vulputate. Sed blandit lacus eu arcu luctus et condimentum erat scelerisque...
</p>
<p>
Pellentesque mauris assa, aliquet vel volutpat sed, facilisis vitae urna. Vestibulum consequat metus id magna mollis auctor. Nunc id tellus nec sem auctor convallis ut a quam. Suspendisse vel urna velit, feugiat ultrices leo. Vestibulum orci ipsum, venenatis quis ultrices at, varius sed sem. Nulla facilisi. In porta, nunc vel rutrum adipiscing, dui lectus accumsan... </p>
</div>
<p>
Quisque sit amet dui libero, at pharetra erat. Nullam ante mauris, hendrerit vel accumsan sed, porttitor et purus. Fusce interdum sodales justo, a pretium velit porta eu. In hac habitasse platea dictumst. Etiam semper laoreet dolor quis pharetra. Integer id est vel tortor iaculis laoreet congue non nibh. Cras non dui massa. Sed nulla tortor, volutpat vitae accumsan eget, imperdiet quis nibh. In accums...
</p>
</div>

</body>
</html>

Our base markup consists of a header bar, a navigation section, a content section, and a sub content section inside the larger content area.

Without any CSS applied to it it looks like this:

That's a very plain website, but as you can see its completely usable. Everything works, and can be used. But suppose we want to give it a little flair. We want the links to be on the left side as a column, and the content in the middle, and maybe even a narrower column on the right. Well CSS can do all that, without touching the basic markup.

Lets add a Stylesheet to our markup, basically a set of instructions of how the markup is supposed to be presented to the user.

This is the stylesheet:

*{
margin:0px;
padding:0px;
border:0px;
}

body{
width:100%;
height:100%;
background-color:#DDDDAA;
}
#header{
width:100%;
height:120px;
background-color:#DDDDFF;
}

#navigation{
float:left;
width:15%;
background-color:#DDDDAA;
text-align:center;
}

#content{
width:78%;
float:left;
text-align:justify;
background-color:#FFFFFF;
}

#content p{
width:80%;
margin-left:auto;
margin-right:auto;
margin-bottom:5px;
}

#content #subcontent{

border:2px inset gray;
background-color:#666666;
color:#FFFFFF;
}

But how do we link it to our markup? There are 3 ways to accomplish this:

Stylesheet Reference
In file Style Section
Inline Styles

Number 1, the one we'll use for this example, is basically a secondary file that is linked to our base HTML file.

We link the stylesheet to our HTML markup file with a LINK tag:

We place this link in our html file, between the head tags of our markup.


<head>
  <title>Structure Vs Presentation</title>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
</head>

Lets see how our page looks now:

Look at that, we now have a navigation bar on the left, a colored header bar, and our content section with a defined subsection in dark gray, and the markup is still the same.

Lets try a slightly different stylesheet:

*{
margin:0px;
padding:0px;
border:0px;
}

body{
width:100%;
height:100%;

}
#header{
width:100%;
height:120px;
background-color:#DDDDFF;
}

#navigation{
width:100%;
height:20px;
background-color:#DDDDAA;
text-align:center;
}

#navigation li{
float:left;
width:80px;
height:100%;
}

#content{
text-align:justify;

}

#content p{
width:80%;
margin-left:auto;
margin-right:auto;
margin-bottom:5px;
clear:both;
}

#content #subcontent{
margin-left:auto;
margin-right:auto;
width:40%;
height:200px;
overflow:auto;
border:2px inset gray;
background-color:#666666;
color:#FFFFFF;
}

Now we have a horizontal navigation bar between the header and the content, and we have a scrollable sub section inside our main content area. But the main HTML markup remains the same.

That's the beauty, anyone can look at the code, and immediately understand what each section is, and then just apply their own CSS to make it look however they want to.

This is of course a very basic example, but it shows the power of CSS. And how a simple structure can have different layout designs.

Well that's it for my very first Web development post.

I hope you enjoyed this as much as I enjoyed writing it. I'll be going into some much cooler CSS techniques in up coming blog posts, before moving on to Javascript and finally PHP.

Don't forget to comment.

Appendix

For basic coding, any text editor will suffice. My personal favorites are Notepad for Windows, and TextWrangler for Mac.

<Web-Tech>

Apple's Special Event March 21, 2016 Overview

The 4" iPhone SE

The 9" iPad Pro

iOS 9.3 & CareKIt

Links

9" iPad Pro

iPhone SE

iOS 9.3

FBI Requests Apple bypass the security of iOS to unlock iPhone used by San Bernardino shooters.

iOS May 1970 Date Issue.

Public Service Announcement

Solutions

Apple Pay: How does it work?

Top 5 additions in the recently released iOS 9.2 Update for iPhone, iPad and iPod Touch.

New Top Stories section in News

3D Touch for iBooks.

Apple Music Improvements

Mail Drop in Mail

Camera USB Adapter support for iPhones

Useful Links

Apple Music vs iTunes Match

Let's get ready to ruuuumble!!!!.

iTunes Match

Apple Music

Differences

Cancellation

Judges' Ruling

Useful Links

How does Apple's IPhone Upgrade Program Work?

So how does it work:

Frequently Asked Questions

Do I need to turn in my current iPhone to start the Upgrade Program?

Does my Cell Service contract have to be up, or do I have to be eligible for an upgrade with my carrier to start the upgrade program with Apple?

Do I need to make a down payment to start the Upgrade Plan?

Do I need to own an iPhone to start the Upgrade Plan

Are the iPhone's you get on the upgrade plan unlocked?

Apple's Upgrade Program Website

What to do, when buying a second hand iPad, iPhone, or iPod Touch that supports iOS 7 or above.

What to do, when buying a second hand iPad, iPhone, or iPod Touch that supports iOS 7 or above.

Verifying the device is correctly wiped:

If the device appears to be at the Activation Lock screen, then it was most likely locked from iCloud by the original owner.

If the device is running iOS 6 or an earlier version:

Updating Windows XP to Windows 8 Pro

Overview of iPad Mini and iPad 4 reveals

iPad 4

iPad Mini

iTunes Survival Tips Part 2

Usage of an AppleID

# 3. Keep a single Apple ID.

Don't use the same Apple ID in 2 or more iPhones

Don't use the same AppleID for iCloud backups of different phones.

Don't share an Apple ID for iTunes purchases

iTunes survival Tips

# 1. Consolidate

# 2. Weed Out

# 3. Keep a single Apple ID.

# 4. Backup.

iOS 6 Issue List

This is an iPad 2.

iOS 6 Official download.

Windows 8 Metro Diary: Day 3

Monday September 26th - Friday September 30th 2011

Windows 8 Metro Diary: Day Two

Sunday September 25th 2011

Windows 8 Metro Diary: Day One

Saturday September 24th 2011

Ajax 101

The Server Side Script

PHP Script

Javascript and Ajax

Request Object

Request Object and Properties

The Open method

Headers

Send Paramters

Button Call

Working Example

Common Validation Errors

There is no attribute "xxxx"