Spring 23-24

Semester 4

Web Technology
Dr. Rodaina Abdelsalam
rabdelsalam@eelu.edu.eg
 About the course
New
• Course code: IT230 Regulations

• Course Name: Web Technology

• Credit hours: 3 hours

This course is a prerequisite to the following course

• Sematic Web and Ontology (AI435)– 3rd year 2nd semester
 About the course
Old
• Course code: NWE304 Regulations

• Course Name: Web Engineering (1)

• Credit hours: 3 hours

This course is a prerequisite to the following course

• Web Engineering 2 (NWE405)– 4th year 1st semester
Student assessments

• 10% Attendance and Participation

• 20% Quizzes (2 quizzes each 10%)
• 20% Midterm Exam
• 50% Final Exam

• Types of Questions
• MCQ
• T/F
• Essay 50%
Course Outline
1. Introduction to Internet Concepts
2. Front End Development: HTML – CSS – JS.
3. Backend Development: Web Development Platforms: J2EE – PHP
4. Content Management Systems: Drupal – Joomla
5. Introduction to Web Development Frameworks: Laravel – Symfony
Before we start
Before we start
• If you are interested in pursuing web design or production as a career,
you’ll need to bring your skills up to a professional level.
• Employers may not require a web design degree, but they will expect
to see working sample sites that demonstrate your skills and
experience. These sites can be the result of class assignments,
personal projects, or a simple site for a small business or organization.
• What’s important is that they look professional and have well written,
clean HTML, style sheets, and possibly scripts behind the scenes.
• Getting an entry-level job and working as part of a team is a great way
to learn how larger sites are constructed and can help you decide
which aspects of web design you would like to pursue.
Before we start
What Does a Web Designer Do?
• Over the years, the term “web design” has become a catchall for a process that
encompasses a number of different disciplines, from user experience design, to
document markup, to serious programming.
• The term “web design” has come to encompass a number of disciplines,
including:
• Visual (graphic) design
• User interface and experience design
• Web document and style sheet production
• Scripting and programming
• Content strategy
• Multimedia
• If you are designing a small website on your own, you will need to wear many
hats, you may be a part-time graphic designer, writer, HTML author, and
information architect, but to you, it’ll just feel like “making web pages.” Nothing
to worry about.
Before we start
• Large-scale websites are almost always created by a team of people,
numbering from a handful to hundreds.
• In this scenario, each member of the team focuses on one facet of the
site-building process. If that is the case, you may be able to simply
adapt your current set of skills (writing, Photoshop, programming,
etc.) and interests to the new medium.
• There are four very broad categories typically covered under the
umbrella term “web design”; design, development, content strategy,
and multimedia.
Before we start
Design
• “How something looks”!!!.
• On the Web, the first matter of business is designing how the site works.
Before picking colors and fonts, it is important to identify the site’s goals,
how it will be used, and how visitors move through it.
• These tasks fall under the disciplines of:
• Interaction Design (IxD)
• The goal of the Interaction Designer is to make the site as easy, efficient, and delightful to use
as possible.
• User Interface (UI) design
• It is closely related to interaction design, but tends to be more narrowly focused on the
functional organization of the page as well as the specific tools (buttons, links, menus, and so
on) that users use to navigate content or accomplish tasks.
• User Experience (UX) design.
• The UX designer ensure the entire experience with the site is favorable. UX design is based on
a solid understanding of users and their needs based on observations and interviews.
Before we start
Design
• Some of the documents an IxD, UI, or UX designer might produce
include:
• User research and testing reports
• Understanding the needs, desires, and limitations of users is central to the success of the
design of the site or web application.
• This approach of designing around the user’s needs is referred to as User Centered
Design (UCD), and it is central to contemporary design.
• Site designs often start with user research, including interviews and observations, in
order to gain a better understanding of how the site can solve problems or how it will be
used.
• It is typical for designers to do a round of user testing at each phase of the design process
to ensure the usability of their designs.
• If users are having a hard time figuring out where to find content or how to move to the
next step in a process, then it’s back to the drawing board.
Before we start
Design
• Wireframe diagrams
• A wireframe diagram shows the structure of a
web page using only outlines for each content
type and widget.
• The purpose of a wireframe diagram is to
indicate how the screen real estate is divided
and indicate where functionality and content
such as navigation, search boxes, form
elements, and so on, are placed, without any
decoration or graphic design.
• They are usually annotated with instructions
for how things should work so the
development team knows what to build.
Before we start
Design
• Site diagram
• A site diagram indicates the structure of
the site as a whole and how individual
pages relate to one another.
• Some site diagrams fill entire walls!
Before we start
Design
Visual (graphic) design
• Because the Web is a visual medium, web pages require attention to presentation
and design.
• A graphic designer creates the “look and feel” of the site—logos, graphics, type,
colors, layout, etc.—to ensure that the site makes a good first impression and is
consistent with the brand and message of the organization it represents.
• Visual designers typically generate sketches of the way the site might look. They
may also be responsible for producing the graphic files in a way that is optimized
for delivery over the Web.
• If you are interested in doing the visual design of commercial sites professionally,
you should get graphic design training as well as a strong proficiency in Adobe
Photoshop (the industry standard) or Adobe Fireworks.
• If you are already a graphic designer, you will need to acquire a solid understanding
of HTML, CSS, and other web technologies.
Before we start
Development
• A fair amount of the web design process involves the creation and
troubleshooting of the documents, style sheets, scripts, and images that
make up a site.
• At web design firms, the team that handles the creation of the files that
make up the website (or templates for pages that get assembled
dynamically) is usually called the development or production department.
• Web developers may not design the look or structure of the site themselves,
but they do need to communicate well with designers and understand the
intended site goals so they may suggest solutions that meet those goals.
• The broad disciplines that fall under development are authoring, styling, and
scripting/programming.
Before we start
Development
• Authoring/markup
• Authoring is the term used for the process of preparing content for delivery on
the Web, or more specifically, marking up the content with HTML tags that
describe its content and function.
• If you want a job as a web developer, you need to have an intricate knowledge
of HTML and how it functions on various browsers and devices. The HTML
specification is constantly evolving, which means you’ll need to keep up with
the latest best practices and opportunities as well as bugs and limitations.
Before we start
Development
• Styling
• In web design, the appearance of the page in the browser is controlled by style
rules written in CSS (Cascading Style Sheets).
• In contemporary web design, the appearance of the page is handled separately
from the HTML markup of the page.
• Again, if you are interested in working in web development, knowing your way
around CSS and how it is supported (or not supported) by browsers is part of
your job description.
Before we start
Development
• “Many visual designers translate their designs into HTML and CSS
documents themselves. In fact, there is a popular argument that in
order to call yourself a “web designer,” you must be able to build your
designs yourself, and nearly everyone agrees that your job prospects
will be better if you are able to code as well as design.”
Before we start
Development
• Scripting and programming
• JS (JavaScript) is the language that makes elements on web pages do things. It
adds behaviors and functionality to elements in the page and even to the
browser window itself.
• There are other web-related programming languages as well, including PHP,
Ruby, Python, and ASP.NET, that run on the server and process data and
information before it is sent to the user’s browser.
• Web scripting and programming definitely requires some traditional computer
programming skills. Still, if you have little experience with programming
languages, the initial learning curve may be a bit steep.
 Before we start
