Category Archives: Internet Explorer

Moving from Expression Web to Visual Studio 2012 for client-side HTML 5 Web Design by Don Burnett

A lot has happened this year in the world of Microsoft. Expression Studio has came to it’s end of life. This meant that Expression Web is now a community supported product.. This notice showed up on the Microsoft.com/Expression Website:

“The web is now about applications as well as traditional web sites, and this requires a new set of tools. Microsoft is committed to offering a unified approach to focus on web design and development features in Microsoft Visual Studio 2012.

As part of this consolidation, Microsoft Visual Studio 2012 provides the leading web development tool, which enables you to design, develop, and maintain websites and web applications. Visual Studio 2012 makes it easy to build CSS-based websites from the ground up with new CSS layouts, HTML5 support and full featured capabilities for working with and debugging JavaScript. Learn more about Visual Studio Express 2012 for Web and WebMatrix 2.

Expression Web is now available as a free download from the Microsoft Download Center, and no new versions will be developed. Customers who previously purchased Expression Web will receive support through the established support lifecycle. Expression SuperPreview Remote Beta will continue running as a service through June 30, 2013.”

Download Expression Web 4 SP2, Free Version

So many Expression Community members were really dismayed about this as they really love using Web for their website design projects. Many thought that Microsoft was abandoning client-side web development. Well the good news is that really is the case, Microsoft is just moving to support web apps over websites.

Pure HTML Template for Visual Studio

Step2b.png

Pure HTML is a basic Visual Studio project template for front-end web development using only HTML5, CSS3, and JavaScript that can be downloaded on CodePlex. Using this template, gives you a purely client-oriented web site ready for you to extend with just a few clicks.

The template works with the Professional, Premium, Ultimate, and Express for Web editions of Visual Studio 2012.  You can get Visual Studio 2012 Express for Web for free too.
.
The template is a installed as a visual studio extension. After you installed it you can create a new website

If you use VB:

  • File > New > Project > Visual Basic > Pure HTML Web Site
  • File > New > Web Site > Visual Basic > Pure HTML Web Site

If you use C#:

  • File > New > Project > Visual C# > Pure HTML Web Site
  • File > New > Web Site > Visual C# > Pure HTML Web Site

 

Expression Web Features versus Visual Studio 2012

While not quite the same, the user interface between the two products have a lot in common..

image

image

 

Feature comparisons: Publishing

