INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (357, "Sprite Sheet for animation with Sketch", "We ll show you how to assemble and style a series of frames in the PNG format exported from After Effects into a single sprite sheet graphic using Sketch You can then use this in an HTML5 animation which we did in a previous episode In a future episode we ll create the same graphic using Photoshop", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_042-242x169.jpg", "Sprite Sheets, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (355, "Sprite Sheet for animation with Photoshop", "We ll show you how to assemble and style a series of frames in the PNG format exported from After Effects into a single sprite sheet graphic using Photoshop You can then use this in an HTML5 animation which we did in a previous episode In a future episode we ll create the same graphic using Sketch", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_041-242x169.jpg", "Sprite Sheets, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (353, "Customized Markers for Google Maps", "Want to put a logo or custom artwork to indicate a location right on a Google Map In this episode we ll show you how You ll need to sign into your Google account then go to https developers google com maps and get a key We ll help you navigate through it It s easier than it sounds and you ll have a cool looking map in the end", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_040-242x169.jpg", "Google Maps, JavaScript, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (351, "Animating SVG with CSS", "This episode has a couple of steps First we ll animate elements of an SVG file using CSS Then second we ll be adding our CSS directly into the SVG file allowing the graphic to animate without requiring any outside CSS or JavaScript Yes this can all happen directly in the SVG file in under five minutes Be prepared to be amazed", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_039-242x169.jpg", "CSS Animation, Groups, SVG, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (349, "Zooming hover state", "Wouldn t it be cool to have a zooming hover state for hyperlinks in your web page We ll show you how This technique is really useful to highlight or call attention to a hyperlink with a nice visual It s super fun and easy to do And it gives our mouse and trackpad users a more dynamic user experience", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_038-242x169.jpg", "CSS, CSS Background Image, Figure, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (347, "Responsive SVG logo", "An SVG file is code so we can add some CSS right in the file in order to make the logo responsive to it s relative size within a web page Sounds complicated but it s not This will allow you to make subtle changes to the artwork for different screen sizes and really customize your graphic for the best user experience", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_037-242x169.jpg", "CSS, CSS Media Queries, Groups, SVG"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (345, "Triggering content from a video", "You can show and hide content in your web page based on the current time of a video playing in the page That means you can display certain content based on your video What Sounds crazy right But it s not With a function and some variables an event listener and opacity settings you can have a very engaging video with event driven content that changes on cue", "https://codifydesign.com/cms/wp-content/uploads/2017/09/Creating_Web_Media_Episode_036-242x169.jpg", "CSS Position, HTML, JavaScript, Video"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (343, "Animating an HTML canvas", "We ll be building on a previous episode where we combined two images together using an HTML canvas element So starting from there we ll create a second instance of the clouds image set some variables set some positioning and move the images together to create a seamless looping animation Impress your friends", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_035-242x169.jpg", "Canvas, JavaScript, JS Animation, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (341, "Masking an image in SVG", "We ll load and mask an image in an SVG file then load that SVG file in an HTML page I know I know it sounds like we re creating a vortex But we ll show you how to you can add the image right in the SVG code By adding a clip path element and some other properties you ll have a vector masked image in no time", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_034-242x169.jpg", "HTML, SVG, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (339, "Image zoom to point of interest", "Ever wonder how to create a zooming image without some fancy player or service You can create an interactive graphic by setting different scale and position properties of a background image which allows you to zoom to different points of interest in the image There is a tiny bit of JavaScript involved but don t be scared We ll walk you through a couple lines of code and you ll have a cool interactive graphic", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_033-242x169.jpg", "CSS Background Image, JavaScript, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (337, "Inline video for iOS", "Don t you hate when you have an embedded video tucked into your content and then it plays in full screen mode on an iOS device It s the default and you can t change it BUT wait There IS a way to have it play inline without full screen mode so your user can have a good mobile experience We ll show you how and it ll take less than five minutes", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_032-242x169.jpg", "Video"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (335, "Indicating download file types", "A picture can worth a thousand words or help visually indicate the type of download file to your user We can use CSS to determine the type of file available for download then graphically represent that to our users All you need are a couple of file type graphics in whatever style you d like and less than five minutes of your time", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_031-242x169.jpg", "CSS, CSS Attribute, CSS Background Image, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (333, "Creating a sprite sheet for links", "We ll take a look at how to plan out a sprite sheet of graphics to be used with hyperlinks in our web page We want to use a single SVG graphic that has multiple graphics inside of it This way I can reduce the number of calls to the server for individual graphics With some CSS and background image properties we can create an engaging page for our users", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_030-242x169.jpg", "CSS, CSS Background Image, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (331, "Responsive Images and the Picture Element", "We ll take a look at creating a responsive images using the PICTURE element in HTML In a previous episode we looked at using the SRCSET and SIZES attributes in an IMG element however the PICTURE element wraps around the IMG element and gives up another approach for making our images responsive Using SOURCE elements within a PICTURE element just like with VIDEO and AUDIO elements and the SRCSET attribute we can direct the browser to use different images within our web page", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_029-242x169.jpg", "HTML, Picture, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (329, "Responsive Images and the Image Element", "We ll take a look at creating a responsive image using the IMG element in HTML Using the SRCSET attribute we direct the browser to use different images based on the user s screen size and the size of our image The SRCSET gives us some flexibility for switching images as well as built in support for detecting device resolution In a future episode we ll take this one step further by using the PICTURE element", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_028-242x169.jpg", "HTML, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (327, "Using GULP with Sketch files", "We ll take a look at generating artwork from Bohemian Sketch files using Gulp We ll be using gulp sketch a Sketch Tool plug in for Gulp that allows us to target a Sketch file and generate ready to use assets even if you don t have a license to use the Sketch application Now there are quite a few Sketch Tool plug ins available for Gulp For this episode I ll be one called using gulp sketch and you can find it at github com cognitom gulp sketch", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_027-242x169.jpg", "JavaScript, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (325, "Base64 encoding images", "Base64 is a method of representing binary data like graphics as text This means we can include graphics in an HTML CSS or JavaScript file by simply adding the base64 code to those files Then there is no need for an external image file to be referenced and this can be very handy for web advertisements or anytime that you don t want to have an extra file linked into your code", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_026-242x169.jpg", "CSS Background Image, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (323, "Video jump points with JavaScript", "Did you know you can create hyperlinks that control a video and skip the video to specific points or chapters based on time We ll show you how To achieve this we ll be writing just a small amount of JavaScript Bonus Once you have you ll be able to reuse this script for any other videos on your site", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_025-242x169.jpg", "JavaScript, Video"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (321, "Loading animation with HTML and CSS", "In this episode we ll create an loading animation using only HTML and CSS There are a few different terms that refer to these types of animations including throbbers spinners or AJAX loaders So no matter what you call them we re going to create one that is easily resizable and doesn t use any graphics We ll start with a figure element and we ll add eight div elements inside that then style and animate those divs to create the animation", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_024-242x169.jpg", "CSS Animation, CSS Position, Figure, HTML"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (319, "Fullscreen background video", "Adding a fullscreen background video to a web page can be very powerful and engaging for a user We ll show you how to set some CSS properties to position the video write some JavaScript to detect the video s current time then detect the dimension of the browser window Using this technique we can fill the user s window with the video or remove the video for devices that don t support this feature", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_023-242x169.jpg", "CSS, HTML, JavaScript"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (317, "Creating Customizable Graphics with CSS", "In this episode we ll be combining CSS and images in order to customize a graphic for our content We ll be positioning and styling variations of a map graphic in order to highlight different cities around the world The advantage of this approach is that we can easily update the graphic to create any number of variations and allows us to keep a consistent style for future content", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_022-242x169.jpg", "CSS, HTML, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (315, "Interactive inline photo gallery", "We ll show you how to create an interactive inline photo gallery using only images and some HTML and CSS This is a great project for adding interactive content to a web page without needing to use a framework or write custom JavaScript We ll actually be using radio buttons and the adjacent sibling selector in CSS to make it all work", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_021-242x169.jpg", "CSS, CSS Media Queries, HTML, Interactive, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (313, "Animating a sprite sheet with JavaScript", "You can create an animation in a web page using a sprite sheet graphic and JavaScript A sprite sheet is a single graphic that contains multiple images or frames of an animation Using JavaScript we can quickly change the position of the sprite sheet to create the illusion of motion In an earlier episode we animated this same sprite sheet using CSS instead of JavaScript", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_020-242x169.jpg", "CSS Background Image, JavaScript, JS Animation, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (311, "Animating a sprite sheet with CSS", "ou can create an animation in a web page using a sprite sheet graphic and CSS A sprite sheet is a single graphic that contains multiple images or frames of an animation Using CSS we can mask and quickly change the position of the sprite sheet to create the illusion of motion In a later episode we ll animate this same sprite sheet using JavaScript instead of CSS", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_019-242x169.jpg", "CSS Animation, CSS Background Image, HTML, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (309, "Read JPG metadata with PHP", "We ll be showing how you can use PHP to extract metadata from images and display that content within a web page Image files can actually contain quite a bit of metadata Instead of duplicating this content in your HTML file we ll extract this information directly from the image files which will save yourself a lot of time", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_018-242x169.jpg", "PHP, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (307, "Customize your thumbnails in WordPress", "Did you know you can customize thumbnail images in WordPress Thumbnail images are great for promoting posts and of course navigating a photo gallery however you don t have the keep the default thumbnail that WordPress generates when you upload an image So let s take a look at how to customize your thumbnails in WordPress", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_017-242x169.jpg", "Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (305, "Get SVG from Photoshop", "You can export SVG artwork from directly from Photoshop However there are two ways to specify SVG as the export type We ll need to make sure the artwork is created using Shape Layers in Photoshop otherwise we ll get a base64 encoded bitmap image instead of a vector file Why does this matter While vector files scale nicely bitmap files do not so let s get it right", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_016-242x169.jpg", "SVG, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (303, "Randomized animation with JavaScript", "We ll show you how to create a randomized animation using layered images and a small amount of JavaScript With a little imagination you can apply this effect to any numbers of photos or illustrations such as candles lights or make stars twinkle in the nighttime sky The random aspect will keep people s attention longer than an animation with a visible repeating pattern It s look more real and can be spectacular", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_015-242x169.jpg", "JavaScript, JS Animation, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (301, "The audio element", "Adding sound to your web page is a snap with the HTML Audio element Introduced with HTML5 this element allows you to add audio to a an HTML file without the need for browser plug ins This will work with all modern browsers regardless of the specific device We ll take a look at specifying multiple audio formats as well as adding controls and autoplay attributes so you can style the user experience Ready set listen", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_014-242x169.jpg", "Audio"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (299, "Looping a CSS animation", "Learn to create a looping animation using only CSS We ll start from a layout featuring a boat image in between two tiling graphics that we created in a previous episode Using the keyframes and animation features of CSS we ll bring this scene to life The best part Even with the animation the entire scene remains responsive", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_013-242x169.jpg", "CSS Animation, CSS Background Image"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (297, "Create a tiling SVG with Sketch", "In this episode we ll be using Sketch to create the SVG artwork that will seamlessly tile horizontally in our webpage Once we ve created our SVG files we ll add references to them in the CSS file This will allow us to create a design that will fill the width of the browser In the design example we ll also show you how to put art in front and back of items so you can layer graphics to create interesting layouts", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_012-242x169.jpg", "CSS Background Image, SVG, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (295, "Create a tiling SVG with Illustrator", "In this episode we ll be using Illustrator to create the SVG artwork that will seamlessly tile horizontally Once we ve created our SVG files we ll add references to them in the CSS file This will allow us to create a design that will fill the width of the browser In the design example we ll also show you how to put art in front and back of items so you can layer graphics to create interesting layouts", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_011-242x169.jpg", "CSS Background Image, SVG, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (293, "Responsive iFrames", "The title says it all We ll use HTML and CSS to create an iFrame that will continually resize in proportion within your web page Why do we need to use HTML and CSS Well unlike some media elements iFrames have no inherit sizes The browser relies on the measurements specified in HTML or CSS So with some quick math we can determine the ratio put in the measurements and ta da The iFrame now dynamically resizes", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_010-242x169.jpg", "CSS, iFrames"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (291, "Keeping it in proportion", "Knowing how to quickly calculate proportional sizes for your media is key This is something we need to do everyday especially when creating responsive web designs However you ll find you can use this technique when working in any medium For demo purposes we will start with using embed code we ll get from YouTube and then calculate the various sizes we need for our responsive web page", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_009-242x169.jpg", "CSS, iFrames"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (289, "Web graphics from InDesign", "What Using InDesign to generate web graphics YES Hidden away in the HTML export are options for images If we combine this feature with Object Styles InDesign becomes a pretty powerful graphic production tool It can export multiple formats and images with effects including transparency Who knew", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_008-242x169.jpg", "Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (287, "Generate assets from Photoshop in no time", "Many of us are in Photoshop every day and it is an integral part of our production workflow Want a easy way to get those assets created quickly Adobe Generator inside of Photoshop can automatically create web assets based on how we name a layer You can generate specific file types modify compression settings and generating multiple images from a single renamed layer Easy peasy", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_007-242x169.jpg", "Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (285, "Combining images with HTML canvas", "Did you know that you can load and combine separate images into a single Canvas element This technique using transparent PNG images can provide a great deal of flexibility and customization options for images on your web page And when combined with CSS our newly composited image can be dynamically scaled to fit within a responsive web design Pretty cool", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_006-242x169.jpg", "Canvas, JavaScript, Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (283, "Add a Twitter Feed", "Adding a Twitter feed to your site is quick and easy We ll spent just a few minutes loading media from Twitter directly into your web page using the Twitter API Then we ll do some simple styling so you can see just how easy it is So if you ve got five minutes you can add a Twitter feed to your site", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_005-242x169.jpg", "HTML, iFrames, Twitter"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (281, "High Definition Graphics with Sketch", "We typically measure web and application elements using software pixels however devices use hardware pixels to represent those elements And the higher the device s pixel ratio the more hardware pixels they use per software pixel We ll use Sketch to define the software pixel size of our image as well as define the various device pixel settings when we export the final web graphic", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_004-242x169.jpg", "Web Graphics"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (279, "Control colors in SVG with CSS", "Take control of colors in an SVG file In an SVG file each path and shape is a separate element so if you wanted to change the color of these elements you d need to modify each element individually To save time and make your life easier you can leverage CSS to re color all of those elements from one spot", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_003-242x169.jpg", "CSS, Groups, SVG"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (277, "The Video Element", "Add a video to your HTML file with ease The HTML Video element allows you to add video to your file without the need for browser plug ins and this will work with all modern browsers regardless of the specific device Learn how to specify video file formats add controls and poster frames size the video with CSS and more", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_002-242x169.jpg", "CSS Media Queries, Video"); INSERT INTO `videos` (id, title, description, thumbnail, topics) VALUES (274, "SVG Symbols with Illustrator", "Want to have a more efficient graphic We ll take a look at creating symbols in an SVG using Adobe Illustrator The best part is Illustrator will write all the SVG code for us It makes your final graphic smaller more efficient and allows you to quickly update the symbol art either back in Illustrator or by simply modifying the code within the SVG file", "https://codifydesign.com/cms/wp-content/uploads/2018/01/Creating_Web_Media_Episode_001-242x169.jpg", "Symbols");