Twitter has experienced explosive growth. With the release of iOS 5, signups from an iPhone have tripled. This would be due to the fact that iOS 5 has Twitter deeply integrated into its core functionality. Twitter CEO Dick Costolo gave some stats about Twitter, including that it now has over 100 million users that tweet everyday. During an interview at the Web 2.0 Summit in San Francisco, Dick Costolo gave the following stats.

• - January 2011: 100 million tweets per day
• - June 2011: 200 million tweets per day
• - 50% of active users login every day
• - Release of iOS 5 = 3x as many signups

Now that Twitter and the iPhone have a direct relationship, the amount of users will steadily continue to grow. How active are you on Twitter?

Tweet

http://www.youtube.com/watch?v=HgrdRzm9FJw

Hi, this is Nathan Biles with MPress Design. I wanted to take another moment to talk about web development. In our last video we talked about web design, and how we use minimal design, and how it’s important for your users experience, to focus on minimal and to make sure that the clients focus on your site, or on your products. Well in this video, we’ll talk about web development. See, you’ve got a design, you’ve got development. Development is what puts all the functionality together. We like to build Content Management Systems to allow our clients to edit their own content, change their own functionality do the features they need to do. For our advanced applications or for advanced development for some of our clients, we like to use a product called CodeIgniter. CodeIgniter is a phenomenal, open source framework that is built by an enterprise company. CodeIgniter is an MVC framework, that stands for Model-View-Controller. Model-View-Controller is a way of organizing the code that’s 1) better for the development of the project that you would separate three important aspects of the code of the development, and a lot of times you have three different developers working on each one or you could have one developer do them all but the fact of the matter is that it’s well organized and well separated and that helps for going back and editing or even creating it the first time separate those logics in your head. The Model controls all the data and all the data management. Your connection with your database your saving, your deleting, your exporting, a lot of the stuff that you do with your data. The View controls all the style of the design, all the UI front-end functionality kinda stuff. Then the Controller, which is, pretty much one of the most important things, which handles all the logic of the communication, with the Model, to the View. Creating the logic to display the different pages, getting the right information, yadda yadda, connecting with the model, and so on. CodeIgniter is a very light-weight framework, very very light-weight it doesn’t have a lot of back-end bandwidth, so what that means to you as a customer, is that we build applications on this framework so that 1) the site can scale, you don’t have to worry about things failing or needing to be rebuilt, or crashing, or whatnot. Theres a lot that you can do on the server side to protect it, but most importantly the code is going to be very solid, and you would not need to extend it out to do that. Also we can come back and edit the code, and change things functionality, we can create a new theme for it, theres a lot of stuff that we can do with your code by using CodeIgniter, you can look up CodeIgniter, its a very phenomenal open source framework, that’s built by a great enterprise company, to put out great stuff. So anyways, that’s our web development, primarily we do our marketing sites using WordPress very popular WordPress, but I wanted to mention, with our web development and application development, we use CodeIgniter, which is a phenomenal framework. So that’s that, I just wanted to take the time to explain a little bit about our web development and that we use CodeIgniter, a very powerful framework. Just so that you know CodeIgniter is just a packaging of PHP code, in the LAMP stack environment. You don’t have to worry about the technicalities, or whether one company is using CodeIgniter or if another company is using another framework. The most important thing to understand is that we use an enterprise framework, and we do use a framework that will allow your site to scale, and grow with your company. Thank you again, this is Nathan Biles with MPress Design, and you have a great and wonderful day.

Tweet

http://www.youtube.com/watch?v=0lSbvphmhhU

This is Nathan Biles with mpress design. In this video I talk about how by just having a good looking design does not bring you business. In fact some times your design can actually distract your visitors on why they are there. Nathan mentions in the video that at mpress we design our clients sites with minimal design strategies. This means we do minimal design on your site and in stead place emphasis and focus on your services, products, and your business. Check out the video above and let us know what you think. We are looking forward to hearing some responses and hopefully we can help you on your next design!

