HTML on coffee, monster energy drink, with lots of vegetables

Posted on

What is the title talking about?

XAML

There are many impressions of the experience from being a XHTML CSS Raster-based web designer to moving onward and upward to more User Experience technologies that I’ve skipped along the way.  Now that I have a blogging system in place that allows for more easy publication, I’m going to try to fill in the blanks.

So my first impression of XAML once I really got my feet wet was a strong familiarity.  XAML is like someone took HTML and fed it lots and lots of vegetables, gave it training on the track, music lessons, and then packed it full of coffee and monster energy drinks.  By the end of the day, you have the result of something more akin to Hal Milton, the hyperactive thoroughly intense, highly sarcastic and witty guy who works at the Sony Online Entertainment office leading the team creating the new PS3/PC game, The Agency.

Yes, I’m comparing XAML to Hal.

For those who have no clue what I’m talking about, but do know coding and markup enough to be reading this blog – I want you to take HTML, couple the base of HTML with some AJAX and wrap in lovely lovely CSS, and move back to the world of pretty formating, and you have XAML – sort of.  You could also say that its like flash only way slicker and easier.

For the HTML CSS markup designer, your wrist was slapped for using capitol letters.  Your elbow was flicked REALLY hard for using the enter key too often for spacing, and the back of your head popped for tabbing each child element out to make it easier to see… all in the name of quicker load times and most likely a UNIX based server.

XAML is going to – at first – appear to be fingernails on a chalkboard after these web standards have been beaten into you.

CamelCase naming (capitolizations, no spaces, no underscores unless creating an alt command, no numbers… what?!) schemes, tabbing to indicate parent and children (if you don’t, it won’t even run – and I mean run as in the application form of “run”) – aka ORGANIZATION and the app.xaml being your friend for those who are comfortable with CSS.

Moving backwards so we can move forward – you start out with Page.xaml as your root and App.xaml for sharable elements.  They may not be shared w/ anything else, but for organizational purposes, the same way that you would have your html set up as “index.html” and “style.css” – XAML brings you “Page.xaml” and “App.xaml”.  So you put your structures in place within your Page.xaml and tell the structure to look at some name which has the visual atributes defined within App.xaml.

The awesome part about xaml is that you are able to do a whole heck of a lot more.  We’re not working with raster-based (bitmap/pixel based) images (unless you want to).  We’re working with vector based shapes.  This gives a whole lot more flexibility in the visual attributes, what they do, how opaque they are, gradient scales, their x-y coordinate placing, and also allows one to do key frame animations.

Much like Flash, the versatility of silverlight utilizing XAML is only hindered by your abilities to be creative.

Puts me in a warm happy place.

Facingblend.com – splash screen

Posted on

The other day, I was going here to the site to post another blog article, but was completely derailed from my entire train of thought when I accidentally mistyped the URL to my blog and instead went to www.facingblend.com

The surprise that I saw there was… *cough* surprising.

A few months ago, there was someone, a local glass blower/artist, who was interested in having a revamp done for his website.

He’d previously been working with someone who appeared to have not decided whether he or she wanted to be an asp.net developer or an integrator… the guy/gal definitely was not anywhere close to a designer and towards the end of the project flaked out without finishing and things were broken as well. It was very very broken and very… 90s. It appeared to be like something that I had done back in 1998 when I was just learning HTML and using the online generated button makers…

But it was apparent that the site was built using a lot of raster-based images done as sort of highlights of the glass artist’s work.

In any event, he’d posted on Craigslist as a trade – he’d create a few glass pieces, and the person who he worked with would design and publish his site. Sounded like a pretty good setup to me, and I really love the colors and things that can be done with glass – it looks incredible whether its a photograph or graphically done.

So I created a few mockups and sent him the links. He didn’t respond, so I’m guessing he went with someone else – however what I didn’t realize was that godaddy decided that it was going to use the image and quick code index.html to use that image as the background.

I wonder how long THAT’S been there.

So instead of posting a blog about faking shadows (will come later) – I ended up working on a quick splash screen for people to view if they ever were interested in viewing facingblend.com.

Took about an hour to do and 35 min to code the html/css. So check it out if you’re curious. I like it – came out pretty nice and overall, its a whole lot better than the random rough mockup that I’d designed a few months ago.

and for the record – I am well aware of how tacky “under construction” or “coming soon” pages happen to be, but weighing in the pros and cons, I think having a splash screen is far better than having some potential customer’s mockup used to represent my .com

OMG gimme more screen!

Posted on

Just a short mention of 1 thing that drives me absolutely nuts.

