Bilder einbinden ist kein Thema, oder?

This document discusses jQuery UI and plugins. It provides an overview of jQuery UI classes that can be used to style elements. It also demonstrates several common jQuery UI widgets like buttons, accordions, dialogs, and tabs. The document discusses jQuery UI effects for animations and transitions. It provides tips for identifying good plugins based on aspects like their API, documentation, support, and community. Overall, the document is an introduction to using jQuery UI and evaluating jQuery plugins.

Presenting capabilities that develop since WordPress 3.4 of the theme customization screen. In addition to the standard features, there will be also presented more unique functions available, including the use of the changes introduced in the newest WordPress versions. The main aim of the lecture is to convince theme developers that the theme customization screen may completely replace additional subpages of the dashboard with theme options.

Marc Grabanski gave a whirlwind tour of Scalable Vector Graphics (SVG), covering the basics of SVG including elements, embedding SVG, features like DOM structure and filters, demos of transformations and animation, and tools like RaphaelJS. The presentation provided an overview of SVG and highlighted its advantages like scalability, accessibility, and use of HTML and CSS. Examples of various SVG elements, embedding methods, and features like filters and transformations were demonstrated.

Zoe Mickley Gillenwater gave a talk at Generate Conference in London where she shared several mistakes she made while learning CSS flexbox and other techniques. These included misunderstanding how flex-basis works, incorrectly using CSS transforms like rotateX, and making assumptions about screen reader support that caused accessibility issues. She emphasized that vulnerability and sharing mistakes openly can help both oneself and others learn. Making mistakes is a natural part of the learning process, and perfection should not be expected or feared.

The document provides an overview of HTML5 including: - New tags such as article, aside, audio, canvas, and video - The structure of an HTML5 page including the doctype, meta charset, and link types - Forms with new input types and validation attributes - Playing audio and video with HTML5 tags and controlling them with JavaScript - Drawing graphics on a canvas using JavaScript - Web workers for running scripts in background threads - Options for data storage including web storage, web SQL, and IndexedDB

Are you sure your app is secure enough? Do you want to scale your app to the next level? Come and join us for the Bandung JS Meetup #11. Save the date! Tuesday, March 27th 2018 Location : Bandung Creative Hub (Aula lt 5) Jl Laswi No 7, Kacapiring- Bandung We will have presentations by: 1. Galih Pratama - Head Front-end, Crowde.co on "Scalable Web Development by Vue.js" 2. Yahya Fadhlulloh - CTO, Crowde.co on "JS flaw Hackers Love to Abuse"

jQuery is an open source JavaScript library that simplifies HTML and JavaScript interaction by providing methods for selecting elements, handling events, performing animations and AJAX calls. It has a large community of users and developers, numerous plugins that extend its functionality, and is used by many large companies and websites. Major releases of jQuery have continued to improve performance, add new features, and expand cross-browser compatibility.

Flash over the years, has been used to prop up the regular browser like a sad old man drinking alone in a pub. Today browsers come shipped with technology designed to rival flash and aim to shut it squarely out of the game. Are browser ready to rock without Flash?

It's been 6 years since the term Responsive Web Design (RWD) was coined and today is difficult to see new projects without implementing it. But this time has allowed us to see the implementation can be even more important than the technique and the theory. The RWD covers from the performance to the implementation of patterns and "standard" behaviors to improve usability. In this session reviewed tools, techniques and concepts to improve our projects: - Performance and best practices - CSS structuring and optization (BEM, SMACSS, etc.) - Fixed-Pixel vs rem, em and % - Responsive images. Drupal non-Drupal solutions and SVGs - Asynchronous Javascript loading - Typography in a responsive environment and FOUT, FOIT effects - How proxy-based browsers like Opera Mini can affect, and how accessibility and Progressive Enhancement can help. - Beyond the Mouse: Touch and keyboard events - Using RWD patterns

This document provides instructions and examples for installing, configuring, and using Composer to manage WordPress and other PHP projects. It covers downloading and installing Composer, installing packages and dependencies, updating packages, using Composer scripts, setting up a WordPress project structure with Composer, and additional tips and strategies for version control and deployment.

The document is a presentation about HTML5. It discusses what HTML5 is, some of the new elements it introduces like canvas, video, audio, and geolocation. It also covers new features like CSS3 media queries, web fonts using WOFF, and whether HTML5 is ready for use. The presentation encourages trying out HTML5 and provides some resources for learning more.

