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?

Prototyping with Axure

Prototyping with AxureRecently, I had a chance to try my hand at prototyping with Axure (read: ak shûr). Axure is a software tool used to create interactive HTML prototypes of your apps or websites.

I don’t think that I need to tell you how important and useful prototyping is. But to quickly sum it up, prototyping can be used to:

  • iron out UI, UX and IA design
  • reach an understanding between you and the client about what it is exactly that the software/website is supposed to do
  • exchange feedback between you and your client
  • user test at the early stages
  • estimate development costs
  • bring large teams together by providing a reference points

Of course all these benefits exist only if the prototype can be clear enough and can be built and updated quickly.  And here is where Axure comes in.

How Does Axure Work?

To start using Axure, download the software from their website and follow the installation instructions. You can start with 30 days trial version to familiarize yourself with the product.

Once installed, Axure presents an extended drag-and-drop interface.

Axure drag-and-drop interface

The left-side panel shows the website structure and the website elements/widgets that you can drag-and-drop to the right-side panel, the website’s or app’s body.

Once the widget is in the body panel you can manipulate it by rearranging, aligning, adding text. And because Axure allows you to create interactive prototypes, you can also add behaviors to elements. For example, you can create drop down lists, add list items and show or hide other elements depending on which list item is chosen. Buttons can link to other pages, menus can show sub-menus on hover etc. Very neat.

Once your website or application is ready you can “build it” which basically creates the html code behind the prototype. Now you can open the website in your browser or send the code to other people involved in the project.

Good Things About Prototyping with Axure

The 3 best things about prototyping with Axure are:

  1. Simple and intuitive interface makes it really easy to use the product
  2. You can build powerful and complex interfaces really fast
  3. If you ever need support, Axure offers comprehensive training on their website

Bad Things About Prototyping with Axure

The 3 worst things about working with Axure are…well it’s hard to find bad things really. I guess the interface is designed to speak best to web professionals and designers so if you are nether you might need some help from the training.

And the second drag for me is the price of the software. Most companies can easily afford it but if you are a freelancer you might be hard pressed to gain access to this great software.

Conclusion

Prototyping is an important part of building a digital product, be it a desktop application or a website. And prototyping with Axure is a fast, professional, and powerful way to build complex prototypes. Ergo, if you are a web professional or a programmer and you can afford it, Axure should be in your toolbox.

Beginning with ASP.NET MVC 3

ASP.NET MVC 3 logo

If you’re like me and constantly try to learn something new, you surely realized by now that the best way to learn a new, complicated topic is by explaining it to someone else.

For the last couple of weeks I’ve been reading up and trying my hand in C# and ASP.NET MVC. It’s going ok but there are still some things that feel a bit shaky in my mind. This is why I’m writing this post. This is a beginner’s understanding of  ASP.NET MVC.

What is ASP.NET MVC?

What is .NET Framework and ASP.NET?

In short .NET Framework is a collection of technologies designed to help developers build a variety of applications such as rich Windows applications, command line tools or web applications. ASP.NET is one part of .NET Framework used to build web applications. It is an engine that hosts said web applications and a high-level development platform designed as a server-side technology, which means that all code executes on the server.

What is MVC?

MVC is a design (aka. architecture) pattern which can be used to design applications with any programming language. It is based on a principle of separation of concerns. This means that the business logic of the application is separate from the input logic (or interaction) and the presentation logic (or the UI).

Before MVC was introduced as the leading design pattern for ASP.NET applications, it used Web Forms. While Web Forms are still supported MVC is the future of ASP.NET-based applications. The two main advantages of MVC over Web Forms are:

  1. Web Forms use View State and postbacks to create the effect of statefulness. While this make some coding faster (and easier to learn) it also means that every time a page is requested all input field states are send to the server and back. This can result in slow applications (even if they are rather small).
  2. Thanks to the way it is built, MVC gives the developer more control over the code (including the final html markup) and the application’s behavior.
If you want to read more on the topic of differences between the two patterns have a look at the official Microsoft ASP.NET website.

The abbreviation MVC stands for Model, View and Controller.

M is for Model

Model, or domain model, is the heart of the application. Domain is the real-world entities, operations and rules that exist in the industry, company or activity that the application will support. The domain model is the software representation of the domain.  In practice that means that the model part of the application contains domain objects (classes) and methods that store and operate on data.

C is for Controllers

Controllers have .cs extension and their job is to receive and handle incoming http requests, manipulate data in the model and choose the view in which this data should be rendered to the user.  Public methods in controllers are called action methods and these methods can be invoked from the browser through an URL. In MVC URLs do not correspond to physical files. Each action method has its own URL. This means that when user opens /, /Home, or /Home/Index, the Index() action method from HomeController.cs is called.

Controllers also return views by calling the View() method (return View(); – returns default view) which results in creating ViewResult object. This object instructs the application which view should be used to render the data.

V is for View

Views are files with the .cshtml extension. They are used to render html. Views are associated with action methods by naming conventions. Index action method will by default point to index view in the folder named after the controller file in which Index action method is placed.

CSS Frameworks: Foundation

CSS Frameworks: Foundation 3 by Zurb