Yes – vector based UI is pretty cool, but dangit!  I want the dang thing to get smaller when I change my resolution so I can have more screen space!

Solution?  Dual monitors.  Menus on the right, screen on the left. 

Problem?  Why the heck must there be an absolute paramount NEED for dual monitors just to have some dang space.  I want all of my menus for quick use AND enough space to work with.

Summary: I want to have my pie and eat it too.

*Click* Rant off.

Cleanliness

Posted on

The organization of everything in blend seems to me to be just as important as the visual aspects of the design.  Labeling, grouping, styling – all of it needs organization.

Some of my first projects done in blend had the obvious mark of “this is what my brain thought of next”.  It took a whole lot of work at the end for me to organize and sort everything to minimal chaos.

With every markup that I’ve done in the past, organization was my my pet peeve.  It has to make sense, load in the correct order, and be easy to jump into later if I need to make edits.  Often, when I have a final product – it is at that moment, a final product.   This means that if I am doing edits later, its months and months later and I don’t have the time or desire to have to familiarize myself with insane coding.  No – it must be organized.  The CSS needs to be in order of type and use, various aspects need to be labelled properly and related classes need to be grouped together.

This ties into Blend work, but Blend is so much more similar to Photoshop, that its insanely easy to just do a million things without a thought to organization – that is – untill you look at the XAML and hand update content that is willy-nilly all over the place.

No no no – organization is the key here as well.  I want the time to design more, so if I’m doing finite updates, they need to be easy to locate.  Sometimes I have no desire to use the split mode in blend, so looking straight at the xaml is often the key to my success, and for that success to even be present – organization is absolutely necessary.

Most common websites are built with some sort of banner, a menu, and content.  Sometimes there are 2 menus, sometimes multiple sections of content, but too frequently you see the 3-part sites and they tend to be the easiest to navigate.

For a site like that, its incredibly easy to build the initial group structure of “Banner” “Content” and “Menu”.

 

Above is a screenshot of Blend 2.5 and a very simple layout with absolutely no organization.  Because there are so few elements, it doesn’t appear too messy – that’s about how you want it.  This is where organization starts.  All of the rectangles that I have are bases for content implementation.  To get it organized at this level, its time to use panels.  The 2 that I’ve read the most on for this are Grid and Canvas.  The “why” is that the content which is placed within either of these can be configured to act as a “child” of either and the dimensions will try to encorporate their properties (i.e. the width, height, layout, margins, etc.) based off of the parent.  The differences between the two seem a little fuzzy at this point, but I’m a complete newbie w/ this software, so I’ll likely get further understanding of the strength and weaknesses of either type and when to use one over the other. 

The msdn descriptive differences are described with the Grid being a strong parent model for items which will be implemented in rows and grids, allowing the flexibility of the star (*) property to allow the child grid to expand to either the width or the height of the remaining space within the grid.  If you gave an element that property without it being contained into a panel type, then you’d end up having it stretch to as much room left in the browser.  This could be a good or a bad thing – just depends on what you’re dealing with.  Personally, I find the ability to have structure to be far more useful.

The Canvas allows for children to have their coordinates plotted based off of the canvas instead of the LayoutRoot.  This might mean absolutely nothing until you need everything pieced together by a software engineer, at that point, you’re going to experience a possible ear-bleed.  They might be really nice in their asking of content to be aligned w/ 0 when creating seperated elements, but that’s just them being nice after they’ve mentally kicked you really hard. 

I put each of my elements into a canvas base.  I’ll likely have further children canvases and grids within these parent panels but  when more specific items get added, but this works for now.  After putting each rectangle into its own canvas, I renamed everything so that it is easy to identify what element is what.

 

The left of the screen shows my rectangles now being contained within canvases.  To rename, you can either right-click and select rename, or click on the user control item and on the right, select the Properties tab.  The first field there is for the name – replace it with something that is more descriptive.  I stuck with the initial naming mentioned earlier.

No idea why, but I’m addicted to testing everything that I do along the way.  It is nice to view in a browser setting.  To do this, either hit F5, or go to Project –> Test SolutionThis displays my base site.  It doesn’t do anything – but it is perty and well… very easy to accomplish.  If your margins are larger than the base structure, you’ll have to go into the Expression Blend solution directory, locate the HTML file and modify its javascript dimensions, or it will cut everything into the standard dimension which is default to Expression Blend Solutions and leave anything to the left and bottom hidden and unviewable.  Once you’ve updated the dimensions for visibility, run the test solution again and then you’ll see the final work.