Web Application and e- technology
Web Application and e-technology
Për Kursin
ligjerues: Astrit [email protected]
Cka flitet?
Web Engineering- Kerkesat, Dizajni, Zhvillimi, Testimi- Information Architecture- Usability- Accessibility- User Experience- Scalability- Performance- Security- Responsive/Mobile
Web application and e-technology
Për Kursin
Web Technologies- Html5, - Ajax, - TypeScript, - KnockoutJS
Tools- Subversion, GiT,Eclipse
Qellimet• Me u njoftu dhe ballafaqu me specifikat e zhvillimit te nje Web projekti.• Me i njoftu dhe apliku metodat agjile ne zhvillimin e nje web projekti.
Literatura:
Web application and e-technology
Për Kursin
Literatura:
Web application and e-technology
Për Kursin
Fokus Aplikativ – “Hands On”
Kurs i integruar = Ligjerata + Ushtrime. nje vleresim!
Ushtrimet parakusht per ligjerate.
grup prej 3-4 personash.
2 deri ne 3 prezentime gjate semestrit.
Humbet prezentimi humbet ushtrimihumbet ligjerata shihemi pas nje viti.
Detyre: Implementimi i nje Web projekti me “Scrum”
Web application and e-technology
Për Kursin
Web application and e-technology
Njesia #1 Organizative, Hyrje
Njesia #2 Metodologjia “Agile”,
Njesia #3 Kerkesat (Requirements Engineering) per web
Njesia #4 Arkitektura e web aplikacioneve
Njesia #5 Dizajni #1 (WebApp Design)
Njesia #6 Dizajni #2 (Interaction Design)
Njesia #7 Dizajni #3 (Information Design)
Njesia #8 Usability, Accessibility, Standardet
Njesia #9
Njesia #10 Mobile Application Development #1
Njesia #11 Mobile Application Development #2
Njesia #12 Web Application Security
Hyrje
Web application and e-technology
Software Engineering.cka eshte?
The top problem areas of large‐scale Web application projects–Failure to meet business needs (84%)–Project schedule delays (79%)–Budget overrun (63%)–Lack of functionalities (53%)–Poor quality of deliverables (52%)
Hyrje
Web application and e-technology
Web Aplikacionet
Web application and e-technology
Sofware Engineering vs Web Engineering?
Ku eshte dallimi?Cilat jane vecorite e ne ueb aplikacioni?
Web Aplikacionet
Web application and e-technology
Sofware Engineering vs Web Engineering?
Vecorite e nje ueb aplikacioni.• Network intensiveness• Concurrency• Content sensitive• Continuous evolution • Concurrency• Unpredictable load• Continuous evolution• Immediacy• Performance• Security• Availability• Datadriven• Aesthetics
Hyrje
Web application and e-technology
Web Aplikacionet
Web application and e-technology
Web 1.0 vs. 2.0 vs. 3.0?
Ku eshte dallimi?
Web application and e-technology
Agile Development
Web application and e-technology
http://agilemanifesto.org/
Agile Development
Web application and e-technology
http://agilemanifesto.org/
Principet
Our highest priority is to satisfy the
customer through early and continuous
delivery of valuable software.
Build projects around motivated
individuals. Give them the environment
and support they need, and trust them
to get the job done.
Continuous attention to technical
excellence
and good design enhances agility.
Welcome changing requirements, even
late in development. Agile processes
harness change for the customer's
competitive advantage.
The most efficient and effective method
of conveying information to and within a
development team is face-to-face
conversation
Simplicity--the art of maximizing the
amount
of work not done--is essential.
Deliver working software frequently,
from a couple of weeks to a couple of
months, with a preference to the
shorter timescale.
Working software is the primary
measure of progress.
The best architectures, requirements,
and designs
emerge from self-organizing teams.
Business people and developers must
work together daily throughout the
project.
Agile processes promote sustainable
development.
The sponsors, developers, and users
should be able to maintain a constant
pace indefinitely.
At regular intervals, the team reflects
on how
to become more effective, then tunes
and adjusts
its behavior accordingly.
Agile Development
Web application and e-technology
http://agilemanifesto.org/
Principet
Our highest priority is to satisfy the
customer through early and continuous
delivery of valuable software.
Build projects around motivated
individuals. Give them the environment
and support they need, and trust them
to get the job done.
Continuous attention to technical
excellence
and good design enhances agility.
Welcome changing requirements, even
late in development. Agile processes
harness change for the customer's
competitive advantage.
The most efficient and effective method
of conveying information to and within a
development team is face-to-face
conversation
Simplicity--the art of maximizing the
amount
of work not done--is essential.
Deliver working software frequently,
from a couple of weeks to a couple of
months, with a preference to the
shorter timescale.
Working software is the primary
measure of progress.
The best architectures, requirements,
and designs
emerge from self-organizing teams.
Business people and developers must
work together daily throughout the
project.
Agile processes promote sustainable
development.
The sponsors, developers, and users
should be able to maintain a constant
pace indefinitely.
At regular intervals, the team reflects
on how
to become more effective, then tunes
and adjusts
its behavior accordingly.
WebE Framework
Web application and e-technology
AktivitetetCommunication.Involves heavy interaction and collaboration with the customer (and other stakeholders) and encompasses requirements gathering and other related activities.Planning. Establishes an incremental plan for the WebE work. Modeling. Encompasses the creation of models that assist the developer and the customer to better understand WebApp requirements and the design Construction.Combines both the generation of HTML, XML, Java,C#, and similar code with testing that is required to uncover errors in the code.Deployment.Delivers a WebApp increment to the customer who evaluates it and provides feedback based on the evaluation.
Sofware Engineering vs. WebEngineering
Web application and e-technology
|”It seems to me that just about any important product or system is worth engineering. Before you start building it, you’d better understand the problem, design a workable solution, implement it in a solid way, and test it thoroughly. You should probably also control changes to it as you work and have some mechanism for ensuring the end result’s quality. Many Web developers don’t argue with this; they just think their world is really different and that conventional software engineering approaches simply don’t apply.”
The Internet changed software development’s top priority from what to when. Reduced time-to-market has become the competitive edge that leading companies strive for. Thus, reducing the development cycle is now one of software engineering’s most important missions
Web Engineering Process
Web application and e-technology
• Requirements evolve over time.
• Changes will ocur frequently
• Time lines are short
Para se me shku tutje… SCRUM
Web application and e-technology
Para se me shku tutje… SCRUM
Web application and e-technology
Mes tjerash inspiruar nga “lean manifacturin process” “Toyota production system” ”Kaizen”
“improvement – permisim”Orientim ne procese: Proceset ne focus, jo rezultati.Orientim ne punetore :Successful implementation requires "the participation of workers in the improvement."
SCRUM
Web application and e-technology
Rrolet• Product Owner• ScrumMaster• Ekipi
Artifaktet• Produkt Backlog• Sprint BacklogTakimet• Sprint planning meeting• Dailz Scrum• Sprint Review Meeting• Sprint Retrospective• Backlog Refinment meeting.
SCRUM
Web application and e-technology
Product Owner
SCRUM
Web application and e-technology
Product Owner
Case #1 Customer takes the role
Case #2Customer Proxy
SCRUM
Web application and e-technology
Scrum Master
SCRUM
Web application and e-technology
Scrum Master Service Details
Team coaching •Help the team collaborate effectively and manage their work successfully so
that they can make realistic commitments and create product increments
reliably.
•Encourage the team to work with the product owner on the product backlog.
•Ensure that the team has a productive work environment.
Organisational change •Work with senior management, HR and other business groups to implement
the necessary organisational changes required by Scrum.
•Educate the stakeholders about what’s new and different in Scrum, explain
their role in the agile process, and generate support and buy-in.
•Resolve role conflicts such as product owner vs. product manager and
product owner vs. project manager.
Product owner coaching •Help the product owner choose the right agile product management
techniques and tools.
•Support the product owner in making product decisions and tackle product
owner empowerment issues.
•Help establish agile product management practices in the enterprise.
SCRUM
Web application and e-technology
Scrum Master
SCRUM
Web application and e-technology
Product Backlog
The product backlog is an ordered list of everything that might be needed in the product and is the single source of requirements for any changes to be made to the product.1
SCRUM
Web application and e-technology
Product BacklogUser Stories
As a <type of user>, I want <some goal> so that <some
reason>.
• As a vice president of marketing, I want to select a holiday
season to be used when reviewing the performance of past
advertising campaigns so that I can identify profitable ones.
SCRUM
Web application and e-technology
Product BacklogUser Stories
•Students can purchase monthly parking passes online.
•Parking passes can be paid via credit cards.
•Parking passes can be paid via PayPal.
•Professors can input student marks.
•Students can obtain their current seminar schedule.
•Students can order official transcripts.
•Students can only enroll in seminars for which they have
prerequisites.
•Transcripts will be available online via a standard browser.-
SCRUM
Web application and e-technology
Product BacklogUser Stories
As a <type of user>, I want <some goal> so that <some
reason>.
• As a vice president of marketing, I want to select a holiday
season to be used when reviewing the performance of past
advertising campaigns so that I can identify profitable ones.
SCRUM
Web application and e-technology
User Stories -Epics
SCRUM
Web application and e-technology
Backlog grooming
SCRUM
Web application and e-technology
Sprint planning meetingCka ndodhe?
SCRUM
Web application and e-technology
Sprint planning meeting, kush merr pjese?
SCRUM
Web application and e-technology
Sprint planning meeting
• Specifies howto achieve the PBI’s what
• Requires one day or less of work
• Remaining effort is re-estimated daily, typically in hours
• During Sprint Execution, a point personmay volunteer to be
• primarily responsible for a task
• Owned by the entire team; collaboration is expected
SCRUM
Web application and e-technology
Scrum Board
Web Design
Web application and e-technology
“There are essentially two basic approaches to design: the
artistic ideal of expressing yourself and the engineering
ideal of solving a problem for a customer.”
Use prototyping
Cfare lloje te dizajnit kemi?
Dizajn logjik / Logical Design
•- Cka eshte?
• Hr Module
• FI Module
• WareHouse module
Physical Design
• Web Servers
• Database Server
• Replic
• ASP .NET
• Wordpress
Graphic Design
User Interaction Design
Web Design – Caqet
Web application and e-technology
•Simplicity•consistency, •identity, •robustness, •Navigability•Visual appeal•Compatibility
•Cilat?
Web Design – Caqet
Web application and e-technology
Simplicity•Mos ja tepro - shko udhes se Budes – the middle way
Web Design – Caqet
Web application and e-technology
Consistency•Afekton “usability”•Ne layout•Ne dizajn grafik•Ne gjuhe•Ne Font•Etj…
Web Design – Caqet
Web application and e-technology
Identity
Web Design – Caqet
Web application and e-technology
•robustness, •Navigability
Web Design – Caqet
Web application and e-technology
Visual Appeal
Web Design – Caqet
Web application and e-technology
Compatibility
Web Design
Web application and e-technology
Si me marre vesh qe ke dizajnu mire?Kush mundet me qene nje prej vleresuesve me te mire te kualitetit?
Perdoruesi..
Si me vendose nje “user centric” metodologji?
TAM/TAM2(Technology acceptance Model)
Perceived usefulness (PU) - "the degree to which a person believes that using a particular
system would enhance his or her job performance".
Perceived ease-of-use (PEOU) - "the degree to which a person believes that using a particular
system would be free from effort"
Web Design
Web application and e-technology
TAM2
TAM3
Web Design TAM/TAM2/UTAT
Web application and e-technology
Attitude: Individual's positive or negative feeling about performing the target behavior (e.g., using a system).
Behavioral intention: The degree to which a person has formulated conscious plans to perform or not perform some specified future behavior.Computer anxiety: The degree of an individual’s apprehension, or even fear, when she/he is faced with the possibility of
using computers.
Computer playfulness: The degree of cognitive spontaneity in microcomputer interactions.
Computer self-efficacy: The degree to which an individual beliefs that he or she has the ability to perform specific task/job
using computer.
Effort expectancy: The degree of ease associated with the use of the system.
Facilitating conditions: The degree to which an individual believes that an organizational and technical infrastructure exists
to support use of the system.
Image: The degree to which use of an innovation is perceived to enhance one's status in one's social system.
Job relevance: Individual's perception regarding the degree to which the target system is relevant to his or her job.
Objective usability: A comparison of systems based on the actual level (rather than perceptions) of effort required to
complete specific tasks.
Output quality: The degree to which an individual believes that the system performs his or her job tasks well.
Performance expectancy: The degree to which an individual believes that using the system will help him or her to attain
gains in job performance.
Perceived ease of use: See the definition of effort expectancy.
Perceived enjoyment: The extent to which the activity of using a specific system is perceived to be enjoyable in it’s own right,
aside from any performance consequences resulting from system use.
Perceived usefulness: See the definition of performance expectancy.
Perception of external control: See the definition of facilitating conditions.
Result demonstrability: Tangibility of the results of using the innovation.
Social influence: The degree to which an individual perceives that important others believe he or she should use the new
system.
Subjective norm: Person's perception that most people who are important to him think he should or should not perform the
behavior in question.
Voluntariness: The extent to which potential adopters perceive the adoption decision to be non-mandatory.
Web Design
Web application and e-technology
Unified theory of acceptance and use of technology
Case Study The Use of the UTAUT Model in the Adoption of E-government Services in Kuwait
Web application and e-technology
H1. There would be a significant positive relationship
between performance expectancy and behavioural
intentions to use e-government services, and this
relationship would be moderated by gender, type of
academic course and Internet experience.
H2. There would be a significant positive relationship
between effort expectancy and behavioural intentions to
use e-government services, and this relationship would
be moderated by gender, type of academic course and
Internet experience.
H3. There would be a significant positive relationship
between peer influence and behavioural intentions to
use e-government services, and this relationship would
be moderated by gender.
H4. There would be a significant positive relationship
between behavioural intention and use behaviour of
e-government services.
H5. There would be a significant positive relationship
between facilitating conditions and use behaviour of
e-government services, and this relationship would be
moderated by type of academic course and Internet
experience
Web Design
Web application and e-technology
Performance expectancy statements
Statements adopted from Venkatesh et al.:
• Using the system in my job would enable me to accomplish tasks more quickly.
• Using the system would enhance my effectiveness on the job.
• Using the system would make it easier to do my job.
• I would find the system useful in my job.
• If I use the system, I will spend less time on routine job tasks.
Statements added by the researchers:
• The e-government website would enable me to access government information and services when I need them – 24
hours/day, 7days/week.
• I think interacting with the government face to face would be preferable to interacting online.
• The e-government website would give all citizens an equal chance to carry out their business with government.
Effort expectancy statements
Statements adopted from Venkatesh et al.:
• Learning to operate the system would be easy for me.
• My interaction with the system would be clear and understandable.
• I would find the system flexible to interact with.
• It would be easy for me to become skilful at using the system.
• I would find the system easy to use.
• Using the system takes too much time from my normal duties.
• Overall, I believe that the system is easy to use.
Statement added by the researchers
• I would find it easier to talk face to face with someone rather than use online services.
Web Design
Web application and e-technology
Peer influence statements
Statements adopted from Venkatesh et al.:
• People who are important to me think that I should use the system.
Statements added by the researchers
• I would only use online services if I needed to.
• I would use the online services if my friends used them.
Facilitating conditions statements
Statements adopted from Venkatesh et al.:
• I have the resources necessary to use the system.
• I have the knowledge necessary to use the system.
• Given the resources, opportunities and knowledge it takes to use the system, it would be easy for me to use the system.
• I think that using the system fits well with the way I like to work.
• Using the system fits into my work style.
Statements added by the researchers:
• I have enough Internet experience to use online services.
• I would not like to carry out my business with government online.
• I would find it difficult to use online services due to lack of time.
Behavioural intention statements
• I intend to use the system in the next <n> months.
• I predict I will use the system in the next <n> months.
• I plan to use the system in the next <n> months.
Case Study #2
Web application and e-technology
Case Study #2
Web application and e-technology
Case Study #2
Web application and e-technology
Web Design
Web application and e-technology
Ka edhe casje tjera
Security
Avalibility
Scalablility
TimeToMarket
Web Design
Web application and e-technology
Nje vegel ndihmese
Web Design
Web application and e-technology
Interface Design + Aesthetic Desing = interaction design
Content Design, Navigation Design
Technical Design= Archtecture Design, Component Design
Architecture = Conceptual or Technical
Web Design
Web application and e-technology
Proceset ne kronologji
Interaction design
Web application and e-technology
Pyetjet te cilat duhet t’ja pergjegje perdoruesit nje interface I mirefillt.
Where am I? The interface should (1) provide an indication of the WebApp
that has been accessed 1, and (2) inform users of their location in the
content hierarchy.
What can I do now? The interface should always help users understand
their current options—what functions are available, what links are
live, what content is relevant?
Where have I been, where am I going? The interface must facilitate navigation.
Hence, it must provide a “map” (implemented in a way that is
easy to understand) of where users have been and what paths they
may take to move elsewhere within the WebApp
Interaction design
Web application and e-technology
Parimet qe duhet me i apliku.
Anticipation. A WebApp should be designed so that it anticipates the user’s
next move
Communication. The interface should communicate the status of any activity
initiated by the user.
Consistency. The use of navigation controls, menus, icons, and aesthetics
(e.g., color, shape, layout) should be consistent throughout the WebApp.
Controlled autonomy. The interface should facilitate user movement
throughout the WebApp, but it should do so in a manner that enforces navigation
conventions that have been established for the application.
Efficiency. The design of the WebApp and its interface should optimize the
user’s work efficiency, not the efficiency of the Web engineer who designs and
builds it or the client-server environment that executes it.
Interaction design
Web application and e-technology
Parimet qe duhet me i apliku.
Flexibility. The interface should be fl exible enough to enable some users to
accomplish tasks directly and others to explore the WebApp in a somewhat
random fashion.
Focus. The WebApp interface (and the content it presents) should stay focused
on the user task(s) at hand
Interaction design
Web application and e-technology
Interaction design
Web application and e-technology
Accessibility
Check
http://www.w3.org/WAI/tutorials/
http://webaim.org/articles/
Information Design
Web application and e-technology
- Ka te beje me (organizimin e) informates/permbajtjes (content).adreson keto ceshtje:
– Content. What content is available?
– Composition. What views on that content do you wish to provide
users?
– Navigation. How do the users gain access to those views.
Information Design
Web application and e-technology
Shembuj te strukturimit te permbajtjes?
Information Design
Web application and e-technology
Tjeter shembull?
Information Design
Web application and e-technology
Cfare strukturimi eshte ky?
Hierarkik
Cfare forma tjera te strukturimit te informates kemi?
?
Network
?
Matrix
Information Design
Web application and e-technology
Si mund ta modelojme nje strukture hiearkike te informates ne web?
Sitemap
Sa nivele jane?
Information Design
Web application and e-technology
Shembuj te ueb faqeve te cilat kane strukturim te informates ne forme rrjete
(network)?
wikipedia.org
Information Design
Web application and e-technology
Shembuj te ueb faqeve te cilat kane strukturim te informates ne forme matrice?
Information Design
Web application and e-technology
Hierarkia e informates.
Cila me e mire?
Information Design
Web application and e-technology
Wireframes
Content Management Systems
Web application and e-technology
Cka jane?
Si strukturohen/cfare module kan?
Web Design
Web application and e-technology
Web Design
Web application and e-technology
• Responsive
• Adaptive
Web application
Web application and e-technology
Web application
Web application and e-technology
Ne nivel teknik:
Responsive = flxible grid layout + flxible images + media and media queries
http://alistapart.com/article/responsive-web-design
.
Web application
Web application and e-technology
Web application
Web application and e-technology
design for the smallest viewport fist and then progressively enhance the design
and content for larger viewports Mobile First
Web application
Web application and e-technology
Mobile apo Mobile?
Mobile Web apo Mobile App?
Argumente pro dhe kontra?
Secili grup per vete...
Web application
Web application and e-technology
Immediacy – Mobile Websites Are Instantly Available
Compatibility – Mobile Websites are Compatible Across Devices
Upgradability – Mobile Websites Can Be Updated Instantly
Findability – Mobile Websites Can be Found Easily
Shareability – Mobile Websites Can be Shared Easily by Publishers, and
Between Users
Reach – Mobile Websites Have Broader Reach
LifeCycle – Mobile Websites Can’t be Deleted
Time and Cost - Mobile Websites are Easier and Less Expensive
Support and Sustainability
Mobile App
Interactivity/Gaming
Regular Usage/Personalization
Complex Calculations or Reporting
Native Functionality or Processing Required
No connection Required
Web application
Web application and e-technology
D.m.th me mire me shku me
Mobile Web se me Mobile
App?
Web application
Web application and e-technology