Category Archives: Uncategorized

Responsive Umbraco Blog with Twitter Bootstrap

Umbraco 4.9 logo

So the semester assignments are finally turned in and the exam is still a way off so the time has finally come for me to look into Umbraco 4.9.
For the first little project to get me started, I’ve decided to try and put Twitter Bootstrap to work. Below you can find a relatively basic tutorial of how to make one of the starterkit blogs responsive.

The starterkit I am using is called SweetAs and is available during Umbraco 4.9 installation. We will start by stripping it down and then we will make it responsive with Bootstrap.

I am using Visual Studio to manipulate the files, but you might just as well do it from within your backoffice.


Setting Up Umbraco and Bootstrap Files

  1. Install Umbraco 4.9 with blog starterkit. Choose SweetAs.
  2. Download Bootstrap and add the files to proper folders in your Umbraco project (.js files to scripts/js, .css files to css folder)
  3. Remember to download new version of jquery (1.8 or newer) and substitute it for blog starterkit version (right now it’s 1.4 and it doesn’t work)
  4. Comment out references to all css files in masterpages/umbMaster.master and add reference to bootstrap.css and bootstrap-responsive.css, bootstrap.js. If you are sure you will use no styles from the existing css files, feel free to remove the links and the corresponding files. You can also remove reset.css – this is included in your bootstrap.css file anyway.
  5. In the same file replace the meta viewport tag with this tag:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    The existing one with “;” causes Chrome to throw errors.

  6. Update: In order to make sure that the navigation also works from within the posts, you need to change the links to scripts. Go to umbBlogpost.master file and change the cp_head content placeholder to look like this:
    <asp:content contentplaceholderid="cp_head" runat="server">
      <script type="text/javascript" src="../../../scripts/js/jquery.min.js"></script>
      <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js></script>
      <script type="text/javascript" src="../../../scripts/js/bootstrap.js"></script>
    </asp:content>
    

Changing the Umbraco Code

  1. In masterpages/umbMaster.master: add class=”container-fluid” on div id=”main” and div id=”footer”
  2. In masterpages/umbHomepage.master: add “row-fluid” to the div id=”content” class. Now that we have the row we need to divide it into spans.
     <div class="bodyText span7">
    

    and

    <div id="sidebar" class="umbModuleContainer span4 offset1">
    

    You need to do that because the homepage document type contains two columns and we want to make sure that the layout responds nicely to screen sizes.

    If you want to make sure that the bodyText is on the left, make sure that it comes first in the code.

    To learn more about the fluid layout and the grid , take a look at the Bootstrap page.

  3. In xslt/umbTopNavigation.xslt: change the code within template tags so that it looks like the following:
    <xsl:template match="/">
    
          <div class="navbar">
            <div class="navbar-inner">
              <div class="container-fluid">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar">.</span>
                <span class="icon-bar">.</span>
                <span class="icon-bar">.</span>
              </a>
                <div class="nav-collapse collapse">
                  <ul id="topNavigation" class="nav">
                    <li class="home">
                      <xsl:if test="$currentPage/@id = $currentPage/ancestor-or-self::* [@level=$level]/@id">
                        <xsl:attribute name="class">home current</xsl:attribute>
                      </xsl:if>
                      <a href="/">Home</a>
                    </li>
                    <xsl:for-each select="$currentPage/ancestor-or-self::* [@level=$level]/* [@isDoc and string(umbracoNaviHide) != '1']">
                      <li>
                        <xsl:if test="@id = $currentPage/@id">
                          <xsl:attribute name="class">current</xsl:attribute>
                        </xsl:if>
                        <a class="navigation" href="{umbraco.library:NiceUrl(@id)}">
                          <span>
                            <xsl:value-of select="@nodeName"/>
                          </span>
                        </a>
                      </li>
    
    
                    </xsl:for-each>
                  </ul>
                </div>
              </div>
            </div>
          </div>
    
        </xsl:template>
    

    It might look complicated but all you really do is adding the markup and classes to tell Bootstrap what to with the navigation when screen size changes.

    You can read more about what the different elements do on bootstrap’s page.

Final Thoughts

And done. Wasn’t so hard now, was it? Your blog is now responsive. Resize the screen to your heart’s content.

