Lesson 2.pdf

Republic of the Philippines CAGAYAN STATE UNIVERSITY – CARIG CAMPUS COLLEGE of INFORMATION and COMPUTING SCIENCES Carig Sur, Tuguegarao City (078) 395-2785 (loc 032, 028) CSU-Carig CI...

Republic of the Philippines CAGAYAN STATE UNIVERSITY – CARIG CAMPUS COLLEGE of INFORMATION and COMPUTING SCIENCES Carig Sur, Tuguegarao City (078) 395-2785 (loc 032, 028) CSU-Carig CICS [email protected] LESSON 2 CSU Vision Transforming Web Development Foundations lives by Educating for the BEST. 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; CSU Mission CSU is committed to Reading transform the lives of people and communities through high Internet is everywhere, thousands of web pages are published every day and someone has to quality instruction create all of that code. Now enters the web developer. and innovative research, development, production and Types of Web Developers extension. 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 Core Values called the client. They work primarily with HTML, CSS, and JavaScript. These are known as Front- C- Competence S – Social end technologies because they represent what is front of the user as they interact with the website. Responsibility U – Unifying Presence 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 HyperText Markup Language. 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 1st Semester Page |1  Republic of the Philippines CAGAYAN STATE UNIVERSITY – CARIG CAMPUS COLLEGE of INFORMATION and COMPUTING SCIENCES Carig Sur, Tuguegarao City (078) 395-2785 (loc 032, 028) CSU-Carig CICS [email protected] generates the DOM (Document Object Model). The DOM describes the structure of the page and CSU Vision like an outline or a map of the content within a website. When you add mark-up tags to a document, Transforming you are building the map that defines the role of your content. Part of the job involves finding the lives by Educating for errors, so good front-end developer must enjoy writing as well as correcting code. HTML is so the BEST. 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 CSU Mission the tasks where you will know your specialization within the different types of developers. There CSU is committed to transform the lives developers who are more interested in defining the look and feel of a site and enjoy working on the of people and communities User Experience (UX) and there are those who prefer to work on the functionality of the site called through high User Interface (UI). However, all developers need to learn how CSS influence a document. quality instruction and innovative research, development, Web design also requires a good understanding of how people experience sites and browse production and content. It means learning about how navigation drives the User Experience and how to present extension. 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 Core Values C- Competence rules, these are set of rules that describe the priority of how the styles are rendered on a page. The S – Social rules can be as simple as defining colors, sizes, fonts and applying traditional design concepts like Responsibility U – Unifying contrast, alignment, proximity, etc. A good example of this is the https://csszengarden.com, this Presence 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 3rd 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 1st Semester Page |2  Republic of the Philippines CAGAYAN STATE UNIVERSITY – CARIG CAMPUS COLLEGE of INFORMATION and COMPUTING SCIENCES Carig Sur, Tuguegarao City (078) 395-2785 (loc 032, 028) CSU-Carig CICS [email protected] is often use in a development work flow as a way to manage and control the development CSU Vision experience. It means doing things like compressing, or combining code to make it run faster using Transforming work flow tools like NodeJS, WebPack and GulpJS. JavaScript has become a way of running lives by Educating for applications that are going to make your life easier. the BEST. References Guru99. (2020). What is Backend Developer? Skills to become a Web Developer. Retrieved August 12, CSU Mission 2020, from Guru99: https://www.guru99.com/what-is-backend- CSU is committed to transform the lives developer.html#:~:text=Backend%20developer%20focuses%20on%20databases,an%20article% of people and communities 20on%20the%20blog. through high quality instruction and innovative Lynda.com. (2020). Web Development Foundations: Full-Stack vs Front-End. Retrieved August 12, 2020, research, development, from lynda.com: https://www.linkedin.com/learning/web-development-foundations-web- production and technologies extension. Core Values C- Competence S – Social Responsibility U – Unifying Presence 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 1st Semester Page |3