하루에 하나씩.....

*omgpop 이라는 업체(미국? 이던가?) 이 Facebook Hack 에 참가해서 상을 받았다고 하더군요...

그 이후 이 업체는 Zinga에 1억$에 인수되었다고 하면서... 점점 Hack 대회의 위상을 높이더군요 ㅎㅎ

1. 101 Crash Course (특강)

  ==> Social 과 "공유"에 대한 내용이였습니다.

       facebook이 photo 를 중심으로 서비스를 시작하였는데, 기존 큰 서비스 업체가 많음에도,  성공할수 있었던 부분은

      사람을 중심으로 하는 서비스, 사람의 얼굴에 각각의 tagging 을 하는 것으로 폭발적인 인기를 누릴수 있었다....

2. Intro

  --> 전반적인 소개(Discovery ,Distribution  , Fragmentation ,Monetization )... 기본적인 용어 설명부터 인증과 요청등에 대한

       내용과, Graph API,Timeline,notification,Application Tile, news feed,Bookmark  등등 ...blabla 

3. Social Mobile Apps - Distribution and Design (배포와 설계)

  --> 모바일 시장의 성장에 기존 Web시장에 대비 2배 이상의 속도로 커지고 있다라는 개론 부터

        js api 를 이용하여 실제 로그인 부터 사용자 정보 호출등의 시연이 있었습니다. 

      (Tip : News Feed 보다 Open Grahp를 먼저 쓰기를 권장하더군요)

4. Android & iOS를 위한 Facebook 플랫폼(NativeApps )

오홋... 저때가...지금까지도 인기있는 크리스마스 노래가 출시될 때이군..
왜.. 요즘은 저런 노래가 안나올까?

암튼 이글의 본론은 위의 짤방이 아니구..
HTML5 를 말로만 많이 들어보셨겠지만, 직접 체험 해보거나 공부를 해보신 경험이 없으신 분들을 위해서
아래 자료를 정리해 드립니다.
천천히.. 잘 따라 해보시길 바랍니다.

HTML5의 변화를 주목하도록 제작된 네 파트로 된 시리즈입니다.

Part 1 시작하기
새 태그와 페이지 구성으로 시작하고, 웹 페이지 설계에 대한 높은 수준의 정보, 양식의 작성, API의 사용과 가치 및 Canvas가 제공하는 창의적인 기회를 제시합니다.
http://www.ibm.com/developerworks/kr/library/wa-html5fundamentals/

Part 2: 입력 구성하기
HTML5 양식 제어의 개념을 소개하고 JavaScript 및 CSS3의 역할에 대해 다룹니다.
http://www.ibm.com/developerworks/kr/library/wa-html5fundamentals2/

Part 3: HTML5 API의 기능
함수를 시연하는 예제 페이지를 사용하여 HTML5 API를 소개합니다.
http://www.ibm.com/developerworks/kr/library/wa-html5fundamentals3/

Part 4: 마지막 마무리
HTML5 Canvas 요소를 소개합니다
http://www.ibm.com/developerworks/kr/library/wa-html5fundamentals4/

(짤방: 우왕~~ 닌자거북이당!!! ㅎㅎㅎ)




CI 상에서 프로시저를 사용하려고 하니... 오류가 발생했다... T.T
이런 젠장젠장... 방법을 찾았다.. 역시 구글링~!!!!

mysqli 를 설치하라는 방법도 있었고... 등등.. 여러 방법이 있었지만
난 간단한게 좋아요!!!

http://us2.php.net/mysqli

/system/database/drivers/mysql/mysql_driver.php 파일상에서 아래 함수로 변경을 하면 처리가 되었다.

아직 BOX 2D 물리엔진을 접하지 못하였지만..
사내에서는 Flash Action Script 에 포팅된 Box 2D 물리엔진을 이용해서 게임을 구현한다.

url : http://www.box2d.org/
document : http://www.box2d.org/manual.html
위 사이트로 들어가서 확인해보시면.. 정말 자세히 나와 있습니다. (영어 죠 ~ ^^)
그중에 About 부분을 보시면 아래와 같습니다.

