SlideShare a Scribd company logo
1 of 9
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 (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 (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

Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 

Recently uploaded (20)

AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptxBT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
BT & Neo4j _ How Knowledge Graphs help BT deliver Digital Transformation.pptx
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 

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/