Here are some of the stuff I learnt while making it, and if you are working on responsive design, you should probably keep this as reference. Note: You are free to download, edit, distribute and use this work in any way you want.

Resource Hints are a great way for developers to make their web pages faster by allowing us to be a little bit smarter than the browser. Although not a new specification—they’ve been around in some form or another for years!—are we truly getting the most out of them? And do we understand them thoroughly enough to use them most effectively? Heck, do we even know what a ‘Resource Hint’ is?! Well, by the end of this talk, we’ll all be experts. Let’s take a look at all of the different Resource Hints we have available to us, real-world examples of how best to use them, and learn about some of the more obscure intricacies and gotchas that we need to be aware of if we want to really get the best out of them (and to make sure that we really are being smarter than the browser).

The document describes how to create a jQuery image gallery in a Java web project using NetBeans. It includes code for a JSP page that displays thumbnail images in a scrolling container. When a thumbnail is clicked, it loads and scales the full size image. Keyboard arrows and next/previous buttons can also be used to navigate between images. Styles are applied for layout, effects and interactions.

Responsive web design challenges web designers to apply a new mindset to their design processes, as well as to techniques they are using in design and coding. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

What strategies can you take to bring a web application to a mobile device? Six steps from pure HTML/CSS all the way to almost native applications.

This document provides an overview of HTML5 and CSS3 features including new semantic HTML5 elements, multimedia capabilities like video and canvas, geolocation, and CSS3 properties for styling like borders, backgrounds, shadows, fonts, transitions and transforms. It includes code examples and screenshots to illustrate these new capabilities.

This document summarizes techniques for improving web performance, including: - Using output caching, compression, browser caching and CDNs to reduce page size and load times - Optimizing images, CSS, JavaScript and databases for faster loading - Leveraging caching, minification, concatenation and deferred parsing to improve front-end performance - Implementing techniques like service workers, resource hints and responsive delivery to optimize the user experience

This document summarizes a presentation on the benefits and proper usage of SSL/TLS. It discusses how SSL/TLS can provide encryption and identity verification for web traffic. It provides examples of how to configure SSL/TLS on web servers and applications to securely transmit sensitive data. It also addresses challenges like supporting older clients and improving performance. Proper SSL/TLS configuration helps secure user privacy and website integrity.

The document discusses various techniques for optimizing web performance, including: - Minifying assets like CSS, JavaScript, and images to reduce file sizes - Leveraging caching, compression, and browser parallelization to speed up page loads - Implementing responsive design patterns and techniques like image sprites and media queries - Optimizing assets further with techniques like image optimization, lazy loading, and prefetching

This document discusses responsive video formats and codecs for HTML5 video, including MP4, WebM, and Ogg Theora. It provides code examples for using media queries to serve different video sources based on screen width. Formats like H.264, VP8 and Vorbis are supported. Tools like FFmpeg can be used to optimize MP4 files and techniques like Apple HLS and MPEG-DASH enable adaptive streaming. Emerging codecs like ORBX.js, HEVC, VP9 and WebRTC are also mentioned.

This document provides instructions and examples for properly configuring and using .htaccess files. It discusses Apache and PHP configuration as well as settings for performance, security, redirects, and more. Sections cover topics like error documents, rewriting URLs, compression, caching, and protecting files. The goal is to help optimize a WordPress site using the .htaccess file.

Vortrag für die Frontend Usergroup RheinMain

The document discusses Content Security Policy (CSP), which helps protect websites from XSS attacks. It provides the syntax for enabling CSP in Apache and PHP applications. It also describes how to configure CSP to report violations via HTTP POST requests to a logging endpoint. Examples are given of CSP violation reports sent by Chrome and Firefox.

The document discusses making websites secure by default through HTTPS. It covers the required technology and best practices for configuring HTTPS, migrating sites to HTTPS to make them more secure and user-friendly, and improving performance. Implementing HTTPS properly can help protect user privacy and data security.

Vortrag beim WordCamp Berlin am 14. November 2015

Vortrag beim WordPress Meetup Frankfurt am 8.11.2016

Vortrag zum WP Meetup Frankfurt am 14.04.2105 http://wpmeetup-frankfurt.de/2015/wordpress-performance/

This document discusses various techniques for optimizing images and other media on websites. It covers file formats like JPEG, PNG and SVG as well as tools for optimizing images. It also discusses responsive images, video optimization, icon fonts and animated GIF alternatives. HTTP/2 optimizations are mentioned at the end.

