SlideShare ist ein Scribd-Unternehmen logo
1 von 13
RESPONSIVE HTML5
WORDPRESS THEME
   FRAMEWORK
  (I’m working on a new name)
Two guiding rules


• Observe best practices for applicable
  disciplines and technologies.
• Create modular components based on
  common design patterns that are easy
  for developers and clients to use.
Technology: Leveraging existing tech
Technology: Leveraging existing tech
Technology: Leveraging existing tech




            (PHP)               (MySQL)
Technology: Leveraging existing tech




            (PHP)               (MySQL)
Technology: Leveraging existing tech




HTML5          +       CSS       +     JavaScript



            (PHP)               (MySQL)
Technology: Leveraging existing tech




            (PHP)               (MySQL)
Technology: Leveraging existing tech




HTML5 + CSS + JavaScript = HTML5 BoilerPlate



            (PHP)               (MySQL)
Technology: Leveraging existing tech



       HTML5 + CSS + JavaScript = HTML5 BoilerPlate



                       (PHP)                (MySQL)




“A rock-solid default for HTML5 awesome.”
 http://html5boilerplate.com/
Technology: Semantic HTML


Nicolas Gallagher’s “Anatomy of an HTML5 WordPress
Theme”
http://nicolasgallagher.com/anatomy-of-an-html5-wordpress-
theme/

Bruce Lawson’s “Designing a Blog with HTML5”
http://html5doctor.com/designing-a-blog-with-html5/
Technology: Accessibility

• IE6 should die, but it’s users may not
  know better.
• “The power of the web is it’s
  universality” – Tim Berners-Lee
  http://www.w3.org/TR/WCAG20-TECHS/
Design


         Responsive
         Usable
         Modular

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (14)

Gdg cloud london 2017 kappa architecture 2.0 copia
Gdg cloud london 2017   kappa architecture 2.0 copiaGdg cloud london 2017   kappa architecture 2.0 copia
Gdg cloud london 2017 kappa architecture 2.0 copia
 
Scalaua 2017 kyev kappa architecture 2.0
Scalaua 2017 kyev   kappa architecture 2.0Scalaua 2017 kyev   kappa architecture 2.0
Scalaua 2017 kyev kappa architecture 2.0
 
GeekOut 2017 - Microservices in action at the Dutch National Police
GeekOut 2017 -  Microservices in action at the Dutch National PoliceGeekOut 2017 -  Microservices in action at the Dutch National Police
GeekOut 2017 - Microservices in action at the Dutch National Police
 
Building microservices with Vert.X @ Fall 2016
Building microservices with Vert.X @ Fall 2016Building microservices with Vert.X @ Fall 2016
Building microservices with Vert.X @ Fall 2016
 
Codemotion madrid 2017 Arquitectura kappa 2.0
Codemotion madrid 2017  Arquitectura kappa 2.0Codemotion madrid 2017  Arquitectura kappa 2.0
Codemotion madrid 2017 Arquitectura kappa 2.0
 
How to create a personal knowledge graph IBM Meetup Big Data Madrid 2017
How to create a personal knowledge graph IBM Meetup Big Data Madrid 2017How to create a personal knowledge graph IBM Meetup Big Data Madrid 2017
How to create a personal knowledge graph IBM Meetup Big Data Madrid 2017
 
No More Cowboy Coding: Modern WordPress Development Workflow That Scales
No More Cowboy Coding: Modern WordPress Development Workflow That ScalesNo More Cowboy Coding: Modern WordPress Development Workflow That Scales
No More Cowboy Coding: Modern WordPress Development Workflow That Scales
 
JBCN barcelona 2017 kappa architecture 2.0
JBCN barcelona 2017 kappa architecture 2.0JBCN barcelona 2017 kappa architecture 2.0
JBCN barcelona 2017 kappa architecture 2.0
 
Open drupal DrupalCamp Gent 2018
Open drupal DrupalCamp Gent 2018Open drupal DrupalCamp Gent 2018
Open drupal DrupalCamp Gent 2018
 
Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015
Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015
Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015
 
Devoxx UK 2016 - Building microservices with Vert.x
Devoxx UK 2016 - Building microservices with Vert.xDevoxx UK 2016 - Building microservices with Vert.x
Devoxx UK 2016 - Building microservices with Vert.x
 
SDL Innovate 2013 - Don't try this at home
SDL Innovate 2013 - Don't try this at homeSDL Innovate 2013 - Don't try this at home
SDL Innovate 2013 - Don't try this at home
 
A High-Performance Solution to Microservice UI Composition @ XConf Hamburg
A High-Performance Solution to Microservice UI Composition @ XConf HamburgA High-Performance Solution to Microservice UI Composition @ XConf Hamburg
A High-Performance Solution to Microservice UI Composition @ XConf Hamburg
 
Aduivo – the intuitive CMS
Aduivo – the intuitive CMSAduivo – the intuitive CMS
Aduivo – the intuitive CMS
 

Andere mochten auch

