Drupal Govcon 2018 - HAX the web

Aug 22, 2018Download as PPTX, PDF1 like70 views

Creating the best Drupal Authoring Experience, by not creating it for Drupal. These slides are to the talk seen here https://www.drupalgovcon.org/2018/program/sessions/creating-best-drupal-authoring-experience-not-creating-it-drupal

NGDL
E
Image ©2015 Buttercups Training, used with permission.

A quick history of the Jam.. Errr… authoring methods
Warner Bros

Contributors are
users, too!
Warner Bros

and you love your
contributors…
Warner Bros

and you love your
contributors…
don’t you?! Warner Bros

”With enough training we’ll gain
slightly less anarchy for our clients”
- Marketing Manager Boss Person

We’re all toying with improving AX, but...

Walt Disney Pictures
“THE SKY IS FALLING!!!”
Huh?
C Level Manager Boss Person

Why does Drupal care about my Design.
I don’t know Drupal and I’m not able to contribute
as a result of that.
Michael Collins, Feb 2017
“ “

The CMS must learn your Design.
Your Design will never learn your CMS.
btopro, right now
“ “

Gutenberg has me trapped forever using React and
Gutenberg.
WHY DIDN’T WE ADOPT WEB COMPONENTS!?
Dystopian future
“ “

not this joke again…
It’s not April any
more
!

We don’t need a framework!
the web is the platform!!!

The web is the platform!
Stable
October 23rd !!

<div style=“color:blue;”>
<a href=“link.com”>Name</a>
</div>

<my-button link=“link.com”>
Name
</my-button>

Tom, do you know CSS, HTML, and basic
JS?

<link
rel=“import”
href=“../hax-body/hax-body.html”
/> A way of teaching the front-end how to run a web component

<hax-body>
<p>HTML</p>
<video-player src=“video.mp4”></video-player>
</hax-body>

Our backend to leverage this needs…
1. Content placed between tags
2. Endpoint to load manifest directions
3. Endpoint to save changes
4. Endpoint to save media (optional)

Automattic is a company founded in 2005 that develops and maintains WordPress, a popular open-source content management system. It offers WordPress.com which allows users to build websites without hosting or plugins, and VIP hosting services for businesses. The document promotes Automattic job openings and mentions products and services like P2 theme and WordPress.com images. It provides contact details for the author and encourages getting in touch with any other questions.

10 Tips to Make WordPress Your Friend Kerch McConlogue

The document provides 10 tips for making WordPress easier to use. It recommends taking notes, using headings instead of bold text, being aware of copy and paste issues that can introduce unwanted code, using the alignment, indentation and spacing tools, installing and configuring plugins correctly, using revisions to recover lost work, searching the codex for help, and practicing to get more comfortable with WordPress. It also provides contact information for the author to get additional help with questions.

HowtobuildawebsitewithoutgettingscrewedAmanda Blum

The document provides guidance on how to get a website built without problems. It compares the process to building a home and outlines various options for websites, including renting space online or fully owning a custom site. The author recommends determining needs and capabilities, finding trustworthy developers and designers, setting clear expectations, budgets and timelines, and leaving time for testing before launch.

WordPress.com の裏側 (Behind the Scenes of WordPress.com) - WordCamp Tokyo - Nov...John Ford

Plugins Spectacular WordCamp Sydney 2012Tony Cosentino

WordPress for Business Sites - ConvergeSouth - October 2011John Ford

This document discusses using WordPress for business websites. It recommends WordPress because it is free, flexible, and has a large community and ecosystem of plugins and themes. It also suggests using WordPress to build credibility through professional designs, provide valuable content to customers, and foster conversations through comments and social media. Plugins can add features like SEO, contact forms, analytics, and ecommerce capabilities to help businesses using WordPress sites.

Writing Plugins for WordPress MURon Rennick

This document summarizes Ron Rennick's presentation on writing plugins for WordPress MU. It provides an overview of common traps to avoid like using template tags and global variables incorrectly. It also offers tips for developing MU plugins like checking for the MU version, using global constants and functions, and interacting with the global tables. The document concludes with some tricks like using filters and hooks specific to MU and making plugin tables work across multiple blogs.

Blogworkshop Part 1planetsab

The document outlines a blog workshop conducted by Sebastian Keil on April 23, 2009. The workshop covered topics such as what a blog is, why blog, blog content and themes, blog mechanics and rules, and tips for corporate blogging. Participants were encouraged to listen, think critically, consider their audience, be transparent with readers, make mistakes and apologize for errors when blogging. The goal of the workshop was to help attendees understand blogging and have fun with it.

Discovery Education streaming and Google EarthMike Bryant

Wordcamp Birmingham 2009Tom Brander

The document discusses blogging platforms and compares WordPress.org and WordPress.com. WordPress.org is an open-source software that requires installation on a hosting service, while WordPress.com is a free hosted service with some restrictions. The document then provides step-by-step instructions on getting started with WordPress.com, including signing up, selecting a theme, writing a post, and refining the blog. It also discusses some paid upgrade options for WordPress.com that remove ads or allow custom domains.

GoCoding.Today For Rails - Episode1Brian Hu

GoCoding.Today shares how to become a software engineer from zero by covering important concepts and keywords over 18 episodes, emphasizing that practice is required. Viewers can ask questions by leaving comments. The site recommends having an idea of something to build and knowing that done is better than perfect when getting started with HTML and CSS basics by referencing provided learning resources and homework of creating an HTML page.

