SlideShare ist ein Scribd-Unternehmen logo
1 von 9
Downloaden Sie, um offline zu lesen
Prepared by:
 Ahmed EL-Harouny
Senior Software Engineer
1.    My Personal experience (2 showcases)
2.    What to expect from a graphic/web
      designer
3.    What you should know about CSS
4.    Convert PSDs to HTML/CSS pages
5.    Moving to ASP.NET
     1. ASP.NET Themes
     2. Styling complex server controls
1.   Gather Requirements.
2.   Get some PSDs from a good designer (Photoshop)
3.   HTML it!
4.   Get a customer approval on the UI
5.   Move it to ASP.NET
6.   Enjoy .NET coding
7.   Publish


     But what if
     this is a big
     project ? Like
     SA???
   Pure graphic designers knows nothing about HTML so their
    output will be in most cases some PSDs for application views.

   HTML generators in graphics software like Photoshop always
    produces stinky markup.

   Web designers are people who knows HTML, CSS, JavaScript,
    graphic design software and a little of server side coding
    knowledge.

   In most cases I found that HTML markup that is written by
    none developers is hard to maintain.

   When you don’t have a web designer, you should try act his
    role.
   Where to put your style (External, Internal, Inline).
   Type selectors (IDs VS classes VS Tags).
   Name your selectors based on what they do not
    what they looks.
   Group Identical Styles together.
   Block VS Inline.
   Background Images and colors.
   Margin VS Padding.
   Absolute positioning.
   Hover effects.
Demo
   Move your markup from HTML pages to ASP.NET
    master page.
   Move your CSS files to Themes.
   Why you need a <form> tag in ASP.NET webforms?
   Server Controls VS HTML Controls.
   Define Content Placeholders.
   When you code a feature:
    ◦ Start by pasting your old styled markup.
    ◦ Try to stick to HTML controls as much you can.
    ◦ If you must use Server controls use CSSClass property to
      apply styles for them and use any View Source mechanism
      to investigate rendered markup.
      http://getfirebug.com/
   Webforms VS MVC.
   Themes are made up of a set of elements: skins
    (.skin), cascading style sheets (.CSS), images, and
    other resources.
   .skin VS .CSS.
   Themes do not cascade the way style sheets do.
    Any property values defined in a theme overrides
    the property values declaratively set on a control.
   CSS files in theme folders are rendered to the
    page ordered by folders/files names.
    ◦ What if you have your own structure? (you will have to
      use naming conventions for files ex: starting file name
      with numbers).
   Investigate the rendered Markup (Firebug, IE
    Developer Tools)
   Get rid of any predefined styling.
   You can add more than one class to the same
    element. (ex: <div class=“GridItem Highlighted”></div> )
   Use WebControl.CssClass property to add
    classes.
   What happened to my IDs!!?
   Introducing Control.ClientIDMode
   What if you want to style an existing control in
    only one view? (add HTML wrapper and add your custom
    style to any inner control)

Weitere ähnliche Inhalte

Kürzlich hochgeladen

Young adult book quiz by SJU quizzers.ppt
Young adult book quiz by SJU quizzers.pptYoung adult book quiz by SJU quizzers.ppt
Young adult book quiz by SJU quizzers.pptSJU Quizzers
 
"Quest for Knowledge: An Exciting Journey Through 40 Brain-Bending Questions ...
"Quest for Knowledge: An Exciting Journey Through 40 Brain-Bending Questions ..."Quest for Knowledge: An Exciting Journey Through 40 Brain-Bending Questions ...
"Quest for Knowledge: An Exciting Journey Through 40 Brain-Bending Questions ...RAGHURAMYC
 
Inside Look: Brooke Monk's Exclusive OnlyFans Content Production
Inside Look: Brooke Monk's Exclusive OnlyFans Content ProductionInside Look: Brooke Monk's Exclusive OnlyFans Content Production
Inside Look: Brooke Monk's Exclusive OnlyFans Content Productionget joys
 
Holi:: "The Festival of Colors in India"
Holi:: "The Festival of Colors in India"Holi:: "The Festival of Colors in India"
Holi:: "The Festival of Colors in India"IdolsArts
 
Taylor Swift quiz( with answers) by SJU quizzers
Taylor Swift quiz( with answers) by SJU quizzersTaylor Swift quiz( with answers) by SJU quizzers
Taylor Swift quiz( with answers) by SJU quizzersSJU Quizzers
 
5 Moments of Everyday Self-Loathing That Perfectly Describe Your Life
5 Moments of Everyday Self-Loathing That Perfectly Describe Your Life5 Moments of Everyday Self-Loathing That Perfectly Describe Your Life
5 Moments of Everyday Self-Loathing That Perfectly Describe Your LifeSalty Vixen Stories & More
 
