The Digital Revolution is something that came to change our lives forever.
All the information in the information in the world, our favorite music,
series and movies, YouTubers, influencers even our friends are
here, in our pocket, in just a click of distance.
So close like you are about to understand how this works.
Everybody welcome to the second episode of: “THE DEFINITIVE GUIDE: PROGRAMMING"
On December 1990, Geneva, Switzerland,
the Cern putted into function the first web server in history.
The idea was to create a system that allowed researchers to share information easily
4 years later, it would give the access to the individuals
and Internet enterprises, quickly becoming websites the most used to offer information.
Perhaps most people have been introduced to the world of information
after the big blue colossus born in the campus of Harvard.
But a few years ago, most of the Internauts wanted to have their own websites.
Google was not the most popular search engine and anyone who had
their own space in the web, probably had a little bit of knowledge about the html code.
Later the era of blogs arrived, and everyone made one.
Here everyone could make their own website without knowing anything about programming,
and every user controled the information that shared.
But then the social networks came and we ended the age of personal
websites, and the web hegemony was of a few colossus
We arrived to the point where everyone has accounts in several
social networks, but few know how they work
Having a personal website nowadays is something that does not make sense,
but is still a fundamental thing for a great ammount of companies
need their own space that organize and visibilize them
in a world everyday more globalized by the network.
Welcome all to: "Web Development for Dummies"
I'm your host, Hackerguy
And today i'm gonna show you how to create
all the visual stuff and the languages like HTML, CSS and JavaScript
All you need to now about the foundings of Web Design
HTML, CSS and JavaScript, this are the bases on web design of today,
and by which every website that you know works with
They deal with everything related to visual design,
the color of the letters, their size, even their animations, are posible thanks to them.
HTML is a language of standarized market that, through the use of labels,
gives instructions to the navegator, to visualize a website accurately.
Here we go with a few examples:
Define the tittle of the website. Allows to create links between
different websites or pages from the same site
Allows to create a list of elements.
First Element
Second element
Third element
Shows a text in black
Shows a highlighted text
Shows a inclined text
Creates a division
In the beginning and first years of the development of the Internet
this was a problem and a pain in the head for the web developers,
because it took a lot of time to standarize the HTML,
making that depending on which navegator you had, a same website could look different.
Even that in a big number, the actual navegators mantein an estándar very similar of how
interpretate the elements of a website, there are Technologies that are not avaible in everyone of them
For example, the image format WEBP developed by Google,
which allows to have images on great quality with a low weight.
What else do you want?
HTML takes care of the structure of the website, it would be similar to the beams of a bulding,
is the model which gives form to the elements inside a website,
but without specify the shape, colors, position or type of letter.
But if it was only by HTML, websites could only have black letters,
some images in their original shape and maybe some video,
but without specify a shape on every one of this elements
Something that the old internauts probably remember
An example of this, is the first website created on history,
which is made 100% on HTML,
and only has with some text, hyperlinks and a tittle highlighted in bold.
Because of this, the actual web as you know it, has developed
thanks to a technology called CSS (CASCADING STYLE SHEETS)
or also called CASCADE STYLE PAGES,
which is the technology which gives the design, color to the html, making possible
to order the elements inside a website as we want.
Basically, it’s a layer of styles, which allows us to select objects like an image or a form, and give it the style
that we want, making it bigger or smaller, changing the color of a text or to order the elements of a list.
Through the use of kinds, we can identify the labels
of the HTML code and add styles,
for example:
The kind of CSS can be utilizad adding a point in front of the name.
In this example, every text that is inside the label div, with the style kind
will appear on a red color
So we have three div elements, but only two of them have the
"Style" kind, the two are going to show appear in red, and the one left, in black.
It would end up like this
CSS was born in 17 December of 1996
before the development of this one, all the presentational
of the html documents was included in the html code
For example: The colors of the letter, the styles of the background
how the elements were aligned, the edges and also the sizes were described explicitly
Sometimes in a very redundant way, becoming ridiculous
All of that inside the HTML
like a sandwich
CSS allows the designers to move all the presentational information
to another file, to the style sheet, ending with a more simple html code
And all of this before the born of html, in 1993
And in the moment of its creation counted with few resources
but they were more than enough to create the first websites
like we know them today
But nowadays we could take them as vulgar
in those days, having a website with images on the background
and red letters automatically made you the envy of every Cybercoffee
With time and the great active comunity of programmers
that css have it has been incorporated
some new functions, that goes beyond ordering elements inside a website
being able to achieve creating animations enterily with css or even simple games.
This functions that have been developed in the present, mainly after the year 2010
until the moment could be made with the oldest technologies, like the forgotten flash
which allowed to execute animations in your navegator, but that consumed a lot of resources
and had some security problems, because of that Steve Jobs killed it
at not incorporating it into the iPhones, because it consumed a lot of battery.
But there is a language that with time it started to develope,
and in the last years became very popular, allowing to obtain similar results
to the one obtained by Flash in its moment, and which is completely executed by the navegator.
This lenguage is Java.
Trough JavaScript (not confuse it with Java) you can add interactivity to the site,
like for example, send an alert, detect when you click on an element,
create complex animations or even games on the navegator.
JavaScript is a technology that has developed a lot in the last years,
that even if started as a lenguage that was executed on the same side as the client,
being interpreted by your navegator, today with the new technologies, like NodeJS,
we can use it alongside of the server, allowing to program backends enterily in JavaScript.
JavaScript allows us to interact with elements of the website
for example: Giving back an answer when we click on a information button
To detect a particular element
we are going to use the ID property on the HTML labels.
Different to class, where you select all the elements that have the same type
ID is an unique identificator, wich makes reference to only one HTML label.
In this code, there are 4 point to analyze
First in the part where it says “Document", that we utilize
to make reference to the HTML document whole and every label wich makes it up.
But like we only want to select one in particular,
we apply it a function called getElementByld
that searched the label that has the ID that we specify, in this case “Banana”
Once you find the Id, we re going to apply another function called addEventListener,
which allow us to execute a specific function, when we
interact with and HTML element, in our case when we click it.
This way we define the parameter “click”,
For example we could activate the function when we pass
the mouse over an element of the parameter “mouseover”
The second parameter of the function addEventListener is another function,
that has no parameter, wich only serves to summon the alert that executes
when you do click on the HTML element.
This way, when we click the text “Clickme”, an alert is going to come
with a text that says: “You did it, dude”
Every use of this technologies, HTML,CSS and JavaScript, made web apps to be more robust,
and that their codes became more extense, so nowadays Frameworks appeared,
which are production environments, which allows to order the development of the code
that you can use to make a bigger app, in an ordered way
and reusing the bigger ammount of code possible to make it more eficient.
This enviroments are financied by enterprises like Facebook in the case
of Reactjs, or Google with Agularjs and Angular2.
Also there is a third famous Framework called VUE.JS
Through this development enviroments you can use the last updates on javascript
in every navegator, even if the navegator doesn’t have with those characteristics,
because the sites have an instance of compilation where every new code translates as old code
in the most eficient way possible to execute in every navegator,
and with this solving most of the compatibility errors that existed until that moment.
With the massification of the internet, we don’t find someone without a social network
It's almost so rare like a few years ago, finding another internaut,
The base of these websites is based on us memorizing many username and passwords
and the Login became the main door of the most used websites.
But we are going to talk about that in the next episode.
Space Odyssey inmortalize, and in a representative way
that first step in the evolution towards becoming technologically superior beings:
The use of tools.
If we go to the definition, technology is nothing more than a set of knowledge of techniques.
Memories, the procedure and the subject that bring us here today: Tools.
When programming, it’s not about programing languages.
There are a variety of apps and technologies that let us develop
and apps on a more neat way, giving us a lot of tools
so we could develop a more clean and faster code.
Increasing our eficiency and reducing the times of development
with the objective of improve the users’s experience.
So this time we are going to turn down the rythm,
take a breakfast in the office and we are going to center in the order,
the most important point on any project.
Thank you so much for seeing this episode
we hope that you've enjoyed it
we invite you to subscribe to the course so
you can still see it and to subscribe to our channel
if it's the first time on this channel
An alert will appear saying: "You did it dude"