“Hi my name is Nathan Biles with MPress Design. I just wanted to take a couple minutes here to explain what minimal web design is and what it means. You know, there’s a lot of websites out there and a lot of them are competing with your business. So the most important thing for you, is to convert the traffic, the people who are on the web, to be your next customers. That’s more important than anything about being on the web. It’s not just about having a cool design for you to share with your friends and family, but the goal is to get clients out there to get people to like you. So, one of the important thing is to make sure that your design converts. So, here at MPress Design, we design our designs with minimal designs that attracts your customer to your business, and will convert your business. See, there’s are a lot of websites out there that will over design, too much graphics, too much flashy mis going on with your website, drawing attention to the design in itself. Which is important if that’s what you do. If you’re trying to sell flashy graphics or something like that, you happen to have jewelry, sometimes that could be the case. But what’s more important than anything, is for us to blow up and explain what your services are, or what your products are that you’re trying to sell.  So we take the minimal approach to doing your web design, and when we do that, what we do is we pick the colors, we pick the layout that is important to bring out what you really do and what really brings out your business. So that’s what minimal design is, so when you’re going to get a new web design, just remember don’t over design what looks good, but just remember and think, what is your clients looking for and what draws the attention in that design, is it your products, is it you, or is it the fact that the design looks good. Again, this is Nathan Biles with MPress Design. I hope you enjoyed this video, and I hope that next time when you’re looking to do a redesign or web design, you think to yourself, you picture yourself in your clients position and think “is this site distracting or is it minimal design that allows me to know what the services are provided, and attracts me to do services with you”. Thanks again, and have a great and wonderful day.”

Tweet

#5 iMessage

#4 PC-Free

#3 iCloud

#2 Notification Center

#1 Siri

Tweet

…

…

…

…

You can find the full article on this here: http://on.mash.to/nUyOMv

Tweet

Here is just a screen shot of our design before and after. Let us know what you think and we will take ALL suggestions in consideration.

BEFORE:

AFTER:

Tweet

What is JSON?

JSON is a data interchange format which is based on a safe subset of JavaScript. JSON can be used for very simple data or very complex data communicating. JSON stands for JavaScript Object Notation. A JSON text can easily be converted into a JavaScript value, which makes it a very convenient format for use with JavaScript. There is support for use of JSON with many other languages, including C#, Java, Perl, PHP, Python, and Ruby. More information on JSON can be found at www.JSON.org.

The JSONRequest:

Ok, so this can be very simple or very complicated. I will do my very best to make sure it is simple. If you have any questions you can submit them below or contact us for help on your project. Lets start out by saying we are going to completely cover the JSONRequest function in javascript.

JSONRequest.post

JSONRequest.post does an HTTP POST of a the serialization of a JavaScript object or array, gets the response, and parses the response into a JavaScript value. If the parse is successful, it returns the value to the requesting script. In making the request, no HTTP authentication or cookies are sent. Any cookies returned by the server cause the request to fail. The JSONRequest service can only be used to send and receive JSON-encoded values. JSONRequest cannot be used to retrieve other text formats.

JSONRequest.post takes four parameters:

JSONRequest.post returns a serial number if the request parameters are acceptable. It throws a JSONRequestError exception if the request is rejected. The request will be rejected if

• The url string is not a properly formatted URL.
• The send value cannot be serialized. It will be rejected if it is not an object or array or if it is cyclical. (Functions and host objects will not be included in the serialization.)
• The done value is not a function.
• The timeout value is not a positive integer.

The request number may be used by a script to match requests with responses. It is provided as a convenience for programmers who are not comfortable with the use of function values and closures, and for request cancellation.

Example:

requestNumber = JSONRequest.post(
    "https://json.mpressdesign.com/request", 
    {
        user: "testing@mpressdesign.com",
        t: "vlIj",
        zip: 94089, 
        forecast: 7
    }, 
    function (requestNumber, value, exception) {
        if (value) {
            processResponse(value);
        } else {
            processError(exception);
        }
    }
);

After JSONRequest.post has verified the parameters, it will queue the request and return the request number. The done function value will be invoked later when the outcome of the request is known.

No cookies or implicit authentication information is sent with the POST operation. Any authentication information must be placed in the send data or in the url. The JSON text that was serialized from thesend data is used as the body of the request. The character encoding is UTF-8. An implementation may choose to gzip the JSON text.

The request may use either http or https. This choice is independent of the security of the page.

POST /request HTTP/1.1
Accept: application/jsonrequest
Content-Encoding: identity
Content-Length: 72
Content-Type: application/jsonrequest
Host: json.mpressdesign.com

{"user":"test@mpressdesign.com","forecast":7,"t":"vlIj","zip":94089}

After the server has acknowledged the request, it has until the time limit expires to produce a response. If the time limit is exceeded, or if the connection is closed before a complete response is sent, then the request fails. If the HTTP status code is not 200 OK, then the request fails.

HTTP/1.1 200 OK
Content-Type: application/jsonrequest
Content-Length: xxxx

The body of the response is a JSON text, encoded in UTF-8. If the text contains any JSON encoding errors, then the request fails.

