This document discusses accidental web designers (AWDs) and their needs. It defines an AWD as someone who unintentionally ended up in web design. It then asks what the four stages of competence are and how an AWD's mental model impacts their needs. The document suggests that the #1 resource AWDs need more than any other is guidance on how hard web design really is.
Writing JavaScript as a hobby and writing JavaScript as a job are two very different things. Learn some common practices for making your JavaScript friendly to a team environment.
Writing JavaScript as a hobby and writing JavaScript as a job are two very different things. Learn some common practices for making your JavaScript friendly to a team environment.
Flink Forward Berlin 2018: Jared Stehler - "Streaming ETL with Flink and Elas...Flink Forward
At Intellify we have implemented a system where we can create Flink apps for streaming ETL into normalized datasets in Elasticsearch, with schemas specified in Avro. Our data comes in via a single Kafka topic, but in different shapes depending on the originating source. To that end, we've developed a framework for implementing ETL apps in Flink. This framework supports nested and out-of-order streaming joins using a custom processing function, as well as a seeding source which can source input from our "data lake" in S3 and seamlessly transition to the live Kafka topic. Finally, the framework treats stream output as immutable using conceptual namespaces and aliasing in Elasticsearch, allowing us to iteratively develop new ETL features without disrupting existing users of the data set. This talk would give an overview of the streaming join algorithm and the custom seeding source function, as well as show our web UI for managing the streaming apps and data set.
TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!Guilherme Carreiro
O JavaScript não escapa da polêmica sobre qualidade de código. Descubra nessa palestra como identificar bad smells que ameaçam a integridade do front-end e aprenda a melhorar seu código usando design patterns e orientação a objetos avançada em JavaScript. Veja através de exemplos práticos as evoluções da API da linguagem com o ECMAScript 6 e como é possível começar a adotar práticas do futuro.
JQuery is awesome, but with all major browsers following the ES and HTML5 specs, the library has become more of a convenience than a necessity for browser compatibility. While the library is useful and ubiquitous, it does distract us from learning the language that it's built on. This talk will outline functionalities that pure javascript provides, and also provide steps we can take to begin writing vanilla javascript applications and start appreciating the power and uniqueness of javascript.
Client-side transformations allow you to remix a webpage after it has been delivered using JavaScript. Learn how to relayout a page and manage the loading of external resources all from the comfort of the client!
Building Evented Single Page ApplicationsSteve Smith
Building single page applications has always seemed like a dark art. Guess what? It's not. The key is really simple—let the URL dictate everything. I'll show how to use the window location's hash in combination with jQuery's event system to drive your entire application, from link clicks to form submissions to history management and beyond.
Building evented single page applicationsSteve Smith
Building single page applications has always seemed like a dark art. Guess what? It's not. The key is really simple—let the URL dictate everything. I'll show how to use the window location's hash in combination with jQuery's event system to drive your entire application, from link clicks to form submissions to history management and beyond.
Adding a modern twist to legacy web applicationsJeff Durta
Avoid misery of working with legacy code
We will see how you can add independent and isolated components to existing pages; pages that may be difficult to change
React and Flux allow you to make self-contained additions that handle their own data access/persistence
Versão com GIFs:
https://docs.google.com/presentation/d/17M-jHlkAP5KPfQ4_Alck_wIsN2gK3dZNGfJR9Bi1L50/present
Códigos para instalação das dependências:
https://github.com/fdaciuk/talks/tree/master/2015/wordcamp-sao-paulo
Flink Forward Berlin 2018: Jared Stehler - "Streaming ETL with Flink and Elas...Flink Forward
At Intellify we have implemented a system where we can create Flink apps for streaming ETL into normalized datasets in Elasticsearch, with schemas specified in Avro. Our data comes in via a single Kafka topic, but in different shapes depending on the originating source. To that end, we've developed a framework for implementing ETL apps in Flink. This framework supports nested and out-of-order streaming joins using a custom processing function, as well as a seeding source which can source input from our "data lake" in S3 and seamlessly transition to the live Kafka topic. Finally, the framework treats stream output as immutable using conceptual namespaces and aliasing in Elasticsearch, allowing us to iteratively develop new ETL features without disrupting existing users of the data set. This talk would give an overview of the streaming join algorithm and the custom seeding source function, as well as show our web UI for managing the streaming apps and data set.
TDC 2014 - JavaScript de qualidade: hoje, amanhã e sempre!Guilherme Carreiro
O JavaScript não escapa da polêmica sobre qualidade de código. Descubra nessa palestra como identificar bad smells que ameaçam a integridade do front-end e aprenda a melhorar seu código usando design patterns e orientação a objetos avançada em JavaScript. Veja através de exemplos práticos as evoluções da API da linguagem com o ECMAScript 6 e como é possível começar a adotar práticas do futuro.
JQuery is awesome, but with all major browsers following the ES and HTML5 specs, the library has become more of a convenience than a necessity for browser compatibility. While the library is useful and ubiquitous, it does distract us from learning the language that it's built on. This talk will outline functionalities that pure javascript provides, and also provide steps we can take to begin writing vanilla javascript applications and start appreciating the power and uniqueness of javascript.
Client-side transformations allow you to remix a webpage after it has been delivered using JavaScript. Learn how to relayout a page and manage the loading of external resources all from the comfort of the client!
Building Evented Single Page ApplicationsSteve Smith
Building single page applications has always seemed like a dark art. Guess what? It's not. The key is really simple—let the URL dictate everything. I'll show how to use the window location's hash in combination with jQuery's event system to drive your entire application, from link clicks to form submissions to history management and beyond.
Building evented single page applicationsSteve Smith
Building single page applications has always seemed like a dark art. Guess what? It's not. The key is really simple—let the URL dictate everything. I'll show how to use the window location's hash in combination with jQuery's event system to drive your entire application, from link clicks to form submissions to history management and beyond.
Adding a modern twist to legacy web applicationsJeff Durta
Avoid misery of working with legacy code
We will see how you can add independent and isolated components to existing pages; pages that may be difficult to change
React and Flux allow you to make self-contained additions that handle their own data access/persistence
Versão com GIFs:
https://docs.google.com/presentation/d/17M-jHlkAP5KPfQ4_Alck_wIsN2gK3dZNGfJR9Bi1L50/present
Códigos para instalação das dependências:
https://github.com/fdaciuk/talks/tree/master/2015/wordcamp-sao-paulo
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
Generating a custom Ruby SDK for your web service or Rails API using Smithyg2nightmarescribd
Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.
The accidental web designer - No Code Conf 2019 Workshop
1. J E N K R A M E R
H A R VA R D U N I V E R S I T Y E X T E N S I O N S C H O O L
@ J E N 4 W E B
2. @ J E N 4 W E B
Who is an Accidental Web Designer (AWD)?
What are the Four Stages of Competence, and what is
a mental model?
How does that impact resources for AWD’s?
What is the #1 resource AWD’s need more than any
other?
3. @ J E N 4 W E B
Accidental Web Designer:
Someone who never intended to be in this business
but is now part of it.
4. @ J E N 4 W E BC H E F, B Y M I C H E L A S I M O N C I N IP E R S O N A L F I N A N C E , B Y A L A N C L E AV E R
5. @ J E N 4 W E B
How hard could it be to make a website?
6. @ J E N 4 W E B
<script src=“js/hotstuff.min.js”></script>
<script>
alert('Hello, World!’);
</script>
7. @ J E N 4 W E B
A S I M P L E E X A M P L E
const Util = {
TRANSITION_END: 'bsTransitionEnd',
getUID(prefix) {
do {
// eslint-disable-next-line no-bitwise
prefix += ~~(Math.random() * MAX_UID) // "~~" acts like a faster Math.floor() here
} while (document.getElementById(prefix))
return prefix
},
getSelectorFromElement(element) {
let selector = element.getAttribute('data-target')
if (!selector) {
selector = element.getAttribute('href') || ''
selector = /^#[a-z]/i.test(selector) ? selector : null
}
return selector
},
reflow(element) {
return element.offsetHeight
},
triggerTransitionEnd(element) {
$(element).trigger(transition.end)
},
supportsTransitionEnd() {
return Boolean(transition)
},
typeCheckConfig(componentName, config, configTypes) {
for (const property in configTypes) {
if (configTypes.hasOwnProperty(property)) {
const expectedTypes = configTypes[property]
const value = config[property]
const valueType = value && isElement(value) ?
'element' : toType(value)
if (!new RegExp(expectedTypes).test(valueType)) {
throw new Error(
`${componentName.toUpperCase()}: ` +
`Option "${property}" provided type "${valueType}" ` +
`but expected type "${expectedTypes}".`)
}
}
}
8. @ J E N 4 W E B
if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.");+function(t){var e=t.fn.jquery.split(" ")[0].split(".");if(e[0]<2&&e[1]<9||
1==e[0]&&9==e[1]&&e[2]<1||e[0]>=4)throw new Error("Bootstrap's JavaScript requires at least jQuery v1.9.1 but less than v4.0.0")}(jQuery),function(){function t(t,e){if(!t)throw new ReferenceError("this hasn't been
initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function e(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a
function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function n(t,e)
{if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof
Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},o=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),
Object.defineProperty(t,i.key,i)}} return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),r=function(t){function e(t){return{}.toString.call(t).match(/s([a-zA-Z]+)/)[1].toLowerCase()}function n(t)
{return(t[0]||t).nodeType}function i(){return{bindType:a.end,delegateType:a.end,handle:function(e){if(t(e.target).is(this))return e.handleObj.handler.apply(this,arguments)}}}function o(){if(window.QUnit)return!1;var
t=document.createElement("bootstrap");for(var e in l)if(void 0!==t.style[e])return{end:l[e]};return!1}function r(e){var n=this,i=!1;return t(this).one(h.TRANSITION_END,function(){i=!0}),setTimeout(function(){i||
h.triggerTransitionEnd(n)},e),this}function s(){a=o(),t.fn.emulateTransitionEnd=r,h.supportsTransitionEnd()&&(t.event.special[h.TRANSITION_END]=i())}var a=!
1,l={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"},h={TRANSITION_END:"bsTransitionEnd",getUID:function(t){do
t+=~~(1e6*Math.random());while(document.getElementById(t));return t},getSelectorFromElement:function(t){var e=t.getAttribute("data-target");return e||(e=t.getAttribute("href")||"",e=/^#[a-z]/i.test(e)?
e:null),e},reflow:function(t){return t.offsetHeight},triggerTransitionEnd:function(e){t(e).trigger(a.end)},supportsTransitionEnd:function(){return Boolean(a)},typeCheckConfig:function(t,i,o){for(var r in
o)if(o.hasOwnProperty(r)){var s=o[r],a=i[r],l=a&&n(a)?"element":e(a);if(!new RegExp(s).test(l))throw new Error(t.toUpperCase()+': Option "'+r+'" provided type "'+l+'" but expected type "'+s+'".')}}};return s(),h}
(jQuery),s=(function(t){var e="alert",i=t.fn[e],s={DISMISS:'[data-dismiss="alert"]'},a={CLOSE:"close.bs.alert",CLOSED:"closed.bs.alert",CLICK_DATA_API:"click.bs.alert.data-
api"},l={ALERT:"alert",FADE:"fade",SHOW:"show"},h=function(){function e(t){n(this,e),this._element=t}return e.prototype.close=function(t){t=t||this._element;var
e=this._getRootElement(t);this._triggerCloseEvent(e).isDefaultPrevented()||this._removeElement(e)},e.prototype.dispose=function()
{t.removeData(this._element,"bs.alert"),this._element=null},e.prototype._getRootElement=function(e){var n=r.getSelectorFromElement(e),i=!1;return n&&(i=t(n)[0]),i||(i=t(e).closest("."+l.ALERT)
[0]),i},e.prototype._triggerCloseEvent=function(e){var n=t.Event(a.CLOSE);return t(e).trigger(n),n},e.prototype._removeElement=function(e){var n=this;if(t(e).removeClass(l.SHOW),!r.supportsTransitionEnd()||!
t(e).hasClass(l.FADE))return void this._destroyElement(e);t(e).one(r.TRANSITION_END,function(t){return n._destroyElement(e,t)}).emulateTransitionEnd(150)},e.prototype._destroyElement=function(e)
{t(e).detach().trigger(a.CLOSED).remove()},e._jQueryInterface=function(n){return this.each(function(){var i=t(this),o=i.data("bs.alert");o||(o=new e(this),i.data("bs.alert",o)),"close"===n&&o[n]
(this)})},e._handleDismiss=function(t){return function(e){e&&e.preventDefault(),t.close(this)}},o(e,null,[{key:"VERSION",get:function(){return"4.0.0-alpha.6"}}]),e}();return
t(document).on(a.CLICK_DATA_API,s.DISMISS,h._handleDismiss(new h)),t.fn[e]=h._jQueryInterface,t.fn[e].Constructor=h,t.fn[e].noConflict=function(){return t.fn[e]=i,h._jQueryInterface},h}(jQuery),function(t){var
e="button",i=t.fn[e],r={ACTIVE:"active",BUTTON:"btn",FOCUS:"focus"},s={DATA_TOGGLE_CARROT:'[data-toggle^="button"]',DATA_TOGGLE:'[data-
toggle="buttons"]',INPUT:"input",ACTIVE:".active",BUTTON:".btn"},a={CLICK_DATA_API:"click.bs.button.data-api",FOCUS_BLUR_DATA_API:"focus.bs.button.data-api blur.bs.button.data-api"},l=function(){function e(t)
{n(this,e),this._element=t}return e.prototype.toggle=function(){var e=!0,n=t(this._element).closest(s.DATA_TOGGLE)[0];if(n){var i=t(this._element).find(s.INPUT)[0];if(i)
{if("radio"===i.type)if(i.checked&&t(this._element).hasClass(r.ACTIVE))e=!1;else{var o=t(n).find(s.ACTIVE)[0];o&&t(o).removeClass(r.ACTIVE)}e&&(i.checked=!
t(this._element).hasClass(r.ACTIVE),t(i).trigger("change")),i.focus()}}this._element.setAttribute("aria-pressed",!
t(this._element).hasClass(r.ACTIVE)),e&&t(this._element).toggleClass(r.ACTIVE)},e.prototype.dispose=function(){t.removeData(this._element,"bs.button"),this._element=null},e._jQueryInterface=function(n){return
this.each(function(){var i=t(this).data("bs.button");i||(i=new e(this),t(this).data("bs.button",i)),"toggle"===n&&i[n]()})},o(e,null,[{key:"VERSION",get:function(){return"4.0.0-alpha.6"}}]),e}();return
t(document).on(a.CLICK_DATA_API,s.DATA_TOGGLE_CARROT,function(e){e.preventDefault();var n=e.target;t(n).hasClass(r.BUTTON)||
(n=t(n).closest(s.BUTTON)),l._jQueryInterface.call(t(n),"toggle")}).on(a.FOCUS_BLUR_DATA_API,s.DATA_TOGGLE_CARROT,function(e){t(t(e.target).closest(s.BUTTON)[0]).toggleClass(r.FOCUS,/^focus(in)?
$/.test(e.type))}),t.fn[e]=l._jQueryInterface,t.fn[e].Constructor=l,t.fn[e].noConflict=function(){return t.fn[e]=i,l._jQueryInterface},l}(jQuery),function(t){var
e="carousel",s="bs.carousel",a="."+s,l=t.fn[e],h={interval:5e3,keyboard:!0,slide:!1,pause:"hover",wrap:!0},c={interval:"(number|boolean)",keyboard:"boolean",slide:"(boolean|string)",pause:"(string|
boolean)",wrap:"boolean"},u={NEXT:"next",PREV:"prev",LEFT:"left",RIGHT:"right"},d={SLIDE:"slide"+a,SLID:"slid"+a,KEYDOWN:"keydown"+a,MOUSEENTER:"mouseenter"+a,MOUSELEAVE:"mouseleave"+a,LOAD_DATA_API:"load.bs.carousel.da
ta-api",CLICK_DATA_API:"click.bs.carousel.data-api"},f={CAROUSEL:"carousel",ACTIVE:"active",SLIDE:"slide",RIGHT:"carousel-item-right",LEFT:"carousel-item-left",NEXT:"carousel-item-next",PREV:"carousel-item-
prev",ITEM:"carousel-item"},_={ACTIVE:".active",ACTIVE_ITEM:".active.carousel-item",ITEM:".carousel-item",NEXT_PREV:".carousel-item-next, .carousel-item-prev",INDICATORS:".carousel-indicators",DATA_SLIDE:"[data-slide],
[data-slide-to]",DATA_RIDE:'[data-ride="carousel"]'},g=function(){function l(e,i){n(this,l),this._items=null,this._interval=null,this._activeElement=null,this._isPaused=!1,this._isSliding=!
1,this._config=this._getConfig(i),this._element=t(e)[0],this._indicatorsElement=t(this._element).find(_.INDICATORS)[0],this._addEventListeners()}return l.prototype.next=function(){if(this._isSliding)throw new
Error("Carousel is sliding");this._slide(u.NEXT)},l.prototype.nextWhenVisible=function(){document.hidden||this.next()},l.prototype.prev=function(){if(this._isSliding)throw new Error("Carousel is
sliding");this._slide(u.PREV)},l.prototype.pause=function(e){e||(this._isPaused=!0),t(this._element).find(_.NEXT_PREV)[0]&&r.supportsTransitionEnd()&&(r.triggerTransitionEnd(this._element),this.cycle(!
0)),clearInterval(this._interval),this._interval=null},l.prototype.cycle=function(t){t||(this._isPaused=!1),this._interval&&(clearInterval(this._interval),this._interval=null),this._config.interval&&!
this._isPaused&&(this._interval=setInterval((document.visibilityState?this.nextWhenVisible:this.next).bind(this),this._config.interval))},l.prototype.to=function(e){var
n=this;this._activeElement=t(this._element).find(_.ACTIVE_ITEM)[0];var i=this._getItemIndex(this._activeElement);if(!(e>this._items.length-1||e<0)){if(this._isSliding)return void t(this._element).one(d.SLID,function()
{return n.to(e)});if(i===e)return this.pause(),void this.cycle();var o=e>i?u.NEXT:u.PREV;this._slide(o,this._items[e])}},l.prototype.dispose=function()
{t(this._element).off(a),t.removeData(this._element,s),this._items=null,this._config=null,this._element=null,this._interval=null,this._isPaused=null,this._isSliding=null,this._activeElement=null,this._indicatorsElement=
null},l.prototype._getConfig=function(n){return n=t.extend({},h,n),r.typeCheckConfig(e,n,c),n},l.prototype._addEventListeners=function(){var e=this;this._config.keyboard&&t(this._element).on(d.KEYDOWN,function(t){return
e._keydown(t)}),"hover"!==this._config.pause||"ontouchstart"in document.documentElement||t(this._element).on(d.MOUSEENTER,function(t){return e.pause(t)}).on(d.MOUSELEAVE,function(t){return
e.cycle(t)})},l.prototype._keydown=function(t){if(!/input|textarea/i.test(t.target.tagName))switch(t.which){case 37:t.preventDefault(),this.prev();break;case
39:t.preventDefault(),this.next();break;default:return}},l.prototype._getItemIndex=function(e){return
this._items=t.makeArray(t(e).parent().find(_.ITEM)),this._items.indexOf(e)},l.prototype._getItemByDirection=function(t,e){var n=t===u.NEXT,i=t===u.PREV,o=this._getItemIndex(e),r=this._items.length-1;if((i&&0===o||
n&&o===r)&&!this._config.wrap)return e;var s=t===u.PREV?-1:1,a=(o+s)%this._items.length;return a===-1?this._items[this._items.length-1]:this._items[a]},l.prototype._triggerSlideEvent=function(e,n){var i=t.Event(d.SLIDE,
{relatedTarget:e,direction:n});return t(this._element).trigger(i),i},l.prototype._setActiveIndicatorElement=function(e){if(this._indicatorsElement){t(this._indicatorsElement).find(_.ACTIVE).removeClass(f.ACTIVE);var
n=this._indicatorsElement.children[this._getItemIndex(e)];n&&t(n).addClass(f.ACTIVE)}},l.prototype._slide=function(e,n){var i=this,o=t(this._element).find(_.ACTIVE_ITEM)[0],s=n||
o&&this._getItemByDirection(e,o),a=Boolean(this._interval),l=void 0,h=void 0,c=void 0;if(e===u.NEXT?(l=f.LEFT,h=f.NEXT,c=u.LEFT):(l=f.RIGHT,h=f.PREV,c=u.RIGHT),s&&t(s).hasClass(f.ACTIVE))return void(this._isSliding=!
1);if(!this._triggerSlideEvent(s,c).isDefaultPrevented()&&o&&s){this._isSliding=!0,a&&this.pause(),this._setActiveIndicatorElement(s);var g=t.Event(d.SLID,
{relatedTarget:s,direction:c});r.supportsTransitionEnd()&&t(this._element).hasClass(f.SLIDE)?(t(s).addClass(h),r.reflow(s),t(o).addClass(l),t(s).addClass(l),t(o).one(r.TRANSITION_END,function(){t(s).removeClass(l+"
"+h).addClass(f.ACTIVE),t(o).removeClass(f.ACTIVE+" "+h+" "+l),i._isSliding=!1,setTimeout(function(){return t(i._element).trigger(g)},0)}).emulateTransitionEnd(600)):
(t(o).removeClass(f.ACTIVE),t(s).addClass(f.ACTIVE),this._isSliding=!1,t(this._element).trigger(g)),a&&this.cycle()}},l._jQueryInterface=function(e){return this.each(function(){var
n=t(this).data(s),o=t.extend({},h,t(this).data());"object"===(void 0===e?"undefined":i(e))&&t.extend(o,e);var r="string"==typeof e?e:o.slide;if(n||(n=new l(this,o),t(this).data(s,n)),"number"==typeof e)n.to(e);else
10. @ J E N 4 W E B
This is going to
be harder than I
thought
I have to
concentrate but
I can do this
How hard could
it be?
This is easy and
I’m good at it
Conscious
Unconscious
Incompetence Competence
11. @ J E N 4 W E B
Why did you think it was easy to make a website
the first time you tried?
12. @ J E N 4 W E B
– J A K O B N I E L S E N
A mental model is what the user believes about
the system at hand.
19. @ J E N 4 W E B
NOVEMBER 15
FLU SHOT FEST
Don't delay -- get your flu shot today!
To get started right away, just tap any placeholder text (such as
this) and start typing to replace it with your own. Want to insert a
picture from your files or add a shape, text box, or table? You got it!
On the Insert tab of the ribbon, just tap the option you need.
FREE LOLLIPOPS!
TAKES 5 MINUTES!
A SEASON OF
PROTECTION!
$20 COPAY
9 AM - 5 PM
OR UNTIL WE RUN
OUT
Or
orOr
YOUR COMPANY
6th floor, follow the signs
flu.example.com
P H O T O C R E D I T
21. @ J E N 4 W E B
Choosing a theme is a crippling moment for many
accidental web designers.
In part, this is because they should not start with a theme.
22. @ J E N 4 W E B
S T O RY T E L L I N G
• Identification of hero, villain,
and guide/helper
• Writing clear and scannable
content
• Choosing the right medium
for the message
• Creating clear calls to action
• This is the user experience
(UX) phase of site building
23. @ J E N 4 W E B
T E C H N O L O G Y
• Technology supports the
story
• Fill-in-the-blank websites
• Less jargon
• Terminology should reflect
user’s mental model
I M A G E C R E D I T
25. @ J E N 4 W E B
- M E R R I A M W E B S T E R
Framework: a basic conceptual structure
(as of ideas)
26. @ J E N 4 W E B
D AV E R A M S E Y ’ S
B A B Y S T E P S
27. @ J E N 4 W E B
T H E E L E M E N T S O F
U S E R E X P E R I E N C E
J E S S E J A M E S
G A R R E T T
1 S T E D 2 0 0 2
2 N D E D 2 0 1 0
R E A D C H A P T E R 2
28. @ J E N 4 W E B
Strategy
What do we want to get out of the site?
What do our users want?
What is the best way to serve site owner and users?
How do we measure success?
29. @ J E N 4 W E B
Scope
What features and functionality do we need?
What might we need in the future?
30. @ J E N 4 W E B
Structure
What pages will our site include?
What written content do we have, and what do we need
to generate?
What photos and/or video will we include?
31. @ J E N 4 W E B
I M A G E C R E D I T
Skeleton
Wireframe software:
Balsamiq
Moqups
Invision
Sketch
Adobe XD
32. @ J E N 4 W E B
I M A G E C R E D I T
Draw in PowerPoint
or Word
or Google Docs
33. @ J E N 4 W E BI M A G E C R E D I T
I M A G E C R E D I T
Draw on paper or whiteboard
34. @ J E N 4 W E B
Surface
Now that you have a picture in your head and
content defined…
Now pick your theme.
35. @ J E N 4 W E B
T H E E L E M E N T S O F
U S E R E X P E R I E N C E
J E S S E J A M E S
G A R R E T T
1 S T E D 2 0 0 2
2 N D E D 2 0 1 0
R E A D C H A P T E R 2
36. @ J E N 4 W E B
D O N A L D M I L L E R S T O RY B R A N D B R A N D S C R I P T
37. @ J E N 4 W E B
• Villain
• Hero
• Guide/helper
• What role does your
organization play?
38. @ J E N 4 W E B
Let’s talk about dog and cat food.
What are discerning pet owners concerned about
when buying food?
39. @ J E N 4 W E B
• Compare two sites:
• https://www.castorpolluxpet.com/
• https://kohapet.com/
• Which would you buy pet food from, based on the
home page only? And why?
40. @ J E N 4 W E B
W W W. C A S T O R P O L L U X P E T. C O M
41. @ J E N 4 W E B
W W W. C A S T O R P O L L U X P E T. C O M
45. @ J E N 4 W E B
We’re just beginning to develop effective no-code tools.
But great websites are more than code.
We need more storytelling frameworks and education.
47. Jen Kramer
Watertown, MA
Phone: 802-257-2657
jen@jenkramer.org
www.jenkramer.org
Twitter: @jen4web
Facebook: facebook.com/webdesignjen
S L I D E S AVA I L A B L E AT
W W W. S L I D E S H A R E . N E T / J E N 4 W E B