Category Archives: css3

css3, html5, JS

Menu Focus – scorrere una lista dinamica di item

Punto 1: ricordarsi di mettere jQuery e non $, che nel php si spacca tutto.
poi: contare quanti LI nell' UL che interessa.
Quindi: freccia dx, fa scomparire i primi, freccia a sn, fa apparire i primi.

/*questo fa scorrere i focus */
jQuery(document).ready(function(){
var i=0;
var quantiLi = 10;
jQuery(“.focus li”).each(function (i) {
i = i+1;
jQuery(this).addClass(“focus”+i);
});
// quantiLi = jQuery(“.menu.nav.focus li”);
console.log( quantiLi );
var n = 1
jQuery(“span.asn”).click(function() {
// console.log( “ready!focus” ); il primo sparisce
jQuery(“.menu.nav.focus > li:nth-child(“+ n +”)”).addClass(“hide”);
n=n+1;
});
jQuery(“span.adx”).click(function() {
//console.log( “ready!focus” );
jQuery(“.menu.nav.focus > li:nth-child(“+ n +”)”).removeClass(“hide”);
n=n-1;
});
});
MIGLIORIA dinamica:

/*questo fa scorrere i focus */
jQuery(document).ready(function(){
var i=0;
jQuery(“.focus li”).each(function (i) {
i = i+1;
jQuery(this).addClass(“focus”+i);
});
jQuery( “.focus li” ).last().addClass( “ultimo” );
var listItem = jQuery( “.ultimo” );
var quantiLi = listItem.index( “.focus li” )-3;/*dinamico!!*/
console.log( quantiLi );
var n = 1
jQuery(“span.asn”).click(function() {
// console.log( “ready!focus” ); il primo sparisce
if(n <= quantiLi){ jQuery(“.menu.nav.focus > li:nth-child(“+ n +”)”).addClass(“hide”);
n=n+1;
}
else{
n = quantiLi;
}
});
jQuery(“span.adx”).click(function() {
//console.log( “ready!focus” );
if(n >= 0){
jQuery(“.menu.nav.focus > li:nth-child(“+ n +”)”).removeClass(“hide”);
n=n-1;
}
else{
n=1;
}
});
});

css3, data jornalism, didattica, e-learning, html5, infografiche, JS, SoftwareLibero

Fantastici! Knight lab

http://knightfoundation.org/press-room/press-release/new-html5-website-helps-organizations-navigate-int/
mettono a disposizione tantissimi strumenti in FREESOFTWARE per la didattica,
niente specchietti per le allodole gratuiti e poi features a pagamento!
TUTTO gratis, anzi LIBERO!
TIMELINE:  http://timeline.knightlab.com/
STORYMAP: http://storymap.knightlab.com/
SLIDER: http://juxtapose.knightlab.com/
SOUND-INLINE in Text: http://soundcite.knightlab.com/
 
 

accessibilità, css3, html5

ARIA

http://www.w3.org/TR/wai-aria/complete
da stampare! sono 94 pagine 🙁
 
Per l’accessibilità delle applicazioni web, nuova normativa passata a raccomandazione.
 