How to Make WordPress Your Friendkerchmcc

The document provides tips for using WordPress, including using headings instead of bold or colored text, using blockquotes and indent/outdent features, backing up updates, adding alt tags and titles, adjusting image display settings, removing weird spacing, using plugins, finding revisions, and searching the WordPress codex when confused. The final tip is to practice with WordPress by making draft pages and adding content to learn what features work.

10-ish Tips to Make WordPress Your FriendKerch McConlogue

This document provides 10 tips for making WordPress easier to use. It recommends taking notes, using headings instead of bold or color, being careful when copy-pasting, using image alignment options like left and center, removing extra line breaks, using plugins properly, using revisions to recover lost work, searching the WordPress codex for help, and practicing to get more comfortable. The overall message is that with a basic understanding of WordPress and a willingness to experiment, it can become a user-friendly tool.

Frontend Crash CourseAaron Lamphere

The document outlines an agenda for a frontend crash course workshop on HTML and CSS. It introduces the instructor and TAs, suggests taking advantage of support, and provides an overview of the workshop agenda which includes learning key concepts, reviewing assignments, working on challenges with support, and next steps for continued learning. It also covers topics like how the web works, the roles of clients and servers, HTML structure and tags, using CSS to style pages, common CSS properties and selectors, and assignments for attendees to complete after the workshop.

WordCamp Miami- How to Hire a Web Firm to Build Your WebsiteAmanda Blum

The document provides advice on how to get a website built without issues. It suggests treating website development like building a home by carefully considering needs, budget, timeline, and team. Key steps include having a proper contract in place that specifies deliverables and timelines, paying developers in milestones, allowing time for testing, and planning for ongoing maintenance after launch. The overall message is that preparation, clear expectations, and ongoing communication are important for a smooth website development process.

Frameworks for the webnetfuel

The document discusses using HTML frameworks to help with web design. It notes some benefits of frameworks like providing a simple foundation to start, saving time, and capitalizing on good code. However, frameworks can sometimes result in less semantic or readable code, and the design and code may not be separate. Several popular frameworks are mentioned like HTML Framework, Blueprint, 960 Grid System, and HTML5 Boilerplate. The document encourages exploring these frameworks and using techniques like CSS libraries and clips to work faster when designing with frameworks.

Frontend Crash CourseTJ Stalcup

This document provides an overview of a frontend crash course on HTML and CSS. It introduces the instructor and teaching assistants. The agenda includes learning key concepts of HTML and CSS over 90 minutes, with support provided to complete challenges. Suggestions are given to not get discouraged and take advantage of support. The document explains how the web works with requests and responses between clients and servers, and covers some basic HTML tags and CSS properties to style pages. Assignments are given for the evening, and options to continue learning frontend development are presented.

location de voiture au maroclocation de voiture casablanca - Jazz car

Wordcamp Bangkok 2008Akarawuth Tamrareang

Frontend Crash CourseTJ Stalcup

The document outlines an agenda for a frontend crash course on HTML and CSS taught by TJ Stalcup at Thinkful. The agenda includes introducing the instructor and Thinkful, discussing learning strategies, covering key HTML and CSS concepts, reviewing assignments, doing challenges with support, and discussing next steps for continued learning. The course aims to teach students the basics of how the web works, HTML structure and tags, CSS selectors, properties and values, and assignments include practicing these skills.

A Beginner's Guide to Popping the Bonnet and Getting Your Hands DirtyKenneth Scott Huntley

This document is a presentation about customizing WordPress for beginners. It introduces common WordPress customizations like creating a child theme and custom CSS, adding a logo to the login screen, creating a custom dashboard widget, and modifying the WordPress loop to add an ad. The presentation explains that these tasks don't require advanced coding skills and encourages attendees to look at online tutorials to learn how to customize WordPress.

Plan, Build, Launch a Video Blog from Streaming Media Europe 09Jose Castillo

This document provides guidance on planning, building, and launching a video blog. It discusses identifying a niche and target audience, creating a basic business plan, determining equipment and software needs, and developing a content and marketing strategy. The goal is to help people plan, build, and launch their first podcast through learning, doing, and getting feedback at each stage of the process.

Backlink davelocation de voiture casablanca - Jazz car

The document appears to be a list of URLs from various blogs and websites on topics related to travel, marketing, social media, and automobiles. Specifically, it includes over 50 links to posts and pages on blogs related to travel advice, destinations, and experiences as well as links to pages on marketing, PR, and social media consulting websites. The URLs reference topics such as travel tips, romantic cities, outdoor adventures, marketing strategies, social media tools, and automotive industry news.

WRA 210 April 14th PowerPointMiami University

1) The instructor is providing clarification on an assignment to design a website using HTML and CSS and deploy it to Tumblr. They acknowledge there was confusion and take responsibility. 2) Students are reminded that the mock-up is the important part, even if they can't get the full site deployed to Tumblr by the deadline. 3) The instructor answers students' questions about linking pages, images, fonts, cutting images out of backgrounds, text effects, and drop-down menus in an effort to help students with their site designs.

Thinkful FrontEnd Crash Course - HTML & CSSTJ Stalcup

This document provides an overview of a frontend crash course on HTML and CSS. It introduces the instructor and teaching assistants. The agenda includes learning key concepts of HTML and CSS over 30 minutes, reviewing assignments for 10 minutes, completing challenges with support for 30 minutes, and information on continuing learning for 10 minutes. The document explains how the web works with clients and servers, and provides examples of HTML tags and CSS properties to style pages. It also lists assignments for students and information on Thinkful's programming bootcamps and mentorship opportunities.

