SlideShare a Scribd company logo
How to make website
better ?
Nguyễn Huy Hùng
Contents
 1. Subjects that I’ll talk in this seminar
 Sprite
 Using tags effectiveness
 Response website.
2. Write in techblog
-Display: inline , block , inline-block ,
-Float: left vs text-align: center + display: inline-block.
-power of Clear: both
-Border-radius in IE7
Think and think
 Nowaday, people who makes Website always follow
MVC standard but when we think about the website’s
speed, we only think about increase the speed in
Model and Controller, but the View is also important, it
takes 1/3 in MVC model.
 A good website is a website that has not only good
Model and Controller but also good View.
1.Sprite
 An image sprite is a collection of images put into a
single image.
 A web page with many images can take a long time to
load and generates multiple server requests.
 Using image sprites will reduce the number of server
requests and save bandwidth.
 Demo
2.Use tags effectiveness
 Use minimum number of tags , but quality is best
 Demo
3.1 Good website, can be
better?
 A good website can be better ?
 Demo a good website
3.2 Response Web and Better
 The website can be better when we use response
website
 Responsive web design (RWD) is a web design
approach aimed at crafting sites to provide an optimal
viewing experience-easy reading and navigation with a
minimum of resizing, panning, and scrolling-across a
wide range of devices (from mobile phones to desktop
computer monitors
 Demo
 Can be made better ???
3.3 Server for mobile
 The best thing is when we have a separate server for
mobile that has the same databases.
 Use very easily http://mobilewebrockstar.com/detect-
mobile-browser/ , it help to detect when use mobile to
view , after redirect to version mobile.
References
 END , thanks for watching
References :
 http://www.stephentgilbert.com/mediaqueries/
 http://www.1stwebdesigner.com/css/create-a-responsive-
website-video-tutorial/
 https://github.com/sebarmeli/JS-Redirection-Mobile-Site
 http://izwebz.com/

More Related Content

Viewers also liked

Game Development with Pygame
Game Development with PygameGame Development with Pygame
Game Development with Pygame
Framgia Vietnam
 
Dreamers defense
Dreamers defenseDreamers defense
Dreamers defense
Framgia Vietnam
 
HTML5 DRAG AND DROP
HTML5 DRAG AND DROPHTML5 DRAG AND DROP
HTML5 DRAG AND DROP
Framgia Vietnam
 
Some ways to DRY in Rails
Some ways to DRY in Rails Some ways to DRY in Rails
Some ways to DRY in Rails
Framgia Vietnam
 
Functional Programming With Elixir
Functional Programming With ElixirFunctional Programming With Elixir
Functional Programming With Elixir
Framgia Vietnam
 
View, Store Procedure & Function and Trigger in MySQL - Thaipt
View, Store Procedure & Function and Trigger in MySQL - ThaiptView, Store Procedure & Function and Trigger in MySQL - Thaipt
View, Store Procedure & Function and Trigger in MySQL - Thaipt
Framgia Vietnam
 
Build public private cloud using openstack
Build public private cloud using openstackBuild public private cloud using openstack
Build public private cloud using openstack
Framgia Vietnam
 

Viewers also liked (7)

Game Development with Pygame
Game Development with PygameGame Development with Pygame
Game Development with Pygame
 
Dreamers defense
Dreamers defenseDreamers defense
Dreamers defense
 
HTML5 DRAG AND DROP
HTML5 DRAG AND DROPHTML5 DRAG AND DROP
HTML5 DRAG AND DROP
 
Some ways to DRY in Rails
Some ways to DRY in Rails Some ways to DRY in Rails
Some ways to DRY in Rails
 
Functional Programming With Elixir
Functional Programming With ElixirFunctional Programming With Elixir
Functional Programming With Elixir
 
View, Store Procedure & Function and Trigger in MySQL - Thaipt
View, Store Procedure & Function and Trigger in MySQL - ThaiptView, Store Procedure & Function and Trigger in MySQL - Thaipt
View, Store Procedure & Function and Trigger in MySQL - Thaipt
 
Build public private cloud using openstack
Build public private cloud using openstackBuild public private cloud using openstack
Build public private cloud using openstack
 

More from Framgia Vietnam

An idea - NghiaLV
An idea - NghiaLVAn idea - NghiaLV
An idea - NghiaLV
Framgia Vietnam
 
Audited activerecord - QuanHV
Audited activerecord - QuanHVAudited activerecord - QuanHV
Audited activerecord - QuanHV
Framgia Vietnam
 
Delegate - KhanhLD
Delegate - KhanhLDDelegate - KhanhLD
Delegate - KhanhLD
Framgia Vietnam
 
Client side validations gem - KhanhHD
Client side validations gem - KhanhHDClient side validations gem - KhanhHD
Client side validations gem - KhanhHD
Framgia Vietnam
 
Backbone.js and rails - BanLV
Backbone.js and rails - BanLVBackbone.js and rails - BanLV
Backbone.js and rails - BanLV
Framgia Vietnam
 
Jenkins and rails app - Le Dinh Vu
Jenkins and rails app - Le Dinh VuJenkins and rails app - Le Dinh Vu
Jenkins and rails app - Le Dinh Vu
Framgia Vietnam
 
Canvas in html5 - TungVD
Canvas in html5 - TungVDCanvas in html5 - TungVD
Canvas in html5 - TungVD
Framgia Vietnam
 
Auto it - AnhPC
Auto it - AnhPCAuto it - AnhPC
Auto it - AnhPC
Framgia Vietnam
 
Memory management in cocos2d x - Le Duy Vu
Memory management in cocos2d x - Le Duy VuMemory management in cocos2d x - Le Duy Vu
Memory management in cocos2d x - Le Duy Vu
Framgia Vietnam
 
JMS and ActiveMQ - VuNV 201307
JMS and ActiveMQ - VuNV 201307JMS and ActiveMQ - VuNV 201307
JMS and ActiveMQ - VuNV 201307
Framgia Vietnam
 
Jquery validate - TuanNA
Jquery validate - TuanNAJquery validate - TuanNA
Jquery validate - TuanNA
Framgia Vietnam
 
Continuous integration - ThangTD
Continuous integration - ThangTDContinuous integration - ThangTD
Continuous integration - ThangTD
Framgia Vietnam
 
Seminar globalize3 - DungNV
Seminar globalize3 - DungNVSeminar globalize3 - DungNV
Seminar globalize3 - DungNV
Framgia Vietnam
 
Introduction to Tornado - TienNA
Introduction to Tornado - TienNAIntroduction to Tornado - TienNA
Introduction to Tornado - TienNA
Framgia Vietnam
 
Some Tricks in Using Terminal - KienDT
Some Tricks in Using Terminal - KienDTSome Tricks in Using Terminal - KienDT
Some Tricks in Using Terminal - KienDT
Framgia Vietnam
 

More from Framgia Vietnam (15)

An idea - NghiaLV
An idea - NghiaLVAn idea - NghiaLV
An idea - NghiaLV
 
Audited activerecord - QuanHV
Audited activerecord - QuanHVAudited activerecord - QuanHV
Audited activerecord - QuanHV
 
Delegate - KhanhLD
Delegate - KhanhLDDelegate - KhanhLD
Delegate - KhanhLD
 
Client side validations gem - KhanhHD
Client side validations gem - KhanhHDClient side validations gem - KhanhHD
Client side validations gem - KhanhHD
 
Backbone.js and rails - BanLV
Backbone.js and rails - BanLVBackbone.js and rails - BanLV
Backbone.js and rails - BanLV
 
Jenkins and rails app - Le Dinh Vu
Jenkins and rails app - Le Dinh VuJenkins and rails app - Le Dinh Vu
Jenkins and rails app - Le Dinh Vu
 
Canvas in html5 - TungVD
Canvas in html5 - TungVDCanvas in html5 - TungVD
Canvas in html5 - TungVD
 
Auto it - AnhPC
Auto it - AnhPCAuto it - AnhPC
Auto it - AnhPC
 
Memory management in cocos2d x - Le Duy Vu
Memory management in cocos2d x - Le Duy VuMemory management in cocos2d x - Le Duy Vu
Memory management in cocos2d x - Le Duy Vu
 
JMS and ActiveMQ - VuNV 201307
JMS and ActiveMQ - VuNV 201307JMS and ActiveMQ - VuNV 201307
JMS and ActiveMQ - VuNV 201307
 
Jquery validate - TuanNA
Jquery validate - TuanNAJquery validate - TuanNA
Jquery validate - TuanNA
 
Continuous integration - ThangTD
Continuous integration - ThangTDContinuous integration - ThangTD
Continuous integration - ThangTD
 
Seminar globalize3 - DungNV
Seminar globalize3 - DungNVSeminar globalize3 - DungNV
Seminar globalize3 - DungNV
 
Introduction to Tornado - TienNA
Introduction to Tornado - TienNAIntroduction to Tornado - TienNA
Introduction to Tornado - TienNA
 
Some Tricks in Using Terminal - KienDT
Some Tricks in Using Terminal - KienDTSome Tricks in Using Terminal - KienDT
Some Tricks in Using Terminal - KienDT
 

Recently uploaded

"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
Fwdays
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
Vadym Kazulkin
 
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
DanBrown980551
 
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptxPRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
christinelarrosa
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
BibashShahi
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Pitangent Analytics & Technology Solutions Pvt. Ltd
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Neo4j
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
Fwdays
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Neo4j
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
zjhamm304
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
ScyllaDB
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
Fwdays
 
Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
UiPathCommunity
 

Recently uploaded (20)

"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba"NATO Hackathon Winner: AI-Powered Drug Search",  Taras Kloba
"NATO Hackathon Winner: AI-Powered Drug Search", Taras Kloba
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024High performance Serverless Java on AWS- GoTo Amsterdam 2024
High performance Serverless Java on AWS- GoTo Amsterdam 2024
 
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
LF Energy Webinar: Carbon Data Specifications: Mechanisms to Improve Data Acc...
 
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptxPRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
PRODUCT LISTING OPTIMIZATION PRESENTATION.pptx
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
Principle of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptxPrinciple of conventional tomography-Bibash Shahi ppt..pptx
Principle of conventional tomography-Bibash Shahi ppt..pptx
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
 
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and BioinformaticiansBiomedical Knowledge Graphs for Data Scientists and Bioinformaticians
Biomedical Knowledge Graphs for Data Scientists and Bioinformaticians
 
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
"Scaling RAG Applications to serve millions of users",  Kevin Goedecke"Scaling RAG Applications to serve millions of users",  Kevin Goedecke
"Scaling RAG Applications to serve millions of users", Kevin Goedecke
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...QA or the Highway - Component Testing: Bridging the gap between frontend appl...
QA or the Highway - Component Testing: Bridging the gap between frontend appl...
 
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-EfficiencyFreshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
Freshworks Rethinks NoSQL for Rapid Scaling & Cost-Efficiency
 
"What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w..."What does it really mean for your system to be available, or how to define w...
"What does it really mean for your system to be available, or how to define w...
 
Day 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio FundamentalsDay 2 - Intro to UiPath Studio Fundamentals
Day 2 - Intro to UiPath Studio Fundamentals
 

How to make website better ? - HungNH

  • 1. How to make website better ? Nguyễn Huy Hùng
  • 2. Contents  1. Subjects that I’ll talk in this seminar  Sprite  Using tags effectiveness  Response website. 2. Write in techblog -Display: inline , block , inline-block , -Float: left vs text-align: center + display: inline-block. -power of Clear: both -Border-radius in IE7
  • 3. Think and think  Nowaday, people who makes Website always follow MVC standard but when we think about the website’s speed, we only think about increase the speed in Model and Controller, but the View is also important, it takes 1/3 in MVC model.  A good website is a website that has not only good Model and Controller but also good View.
  • 4. 1.Sprite  An image sprite is a collection of images put into a single image.  A web page with many images can take a long time to load and generates multiple server requests.  Using image sprites will reduce the number of server requests and save bandwidth.  Demo
  • 5. 2.Use tags effectiveness  Use minimum number of tags , but quality is best  Demo
  • 6. 3.1 Good website, can be better?  A good website can be better ?  Demo a good website
  • 7. 3.2 Response Web and Better  The website can be better when we use response website  Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience-easy reading and navigation with a minimum of resizing, panning, and scrolling-across a wide range of devices (from mobile phones to desktop computer monitors  Demo  Can be made better ???
  • 8. 3.3 Server for mobile  The best thing is when we have a separate server for mobile that has the same databases.  Use very easily http://mobilewebrockstar.com/detect- mobile-browser/ , it help to detect when use mobile to view , after redirect to version mobile.
  • 9. References  END , thanks for watching References :  http://www.stephentgilbert.com/mediaqueries/  http://www.1stwebdesigner.com/css/create-a-responsive- website-video-tutorial/  https://github.com/sebarmeli/JS-Redirection-Mobile-Site  http://izwebz.com/