Recommended
More Related Content
What's hot
What's hot (19)
Viewers also liked
Viewers also liked (17)
Similar to Wordcamp2012deck
Similar to Wordcamp2012deck (20)
Recently uploaded
Recently uploaded (20)
Wordcamp2012deck
- 1. USING DEVELOPER TOOLS TO REVERSE ENGINEER WORDPRESS Melanie Haas
- 7. Mac & PC: • Chrome Developer Tools • Firefox with Firebug • Safari Developer Tools
- 8. Safari (enable dev tools in Preferences)
- 10. Firefox with Firebug http://getfirebug.com
- 11. Firefox 3D
- 13. More Good Tools (Mac) • Free Ruler - pixel-perfect measurements http://www.pascal.com/software/freeruler • DigitalColor Meter (Apple) • Espresso- for editing HTML & CSS http://macrabbit.com/espresso • Sublime Text Editor • Browser Shots (because IE is evil) http://browsershots.org
- 14. Moving into development • Responsive Web Design - CSS3: http://en.wikipedia.org/wiki/Responsive_Web_Design • O’Reilly Books: oreilly.com [free video walkthroughs] • http://www.w3schools.com • http://www.codecademy.com • http://learn.appendto.com (Javascript)
- 15. Parting gift - A fun way to get excited about CSS: • CSS3 Patterns via Lea Verou: http://lea.verou.me/css3patterns
- 16. Follow me on Twitter for a link to today’s slides: @mel_haas Join us for Geek Night on Mondays: @KCGeekNight mhaas@vml.com Speaker Rate: http://speakerrate.com/melhaas
Editor's Notes
- Welcome to the very last session of the day. My name is Melanie Haas.\n\nI’m going to be speaking about developer tools, mostly Chrome developer tools but we may stumble into some other ones depending on what we look at. We’ll see a lot of CSS, and how to make things fit and work in Wordpress.\n\nIf you find that this is review, or doesn’t fit what you’re looking for, I encourage you to hit another session because this is your last chance today. And likewise, if this is review, I challenge you to participate in the conversation. \n\nWhen I go to conferences I like to hit up the stuff I really want to learn, and then I make it a point to go and sit in a session about something I’ve never heard of. You never when you might learn about something really cool, or just meet someone awesome. \n\nI have a friend who likes to spend the session time in the hallways of the conference center, meeting other developers - “because that’s where the good conversations happen.” \n\nBut you’ve made it this far, so let’s knock this out and then tonight you can go party at The Cashew.\n
- My name is Melanie Haas. I went to college for graphic design and ballet.\nGraphic design led to jobs in the printing industry. And in 1995 my Dad accidentally-on-purpose launched a successful website for teachers. Which needed an advertising manager. \nThen a content solution, and Wordpress kicked Drupal’s butt.\n\nSomewhere in between I started a web development company called Prairie Cube Media, where for 8 years I built websites including Wordpress, shopping carts in the likes of OSCommerce, and spent a lot of time in Dreamweaver. If you ask me, my first love is marketing. \n\nI now work for VML, which is one of the country’s top digital advertising agencies. The brands you see on the screen are all VML clients this year.\n\nGlobally we employ over 10,000 people. Here in the states we have offices in Seattle and New York, and we occupy two buildings in Kansas City. \nWe produce commercials and print advertising, but the bulk of what we do is to build websites and digital strategy. And we actually have an entirely alignment team devoted to Drupal. \n\nWe have recently received multiple awards for being one of the best places to work in Kansas City, and we’re hiring, so if you’re in the market come and chat with me later.\n\nI am self taught. You are probably self taught. \n\nMy own history of design to print to web to big ad agency simply defines the path I followed to grow my skills as a developer. \n\nWait! This is the designer track! “I’m not a developer.” Right?\n
- If you work in digital media, if you install your own Wordpress builds and copy and paste CSS in the editor, you are doing web development. If you are running an FTP client, and managing site structures and researching plugins and modifying the DOM, you have officially ventured to the development side.\n\n***\nI do a lot of consulting and training, and what I most often see is that instead of designing a site the way you want to, instead you have sort of back into wordpress, designers are reverse engineering. They have to create their graphics to fit into the theme they found that most closely matches something similar to their original vision. \n
- This is actually my dad’s site. He finally made the do-what-you-love-MOST decision and dove into doing nothing but artwork. As a result, he’s now way behind the code curve. \n\n** how many of you are designers first - versus publishers who got stuck with the design job too?\n
- And yet, he managed to hack his way through twentyeleven, manipulating CSS as he went to tweak this page into what he wanted. But is it what he really wanted? Do you ever find the perfect theme?\n\nThemes are awesome, right? \n
- I do a lot of consulting and training, and what I most often see is that instead of designing a site the way you want to, instead you have sort of back into wordpress, designers are reverse engineering. They have to create their graphics to fit into the theme they found that most closely matches something similar to their original vision. \n\nWho doesn’t love spending hours pouring over websites full of crappy themes, trying to find one at least kind of suits your needs? \n\nAnd then you shell out $35 or $70 or whatever in the hopes that the code actually lives up to your expectations. You may have just bought a style sheet that’s incomplete or mixed with someone else’s old styles, or perhaps there was some tweaks made in places you really shouldn’t be tweaking the code, and later they’ll come back to bite you. \n
- So let’s get to the Dev Tools. We’ll assume that you have a design concept and a theme. Or maybe you’ve entered an existing project and there’s already a site in place that needs some dressing up. \n\nThese are some of your options for getting a better look at the code.\n
- \n
- \n
- \n
- \n
- styling/css \n\ncolors:\npapayawhip (thanks paul irish)\nhsl : hue saturation lightness\n\ntab to value, auto complete - by tabbing\n\n+ new style rule\n\nadding: font rules, outlines\n
- \n
- \n
- \n
- \n