Thinkful DC FrontEnd Crash Course - HTML & CSSTJ Stalcup

This document provides an overview of a frontend crash course on HTML and CSS. It includes details about the instructor, learning objectives, agenda, and how to continue learning after the course. The agenda covers key concepts of HTML, CSS, and how the web works. Assignments are provided to practice the skills learned. Real-world examples and troubleshooting tips are also discussed to help students learn and feel supported.

Microsoft Expression Web: From Comp, to CSS, to Code!goodfriday

10 secrets to make your contents go viral crazilySteve Nguyen

Open Ed 2018 - The Free, Open, Decentralized OER publishing platformbtopro

This is a presentation I had prepared for OpenEd 2018 until I realized that I didn't have the ability to show slides. So, that means it's actually a presentation that'll be done on youtube instead :) (pending time to record it). This discusses HAX and web components in the context of authoring and that authoring experience is universally bad, and what good ones are emerging are not good for accessibility and remix of OER long term.

Les animations sur WordPress - avec DamienJulien Dereumaux

This document is an agenda for a webinar on web animations in WordPress presented by Damien. The agenda includes: an introduction of Damien; discussions of the advantages and disadvantages of web animations, the composition of web animations, and examples of simple 2D, advanced 2D, and complex 3D animations; platforms for showcasing aesthetic websites; sources of inspiration and tools/libraries; and the team needed for animation projects. Live demos of animations will be included.

More Related Content

What's hot (20)

Discovery Education streaming and Google EarthMike Bryant

Wordcamp Birmingham 2009Tom Brander

GoCoding.Today For Rails - Episode1Brian Hu

How to Make WordPress Your Friendkerchmcc

10-ish Tips to Make WordPress Your FriendKerch McConlogue

Frontend Crash CourseAaron Lamphere

WordCamp Miami- How to Hire a Web Firm to Build Your WebsiteAmanda Blum

Frameworks for the webnetfuel

Frontend Crash CourseTJ Stalcup

location de voiture au maroclocation de voiture casablanca - Jazz car

Wordcamp Bangkok 2008Akarawuth Tamrareang

Frontend Crash CourseTJ Stalcup

A Beginner's Guide to Popping the Bonnet and Getting Your Hands DirtyKenneth Scott Huntley

Plan, Build, Launch a Video Blog from Streaming Media Europe 09Jose Castillo

Backlink davelocation de voiture casablanca - Jazz car

WRA 210 April 14th PowerPointMiami University

Thinkful FrontEnd Crash Course - HTML & CSSTJ Stalcup

This document provides an overview of a frontend crash course on HTML and CSS. It introduces the instructor and teaching assistants. The agenda includes learning key concepts of HTML and CSS over 30 minutes, reviewing assignments for 10 minutes, completing challenges with support for 30 minutes, and information on continuing learning for 10 minutes. The document explains how the web works with clients and servers, and provides examples of HTML tags and CSS properties to style pages. It also lists assignments for students and information on Thinkful's programming bootcamps and mentorship opportunities.

Thinkful DC FrontEnd Crash Course - HTML & CSSTJ Stalcup

Microsoft Expression Web: From Comp, to CSS, to Code!goodfriday

10 secrets to make your contents go viral crazilySteve Nguyen

Discovery Education streaming and Google EarthMike Bryant

Wordcamp Birmingham 2009Tom Brander

GoCoding.Today For Rails - Episode1Brian Hu

How to Make WordPress Your Friendkerchmcc

10-ish Tips to Make WordPress Your FriendKerch McConlogue

Frontend Crash CourseAaron Lamphere

WordCamp Miami- How to Hire a Web Firm to Build Your WebsiteAmanda Blum

Frameworks for the webnetfuel

Frontend Crash CourseTJ Stalcup

location de voiture au maroclocation de voiture casablanca - Jazz car

Wordcamp Bangkok 2008Akarawuth Tamrareang

Frontend Crash CourseTJ Stalcup

A Beginner's Guide to Popping the Bonnet and Getting Your Hands DirtyKenneth Scott Huntley

Plan, Build, Launch a Video Blog from Streaming Media Europe 09Jose Castillo

Backlink davelocation de voiture casablanca - Jazz car

WRA 210 April 14th PowerPointMiami University

Thinkful FrontEnd Crash Course - HTML & CSSTJ Stalcup

Thinkful DC FrontEnd Crash Course - HTML & CSSTJ Stalcup

Microsoft Expression Web: From Comp, to CSS, to Code!goodfriday

10 secrets to make your contents go viral crazilySteve Nguyen

Similar to Drupal Govcon 2018 - HAX the web (20)

Open Ed 2018 - The Free, Open, Decentralized OER publishing platformbtopro

Les animations sur WordPress - avec DamienJulien Dereumaux

RWD in the WildRich Quick

1. The document discusses responsive web design (RWD) and how it can be implemented simply using media queries. 2. It notes that RWD only requires learning one line of code - media queries like @media screen and (min-width:1025px) { /* your CSS here */ } 3. However, it also cautions that RWD requires more than just technical implementation - it involves designing for different screen sizes and a focus on user experience across devices.

FOWD NYC 2009elliotjaystocks

Practical CSS3 AnimationsAmber Makeyev