Technology and livelihood education
Technology and livelihood educationTechnology and livelihood education
Technology and livelihood education
Arturo Calaguian
 
What Is Self Directed Learning
What Is Self Directed LearningWhat Is Self Directed Learning
What Is Self Directed Learning
tjcarter
 
Role playing approach in teaching
Role playing approach in teachingRole playing approach in teaching
Role playing approach in teaching
Kirstal Eduyan
 

Andere mochten auch (20)

Technology and Livelihood Education IV
Technology and Livelihood Education IVTechnology and Livelihood Education IV
Technology and Livelihood Education IV
 
Technology and livelihood education
Technology and livelihood educationTechnology and livelihood education
Technology and livelihood education
 
Eced 116
Eced 116Eced 116
Eced 116
 
Directed Study Neuromarketing
Directed Study   NeuromarketingDirected Study   Neuromarketing
Directed Study Neuromarketing
 
Mapeh
MapehMapeh
Mapeh
 
Values education philosophy(Western)
Values education philosophy(Western)Values education philosophy(Western)
Values education philosophy(Western)
 
Theories of Teaching and Learning: The Staged Self-Directed Learning Model, G...
Theories of Teaching and Learning: The Staged Self-Directed Learning Model, G...Theories of Teaching and Learning: The Staged Self-Directed Learning Model, G...
Theories of Teaching and Learning: The Staged Self-Directed Learning Model, G...
 
What Is Self Directed Learning
What Is Self Directed LearningWhat Is Self Directed Learning
What Is Self Directed Learning
 
self directed learning
self directed learningself directed learning
self directed learning
 
The DECS Values Education Framework
The DECS Values Education FrameworkThe DECS Values Education Framework
The DECS Values Education Framework
 
Role playing approach in teaching
Role playing approach in teachingRole playing approach in teaching
Role playing approach in teaching
 
Role play presentation
Role play presentationRole play presentation
Role play presentation
 
Site directed mutagenesis
Site directed mutagenesisSite directed mutagenesis
Site directed mutagenesis
 
Role playing
Role playingRole playing
Role playing
 
Mapeh powerpoint
Mapeh powerpointMapeh powerpoint
Mapeh powerpoint
 
K TO 12 GRADE 2 LEARNING MATERIAL IN ARALING PANLIPUNAN
K TO 12 GRADE 2 LEARNING MATERIAL IN ARALING PANLIPUNANK TO 12 GRADE 2 LEARNING MATERIAL IN ARALING PANLIPUNAN
K TO 12 GRADE 2 LEARNING MATERIAL IN ARALING PANLIPUNAN
 
MUSIC and ARTS Gr. 10 Learner's Module Quarter 1 to 4 complete
MUSIC and ARTS Gr. 10 Learner's Module   Quarter 1 to 4 completeMUSIC and ARTS Gr. 10 Learner's Module   Quarter 1 to 4 complete
MUSIC and ARTS Gr. 10 Learner's Module Quarter 1 to 4 complete
 
Direct Method (DM) of Language Teaching
Direct Method (DM) of Language TeachingDirect Method (DM) of Language Teaching
Direct Method (DM) of Language Teaching
 
K to 12 TLE Curriculum Guide
K to 12 TLE Curriculum GuideK to 12 TLE Curriculum Guide
K to 12 TLE Curriculum Guide
 
Values education
Values educationValues education
Values education
 

Ähnlich wie Directed Study I

HTML5 Accessibility
HTML5 AccessibilityHTML5 Accessibility
HTML5 Accessibility
User Vision
 
Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4...
Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4...Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4...
Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4...
InSync2011
 
Intro to Front-End Web Devlopment
Intro to Front-End Web DevlopmentIntro to Front-End Web Devlopment
Intro to Front-End Web Devlopment
damonras
 
Introduction To Drupal
Introduction To DrupalIntroduction To Drupal
Introduction To Drupal
Lauren Roth
 
SYED_PHPMYSQL_CV
SYED_PHPMYSQL_CVSYED_PHPMYSQL_CV
SYED_PHPMYSQL_CV
Naser Syed
 
Fii Practic Frontend BeeNear - laborator 1
Fii Practic Frontend BeeNear - laborator 1Fii Practic Frontend BeeNear - laborator 1
Fii Practic Frontend BeeNear - laborator 1
BeeNear
 

Ähnlich wie Directed Study I (20)

HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic Tags
 
NoSQL Now! Webinar Series: Innovations in NoSQL Query Languages
NoSQL Now! Webinar Series: Innovations in NoSQL Query Languages  NoSQL Now! Webinar Series: Innovations in NoSQL Query Languages
NoSQL Now! Webinar Series: Innovations in NoSQL Query Languages
 
HTML 5
HTML 5HTML 5
HTML 5
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 Boilerplate
 
HTML5 Accessibility
HTML5 AccessibilityHTML5 Accessibility
HTML5 Accessibility
 
Html5 Brown Bag
Html5 Brown BagHtml5 Brown Bag
Html5 Brown Bag
 
Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4...
Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4...Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4...
Developer and Fusion Middleware 1 | Mark Lancaster | Building advanced APEX 4...
 