Box2D is a 2D rigid body simulation library for games.
Programmers can use it in their games to make objects move in believable ways and make the game world more interactive.
From the game's point of view a physics engine is just a system for procedural animation.

Box2D is written in portable C++. Most of the types defined in the engine begin with the b2 prefix.
Hopefully this is sufficient to avoid name clashing with your game engine.

오늘 블로그에 글을 올리는 주된 목적은 아래 주제의 내용때문에 올리게 되었다.
BOX 2D 물리엔진과  HTML5을 이용해서 게임을 만들어 보는 예제가 있기 때문!!!

Build your First Game with HTML5
http://net.tutsplus.com/tutorials/html-css-techniques/build-ayour-first-game-with-html5/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+nettuts+%28Nettuts%2B%29&utm_content=Google+Reader

그냥 군말없이 한번 해보도록 해라~ ㅎㅎㅎ

** 그냥 내 생각인데.. 아직 html5에 대한 활용이 미비하지만, 몇년후면 HTML5 가지고 못할것이 없어 보인다. html5 랑 javascript 만 잘해도 먹고 사는데 지장 없을듯 ㅎㅎㅎ

JQuery Mobile Site 주소 : http://jquerymobile.com/

--> 실제 이 곳에 들어가서 문서를 참고하시면서 만들어 보는 것이 가장 좋을 것 같네요
공부는 교과서 중심으로 해야 조치요~ ㅎㅎ

MSDN 블로그에 올라온 jQuery Mobile 강좌
원문 : http://msdn.microsoft.com/en-us/scriptjunkie/hh144955.aspx
▼ 아래 글은 윈문을 그대로 싹 복사 해 온거라서.. 문제가 되면.. 자삭할 께용

jQuery Mobile introduces a cross-platform and cross-device framework for developing mobile applications. It supports a wide variety of mobile browsers and delivers a unified user interface to the devices. It has simplified working with mobile browsers by abstracting away inconsistences between the vendors. Just as jQuery changed the way we wrote JavaScript , jQuery Mobile will change the way we build mobile web applications.

I recently used jQuery Mobile to build an application and was stunned at how smoothly the development process went. The framework is straight forward and well documented. While it’s still in alpha, you will find that it’s very stable and responsive.

As a web developer, jQuery Mobile is instantly rewarding because there isn’t much of a learning curve. Whatever your preferred stack is for developing web applications is – that’s your stack for developing jQuery Mobile applications. The sample application below is built using only browser capabilities (HTML/CSS/JavaScript), so you will find your editor-of-choice is perfect for following along.

Page Structure and Components

We are going to build a to-do application. The requirements are: 1) it works great on most mobile devices, 2) we can create new to-dos and assign them a priority and 3) we can remove to-dos from the list when we’ve completed them.

For this application there is only going to be one physical page, index.html. It’s going to reference the necessary JavaScript and CSS, and provide the main structure of the page.

<!DOCTYPE html>
<html>
    <head>
    <title>Mobile To-Do</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>Mobile To-Do List</h1>
    </div>
    <div data-role="content">
        Page content will go here
    </div>
</div>
</body>
</html>

Aside from referencing the latest version of jQuery, we also reference jquery.mobile-1.0a4.1.min.css and jquery.mobile-1.0a4.1.min.js via CDN. This CSS and JavaScript file is where the jQuery Mobile magic lives.

In the body tag we provided the basic page anatomy for application: a header with our title in it and a section for page content. You will notice that sections of markup have a data-role attribute. This attribute instructs the framework on how to render that element and sometimes it’s content. Elements with a data-role attribute applied are often referred to as components.

If we point a browser to our page we find that these steps have gotten us well on our way to creating a cross-platform mobile application.

The jQuery Mobile framework has used the data-role attributes we supplied to apply styles, add attributes, and, in some cases, even restructure elements. If we examine the DOM once the page has been rendered by the browser, we find that the jQuery Mobile framework has been busy.