This document discusses practical uses of CSS3 animations for clients. It begins by showing examples of impressive but impractical animations done with CSS3 alone. It then covers the syntax of CSS3 transitions, transforms, and animations/keyframes that can be used to create subtle yet effective animations for sites. Examples are given of sites that use CSS3 animations well. The document concludes by encouraging the reader to create wonderful animations for clients while considering browser compatibility issues and avoiding overly complex or impractical animations.

Stefan Judis "Did we(b development) lose the right direction?"Fwdays

Keeping up with the state of web technology is one of the biggest challenges for us developers today. We invent new tools; we define new best practices, everything’s new, always... And we do all that for good user experience! We do all that to build the best possible web – it’s all about our users. But is it, really? Or do developers like to play with technology secretly loving the new and shiny? Or do we only pretend that it’s about users, and behind closed doors, it’s developer experience that matters to us? Did we lose direction? Is it time for a critical look at the state of the web and the role JavaScript plays in it?

Travailler dans le présent - Chris Heilmann - Paris Web 2008Association Paris-Web

Dans cette présentation, Chris Heilmann nous parlera des problèmes liés à l'adoption de standards du web récents, et décrira des façons de contourner ces difficultés. Un exemple simple est le manque de prise en charge native de l'audio et de la vidéo, et les problèmes des implémentations actuelles. La session illustrera concrètement comment régler des problèmes a priori sans solution en les attaquant sous un autre angle. Il s'agit essentiellement de trouver une façon pragmatique de vendre, implémenter et utiliser les standards plutôt que d'attendre que le marché adopte des technologies dont l'utilisation devrait être d'une évidence complète. Présentation originale : http://www.slideshare.net/cheilmann/working-in-the-now-presentation/

Working In The Now - Paris WebChristian Heilmann

OOScss Architecture For Rails AppsNetguru

This document discusses using OOScss architecture for Rails applications. It proposes dividing CSS into components, modules, and layouts. Placeholder selectors from Sass can be used to create reusable CSS modules without code bloat. Examples show issues with directly using Bootstrap for complex designs. Following OOScss principles like identifying reusable objects, using semantic HTML, and separating styles from content can help build custom designs on top of frameworks like Bootstrap more effectively.

Rapid Prototyping with Sass, Compass and Middleman by Bermon PainterCodemotion

10 Simple Rules for Making My Site AccessibleHelena Zubkow

From the basic principle that the web should be great for everyone, Chris Albrecht and Helena Zubkow team up to present an informative accessibility demo that will rock your world. The goal of this session is to introduce developers to web accessibility – what it is, why it’s important, and how to build and test sites to make them as accessible as possible. This includes a demo of how to do things the right way and the wrong way, some great tools, and a walkthrough of basic standards for accessibility. - Intro - What is web accessibility? - Why does web accessibility matter? - Accessibility fundamentals (web accessibility in practice / code demo) - Web accessibility tools to assess and improve your projects - Q&A session

Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...javier ramirez

We rails people tend to think of Rails as the center-piece of web development. The same thing can be said of .net, Spring/Java Server Faces, Drupal, Python or name-your-web-framework-of-choice-here people. Web frameworks are just a component of web applications, and if you want to succeed you better know the miriads of other components beyond your rockstar code. In my session I will talk about things you must take into account and tools/techniques you should master if you want to make a difference in web development, independently of your development language/framework. Talk delivered at conferencia rails 2010 in Madrid, Spain.

Stop Worrying & Get On With It (FOWD Tour 2009)elliotjaystocks

The document discusses issues with supporting older browsers and ensuring websites are accessible to all users. It notes that some users see "broken" sites with older browsers. The suggestions are to not build broken sites, offer basic support as long as it's not broken, use universalie6.css or warnings for real problems, and include visual treatments integral to branding. Comments acknowledge the need to support older browsers but also express excitement about CSS3 and a desire to use new techniques once browsers have fully implemented standards.

Stop Worrying & Get On With It (WDC Bristol 2009)elliotjaystocks

The document discusses embracing progressive enhancement and new CSS techniques. It argues that a small percentage of users seeing enhancements today will grow over time as browser support improves. The author believes designers have a duty to push forward-thinking development by using new CSS features, even if they don't validate or work in all browsers currently. Small things like attribute and nth-child selectors can make code more efficient. Degradation, not validation, should be planned for. The flexibility of the web is a blessing, not a curse, so sites can ensure a good experience for most while offering a great experience for some users.

Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...elliotjaystocks

JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...Marco Cedaro

Close Your Browser: Finding Inspiration In The Offline Worldelliotjaystocks

Resisting The Feature CreatureChristian Heilmann

How to Grow Your Audience Through AccessibilityAllison Sheridan

SEO and AccessibilityChristian Heilmann

The document discusses how to make websites accessible to both search engine robots and human users. It notes that robots and humans both appreciate good page titles, headings, links to follow, data presented upfront in easy to digest chunks. However, websites are often designed primarily around what is thought to attract human users, with big shiny things, animations, and social features, which can make them inaccessible. The document advocates focusing first on structure, titles, and availability to make websites accessible to all. It provides examples of proper and improper use of headings, links, and alternative text for images.

Open Ed 2018 - The Free, Open, Decentralized OER publishing platformbtopro

Les animations sur WordPress - avec DamienJulien Dereumaux

RWD in the WildRich Quick

FOWD NYC 2009elliotjaystocks

Practical CSS3 AnimationsAmber Makeyev

Stefan Judis "Did we(b development) lose the right direction?"Fwdays

Travailler dans le présent - Chris Heilmann - Paris Web 2008Association Paris-Web

Working In The Now - Paris WebChristian Heilmann

