1stwebdesigner

---

• Back2Back: Fashion and Web Design Similarities
• How to Create Anchor Tooltips Custom Shortcode in Minutes!
• Discover the Extraordinary: How to Find Great Web Design Resources
• 20 Best eBooks to Learn PHP and MySQL Development

Back2Back: Fashion and Web Design Similarities Posted: 26 Aug 2014 06:00 AM PDT In this amazing world where exclusive designs and elements are fighting for supremacy, a lot of aspiring designers wants to be famous and become a design icon. When the love for art united with technology plus a spoonfuls of passion for design, a great designer guru can be born. What are the fashion and web design similarities? Designing does not only limit itself to a specific industry. There are many specializations that fall under one umbrella. A fashion designer differs from a textile designer and both are aesthetically different from a web designer. Who wants to be a Versace? or a Vitaly Friedman? But how does a fashion designer or a web designer similar to each other? As we all know both fields convey images of uniqueness, elegance, beauty and functionality. In this article, know how these fields of designing come into one stage and perform a common behavior. Let's open the runway! Image fron Flickr Fashion Design and Web Design Processes There are similarities in the process if you consider fashion design and web design back to back. From gathering initial inspiration to the creation of a garment and finally to delivery and charging. It is the same with web design, you start creating a website by gathering valuable information, processing it, giving it to your client and charging them accordingly. Here are some of the processes involve: Information/Inspiration Gathering This is where a fashion designer look for inspiration like the latest trends and what is the purpose of the garment to be made. In this case, the style and silhouette of  a garment should go with functionality. For web designers, this is the phase of researching where they look for themes, plugins and features which are trending. Image from Flickr The Design This is crucial for both fashion designers and web designers. They need to have a good design that would stand out and draw a client's attention. For a web designer , one will create one or more prototype designs of the website which is true also for fashion designers. The Development In fashion design, the process involves the cutting and sewing of the fabric to form a garment, top it with some embellishment, giving it a more overwhelming finesse. In designing a website, the development process would include all of the individual graphic elements from the prototype and use them to create the actual, functional website. Image from Flickr Testing and Delivery This is the judgement phase. A garment is fitted to a client to test comfort, functionality and elegance. On the other hand, website are subject to final details and tested if it conforms complete forms or other scripts, as well last testing for last minute compatibility Image from Flickr Payment Once a client approves the garment, it is payback time. Charging would vary for every designer. But generally payment scheme could be 50% down payment and 50% after delivery. In web design, it depends on the web designer-client disposition. Fashion design and web design collide when blended together. They both grasp for perfection in terms of the latest technological trends by applying it and spreading it to the world. In fashion and web design, you are creating a unique character and visual styles that would fit your specific client. Fashion design and web design can be treated as siblings. Both design fields serve one goal and that is to create and satisfy a client based on their unique and exceptional creation. Like some basic fabric being transformed into a garment fitted to your client's preference, a website also starts with a clean space filled with functional features. Image from Flickr "Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works." - Steve Jobs Elements in Fashion and Web Design Go Hand in Hand There four basic elements in fashion design that comes hand in hand with web design. These basic attributes are important in the design aesthetic of any garment or fashion accessory. The same is true with designing a website. There is a big impact in creating flattering clothing or websites. It  helps individuals how to choose the right kind of clothes or website that would fit their personality. 1. Color Color is very important both in fashion and web design. It is very important to know what different color schemes that work well with the design. The choice of colors makes a impact on the look of a garment or website. Some colors might be appealing to you, but, for others, these are not. Image from Flickr 2. Silhouette In other types of design, shape and form are considered elements. But in fashion design, shape and form combine is the silhouette of a garment. In web design, silhouette can give a better look to a website. With appropriate shapes and form, an elegant and responsive website can be created. These silhouettes changes over time. 3. Line Lines are used very prominently in fashion design. The creation of a garment needs seam lines to hold fabric sections together. The weaving intersections of threads constitute the patterns of a fabric. In web design, lines can be straight or curved. These are used in web design to serve as divisions that give separate functionality to the website. Moreover, these give a website classier and more elegant look. Image from Flickr 4. Texture Texture is another element of fashion design. Fabric or other materials like satin can give a variety of textures that affect the look of a garment. The weave and texture of a fabric have an impact on the way it drapes and greatly affects the way the garment looks when it is worn. The same is true with web design, texture plays a very vital role in the total look of a website. The kind of content, themes, graphics, fonts and templates being added in the website give flavor in the total appearance of a website that would stand out from the rest. Creating one of a kind designs does not only involve a great amount inspiration and  idea. It is also about understanding the fundamentals of the subject. "Design is a constant challenge to balance comfort with luxe, the practical with the desirable."- Donna Karan Final Runway Image from Flickr For fashion designers or web designers who strive to make their creations stand out from the rest, the look is very important. Customizable elements are crucial. They are creative individuals that use their artistic juices which will bring a personal touch to any creation that will have. With the innate creativity that a designer possesses, one truly can create an amazing craft that can draw someone's attention and comes out a winner! What can you say? Feel free to share your idea.

