Constructing a Web Development Textbook

Keynote address at barcamp: the next web conference in Salzburg on April 21, 2017. The presentation explains why textbooks in this area still make sense and describes the difficulties in writing a textbook in this area.

Transcript

1. C O N S T R U C T I N G A T E X T B O O K
3. CALGARY
5. WHO AM I? 25% writer of textbooks 25% computer education researcher 15% web developer 15% computer science and information systems 20% political science and philosophy
6. 2007 Addison-Wesley
7. 2014 Pearson
8. 2015 Pearson, Global Edition
9. 2017 Pearson, Second Edition
10. Used at 120+ universities with about 3000 copies sold per year.
11. S O W H AT ’ S I N V O LV E D I N W R I T I N G A N D P R O D U C I N G A T E X T B O O K ?
12. A N D I S I T E V E N W O RT H I T N O WA D AY S ?
13. M Y P L A N N E D TO P I C S Who uses textbooks? Are textbooks needed? Planning Writing + Production 2nd Edition + Wild Applause
14. LET’S GET STARTED
15. Who uses Textbooks?
16. I need a textbook for my class!
17. e.g., computer science, information systems, information technology In general, dedicated web development courses are a small component of most traditional computer programs
18. IN FACT, THE LATEST ACM MODEL CURRICULUM FOR COMPUTER SCIENCE HAS REMOVED MOST WEB DEVELOPMENT TOPICS
19. Web Dev courses are thus often taught by p r ofe s s or s w h o h a v e n o p r a c t i c a l w e b d e v e x p e ri e n c e
20. THEY NEED A GUIDE
21. THAT COVERS THE BIG PICTURE AND ALSO THE MANY DETAILS OF WEB DEV
22. B U T D O S T U D E N T S N E E D A T E X T B O O K ?
24. Are there differences in the reading experience between paper and screen?
25. THERE IS STRONG EVIDENCE THAT YES reader comprehension levels are significantly lower when reading materials on the screen in comparison to reading paper materials
26. WHY are comprehension levels lower?
27. SCANNING WHILE consuming electronic text 1
28. EARLY RESEARCH into web usability quickly uncovered a very important fact about how people actually read on the web
30. THE EVIDENCE FOR THIS IS VERY STRONG It has been empirically verified via server records, eye tracking in labs, and monitoring software.
31. and 2 MULTI-TASKING DISTRACTION
32. Most current electronic reading devices contain within them substantial potential for distractibility
33. How frequently will this person switch her attention between devices?
34. ABOUT EVERY 2 TO 5 SECONDS Attention lengths of 5 seconds for laptop, and 2 seconds for TV
35. MULTI-TASKING ON ONE DEVICE? Task switch happens about every 19 seconds
36. IN AN OVERVIEW OF THE EVIDENCE researchers concluded that availability and usage of ICT in classrooms had a direct and negative impact on literacy, knowledge, grades, and creativity (even after controlling for other factors), while print usage had the opposite effect.
37. What Employers Want? a r e t h e k e y s k i l l s
38. CSS? JavaScript? PHP?
39. NO!
40. Communication Problem Solving Self Motivation Team Player
42. T H U S W E B D E V S T U D E N T S C A N B E N E F I T F R O M A T E X T B O O K
43. P l a n n i n g a W E B D E V Te x t b o o k
44. LEARN HTML5 CSS for Beginners PHP Introduction to JavaScript ASP.NET MEAN Stack Advanced CSS3 WordPress Ruby on Rails Intro to LAMP Professional JavaScript JQuery Build Tools Usability MySQL APIs React Design Patterns Server Virtualization ECommerce Front End Dev For Designers Advanced Angular Web Sockets Analytics SEO Continuous Integration Selenium Hadoop Security TypeScript Become a Git Master Facebook Integration Amazon AWS Configuring DNS SASS
45. If web development is going to be a real academic subject, it needs to be more than just a collection of recipes about how to create stuff with the latest ingredients… PRINCIPLE
46. HOW?
47. VIA TEXTBOOKS! Historically, textbooks have played a vital role in establishing and transforming curriculum for academic disciplines.
49. Phase 1a Spring 2012 Planning and constructing the prospectus and sample chapters. Phase 2a Sept-Dec 2012 Constructing templates, planning, writing first chapter Phase 1b Summer 2012 Sending to publishers, external reviewers, contract negotiations FIRST ED TIMELINE
50. Phase 3a Aug-Sept 2013 Completing the writing and making revisions based on technical reviewer feedback Phase 2b Jan-July 2013 Writing most of the chapters, sabbatical break Phase 3b Oct 2013-Jan 2014 Revisions, copy editing, proofs, production FIRST ED TIMELINE
51. Brief Descrip+on Ra+onale for a Series Brief Table of Contents Book Length Outstanding Features The Authors Compe++on Pedagogical Material Audience Detailed Table of Contents
52. Each publisher sent sample chapter and prospectus out to academic reviewers.
53. CENGAGE REVIEWERS Six reviewers. Four were super excited, one thought there was too much content, one didn’t like it. Publisher wanted us to resubmit with less content. PEARSON REVIEWERS Nine reviewers. Seven super excited, two thought too much content. Publisher said yes as is.
54. CONTRACT DETAILS Essentially the same contract as my last book with Pearson (2005-7). American Print Sales International Print Sales Non-Print Sales
55. Writing + P r o d u c t i o n
56. But what you really want is approximate closeness and a similar direction. CO-AUTHOR REALITY You may imagine you will have consistency and close similarities. CO-AUTHOR IDEAL
57. We wrote 21 chapters in seven months by splitting the chapters between the two authors. I was on sabbatical so had more time to write. My co-author was also department chair with three children under four so he had much less time available. WRITING SPEED
58. WORD MANUSCRIPT Perhaps the most important step I took in the writing process was adding color and styling to our Word template. This convinced the publisher to make the book four-color (full color). Indeed, the page designer later used the same colors and fonts as in our manuscript.
59. REVIEWERS We had two main technical reviewers. Both reviewed each chapter after it was completed.
60. reviews writing revisions (from reviews) redrawing illustrations copy edits page proofs (version 1) page proofs (version 2) Aug/13 Feb/14 Sept-Oct/13
61. We h a v e o v e r 5 0 0 d i a g r a m s Perhaps about 300 of them are screen captures and/or code/lines/boxes echo "<img src='23.jpg' alt='" . $firstName . " " . $lastName . "' >"; <img src='23.jpg' alt='Pablo Picasso' > echo "<img src='$id.jpg' alt='$firstName $lastName' >"; <img src='23.jpg' alt='Pablo Picasso' > echo "<img src=\"$id.jpg\" alt=\"$firstName $lastName\" >"; echo '<img src="' . $id . '.jpg" alt="' . $firstName . ' ' . $lastName . '" >'; echo '<a href="artist.php?id='.$id .'">'.$firstName.' '.$lastName.'</a>'; <img src="23.jpg" alt="Pablo Picasso" > <img src="23.jpg" alt="Pablo Picasso" > <a href="artist.php?id=23">Pablo Picasso</a> 1 4 5 3 2 outputs [title] { cursor: help; padding-bottom: 3px; border-bottom: 2px dotted blue; text-decoration: none; }
62. Art Store Case 1 Travel Photo Site Case 2 Book Rep Customer Relations Manager Case 3 We h a v e t h r e e c a s e s t u d i e s These cases were chosen with copyright limitations in mind. All art to be shown was pre-20th century, travel photos were all my photos, all books were Pearson books.
63. navbars Panels col-md-10 col-md-2 col-md-7 col-md-5 Nested row Main row Nested row Thumbnail Glyphicons Media objects Media objects Button groups footer row with four col-md-3 Input group
64. Display 12 items from the Flickr web service. Search on the city name of the travel image Display the information for the specified country. Use the Bing Maps service to display a static map using the latitude and longitude field values for the travel image Display travel images for the specified country Use the Bing Maps service to display a static map for the selected country. Add markers to the map for the locations for each travel image for the country. Web Form curiousWriter.php databaseProcessing.php UsingMIS.php elementaryAlgebra.php Elementary Algebra The Curious Writer Using MIS Database Processing
65. CHALLENGES
66. We misjudged the copyright issues Even if art work is in the public domain, the publisher’s copyright lawyers didn’t want to chance using digital images that might not be in public domain. They purchased 13 fine art images that we had to use for all art work images. Bizarrely we couldn’t use many book images from the publisher’s own books because of cover art copyright limitations.
67. What’s the opposite of yes? If you know the answer to that question, you could have a career as a copyright lawyer!
68. OUT-SOURCING Production was out- sourced to a company in India.
69. About 200 more complicated diagrams These attempt to illustrate and explain more complicated processes. First versions of these diagram were created using Microsoft Visio. I also used Visio for my first book. I want to see vacation.php 1 2 Server recognizes that it must run a dynamic script that is on its hard drive 5 Server "sends" generated HTML and the image file to user 6 Browser displays files vacation.php 3 Server executes or interprets the script Script "outputs" HTML 4
70. In July 2013, publisher told us .. … that their copyright lawyers were against using the Visio art work (servers, people at desks, etc). Instead they would hire an illustrator to “recreate” our diagrams In late Sept 2013, we got their first versions …
71. GET /vacation.html vacation.html 1 3 Browser Execute any Javascript as required 2 Browser can layout and display the page to the user 4 Web Server <body> <h1>heading</h1> <script> var url = ... window.open(
72. U n a c c e p t a b l e ! T h i s w a s Which meant that I had to redraw a lot of diagrams in Adobe Illustrator, a program I really didn’t know all that well. I ended up redrawing about 120 diagrams … about 80 of them over a three-week time period.
73. wireless router Ethernet cable broadband modem Fiber junction boxes Fiber Optic Cables Other neighborhood streets Typical home installation ISP Head-End Cable modem termination system (CMTS) Other Head-Ends Master Head-End To the rest of the internet REDRAWN
74. I want the domain funwebdev.com 2 1 3 4 Decide on a top-level domain (.com) and a second-level domain (funwebdev) Choose a domain registrar or a reseller (a company such as a web hosting company that works with a registrar) Domain Registrars Registrar will check if domain is available by asking Registry for the TLD. Enjoy the new domain … You now have purchased the rights to use it 6 TLD (.com) Registry Complete the registration procedures, which includes whois contact information (includes DNS information) and payment whois information 5 Registry will push DNS information for domain to TLD name server TLD name servers REDRAWN
75. lexer opcode PHP code documents parser compiler executor Converts expressions into PHP opcodes also known as bytecode Converts the stream of tokens and generates expressions Converts the human-readable PHP code into machine-digestible tokens Safely executes/runs the opcodes, which generates HTML The Zend Engine is a virtual machine that processes and executes PHP files. It also handles memory management, garbage collection, and dispatching function calls to modules outside of PHP. Zend Engine PHP code documents are fetched from server storage and fed into the Zend Engine for execution Output from executor is returned and eventually is sent back to requesting browser tokens expressions 1 4 5 3 6 2 REDRAWN
76. DO WOMEN HAVE CURVES? In mid-November, we realized we just had dudes … That is, we were worried that all our stylized people in the diagrams were white men. Unfortunately the stylized people all were composed of rectangles … so I tried to make female “dudes” out of rectangles with rather laughable results …
79. Add picture of unboxing
80. ALL DONE! TIME TO RELAX? No. We had to still create: •  online-only lab tutorials for each chapter. •  PowerPoint presentations for each chapter. •  create solutions for end-of- chapter exercises. •  exam bank questions. •  sample assignments. •  errata fixes.
81. S E C O N D E D I T I O N ( 2 0 1 6 - 1 7 )
82. MAIN CHANGES TO 2ND ED (WAY) MORE JAVASCRIPT CSS3 CHANGES PEDAGOGICAL CHANGES FIXES/IMPROVEMENTS NEW CASE STUDIES NEW DIAGRAM STYLE
83. NEW CASE STUDIES
84. N E W D I A G R A M S T Y L E
85. W E B D E V E L O P M E N T E M P L O Y M E N T W O R L D
87. “INSPIRING” CONCLUDING OBSERVATIONS
88. KEEPING CURRENT
89. ANXIETY ABOUT THE RIGHT PATH
90. FOCUS ON TIMELESSNESS
91. BOUNDARIES DON’T HAVE TO BE
93. THANK YOU RANDY CONNOLLY http://www.randyconnolly.com http://www.funwebdev.com