This is Michael Breeden's Portfolio Web Site.
This is for demonstrating and testing various web technologies, particularly:
- C# MVC, Web API and ASP.Net.
- Responsive Web Site Methods:
- User Agent Identification
- Responsive CSS
- JQuery Mobile
Many pages will have an About
link to explain the development methods used for the page. This page is
long and complicated, because it is for documenting the entire project. Please be patient with anything missing.
I am trying to re-write the site in about a one week period.
Some features, particularly code samples, will be made really only for the desktop version. It seems
practical, because that is about the only place they would be useful. The CRUD generator is meant for
producing code that can be cut and pasted for practical use. I would not expect it to be used on a phone.
All major browsers have some provision for changing the User Agent string for testing web pages
in different devices.
Expanded below, the main lesson is do not convert a traditional Web Site to Mobile,
but we have all heard that before.
There are so many technologies for delivering content that works on a huge variety
Yahoo uses. Then there is always the Jquery.mobile if you really need a big hammer and reading about how
the BBC delivers content is boggling. OK. Lets get practical. Most companies I make web sites for
are not getting a million hits an hour and do not really even consider mobile phones a primary target.
Most of my code serves business. That greatly cuts down the uncertainty. My job is to give a customer
the best solution for their problem. That means a few things.
Maintainability - I think this gets skipped a lot. Particularly now that we are using such new
technology and have made this huge change to flat design as well as Agile practices, developers are
just banging things out. Then again, they always have. I know. I have spent much of my career fixing
programmer art and programmer junk. Unfortunately, site maintenance and extension is a huge part of the TCO
of a web site. Good practices can keep that cost down. It's not hard. Just follow good practices and plan
ahead a little.
Technology - Speaking of programmer art, the huge selection of targets and tools gives endless
possibility for how to develop something. KISS. You need to have a variety of tools to create solutions,
but from what I can see, Bootstrap and a bit of Responsive CSS can provide most of what is needed not
just for making a website mobile capable, but also for efficiently making any web site that will serve
for PC and tablet, the main targets of business. It is all about keeping a target in sight, planning
ahead a little and some practical paranoia about the fact that change happens.
The Customer - That's what it is about, what the Customer wants and needs. I can understand what
you want and offer suggestions to forward the conversation. Then I can provide a practical solution.
Isn't that what you need?
This site is largely for testing different technologies in a practical project. Like all technologies,
different methods have Pros and Cons. The point is to have the best tools
available and make the right decisions as early as possible in a project. As a business developer
needing to provide data content, I may need more complicated solutions, but simple is best... when
it will not cause problems later.
Pros: Simple and responds to any Viewport change. Use whenever possible.
Cons: Has limits, particularly when the problem is complicated.
Tests: The plan is to develop this with the Twitter Bootstrap Adaptive Design.
Pros: Simple and can respond to any Viewport change. Similar to Responsive CSS, but offers
far better granularity of control
Cons: Few, but some added complexity. Only use when CSS will not do it.
Tests: The plan is to test Adaptive Javasctipt with SimpleStateManagment.js in the Seas Section.
User Agent Identification
Pros: Allows the greatest adaptability for mobile. Involves the greatest complexity.
Use when needed.
Cons: Does not inherently manage Viewport and can be "fooled".
Tests: User Agent Identification is currently used on the Seas page.
The idea is to combine all these methods in the Cosmic Store Section to develop various methods for
solving business development problems.
To put it simple, MVC web development seems to be about the best thing to come along since we started
doing .Net web development. It seems far more efficient than Web Forms. It just goes faster. It is
direct to the page without anything in the way. Yes, I am a fan.
There will be a number of Layout pages, including an ASP.Net Master Page... maybe... somewhere...
_Layout.cshtml - Standard MVC4 Layout page from Visual Studio. Has its pluses and minuses.
Interestingly that though this works pretty good as far as a Responsive method, I find I am not using
it as expected. Bootstrap just does a better basic job.
_LayoutBoot.cshtml - Basic Bootstrap page with titlebar containing icon and Nav elements.
Used most places other than Cosmic Store.
default Bootstrap grid layout.
as well as the UserAgent String. It works good so far.
Jquery.js - Of course. It's the Standard and just great to use.
Jquery.ui.js - For a variety of UI methods, particularly the Menu and Dialog functions.
Jquery.DataTable.js - For a very functional data table
Jquery.custom.js - Required for a number of functions, including:
SlickGrid.js - For creating a very sophisticated data table.
JsTree.js - For creating a Collapsible Tree View. Nice for saving screen real estate.
Raphael.js - For some canvas graphic gauges that can be a nice touch on a Dashboard.
There are others used, but these are the main ones.
One sample code page includes the client and server side code for AJAX with JSON that uses a Command Pattern.
After a lot of consideration and examination of AJAX methods, I think it is one of the best.
The CSS is the easy part. Bootstrap seems to be such a great solution and if you need to customize its behavior,
you just use the same media queries. Now one modification of the base CSS I could see it potentially needing
for an Intranet project would be the limit of the width, but that is an easy modification.
The difference between JQuery and Bootstrap controls is interesting, though the Bootstrap ones are based on
the JQuery ones. The bootstrap ones have a more current appearence, but I like the look of the JQuery ones.
I haven't focused much on bundling and minification (yet), because the Visual Studio bundling facility
is so practical for managing that.
This is a portfolio site, but it is also a learning exercise. You learn different things when making a full project
rather than reading articles or testing technologies. There are lessons learned better that way, such as:
Don't try to convert a regular site to mobile. They all say that, but I was in a hurry, so I tried it and mostly it
was not a huge problem, but it also was mostly not worth it. Some parts certainly ported and some I ported for
amusement, like the Contacts page, but other than that, it is better to start fresh, even if you do extract code
from existing pages.
Note that web site styles change. This is pretty much current style, but just now that style is being driven by
devices. It is not what customers used to like and I think that in the future, they will want something closer
to what ythey used to like more in the past. That is in here.
What was I thinking using an Accordian for this instead of Tabs?
Also, do not try to make a significant web site in a couple days.