If the request succeeds, then the done function is called with the request number and the value obtained from the parsing of the JSON text. If the request fails, then the done function is called with the request number and an exception object, indicating the communication failure. If a server wishes to communicate an application-level error, then it should return it as a JSON text with an HTTP status code of 200 OK.

The browser must be able to keep open two requests per host per page. Excess requests will be queued. The browser should attempt to keep alive connections. These connections are counted separately from the connections that the browser uses to fetch HTML and related resources.

JSONRequest.get

JSONRequest.get does an HTTP GET request, gets the response, and parses the response into a JavaScript value. If the parse is successful, it returns the value to the requesting script. In making the request, no HTTP authentication or cookies are sent. Any cookies returned by the server cause the request to fail. The JSONRequest.get service can only be used to obtain JSON-encoded values.JSONRequest.get cannot be used to retrieve other text formats.

JSONRequest.get takes three parameters:

JSONRequest.get returns a serial number if the request parameters are acceptable. It throws a JSONRequestError exception if the request is rejected. The request will be rejected if

• The url string is not a properly formatted URL.
• The done value is not a function.

The request number can be used by a script to match requests with responses.

Example:

requestNumber = JSONRequest.get(
    "https://json.mpressdesign.com/request", 
    function (requestNumber, value, exception) {
        if (value) {
            processResponse(value);
        } else {
            processError(exception);
        }
    }
);

After JSONRequest.get has verified the parameters, it will queue the request and return the request number. The done function value will be invoked later when the outcome of the request is known.

No cookies or implicit authentication information is sent with the GET operation. Any authentication information must be placed in the url.

The request may use either http or https. This choice is independent of the security of the page.

GET /request HTTP/1.1
Accept: application/jsonrequest
Host: json.mpressdesign.com

After the server has acknowledged the request, it has until the timeout interval expires to produce a response. If the time limit is exceeded, or if the connection is closed before a complete response is sent, then the request fails.

HTTP/1.1 200 OK
Content-Type: application/jsonrequest
Content-Length: xxxx

The body of the response is a JSON text, encoded in UTF-8. If the text contains any JSON encoding errors, then the request fails.

If the request succeeds, then the done function is called with the request number and the value obtained from the parsing of the JSON text. If the request fails, then the done function is called with the request number and an exception object, indicating the communication failure. If a server wishes to communicate an application-level error, then it should return it as a JSON text with an HTTP status code of 200 OK.

JSONRequest.cancel

A request can be cancelled by calling JSONRequest.cancel with the request number as the only parameter. Nothing is returned. There is no guarantee that the request will not be sent to the server since it is possible that it had been transmitted before the cancel request was made.

JSONRequest.cancel(requestNumber);

If the request is still in the outgoing message queue, it will be deleted from the queue.

If the request is in progress, an attempt will be made to abort it.

If the request cannot be found, then the cancellation will be ignored.

When a message is successfully cancelled, the done callback function of the request is called with an exception message of "cancelled".

HTTP Header Fields

Accept

The only accept type used with JSONRequest is application/jsonrequest. The use of this unique type prevents JSONRequest from interacting with legacy systems that assumed that a firewall was sufficient to protect them from unintended web access.

Content-Type

The only content type used with JSONRequest is application/jsonrequest.

Content-Encoding

The content encoding can be identity (the default) or gzip.

Exceptions

Exceptions can be produced either when the JSONRequest function is called, or when the done callback function is invoked. An exception object contains a name member whose value will always be the string "JSONRequestError", and a message member, which contains a string that explains the error.

{name: "JSONRequestError", message: "error message"}

These are the messages that can be produced.

Delay

When a request fails (delivering an exception object with the message "not ok", "no response", or "bad response" to a done callback function), then a delay will be added to the dispatching of all subsequent requests. This is intended to frustrate denial of service attacks, timing analysis attacks, and exhaustive search attacks.

Each failure increases the current delay value by 500 milliseconds plus a random number of milliseconds (between 0 and 511). Each successful request reduces the delay by 10 milliseconds until the delay goes to zero. Each page keeps its own delay value.

Cancelled requests increase the delay by 10 milliseconds.

Security

The JSONRequest has some features that allow it to be exempted from the Same Origin Policy.