Abstract
Status of This Document 1. Introduction
1.1. Rich Internet Application Accessibility
1.2. Target Audience
1.3. User Agent Support
1.4. Co-Evolution of WAI-ARIA and Host Languages 1.5. Authoring Practices
1.5.1. Authoring Tools
1.5.2. Testing Practices and Tools 1.6. Assistive Technologies
2. Using WAI-ARIA
2.1. WAI-ARIA Roles
2.2. WAI-ARIA States and Properties
2.3. Managing Focus
3. Normative Requirements for WAI-ARIA 4. Important Terms
5. The Roles Model
5.1. Relationships Between Concepts 5.1.1. Superclass Role
5.1.2. Subclass Roles
5.1.3. Related Concepts
5.1.4. Base Concept 5.2. Characteristics of Roles
5.2.1. Abstract Roles
5.2.2. Required States and Properties 5.2.3. Supported States and Properties 5.2.4. Inherited States and Properties 5.2.5. Required Owned Elements 5.2.6. Required Context Role
5.2.7. Accessible Name Calculation 5.2.8. Presentational Children
5.2.9. Implicit Value for Role
5.3. Categorization of Roles 5.3.1. Abstract Roles
5.3.2. Widget Roles
5.3.3. Document Structure 5.3.4. Landmark Roles
5.4. Definition of Roles
6. Supported States and Properties
6.1. Clarification of States versus Properties 6.2. Characteristics of States and Properties
6.2.1. Related Concepts 6.2.2. Used in Roles 6.2.3. Inherits into Roles 6.2.4. Value
6.3. Values for States and Properties
6.4. Global States and Properties
6.5. Taxonomy of WAI-ARIA States and Properties
6.5.1. Widget Attributes
6.5.2. Live Region Attributes 6.5.3. Drag-and-Drop Attributes 6.5.4. Relationship Attributes
6.6. Definitions of States and Properties (all aria-* attributes) 7. Implementation in Host Languages
7.1. Role Attribute
7.2. State and Property Attributes
7.3. Focus Navigation
7.4. Implicit WAI-ARIA Semantics
7.5. Conflicts with Host Language Semantics 7.6. State and Property Attribute Processing
8. Conformance
8.1. Non-interference with the Host Language
8.2. All WAI-ARIA in DOM
8.3. Assistive Technology Notifications Communicated to Web Applications 8.4. Conformance Checkers
9. References
9.1. Normative References 9.2. Informative References
10. Appendices
10.1. Schemata
10.1.1. Roles Implementation
10.1.2. WAI-ARIA Attributes Module
10.1.3. XHTML plus WAI-ARIA DTD
10.1.4. SGML Open Catalog Entry for XHTML+ARIA 10.1.5. WAI-ARIA Attributes XML Schema Module 10.1.6. HTML 4.01 plus WAI-ARIA DTD
2 di 94 03/12/14 12:10
Accessible Rich Internet Applications (WAI-ARIA) 1.0 http://www.w3.org/TR/wai-aria/complete
10.2. Mapping WAI-ARIA Value types to languages
10.3. WAI-ARIA Role, State, and Property Quick Reference 10.4. Acknowledgments
10.4.1. Participants active in the PFWG at the time of publication
10.4.2. Other ARIA contributors, commenters, and previously active PFWG participants 10.4.3. Enabling funders

 

css3, infografiche

"helvetica neue extended" webfont

Pensa, non avrei mai immaginato di trovare così tanti problemi:
Anche solo ad usarlo come font family normale, hai problemi di interpretazione dai vari browser, quindi si consiglia di chiamarlo così:

Better Helvetica


Sicuro il vostro grafico ce l’ha in fft, ma se provi a convertirlo per il web da font squirrel ti dice
NOOOOO è DI PROPRIETà DELL’ADOBE!
fine trasmissioni.
Trovare un web font FREE simile non pare difficile.
Simil helvetica neue: http://desktoppub.about.com/od/classicfonts/f/How-Many-Helvetica-Names-and-Versions.htm
http://next.fontshop.com/people/stephen-coles/fontlists/helvetica-alternatives
PERò POi font-stretch non si può usare!! haihaihaihai!!! >> http://caniuse.com/#search=font-stretch
Quindi pare perseguibile solo:
http://www.fonts.com/web-fonts
Ma c’è un primo account gratis con limitazioni , ti obbliga a mettere il loro marchio pubblicitario in fondo al sito, poi sopra le 25.000 visualizzazioni al giorno ti tocca pagare.
Non credo che ci capiterà, quindi potremmo sottoscrivere il loro contratto e usarlo tramite il loro servizio.
 

css3, jquery UI, JS

::after & ::before come handler per jquery

ahahah, ho scoperchiato il vaso di pandora!
Infatti è molto bello e comodo aggiungere pseudo elementi (ecco perchè hanno i doppi puntini) prima e dopo i vostri contenitori,
ma poi vi viene la balzana idea di usarli per azionare movimenti nella pagina web e tad tam!! scopri che nn sono nel DOM!!
 