Frontend design Backend development
• “Frontend” refers to any aspect of the • “Backend” refers to the programs and scripts
design process that appears in or that work on the server behind the scenes to
relates directly to the browser. make web pages dynamic and interactive.
• The following tasks are commonly • The following tasks take place on the
considered to be frontend tasks: backend:
• Information design as it pertains to how the
• Graphic design and image production
information is organized on the server
• Interface design
• Forms processing
• Information design as it pertains to the • Database programming
user’s experience of the site
• Content management systems
• HTML document and style sheet • Other server-side web applications using PHP, JSP,
development
Ruby, ASP.NET, Java, and other programming
• JavaScript languages
 Before we start
Content strategy and creation
• Ideally the first important thing in the actual website creation process, is the
critical matter of the site’s content itself. Anyone who uses the title “web designer”
needs to be aware that everything we do supports the process of getting the
content, message, or functionality to our users.
• Two content-related specialists on the modern web development team:
• The Content Strategist
• When the content isn’t written right, the site can’t be fully effective. A Content Strategist makes sure that every
bit of text on a site, from long explanatory text down to the labels on buttons, supports the brand identity and
marketing goals of the company. Content strategy may also extend to data modeling and content management on
a large and ongoing scale, such as planning for content reuse and update schedules.
• Information Architect (IA).
• An Information Architect (also called an Information Designer) organizes the content logically and for ease of
findability. May be responsible for search functionality, site diagrams, and how the content and data is organized
on the server. Information architecture is inevitably entwined with UX and UI design, and it is not uncommon for
a single person or team to perform all roles.
 Before we start