A couple of weeks ago I wrote this post about css frameworks pros and cons. After reading Dan Cederholm’s critical opinion about ready-to-use frameworks, I decided to check them out myself. This is the first of several blog entries on the topic of CSS frameworks planned for the next while. It describes my experiences with Foundation from Zurb.

General Information

Foundation is a CSS framework developed by Zurb, a product design agency with long years of experience on the web. It is described as

the fastest way to prototype responsively, and to take that code and go right to production.

It features responsive 12-column grid that allows for creating websites for all sorts of devices. Columns don’t have fixed width and scale depending on the resolution and viewport size. The grid allows for nesting down so it can be used to create quite complex layouts.

Foundation also contains styles for buttons, navigations, tabs, forms and even sliders. This means that very little extra css code is ever needed to complete a website. The framework is relatively complex and should be sufficient for any type of website. For more detailed information on available features, check the documentation page.

You can use one of three versions of the framework:

  1. Default CSS – minified CSS file used to build on top of it
  2. Customized CSS – you can customize the CSS you are going to download to change some colors and remove the elements you know you are not going to use
  3. SCSS – you can download and edit Foundation using Sass and Compass

You will also be lead by the hand through the installation (or downloading) process.

My Experience with the Framework

I used Foundation to build a relatively small portfolio website for a creative writer and project manager.

The first impression one get when starting with Foundation is that it is very easy to learn. Great documentation offered by Zurb explains step-by-step how the grid is built, how to use it, and how are the different elements styled. That is definitely a perk, especially for those who reach out to a framework to build quick prototypes.

This impression is further helped by clean, understandable and well-commented CSS code.

The layout was not designed based on any particular grid (which is always a bit of a disadvantage) but Foundation’s flexibility dealt with that issue with little problem.

Due to the variety of styles for different elements that Foundation offers the CSS code is pretty long:

  • lines of CSS code to begin with (including comments and breaks , formated as by Zurb and coming from the customized version): 908
  • lines of css deleted: 377
  • lines of CSS added (including styling for Jquery plugins): 139

Advantages

  • Easy to use and learn
  • Great documentation
  • Exhaustive styling
  • Valid, good quality code
  • Responsive
  • Designed with both speed and user experience in mind

Disadvantages

  • Not useful for small pages due to too much overhead code
  • Lack of comments in the html part of the framework
  • You can build very complex layouts and very different style than the one offered by Foundation with Foundation. But then it is probably easier to start from scratch then with the framework.

Who is it for?

I think that Foundation is great for putting together quick prototypes. It is also a good tool to learn how to build responsive websites that scale gracefully depending on the device. It is also very useful for large but “boring” or template-happy designs like company sites or webshops.

I would however not recommend it for small websites because of the complexity and robustness of the code. Also more alternative websites with unconventional layouts will probably profit from being built from scratch rather then being based on Foundation.

Summary

In short, Foundation is a great and robust tool for building responsive, user-friendly websites. However, it is not for everybody. It is my first CSS framework I worked with so I cannot draw any comparisons but based on my own, personal experience I would probably give it 4 out of 5 stars.

HTML/CSS Frameworks: pro and cons

Recently I’ve been thinking about the way I build websites and I realized that I could get much more effective if I developed some sort of process or method. So, naturally, I turned to css frameworks. But what I found, was a whole lot of discussion and contracting views. It seems that with frameworks, like with…well pretty much everything else on the web, you either love it or hate it.

Proponents of frameworks point out that frameworks organize and speed up your coding. They save time and make you a better web professional. They are also designed to keep the website looking the same in all modern browsers and even deal with the pesky ones (we all know who I’m talking about).

The opposition on the other hand argues that these frameworks are bloated and you will always end up stripping half of the code anyway. Another argument mentions the use of un-semantic and presentational class names.

Being a do-it-yourself kind of girl, I am not super excited about using a ready-made code. After all we all consider Dreamweaver to be the evil incarnated so aren’t frameworks a step in the wrong direction? And can a one-size-framework really fit all? Isn’t it better to spend a little bit more time and treating every website individually?

Dan Cederholm in Handcrafted CSS argues for writing one’s own framework. He gives an example of a very simple, bare-bone code for index.html, master.css and reset.css. He writes that ready-made frameworks are great for learning and quick and dirty prototyping. They can teach you some good code skills and challenge your coding habits. However, for the reasons mentioned above, he does not recommend them for actual development.

It seems that frameworks work for some people and for some types of websites but not for everyone and not always. It all depends on the context and maybe it’s good to have both options to work with. To really have an informed opinion,  I will try (and write about) several of the most popular frameworks. The next post will be about 960 grid system, but I will also look at blueprint and probably one or two others. Unless, during the trial period, any of the frameworks manages to completely change my worldview, I hope to finish this series with a home-made, bare-bone framework. It will be based on Dan Cederholm’s suggestion and what I’ve learned from the other frameworks.

So stay tuned for more on frameworks in the coming weeks.

Umbraco: The King is Dead, Long Live v4