<body class="ui-mobile-viewport">
    <div data-role="page" class="ui-page ui-body-c ui-page-active">
        <div data-role="header" class="ui-bar-a ui-header" role="banner">
            <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Mobile To-Do List</h1>
        </div>
        <div data-role="content" class="ui-content" role="main">
            Page content will go here
        </div>
    </div>
</body>

It’s worth remembering that the jQuery Mobile framework modifies the DOM significantly as it often comes into play often when writing selectors for business logic.

We need to provide a list of existing to-dos and display the list when the user enters the application. jQuery Mobile provides a lot components for us to work with: toolbars, dialogs, buttons, select menus, etc. For the purpose of our list we are going to choose the list view component. Inside of our content component we add the list view markup.

<ul id="todoList" data-role="listview">
    <li>Sample Item #1</li>
    <li>The Second Item</li>
    <li>3rd and Final Item</li>
</ul>

We specified listview for our data-role attribute which will ensure that the framework treats the element and its content as a list view component. We also gave the component and id attribute as we will be referring to it later in our JavaScript code. Lastly, we added a few <li> elements to give us an idea of what the individual to-do items will look like.

It’s a good start but we are going to have different priorities for our to-dos; plus, we need a way to remove items. The framework makes dividing items and displaying a delete icon easy.

To create dividers, we add three new list items for our priorities and specify divider as their data-role. To add delete icons to the to-do items, we specify delete as their data-icon and wrap the inner value in an anchor tag.

<li data-role="list-divider">Important</li>
<li data-icon="delete"><a>Sample Item #1</a></li>
<li data-role="list-divider">Normal</li>
<li data-icon="delete"><a>The Second Item</a></li>
<li data-role="list-divider">Low</li>
<li data-icon="delete"><a>3rd and Final Item</a></li>

We have a nice mock of what our rendered list of to-dos will look like. Let’s move on to adding a new page for creating to-do items. One option for our new page is to add a physical html file for it. That method works great if you need to render the page dynamically with server-side processing but that’s not necessary for this demo. Since our page is going to be static, we can define a new logical page inside our existing index.html file.

<div id="mainPage" data-role="page">
    <!—- omitted code -->
</div>
<div id="addPage" data-role="page">
    <div data-role="header">
        <h1>New To-Do</h1>
    </div>
    <div data-role="content">
    </div>
</div>

We’ve added a new page component as a sibling element to our existing page component. We gave our existing page component an id attribute of mainPage and new the new page component the id of addPage. Let’s go ahead and create buttons to link these two logical pages using the ids we created for them.

<div id="mainPage" data-role="page">
    <div data-role="header">
        <h1>Mobile To-Do List</h1>
        <a href="#addPage" data-role="button" data-icon="plus">New</a>
    </div>
    <!—- omitted code -->
</div>
<div id="addPage" data-role="page">
    <div data-role="header">
        <a href="#mainPage" data-role="button" data-icon="back">Back</a>
        <h1>New To-Do</h1>
    <a href="#mainPage" id="createButton" data-role="button" data-icon="plus">Create</a>
    </div>
    <div data-role="content">
    </div>
</div>

We have used a new data-role value button on anchor elements which will instruct the framework to render them as button components in our header. We also used the data-icon attribute to specify which icon we would like displayed on the buttons. The framework handles linking the buttons to the logical pages using the href attribute. The result is navigation between our two logical pages with a sliding transition animation.

Let’s fill out our create page. We need to allow the user to specify a description and priority for the to-do. An input element will be perfect for the description and a select element will work nicely for specifying a single priority.

<div data-role="content">
    <div data-role="fieldcontain">
        <label for="todoDescription">Description:</label>
        <input type="text" name="todoDescription" id="todoDescription" value=""  />
    </div>
    <div data-role="fieldcontain">
        <label for="todoUrgency" class="select">Urgency:</label>
        <select name="todoUrgency" id="todoUrgency" data-native-menu="false">
            <option value="2">Important</option>
            <option value="1" selected="selected">Normal</option>
            <option value="0">Low</option>
        </select>
    </div>
