Lesson 2.docx

 **CSU Vision** *Transforming lives by* *Educating for the BEST.* **CSU Mission** *CSU is committed to transform the lives of people and* *communities* *through high* *quality instruction and innovative research,* *development,* *production and extension.* **Core Val...

 **CSU Vision** *Transforming lives by* *Educating for the BEST.* **CSU Mission** *CSU is committed to transform the lives of people and* *communities* *through high* *quality instruction and innovative research,* *development,* *production and extension.* **Core Values** *C- Competence S -- Social* *Responsibility U -- Unifying* *Presence* Republic of the Philippines CAGAYAN STATE UNIVERSITY -- CARIG CAMPUS  **C**OLLEGE *of* **I**NFORMATION *and* **C**OMPUTING **S**CIENCES  *Carig Sur, Tuguegarao City* \(078) 395-2785 (loc 032, 028) CSU-Carig CICS info.cics\@csucarig.edu.ph  LESSON 2 **Web Development Foundations** ***Lesson Objectives*** At the end of the lesson, you should be able to: 1\. Recognize the different types of Web Developers; and 2\. Put into own words the roles of HTML, CSS and JavaScript; ***Reading*** Internet is everywhere, thousands of web pages are published every day and someone has to create all of that code. Now enters the web developer. **Types of Web Developers** There are many roles that live under the web developer umbrella. A web developer builds and maintains content for the web targeting different platforms including the desktop, tablets and hand held devices. **Front-end developers** work with languages that render in the browser which is also called the client. They work primarily with HTML, CSS, and JavaScript. These are known as Front end technologies because they represent what is front of the user as they interact with the website. Some sites require a special server because certain content has to be customized for each user based on their data. That type of development is called **Back-end development (Back-end developers)** because most of the action is not happening in front of the user but on a server in the background. **Backend developer** focuses on databases, scripting, and the architecture of websites. Code written by back-end developers helps to communicate the database information to the browser. Someone who works with all the different layers of web development is sometimes referred to as a Full-stack developer. Realistically, all web developers have to have an understanding of the whole stack. A **stack** is a set of tools both front-end and back-end that a company uses to build its web presence. A true **full-stack developer** is a unicorn among developers, that are very few in far between. Now, all developers are expected to know enough about front-end and back-end tools, and then specialized on the different parts of the process. **The Role of HTML** Whether you're a front-end and back-end or full-stack developer, there is one language that everyone needs to master, and that is HTML. **HTML** stands for **H**yper**T**ext **M**arkup **L**anguage. It describes the content and defines the structure within a web page. HyperText means that documents on the web are not meant to be consumed in a linear fashion, it is designed to be linked to other documents. A front-end developer has to understand the relationship of each entire site and how documents relate to one another. This is called **Information Architecture (IA),** it involves how best to structure a site, how a user is going to navigate and what type of access users need to other content. The second part of HTML is the Mark-up Language, set of tags that are added to the text of a web page to define its structure. It has some critical roles. First, it defines the role each piece of content will have. Some content will become the main headline while other content links in the navigation. Some tags describe non textual elements like images or video. All web developers are masters of the mark-up language. They have to be detailed-oriented and passionate about structure and semantics. Mark-up does something else that is really important, it *CICS Goal: The College shall produce competent ICS professionals with strong technical education and research capabilities coupled with application-oriented perspective to ensure that they can effectively serve the needs of individuals and organizations.* **Worktext in Special Topics *(****for validation purposes and exclusive use of the CHK only)* By Larra Mae Balisi, School Year 2020-2021 1^st^ Semester Page \| 1  **CSU Vision** *Transforming lives by* *Educating for the BEST.* **CSU Mission** *CSU is committed to transform the lives of people and* *communities* *through high* *quality instruction and innovative research,* *development,* *production and extension.* **Core Values** *C- Competence S -- Social* *Responsibility U -- Unifying* *Presence* Republic of the Philippines  CAGAYAN STATE UNIVERSITY -- CARIG CAMPUS  **C**OLLEGE *of* **I**NFORMATION *and* **C**OMPUTING **S**CIENCES  *Carig Sur, Tuguegarao City* \(078) 395-2785 (loc 032, 028) CSU-Carig CICS info.cics\@csucarig.edu.ph  generates the **DOM (Document Object Model).** The DOM describes the structure of the page and like an outline or a map of the content within a website. When you add mark-up tags to a document, you are building the map that defines the role of your content. Part of the job involves finding the errors, so good front-end developer must enjoy writing as well as correcting code. HTML is so important to a website, that if the DOM is not coded correctly it can break the entire website. None of the design or the functionality of a site will work if the HTML is not coded correctly. **The Role of CSS** Design plays an important part and it's a key component of every successful website. Design is one the tasks where you will know your specialization within the different types of developers. There developers who are more interested in defining the look and feel of a site and enjoy working on the **User Experience (UX)** and there are those who prefer to work on the functionality of the site called **User Interface (UI)**. However, all developers need to learn how CSS influence a document. Web design also requires a good understanding of how people experience sites and browse content. It means learning about how navigation drives the User Experience and how to present content to the user. In practice design for a website, it requires learning how to use CSS. **CSS** stands for Cascading Style Sheets; unlike HTML it is made up of two parts. First, defining a set of rules or stylesheet for how the DOM is translated into visual form. Second is the cascading style rules, these are set of rules that describe the priority of how the styles are rendered on a page. The rules can be as simple as defining colors, sizes, fonts and applying traditional design concepts like contrast, alignment, proximity, etc. A good example of this is the [https://csszengarden.com], this demonstrates how the same content can be described to look in completely different ways. The site showcases different styles for the same HTML page. CSS will also let you add some motion and even a level of interactivity to your designs. Learning CSS means also learning to work with elements of motion and the language of interaction as it relates to graphic design. As CSS matured, things like variables, calculations and more complex features have made into the language. So, CSS now has some similar to what's available in programming languages. One of the big differences in designing for the web is that content has to be **Responsive**, in other words adjust to the proportions of different viewports like desktops, laptops and mobile devices. The CSS language is always changing, there have been 3 major revisions and the 3^rd^ revision, CSS3, has been split into independent modules that will expand in the future. So, there will always be new changes in the language. **The Role of JavaScript** Everyone who works in the world of web development has to be comfortable with a certain amount of programming. For front-end development that means learning about **JavaScript**, the language responsible for managing interaction within a browser. As a status of front-end developer, even 50% of back-end developers say they use some form of JavaScript daily. Those who identifies themselves as full-stack developers also use JavaScript almost as much. JavaScript interacts with the DOM handling events, loading and unloading media, and creating, modifying and deleting elements in a page. So, this is a job for someone who appreciates creating and designing interactions with content. There have been several revisions to the language with a new version always on the horizon. Like with CSS, it's more of like a living implementation which means that developers have to learn and explore how new features will impact current and future clients. Developers also have to worry about browser support issues, because the language has matured rapidly. Browsers don't always keep up with the latest changes and improvement. JavaScript doesn't behave in the same way in every browser and debugging this code can be specially frustrating but it is a necessary part of the job. Some developers write code and languages other than JavaScript, that takes advantage on new techniques and improvements that will eventually get converted into JavaScript. So, some web development involves learning these supersets of JavaScript like TypeScript and Go. JavaScript has also been implemented on the server-side and *CICS Goal: The College shall produce competent ICS professionals with strong technical education and research capabilities coupled with application-oriented perspective to ensure that they can effectively serve the needs of individuals and organizations.*  **Worktext in Special Topics *(****for validation purposes and exclusive use of the CHK only)* By Larra Mae Balisi, School Year 2020-2021 1^st^ Semester Page \| 2  **CSU Vision** *Transforming* *lives by* *Educating for* *the BEST.* **CSU Mission** *CSU is committed to* *transform the lives* *of people and* *communities* *through high* *quality instruction* *and innovative* *research,* *development,* *production and* *extension.* **Core Values** *C- Competence* *S -- Social* *Responsibility* *U -- Unifying* *Presence*  Page \| 3 Republic of the Philippines CAGAYAN STATE UNIVERSITY -- CARIG CAMPUS  **C**OLLEGE *of* **I**NFORMATION *and* **C**OMPUTING **S**CIENCES  *Carig Sur, Tuguegarao City* \(078) 395-2785 (loc 032, 028) CSU-Carig CICS info.cics\@csucarig.edu.ph is often use in a development work flow as a way to manage and control the development experience. It means doing things like compressing, or combining code to make it run faster using work flow tools like NodeJS, WebPack and GulpJS. JavaScript has become a way of running applications that are going to make your life easier. ***References*** Guru99. (2020). *What is Backend Developer? Skills to become a Web Developer*. Retrieved August 12, 2020, from Guru99: https://www.guru99.com/what-is-backend developer.html\#:\~:text=Backend%20developer%20focuses%20on%20databases,an%20article% 20on%20the%20blog. Lynda.com. (2020). *Web Development Foundations: Full-Stack vs Front-End*. Retrieved August 12, 2020, from lynda.com: https://www.linkedin.com/learning/web-development-foundations-web technologies *CICS Goal: The College shall produce competent ICS professionals with strong technical education and research capabilities coupled with application-oriented perspective to ensure that they can effectively serve the needs of individuals and organizations.* **Worktext in Special Topics *(****for validation purposes and exclusive use of the CHK only)* By Larra Mae Balisi, School Year 2020-2021 1^st^ Semester