OOScss Architecture For Rails AppsNetguru

Rapid Prototyping with Sass, Compass and Middleman by Bermon PainterCodemotion

10 Simple Rules for Making My Site AccessibleHelena Zubkow

Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...javier ramirez

Stop Worrying & Get On With It (FOWD Tour 2009)elliotjaystocks

Stop Worrying & Get On With It (WDC Bristol 2009)elliotjaystocks

Stop Worrying & Get On With It: Progressive Enhancement & Intentional Degrada...elliotjaystocks

JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...Marco Cedaro

Close Your Browser: Finding Inspiration In The Offline Worldelliotjaystocks

Resisting The Feature CreatureChristian Heilmann

How to Grow Your Audience Through AccessibilityAllison Sheridan

SEO and AccessibilityChristian Heilmann

More from btopro (20)

ELMS:LN 2020 update @ Apereobtopro

This document provides an overview and update on the ELMS:LN project and the development of the Next Generation Digital Learning Environment (NGDLE). The key points are: 1. ELMS:LN version 1.0.0 has been released, focusing on course content management and studio-based instruction. 2. The NGDLE is comprised of over 286 reusable web components and tools rather than a single system. 3. The HAX project is taking on a life of its own and providing a tangible vision of what the NGDLE can be through web components that work across different platforms and systems. 4. The presenter discusses how web components, HAX, and learning

EdTechJoker Open Activism Projectbtopro

This document provides an overview and instructions for a final open education project. It discusses the open education (OER) movement and resources like OERSchema that help make educational content more open and accessible. Students are asked to create a comprehensive online educational resource on a topic not adequately covered in their courses using the hax.psu.edu platform. They must also create two persuasive videos - one for instructors on how to use the resource, and one for administrators on why the topic should be part of the curriculum. The goal is to demonstrate how open educational tools can create high-quality educational content and help make education more open and affordable.

Lecture13 Containersbtopro

Ed techjoker faculty presentationbtopro

- The instructor establishes the structure and goals of the course, which introduces students to emerging web technologies through hands-on labs and open platform submissions. - Students complete weekly labs building technical skills and create YouTube explainer videos to discuss their work, which helps improve communication skills. - A mid-semester survey found students enjoyed this approach and learned more through the active learning experience compared to traditional classes focused on definitions. - While some elements may not scale easily, the open approach and emphasis on practical skills benefits students in developing their personal brands for future careers.

IST 402 Presentation by Sonyabtopro

This document discusses web accessibility, providing definitions and guidelines. It covers laws like the Americans with Disabilities Act and Section 508, as well as the Web Content Accessibility Guidelines. It then gives examples of making web content accessible for different users, including one who is blind, deaf and colorblind, has low vision, a traumatic brain injury, or mobility impairment. Best practices like color contrast, images descriptions, and keyboard navigation are also reviewed. Certifications in accessibility are mentioned at the end.

Lecture11 - Accessibilitybtopro

This document provides an overview of Week 11 of a course which focuses on accessibility (A11y). It discusses using tools like WAVE and Lighthouse to audit websites for accessibility and performance. Students used various content management systems and provided feedback that identified 17 issues. The final project will involve a recommendation for how to create sustainable open educational resources (OER). A guest speaker from Penn State will discuss accessibility. Links are provided to explore accessibility further using tools from the Chrome Web Store.

EdTechJoker - HAXTheWebbtopro

Drupalbtopro

ClassicPress / WordPressbtopro

This document provides an overview of WordPress and ClassicPress for Week 6. It discusses WordPress and ClassicPress as content management systems, noting WordPress is the most popular for general usage. It outlines what will be covered this week, including setting up WordPress on Reclaim hosting and building a small site. Links and definitions are provided for key terms. Advantages and disadvantages of WordPress are discussed. Finally, two lab scenarios are presented involving building WordPress sites to address client needs.

Grav CMSbtopro

HAX camp 2019 - HAX The Camp addressbtopro

https://www.youtube.com/watch?v=f_tEA9O9pco A statement of purpose both mine, our teams, and web components. A mix of serious, silly, crazy, and fun. This highlights amazing things going on in the HAX, HAXcms and web components community at large. In it I lay out the case for web components as the foundational piece needed to be the change agent to take web publishing and self expression to the next level. This is a new beginning. This is the bridge building community. This is HAX'ing complacency in web technologies. This is HAX. And together, we are HAX camp.

HAX camp 2019 - Welcomebtopro

The document announces an event called HAXcamp to promote web components, with sessions on topics like building web components, tooling, frameworks, and design systems, and encourages participants to blog about sessions for a chance to win a prize by completing a scavenger hunt. An unconference structure is outlined where participants can propose and discuss topics to help form the schedule. Guidelines are provided for the unconference discussions and scheduling.

Web components and Package managersbtopro

HTML / CSS / JS Web basicsbtopro

Background info on git / githubbtopro

This document discusses Git and version control. It provides an overview of Git and GitHub, how developers collaborate using these tools, and what pull requests look like. Alternatives to GitHub like GitLab are mentioned. The document demonstrates basic Git commands and explains why GitHub became popular for open source projects due to features like its desktop apps, clean repository views, and pull request/issue workflow. Links are provided for learning more about Git, GitHub, Markdown, and version control best practices.

EdTechJoker IST 402 - Syllabus daybtopro

Future proofing design work with Web componentsbtopro

