Google launches Chromebook Pixel

Google has introduced its own high-end laptop Chromebook Pixel powered by its Chrome operating system.

Google Chromebook Pixel :: futureX

VISIT OFFICIAL SITE

"With the Pixel, we set out to rethink all elements of a computer in order to design the best laptop possible, especially for power users who have fully embraced the cloud," said Google in its official blog Thursday.

According to the search giant, Chromebook Pixel, with a 4.3-million-pixel touchscreen, has the highest pixel density of any laptop screen on the market today, reported Xinhua.

Made of anodized aluminium, the laptop also features an Intel Core i5 processor. Although the local solid-state storage is only 32 GB, consumers can get one terabyte of free cloud storage space with Google's Drive service for three years.

The basic Wi-Fi version of the laptop will retail for USD 1,299 in the US. In April, Google will launch a model with built-in LTE with a price of USD 1,449.

Announced in July 2009, Chrome OS is an operating system designed to work exclusively with web applications. The user interface of the system only has a browser with a media player and a file manager. All the documents and applications are stored and based in the "cloud", Google's data centres.

How to make a Facebook app

Facebook developer :: futureX 

We all know that Facebook have biggest user base as compared to other social networking website and that can help you to reach its 900+ million user base.

         Building a Facebook application is a very vast topic to cover. For this tutorial I'll just keep GET STARTED approach. I am assuming :

1. You know HTML , PHP, Javascript or any other language. If not you must learn them in order to make Facebook applications.
2. Have an account on Facebook.
3. Have a web server(LAMP or WAMP) installed in your machine.

for developer account in Facebook visit
https://developers.facebook.com

Set up new application :

1. Provide your application name: my_app
2. Agree to Facebook terms and click on "Create Application".
3. Register your Facebook application and note down "Application ID" & "Secret".
Get the php-sdk from git hub link:
https://github.com/facebook/facebook-php-sdk
4. Download whole sdk and unzip at document root (at http://localhost/)
5. Start your web server
6. Now go to link : http://localhost/facebook-php-sdk-master/examples/example.php (assuming that you have unzipped the sdk at root all files inside sdk have permission to execute)
7. If you see "public profile of Naitik" and profile picture of Naitik, then congrats you are now ready to make your own applications.

Canvas Page 

Go to the 'Settings' of application that you have created put the link of application in App Domain.

If you were following the tutorial put http://localhost/facebook-php-sdk-master/examples/ at 'App Domain'.

     Now in your document root rename example file inside /facebook-php-sdk-master/examples/example.php to index.php

I am assuming that you have taken name space for your "Canvas Page" if not Facebook will generate a random number and attach it to your application.

         Edit Canvas URL and add http://localhost/facebook-php-sdk-master/examples/ to input box.

Go to your Facebook app link, if everythingh is alright you will see some example application in Facebook canvas. But this application is running on your local server in order to make your application visible to others you'll need to host your application at third party server.

HTML Images

HTML Images :: futureX

In HTML, images are defined with the <img> tag. 

The <img> tag is empty, which means that it contains attributes only, and has no closing tag.

To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.

Syntax for defining an image:

<img src="url" alt="some_text">

The URL points to the location where the image is stored. An image named "abc.gif", located in the "images" directory on "www.example.com" has the URL: http://www.example.com/images/abc.gif.

The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

HTML Images - The Alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.

The value of the alt attribute is an author-defined text:

<img src="facebook.gif" alt="facebook logo">

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

HTML Images - Set Height and Width of an Image

The height and width attributes are used to specify the height and width of an image.

The attribute values are specified in pixels by default:

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).


Note: When a web page is loaded, it is the browser, at that moment, that actually gets the image from a web server and inserts it into the page. Therefore, make sure that the images actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.


How to use an image as a link.

<p>Create a link of an image:
<a href="default.asp">
<img src="example.gif" alt="HTML tutorial" width="32" height="32"></a></p>

How to let an image float to the left or right of a paragraph.


<p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> A paragraph with an image. The image will float to the left of this text.
</p>

« Previous Chapter                                                                                                                                          Next Chapter »

HTML Styles :: CSS

HTML styles :: futureX

CSS (Cascading Style Sheets) is used to style HTML elements.

CSS was introduced together with HTML 4, to provide a better way to style HTML elements.

CSS can be added to HTML in the following ways:

Inline - using the style attribute in HTML elements
Internal - using the <style> element in the <head> section
External - using an external CSS file

The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files.

Inline Styles

An inline style can be used if a unique style is to be applied to one single occurrence of an element.

To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph:

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

Internal Style Sheet

An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag, like this:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section:

<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>

CSS EXAMPLE :

<!DOCTYPE html>
<html>

<body style="background-color:gray;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a line.</p>
</body>

</html>


<html>

<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>


<html>

<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

css example :: futureX

« Previous Chapter                                                                                                                                          Next Chapter »

HTML Head Section

HTML Head :: futureX

The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.

The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

The HTML <title> Element

The <title> tag defines the title of the document.

The <title> element is required in all HTML/XHTML documents.

The <title> element:

defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search-engine results


<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>
</html>

The HTML <base> Element

The <base> tag specifies the base URL/target for all relative URLs in a page:

<head>
<base href="http://www.example.com/images/" target="_blank">
</head>

The HTML <link> Element

The <link> tag defines the relationship between a document and an external resource.

The <link> tag is most used to link to style sheets:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

The HTML <style> Element

The <style> tag is used to define style information for an HTML document.

Inside the <style> element you specify how HTML elements should render in a browser:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

The HTML <meta> Element

Metadata is data (information) about data.

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

<meta> tags always goes inside the <head> element.

The HTML <script> Element

The <script> tag is used to define a client-side script, such as a JavaScript.

« Previous Chapter                                                                                                                                          Next Chapter »

HTML Links

HTML Links :: futureX

Links are found in nearly all Web pages. Links allow users to click their way from page to page.

HTML Hyperlinks (Links)

The HTML <a> tag defines a hyperlink.

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.

The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red


HTML Link Syntax

The HTML code for a link is simple. It looks like this:

<a href="url">Link text</a>

The href attribute specifies the destination of a link.

Example

<a href="http://www.microsoft.com/">Visit Microsoft Official site</a>

which will display like this: Visit Microsoft Official site

Clicking on this hyperlink will send the user to Microsoft homepage.

Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.

The example below will open the linked document in a new browser window or a new tab:

Example

<a href="http://www.microsoft.com/" target="_blank">Visit Microsoft Official</a>


HTML Links - The id Attribute

The id attribute can be used to create a bookmark inside an HTML document.

Tip: Bookmarks are not displayed in any special way. They are invisible to the reader.

Example

An anchor with an id inside an HTML document:

<a id="about">About Us</a>

Create a link to the "About Us" inside the same document:

<a href="#about">Visit the About Us Section</a>


Creating email Link :

Example

<p>
This is an email link:
<a href="mailto:someone@example.com?Subject=Hello%20again">
Send Mail</a>
</p>

« Previous Chapter                                                                                                                                          Next Chapter »