How to Write Content for Websites

Dave Mateer — Wed, 30 May 2012 13:37:42 GMT

Break things down into short paragraphs, with headers if necessary
Use bullet points
Highlight important words or phrases.

eg http://haacked.com/archive/2012/05/21/introducing-github-for-windows.aspx

WordPress

Dave Mateer — Mon, 21 May 2012 22:58:56 GMT

Goal is to install WordPress, play with designs, migrate an existing website onto it, and look at review functionality.

Installed on a free Amazon Micro instance (Windows Serve 2008R2) just as an easy testbed.

Used web platform installer on the server – worked.

https://support.eapps.com/index.php?/Knowledgebase/Article/View/445/48/user-guide---using-the-microsoft-web-platform-installer

seemed strange that had to put in the actual URL instead of letting IIS work everything out.

VidPub 3–Views with Razor

Dave Mateer — Fri, 23 Sep 2011 03:27:03 GMT

http://www.woothemes.com/ - ready mate templates

3 themes for USD70

Most themes are geared towards Wordpress, so best way to get the theme out of WordPress is to install WordPress on local box, as Wordpress.com is locked down quite hard especially around javascript.

Wordpress download using Web Platform Installer

MySQL 5.1 didn’t work.. just hung.

Downloaded and installed manually MySQL5.5

Then installed wordpress again from WebPlatformInstaller.

install a theme

Rob is using http://www.woothemes.com/2011/01/biznizz/

Blueprint.css

http://www.blueprintcss.org/ – css framework

copy and pasted html source from http://www.blueprintcss.org/tests/parts/sample.html

downloaded blueprint and put files into stylesheets as show above (all except site.css were from blueprint).

typekit

http://typekit.com/

simple, elegant

He is using Katarine Web .. regular and semi bold.

replacing all headings with a new font Katarine.

Ok, so they are different now.

Right hand side is antialiased IE9 rendering.. left is chrome14

Design – Logo

Most logos are simple elegant fonts

Robs likes Kontrapunkt

http://www.smashingmagazine.com/typography-guidelines-and-references/

Installing free Kontrapunkt font:

http://www.fontsquirrel.com/fonts/Kontrapunkt

Paint.NET

350*60 – Logo

920 * 240 – Splash Image

controlling my logo and splash image with css http://www.iconarchive.com/

<div id='logo'>

 <img src="/Public/images/VidPubLogo.png" />

 </div>

 <div id='splash'>

 <img src="/Public/images/splashImage.png" />

 </div>

CSS Helper

Made a file in App_Code called HTML.cshtml

@helper CSS(string cssFile){

 <link rel="stylesheet" href="/public/stylesheets/@cssFile" type="text/css" /> 

}

then in _Layout.cshtml

 @HTML.CSS("site.css")

Image Helper

@helper Image(string imageFile)
{

 <img src = "/public/images/@imageFile" />

}

then

 @HTML.Image("VidPubLogo.png")

ImageLink Helper, jQuery Helper

@helper ImageLink(string link, string imageFile)
{

 <a href="@link">

 @HTML.Image(imageFile)

 </a>

}

@helper jQuery(bool useGoogle = true){

 if (useGoogle)
{ 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>

 } else { 

 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js" type="text/javascript"></script>

 <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.js" type="text/javascript"></script>

 }

}

 @HTML.jQuery(true)

 <div id='logo'>

 @HTML.ImageLink("/", "VidPubLogo.png")

 </div>

Functions

For code only.. no markup.

@functions{

 public static string SiteRoot(bool includeAppPath = true){

 var context = HttpContext.Current;

 var Port = context.Request.ServerVariables["SERVER_PORT"];

 if (Port == null || Port == "80" || Port == "443")

 Port = "";

 else

 Port = ":" + Port;

 var Protocol = context.Request.ServerVariables["SERVER_PORT_SECURE"];

 if (Protocol == null || Protocol == "0")

 Protocol = "http://";

 else

 Protocol = "https://";

 var appPath = "";

 if (includeAppPath)
{

 appPath = context.Request.ApplicationPath;

 if (appPath == "/")

 appPath = "";

 }

 var sOut = Protocol + context.Request.ServerVariables["SERVER_NAME"] + Port + appPath;

 return sOut; 

 }

}

this gives us an absolute URL function we can use.

 <div id='logo'>

 @HTML.ImageLink(URL.SiteRoot(), "VidPubLogo.png")

 </div>

<div id='logo'>

<a href="http://localhost:50363">

<img src = "/public/images/VidPubLogo.png" />