Web components are a W3C standard that's been adopted by all major browsers as of October 2018. The Version 1 specification is a joy to work with and brings the web into a composing context from a raw materials one. That is, we can now directly repurpose and leverage our efforts to build bigger and better experiences (like modern home development practices) instead of constantly reinventing the wheel (like molding bricks out of clay to work on our house). As of this writing, the ELMS:LN team (4 people) at Penn State has created 433 web components for generalized use. We've built an editor, a CMS, integrated those elements into Drupal (multiple versions), delivered static sites, worked on desktop apps, and done design work entirely, end to end, using web components and a uniform process for creating and deploying them. Talk structure: What are web components, can I use them, answering questions of libraries, polyfills, SEO, and accessibility Examples of who has adopted them and what they doing with them Community resources like polymer slack, webcomponents, and open-wc.org Detailed examples of adoption in production, Drupal and non-Drupal environments, lessons learned and unthinkable wins Our WCFactory tooling that automates much of the workflow of producing a sustainable element portfolio How teams can leverage web components across projects Where Drupal 6,7,8,9 fit into the future with web components Where the future is going with HAXeditor and HAXcms, the future of micro-site generation and management Our team is in love with web components and we think you will too! Join us and build better, more sustainable design systems of the future (today)!

The case for Web components - Drupal4Gov webinarbtopro

HAX - Chaotic Goodbtopro

HAXTheWeb @ Apereo 19btopro

Bryan Ollendyke presented on the past, present, and future of several open source projects including ELMS:LN, Web Components, HAXeditor, HAXcms, and HAXiam. ELMS:LN started as an experimentation platform to envision a next generation digital learning environment. It is now used by two colleges and a medical training vendor but requires too many resources. Web Components allow reusable elements to be shared across platforms. HAXeditor is a headless authoring experience using web components to create a platform-agnostic content authoring tool. HAXcms is a static site generator and content management system built with HAXeditor. HAXiam will be a SaaS version of HAX

ELMS:LN 2020 update @ Apereobtopro

EdTechJoker Open Activism Projectbtopro

Lecture13 Containersbtopro

Ed techjoker faculty presentationbtopro

IST 402 Presentation by Sonyabtopro

Lecture11 - Accessibilitybtopro

EdTechJoker - HAXTheWebbtopro

Drupalbtopro

ClassicPress / WordPressbtopro

Grav CMSbtopro

HAX camp 2019 - HAX The Camp addressbtopro

HAX camp 2019 - Welcomebtopro

Web components and Package managersbtopro

HTML / CSS / JS Web basicsbtopro

Background info on git / githubbtopro

EdTechJoker IST 402 - Syllabus daybtopro

Future proofing design work with Web componentsbtopro

The case for Web components - Drupal4Gov webinarbtopro

HAX - Chaotic Goodbtopro

HAXTheWeb @ Apereo 19btopro

Recently uploaded (20)

P-glycoprotein pamphlet: iteration 4 of 4 finalbs22n2s

The ever evoilving world of science /7th class science curiosity /samyans aca...Sandeep Swamy

The Ever-Evolving World of Science Welcome to Grade 7 Science4not just a textbook with facts, but an invitation to question, experiment, and explore the beautiful world we live in. From tiny cells inside a leaf to the movement of celestial bodies, from household materials to underground water flows, this journey will challenge your thinking and expand your knowledge. Notice something special about this book? The page numbers follow the playful flight of a butterfly and a soaring paper plane! Just as these objects take flight, learning soars when curiosity leads the way. Simple observations, like paper planes, have inspired scientific explorations throughout history.

LDMMIA Reiki Master Spring 2025 Mini UpdatesLDM Mia eStudios

SPRING FESTIVITIES - UK AND USA -Colégio Santa Teresinha

Geography Sem II Unit 1C Correlation of Geography with other school subjectsProfDrShaikhImran

Phoenix – A Collaborative Renewal of Children’s and Young People’s Services C...Library Association of Ireland

Operations Management (Dr. Abdulfatah Salem).pdfArab Academy for Science, Technology and Maritime Transport

Sinhala_Male_Names.pdf Sinhala_Male_Namekeshanf79

YSPH VMOC Special Report - Measles Outbreak Southwest US 4-30-2025.pptxYale School of Public Health - The Virtual Medical Operations Center (VMOC)

A measles outbreak originating in West Texas has been linked to confirmed cases in New Mexico, with additional cases reported in Oklahoma and Kansas. The current case count is 795 from Texas, New Mexico, Oklahoma, and Kansas. 95 individuals have required hospitalization, and 3 deaths, 2 children in Texas and one adult in New Mexico. These fatalities mark the first measles-related deaths in the United States since 2015 and the first pediatric measles death since 2003. The YSPH Virtual Medical Operations Center Briefs (VMOC) were created as a service-learning project by faculty and graduate students at the Yale School of Public Health in response to the 2010 Haiti Earthquake. Each year, the VMOC Briefs are produced by students enrolled in Environmental Health Science Course 581 - Public Health Emergencies: Disaster Planning and Response. These briefs compile diverse information sources – including status reports, maps, news articles, and web content– into a single, easily digestible document that can be widely shared and used interactively. Key features of this report include: - Comprehensive Overview: Provides situation updates, maps, relevant news, and web resources. - Accessibility: Designed for easy reading, wide distribution, and interactive use. - Collaboration: The “unlocked" format enables other responders to share, copy, and adapt seamlessly. The students learn by doing, quickly discovering how and where to find critical information and presenting it in an easily understood manner.