This, of course, is not the end of your work. Your blog is stripped bare so you will need to add styles and graphics. But all you need to do is dive into bootstrap.css and modify it as per usual. Enjoy and let me know how it went.

Personal Thoughts on Samsung Galaxy Note 10.1


samsung galaxy note 10.1

A couple of weeks ago I got a shiny new package with Samsung Galaxy Note 10.1 inside. And since then I’ve been using it pretty much non-stop. I will not bore you with all the technical specs of the tablet – you can find these all over the web. And if you want to see what it can do, you should pop by YouTube.com and enjoy all the great videos. What I want to tell you about, are just a few of my subjective opinions about this great toy.

Responsivness

So, first of all the tablet performs beautifully. It is perfectly responsive and deals with my obsessive-compulsive switching between all the social-media apps without a glitch. It has not froze once. Using the pen might need a moment or two to get used to. However no matter if it is the stylus or your fingers you favor, you will not be disappointed.

Notes

SNote Screenshot

Samsung Galaxy Note, as the name indicates, is designed to help you with your note-related needs. First of all, it comes with pre-installed note taking application, the SNote. In the app you can create notes containing text, images and drawings. I’ll be honest with you here: I think this tool still needs some polishing. The UI needs some extra work before it is truly great, especially when hand-writing to text option is selected the controls of some element are hidden. It just needs to be more intuitive.

Nevertheless, the app shows a great potential and I can see myself using it a lot in the future. I love doodling, sketching or noting down ideas and with SNote I can keep it all in one place and share it on social media or through email. I hope that Samsung will keep improving this piece of software.

And on that note (pun not intended), I think it is worth mentioning how well the handwriting-to-text feature works. You can write pretty carelessly and the text will be well interpreted. I distinctly remember my teachers not being able to do what this tablet does: you have to admit that this is pretty impressive.

Handwritting to text samsung galaxy note

Another important part of notes-related activities is sharing on social media. And here Samsung Galaxy Note 10.1 is doing beautifully. No matter if you’re using SNote, Evernote or any other app, taking quick photos, screen snapshots, or if you are producing other types of content with Photoshop Touch or VideoMaker (also pre-installed), producing and sharing content is made super easy.

Multiscreen

Another notable feature of Samsung Galaxy Note 10.1 is the ability to share the screen between two apps working simultaneously. For example SNote can share the screen with internet browser (see: picture below) or and the email client. This makes noting down things from the internet or creating emails from your notes so much easier.

Multiscreen on Samsung Galaxy Note 10.1

However, in my opinion, this functionality has one major flaw. And that is, that it has a pre-defined and rather short list of apps that can share the screen.

  1. SNote
  2. Internet browser
  3. Video Player
  4. Polaris Office (your basic Word, Excel and PowerPoint-like software)
  5. Gallery
  6. Email Client

So, if like me you would like to use Chrome, Gmail client or Evernote, you will be denied the benefits of multiscreen. I really hope that this is flaw will be soon dealt with. Especially, that it seems the Samsung Galaxy Note smartphone already has the capability to add third-party apps to its multiscreen feature.

Additionally, the tablet also supports floating apps. Which means that you can open the email client, music player, SNote, SPlanner (your calendar), task manager, calculator and alarm as a small floating window on top of any other application. Again a very useful feature if you want to quickly switch between apps without loosing them from view.

Conclusion

Samsung Galaxy Note 10.1 is a great tablet. It has not been a disappointment. It has improved my workflow and increased my productivity throughout the day. I use it to surf the web, read books, articles and papers. I use it as my replacement brain with the calendar, task lists and notes. And last but not least, I use it to share my content on social media. So you can see that a pretty large load was taken off of my laptop’s shoulders.

Oh and by the way, part of this post was also written on the tablet, using the pretty sweet WordPress app.

Commissioning software: the rant

Imagine the following dialog:

- I want a car, how much will it cost?

- What kind of car? What make? What model? What engine? Do you need it for driving in the city or out in the countryside? Diesel, petrol or gas? Is safety, efficiency or low price important? Etc.?

- Just a car. Come on, I need to know the price. Why won’t you tell me?

It sounds kind of far fetched and not really acceptable, doesn’t it? It is clear that the buyer’s behavior is unreasonable. So can someone explain to me why is it, that we consider this behavior strange but at the same time so many (reasonable, grown-up, high-powered) professionals insist on commissioning software that way?