The document discusses responsive images and issues around their implementation. It begins by outlining the new <picture> element and srcset/sizes attributes that allow images to adapt based on screen size and resolution. It then discusses challenges like managing many images, the need for image breakpoints to determine appropriate file sizes, and the tension between responsive images and the browser's lookahead parser. Overall, the document examines both the promise and difficulties of responsive images on the modern web.

Practical Responsive Images. &lt; picture > element, srcset attribute, picturefill, angular js. Responsive Web Design needs Responsive Images Presentation from Second Wednesday, Nottingham (Oct 2014)

The document discusses the status of emerging web technologies, including Web Components, Responsive Images, Service Workers, and JSON form data. It highlights several cool existing technologies like WebSockets and WebGL. It also outlines new and promising technologies under development like Web Components templates, custom elements, and shadow DOM. The document encourages supporting these technologies through community involvement, testing, and documentation to help the web platform progress.

Praktik sederhana pengembangan konten E-Learning yang menggunakan HTML5 sebagai dasar pengembangannya. Pada akhir pengembangan dilakukan penyesuaian konten untuk memenuhi standar SCORM sehingga hasil akhir kontennya adalah sebuah konten yang mendukung standar SCORM dan siap dikonsumsi oleh LMS. Library yang digunakan adalah CreateJS.

Сколько весит ваша главная страница? Главная TJournal — 5,5 МБ, а VC.ru — 7,9 МБ. 80% этого трафика — изображения, которые загружаются и на смартфоны с маленьким экраном и мобильным интернетом. Изображения сжирают деньги и время ваших пользователей, а вы теряете их самих. Как сделать изображения, чтоб�� они экономили трафик, быстро загружались и подстраивались под экраны? Нет, указать ширину в 100% для &lt;img> недостаточно. Доклад на PiterCSS №5

(slides from the O'Reilly webcast, see recording here: http://www.oreilly.com/pub/e/3425) The web is becoming increasingly image rich. Between high-resolution mobile screens, Pinterest-style design and big background graphics, the average image payload has more than doubled in the last three years. While visually appealing, these images carry a substantial performance cost, and — if not optimized correctly — can make a web experience slow and painful, no matter how beautiful it is. These slides discuss how you can provide the eye-pleasing experience you want without sacrificing your site's performance. You'll learn about the three primary aspects of image optimization: Image Compression: How to best encode your images, delivering the same picture with the fewest bytes. Image Loading: Once your files are as small as they can be, we'll cover the best ways to make them show up quickly in the browser. Image Operations: Different tools and techniques for integrating image optimization on your site.

This document provides instructions for using jQuery effects in a web page. It includes examples of how to hide and show an element, toggle visibility, add fading and animated effects, and use jQuery events. Functions are demonstrated for fading images in a slideshow. Students are assigned homework to create a basic jQuery page with fading and growing image effects, and are notified that Flash topics will be covered next week.

The document discusses techniques for making SVG graphics responsive. It describes using media queries directly in SVG code to serve different background images based on viewport width. It also covers embedding SVG using inline, <img>, and <object> tags and their tradeoffs. The "Clown Car Technique" embeds the SVG as an <object> and uses media queries inside the SVG to switch background images. The "Poor Man's Method" defines all icon variants inside the SVG and shows/hides them with media queries. The "Man With A Gun's Method" uses transforms to adapt a single SVG to different sizes. JavaScript can also be added to SVG to make it more dynamic and responsive.

The document discusses level of detail techniques for efficiently loading high-resolution images, such as for mapping and technical illustrations. It proposes using media queries and viewport properties to determine the needed image resources based on the scale and visible area, and load them lazily through tile-based SVGs. Sample code is provided to demonstrate loading a tiled image at different scales via <picture> elements and loading individual tiles lazily via "load-policy=when-needed". The W3C is exploring integrating these level of detail techniques into existing specifications.

Slides from Morten Rand-Hendriksen's presentation at JavaScript Open in Vancouver, June 25th, 2015. Responsive Images are one of the missing pieces in the puzzle that makes up our new responsive web. Using the new RICG spec for srcset, sizes, and the picutre element, web designers and developers can instruct the browser to serve the visitor with the best possible image for their screen resolution and size, all the while saving bandwidth and processing power. Learn how the new spec and markup works, how and when to use srcset, sizes, and the picture element, and how to implement Responsive Images in your live production sites today. http://jsopen.lighthouselabs.ca/