K12 Tableau Tuesday - Algebra Equity and Access in Atlanta Public Schoolsdogden2

Algebra 1 is often described as a “gateway” class, a pivotal moment that can shape the rest of a student’s K–12 education. Early access is key: successfully completing Algebra 1 in middle school allows students to complete advanced math and science coursework in high school, which research shows lead to higher wages and lower rates of unemployment in adulthood. Learn how The Atlanta Public Schools is using their data to create a more equitable enrollment in middle school Algebra classes.

pulse ppt.pptx Types of pulse , characteristics of pulse , Alteration of pulsesushreesangita003

CBSE - Grade 8 - Science - Chemistry - Metals and Non Metals - WorksheetSritoma Majumder

Introduction All the materials around us are made up of elements. These elements can be broadly divided into two major groups: Metals Non-Metals Each group has its own unique physical and chemical properties. Let's understand them one by one. Physical Properties 1. Appearance Metals: Shiny (lustrous). Example: gold, silver, copper. Non-metals: Dull appearance (except iodine, which is shiny). 2. Hardness Metals: Generally hard. Example: iron. Non-metals: Usually soft (except diamond, a form of carbon, which is very hard). 3. State Metals: Mostly solids at room temperature (except mercury, which is a liquid). Non-metals: Can be solids, liquids, or gases. Example: oxygen (gas), bromine (liquid), sulphur (solid). 4. Malleability Metals: Can be hammered into thin sheets (malleable). Non-metals: Not malleable. They break when hammered (brittle). 5. Ductility Metals: Can be drawn into wires (ductile). Non-metals: Not ductile. 6. Conductivity Metals: Good conductors of heat and electricity. Non-metals: Poor conductors (except graphite, which is a good conductor). 7. Sonorous Nature Metals: Produce a ringing sound when struck. Non-metals: Do not produce sound. Chemical Properties 1. Reaction with Oxygen Metals react with oxygen to form metal oxides. These metal oxides are usually basic. Non-metals react with oxygen to form non-metallic oxides. These oxides are usually acidic. 2. Reaction with Water Metals: Some react vigorously (e.g., sodium). Some react slowly (e.g., iron). Some do not react at all (e.g., gold, silver). Non-metals: Generally do not react with water. 3. Reaction with Acids Metals react with acids to produce salt and hydrogen gas. Non-metals: Do not react with acids. 4. Reaction with Bases Some non-metals react with bases to form salts, but this is rare. Metals generally do not react with bases directly (except amphoteric metals like aluminum and zinc). Displacement Reaction More reactive metals can displace less reactive metals from their salt solutions. Uses of Metals Iron: Making machines, tools, and buildings. Aluminum: Used in aircraft, utensils. Copper: Electrical wires. Gold and Silver: Jewelry. Zinc: Coating iron to prevent rusting (galvanization). Uses of Non-Metals Oxygen: Breathing. Nitrogen: Fertilizers. Chlorine: Water purification. Carbon: Fuel (coal), steel-making (coke). Iodine: Medicines. Alloys An alloy is a mixture of metals or a metal with a non-metal. Alloys have improved properties like strength, resistance to rusting.

Handling Multiple Choice Responses: Fortune Effiong.pptxAuthorAIDNationalRes

How to Set warnings for invoicing specific customers in odooCeline George

Quality Contril Analysis of Containers.pdfDr. Bindiya Chauhan

One Hot encoding a revolution in Machine learningmomer9505

Multi-currency in odoo accounting and Update exchange rates automatically in ...Celine George

Niamh Lucey, Mary Dunne. Health Sciences Libraries Group (LAI). Lighting the ...Library Association of Ireland

apa-style-referencing-visual-guide-2025.pdfIshika Ghosh

Title: A Quick and Illustrated Guide to APA Style Referencing (7th Edition) This visual and beginner-friendly guide simplifies the APA referencing style (7th edition) for academic writing. Designed especially for commerce students and research beginners, it includes: ✅ Real examples from original research papers ✅ Color-coded diagrams for clarity ✅ Key rules for in-text citation and reference list formatting ✅ Free citation tools like Mendeley & Zotero explained Whether you're writing a college assignment, dissertation, or academic article, this guide will help you cite your sources correctly, confidently, and consistent. Created by: Prof. Ishika Ghosh, Faculty. 📩 For queries or feedback: [email protected]

SCI BIZ TECH QUIZ (OPEN) PRELIMS XTASY 2025.pptxRonisha Das

P-glycoprotein pamphlet: iteration 4 of 4 finalbs22n2s

The ever evoilving world of science /7th class science curiosity /samyans aca...Sandeep Swamy

LDMMIA Reiki Master Spring 2025 Mini UpdatesLDM Mia eStudios

SPRING FESTIVITIES - UK AND USA -Colégio Santa Teresinha

Geography Sem II Unit 1C Correlation of Geography with other school subjectsProfDrShaikhImran

Phoenix – A Collaborative Renewal of Children’s and Young People’s Services C...Library Association of Ireland

Operations Management (Dr. Abdulfatah Salem).pdfArab Academy for Science, Technology and Maritime Transport

Sinhala_Male_Names.pdf Sinhala_Male_Namekeshanf79

YSPH VMOC Special Report - Measles Outbreak Southwest US 4-30-2025.pptxYale School of Public Health - The Virtual Medical Operations Center (VMOC)

K12 Tableau Tuesday - Algebra Equity and Access in Atlanta Public Schoolsdogden2

pulse ppt.pptx Types of pulse , characteristics of pulse , Alteration of pulsesushreesangita003

