Tip:
Highlight text to annotate it
X
Welcome to our project Google Developers Hackademy,
where Spanish-speaking experts from Latin America
will show you some of our tools,
developer’s products, APIs and new tricks.
This course is divided into five parts.
We invite you to watch it and learn along.
Let's start.
Hello. Welcome to the HTML5 web develop
introduction course with Google Drive.
My name is Cesar Anton Dorantes,
Google Developer Expert for the Google Drive platform.
In this lesson we will see the following subjects:
HTML5 document structure;
document structure in HTML5 applications;
free web hosting using Google Drive Public Folders;
automatic synchronization with Google Drive;
and, finally,
a practice in which we'll build an HTML5 website.
Are you ready?
Let's get it started!
HTML5 DOCUMENT STRUCTURE
HTML5 presents a different approach
than the previous versions.
Now it emphasizes on maintaining
a clear and simple structure.
Today we use HTML mainly
to describe the order and structure of our app.
The logic, written in JavaScript,
and the visual details, written in CSS,
are kept apart and we'll talk about them
in a lesson later on.
HTML5 has a very semantic structure
and its labels are very descriptive,
which makes it easy for us to declare and to edit
the structure of our application.
If you're familiarized with HTML4,
you'll notice that everything is much easier now.
We start by declaring the doctype,
with has been shortened,
making it easier to write and remember,
since now you just need to mention it's an HTML document.
Now we put the HTML labels.
These indicate where our code starts and where it ends.
Here we also declare what language the document is in
by using the "lang" attribute
and the corresponding language code.
In this case we use the "es" code,
since the document is in Spanish.
In this part we declare the "head" and "body" tags.
In "head" we place the information we wish
is only available for browsers and search engines.
In "body" we place the information we wish
the user can see through the browser.
Time to write the title we wish to be shown
on the browser for our application.
To do so, we write the title within the "title" tag,
inside "head."
Now let's place some metatags to declare
our page's basic information.
We start with our page's encoding
inside the "charset" attribute.
UTF-8 is recommended
because it accepts accents and letter "ñ."
By using the "name" y "content" attributes
we declare our page's description and author.
You can see I'm not using the famous "keywords."
Nowadays its use is no longer recommended,
because browsers don't take them into account
for the site's ranking anymore,
and sometimes they can even harm it.
Time to start declaring the content we wish
to be shown in our application.
Remember that in HTML5
this is done inside the "body" tag.
It is recommended that our page's main content
is indicated inside the "article" tag.
Let's write it in our code.
Finally, let's place the content
we want to show inside "article"
and that's it! We already have an HTML5 app
with all basic elements.
It's very important to keep the files
in separate folders according to their type.
This will be very useful through our project's development,
because it makes it easy to find them and edit them.
As well as declaring the routes
to the different files from the code,
particularly when we're working on big projects.
The basic folders for an HTML5 project are:
"CSS:"
This is where we store the files that determine
the appearance and visual effects.
"HTML:"
In this folder we put the corresponding files
to each page of our project.
"IMG:"
This is where we keep textures, photographs,
logos and other images we will use.
It's very useful to coordinate from the start
with the Design team on image names,
this way they can add or update elements
without having to wait for the Development team.
"JS:"
This is where JavaScript files go,
which we will use to define
our application's behavior.
The index.html file
must always be placed in the root directory,
apart from the rest of HTML files in our project.
In this file we put the welcoming page.
This file structure
is the same for pages or web applications.
Now that we have
all the files our project requires,
it is ready for the future of apps,
which are HTML5 Packaged Apps.
The main difference is that a Packaged App
contains a file in the root directory
called "Manifest,"
and the user, instead of downloading the data
from the server each time,
it is installed in the computer as a regular app.
It can even access the hardware connected directly through USB,
as with native applications.
Nowadays we can find this technology
already in use in Windows 8, BlackBerry 10
and the new Firefox OS,
but it will very soon be available
in the Chrome Packaged Apps,
which will allow you to sell your HTML5 apps
from Chrome Store,
which can be installed in any device
containing Google Chrome.
FREE WEB HOSTING USING PUBLIC FOLDERS
A very powerful tool from Google Drive
for developers
is the option of using folders as hosting
for both pages and HTML5 apps for free
and with no broadband limitations.
Nowadays, Google Drive allows us to store up to 15 GB
for free
and has several very economic packages
to rent additional space if we need to.
For those who own a Chrome Book,
Google gives them 100 GB
of storing in Drive for one year.
In order to use a folder as web hosting,
just follow this easy steps.
Step 1:
Frist, we need to create the folder we will use
to store our project
from Google Drive's web application.
For this example we'll create a folder called
"Drive HTML hosting."
Step 2:
Now, we select the folder we just created
by right-clicking with our mouse.
We look for the option "Share"
and we select "Share."
Step 3:
You'll notice a window will appear
in which the sharing options for this folder
are shown.
In this case, we need to find the section
"Who has access."
By default, folders are private.
In order to activate the hosting,
we need to turn the folder into a public one.
For that we first need to click on "Change."
Step 4:
The window "Sharing options" will pop up.
In "Visibility options,"
we need to select the options "Public in the Web"
and click on "Save."
This will send us back to the previous display.
Now we'll see the contents of the folder
are marked as "Public in the Web."
And that's it!, We have now activated
"Drive HTML hosting"
for all files and subfolders
we store in this folder.
Let's click on "End" to exit this display.
Step 5:
Now, we need to know the URL
that was assigned to our folder.
In order to see it, we right-click on the folder,
but this time we pick the option "Details."
If we did it correctly,
we will see a new detail has been added:
"Storing."
This address leads to our folder
but in a web page format.
If the folder contains a file named index.html,
it will load it by default when someone access it.
Otherwise,
it will show a list with all the files
contained in this folder,
so we can also use it
to easily share
all its contents with the world.
If it is a file Google Drive can use,
it will show its contents directly in the browser.
Otherwise,
a download of the selected file will start.
To profit from the benefits of automatic synch,
the first thing we got to do is download the app
"Google Drive for Desktop,"
which is available for Mac and Windows.
Once installed, we need to wait
for the synch of the files in my unit to finish.
The time it'll take will depend on the size
and on the amount of files,
as well as on the speed of our Internet connection.
This will allow us to create and edit files
directly in our computer,
which will keep synchronized with the cloud,
therefore, every time we save a change,
and this will be automatically
and almost instantly shown in our page or application.
Another great advantage is that Google Drive
allows us to share folders with other users,
which will keep synchronized with their computers too,
as long as they have
the Google Drive for Desktop app installed.
This facilitates teamwork immensely.
This is one of the most powerful real-time collaboration tools
the Google Drive platform has to offer.
I invite you to watch this lesson again,
this time pausing it to follow the steps
and copy the code that is shown.
If you want to compare, you can see an example
on the website that is shown on screen.
That will be all for now.
See you next lesson: "Introduction to Google Charts,"
in which we'll learn, among other things,
how to do charts for your HTML5 apps,
and believe me, you don't want to miss it.
I say goodbye for now, guys, and remember:
keep on programming!