#idm18

[doulabrittany]

Have you seen the infographic talking about all of the benefits of birth and postpartum doulas? Make it your mission today to share this with someone who may not have seen it. You can find a link to the PDF in the bio. #DONAProud #IDM18 #doulalife #doula #postpartum #birth #doulatrainer #doulatraining

[piotrekperezdesigner]

IDESIGN MADRID 2018

¡En 2018 vuelve #IDesignMadrid, la cita anual del Diseño Industrial de la capital!

IDesignMadrid (IDM) es una marca propia de AIDI, nacida para celebrar en Madrid el Día Internacional del Diseño Industrial (29 de junio, establecido por la World Design Organization) con una serie de actividades, eventos y acciones que sirvan como fecha de referencia anual para la comunidad de diseñadores industriales. 

IDesignMadrid 2018 se consolida como la cita anual del Diseño Industrial en Madrid, con un evento de tres días en la Central de Diseño de Matadero Madrid y la colaboración del Ayuntamiento. Las primeras entradas saldrán a la venta la semana del 7 de mayo, las cuales tendrán un descuento para socios de AIDI y de di_mad.

Tras el éxito de la primera edición y, como consecuencia del período de crecimiento que AIDI ha experimentado en el último año, la próxima edición de IDesignMadrid se ha diseñado y planteado desde cero, contando con los nuevos públicos, colaboradores y recursos de la asociación.

Por ello, IDesignMadrid 2018 es presentada como un evento de eventos, donde AIDI celebrará nuevas ediciones de algunos de sus formatos más emblemáticos, pero también habrá oportunidad para descubrir otros nuevos. Algunos de estos eventos estarán más enfocados a la comunidad específica de diseñadores industriales y otros tendrán un carácter más transversal; de la misma manera, combinaremos actividades que cubran tanto el espectro más profesional como el más educacional.

Todo ello para crear un evento original, que se consolide como la cita anual del Diseño Industrial en Madrid, porque cubre las demandas de la comunidad.

Al fin y al cabo, ¿quiénes mejores que diseñadores industriales para organizarlo?

IDesignMadrid se celebrará los días jueves 28, viernes 29 y sábado 30 de junio. El horario general estará definido por los horarios particulares de cada actividad, que se harán públicos durante el mes de mayo.

El espacio será ni más ni menos que de la Central de Diseño de Matadero Madrid, gracias a la colaboración durante el evento entre AIDI y di_mad, la Asociación de Diseñadores de Madrid. Además, desde el inicio, el evento ha sido apoyado y respaldado por el Ayuntamiento de Madrid.

+info: https://www.idesignmadrid.es

[sarahdoesdigital]

Handy little website for all things Responsive.

[sarahdoesdigital]

Accessibility from a dev perspective

There are over 11 million people i the UK with limiting long-term illness, impairment of disability.

Examples include:

Visual impairments

Motor impairments

Auditory impairments

Seizures

Cognitive, such as learning disabilities

Key resources:

http://www.w3.org/standards/webdesign/accessibility http://www.w3.org/TR/WCAG20/ - key guidelines to be followed

[sarahdoesdigital]

Web usability from a coding perspective

Traditionally, usability research was focused more on business productivity ie systems people had to use. This is very different now as there are so many options and user can select more usable software or use a ‘better’ website and navigate away. Handy references: http://www.usability.gov/ http://www.usabilityfirst.com/ http://www.nngroup.com/ https://developers.google.com/web/fundamentals/?hl=en

[sarahdoesdigital]

Forms

Form communicates with the sever in three main ways. id action Input elements allow the users to enter data into forms

id - unique id target type - type of data / control name - name of the data arriving at the server There are numerous input elements: http://html5doctor.com/html5-forms-input-types/

Example: You can use <input id= “txtEmail” name=“email type=“email” /> which will check for an @ symbol or date-based types which allow a date picker.

Comment items

Input elements usually have a <label>.

Use a <fieldset> to group input elements (these are self closing)

Use <textarea> for multi-line text input area.

Use <input type=file> for uploading files

<checkbock> (select multiple)  vs <radio> (select one)

3 main types of buttons

button - no default behavior, typically bound the Javascript

submit - submits form

rests - resets the form to it’s original state

New HTML5 input types

color = producers a colour picker

number = producer a spinner control; can set to min / max vaykes

range = produces a slider

When using forms with a server...

GET and POST are the most common responses -

GET is mainly used for no secure items like search, or online shopping for shorter simple data any one can see

Or you can use ? to set parameters

POST is used for my secure items like account details and more complex data types.

Ajax handles the forms by not refreshing the page. But this means there is more coding work to assign each value and use event listeners. This also avoild and accidental  re-submissions.