</a>

Dynamic Route – Clean and Expressive Linking

From rails world:

So a path gives:

<h2>Here's
What You Can Do...</h2>

 <p>

 <h1>@router.about_path()</h1>

 @Html.ActionLink("click
here for more info", "about", "home");

 </p>

and url gives:

 <h2>Here's
What You Can Do...</h2>

 <p>

 <h1>@router.about_url()</h1>

 @Html.ActionLink("click
here for more info", "about", "home");

 </p>

this is using the TryInvokeMember override of dynamics.. ie if a method can’t be found it runs this override.

 public class DynamicRoute : DynamicObject {

 UrlHelper _helper;

 public DynamicRoute(UrlHelper helper)
{

 _helper = helper;

 }

 // C# equivalent of
methodmissing

 public override bool TryInvokeMember(InvokeMemberBinder binder, object[]
args, out object result)
{

 // read in the requested
method

 var methodName = binder.Name;

 //split it for name
of route and path/url

 var stems = methodName.Split('_');

 //lookup up the route
by name

 var routeName = stems[0];

 var url = _helper.RouteUrl(routeName);

 //url or path?

 if (stems.Last() == "url")
{

 url = Root(false) + url;

 }

 //craft up the URL

 result = url;

 return true;

 }

Pass in parameters:

 <h1>@router.about_url(new {
id="steve"})</h1>

gives:

and refactored a bit more so no parenthesis needed:

 <h1>@router.about_url</h1>

gives:

<h1>@router.about_path</h1>

gives

 <h1>@router.about_path(1)</h1>

Final code:

 public override bool TryInvokeMember(InvokeMemberBinder binder, object[]
args, out object result)
{

 var url = GetUrl(binder.Name,
args);

 //craft up the URL

 result = url;

 return true;

 }

 private string GetUrl(string methodName, object[]
args) {

 //split it for name
of route and path/url

 var stems = methodName.Split('_');

 //lookup up the route
by name

 var routeName = stems[0];

 var url = "";

 //if there are any
parameters eg /about/2

 if (args.Length > 0)

 //pass in the first
argument

 if (args[0].GetType() == typeof(string) || args[0].GetType().IsPrimitive)
{

 url = _helper.RouteUrl(routeName, new {
id = args[0]
});

 }

 else {

 url = _helper.RouteUrl(routeName,
args[0]);

 }

 else

 url = _helper.RouteUrl(routeName);

 //url or path?

 if (stems.Last() == "url")
{

 url = Root(false) + url;

 }

 return url;

 }

 public string Root(bool includeAppPath = true)
{

 var context = HttpContext.Current;

 var Port = context.Request.ServerVariables["SERVER_PORT"];

 if (Port == null || Port == "80" || Port == "443")

 Port = "";

 else

 Port = ":" + Port;

 var Protocol = context.Request.ServerVariables["SERVER_PORT_SECURE"];

 if (Protocol == null || Protocol == "0")

 Protocol = "http://";

 else

 Protocol = "https://";

 var appPath = "";

 if (includeAppPath)
{

 appPath = context.Request.ApplicationPath;

 if (appPath == "/")

 appPath = "";

 }

 var sOut = Protocol + context.Request.ServerVariables["SERVER_NAME"] + Port + appPath;

 return sOut;

 }

 }

Custom View Page

It would be nice to have this on every page without having to put a link in the header

@{

 Page.Title = "My
Home Page: VidPub";

 dynamic router = new VidPub.Web.Infrastructure.DynamicRoute(Url);

}

but if we put a link in the _ViewStart as:

@{

 Layout = "~/Views/Shared/_Layout.cshtml";

 Page.Title = "Welcome
to VidPub";

 Page.Router = new VidPub.Web.Infrastructure.DynamicRoute(Url);

}

then would have to call:

<h1>@Page.Router.about_path</h1>

hmmm.. we can, by overriding the pages base class

Web.config in views directory.

 <!--<pages
pageBaseType="System.Web.Mvc.WebViewPage">-->


 <pages pageBaseType="VidPub.Web.Infrastructure.VidPubViewPage">

and here is our overridden base:

 public class VidPubViewPage<TModel> : WebViewPage<TModel> {

 public dynamic Routes
{ get; set;
}

 public override void InitHelpers()
{

 //keep all the exisitng
helpers in MBC

 base.InitHelpers(); 

 //add our own helper

 Routes = new DynamicRoute(Url);

 }

 public override void Execute()
{

 base.ExecutePageHierarchy();

 }

 }

ProgramGood.Net - Wordpress