How to Create Anchor Tooltips Custom Shortcode in Minutes! Posted: 26 Aug 2014 05:00 AM PDT Tooltips are very useful in displaying information. These are small hover boxes that contain information about the text or item being hovered over. It appears without clicking the text, something which is very handy on your site. In some previous tutorial, I showed you how to create and customize anchor link tooltips to display information. In this one, you will learn how to create anchor tooltips custom shortcode. With just a few lines of pure HTML and CSS3, it can be done. But isn’t it would be great if you can also integrate this on your WordPress site? Great thing there is a solution for that: WordPress shortcode. Shortcodes are WordPress-specific code that lets you do nifty things with very little effort. By just inserting something inside square brackets, it will replace that content with some other content and usually being driven by a series of PHP functions. In today’s tutorial, you will integrate the anchor tooltips that you’ve made on the previous tutorial to WordPress shortcode. Let’s start. Note: If you want to understand in-depth understanding about shortcodes, you might want to check this tutorial regarding the Theme Options Shortcodes. Resources You Need to Complete This Tutorial WordPress Installation Version 2.5 or higher Knowledge about PHP and WordPress Codex Time and patience Shortcodes Variation Shortcodes comes with two variations. Additionally, shortcodes can be created with or without attributes. Shortcode usually comes with this simplest version: [tooltip] The Shortcode API makes it easy to create shortcodes that support attributes like this: [tooltip class="top_tooltip" title="This is a tooltip!"] Tooltip Text [/tooltip] There are two steps involved in creating a shortcode 1. Building the Primary Handler Function 2. WordPress Hook for the Handler Function Regardless of how dynamic or complicated your shortcode is, these steps are the foundation. Building the Text Tooltip STEP 1 – Creating the Shortcode file You can place your shortcode snippets to plugins folder (on your theme directory) and then activate. But take note that it is commonly added on the functions.php file. However, for this tutorial, let's create an additional file to keep the code clean without affecting the theme’s built in functions. Go ahead and create shortcode.php file on your theme’s root directory. STEP 2 – Building the Primary Handler Function For this part of the tutorial, add the primary functions. Since tooltips can also contain images aside from just pure text, create two functions namely: tooltip and tooltip_image. function tooltip(){ //Do something here } function tooltip_image(){ //Do something here } STEP 3 – Adding Attributes and Returning the Result One of the great things about shortcode is that handlers are broadly similar to WordPress filters: they accept parameters (attributes) and return a result (the shortcode output). There are three parameters that can be passed in to the shortcode callback function and they are the following: $atts – an associative array of attributes, or an empty string if no attributes are given $content – the enclosed content (if the shortcode is used in its enclosing form) $tag – the shortcode tag, useful for shared callback functions For this tutorial, you're going to use the $atts and $content attribute to display your data. Basically the $atts will contain an array for your class, title and links and the content will refer to the item or text that these shortcodes will be wrap. //Text Tooltip function tooltip($atts, $content = ''){ $atts = shortcode_atts( array( 'class' => '', 'title' => '' ), $atts); } //Image Tooltip function tooltip_image($atts, $content = ''){ $atts = shortcode_atts( array( 'class' => '', 'src' => '' ), $atts); } Next, return your result using a variable $html, which will contain the content format. //Text tooltip function tooltip($atts, $content = ''){ $atts = shortcode_atts( array( 'class' => '', 'title' => '' ), $atts); $html = '<a class="' . $atts['class'] .'" title="'. $atts['title']. '" href="#">' . $content . ' <span>' .$atts['title']. '</span> </a>'; return $html; } //Image Tooltip function tooltip_image($atts, $content = ''){ $atts = shortcode_atts( array( 'class' => '', 'src' => '' ), $atts); $html = '<a class="' . $atts['class'] . '" src="'.$atts['src'].'" href="#">' . $content . ' <span> <image src="'.$atts['src'].'" width="100" height="70"/> </span> </a>'; return $html; } STEP 4 – WordPressHook for the Handler Function In order to execute the primary functions, you will tie it to WordPress' initialization action. The name of the function will be the same to the name of the hook Shortcodes but feel free to change it to your preferred name. //Text tooltip function tooltip($atts, $content = ''){ $atts = shortcode_atts( array( 'class' => '', 'title' => '' ), $atts); $html = '<a class="' . $atts['class'] .'" title="'. $atts['title']. '" href="#">' . $content . ' <span>' .$atts['title']. '</span> </a>'; return $html; } add_shortcode('tooltip', 'tooltip'); //Image Tooltip function tooltip_image($atts, $content = ''){ $atts = shortcode_atts( array( 'class' => '', 'src' => '' ), $atts); $html = '<a class="' . $atts['class'] . '" src="'.$atts['src'].'" href="#">' . $content . ' <span> <image src="'.$atts['src'].'" width="100" height="70"/> </span> </a>'; return $html; } add_shortcode('tooltip_image', 'tooltip_image'); STEP 5 – Testing the Shortcode Now, with the CSS added from the previous tutorial regarding the CSS3 Anchor Tooltips and some new set of the same CSS for image_tooltip shortcode, let's test the shortcodes. Insert the following code on your page or posts if you want to display text tooltip: [tooltip class="top_tooltip" title="Testing tooltip"] Text here [/tooltip] And if you want an image tooltip use the following shortcode: [tooltip_image src="your image link here"] Text here [/tooltip_image] Conclusion You did it! Now you can easily create all kinds of custom Shortcode functionality and integrate it into your WordPress site. Hope you learned something on this tutorial and don’t forget to always check the WordPress Codex for changes in the rules in creating a shortcode. Have you created the same shortcodes before? Share it with us on the comments section.

