Post by Marti-Pair Furxheir S.H. on Aug 3, 2013 7:57:05 GMT -6
Welcome back students, in this second lecture, we will study the last 2 roles we haven't covered in the first lecture: The HTML/CSS coder and the Web Developer.
Let's start with the HTML/CSS coder and see what he or she does, which technologies he or she uses and which tools.
During the rest of this certificate, the HTML/CSS coder will be simply called "the Designer", the generic name for this position. Personally, I don't like it particularly because the term designer also refers to the term "Graphic Designer".
In all cases, the responsibility of the HTML/CSS coder is to generate the HTML and the CSS for the various templates of the future web site.
That leaves us with 3 major terms/technologies to define:
HTML is a programming language originally created in 1990 which even today is still the language web sites are made of. When you use a browser to visit a website, the information display is encoded using HTML. If you do a "View source" with your browser, it's HTML you will see.
An HTML file is a plain text document which contains tags enclosed between < and > characters. Everything that is between these two characters are instructions for the browser while everything outside of them is meant to be displayed in the browser.
Originally, to style your HTML file, such as changing the color or font of text or adding a background image, you needed to specify it in the HTML file using special tags, like the <font> tag.
This proved to be a poor separation between content and style. If you wanted to change the font color on a whole site, it could mean over 1000 font tags to change. It also added significant size to the HTML files and made it harder for screen readers for blind people to parse content.
That's where CSS files come in place. CSS is the acronym for Cascading Style Sheet.
A CSS file is typically loaded from your HTML file and contains definitions changing the styles of HTML tags.
One of the nice features of CSS files is that they are cascading: you can define a font family and a font-size for the whole page, and a different font-size for a sub-section without needing to redefine the font-family.
This is done via selectors, which are ways to select either groups of tags or a specific tag for styling. Many CSS selectors are not even available in HTML styling and provide the ability to style in exotic ways.
Furthermore, CSS provide new exiting styles that can be applied to tag, such advanced position abilities and the possibility to change the behavior of tags.
Using HTML, CSS and images, a HTML/Coder can produce complex, good looking websites but in a typical web development cycle, instead of producing the final HTML for the website, they instead produce templates for integration in the content management system.
From the HTML/CSS coder point of view, a template is an actual HTML file (with its associated CSS files and images) with place holder content. The menu items might be samples not really pointing anywhere or it might point to the other templates.
The 2nd course of the current certificate will teach basic skills on how to create such templates. In our case, we will learn how to build a template from scratch, and with one framework, the Twitter Bootstrap. There are many other frameworks to help the HTML/CSS coder to work.
As for tools? That's often up to the designer. They need a good HTML / CSS design tool. Dreamweaver was for years one of the most popular, but it's fallen behind as it couldn't keep up with modern design principles.
Many developers (coders) use a powerful coding software which also partly simplifies HTML/CSS design. Personally, I use SublimeText 2, after having used half a dozen other programs.
Now, for the developer.
The developer produces scripts (or, if you prefer, "code").
But what are scripts and why use them?
When the HTML coder produced HTML templates, these templates were as fixed as a Microsoft Word document can be: to change something in it, you need to open the document, edit it, and save it back.
When a website is managed by a developer, it can behave much more dynamically. They can allow to search file, change the sort order on articles, comments, retrieve data from another site like weather or latest news stories.
There are 2 main types of script available to a web developer: client-side and server-side.
A Client-side script is code run by the browser, once the site is loaded. This typically means using the javascript language. Client-side scripts allow to add advanced functions to a site that can react to the user interactions without reloading the page. For example, you can display a count-down timer which changes in real time. You can allow the user to hide elements on a page or build an accordion which displays only 1 element at a time in a big list.
Client-side code often provide that "wow" factor to web development, but because it is executed by the browser of each client, it is the most limited because new functions take years to roll-out on every browser.
Furthermore, because the code needs to be sent for interpretation to the browser, it cannot be used to enforce security: it can be easily disabled or modified to bypass it.
Still, if client-side scripting is used mainly to add a rich user-interface for the visitors while not being essential for website functionalities, it can make all of the difference.
Server-side scripting however, is code which is compiled and run by the web server itself, prior to the delivery of the website to the visitors. PHP is probably the most widely used server-side scripting language, but ASP, ASP.NET, Perl, Python, Ruby-on-Rails, Java (via JSP pages) are other popular choices. Please note that ASP and ASP.NET are not languages but technologies by Microsoft, but this will be probably be the only mention of them for the whole certificate.
There is no way the visitor can disable the code or even view the source code if the server is properly configured.
To be honest, the vast majority of web development is done using Server-Side scripting and client-side scripting is usually used only, like mentioned above, to add features to the user interface.
We could say that the HTML/CSS code is the visible portion of the system, that Client-Scripting adds bells and whistles to make it pop and that server side scripting is the engine serving the data for the system.
And where does the client-side scripts find this data? On many sites, data is simply stores in hidden files, sometimes in plain text, other times in XML, which we will see later.
But, more powerful websites have a richer data storage solution: a database system.
Most open source Content Management systems out there have what is called a MySQL backend.
It would be too complex to give a brief overview of MySQL and database, but the 4th and 5th classes of this certificate will cover MySQL and how to use MySQL in a PHP application.
I'll try anyway to explain: a database is a structured repository to store data in an efficient matter. Data is stored in Tables, which consist of columns (or fields) and rows. Columns are properties, like the Name of the person, while rows are elements stored in the table, like individual clients. If it's not enough for you to understand, don't despair, Lecture 5 of this class will introduce MySQL databases a little better.
And tools? The majority of developers use an advance program (like an IDE) to edit their code, but the exact program doesn't really matter and can vary from developer to developer. I personally use Sublime Text 2 for the moment. They also need some kind of FTP/SFTP/SCP program to upload their files to the server once they are done, but some IDE provide such functionalities.
The differences in the mindset of a developer vs the mindset of a designer
Almost anyone can learn to be a web developer or a web designer and because web development can often be done as a freelancer on your free time from your own home, more and more people decide to start a part time career as a web developer.
But the reality of development is general, is that out of every 100 developers, only 10 are actually good. And out of those 10, only 1 is truly a master at his or her trade.
Sure experience and training helps to reach the 10 that are good, as everyone initially started in the 90% that fall short.
But to reach the lever of master, more is needed: you need the right mindset.
And to add to the problem, there are thousands if not millions of trades in development. One developer might be amazing with complex database systems and another in building forms.
For example, I am a senior developer in general. In my personal field of expertise, I am a master of my trades (in the 1%). If I leave my trade to enter another web development section, it will be relatively easy for me to reach the 10%, and after a few months, I will reach the 1%. In fact, I did it several times over the last few years.
But if I were to focus on web design, even after years of full time experience, I would never reach the master level (the 1%). A master of web design might reach the 10% that are actually good in web development, but will most likely never reach the 1% that masters it.
The reason is that a web designer (called the Graphic designer in the first lecture) requires a very different mindset to that of a web developer.
It is possible to be good in both, but to become a master in either requires a certain level of thinking that usually makes it impossible to master the other.
I'll start with a clear example: Web development requires the ability to reuse existing code and to plan for future reuse of what you are currently building. As I mentioned, it is often the longest role in a big project so the ability to reuse existing code to reduce the workload is life-saving. Web design however, requires breaking free of existing designs to create something unique and original for the client.
When a master web developer plans a new project, he thinks: "What can I reuse from past projects to save time? Can I spend a little more time to make this feature reusable? In what way is this project similar to past projects so I can learn from my past mistakes and successes?"
When a master web designer plans a new project, he thinks: "What makes this project unique? What can I create that will make this website stand out from all of the others? Is there a trick I learned from another client I can redesign to make this site unique on its own?"
Sure, it's not that simple, I am simply illustrating some differences, but at the base, a developer is logical, reductionist, thinking about the long term use of his code, while the designer is at the base, an artist, intuitive and expressive, thinking about the current fashion about websites and sometimes even planning future designs to make the site evolve.
You can, in a way, alternate between both lines of thinking, but to truly master either professions, you need to attain a Zen like mastery of your trade in which you almost are your profession.
Reflect clearly on yourself: are you more of a "mathematician" or more of an "artist" in your thinking? Do you approach problems from a creative point of view or do you try to solve problems based on how you solved them in the past?
Regardless of your answer, learning web development would be a good move for a career in both professions: a master web designer able to help the web development team is a very sought after employee, just as a master web developer able to do design effectively becomes a one person army in web development since he or she becomes able to build websites from the first stage to the last.
But since I am personally a master web developer and not a master web designer, this certificate will focus almost exclusively on the former, but while giving you the tools to learn web design on your own.
This was the second lecture. Next week we will introduce the more important part of web development: the server. For the first time, we'll start to be a little technical and we'll get practical work assignment.
If you are not registered yet, I strongly suggest that you complete Lecture 1's assignment as well as this week's assignment, because next week, we will have our first fixed delivery date for an assignment.
This week, we have an homework and an assignment:
Homework: Install the trial of SublimeText 2, the IDE I personally use (until version 3 is final). You can find it at: www.sublimetext.com/2 for Windows, OS X and Linux.
You can use the free trial without a time limit, and since it will only be used as an introduction to IDEs in the future weeks, you will be able to either change your IDE for the certificate to another one, or purchase it for $70 USD (or keep using the trial). There are open-source alternatives, but SublimeText 2 packs a punch…
If you use Windows, I recommend installing WinSCP for FTP/SFTP/SCP operations. You can also use it using WINE for Mac Osx. You can follow the alternatives on this page, but not having a working Mac, I cannot recommend one: winscp.net/forum/viewtopic.php?t=6258
Assignment: Study the CMS you picked in the first assignment into more details.
This assignment is in 2 parts: You need to describe, as best as you can (no need to get highly technical, this is an introduction class), how :
1 ) A Web designer can style the website for client. For example, with Wordpress, you could describe that it uses Themes, talk about the Theme downloader in the back-end, explain that there is a tool to customize the theme. You would explain that there is a market for commercial themes as well as free themes, with a few examples of where to find them.
2 ) A Web developer can extend the functionalities of the CMS. For example, with Wordpress, you could explain that developers can write "Plugins" and publish their plugins in a central repository as well as offer them for sale. You could google "how to write a Wordpress plug-in", and write your understanding of what it takes in a sentence or two.
Let's start with the HTML/CSS coder and see what he or she does, which technologies he or she uses and which tools.
During the rest of this certificate, the HTML/CSS coder will be simply called "the Designer", the generic name for this position. Personally, I don't like it particularly because the term designer also refers to the term "Graphic Designer".
In all cases, the responsibility of the HTML/CSS coder is to generate the HTML and the CSS for the various templates of the future web site.
That leaves us with 3 major terms/technologies to define:
- HTML
- CSS
- Template
HTML is a programming language originally created in 1990 which even today is still the language web sites are made of. When you use a browser to visit a website, the information display is encoded using HTML. If you do a "View source" with your browser, it's HTML you will see.
An HTML file is a plain text document which contains tags enclosed between < and > characters. Everything that is between these two characters are instructions for the browser while everything outside of them is meant to be displayed in the browser.
Originally, to style your HTML file, such as changing the color or font of text or adding a background image, you needed to specify it in the HTML file using special tags, like the <font> tag.
This proved to be a poor separation between content and style. If you wanted to change the font color on a whole site, it could mean over 1000 font tags to change. It also added significant size to the HTML files and made it harder for screen readers for blind people to parse content.
That's where CSS files come in place. CSS is the acronym for Cascading Style Sheet.
A CSS file is typically loaded from your HTML file and contains definitions changing the styles of HTML tags.
One of the nice features of CSS files is that they are cascading: you can define a font family and a font-size for the whole page, and a different font-size for a sub-section without needing to redefine the font-family.
This is done via selectors, which are ways to select either groups of tags or a specific tag for styling. Many CSS selectors are not even available in HTML styling and provide the ability to style in exotic ways.
Furthermore, CSS provide new exiting styles that can be applied to tag, such advanced position abilities and the possibility to change the behavior of tags.
Using HTML, CSS and images, a HTML/Coder can produce complex, good looking websites but in a typical web development cycle, instead of producing the final HTML for the website, they instead produce templates for integration in the content management system.
From the HTML/CSS coder point of view, a template is an actual HTML file (with its associated CSS files and images) with place holder content. The menu items might be samples not really pointing anywhere or it might point to the other templates.
The 2nd course of the current certificate will teach basic skills on how to create such templates. In our case, we will learn how to build a template from scratch, and with one framework, the Twitter Bootstrap. There are many other frameworks to help the HTML/CSS coder to work.
As for tools? That's often up to the designer. They need a good HTML / CSS design tool. Dreamweaver was for years one of the most popular, but it's fallen behind as it couldn't keep up with modern design principles.
Many developers (coders) use a powerful coding software which also partly simplifies HTML/CSS design. Personally, I use SublimeText 2, after having used half a dozen other programs.
Now, for the developer.
The developer produces scripts (or, if you prefer, "code").
But what are scripts and why use them?
When the HTML coder produced HTML templates, these templates were as fixed as a Microsoft Word document can be: to change something in it, you need to open the document, edit it, and save it back.
When a website is managed by a developer, it can behave much more dynamically. They can allow to search file, change the sort order on articles, comments, retrieve data from another site like weather or latest news stories.
There are 2 main types of script available to a web developer: client-side and server-side.
A Client-side script is code run by the browser, once the site is loaded. This typically means using the javascript language. Client-side scripts allow to add advanced functions to a site that can react to the user interactions without reloading the page. For example, you can display a count-down timer which changes in real time. You can allow the user to hide elements on a page or build an accordion which displays only 1 element at a time in a big list.
Client-side code often provide that "wow" factor to web development, but because it is executed by the browser of each client, it is the most limited because new functions take years to roll-out on every browser.
Furthermore, because the code needs to be sent for interpretation to the browser, it cannot be used to enforce security: it can be easily disabled or modified to bypass it.
Still, if client-side scripting is used mainly to add a rich user-interface for the visitors while not being essential for website functionalities, it can make all of the difference.
Server-side scripting however, is code which is compiled and run by the web server itself, prior to the delivery of the website to the visitors. PHP is probably the most widely used server-side scripting language, but ASP, ASP.NET, Perl, Python, Ruby-on-Rails, Java (via JSP pages) are other popular choices. Please note that ASP and ASP.NET are not languages but technologies by Microsoft, but this will be probably be the only mention of them for the whole certificate.
There is no way the visitor can disable the code or even view the source code if the server is properly configured.
To be honest, the vast majority of web development is done using Server-Side scripting and client-side scripting is usually used only, like mentioned above, to add features to the user interface.
We could say that the HTML/CSS code is the visible portion of the system, that Client-Scripting adds bells and whistles to make it pop and that server side scripting is the engine serving the data for the system.
And where does the client-side scripts find this data? On many sites, data is simply stores in hidden files, sometimes in plain text, other times in XML, which we will see later.
But, more powerful websites have a richer data storage solution: a database system.
Most open source Content Management systems out there have what is called a MySQL backend.
It would be too complex to give a brief overview of MySQL and database, but the 4th and 5th classes of this certificate will cover MySQL and how to use MySQL in a PHP application.
I'll try anyway to explain: a database is a structured repository to store data in an efficient matter. Data is stored in Tables, which consist of columns (or fields) and rows. Columns are properties, like the Name of the person, while rows are elements stored in the table, like individual clients. If it's not enough for you to understand, don't despair, Lecture 5 of this class will introduce MySQL databases a little better.
And tools? The majority of developers use an advance program (like an IDE) to edit their code, but the exact program doesn't really matter and can vary from developer to developer. I personally use Sublime Text 2 for the moment. They also need some kind of FTP/SFTP/SCP program to upload their files to the server once they are done, but some IDE provide such functionalities.
The differences in the mindset of a developer vs the mindset of a designer
Almost anyone can learn to be a web developer or a web designer and because web development can often be done as a freelancer on your free time from your own home, more and more people decide to start a part time career as a web developer.
But the reality of development is general, is that out of every 100 developers, only 10 are actually good. And out of those 10, only 1 is truly a master at his or her trade.
Sure experience and training helps to reach the 10 that are good, as everyone initially started in the 90% that fall short.
But to reach the lever of master, more is needed: you need the right mindset.
And to add to the problem, there are thousands if not millions of trades in development. One developer might be amazing with complex database systems and another in building forms.
For example, I am a senior developer in general. In my personal field of expertise, I am a master of my trades (in the 1%). If I leave my trade to enter another web development section, it will be relatively easy for me to reach the 10%, and after a few months, I will reach the 1%. In fact, I did it several times over the last few years.
But if I were to focus on web design, even after years of full time experience, I would never reach the master level (the 1%). A master of web design might reach the 10% that are actually good in web development, but will most likely never reach the 1% that masters it.
The reason is that a web designer (called the Graphic designer in the first lecture) requires a very different mindset to that of a web developer.
It is possible to be good in both, but to become a master in either requires a certain level of thinking that usually makes it impossible to master the other.
I'll start with a clear example: Web development requires the ability to reuse existing code and to plan for future reuse of what you are currently building. As I mentioned, it is often the longest role in a big project so the ability to reuse existing code to reduce the workload is life-saving. Web design however, requires breaking free of existing designs to create something unique and original for the client.
When a master web developer plans a new project, he thinks: "What can I reuse from past projects to save time? Can I spend a little more time to make this feature reusable? In what way is this project similar to past projects so I can learn from my past mistakes and successes?"
When a master web designer plans a new project, he thinks: "What makes this project unique? What can I create that will make this website stand out from all of the others? Is there a trick I learned from another client I can redesign to make this site unique on its own?"
Sure, it's not that simple, I am simply illustrating some differences, but at the base, a developer is logical, reductionist, thinking about the long term use of his code, while the designer is at the base, an artist, intuitive and expressive, thinking about the current fashion about websites and sometimes even planning future designs to make the site evolve.
You can, in a way, alternate between both lines of thinking, but to truly master either professions, you need to attain a Zen like mastery of your trade in which you almost are your profession.
Reflect clearly on yourself: are you more of a "mathematician" or more of an "artist" in your thinking? Do you approach problems from a creative point of view or do you try to solve problems based on how you solved them in the past?
Regardless of your answer, learning web development would be a good move for a career in both professions: a master web designer able to help the web development team is a very sought after employee, just as a master web developer able to do design effectively becomes a one person army in web development since he or she becomes able to build websites from the first stage to the last.
But since I am personally a master web developer and not a master web designer, this certificate will focus almost exclusively on the former, but while giving you the tools to learn web design on your own.
This was the second lecture. Next week we will introduce the more important part of web development: the server. For the first time, we'll start to be a little technical and we'll get practical work assignment.
If you are not registered yet, I strongly suggest that you complete Lecture 1's assignment as well as this week's assignment, because next week, we will have our first fixed delivery date for an assignment.
This week, we have an homework and an assignment:
Homework: Install the trial of SublimeText 2, the IDE I personally use (until version 3 is final). You can find it at: www.sublimetext.com/2 for Windows, OS X and Linux.
You can use the free trial without a time limit, and since it will only be used as an introduction to IDEs in the future weeks, you will be able to either change your IDE for the certificate to another one, or purchase it for $70 USD (or keep using the trial). There are open-source alternatives, but SublimeText 2 packs a punch…
If you use Windows, I recommend installing WinSCP for FTP/SFTP/SCP operations. You can also use it using WINE for Mac Osx. You can follow the alternatives on this page, but not having a working Mac, I cannot recommend one: winscp.net/forum/viewtopic.php?t=6258
Assignment: Study the CMS you picked in the first assignment into more details.
This assignment is in 2 parts: You need to describe, as best as you can (no need to get highly technical, this is an introduction class), how :
1 ) A Web designer can style the website for client. For example, with Wordpress, you could describe that it uses Themes, talk about the Theme downloader in the back-end, explain that there is a tool to customize the theme. You would explain that there is a market for commercial themes as well as free themes, with a few examples of where to find them.
2 ) A Web developer can extend the functionalities of the CMS. For example, with Wordpress, you could explain that developers can write "Plugins" and publish their plugins in a central repository as well as offer them for sale. You could google "how to write a Wordpress plug-in", and write your understanding of what it takes in a sentence or two.