Search

Categories

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Send mail to the author(s) E-mail

# Wednesday, 30 May 2012
# Monday, 21 May 2012

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

image

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

| | # 
# Friday, 23 September 2011
( Design | VidPub | Wordpress )

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

image

MySQL 5.1 didn’t work.. just hung.

Downloaded and installed manually MySQL5.5

image

Then installed wordpress again from WebPlatformInstaller.

image

install a theme

image

 

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

Blueprint.css

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

image

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.

image

replacing all headings with a new font Katarine.

image

Ok, so they are different now.

image

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

Design – Logo

Most logos are simple elegant fonts

image

Robs likes Kontrapunkt

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

Installing free Kontrapunkt font:

image

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

Paint.NET

350*60 – Logo

920 * 240 – Splash Image

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>

image

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>

image

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>

image

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:

image

and refactored a bit more so no parenthesis needed:

        <h1>@router.about_url</h1>

gives:

image

or

<h1>@router.about_path</h1>

gives

image

or

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

image

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();
        }
    }
| | #