Discover the Extraordinary: How to Find Great Web Design Resources Posted: 26 Aug 2014 04:00 AM PDT The Internet has completely transformed the computer and communications world like never before. The Internet has become a world-wide broadcasting mechanism for collecting as well as sharing the information. Through Internet browsing, you can easily access information on unlimited topics related to web design. However, the biggest hurdle that people face on the Internet is how to effectively access the huge information available with a simple mouse click. Today's post is about teaching you the best way to scour the Internet in order to find cool resources that can be perfectly used in your designing projects. Let's start! Google for Research Search engines are the most important tools that you have as a research professional or designer. There is a lot of information waiting to be uncovered. Search commands can save you time while searching for cool design resources on the Web. If you can't find the results through Google, you can use search operators to manipulate the search results. Let's just start with the basic search commands. Basic Commands – Search commands allow you to search for the exact match word or the set of words by putting a quotation mark around the words that you want to search. For example, let's say you want to find free HTML templates. In order to get the most relevant and specific results, enter “free html templates” in the Google search box. Search Operators – These may vary, depending on the type of search engine but, in this post, you are going to focus on the set of operators that work on Google. The query intitle:term will restrict the results to the files that contain the term in the title. For instance, [flat design intitle:trend] will display results having “trend” in the title while showing the other words in the whole page. When you include inurl: your query, Google will restrict the results to the files that are containing the word in the URL. For instance, [free inurl:fonts] will give you the results that mention the words 'fonts' in the URL, and mention the word 'free' anywhere on the page. If you want to search for a specific resource on a specific website, you can use site:domain "keyword". For example, you want to search deviantART for Photoshop brushes, you should use this operator site:deviantart.com "photoshop brushes". This will return with results from deviantART, having exact keyword "photoshop brushes" anywhere on the page. You can combine different operators in a single search. For instance, you can use site:behance.net intitle:free fonts. Learn more about search operators here. Google Alerts Google Alerts is a very powerful tool that is available for free; however, it is often not given the importance it deserves. It works by monitoring the words and phrases on the Web. It also sends you e-mails and updates the RSS feed every time something new comes up. Doesn't it sound great? It has a a lot of uses that are limited by one's imagination only. Here is how you can use the Google Alerts to find out the cool things related to web design that you can also use in your design projects. Let's say you want to monitor all the free fonts that are released on the web, you can use the Google Alert to monitor them very easily. You will get an alert if someone talks about the free fonts on a forum or shares it on a blog somewhere. Simply enter this in the Google Alert: "free html templates” "download free html templates" Remember, this is just an example to show you how it is done. You can always change the term according to what you want to search and get notified about. How to use Google Alerts effectively? In the Search Query Box, enter whatever keyword you wish to be notified for. You can enter 'icons sets' or 'free fonts' or something else that you want to use for your design project. In the Result type Box, select to receive alerts for everything. The How Often Box can be used to choose whether you want updates once in a week, once in a day, or as it happens. This is based on the purpose that you want to achieve. In the How Many Box, choose 'All Results' in order to make sure you don't miss anything. The Deliver Box allows you to get alert delivery via e-mail or RSS. Again, it can depend on the purpose that you want to achieve. Now that you have set up everything, you will receive alerts about your topics forever! Best Blogs for Design Resources 1.  1stWebDesigner We, here, at 1WD, strive to produce the best resources and information possible. Whether you are a web designer or freelancer, 1WD has something to offer. Consider subscribing to our newsletter for a weekly dose on freelance training and other promotions. If you are looking for some tips on how to make use of your skills for the freelancing world, learn more about our quicktips at 1wd.tv 2. Smashing Magazine Smashing Magazine provides useful and innovative resources to web designers and web developers for their design projects. It has have a huge list of web design posts being published every week. If you subscribe to their email newsletter, you will get a great variety of resources sent to you every second Tuesday of the month. 3. Hongkiat Hongkiat offers fresh resources for the designers and developers. Hongkiat is included in the list because it provides quality resources worth checking. When you subscribe to the site, you will get the latest resource updates related to: WordPress Photoshop Tools Inspiration Design The latest posts and updates on these related topics will be sent freely to your inbox. 3. Webdesignledger Webdesignledger has a huge category for the resources that can be very helpful for the improvement for your web design skills. The feature WDL Newsletter is the place from where you can get all the latest updates on templates, icons, themes, etc. You have to subscribe to the e-mail newsletter to get all the resources sent directly to your inbox. 4. Webdesignerdepot Webdesignerdepot is the place where you will find everything from Photoshop tutorials to the WordPress plugins. Just subscribe for free weekly newsletter and get all the updates on: Design HTML Freebies Web Development UX Design 5. Designmodo Designmodo is a very popular web design blog and shop. It has a variety of resources related to web designs, usability, and website UX, etc. If you want to get alerts for the latest posts about resources, simply subscribe to the newsletter on the site. 6. Youthedesigner Youthdesigner offers great web design resources including tutorials, typography, fonts, and visuals, among others. The available resources on the youthdesigner are very helpful for your design projects. To get the latest updates on the resources, freebies and more, simply subscribe on to the newsletter. Best Websites for Design Resources 1. Behance Behance is the leading platform for showcasing the creative art work that designers can use in their projects. If you are looking for icons, backgrounds, and other design related stuff, Behance is the best place for it. 2. Shutterstock Shutterstock provides resources of high resolution, royalty-free images, stock photos and vector site with simple pricing plans. Standard license includes US $249/month with which you have the access to download 25 images every day. 3. Deviantart Deviantart is the online community on which you will find great design resources that can be used in your projects. It is excellent for finding user-submitted brushes, and vectors for Photoshop and Illustrator. The resources can be downloaded for free. 4. Dribbble You can find a lot of design related resources on the Dribble, including free icons, UI kits, templates, and more. A lot of freebies are added on the Dribble daily, which can come very handy for the designers. The resources are free to download. 5. Creativemarket You will find creative and useful resources for your design projects. There are multitudes of resources to help you with your design projects. The categories include web design resources, and graphic design, etc. There are plenty of templates, themes, fonts and add-ons that you can download on different prices and use in your projects. 6. Stockvault Stockvault is the place where designers can find great quality resources on images that are  available to search and freely used in  design projects. It can prove to be a great resource website for your next design project that includes images of nature, 3D rendering, and graphic design. Design Forums There are plenty of design forums that provide you great resources for finding the best data available on the Internet. Quality resources are shared by community members on these forums. If you follow these regularly, you will find many useful website resources that can be very helpful for your designing projects. 1. Digital Point Digital Point is a very popular forum that provides great resources on the design- related topics. You can talk about web design and get help on different designs topics such as best themes, templates and icons. 2. Webdesignforums This is a very good forum for general web design discussions. You can find help in figuring out your site's layout, picking up the best photos for your homepage and choosing the best template for your site. Also, high quality resources are being shared by members that can be very helpful for your design projects. 3. Estetica design forum Get help related to web design as well as graphic design from this forum. You will find many web design resources such as best WordPress themes, or best e-commerce templates. These resources are being shared by many site's approved members. 4. Webdevforums This forum includes website design reviews, where you can find very attractive website templates shared by members. You can surely get ideas for your own web design projects by looking at those templates. Also, you can discuss with other designers regarding finding some quality resources related to icons, themes, and fonts. 5. Webdesignerforum This is forum perfectly suited for web designers looking to find web design resources. There are number of free design templates, and themes shared by other designers and members that you can freely use in your web design projects. Conclusion Anyone can put anything on the Internet, from templates to tips, from themes to techniques; everything is available on the Internet. You can't find the most valuable resources hidden on the Web unless you know how to scour it. This post was truly meant to help you in finding great web design resources through which you can find cool things to use in your web design projects. Please share the post with others so that everyone can understand how this works. If you think we missed some ways to find web design resources, please add them in the below section.

