@ -27,6 +27,8 @@ A *program* can be anything that is written with code; websites, games, and phon
✅ Do a little research: who is considered to have been the world's first computer programmer?
Ada Lovelace is considered to have been the world's first computer programmer.
## Programming Languages
Programming languages enable developers to write instructions for a device. Devices can only understand binary (1s and 0s), and for *most* developers that's not a very efficient way to communicate. Programming languages are the vehicle for communication between humans and computers.
@ -185,12 +187,34 @@ When a developer wants to learn something new, they'll most likely turn to docum
✅ Do some research: Now that you know the basics of a web developer's environment, compare and contrast it with a web designer's environment.
Web Developer: A web developer primarily focuses on the technical aspects of building websites or web applications. Their role involves coding, scripting, and implementing the functionality of a website.
Web Designer: A web designer focuses on the visual and interactive elements of a website. They are responsible for creating the overall look and feel, including layout, color schemes, typography, and graphical elements.
---
## 🚀 Challenge
Compare some programming languages. What are some of the unique traits of JavaScript vs. Java? How about COBOL vs. Go?
JavaScript is a dynamically typed scripting language primarily used for client-side web development.
It is interpreted by web browsers and allows for interactive web pages with features like form validation, dynamic content, and interactivity.
JavaScript has a wide range of frameworks and libraries (e.g., React, Angular, Vue.js) that facilitate front-end and full-stack development.
Java is a statically typed, general-purpose programming language.
It is compiled into bytecode and runs on the Java Virtual Machine (JVM), making it platform-independent.
Java is known for its strong typing, extensive libraries, and high-level of security.
It is commonly used for building large-scale enterprise applications, Android app development, and server-side programming.
COBOL (Common Business-Oriented Language) is a high-level, procedural programming language developed in the 1950s.
It was designed specifically for business applications and is still widely used in legacy systems, especially in the financial and government sectors.
COBOL prioritizes readability and comprehensibility, using English-like syntax and structured programming constructs.
Go (also known as Golang) is a statically typed, compiled programming language created by Google in 2007.
It aims to combine the performance of low-level languages with the productivity and readability of high-level languages.
Go has a simple and concise syntax, with built-in support for features like garbage collection, concurrency, and networking.
It is known for its efficiency, scalability, and strong support for concurrent programming through goroutines and channels.
@ -198,6 +222,10 @@ Compare some programming languages. What are some of the unique traits of JavaSc
Study a bit on the different languages available to the programmer. Try to write a line in one language, and then rewrite it in two others. What did you learn?
JavaScript:
Console.log('I learned the difference between web designer and web developer. I also found out the purpose of usage each programming language')
@ -8,4 +8,14 @@ There are many tools that a web developer may need that are on the [MDN document
Exemplary | Adequate | Needs Improvement
--- | --- | -- |
|Explained why web developer would use tool| Explained how, but not why developer would use tool| Did not mention how or why a developer would use tool |
|Explained why web developer would use tool| Explained how, but not why developer would use tool| Did not mention how or why a developer would use tool |
1.) Frontend Framework = React
2.) Backend Framework = Express.js
3.) Code Editors = Visual Studio Code
A developer would use these tools because a developer need to build frontend and backend part of the web application with code editor. In frontend, they will create an UI of website. Meanwhile, a developer will create database, API for significant funtionalities such as Authentication, Post, and Comment. These two parts will be occured in code editor like Visual Studio Code.
@ -168,6 +168,8 @@ As in the subject, in the body (optional) also use the imperative, present tense
✅ Take a few minutes to surf around GitHub. Can you find a really great commit message? Can you find a really minimal one? What information do you think is the most important and useful to convey in a commit message?
The most important and useful information to convey in a commit message is the intention and purpose of the changes. This helps other developers understand the reasoning behind the code modifications and makes it easier to review and maintain the codebase in the future.
### Task: Collaborate
The main reason for putting things on GitHub was to make it possible to collaborate with other developers.
@ -48,6 +48,9 @@ In the developer tool area of your browser, you'll find the Lighthouse tool. Thi
✅ Find Lighthouse in your browser's developer tool panel and run an analysis on any site. what do you discover?
Lighthouse is an open-source tool developed by Google that can be accessed through the browser's developer tool panel. It allows you to run audits on a website to assess its performance, accessibility, best practices, SEO, and more. When you run a Lighthouse analysis on a website, it provides a comprehensive report with various metrics and recommendations for improvement.
## Designing for accessibility
Accessibility is a relatively large topic. To help you out, there are numerous resources available.
@ -64,6 +67,8 @@ People see the world in different ways, and this includes colors. When selecting
✅ Identify a web site that is very problematic in its use of color. Why?
Color as Sole Indicator: Using color as the sole means of conveying important information or instructions can pose accessibility issues for individuals who are colorblind or have difficulty perceiving certain colors. It's important to provide alternative indicators or additional visual cues to ensure inclusivity.
### Use the correct HTML
With CSS and JavaScript it's possible to make any element look like any type of control. `<span>` could be used to create a `<button>`, and `<b>` could become a hyperlink. While this might be considered easier to style, it conveys nothing to a screen reader. Use the appropriate HTML when creating controls on a page. If you want a hyperlink, use `<a>`. Using the right HTML for the right control is called making use of Semantic HTML.
@ -110,6 +115,8 @@ Good link text briefly describes what's on the other side of the link. In the ab
✅ Surf the web for a few minutes to find pages that use obscure linking strategies. Compare them with other, better-linked sites. What do you learn?
Well-linked sites often use anchor text that accurately describes the destination page. This helps users understand what they can expect when they click on the link. Descriptive anchor text also benefits search engine optimization (SEO) by providing context and relevance.
#### Search engine notes
As an added bonus for ensuring your site is accessible to all, you'll help search engines navigate your site as well. Search engines use link text to learn the topics of pages. So using good link text helps everyone!
@ -157,6 +164,8 @@ Some users are unable to use a mouse or trackpad, instead relying on keyboard in
✅ Go to any web site and try to navigate through it using only your keyboard. What works, what doesn't work? Why?
Keyboard navigation is an important accessibility feature that allows users to navigate through websites using only their keyboard, without relying on a mouse or other pointing devices.
## Summary
A web accessible to some is not a truly 'world-wide web'. The best way to ensure the sites you create are accessible is to incorporate accessibility best practices from the start. While there are extra steps involved, incorporating these skills into your workflow now will mean all pages you create will be accessible.
@ -174,45 +183,45 @@ Take this HTML and rewrite it to be as accessible as possible, given the strateg
Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
</div>
<divclass="footer">
<divclass="footer-section">
<spanclass="button">Sign up for turtle news</span>
@ -13,3 +13,11 @@ Your first task would be to identify this site, detail the ways in which you thi
----
Student Report: includes paragraphs on how inaccessible the site is, the Lighthouse report captured in pdf, a list of ten points to improve, with details on how to improve it
https://nymag.com/
This website is inaccessible because there isn't analtical tools and any functionalities.
How to improve it: The UI needs to be fixed and it doesnn't look good. With analytic tools, there should a category for each news.
koyuncuoglum95
2 years ago