Copy Website (FTP and site connectivity in Visual Studio 2012

image

Expression Web

image

Toolbox Comparison

Expression Web Toolbox Visual Studio 2012
image image

CSS Comparison Features (not a direct side-by-side comparison)

Expression Web Visual Studio 2012  
image image image

Code Editor Comparison Expression Web Versus Visual Studio 2012 (with Web Essentials Installed)

image image

While they look a lot the same the Visual Studio IDE is quite enhanced and can be enhanced further with additions including add-ons from companies like Telerik.com. You will find yourself right at home in Visual Studio 2012 with a passel of new features added to it.

Microsoft Web Essentials

image

Another useful add-on is Microsoft’s Web Essentials which you can download here..

Quoting the link:

TypeScript

Full support for TypeScript preview and compilation. Remember to install the official plug-in for Visual Studio to take full advantage of TypeScript http://www.typescriptlang.org/#Download

When a TypeScript file (.ts) is saved in Visual Studio, Web Essentials will compile it automatically and generate a preview.

TypeScript regions

Some people hate them, other people loves them. This is a feature that was in the original Web Essentials 2010 an by popular request now made it in the 2012 version.

image

Source Maps

You can produce Source Map (.js.maps) files automatically by enabling it in Tools -> Options.

Compiler settings

You can set all the compiler settings from Tools -> Options

Minification

When a TypeScript file is compiled, it can now also be minified to produce a much smaller JavaScript file.

Stylesheets

Option dialog

The most important features in Web Essentials can be turned on/off.

image

From version 1.9, options can be applied either globally or to individual solutions.

Vendor specific property generation

A lot of the new CSS 3 properties only work cross-browser if vendor specific properties are added. These include -moz, -webkit, -ms and -o.

The result is the insertion of the missing vendor specific properties in the right order.

If one or more of the vendor specific properties are already present, then only the missing ones are added.

Add missing standard properties

Invoke the Smart Tag to automatically insert any missing standard properties.

Keep vendor specific property values in sync while typing
Display browser support for properties and selectors

Just hover over any property name, value, pseudo or @-directive to get the relevant browser support matrix.

Modernizr support

Modernizr class names will now be bolded in the CSS editor, but more importantly, they will also be respected by the automatic hierarchical indentation feature of VS2012.

image

Intellisense for !important

By popular demand, here you go.

Always up-to-date with W3C and browsers

Web Essentials will automatically download the latest CSS schema files used to drive Intellisense and validation. It happens in the background automatically.

Intellinsense for “Add region…”

Regions are supported in the VS2012 CSS editor, but now it’s even easier to add them.

Choosing Add region… result in this snippet being inserted.

Intellisense for custom fonts

Click to open larger image

Intellisense for handling iOS scrollbars

VS2012 supports the different pseudo elements for customizing the iOS scrollbars. It can, however, be a little difficult to work with unless you know how to chain the pseudos correctly. That’s no longer a problem.

 

Intellisense for CSS 3 animation names

Inline URL picker for the url() function

Just start typing and the file system shows up in Intellisense.

Warning list guides for handling best practices
Warnings for browser compatibility issues

Is your stylesheet browser compliant? Let Web Essentials tell you.

More precise error messages
Removes warnings for using the \9 CSS hack
Document-wide remove duplicate properties

Intellisense for CSS gradients (all vendor specifics included)

Gradients are really difficult to write, so now examples are automatically inserted for all the different types of gradients, including the various vendor specific ones.

Option to hide unsupported CSS properties

Some of the CSS properties, such as the CSS 3 FlexBox Module are not supported by any browser yet. Now you can turn all unsupported properties and pseudos off.

CSS specificity tooltip

In case you’ve been wondering why certain styles are never applied in the browser, you can now see the specificity for each individual selector by hovering the mouse over them.

Option to hide “inherit” and “initial” global property values

Sometimes it can feel like these two properties are too noisy in Intellisense. Though they are completely valid, you might just want to hide them.

Easily darken and lighten color values

Place the cursor in a hex color value and hit SHIFT+CTRL+ARROW UP/DOWN to darken or lighten the color.

Move properties up and down

Place the cursor in a property and hit SHIFT+CTRL+ARROW UP/DOWN

F1 help opens the relevant specification

Uses http://realworldvalidator.com to provide more accurate information than the W3C specifications.

Supports team-wide color schemes

More info on working with custom color palettes coming…

Up- and down arrows control numeric values

When the cursor is in or next to a numeric value such as 5px, .6em, 15% or just 23, you can use CTRL+SHIFT+UP to increase the number and CTRL+SHIFT+DOWN to decrease it. The feature is known from FireBug.

This works for CSS, SaSS and LESS files.

CoffeeScript and LESS preview window

Both LESS and CoffeeScript comes with a preview window located at the right side of the editor. It shows the compiled output every time you save the document.

If any LESS file name is prefixed with an underscore (_file.less), then it won’t generate a .css file automatically.

Embed url() references as base64 strings

This will take the referenced image and base64 encode it directly into your stylesheet. You have then eliminated an HTTP requst.

If the base64 string becomes to long, you can easily collapse it.

Remember to optimize your image files before embeding them. Use the Image Optimizer extension to make it effortless.

Color swatches

All color types are supported, including the new CSS 3 formats.

Minification

Right-click any CSS file in Solution Explorer to produce a *.min.css file. Whenever the source .css file is changed, the .min.css file is updated accordingly.

image

You can also minify the selected text in the editor by right-clicking the selection.

Font preview on mouse hover

Image preview on mouse hover

Sort properties

A Smart Tag on every selector enables you to easily sort all the properties within the rule.

As of version 1.9, the sorting is no longer alphabetically but instea uses the order specified by the CssComb project.

Drag and drop support for imaged and fonts

Drag and image onto the editor from either Solution Explorer or your desktop and a background-image property will be inserted with the relative path to the image file.

Do the same with a font file, but in this case all font files with the same name but different extensions (.ttf, .eot, .woff, .otf) will be added to the same @font-face rule.

Convert easily between hex, rgb and named color values

Adds SmartTags to selectors for targeting specific IE versions

Specific hacks can be used to target specific versions of IE on a selector level. These are all valid according to the W3C.

Selector Intellisense for HTML elements, classes and IDs

CSS/LESS document outline

Get a sneak-peek inside any CSS or LESS file directly from Solution Explorer.

image

JavaScript

JSHint for JavaScript

JSHint is a really good way of making sure your JavaScript follows certain coding guidelines and best practices. The default settings are very relaxed, but you can turn on more rules through the new options dialog.

image

The error window updates as you type, so you don’t have to right-click the .js file to kick off JSHint. It happens as you write.

Each indiviual JavaScript file can override the global settings by using the official JSHint comment format descripted in the JSHint documentation.

In version 1.8 you can also enable JSHint to run on build.

JavaScript regions

Some people hate them, other people loves them. This is a feature that was in the original Web Essentials 2010 an by popular request now made it in the 2012 version.

image

ZenCoding for HTML

Watch this short demo video and read more about the ZenCoding syntax.

Lorem Ipsum generator

As part of ZenCoding, you can now generate Lorem Ipsum code directly in the HTML editor. Simply type “lorem” and hit TAB and a 30 word Lorem Ipsum text is inserted. Type “lorem10” and a 10 word Lorem Ipsum text is inserted.

This can be used in conjuction with ZenCoding like so: ul>li*5>lorem3

Markdown

See the compiled markdown in a preview window inside Visual Studio.”

Advertisements

Apple Users! Beware Windows XP Derangement Syndrome

I know most Apple users are big on their operating system and the momentum that mobile devices have propelled Apple to new heights but face it, it’s not quite a post PC world just yet..

imageThere are some misnomers out there and I have to say I hear it a lot from folks who have MacBook Pro’s but are running Windows XP and assuming that there are more computers out there still running XP  on BootCamp on their machines that haven’t upgraded Windows and are about two generations behind in their criticisms today.. Apple’s smear campaign against Windows Vista..

Let’s take a look at some facts about Windows and the current state of the PC..

Internet Explorer 9 and 10

Now some people out there in the world are still complaining that there are “just too many copies of IE 6 out there in the wild in use today on their older machines.. This is very false to FACT.. In fact, two years ago, users held a funeral for IE 6..  Microsoft even sent flowers..

http://ie6funeral.com/

So what do people use if they aren’t on Windows XP ?? Many use Internet Explorer 9 which is the current version. What do you use if you are on XP ? Well many of you should know that Microsoft ended the shelf life of Windows XP back in 2008..

image

While we are on the subject JUST HOW MANY PEOPLE are out there today RUNNING Windows XP and Internet Explorer 6 ??  As of February 2012 the last count world-wide was 7.1%. Most maybe in China. and I’d ask you are they running on a LICENSED product that is EOL.. When did you last run an operating system and a browser that was released over 12 years ago.. If you are well maybe you should consider some alternatives..

ie6Usage

Microsoft will ship Windows 8 with Internet Explorer 10 a fully functional HTML 5 web browser that has been totally re-written to support HTML 5 from the ground up with the IE 9 release. Not even the critics can complain about this one..

So how many copies of other IE Browsers are out there in use today ? Including IE 8 ?  IE 8 (Internet Explorer Version 8 is the last version that runs on XP?  A recent live snapshot tells us the story.. In fact the people complaining about IE 8 should be the ones supporting not complaining as it’s more used than Mozilla Firefox and Google Chrome , which (besides for one day ended) ends up being the most used browser in the world. So why aren’t web standards people lining up to support it ?

Could we call it anti- Microsoft Bias ?? I sure could..  Microsoft turned on standards mode (STRICT) HTML 4 standards compliance on by default with IE 8 with HTML 4, Yet site creators at-large refused to support opt-in for IE 8 so we could all put IE to rest,  Microsoft answered that problem with IE 9.0 a modern HTML 5 browser.

StatCounter-browser_version-ww-monthly-201102-201202-bar

Internet Explorer 9 and 10 creates a new HTML 5 compatible world


So Microsoft’s new version, which works with Windows Vista and above, brings us true HTML 5 compatibility and maintains website standards. If you navigate to a new site that isn’t compatible then it will flip back into a compatibility mode that is most compliant with that site.

Other nice features includes SANDBOXING which can isolate your browser into one Memory Space so it can’t infect malware into the rest of the machine..  It also brings AD BLOCKING technology right into the browser so you can block advertising and MALWARE much easier, should it try to get in..

image

Windows 8 Consumer Preview- The Cure for OLD PC WOES- Everything old can be *new* again
Windows8Logo-2
Have you not upgraded your machine to Vista, or did and unhappy with performance or not upgraded to  Windows 7 because you were afraid you didn’t have enough power to run it easily ?

Just wait until you get to the end of the article, I have a majorly GOOD surprise for you. HINT: Windows 8 supports lower spec devices such as Mobile Phones and Tablets that run at about the same speed and graphics power of your very old PC..  That means you can UPGRADE that OLD PC and still have a working machine and right now if you do and install over the internet it’s absolutely free until the final release comes out.. Your old PC   *MAY EVEN* be faster.. Just make sure your computer display is capable of 1024×768 resolution.  Netbooks with a minimum screen of1024x768 are supported. Some early netbooks only do 1024×600 (still supported with Windows 7).

http://windowsteamblog.com/windows/b/windowsexperience/archive/2012/02/29/introducing-windows-8-consumer-preview.aspx

You can download and install the Windows 8 consumer preview right from the web right now no media needed just a broadband connection and it should work fine even on your old Windows XP BOX..

WAIT where’s my START menu…


It’s been replaced by a start screen..  Windows 8 with the new interface is much easier to get used to. In fact hitting the Windows key and the letter F key can help you find anything including Apps, Settings, and Files

In review: So if you are a MacBook Pro Owner telling folks that the world is still on IE 6 and Windows XP maybe you had better clue in, you are a few years behind the eight ball with your technology and what you are saying to others about Microsoft’s OS and Web Browser just might be a little bit behind the times and you might be giving out wrong information to the people that trust you to be knowledgeable may find you are giving them bad and wrong information. I am not hacking on you for having that MacBook Pro but isn’t it time to at least download the Windows 8 preview and give yourself a reality check ? Stop with the XP/IE 6 nonsense.

Windows 8 Running on an Apple MacBook Air   Wow ain’t that trackpad neat.. Check out Duncan’s YouTube Channel for more..

http://www.youtube.com/watch?v=oMbiA56-2p8&feature=player_embedded

Apple users clue in just because you left Windows for MacOS under XP doesn’t mean time stood still. I would just ask you a few questions:

1) Why hack on Windows ? It’s a testament to Windows XP that 11 years later that you are still using it..

2) Why not try out Windows 7 or Windows 8.. You can even install it as a second OS. In fact Windows 8 is free right now to try as a consumer preview and installs right off the internet (no media necessary) just be sure to write down your product key when it shows you one.. You just might find it impressive and easier and actually work better after a few weeks than what you have right now.

It also migrates all of your old Windows Apps, settings and files so you don’t lose anything.

3) Please, stop hacking on IE, what you are talking about is ten year old software that most people in their right mind left long ago for new versions with less and now basically no compatibility issues.

OLD AND STILL XP USERS..

If you are an old XP user that hasn’t given up the ghost and can’t get updates, TRY Windows 8. The requirements for your old PC to stay usable is less than ever before because this version scales to lower power processors such as the ones found in tablets and phones. Most all of your legacy hardware is supported too with drivers (even now.  Below is a youtube video of an Acer Aspire Netbook (slow processor 1 gig of ram) it’s pretty cool..

 

Windows Vista Users

image

 

Do you love Vista and don’t want to leave it, maybe you will miss the background movies too much ?? If you are and you are a bit discouraged about your performance there is always a quick fix.. It’s called Process Lasso by Bitsum..  Please download it today and feel the real POWER in Vista..

http://bitsum.com/prolasso.php