Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Open Web Technologies and You - Durham College Student Integration Presentation


Consultez-les par la suite

1 sur 37 Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à Open Web Technologies and You - Durham College Student Integration Presentation (20)


Plus récents (20)

Open Web Technologies and You - Durham College Student Integration Presentation

  1. 1. Open Web Technologies and You
  2. 2. A guide through a technology jungle Darryl Lehmann Director of Technical Services darryl_lehmann@imagineeringart.com
  3. 3. Nice to meet you! Q) A survey of the room, how many people here would consider themselves: Coders? Designers? Editorial/Content specialists? Project managers? Have no idea? Here because you thought I was handing out something?
  4. 4. Path to Programming Q) Who here knows what a BBS is/was? I’ve always been a geek, and yes I remember my BBS foundly. I remember a time when I could now code with 256, yep 256 colors! Who could want more than that. Anyway, I graduated in 2003 from the Computer Programming stream here at Durham. I did what we all have to, paid some bills via Tech support jobs and Contract Programming and made video games in my spare time to keep fresh. After that, I got a job programming power wheelchairs in the medical industry, not exactly my direction, but it was a start. Later, I became a programmer for a publishing company, Computer Composition of Canada, and this is where I found my direction. Landed a Lead developer job at Imagineering, moving to the Director role there after.
  5. 5. Print to Digital and Beyond... My path taught me a lot and helped guide me to the exciting career I enjoy today. Data conversion, XML transformations, media for print, rapid digital deployments, mobile apps, digital publishing and ultimately towards pioneering new interactivity for a digital learning age.
  6. 6. Programming for Publishing
  7. 7. Bumps allong the way Getting into the business is a real challenge for a number of reasons 1) entry level positions are being offshored more often 2) experience requirements 3) contract work can be competitive and risky Beat the offshore (1) push with excellent communication skills and understanding of client requirements. Offshore can never compete with a solid workflow understanding. As my granddad says “Buy the best, and cry once!” Don’t be afraid to ask questions, provide meaningful feedback, your client will appreciate your professionalism. * Beat experience requirements (2) with proven, traceable skills. Contribute to opensource, get on github/stackoverflow, contribute to reputable online communities (Behance), help others, build portfolio sites, expand your network of colleagues through seminar or user groups. Approach contract work (3) with a business savvy, make sure you get it in writing, make sure its legit, make sure to express your expectations ($$) along with reiterating their expected results. Document Everything.
  8. 8. What I’ve learned Q) How long will your skills be current? What I’ve learned working as a programmer is a solid foundation will eclipse any tool. Every year a whole series of tools come out, programming paradigms will shift, business drive will change. Trust me, after all, I used to be a Flash developer :) Be flexible, be patient, practice constant learning, meet new challenges with determination. Tools are important, but select them with longevity in mind. Where will this be in 2, 5, 10 years? Your clients depend on your due diligence. You will be asked to perform miracles. Likely, by people that don’t know what they're asking for. Your job is to meet this with humble teaching, clearly describing results, and offering the best solution for the cause. Sometimes you have to manage from below!
  9. 9. Working with Clients Whether it’s onsite or off, clients expect professionalism. In smaller shops, your role may be a mystery to management. In large shops, you may be expected to report your status at regular intervals to drive the timelines forward. Sometimes you’re part of a tight team, sometimes you're a sole developer amongst analysts. In all these cases, tracking your work, reporting your status, and clear/clean documentation are a MUST. Accountability - If you take on an assignment be certain you understand it. I would rather hear a pile of questions, then receive something that didn’t match the specs. Again, this separates us from offshore! Integrity - We are often self driven and self motivated, some of you will work from home, and telecommute. Find a groove that works for you. Be honest with your time, and avoid distractions. Transparency - Document everything, keep weekly logs even if not specifically asked, it’s great to tell the boss on Tuesday of the 2nd week in January you flushed the DNS cache as requested.
  10. 10. Opensource, not Freesource Be mindful, Opensource does not mean free. It’s happening more and more, open source licensing (looking at you GPL) can be more restrictive to development work than proprietary solutions. Unless your not-for-profit and have no ties to industry, read license agreements carefully. jQuery - http://en.wikipedia.org/wiki/MIT_License - a free permissive license. Adobe Edge - http://animate.adobe.com/runtime/3.0.0/License.txt - free Binary distributable, not free source distribution. Chemdoodle - http://www.gnu.org/licenses/gpl-3.0.html - You cannot incorporate GPL-covered software in a proprietary system.
  11. 11. Mobile Pioneers Q) How important is mobile ubiquity today? Cross-platform development is the key. Gravitate towards strong techniques, libraries and tools that support a “build once, deploy to many” approach. Get in on the front-lines, look at the specs, find the lowest common denominator and test, test, test. Just because some library says it work on XYZ device doesn’t mean it will. Ah hem, Canvas Matrix transform. Also, when building responsive designs, don’t rely on media-queries, they should be considered a last resort. Build with abstract units EM’s, percentages, and collapsible box models first. Q) Need to know if you can leverage an HTML5 feature? http://caniuse.com/ http://html5please.com/ http://html5test.com/
  12. 12. Web Accessibility A picture is worth a thousand words. Except today, each picture needs to contain just as much information.
  13. 13. Web Accessibility 17% of Ontarians, and 18% of Americans have some kind of disability. Whether it be visual, auditory, neurological, physical, or learning related, we all need to do our part to make the universal knowledge of the internet accessible for all. In Ontario a bill called the Ontario Disabilities Act (ODA) was ratified in 2005 aiming at removing barriers to those with disabilities. In the United States a Federal mandate was passed called Americans with Disabilities Act (ADA). The States went a step further to outline the Web Accessibility Initiative (WIA) and two sets of child guidelines for Web Content and Interactive Content named WCAG 2.0 and WIA-ARIA 1.0 respectively. Whether you're working in Canada or for State side clients, accessibility will become a paramount driver for a lot of key industries: Education, Industry, Training, Media, Web, Books to name just a few.
  14. 14. Web Based Content Accessibility Guidelines WCAG 2.0 Web Accessibility Initiative (Web Content Accessibility Guidelines) Interactive Content Accessibility Guidelines WAI-ARIA 1.0 (Accessible Rich Internet Applications) (WAI) The way we “drive this home” while being unobtrusive to the web standards is to go along for the ride… with Metadata
  15. 15. What is Metadata? In simplest of terms, its data that rides along with your content, giving it far more potential than ever before.
  16. 16. WIA-ARIA example <button role="button" aria-pressed="false" onclick="handleBtnClick(event)" onKeyUp="handleBtnKeyUp(event)">Submit</button> • Avoid using images of text. • Use proper semantics - input type=”submit” or button elements. • Use ARIA button attributes including the role of button and the states: aria-pressed and aria-disabled. • Ensure that the button can be selected using the Space or Enter keys. • Make sure text has 4.5:1 color contrast ratio between foreground/background colors for all states except the disabled state. • Ensure that there is a visible focus indicator on the button control when it receives keyboard focus. Microdata example <dl itemtype="http://schema.org/Book" itemscope=""> <dt>Title:</dt> <dd itemprop="name">Algebra II, trigonometry</dd> <dt>Author:</dt> <dd> <span itemprop="author" itemtype="http://schema.org/Person" itemscope=""> <span itemprop="name">Sherman K. Stein</span> </span> </dd> <dt>ISBN:</dt> <dd itemprop="isbn">1-55636-757-0</dd> <dt>Publisher:</dt> <dd itemprop="publisher" itemtype="http://schema.org/Organization" itemscope=""> <span itemprop="name">Sunburst Communications</span> </dd> </dl>
  17. 17. Media Creation Images Contrast levels - aim for 4.5:1 Alt tags - Describe only what you see, describe it objectively, don’t editorialize, go from the general to the specific. Be succinct. Video/Audio transcripts (SRT) 1 00:02:17,440 --> 00:02:20,375 Senator, we're making our final approach into Coruscant. 2 00:02:20,476 --> 00:02:22,501 Very good, Lieutenant.
  18. 18. Open Web Development We’ve already touched on much of the key items regarding Tooling vs. Fundamentals and how adaptable we must be to flourish in these modern times. Here’s a few other considerations. 1) Choose techniques and technologies with longevity in mind, consult your peers, and looking at adoption rates. Future proof yourself! 2) Where time is available, build smart. Here I’m referring to workflow and repeatable processes. If you can build a pipeline into a web component, you will be able to drive content in much faster (I love JSON for this kinda stuff). And as my granddad used to say, “Teach someone to fish, and…”
  19. 19. Open Web Development Q) If you were stranded on a desert island... ...with only 3 tools for web development, what would they be? For me the list is this… 1) Notepad++ (I’m not kidding folks), it’s plugins, it’s syntax highlighting, it’s character encoding and transcoding features are unmatched. (Note: Sublime Text would be my next option for Mac development, it has great navigation over Notepad++, but forget transcoding) 2) Adobe Edge Inspect - Odd, even I was surprised by this one! This tool lets me sync all 6 of my tablet/phones and my browser to test in real-time on physical devices, a tremendous time saver. 3) Visual SVN Server - Running your own source check-in/check-out system has saved me time and time again. Github is also great for this, but unless you pay your source is wide open to the public :/
  20. 20. Open Web Development (Use-Case Specific) Static Web Tools / Libraries / Sites Notepad++ SublimeText Adobe Edge Animate Adobe Edge Inspect Firefox Inspector Chrome/Firefox/Safari/IE WAMP/LAMP Physical devices where possible (iOS Safari, Android Chrome) jQuery (but only when necessary) HTML5 Validate (http://validator.w3.org/) JSLint (http://www.jslint.com/) YUI Compressor (http://refresh-sf.com/yui/) Google Closure Compiler (https://developers.google.com/closure/) StackOverFlow (http://stackoverflow.com/), find me by name: Darryl_Lehmann JSFiddle (http://jsfiddle.net/) or Codepen
  21. 21. Open Web Development (Use-Case Specific) Media Tools (Images) Adobe Photoshop (3D support is solid) Adobe Illustrator (watch for interactive SVG coming soon) Gimp (for brush painting) TinyPNG (https://tinypng.com/ - compress all your online assets) Media Tools (Audio/Video) Adobe Auditions Audacity Adobe Media Encoder ffmpeg2theora (for MP4/MP3 to OGV/OGG conversions) Online http://video.online-convert.com/convert-to-ogg (fallback) 3D Tools WebGL spec Three.js library Blender Maya Meshlab GLC Player
  22. 22. Open Web Development (Use-Case Specific) Mobile Dev tools Eclipse Xcode Phonegap FlashDevelop (yep Flash compiles to iOS) Unity3D Away3D Adobe Air Adobe DPS (Books specific) Misc tools Exchanger XML Editor Oxygen Developer XML Adobe Indesign Calibre Word Excel Google Docs like theres no tomorrow Dropbox / Box.net FileZilla, VMWare, WinSCP
  23. 23. Web Trends Now this is a loaded question, I could go on for days on this topic. Perhaps its best to first describe what I do for context, and then where it is going. Then I’ll wrap this section up with some general points and let you take from it what you will.
  24. 24. I am a Developmental Programmer, so, I specifically work on bleeding edge technology, assess its viability, and build implementation. I work in the Publishing space, which today is overwhelmingly an Open Web Industry. So along with a project goal, I constantly think… ● how will digital books evolve, ● how does a student learn, ● how do we increase engagement in a time of modern media.
  25. 25. Digital Publishing has seen a rapid expansion into the digital medium. My work has a focus on cutting edge technologies like virtualizations / simulations / interactive learning. Luckily, Interactive has been reclaimed in an HTML5 landscape.
  26. 26. Stunning Artwork is what my company specializes in. My job is to take this beyond. This takes me all over the map from ePub3 spec development, to scientifically accurate models of our solar system, chemical interactions, to 3D learning objects that can live in a digital book. One day, I’m creating book apps for Android, the next Graphics programming a 3D engine on the web.
  27. 27. In Boston this past October I presented at the EDUPUB conference my take on digital learning. Let’s see just how far an interactive learning object can go.
  28. 28. Demo 1 Interactive 3D Heart
  29. 29. Demo 2 Interactive 3D Lever Systems
  30. 30. Why 3D? 1. We feel it is the future of learning. 2. Bringing us back to “learning by doing” and opening up a world of content possibilities. 3. Allowing us to re-engage students immersed in a cornucopia of modern media.
  31. 31. How? WebGL which is essentially OpenGL ES 2.0, purpose built for the web. It expands upon the HTML5 Canvas object to extend a 3D context for use in rendering low-level 3D graphics. No plug-ins, supported by the browsers, feature rich!
  32. 32. Demo 3 Interactive Image Sequence Butterfly in Adobe Edge Animate
  33. 33. Demo 4 Responsive design
  34. 34. Demo 5 - Inkling Habitat Figure 6.2 — General Features of Bone Figure 12.10 — Anatomy of the Heart
  35. 35. Open Web to all corners of Industry Modern web technology extends much deeper into a multitude of industries outside the traditional web sense and it's only going to continue. At Imagineering we delve into web and book creation, but even this has very expansive possibilities. Consider emerging technologies like 3D printing and scanning for example. We’ve been working with Museums like the Smithsonian and the ROM here in Canada to digitize their immense libraries of artifacts, to carry them into a new learning paradigm. Were a student might print a challenging object to better understand its facets, or make traditional 2D visuals into tactile real world experience. Today we developers have a unique opportunity to combined multiple passions into one. With much of industry looking to digitize some aspect of their business, we need only look to our favorite past times to find opportunity.
  36. 36. Recap ● Open Web technologies go far beyond web sites. ● Listen to your clients, document everything, be professional. ● Get out there — specs, user groups, code sites, community. ● Don't get too hung up on a tooling. ● Choose software wisely, read the license. ● Read specs, look at adoption rates, be precise. ● Think access for all, it in itself is a new industry. ● Document everything. ● Have fun!
  37. 37. Thank-you for your time today. Let’s get into some questions?

Notes de l'éditeur

  • 1. Could you discuss the path that you took to get to where you are, what the key challenges were and what you learned in the process?
  • 2. What are the key things to remember when working with clients on their site?
  • 3. In depth look at mobile sites and how you have faced this new challenge
    ubiquity - art of being everywhere at once
  • 4. Web accessibility
  • http://www.dlib.indiana.edu/~jenlrile/metadatamap/
  • 5. Web site development (what do you use to build sites..)
  • 6. Web trends as discussed.
  • Go through samples