CBSE - Grade 8 - Science - Chemistry - Metals and Non Metals - WorksheetSritoma Majumder

Handling Multiple Choice Responses: Fortune Effiong.pptxAuthorAIDNationalRes

How to Set warnings for invoicing specific customers in odooCeline George

Quality Contril Analysis of Containers.pdfDr. Bindiya Chauhan

One Hot encoding a revolution in Machine learningmomer9505

Multi-currency in odoo accounting and Update exchange rates automatically in ...Celine George

Niamh Lucey, Mary Dunne. Health Sciences Libraries Group (LAI). Lighting the ...Library Association of Ireland

apa-style-referencing-visual-guide-2025.pdfIshika Ghosh

SCI BIZ TECH QUIZ (OPEN) PRELIMS XTASY 2025.pptxRonisha Das

Drupal Govcon 2018 - HAX the web

1. #haxtheweb Warner Bros

2. Tom Varughse @Tom_Var

3. Bryan Ollendyke @btopro

4. elmsln.org

6. What is ? Idea Domain

9. courses.aanda.psu.edu/dmd100

10. courses.aanda.psu.edu/dmd100

11. studio.aanda.psu.edu/dmd100

12. studio.aanda.psu.edu/dmd100

13. studio.aanda.psu.edu/dmd100

14. studio.aanda.psu.edu/dmd100

15. #haxtheweb Warner Bros

16. 🚨🚨 harsh realities ahead🚨🚨 Warner Bros

17. What is Authoring Experience?

18. A quick history of the Jam.. Errr… authoring methods Warner Bros

19. Contributors are users, too! Warner Bros

20. and you love your contributors… Warner Bros

21. and you love your contributors… don’t you?! Warner Bros

30. Some Section header Second Line

32. Some Section header Second Line

33. ”With enough training we’ll gain slightly less anarchy for our clients” - Marketing Manager Boss Person

34. ”With enough training we’ll gain slightly less anarchy for our clients” - Marketing Manager Boss Person

35. ”With enough training we’ll gain slightly less anarchy for our clients” - Marketing Manager Boss Person

36. ”With enough training we’ll gain slightly less anarchy for our clients” - Marketing Manager Boss Person

37. We’re all toying with improving AX, but...

38. we-are-not-that-unique

39. And…

40. Walt Disney Pictures “THE SKY IS FALLING!!!” Huh? C Level Manager Boss Person

48. Why does Drupal care about my Design. I don’t know Drupal and I’m not able to contribute as a result of that. Michael Collins, Feb 2017 “ “

49. The CMS must learn your Design. Your Design will never learn your CMS. btopro, right now “ “

50. Gutenberg has me trapped forever using React and Gutenberg. WHY DIDN’T WE ADOPT WEB COMPONENTS!? Dystopian future “ “

51. So what do we do? ?

52. WE ADOPT DRUPAL 6! ?

53. not this joke again… It’s not April any more !

55. Some Section header Second Line

56. We don’t need a framework! the web is the platform!!!

57. Wait, what is “the platform”?!

58. The web is the platform! Stable October 23rd !!

59. webcomponents.org

60. Why web components?

61. Design / component Uniformity

62. <div style=“color:blue;”> <a href=“link.com”>Name</a> </div>

63. <my-button link=“link.com”> Name </my-button>

64. Sustainability

65. Sustaina-whaaaaa?

68. Accessibility

69. Some Section header Second Line

70. So what about DX?

71. Tom, do you know CSS, HTML, and basic JS?

72. THEN YOU KNOW WEB COMPONENTS!

79. Some Section header Second Line

80. So what is HAX?

81. <link rel=“import” href=“../hax-body/hax-body.html” /> A way of teaching the front-end how to run a web component

82. <hax-body> <p>HTML</p> <video-player src=“video.mp4”></video-player> </hax-body>

83. Our backend to leverage this needs… 1. Content placed between tags 2. Endpoint to load manifest directions 3. Endpoint to save changes 4. Endpoint to save media (optional)

84. Some Section header Second Line

85. Let’s do this… for real! Warner Bros

86. hax the web . org Warner Bros

87. #haxtheweb haxtheweb.org

Editor's Notes

#20: Ignore them at your own peril.
#21: Ignore them at your own peril.
#22: Ignore them at your own peril.
#23: In Wpr
#31: Paragraphs, Bricks and Layout
#33: Paragraphs, Bricks and Layout
#34: Paragraphs, Bricks and Layout
#35: Paragraphs, Bricks and Layout
#36: Paragraphs, Bricks and Layout
#37: Paragraphs, Bricks and Layout
#38: But we’re still just using using toys in the Drupal toybox for Drupal and the Wordpress toybox for wordpress.
#40: But we’re still just using using toys in the Drupal toybox for Drupal and the Wordpress toybox for wordpress.
#62: Atomic / Uniform / Pattern Library
#65: Polymer/Skate/Xtag/Vanilla JS and used in Drupal, WP, Vue, Angular & React
#66: Polymer/Skate/Xtag/Vanilla JS and used in Drupal, WP, Vue, Angular & React
#69: Semantic HTML
#80: In 1 year, 6 months of just Bryan and Potter.

Drupal Govcon 2018 - HAX the web

Recommended

More Related Content

What's hot (20)

Similar to Drupal Govcon 2018 - HAX the web (20)

More from btopro (20)

Recently uploaded (20)

Drupal Govcon 2018 - HAX the web

Editor's Notes