Tag: CSS

2 perspectives on animations

Posted on by ARSpaulding

On one hand, a friend of mine tells me, “Man, don’t even worry about the XAML – just design, use Blend, go crazy. Be artistic.” and on the other hand, I have a different friend who groans at the messy XAML which Blend puts out when using transition Visual state manager Double Spline Animations – he says it reminds him of the splatter which the archaic “MS Front Page” would spew out in HTML format, that there are cleaner ways of doing the same things with far fewer lines of XAML.

I’m SO there with the 2nd guy in relation to MS FrontPage and html. Me being the gal who would create something in photoshop, chop it up, and piece it back together – most of the time without looking up from the HTML, CSS – and all the Divs in between until most of everything was put together to verify that everything was behaving the way that I thought it should with my markup.

That being said – I kind of like the idea of, “Just be creative…” Man… I’d love that. To just… make it happen, and move on. I could get SO many other creations done – OR – spend so much more time on the details of the art! That’s not to say that I don’t already, but what if I had even more time? What greater level of polish could be gained with that additional time?

For all who visit who are in either/or/both worlds – do you have any opinion on this matter? What’s better? Cleaner XAML/Learning the alternative markup which blend 2 doesn’t have in its interface – or – using the VSM and the keyframe animation tools?

Is there a better side?

Anyone have an opinion? Should there be / is there a middle-ground?

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

Posted on by ARSpaulding

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.

Facing Blend… The site. The Experience. My brain.

Posted on by ARSpaulding

Facing Blend was a fun idea that came to my mind one day when learning how to use blend. It has many meanings in the name, so I’d like to paint a picture for you.

I’ve always loved design. In highschool, I took the first class to ever be part of our highschool which was dedicated to programming – HTML.

I know, I know – HTML is markup, not programming. To me, it was the closest that I was going to get with a highschool education back in the late 90s and I was one of the first to sign up for it. The class started out in such a way that gave all who signed up for the class the ability to get on the same track. We started, not in HTML coding, but in good research techniques using the most popular search engines on the net. We’re talking goto.com, altavista.com, webcrawler.com, yahoo.com, search.aol.com, oh, and yes, the baby – google.com. There were a few others, but those were the most popularly used. My favorite? Goto.com. *sigh*

Anyhow, from that class, I got my feet wet into design. I was interested in the art of it all, the complete picture. How you could take separate elements, put them together, and either make something incredible, or absolutely horrid. Most of the people in the class created sites that were overfilled with animations, difficult to navigate… the typical story for people who aren’t necessarily used to layouts and artistic use in usability. Myself, being an artist and having a logical perspective on most things, coupled those together and that is where I started with design.

Now, my stuff back then was absolutely aweful, but at least you could navigate easily, locate the information you were looking for, and it wasn’t over-inundated with animated gifs just for the sake of having animated gifs.

Somewhere along the lines I picked up a few other skills, CSS, basic XML, a little javascript, lots and lots and lots of photoshop work, and I need to mention photoshop again – as that program can do almost anything, short of cook my dinner (though its caused me to miss several meals. Blame the program, not the person. It’s easier that way for all of us.)

So that along with illustrations and a few other things is my “start” in design. I took a few side roads and worked at a photography studio, worked as a sales person and then a computer technician at the local CompUSA, then moved to being an IT Servicedesk Technician, but on the side, I’ve done projects for various organizations, individuals and companies throughout the years designing flyers, logos, paintings, and webpages.

A friend of mine mentioned while assisting him with illustrating the cover of his book, that I should take a look at Microsoft’s Expression Blend. I’m quite familiar with Photoshop, have dabbled with Corel Draw, and 3dsmax, but had never heard of Expression Blend, and quite frankly, was a little… ok, a lot, intimidated by it.

So after watching several videos, I accidentally downloaded a few of the tutorial videos for Expression Design – which acted a whole lot like Photoshop, but with a few things made easier and more specifically, the program seemed more like a tool that web designers would love. So instead of immediately diving into Expression Blend, I tinkered around with Expression Design for a while. In my opinion, I’d like to give a capitol A, Two thumbs up, and 5 gold stars to the people who created the program. It has quite a lot of functionality, and for myself, who specializes in UI that makes sense and web design, this program was easy to pick up and go with a very small learning curve. It’s one of those things that is quick and easy to learn how to use, but would take the right person to master.

I finally got up the courage to dabble with Expression Blend after a weekend with Design – to find that it wasn’t intimidating at all. Yay me for making a mountain out of a mole hill.

During my initial orientation to the program, I became thoroughly frustrated. Blend has a lot to offer and a lot of functionality. Since my specialty has always been driven towards the web, I felt that I should dedicate my time designing within Blend creating Silverlight apps. There are quite a few people who have been familiar and creating in full application based XAML, but not as many who specialize in the silverlight side with all of its limitations. I think I’ll just sit in the pretty Silverlight box and be happy with my walls and restrictions and see just how much I can fit into that box and how well I can use it.

Blend is in beta. Silverlight is… in beta. *sigh* Let’s just say, a lot of things aren’t as they might seem when trying to do what you wish to do. User controls for one thing, integrated, and custom controls – pain in the rear…

——-

So this is me. I enjoy design, completely geek over well-done interface – the things most people overlook when done right, and am starting this blog and site as a way for others to join me on my journey as I learn more about what I can do within Expression Blend, programing, design in general, and more.

What is Facing blend to me? It is me tackling a mountain, to discover a molehill. It is me sitting with tools and the endless possibilities. It is interfacing gone web… inter – facing… get it? It is Facing Blend.

– Ariel Leroux