Multimedia
• One of the cool things about the Web is that you can add multimedia elements to a
site, including sound, video, animation, and even interactive games.
• You may decide to add multimedia skills, such as audio and video editing or Flash
development, to your web design tool belt, or you may decide to go all in and
become a multimedia specialist.
• Web development companies usually look for people who have mastered the
standard multimedia tools, and have a good visual sensibility and an instinct for
intuitive and creative multimedia design.
 Before we start
What Languages Do I Need to Learn?
• If you are a visual designer who spends time in Photoshop and
Illustrator, you may be put off by needing to learn how to create your
designs with text.
• The following is a list of technologies associated with web
development.
• For building websites: HTML and Cascading Style Sheets (CSS)
• For frontend web development: JavaScript
• For more technically inclined web professionals: server configurations,
databases, and site performance, but these are generally not frontend
developer tasks (although a basic familiarity with the backend issues never
hurts).
 Before we start
What Languages Do I Need to Learn?
Hypertext Markup Language (HTML)
• HTML (HyperText Markup Language) is the language used to create web page
documents.
• There are a few versions of HTML in use today: HTML 4.01 is the most firmly
established while HTML5 is the newer, more robust, and is gaining steam and
browser support. Both versions have a stricter implementation called XHTML
(eXtensible HTML), which is essentially the same language with much stricter
syntax rules.
• HTML is not a programming language; it is a markup language, which means it is a
system for identifying and describing the various components of a document such
as headings, paragraphs, and lists. The markup indicates the document’s
underlying structure (you can think of it as a detailed, machine-readable outline).
You don’t need programming skills—only patience and common sense—to write
HTML.
• The best way to learn HTML is to write out some pages by hand.
 Before we start
What Languages Do I Need to Learn?
Cascading Style Sheets (CSS)
• While HTML is used to describe the content in a web page, it is Cascading
Style Sheets (CSS) that describe how that content should look.
• The way the page looks is known as its presentation. That means fonts,
colors, background images, line spacing, page layout, and so on… all
controlled with CSS.
• With the newest version (CSS3), you can even add special effects and
basic animation to your page.
 Before we start
What Languages Do I Need to Learn?
Cascading Style Sheets (CSS)
• CSS also provides methods for controlling how documents will be presented in
contexts other than the traditional desktop browser, such as in print and or on
devices with small screen widths.
• Style sheets are also a great tool for automating production because you can
change the way an element looks across all the pages in your site by editing a
single style sheet document.
• Style sheets are supported to some degree by all modern browsers.
• Although it is possible to publish web pages using HTML alone, you’ll probably
want to take on style sheets so you’re not stuck with the browser’s default
styles. If you’re looking into designing websites professionally, proficiency at
style sheets is mandatory.
 Before we start
What Languages Do I Need to Learn?
Javascript/DOM scripting
• JavaScript is a scripting language that is used to add interactivity and
behaviors to web pages, just to name a few:
• Checking form entries for valid entries
• Swapping out styles for an element or an entire site
• Making the browser remember information about the user for the next time she visits
• Building interface widgets, such as expanding menus
• JavaScript is used to manipulate the elements on the web page, the styles
applied to them, or even the browser itself. There are other web scripting
languages, but JavaScript is the standard and most ubiquitous.
 Before we start
What Languages Do I Need to Learn?
Javascript/DOM scripting
• You may also hear the term DOM scripting used in relation to JavaScript. DOM stands
for Document Object Model, and it refers to the standardized list of web page
elements that can be accessed and manipulated using JavaScript (or another scripting
language). DOM scripting is an updated term for what used to be referred to as
DHTML (Dynamic HTML), now considered an obsolete approach.
• Writing JavaScript is a type of programming.
• Most web-authoring tools come with standard scripts that you can use right out of the
box for common functions.
• Professional web developers are required to know JavaScript, however, plenty of
visual designers rely on developers to add behaviors to their designs. So while
JavaScript is useful, learning to write it may not be mandatory for all web designers.
 Before we start
What Languages Do I Need to Learn?
Server-Side Programming
• Some simple websites are collections of static HTML documents and image files, but
most commercial sites have more advanced functionality such as forms handling,
dynamically generated pages, shopping carts, content management systems,
databases, and so on. These functions are handled by web applications running on the
server.
• There are a number of programming languages and frameworks (listed in
parentheses) that are used to create web applications, including:
• PHP (CakePHP, CodeIngniter, Drupal, Joomla)
• Python (Django, TurboGears)
• Ruby (Ruby on Rails, Sinatra)
• JavaScript (Node.js, Rhino, SpiderMonkey)
• Java (Grails, Google Web Toolkit, JavaServer Faces)
• ASP.Net (DotNetNuke, ASP.Net MVC)
 Before we start