20 Best eBooks to Learn PHP and MySQL Development Posted: 26 Aug 2014 03:00 AM PDT Having some basic knowledge about the PHP and MySQL, nowadays, is necessary for every web developer. If you are creating websites for your clients, you will definitely have to use any one of these coding. PHP and MySQL also serve many other purposes for web developers. They can learn the latest techniques about PHP and MySQL through different sources such as eBooks. eBooks are easy to download. You can just read them instead of going to class. There are very few authentic sources from which you can learn the right PHP and MySQL techniques. To help you out, we have collected 20 of the best e-Books through which you can learn everything about the PHP and MySQL. Here is the list: 1. Head First PHP & MySQL This eBook is an ultimate guide for creating active, database-driven websites using the PHP and MySQL. Has real-world examples Contains all the essentials for server-side programming, including the basics of PHP and MySQL coding to validation You can buy the eBook for $35.99. 2. Build Your Own Database Driven Web Site Using PHP & MySQL This is the 4th edition and provides a learning experience about all the tools, principles and techniques that are required to create database driven web site. Includes techniques on how to install the PHP and MySQL on Windows, Linux, and Mac computers Contains tips in creating a web-based content management system The first 4 chapters are free, you can buy remaining 8 chapters for the price of $29. 3. Understanding MySQL Internals Coding can be difficult if you don't properly understand it. Offers you a free tour of MySQL 5 that explains how you can perform the inner workings of this database Know how to structure data Understand how to add new storage engines and configuration options Price tag for this book is $39.99. 4. Expert PHP and MySQL This book provides confirmed, author-tested best practices and expert techniques that you can apply on the most demanding MySQL-driven PHP apps. You can buy this eBook for $19.99. 5. Learning PHP, MySQL, JavaScript, and CSS In this eBook, you will learn how to create interactive, data-driven websites. There is no past knowledge required about programming. You can separately learn each one of these concepts. You can even learn how to combine them all. You can buy this eBook for $33.99. 6. PHP & MySQL: The Missing Manual If you know how to build websites through CSS and JavaScript, this book can take you to the next level of it. Learn to create lively, database-driven websites with PHP and MySQL Know how to create a database Understand how to manage your content and interact with the users through queries and web forms. Price: $27.99. 7. Learning PHP, MySQL, and JavaScript Anyone who knows HTML can create interactive websites faster through this e-Book. Know how to create responsive, data driven websites through PHP, MySQL, and JavaScript. There is no need of past coding knowledge. Learning PHP and MySQL can help you in creating modern websites with active user interface. Buy this helpful book for $31.99 8. MySQL in a Nutshell This eBook is a complete guide for learning everything about the MySQL. The book provides you all the details that you need to know on daily basis. The book can be downloaded for $27.99. 9. PHP Master Anyone who wants to take their server-side applications to the next level should read this eBook. You can learn: The best PHP practices Techniques for the most effective object-oriented programming You can buy this book from sitepoint for $29. 10. PHP & MySQL: Novice to Ninja This book will help you in creating your first database driven website. For the price of $29, you will: Learn how to create your own working content management system using entirely free software Learn the best practices in database design using MySQL, covering the latest technologies 11. PHP: The Good Parts This eBook gives you an opportunity to learn the real power of PHP language. Know the basic features of PHP How you can speed up the web development process The book teaches you several features to integrate your application with databases. You can buy this ebook for $23.99. 12. Integrating PHP with Windows With this eBook, you can take your PHP skills to the next level. Learn to create PHP apps that can run effectively on the window technologies You can easily and quickly learn the best PHP practices to apply on Windows. List price of this book is $49.99. 13. MySQL Troubleshooting This eBook teaches you to handle plenty of problems that can come while working with MySQL. They may include: Bugs Performance problems Crashes Data corruption Puzzling outputs This troubleshoot eBook provides the expert steps for solving the most simple and complex problems. 14. Learning PHP Design Patterns With this eBook, you can build server-side applications more effectively. Improve your PHP programming skills through using design patterns in your code Learn to apply different object-oriented patterns 15. PHP in a Nutshell This book is specially designed to provide you with the depth of PHP that you cannot find anywhere else. The topics cover: Tips Examples that every PHP programmer should learn This eBook contains functions which are used by majority of developers, so that you easily find the information that you want. 16. PHP & MySQL Web Development This eBook is all-in-one desk reference for the dummies. You can learn information that you want to know about PHP and MySQL. It is priced at $14.99. Because it covers so many topics, it is divided into mini-books for setting the environment. You can easily learn to create websites where visitors can sign up, shop, or complete the forms, etc. 17. PHP and MySQL 24-Hour Trainer This eBook is perfect for those who want to go beyond the HTML and CSS, giving more active websites to their clients. No past PHP or MySQL experience required. 18. Beginning PHP and MySQL This eBook can transform you from a novice to professional. This book includes: The complete coverage of PHP 5.3 features such as name spacing Learn the core features of PHP, and MySQL. Know how to effectively use them for creating a data-driven app. 19. Programming PHP This eBook teaches you to effectively create web apps with the latest features in PHP 5. You can learn different programming techniques and other details through the help of simple examples and illustrations. 20. MySQL High Availability MySQL provides you different features that can protect you from outages. No matter you are running directly on the hardware or virtual machines. This eBook  encompasses: All the skills needed to master the MySQL features effectively Helps you determine which combination should be used for a reliable system. Conclusion All these eBooks can help you in learning PHP and MySQL. If you already know the basics, you can learn many latest techniques about them. Many of these books guide you from the start so that you can learn PHP and MySQL, even if you don't know anything about them. I hope you liked the post. If you want to share anything, please put it in the below comment section.

You are subscribed to email updates from 1stwebdesigner To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610