1. JSONRequest does not send or receive cookies or passwords in HTTP headers. This avoids false authorization situations. Knowing the name of a site does not grant the ability to use its browser credentials.
2. JSONRequest works only with JSON text. The JSONRequest cannot be used to access legacy data or documents or scripts. This avoids attacks on internal websites which assume that access is sufficient authorization. A request will fail if the response is not perfectly UTF-8 encoded. Suboptimal aliases and surrogates will fail. A request will fail if the response is not strictly in JSON format. A request will fail if the server does not respond to POST with a JSON payload.
3. Reponses will be rejected unless they contain a JSONRequest content type. This makes it impossible to use JSONRequest to obtain data from insecure legacy servers.
4. JSONRequest reveals very little error information. In some cases, the goal of a miscreant is to access the information that can be obtained from an error message. JSONRequest does not return this information to the requesting script. It may provide the information to the user through a log or other mechanism, but not in a form that the script can ordinarily access.
5. JSONRequest accumulates random delays before acting on new requests when previous requests have failed. This is to frustrate timing analysis attacks and denial of service attacks.

The JSONRequest does only one thing: It exchanges data between scripts on pages with JSON servers in the web. It provides this highly valuable service while introducing no new security vulnerabilities.

A browser within a filewall may have the capability to interact with a server (penzance.org). Computers on the outside do not have that capability. Can a computer on the outside (pirate.net) cause a browser to act as its agent in interacting with an internal server?

Current, XMLHttpRequest does not allow a script from a page from pirate.net to connect to penzance.org because of the Same Origin Policy.

JSONRequest does allow the connection, but with some limitations:

• The Content-Type in both directions is application/jsonrequest.
• The POST body data will be in JSON format.
• The response data will be in JSON format.
• The character encoding in both directions will be UTF-8, strictly enforced

But what of legacy applications that accept POST. Could JSONRequest be used to improperly POST to these applications, thereby corrupting databases? JSONRequest mitigates this danger because Cookies and HTTP authentication are not sent.

Contrast this to form.submit, which can send a POST body and cookies and HTTP authentication. JSONRequest is more secure than the form.submit feature which is currently implemented everywhere. By switching to a policy of responding only to well-formatted JSONRequest, applications can be made more secure.

Duplex

JSONRequest is designed to support duplex connections. This permits applications in which the server can asynchronously initiate transmissions. This is done by using two simultaneous requests: one to send and the other to receive. By using the timeout parameter, a POST request can be left pending until the server determines that it has timely data to send.

Duplex connections can be used in realtime notification applications such as process management and finance. It can also be used in collaborative applications such as instant messaging, instant email, chat, games, presentation, and shared applications.

Tweet

The HTML5 project has been in development since 2003-2004 with the collaboration of Web Hypertext Application Technology Working Group (WHATWG) and the World Wide Web Consortium (W3C). It wasn’t until last year when Steve Jobs, Apple Inc.’s CEO, published a letter titled “Thoughts on Flash” in which he concludes that with the development of HTML5, Adobe Flash is no longer necessary for video or any web content. Support for HTML5 by major browsers and web developers is rapidly growing as they look forward to the new standards and implementation of their content.

So, what is new in HTML5?

For many years, developers have figured out how to pull most of this added functionality using advanced JavaScript, ActionScript, Flash, and other libraries. Below I have a list of features added and changed in HTML.

• <canvas>
  <canvas> is an added HTML tag that gives developers a 2D drawing area (others dimensions may be forthcoming). You can use this for a wide variety of ways such as graphs, games, presentations, etc. The canvas is controlled by JavaScript.
• <video>
  The <video> tag is a new HTML tag for displaying video. The <video> tag is like the img tag and has specific arguments for displaying the video.
• <audio>
  The <audio> tag is very similar to the <video> tag but it’s for audio only.
• Context menus
  HTML5 provides a method of defining context menus, making it easier to use these in web application development. This may not so useful for websites, but certainly for applications where context menus could provide a raft of options without taking up space in the UI.
• New structural elements
  HTML5 added structured elements where past HTML versions had little to no structuring in elements. Here are a few:

  
  

  • <section> -A section, or section of a chapter of text, or a book.
  • <header> – The page header. This is not the same as the <head> element.
  • <footer> – The footer of the page. Typically where all the legal crapola goes.
  • <nav> – Navigation links to other pages. You could put your websites navigation in this for example.
  • <article> – A blog article could be encapsulated by this for example.
  • <aside> – The aside tag can be used to provide extra information for a block of text. Much like sidebar material in books etc.
  • <figure> – The <figure> element can be used to annotate your main text with diagrams, which aren’t necessarily imperative to the text.
• New Inline Elements
  HTML5 added new basic elements such as times or numbers

  
  

  • <mark> – This denotes that a bit of text is marked in some way. You could for example, use this to mark search terms in a list of results.
  • <time> – You can use this to represent times or dates in your block of text.
  • <meter> – This can be used to indicate a figure of some sort. It can have multiple attributes including: value, min, max, low, high and optimum.
  • <progress> – This can be used to show a progress bar of some sort. It has a couple of attributes: value and max. The max attribute can be omitted.