What Languages Do I Need to Learn?
Server-Side Programming
• Developing web applications is a programmer territory and is not expected of all web
designers.
• However, that doesn’t mean you can’t offer such functionality to your clients. It is
possible to get shopping carts, content management systems, mailing lists, and blogs
as prepackaged solutions, without the need to program them from scratch.
 Before we start
What are Content Management Systems?
There are several Content Management Systems among which are Drupal and Joomla:
Drupal and Joomla are both popular content management systems (CMS) used for
creating and managing websites.
• Drupal is a powerful and highly configurable platform that developers and companies
with complex needs prefer. It is appropriate for complicated, large-scale projects
because of its feature-rich feature set and modular architecture. Meanwhile, the
intricacy and higher learning curve could be intimidating for newcomers.
• However, Joomla is a great option for people who value simplicity due to its intuitive
design and more direct approach. It is appropriate for people with different technical
backgrounds and tiny to medium-sized websites. Joomla is accessible and functional in
equal measure. However, it might not be suitable for users who need extensive
customization.
 Before we start
What are web development frameworks?
There are several web development frameworks among which are Laravel and Symfony:
• Laravel and Symfony are both well-developed web frameworks. Both were developed as
open-source projects and they are suitable for creating server-based web applications.
Laravel and Symfony use the Model View Controller (MVC) pattern to separate critical
concerns. Web application requests are processed by a controller. The controller
manages the model’s data and presents it on the View:
• Model: Data model and management
• View: User interface
• Controller: Interface between model and view
• Laravel is considered simpler and better suited for smaller projects. Its flat learning
curve and fast results have contributed to the success of this popular PHP framework.
Laravel is a modern PHP framework that's known for its elegant syntax and robust
features, making it a favorite among developers for web application development.
• Symfony is famous for its decoupled components.
 Before we start
What Do I Need to Buy?
Equipment
• For a comfortable web development environment:
• A solid, up-to-date computer.
• Macintosh, Windows, or Linux, is fine. Unless you’re getting into sound and video editing, don’t
worry if your current setup is not the very latest and greatest.
• Extra memory.
• Because you’ll tend to bounce between a number of applications, it’s a good idea to have
enough RAM installed on your computer that allows you to leave several memory-intensive
programs running at the same time.
• A large monitor.
• Although not a requirement, a large monitor makes life easier, particularly for a visual designer,
it helps to have more windows and control open at the same time. You can also see more of
your page to make design decisions. However, If you’re using large monitor, just make sure you
design for users with smaller monitors and devices in mind.
 Before we start
What Do I Need to Buy?
Equipment
• For a comfortable web development environment:
• A scanner and/or digital camera.
• If you anticipate making your own images and textures.
• A second computer.
• Many web designers find it useful to have a test computer running a different platform than the
computer they use for development (i.e., if you design on a Mac, test on a PC). If you are a
hobbyist web designer working at home, check your pages on a friend’s machine. Mac users
should check out the “Run Windows on Your Mac” sidebar.
• Mobile devices.
• It is absolutely critical that you test the appearance and performance of your site on a mobile
browser on a smartphone or tablet device.
Before we start
Introduction to
internet concepts
 What is the Internet?
• The Internet is a collection of local, regional, national, and international
computer networks that is linked together to exchange data and
distribute processing tasks.
Evolution of the Internet
 Who owns the Internet?

• There is no single “owner” of the Internet but rather each of the

networks comprising the internet has its own owner such as an Internet
Service Provider (ISP), a government, an enterprise or a university.
Who is Structuring and Controlling The Internet?
 Who is Structuring and Controlling The Internet?
• Currently, Internet structure is provided by the following Entities:
1. Networks from corporations, commercial firms, and other companies.
2. Telephone companies.
3. Cable companies.
4. Satellite companies.
5. Governments.
 Who controls the internet?
• The Internet is a public, cooperative, and independent network.
• No single entity controls or owns the Internet.
• Several non-profit organizations advise and define standards for internet
such as.
• Internet Corporation for Assigned Names and Numbers (ICANN).
• Internet 2.
• World Wide Web Consortium (W3C).