Codegarden 2012Codegarden 2012 (official Umbraco conference) is now over and it is time to sum things up. As many, if not all of you, have already heard this years conference was all about the big announcement to pull the plug on Umbraco v5. The announcement was delivered by Niels Hartvig, the founder of Umbraco, in his keynote address you can see online.

Umbraco v5 was released earlier this year and was trumpeted as the best thing that ever happened to humanity since sliced bread. But, as it now turns out, the many performance issues were partly caused by the complexity of the code. This complexity made it impossible for Umbraco core developers to quickly solve problems or to have the community help out (which was the practice in v4). And therefore the surely difficult decision was made to revert focus to v4. Resources will now be spent on improving v4 by rolling out new features, also these intended primarily for v5. Umbraco HQ is hoping to enlist the help of the community and work in short development cycles to show the progress.

The announcement was met with mixed reactions from the community.  Developers and web agencies who already invested time and money are deeply disappointed, hurt and angry about the decision. They stand to loose some business over this unfortunate turn of events. Others, and they seem to be more vocal, support the decision and are happy to see the resources brought back to working on v4, a mature and stable platform. 

Codegarden 2012

Now it seems that the future of Umbraco rides on how fast and how well can v4 be developed. Some people have certainly lost confidence in Umbraco and need to be persuaded

that they can trust the same team with the future of their businesses. However it doesn’t seem like the “hardcore” supporters and developers are ready to give up on the project just yet. The next couple of months will show if the brand can still stand for quality and be a respected as a business solution.

If you are interested to read more about the topic and people’s reaction, check out our.umbraco.com blog.

Coming Soon Pages

I am currently working on updating the look and feel of my portfolio. Because it happened so that in the last few weeks I was asked for my portfolio address and I am really not happy with the old design, I started thinking about using a “coming soon” page.

What makes a successful “coming soon” page? Let’s see:

  1. It needs to be branded/designed to look like the coming page
  2. It needs to explain who you are and what is this website going to be about
  3. It needs to provide either
    • a way to contact you (email/phone/skype)
    • or a way to find you elsewhere online (social networks/portfolio galleries etc.)
    • or an option to sign up for updates
    • or at least a counter showing when is the website going to be ready
And most of all, it needs to be memorable enough for the visitor to want to go back and check it out again.

Below 4 outstanding inspirations I found this week:

Moses Mehraban

Moses Mehraban's coming soon page

http://www.mosesmehraban.com/

Designatr

Designatr coming soon page

http://designatr.com/

Five Second Projects

Five second projects coming soon page

http://fivesecondprojects.com/

Birdbox

BirdBox coming soon page

http://birdboxx.com/

And at the end a bit of resources. A really good check-list-style article from Smashing Magazine on the topic of building “coming soon” pages.

Installing Umbraco 5.1

Umbraco 5.1 the friendly CMS

This is another post from the basic Umbraco series. For the tutorial on how to create your first Umbraco website check this category.

This post is even more basic and it describes how to get Umbraco 5.1 installed on your computer. It assumes that you already have Microsoft WebMatrix and Microsoft SQL Server running.

If you look into WebMatrix Site Gallery you will see that there are two Umbraco installations available: the first one is Umbraco 4 and the other is Umbraco 5.01. But if you want to install Umbraco 5.1 you need to begin with downloading it.

1. Go to this Codeplex page and choose Umbraco 5.1 CMS Web Application download link.

2. Unzip the downloaded folder to where your websites reside. Documents>My Web Sites is always a good place if you don’t have anything in mind. Call the website folder something descriptive. I called mine Umbraco 5.1 (since it is only going to be used for this post).

3. In WebMatrix choose Site from Folder and navigate to your Umbraco 5.1 folder. Click Select Folder

Web Matrix screenshot

4. Choose “Site”. On the new screen you will see two links. One is the URL to your website and one is the Path to your website on your disk. Click URL to start the installation process in your browser. In the future, once your website is installed, this is how you will be able to navigate to your website and the backoffice in your browser.

Webmatrix screenshot

5. Now your browser opens the first installation screen and all you need to do here is to click on the Install Umbraco 5.1 link:

Umbraco installation screen 1

6. This takes you to the second screen and this time you only need to click on the big “Let’s get started” button.

Umbraco 5.1 installation screen 2

7. The third screen is where you set up your database. If you have no experience doing that choose “I want to use SQL CE 4, a free, quick-and-simple embedded database”. These option will take care of everything for you. Then click “Install”.

Installing Umbraco 5.1 screen 3

8. The next screen is the happy screen that shows you you’re done installing and everything went fine. Click “Continue” to continue (sic!).

Umbraco 5.1 installation screen

9. On this screen you need to set up your umbraco user. Fill in the small form and make sure you remember the password or you won’t be able to log into your Umbraco back office.

Umbraco 5.1 installation screen

10. Next, you can choose to install a starter kit which is a basically a filled website. If you are new to Umbraco this might be a good way to learn your way around the back office. Click on the icon to install the kit or on the “skip” button to move on.

Umbraco 5.1 installation screen

11. And your done. Now you can move on to creating your website. Only thing that stands between you and your website is clicking the “Set up your new website” button and logging in to your  back office (using the login and password you set up in step 9).

Umbraco 5.1 installation screen