• New Form Input Types
  HTML5 added new and exciting input types for forms. A lot of these elements are already common but now they are more easily implemented. These input types include:

  
  

  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • url
• Dropped Elements
  The following elements have been dropped and not supported by HTML5:

  
  

  • acronym
  • applet
  • basefont
  • big
  • center
  • dir
  • font
  • frame
  • frameset
  • isindex
  • noframes
  • noscript
  • s
  • strike
  • tt
  • u
• Charset Change ( Character encoding syntax )
  The character encoding syntax for an HTML5 document is now: <meta charset=”UTF-8?>
• New interactive elements
  These are more features that will be more beneficial for application development but could still be used for web design.

  
  

  • <details> – This would be an element used to add additional information to an element. I can see this most commonly used for tooltips.
  • <datagrid> – This is and will be the replacement of tables in applications. This is a form of rows in a data list. For example selecting rows or columns, editing data, sorting and generally    interacting with the data in the client.
  • <menu> – Previously a deprecated element, <menu> is back in HTML5 with a new meaning. It can now contain <command> elements which cause a particular action to happen. For example you could use this element to provide a toolbar, or a context menu (see above). It can have label and icon attributes. They can be nested to provide multiple levels of menus.
• New Document Type Definition ( DTD )
  HTML5 has a new, much simpler DTD: <!doctype html>

  
  

  This is much nicer, clean, and far more memorable. As I understand it, this results from HTML not being associated with Standard Generalized Markup Language ( SGML ) any more.

• href is now optional
  href in anchor tags is now optional as links can be used in conjunction with scripting. Perhaps more useful in web applications as opposed to web sites.
• The async attribute
  This stipulates that a block of script can be executed asynchronously, instead of blocking the rest of the page until it’s finished.

HTML5 Changing Web Design and the Entire Web Experience

I came to the conclusion several years ago that web application development will change the face of the web. More people are building and designing sites with application usability in mind. HTML5 has been pushed by application developers to innovate the web and make HTML for application and user experience minded. For years, developers have been using tags unconventionally to develop the experience needed for their application or web site. We have been over-using the listed elements and div tags where we found little formality, conventions, and structure in our HTML besides of course our ids and classes. I am very much looking forward to the cross-browser support offered by the new HTML5 changes and innovations.

So, the time has finally arrived and we have been waiting for this upgrade for years. But don’t get too excited because we all know that not all browsers will support every feature, such as the overwhelmingly hated MSIE. Most browsers already support some of the specification, and some have for quite a while now. An example of this is <canvas>, supported by Firefox, Opera, Chrome and Safari. AFAIK Firefox 3.1 will support more of it, namely the <audio> and/or the <video> tags. The team at Fahrenheit Marketing looks forward to transitioning to development in HTML5 in the near future. I look forward being part of the unfolding innovation to come.

I originally published this article at http://www.fahrenheitmarketing.com/web-design/html5-and-the-evolution-of-web-design-and-development/

Tweet

So, we built a social network in 2008 on Ruby on Rails and it is a great social networking site with all kinds of fun interaction, sharing, and recommending. Several months later we had the client contact us wanting to add facebook and twitter integration. We had a lot going on so the client decided to have another company in his area (L.A.) go ahead and add the facebook connect and twitter integration. Well, a year later the client calls us and asks us to make some more changes. Of course no problem. We have more developers and we have grown since then so we were available to help him out this time. Well, in the process we came accross a huge issue in our development enviroment:

FIRST OF ALL: our development environment has a completely different url address as the production ( duh right! ). BUT all the script calls using stylesheet_link_tag and javascript_include_tag was calling the media from a base url of the production domain.

SECOND: all the stylesheet_link_tag and javascript_include_tag calls had double slashes in the call //

So, all the changes we needed to make to the css and js files were not displaying in the development enviroment because it was calling all the production stylesheets and javascript files. WE TRIED EVERYTHING!!!!

We tried setting: ActionController::Base.relative_url_root or ENV['RAILS_RELATIVE_URL_ROOT'] and the base root. We tried clearing cache we tried this and we tried that. It beginning to become a BIG pain in the BUTT.

BUT THANK GOD!!!!!

So we finally found the ONLY place in the ENTIRE code that mentioned the production url was a gem config file known as the facebooker.yml. And sure enough as soon as we changed the callback_url: in the facebooker.yml everything worked!!!!

So for anyone out there using the faceboker gem…remember how important the callback_url and what it does to your entire app!

Tweet