Sheng-peng Wu

I am always intrigued by learning more about web design and programming. In 2009, I started taking Division of Information Technology (DoIT)'s student software training sessions, and I was introduced to some really helpful online resources like W3 Schools and Lynda.com to learn HTML, CSS, Dreamweaver and Photoshop techniques to design static websites. In 2010 I was selected to take DoIT's summer training camps on Web Design I & II to learn more about NetBeans IDE, Fireworks, Notepad++, PHP, MySQL, XAMPP, Javascript and AJAX to incorporate scripting languages and basic databasemanagement in designing dynamic websites. Later in 2011 and 2012 I took Computer Graphics courses with Professor Michael Gleicher and learned even more from the instructor and fellow classmates in computer sciences about JavaScript, emacs, WebGL, 3Ds Max, github, C++, openGL, SVG, jQuery, Google Charts, D3 and Stack Overflow. I have also self-trained to create Flash games with ActionScript 3, and gained knowledge on Visual Studio, SQL Server, FileMaker, Google Sites, Camtasia, ScreenOverflow, Firebug and operating systems at work. I am positive it will be an ongoing lifelong project for me to keep working on building more intriguing online games, sites, graphics, videos, tutorials, and interfaces for effective and engaging teaching and learning.

This intended to be part of the class project for visualizing some reports in Professor Constance Steinkuehler's Games and National Policy class in Fall, 2012. We did online and face-to-face discussions, online surfing, data collection, analysis, and visualization to demonstrate trends in the development of impact games. Professor Constance Steinkuehler set up the major framework, Dennis Ramirez built a database with Ruby on Rails, Shannon Harris and Liz Owen helped with data analysis, and the rest of the class worked together to complete the project. Goal: Visualize findings from the analyses of currently available impact games. Tools: NotePad++; Consultant(s): Professor Constance Steinkuehler.

This tutorial was created for readers to manage D3, a powerful JavaScript graphics library, to draw some dynamic charts on their webpages. For novice web programmers, this site might also serve as a roadmap for building up a fundamental mental model about necessary prerequisites for mastering D3. Goal: Understanding D3 as a graphics tool. Tools: Notepad++, GIMP, FileZilla. Collaborator(s): Andrew Schwartz, Rick Solis. Consultant: Michael Gleicher.

This site was created to introduce basic concepts of gamification and D3. In Data Visualization course I took with Professor Michael Gleicher, I learned much about current data visualization tools, human perception theories, and computer display technologies. Goal: Take D3 as a tool to visualize statistical data in gamification studies. Tools: HTML, CSS, JavaScript, D3. Consultant(s): Michael Gleicher, Michael Correll.

This site was set up as part of the skills test for a web developer position in Department of Dairy Sciences. I learned to use a jQuery slider as a bridge to connect HTML tables with Google Charts. Goal: Display data dynamically. Tools: HTML, CSS, jQuery, Google Chart. Consultant(s): Zack Krejci, Chien-Ming Huang, Chris Dowling.

This site was built to solve a math problem I saw on the newspaper. Here's the math problem: One day you have a deck of 4000 cards on a table. Each card is unique and printed with a number between 1 and 4000. Suddenly, a weird gust blew off the family of 2 (2, 4, 6, 8...4000) from the deck, the second gust took away the family of 3 (3, 6, 9, ....), and the last gust tossed the family of 5 (5, 10, 15, ....) out of the deck just like magic. So, after reshuffling the rest of the deck on the table, sorting cards by number from the smallest to the largest, what number would the 1000th card be in this deck? Luckily, I was the first one to answer this question. Goal: Program to count. Tools: HTML, JavaScript. Collaborator(s): none.

This site was created as the final project for the DoIT Web Design I training session in Summer, 2011 (5/25-6/3). I made a new website for this fictional department in UW-Madison: Educational Technology. Most of the info was adopted from the original ECT site. Goal: Create a static website for info display. Tools: Dreamweaver, Photoshop, Fireworks, HTML, CSS, and Notepad++. Consultant(s): Mike Roy, Colin Brock.

This was a part of the whole class project in Professor Kurt Squire's Place-based Learning class in Spring, 2011. We put together our smaller class projects on this PBworks-wiki as a convenient platform to demonstrate the efforts we made in the course. Just like other similar user interfaces (Moodle, Learn@UW, Piazza), instructors communicated with the class and visualized individual and group progresses via these Learning Management Systems (LMS). Goal: Compile class projects on a LMS. Tools: PBWorks wiki; Consultant(s): Professor Kurt Squire, Jim Matthews.

I made this site with iWeb as part of my Master's project in Educational Communications and Technology program, UW-Madison. It is mainly about teaching basic Mandarin Chinese concepts like numbers and tones with music videos and games. The site is built with Mac iLife - iWeb for the templates, iMovie for music videos, and Adobe Flash for small interactive games. Goal: Learn to do web design and teach Chinese as a second language. Tools: iWeb, iMovie, Flash. Consultant(s): Michael Thomas.

This site was built when I took a media production class with Professor Michael Thomas in spring, 2009. It was my first trial to set up a website with plain HTML. The site introduced main characters in Peanuts by Charles M. Schulz. Goal: Hands-on practices with HTML. Tools: HTML. Consultant(s): Michael Thomas.