e quindi!??!
Qui c’è una discussione : http://stackoverflow.com/questions/8095177/jquery-using-after-selector
Io invece mi sono accorta che posso risolvere il mio problema (fa muovere una lista/menu orizzontalmente) senza essere così elegante 😛
 
Qui invece quello che sto smontanto:
html:
<div id=""#focus"><ul><li>item del menu 1</li><li>item del menu 2</li><li>item del menu 3</li></ul> <div>
CSS:

#focus::before {background: none repeat scroll 0 0 grey;color: #f56f20;content: "<";float: left;font-size: 5em;height: 1.08em;padding: 1.15em 0.1em;width: 20px;cursor:pointer;}
#focus::after {color: #f56f20;content: ">";float: right;font-size: 5em;margin-top: -2.5em;padding: 0.25em;width: 20px;cursor:pointer;}
Per i glifi questo può aiutarvi:
http://unicode-table.com/en/

css3

Utilissimi Selettori

.class .intro Selects all elements with class=”intro” 1
#id #firstname Selects the element with id=”firstname” 1
* * Selects all elements 2
element p Selects all <p> elements 1
element,element div, p Selects all <div> elements and all <p> elements 1
element element div p Selects all <p> elements inside <div> elements 1
element>element div > p Selects all <p> elements where the parent is a <div> element 2
element+element div + p Selects all <p> elements that are placed immediately after <div> elements 2
element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element 3
[attribute] [target] Selects all elements with a target attribute 2
[attribute=value] [target=_blank] Selects all elements with target=”_blank” 2
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word “flower” 2
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with “en” 2
[attribute^=value] a[href^=”https”] Selects every <a> element whose href attribute value begins with “https” 3
[attribute$=value] a[href$=”.pdf”] Selects every <a> element whose href attribute value ends with “.pdf” 3
[attribute*=value] a[href*=”w3schools”] Selects every <a> element whose href attribute value contains the substring “w3schools” 3
:active a:active Selects the active link 1
::after p::after Insert content after every <p> element 2
::before p::before Insert content before the content of every <p> element 2
:checked input:checked Selects every checked <input> element 3
:disabled input:disabled Selects every disabled <input> element 3
:empty p:empty Selects every <p> element that has no children (including text nodes) 3
:enabled input:enabled Selects every enabled <input> element 3
:first-child p:first-child Selects every <p> element that is the first child of its parent 2
::first-letter p::first-letter Selects the first letter of every <p> element 1
::first-line p::first-line Selects the first line of every <p> element 1
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent 3
:focus input:focus Selects the input element which has focus 2
:hover a:hover Selects links on mouse over 1
:in-range input:in-range Selects input elements with a value within a specified range 3
:invalid input:invalid Selects all input elemets with an invalid value 3
:lang(language) p:lang(it) Selects every <p> element with a lang attribute equal to “it” (Italian) 2
:last-child p:last-child Selects every <p> element that is the last child of its parent 3
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent 3
:link a:link Selects all unvisited links 1
:not(selector) :not(p) Selects every element that is not a <p> element 3
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent 3
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child 3
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child 3
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent 3
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent 3
:only-child p:only-child Selects every <p> element that is the only child of its parent 3
:optional input:optional Selects input elements with no “required” attribute 3
:out-of-range input:out-of-range Selects input elements with a value outside a specified range 3
:read-only input:read-only Selects input elements with the “readonly” attribute specified 3
:read-write input:read-write Selects input elements with the “readonly” attribute NOT specified 3
:required input:required Selects input elements with the “required” attribute specified 3
:root :root Selects the document’s root element 3
::selection ::selection Selects the portion of an element that is selected by a user
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name) 3
:valid input:valid Selects all input elements with a valid value 3
:visited a:visited Selects all visited links 1
from http://www.w3schools.com/cssref/css_selectors.asp

Bello da leggere anche: http://www.bedev.it/css-3/10-selettori-css-da-non-dimenticare/