Carowinds 2024: Thrills, Spills & Surprises
Carowinds 2024: Thrills, Spills & SurprisesCarowinds 2024: Thrills, Spills & Surprises
Carowinds 2024: Thrills, Spills & Surprisescarawinds99
 

Kürzlich hochgeladen (7)

Young adult book quiz by SJU quizzers.ppt
Young adult book quiz by SJU quizzers.pptYoung adult book quiz by SJU quizzers.ppt
Young adult book quiz by SJU quizzers.ppt
 
"Quest for Knowledge: An Exciting Journey Through 40 Brain-Bending Questions ...
"Quest for Knowledge: An Exciting Journey Through 40 Brain-Bending Questions ..."Quest for Knowledge: An Exciting Journey Through 40 Brain-Bending Questions ...
"Quest for Knowledge: An Exciting Journey Through 40 Brain-Bending Questions ...
 
Inside Look: Brooke Monk's Exclusive OnlyFans Content Production
Inside Look: Brooke Monk's Exclusive OnlyFans Content ProductionInside Look: Brooke Monk's Exclusive OnlyFans Content Production
Inside Look: Brooke Monk's Exclusive OnlyFans Content Production
 
Holi:: "The Festival of Colors in India"
Holi:: "The Festival of Colors in India"Holi:: "The Festival of Colors in India"
Holi:: "The Festival of Colors in India"
 
Taylor Swift quiz( with answers) by SJU quizzers
Taylor Swift quiz( with answers) by SJU quizzersTaylor Swift quiz( with answers) by SJU quizzers
Taylor Swift quiz( with answers) by SJU quizzers
 
5 Moments of Everyday Self-Loathing That Perfectly Describe Your Life
5 Moments of Everyday Self-Loathing That Perfectly Describe Your Life5 Moments of Everyday Self-Loathing That Perfectly Describe Your Life
5 Moments of Everyday Self-Loathing That Perfectly Describe Your Life
 
Carowinds 2024: Thrills, Spills & Surprises
Carowinds 2024: Thrills, Spills & SurprisesCarowinds 2024: Thrills, Spills & Surprises
Carowinds 2024: Thrills, Spills & Surprises
 

Empfohlen

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 

Empfohlen (20)

AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 

Introduction to HTML and CSS For ASP.NET Developers

  • 1. Prepared by: Ahmed EL-Harouny Senior Software Engineer
  • 2. 1. My Personal experience (2 showcases) 2. What to expect from a graphic/web designer 3. What you should know about CSS 4. Convert PSDs to HTML/CSS pages 5. Moving to ASP.NET 1. ASP.NET Themes 2. Styling complex server controls
  • 3. 1. Gather Requirements. 2. Get some PSDs from a good designer (Photoshop) 3. HTML it! 4. Get a customer approval on the UI 5. Move it to ASP.NET 6. Enjoy .NET coding 7. Publish But what if this is a big project ? Like SA???
  • 4. Pure graphic designers knows nothing about HTML so their output will be in most cases some PSDs for application views.  HTML generators in graphics software like Photoshop always produces stinky markup.  Web designers are people who knows HTML, CSS, JavaScript, graphic design software and a little of server side coding knowledge.  In most cases I found that HTML markup that is written by none developers is hard to maintain.  When you don’t have a web designer, you should try act his role.
  • 5. Where to put your style (External, Internal, Inline).  Type selectors (IDs VS classes VS Tags).  Name your selectors based on what they do not what they looks.  Group Identical Styles together.  Block VS Inline.  Background Images and colors.  Margin VS Padding.  Absolute positioning.  Hover effects.
  • 7. Move your markup from HTML pages to ASP.NET master page.  Move your CSS files to Themes.  Why you need a <form> tag in ASP.NET webforms?  Server Controls VS HTML Controls.  Define Content Placeholders.  When you code a feature: ◦ Start by pasting your old styled markup. ◦ Try to stick to HTML controls as much you can. ◦ If you must use Server controls use CSSClass property to apply styles for them and use any View Source mechanism to investigate rendered markup. http://getfirebug.com/  Webforms VS MVC.
  • 8. Themes are made up of a set of elements: skins (.skin), cascading style sheets (.CSS), images, and other resources.  .skin VS .CSS.  Themes do not cascade the way style sheets do. Any property values defined in a theme overrides the property values declaratively set on a control.  CSS files in theme folders are rendered to the page ordered by folders/files names. ◦ What if you have your own structure? (you will have to use naming conventions for files ex: starting file name with numbers).
  • 9. Investigate the rendered Markup (Firebug, IE Developer Tools)  Get rid of any predefined styling.  You can add more than one class to the same element. (ex: <div class=“GridItem Highlighted”></div> )  Use WebControl.CssClass property to add classes.  What happened to my IDs!!?  Introducing Control.ClientIDMode  What if you want to style an existing control in only one view? (add HTML wrapper and add your custom style to any inner control)