Sam Bennett – Web Developer

After seeing a tweet I went to look what this new thing was from Microsoft. It turned out to be a beta program called WebMatrix. So what is this new program? Well it’s a tool for building websites with Windows. It includes IIS Developer Express (a development Web server), ASP.NET (a Web framework), and SQL Server Compact (an embedded database). So what is it exactly? Well it is designed so that people can build simple sites fast.Microsoft say “It streamlines Web site development and makes it easy to start Web sites from popular open-source apps.” From my first glance it does look pretty simple.

So who have they aimed this at then?

WebMatrix is for developers, students, or just about anyone who just wants a small and simple way to build Web sites. Start coding, testing, and deploying your own Web sites without having to worry about configuring your own Web server, managing databases, or learning a lot of concepts. WebMatrix makes Web site development easy.

Why would you use it?

You will use the same powerful Web server, database engine and web framework that will run your Web site on the Internet, which makes the transition from development to product seamless. Beyond ensuring everything just works, WebMatrix includes new features that make Web development easier.

One of the options it gives you is the ability to create a website using a premade system like WordPress. WebMatrix is very good when you want to do something like this and for testing on your machine as it can set it up so that it will be ready for when you want to share it live and something that I like is that it will install MySQL on your machine if you have not got it installed.

You can start from scratch it you want or use one of the templates. They said this is good for Developers and Students etc and I also say that is true but I believe that this would be good for beginners as everything is here, the code, databases etc.

As you can see everything is nicely laid out. I can look at my files, databases and create reports for SEO etc in the main section. I even have the same options on the bottom left that never go away so you can always access them. You have a Tree list on the left of the main screen and this changes depending on which page you are on.

When viewing your files for editing or creating you get some nice options in the ribbon at the top to help you with your sites. You are able to run it and it will be able to view your site like you normally would in a browser.

I find that the syntax highlighting is not all that great because of it highlight the ‘Razor’ syntax for ASP.NET. I have had a look at this new syntax and it looks like PHP mashed with JS. Although this does look good as it is smaller and easy to learn they sure made it look ugly in the highlighting. (It’s the green bits) I have not yet looked to see if I can change this but you probably can. To use this new syntax you have a new file extension CSHTMLI do not now why they chose that I would of gone for ASPR like ASPX was the new ASP so ASPR sounds good as the ‘R’ is for Razor. However, I have not yet tested but I shall so soon as to whether other browsers other than Internet Explorer can work well with this as they might not recognise it will and make you download it and not run it.

I do like this and I think this will be very good for ASP.NET work and not so much PHP. So for the time being I shall be sticking with Expression Web. However, I would like to see the Database feature in EW as it would be rather useful.

Useful Links:

• http://www.microsoft.com/web/webmatrix
• http://www.microsoft.com/web/webmatrix/features/

Microsoft .toolbox, a fun online learning environment, where you will learn basic design concepts and how to apply them, as well as the fundamentals of creating Silverlight applications using the Expression Studio tools. .toolbox features two learning options: Courses and Tutorials.

courses

In .courses, two core learning paths are presented to you: Design Scenarios and Design Principles. Both begin with teaching basic techniques and build skills and knowledge incrementally. In Design Scenarios, designers and developers learn to create dynamically-rich Silverlight applications using Expression Studio. You will learn to add code-free functionality to designs by following step-by-step tutorials that illustrate how to create interactive user experiences. In Design Principles, you will learn fundamental design concepts (e.g., choosing the right colours and the right fonts) along with tips and techniques in how to apply them to your creations.

Badges are earned and accumulated in both tracks upon successful completion of the evaluation found at the end of each level. The evaluation tests your knowledge by asking questions about each of the modules in that level. Follow either the Design Scenarios or Design Principles track to completion and achieve Star status.

Or, choose to complete the same level of each track (e.g., Design Scenarios 1 and Design Principles 1) and then take the combined design evaluation (e.g., Design 1) to be well on your way to achieving Design All-Star Status!