</div>

We didn’t specify a data-role for the input, select, and label elements as we did for the list view component. This is because the framework doesn’t need a hint on how to render these components since they are defined explicitly by the tag’s name. However we did wrap the new components in a fieldcontain component. While this component isn’t required, it provides some nice rendering benefits: 1) A single line will be rendered at the bottom of the set providing some visual separation of fields and 2) The orientation of label in respect to the control will be rendered optimally based on horizontal screen resolution of the device.

We also set the select component’s data-native-menu to false. This will cause the framework to render a theme-friendly menu of the list items instead of displaying the browser’s default drop down.

Tie It Together with JavaScript

We now have our two screens completely laid out. Next, we are going to reference some JavaScript files that will make our development a bit easier. We are going to use json2.js for serialization of JavaScript objects, jquery.cookie.js for working with cookies, and jquery.tmpl.js for binding html templates to objects. Save each of those in your scripts folder and reference them. Finally, create and reference a to-do.js file in your scripts folder which is where all our code will go.

<head>
    <title>Mobile To-Do</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
    <script src="scripts/json2.js"></script>
    <script src="scripts/jquery.cookie.js"></script>
    <script src="scripts/jquery.tmpl.js"></script>
    <script src="scripts/to-do.js"></script>
</head>

Since we are working in browsers and not depending on a server-side storage or data, we are going to store the to-do data in cookies. We are going write a simple JavaScript class to encapsulate loading, saving, and reading the to-do data. This class will also encapsulate the serialization and deserialization of to-do data into JSON for storage in the cookie.

$(document).ready(function() {
 
    var Model = function() {
 
        var items = [],
            load = function() {
                items = JSON.parse($.cookie("model") || "[]");                
            };
 
        this.PRIORITY = {
            IMPORTANT: 2,
            NORMAL: 1,
            LOW: 0
        };
 
        this.save = function() {
            $.cookie("model", JSON.stringify(items), { expires: 365 }));
        };
 
        this.create = function(text, priority) {
            var result = { "text": text, "priority": priority };
 
            items.push(result);            
            this.save();
 
            return result;
        };
 
        this.remove = function(item) {
            items.splice($(items).index(item), 1);
            this.save();
        };
 
        this.clear = function() {
            items = [];
            this.save();
        };
 
        this.getItems = function() {
            var result = [];
 
            for (var index = 0, max = items.length; index != max; index++) {
                result.push(items[index])
            }
            
            return result;
        };
 
        load();        
    };
});

We won’t dive into a deep explanation of how our Model class is working. You can dig into it for a greater understanding or just accept that it can load(), save(), remove() and getItems().

As with most jQuery code, we wrapped our code in the $(document).ready() event closure. Future snippets will omit this detail but should be contained in the closure as well.

Let’s create an instance of our Model class to work with along with an array to hold a reference to our list headers.

var model = new Model(),
    listHeaders = [];

The model variable points to an instance of our Model class. The listHeaders array will contain each of the list items in our list view that are dividers, in our case the three that represent priority. Let’s add a custom data-priority attribute to each of the dividers to specify which priority the divider represents. These values will correspond to the constants we setup in the Model class: IMPORTANT = 2, NORMAL = 1 and LOW = 0.

<li data-priority="2" data-role="list-divider">Important</li>
<li data-priority="1" data-role="list-divider">Normal</li>
<li data-priority="0" data-role="list-divider">Low</li>

Next, we create a self-invoking function to fill the listHeaders array with dividers.

(function getListHeaders() {
    $("#todoList > li[data-priority]").each(function() {
        listHeaders[parseInt($(this).attr("data-priority"))] = $(this);
    });        
})();

We now that we have an easy way to reference our dividers by priority. Let’s create a function that will take a to-do object, bind it to an html template and insert the result under the appropriate priority divider. From our Model class, we can see that to-do objects simply have a text string and a priority integer.