Intro to Front-End Web Devlopment
Intro to Front-End Web DevlopmentIntro to Front-End Web Devlopment
Intro to Front-End Web Devlopment
 
Drupal 7
Drupal 7Drupal 7
Drupal 7
 
Introduction To Drupal
Introduction To DrupalIntroduction To Drupal
Introduction To Drupal
 
Absolute Beginners Guide to Drupal
Absolute Beginners Guide to DrupalAbsolute Beginners Guide to Drupal
Absolute Beginners Guide to Drupal
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
The Download: Tech Talks by the HPCC Systems Community, Episode 11
The Download: Tech Talks by the HPCC Systems Community, Episode 11The Download: Tech Talks by the HPCC Systems Community, Episode 11
The Download: Tech Talks by the HPCC Systems Community, Episode 11
 
Mongodb - drupal dev days
Mongodb - drupal dev daysMongodb - drupal dev days
Mongodb - drupal dev days
 
SYED_PHPMYSQL_CV
SYED_PHPMYSQL_CVSYED_PHPMYSQL_CV
SYED_PHPMYSQL_CV
 
Tech talk webtech
Tech talk webtechTech talk webtech
Tech talk webtech
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
 
Drupal: an Overview
Drupal: an OverviewDrupal: an Overview
Drupal: an Overview
 
Fii Practic Frontend BeeNear - laborator 1
Fii Practic Frontend BeeNear - laborator 1Fii Practic Frontend BeeNear - laborator 1
Fii Practic Frontend BeeNear - laborator 1
 
Drupal, git and sanity
Drupal, git and sanityDrupal, git and sanity
Drupal, git and sanity
 

Kürzlich hochgeladen

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 

Kürzlich hochgeladen (20)

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 

Directed Study I

Hinweis der Redaktion

  1. Over the past 6 months I’ve played around with responsive designs in WordPress, and gotten one such project under my belt. With another on the go, and I suspect more to come in the future, I have decided to use my directed study to build a jumping-off point for these kinds of projects. This will allow me to distill my experience-so-far in to a platform that I can use for my own new projects, and provide as a useful tool to other developers.\n
  2. It really is simple when you think about it. Awesome people have made projects available that distill tonnes of experience in to boilerplates and snippets that you can draw on.\n\nBeyond this “jumping-off point” though, I would like my framework to include modules that a developer or a client can use to save even more work. These modules would be things like carousels, navigations, features or promotions, forms, media elements and other design patterns common within a CMS.\n
  3. We’re looking at the usual suspects as far as technology goes.\n\nThe whole thing is powered by WordPress, which is built on PHP and MySQL and so the project will be heavy on those two languages. There will likely be MySQL and DB development for some of the modules that I would like to build in.\n\nOne resource that I will be drawing from heavily is the HTML5BP.\n
  4. We’re looking at the usual suspects as far as technology goes.\n\nThe whole thing is powered by WordPress, which is built on PHP and MySQL and so the project will be heavy on those two languages. There will likely be MySQL and DB development for some of the modules that I would like to build in.\n\nOne resource that I will be drawing from heavily is the HTML5BP.\n
  5. We’re looking at the usual suspects as far as technology goes.\n\nThe whole thing is powered by WordPress, which is built on PHP and MySQL and so the project will be heavy on those two languages. There will likely be MySQL and DB development for some of the modules that I would like to build in.\n\nOne resource that I will be drawing from heavily is the HTML5BP.\n
  6. We’re looking at the usual suspects as far as technology goes.\n\nThe whole thing is powered by WordPress, which is built on PHP and MySQL and so the project will be heavy on those two languages. There will likely be MySQL and DB development for some of the modules that I would like to build in.\n\nOne resource that I will be drawing from heavily is the HTML5BP.\n
  7. We’re looking at the usual suspects as far as technology goes.\n\nThe whole thing is powered by WordPress, which is built on PHP and MySQL and so the project will be heavy on those two languages. There will likely be MySQL and DB development for some of the modules that I would like to build in.\n\nOne resource that I will be drawing from heavily is the HTML5BP.\n
  8. We’re looking at the usual suspects as far as technology goes.\n\nThe whole thing is powered by WordPress, which is built on PHP and MySQL and so the project will be heavy on those two languages. There will likely be MySQL and DB development for some of the modules that I would like to build in.\n\nOne resource that I will be drawing from heavily is the HTML5BP.\n
  9. HTML5BP takes care of baseline HTML5, CSS and JavaScript best practices. It includes things like “respond.js” and “modernizr.js” which shiv support for necessary technology in the bad browser, a build script to minimize load times, and CSS “normalization”— I read that it’s better than CSS resets. See “normalize.css.”\n\nHTML5BP is in a state of constant iteration as the state of the industry changes, I would like to make it so that future versions of the BP can easily be integrated in to the theme.\n
  10. Semantics and accessibility are chief concerns when designing the HTML structure.\n
  11. \n
  12. \n