[sarahdoesdigital]

An introduction to JavaScript

It’s a lightweight scripting language, which is procedural - so you tell the browser what you want it to do. Every browser carries a JavaScript interpreter so carry out this actions. It is designed to add interactivity to pages. It is used by a lot of websites, some are even full JavaScript eg Google Docs. JavaScript can be embedded directly into your HTML pages, but it is usually stored in a different file and linked to. You do this be using source attributes. Common uses:

Communicate with the server eg upload form values via AJAX such as forms. So this loads content from the server without refreshing the page.

Modify the document object model (DOM) eg added new content to current pages eg a form that checks your details.

Use APIs for additional functionality so this could be adding anything from an image slider; Google maps; feeds (WEB API). Or, using graphics, that change with browser eg Adobe Kular, where the JavaScript can access the browser (BROWSER API).

How JavaScript is made up

Statements A programme written in JavaScript consists of a set of instructions called ‘statements’

Comments Comments can also be used to annotate the code to make it easier to understand for other and yourself - these are ignored by the JavaScript interpreter like CSS comments.

Variables  Variables can store values, and they can be changed at any time. They should always be declared at the beginning if your code. NB variables cannot contain spaces and must include punctuation. Assignments Putting a value into variable is called an assignment eg = red, these can be declared and initialized together. Unlike many other languages , JavaScript is weakly typed.

Strings Strings are enclosed in double “ “ or single quotes ‘ ‘. A backslash character is used to escape control characters. Strings have useful properties and methods. Examples would be an email address in a form - so the strong checks for the @ symbol, if it comes back no = 0 Arrays Arrays are list-like objects where data is accessed by an index. Array elements can be read and set using an integer index. For these you use square brackets [ ]. Array can hold anything, and you can mix it up. This is used for grouping values eg blog posts; newsfeeds. 

Console - this is part of your developer tools in the browser. Variables exist as:

Global variables - declared outside of ant function and avaible anywhere in the code

Local variables - declared within a function and available only within the body of the function. JavaScript Operators http://www.w3schools.com/js/js_operators.asp

[sarahdoesdigital]

Responsive Web Design - CSS

Until recently web pages were treated like print, with replicating Photoshop designs. Fixed width pages as diapering but they can still be found... Last year, mobiles overtook desktop in terms of accessing the internet. You can utilise Google’s mobile-friendly checkers to check your code or get some pointers. Mobile versus Responsive debate was prevalent a few years ago. The key problem with mobile is the screen size optimisation.

Catering for different device sizes:

WAP - ran on early featured phones

Dedicated mobile / desktop sites m.example.com

Responsive Web design

To quote Ethan Marcotte: “Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.”

Techniques for responding include: resizing things; changing layout; show / hide stuff Design can work bottom up, with mobile first but adding features. Going mobile first also forces you to focus on the key elements on the page, rather than adding garnish. Graceful degradation

Design the full desktop site first

Successively takeaway features and change layout to cope with smaller screens and less capacble devices

Progressive enhancement

Design the basic functionality first

Successively add features and change layout to make use of larger screens and more device capabilities

Viewports (browser window) In the first instance a browser tries to show you the full scale of the website.  You can adjust this via the viewport meta name. Core techniques for responsive website design:

Fluid Layouts - for this you use em as units of measurements; fluid layouts specific the size of page elements in relative CSS units Pages content adjusts to the viewport, whatever its size> There are limitations though as you need content to re-order as scaling is not enough.

CSS media queries - set information for breakpoints and then specify the CSS for that screen size. This is used to target different devices or buckets. It looks for consistent media types and adds an expression that check for the particular, featured such as width, orientation etc... Each media query evaluated to true / false

Responsive media -

Key CSS media queries

- viewport widthand height (width=) - screen width and height (device-width=) - screen orientation (landscape portrait) - aspect ratio

Media queries means that you divide all of the screen sizes into device classes or buckets. Breakpoints are adjusted for the different sizes. So a combination of this and fluid layout makes of the best results.

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

@mediavengers screen ‘and’ you can use other wording such as and; not; only; or doesn’t exist but can be specified as a comma. Only is often used to hide media queries from older browsers.

Frameworks

Many developers don’t build from scratch. Exmaples include

Bootstrap

Skeleton

Foundation

Responsee

Whilst these can save time, they include a lot of code that isn’t needed for your website. They can often be difficult to extend or modify and witht he grid selectors mean they can be less effective for SEO. It also means less creativity for the design, sites can get that Bootstrap look. http://www.designyourway.net/blog/inspiration/the-case-against-using-bootstrap-to-design-websites/