var renderItemElement = function(item) {
    return $.tmpl("<li data-icon=\"delete\" class=\"item\"><a>${text}</a></li>", item)
        .data("item", item)
        .insertAfter(listHeaders[item.priority]);
};

We have laid the ground work to be able to create, save, and render to-do items. Now we can tie it all together in the create button’s click event.

$("#createButton").click(function() {
    var priority = parseInt($("#todoUrgency").val()),
        item = model.create($("#todoDescription").val(), priority);
 
    renderItemElement(item);
 
    $("#todoList").listview("refresh");
$("#todoUrgency").val(model.PRIORITY.NORMAL.toString()).trigger("change");
$("#todoDescription").val("");
});

We get the priority from the todoUrgency select component and the text from the todoDescription input component. We create a new to-do object using the model’s create function. This function also handles saving the object in the cookie. We call renderItemElement and pass the new object which handles binding and inserting the to-do into the DOM. Since we have dynamically added an item to the list view component, we call the refresh command to re-render the component. The final two lines of code reset the todoUrgency and todoDescription components to their original states.

Now that we can add items to our list, let’s implement functionality for removing them. We’ve already used the data-icon attribute to instruct the framework to render a delete icon on each list item. We just need to catch a list item’s click and remove the item from both the model and list view.

$("#todoList").delegate("li.item", "click", function() {
    model.remove($(this).data("item"));
    $(this).slideUp(function() {
        $(this).remove();
    });
});

Instead of attaching a handler to each item, we delegate the list item’s click event to the todoList. First we remove the object from the model. The remove method also handles saving the change to our cookie. Next we use a slide up animation for the visual removal of the item. Finally, once the animation has completed, we remove the element from the DOM.

As a final step, we need to render this initial view of all the items when the user first opens the application. For this we will create another self-invoking function.

(function renderExistingItems() {
    $(model.getItems()).each(function() {
        renderItemElement(this);
    });
 
    $("#todoList").listview("refresh");
})();

We use the model’s getItems function to get a list of existing items, which we loop through and render using the renderItemElement function. Once again, we call refresh on the listview component since the items were dynamically appended.

Conclusion

The demand for mobile applications is growing in both the consumer and business sectors. The demand for an application to support multiple devices is growing as a result of the device market becoming more divided. jQuery Mobile introduces a unique opportunity for applications to support multiple devices without developers needing to learn multiple platforms. Best of all as web developers we are working in the platform we love – the web.

This introduction only scratched the surface of what jQuery Mobile has to offer. For example the framework handles navigation to external pages seamlessly with AJAX. It provides a rich theming system for customizing the look and feel of your pages. And as mentioned before, there is a long list of useful components for rapidly delivering user interfaces.

Working example: http://examples.nickriggs.com/todo/

Source code: http://gallery.msdn.microsoft.com/scriptjunkie/jQuery-Mobile-Todo-b93169a9/file/139/1/todo-mobile.zip

Google에서는 참으로 다양한 서비스들을 선보이고 있네요.
Google Lab에서 제공하는  Page Speed Online 이라는 서비스를 소개 합니다.

사이트 URL : http://pagespeed.googlelabs.com

웹페이지의 속도를 측정하는데에 그치는 것이 아니라,
해당 웹페이지를 자근자근 분석하여 속도를 개선할 수 있는 방안까지 제시를 해주고 있습니다.
우선순위를 구분하여 빠른 웹페이지 구현을 위한 최적화 옵션을 제공 !!
(앞으로 많은 참조 가능 할것 같습니다. ^^)

또한 모바일 페이지까지도 분석이 가능하네요~

영어가 좀 되시는 분들은 아래 URL로 보세요.. 아주 자세히 설명해 놓은 곳을 링크 드립니다.
http://googlewebmastercentral.blogspot.com/2011/03/introducing-page-speed-online-with.html

아 아래는 어찌하면 웹페이지의 속도를 더욱 개선 시킬수 있는지에 대한 Google 의 정보 입니다.
http://code.google.com/intl/ko-KR/speed/

밥먹고 맨날... 이런것만 신경쓰나봅니다. ㅎㅎㅎ