While course content is available on the site and also for download, evaluations will remain locked until you successfully complete the previous level’s evaluation. For example, the Design Scenarios Level 2 exam will become available only when you complete the Level 1 exam. Note that while you can access all the training content without creating a .toolbox profile, you will need to register in order to access the evaluations and track your progress through the program. Collect all of the badges to unlock the final evaluation for your chance to graduate as a Design All-Star!

tutorials

In .tutorials, through the different sessions listed, you are presented with practical techniques, tips, and tricks that teach you to create Silverlight applications using Silverlight. In a change of pace from the .toolbox courses, the tutorials are shorter content sessions that you will be able to complete in a relatively short amount of time. By following along, you will learn fairly quickly about the different features of Silverlight by simply drawing, resizing, dragging, and dropping elements onto the design surface of Expression Blend. While you won’t earn badges by completing the .toolbox tutorials (head over to .courses for that!), you will get a wide array of content that you can pick and choose from to enable you to start mastering Silverlight and Expression.

(Information from: http://www.microsoft.com/design/toolbox/about/)

So far I have enjoyed using .toolbox however, I have not yet manage to do a lot on it due to finishing college but now that I have lots of free time I hope to complete .toolbox. I have only done one test and manage to complete that with a high score. If you are a developer and want to learn more about design and Silverlight this is very good. If you are a designer this is also good as you can still learn a few things from it.

Here is my avatar from .toolbox I tried to make it look like me but my eyebrows appear to be above my hair.

In this post I am going to talk about SketchFlow, SketchFlow is a part of Blend but it is sort of its own program. I have some big mixed feelings about SketchFlow. I like the idea just not entirely on how they implemented it. Different people work differently and have different ideas because of this, no program will be just right for everyone. They have some brilliant features with this application but they fell down at one part for me.

Rapid prototyping and iteration of your ideas is now possible through SketchFlow. SketchFlow prototypes are fast, easy and inexpensive to build, making it possible to create, explore and compare multiple ideas before moving forward with a solution.

Before I talk about what I think they should of done differently I am going to talk about what I liked first. Microsoft are trying to create tools for collaboration between design and development and this is brilliant. As this means that people can work together more easily and produce better results. With SketchFlow I can see that this is going to help very much. Because this is integrated in with Blend it has the ability to send the designers design to the main application for the developer to use to create whatever they are creating.

So what are the main features of SketchFlow.

• Ability to create prototypes faster
• Easily experiment with different ideas faster
• Easier to view designs for clients
• Easier to get feedback from clients
• Ability to create a prototype as close as the real outcome

So what do they all mean? Basically you are now able to create prototypes faster than just with paper. You are also able to show of more ideas with animations and effects that you would not be able to do with paper. You can now show your designs of to your clients through the web and they are able to add feedback straight onto the designs and you are then able to put the feedback onto your prototype to make your updates. To me this means that you are now able to create a better design for your client to look at and get better feedback so that you can have less problems in the future.

These are some great features but I believe that they could of done so much more with this. When you use SketchFlow it gives you two types Silverlight or WPF. Now this is the poor decision that they could of made because you could use this program for more than just Silverlight and WPF. You could use it to create websites, programs and even presentations. The last one might not be used as much but could be good if you want to quickly create an interactive presentation then work on the details later. By allowing more types of projects to be designed with this you can offer more features and create a wider range of users.

When creating an application or website you need to go through a process.

This is my version of the process in a simple form. SketchFlow to me is part of the “Design” part of the process. This is what’s needed for collaboration tools for designers and developers. However, I believe that this application could also be part of the “brainstorm” part. What is the brainstorm part? This is where you come up with an idea and you look at what you could do. SketchFlow to me could even be more useful if it had a capability to allow you to brainstorm and say if you were creating a website you could create a mind map of what you want in your site. This mind map can then be sent to the main part of SketchFlow and this can then create your screens and your component screens based on your mind map. It could even have preset designs for certain pages that you could of defined in your mind map like contact pages.

I am a web developer and I could see this being used for more than just Silverlight. What features I would like to see for websites would be the mind map idea, more preset designs for website layouts that the user is able to click and use throughout their design. You could then have the different sections being interactive by you being able to select more preset designs like a menu which this can then create a screen component which you can then design it in more detail.

Having more features like this can mean that SketchFlow can be used by more users and for developers like me can be able to design more easily by being able to see the difference. This can also be good as the client could see what there site could look like easier and choose what they want.

After my little rant I have decided that I like SketchFlow but it could be so much more. So much that it could be it’s own program than could integrate with Blend for the Silverlight people. It could integrate with Design so that you can create the website to look professional. Once this is done you could have it send the design to Web in which it can create the code for you using the best techniques.

So what do you get in SketchFlow.

You get a lot in the interface and my favourite part is the SketchFlow Map. I like this as it helps give you a better visualisation of what you have created. It gives you two types of screens. These represent pages and dynamic pages. The pages or screens are what you add your design to. The component screens or dynamic pages are parts of the design that get used more than once like a menu. They could add more to this this with other objects like database all though you might not have a design on there as such you can however show it as part of the design to say these pages would connect to a database. A developer can then use this to work out what will be in the database. They could also use this with other types like maybe script pages (ones that do different tasks but might not have a front end design) and instead of drawing a design on to it the can design the code with pseudo code. This can then be used by the developer to design a better structure.

This is it for now but I still have more to talk about on this particular program so I am going to save that for another post so stay tuned.

After some research I found the information on the Expression Web SDK this is what you need to make your add-in. The information provided shows that it is an DOM that you manipulate. So its like using JavaScript to manipulate a web page but you do it to the application it self. Now this sounds like it will be pretty easy. But looking at the DOM for this it is not what you will be used to. Although you use it the same its very different.

This DOM doesn’t just let you manipulate the application like a web page but are also able to use some of the controls that the application has and they are mostly what you would find under the file menu item.

From this you can see the xweb is your starting point like window is on a web site. From here you have four properties that you can go into.

• Application
• Developer
• Document
• File

Each of these allows you to manipulate data and gather data. The xweb.application object contains several methods to initialize and change documents, as well as application utility methods. xweb.application does not have any parameters and does not return anything however, you can use public properties and methods with it. The xweb.developer is there to allow the developer to write to the debug window. So this is more for testing than showing to the user. However, this can be used to show the user any problems the add-in is having like an unsuccessful task.The xweb.developer and xweb.file both only have methods. This means that they are mainly used for change or creating things. xweb.file is used for creating and editing files and folders as well as getting certain information about them. The xweb.document is the one that is likely to be used the most. The reason for this is that it has the capability to edit the code window and get data from that window. This has two other classes that are part of it.

• htmlElement
• Selection

These two are use to alter the code in the code window. Some of the properties and methods you will notice are similar to the JavaScript for web browsers like getElementById.

By looking at the DOM it should be easy to work out what each one does. From this you should then be able to create an add-in and have the ability to affect the DOM. However, this may look easy it is going to take some working out.

There is a getting started section on the Expression website, this has the information in which I have used to create this post. I suggest viewing these pages.

• JavaScript programming reference
• Developing add-ins using JavaScript
• The add-in manifest

The JavaScript programming reference has all the properties and methods in there however, there is not a lot of information on them, its more of a guess at times of what they actually do and if they will be useful.

Expression Web 4 has a new feature add-ins. Now this looks like its going to be a great feature as it allows developers to create “shortcuts” that will make it easier for other people to add code or working applications to their web sites.

To create one yourself it looks really easy. All you need is a manifest file and the content files. First the manifest file, this is the easy one its your configuration so this should be easy. How do you make it? Well that’s another easy one its XML. So you can just add your configuration with ease. Now all you need to do is make you HTML, JavaScript and CSS files to go with it that will have the content of you add-in. So what types of add-ins can you make well according to the add-in builder (which is an add-in itself) you can make a panel or a dialog. Now a panel is what you see around the coding area and a dialog are the boxes that pop up.

Now I have had a go at making my own add-in. I wanted to create a panel that will contain loads of jQuery code blocks and possible do some more for PHP as the ones that come with the application are not so great. Bearing in mind that this is new I have not yet found a lot of information on creating an add-in. The only tutorial I can seem to find are ones about setting them up and they usually say that’s all you need. But no that isn’t.

Why I am saying this? Well when making my panel I used the add-in builder. This created my manifest file that had the configuration for my panel. Now all the configuration that it needed to make a panel was one line:

<panel src="panel.html" id="jquerypanel" title="jQuery" />

Now I was able to do “hello world”. But now what do I do? So I looked around trying to find more information but no such luck. I was able to create a list with the names of what I wanted and sort of style it. But what I wanted to know was how to make it so when you clicked it added the code to the page. So I decided to do it the hard way, get an add-in that did the same and look at the source. Well I couldn’t find one that worked in the same way. But I found one that did the same job but it was a dialog not a panel. I wanted a panel because it would integrate within the application where I would have to keep opening and closing the dialog.

So far I have found this experience to not being a good one. However, I shall not give up on this yet. I will continue to research and I shall create my add-in. When I have successfully created it I shall then write a in depth tutorial on how to create on and possibly do it on the one that I have created. I am also thinking that if this does start to take off I might try and create a little market place for the add-ins.

Well stay tuned for more on this.

This is just a short post to say I will try and get a GoogleMe account. If you don’t know what this is it will be the new social network site from Google that is to rival Facebook. This was said to be a rumour and in a post I saw on Webuser it said that it is real and I believe I may have some proof.

As you can a lot of domains have been bought which is the norm from Google.

A while a go I downloaded my free upgrade of Expression Studio 4. I have really enjoyed the programs that are in this suite. I have not yet had time to play with all the new programs but I have had a go with some of them. So far I have used Expression Web which you can see in my previous post. I have had a play with SketchFlow which I have a few issues with. I will be talking about this in my next post.

Expression Studio is collaborative tools for designers and developers. They are designed so that each person in a group can work differently and be able to take each others work and being able to work with it without problems. I believe that this is a very good as it can make the flow so much easier. I think that the more tools that work together to do different tasks is brilliant for developers and designers so that they can work closely together and collaborate better.

So what features does this suite offer.

Top 10 Features

1. Revolutionize the speed of prototyping

SketchFlow enables you quickly create an effective prototype to present ideas, user interface flows, screen layouts and application functionality to your clients.

2. Enable interactivity without writing code

Behaviours are powerful building blocks of interactivity that bring a project to life by adding control of transitions, interactivity and animation to your applications.

3. Accelerate the creation of effective UI with sample data

Accelerate the speed and flexibility with which you can create your application designs through the effective use of sample data. Generate design time data on the fly, import via XML, or create from C# objects, then seamlessly swap for a live data connection at any time.

4. Fast, flexible, seamless: a workflow that adapts to you and your team

Expression Blend, Visual Studio, Silverlight and .NET provide the most impactful and seamless workflow on the market today. Ideas are taken from concept to completion with speed and flexibility, challenging you to deliver innovative applications to your customers on time and within budget.

5. Professional tools save time, creating web sites that deliver results

IntelliSense and colour-coding for HTML, CSS, JavaScript, and PHP make your editing and debugging more productive. Generate elegant, modern CSS layouts with state-of-the-art, editable design surface with the ability to directly manipulate positioning, sizing, margins and padding.

6. Advanced visual diagnostics speed debugging

Debug web pages with Snapshot Preview, which shows rendered page changes while you code, and SuperPreview, which displays your page on multiple browsers on your development machine.

7. Rich standards-based web design with the essential technologies

Expression Web supports PHP, CSS, HTML/XHTML, XML, XSLT, JavaScript, ASP.NET, ASP.NET AJAX, Silverlight (video, animation, and Deep Zoom), Windows Media, Adobe Flash, & Adobe Photoshop files.

8. Prepare video for Silverlight

Encode a wide array of video file formats, stream live from webcams and camcorders, or screen capture your PC with Expression Encoder. Make simple edits to video files and enhance your media with overlays and advertising. Choose encoding settings, including IIS Smooth Streaming, choose from a range of player templates and publish rich media experiences with Microsoft Silverlight.

9. Team Foundation Server integration

Share your Expression Studio project files with your colleagues by using check in and check out functionality with Microsoft Team Foundation Server interoperability (sold separately).

10. Adobe Photoshop and Adobe Illustrator import — Utilize your traditional design assets

Powerful importers enable a smooth integration with the workflow visual designers are using today. Photoshop files can be imported layer by layer, regrouped and individual elements retain their original formats, layers, layer positions, editable text and vectors.

Expression Studio 4 Quick Start Guide

http://www.microsoft.com/expression/products/Studio_QuickStart.aspx

The download link on that page has both guides for Studio 3 and 4. They are very good for new users.

Microsoft Expression Web 4 (EW4) is the new version from Microsoft. EW4 is a text editor for web developers. This also allows you to do many other jobs other than just text editing. EW4 has three big new features that makes EW so much more than just an editor. These key features are an extensibility model, SEO checker and more improvements on the debugging in Super Preview.

The user interface has not really changed since the third version. In my opinion that was a good idea, as I believe that this was a very good design. Also since this version only came out less than a year since the last one, people probably would get annoyed. However, with one of the new features of EW4 the user interface could be changed or improved because of the new extensibility model.

This new extensibility model allows you to add functionality to the program. This is done through HTML and JavaScript, so there isn’t a new language that you need to learn to create these new add-ins. To create these add-ins you need to create a folder in the extensions folder in EW4 and they are basically built up out of HTML and JavaScript files. You can also add CSS to it as well. To get it to work you need to have a “manifest” file or XML file that has the settings in. This part can be error prone and tedious especially if you don’t know what to add. Luckily there is a tool to help and someone has create a tester for your add-ins.

EASILY CREATE AN ADD-IN FOR EXPRESSION WEB 4 WITH THE ADD-IN BUILDER

http://blogs.msdn.com/b/xweb/archive/2010/06/07/easily-create-an-add-in-for-expression-web-4-with-the-add-in-builder.aspx

SIMPLIFY YOUR ADD-IN DEVELOPMENT WITH THE EXTENSIBILITY TESTER ADD-IN

http://blogs.msdn.com/b/xweb/archive/2010/06/09/work-interactively-with-expression-web-4-extensibility-model-using-the-extensibility-tester-add-in.aspx

These two links will help you create and test your add-in.

I have not yet created an add-in yet but I think when I do it will be to add more code blocks in the PHP section of the program. As you can see from this picture there is not that much. The ones that are there I find very annoying and useless as they always add the PHP tags around them and most of the time I have them already because I will be adding this into existing code. They also seem not to have a lot in them like the IF statement just has “if”. Which to be honest is a bit useless if you are using this to save time as I think if would be quicker to type “if” than to go through the menus to get to “if”. So What I would do is create one that has a lot more options and that is a lot more useful.

The next function which I think is very good but could probably see a lot more improvements is the SEO checker or SEO reports. What this does is that it will scan through your code and find ways of improving it so that you can increase your rank in the search engines. It can be very useful as it will tell you if you have problems or ways to improve like meta tags etc.

It also adds a code in a “Help Topic” column, if you were to click it this will open up a new window with more information on why the checker has come up with this improvement. It gives you an explanation, some details and example of what you can do. The guys that made this went around to lots of different developers doing different surveys to find the best practices and then put them all together. What I think is that they should make this into a little eBook and distribute it  with the program so that you can read it and learn.

This guide has a lot in it and not just on SEO so it is a great chance to learn more about the program and some tips.

The last set of improvements that made a major impact was with the program Super Preview. Here is where I believe they have done the most work and they have done a great job. They have improved the debugging of the program so that you can improve your sites to work with multiple browsers. Another big feature that they added to this was the safari cloud. You can now sign up free (well I have been able to) and view your site as it would look in safari on the Mac. This is very good as it means if your like me you are now able to code your site to work on the Mac.

You can also now import PSD’s and you can compare your sites with this. I think this is very good if you are doing a PSD to HTML conversion and you want to make sure that they match.

They keep saying that this helps you to make your site work on multiple browsers through its debugging but the only browsers that you can use are the IE, Firefox and Mac Safari and the FF one will only work if you have it installed. What I want to be able to do is have Google Chrome, Opera and PC Safari on there. That way I can view my site IN multiple browsers.

Although there doesn’t seem to be many improvements I am sure that there are lots but I would say this does seem to be better than EW3 and with the new add-ins I’m sure soon a marketplace will open up with lots of them will become available.

The only major problem I had with this was that it kept failing to start when I first installed it. I soon found out that this was a problem with Kaspersky stopping illegal scripts working in Internet Explorer and this was causing the program to not work. After switching this setting of in my Kaspersky’s settings it soon worked. I have also heard people with Norton are experiencing a similar problem. Hopefully soon they will release a patch to fix this. If anyone is having that problem this thread on the expression forums has the solution.

http://social.expression.microsoft.com/Forums/en-US/web/thread/ca06e119-e835-495d-895f-c2cd87186514

Here is the link to the video of two of the guys explaining the features that I have talked about at the top and I have also included the link so that you can view on their site and their other videos. I will soon be reviewing the rest of the suite when I get a chance to use them so stay tuned.

http://www.microsoft.com/showcase/en/us/details/162ddb90-0847-4247-927f-827ce1d9b764

I have started to learn Silverlight. After searching the web for different things to do with Silverlight I came across a Silverlight Podcast. Sparkling Client is all about Silverlight and other RIA technologies. I have started to listen to their latest podcasts and I am enjoying them very much. It is hosted by Erik Mork and Monica Mork along with other guest hosts.I think you should definitely check it out if you are interested in Silverlight.

I was looking about the other day for a billing system that I can use on my computer to keep track of my clients etc. After not being able to find a good free program I ended up looking for one that I could install on my local server so that only I could access.

This search led me to NimbleBilling V0.2. This was almost perfect for what I wanted. However, it is not released yet but I have applied for beta testing. But part of the name of the video that was on YouTube was CodeIgniter and I have heard of this before. So I decided to have a proper look at this to see what it was all about.

When going on the site I remembered that I have been there before as I liked the site design. I realised that the reason for me not taking interest in this last time was that it was a framework and at the time I was not interested in learning a framework. But this time I decided to watch the video tutorials that were on the site as I was more interested in how this worked and how ASTER1SK (Geekhut) had created his billing system. So I watched the first of the two videos and was amazed at well it worked. Not only that the power that it had as well.

After a small think over this I decided that I would learn how to use this. One reason was that it uses OOP and I am wanting to learn more about OOP and thought this would be a good learning tool. Not only that, I also wanted to be able to learn something new that made it so that I could build large sites much quicker. Another reason was that I am hoping to follow NimbleBilling’s progress and if I become a beta tester I might be able to improve in the way it works or help find bugs.

So I have decided I will create a website using this framework. But instead of creating something new I thought I would change one of my other sites. The site I have in mind is my Games site NewbZ as I started to recreate this using OOP so I thought that this would be perfect for the job.

I have now downloaded the full CodeIgniter files and the user guide to start learning CodeIgniter and then I will start recreating NewbZ 4.0 with this framework. I will probably releasing a few posts every know and then on the progress and what I have found out whilst making the site.

One thing I will hopefully try and do is convert the user guide into a PDF document to make it more readable and so that I can view it on my phone if I can get it to work. When I have done this I will then be releasing it on here and will contact the CodeIgniter people to see if they want it and knowing me they will already have one.