Recursos para construir elementos de interface de usuario en Web

Esta vez os presento una web en la que podéis encontrar numerosos elementos de interface de usuario para utilizar en vuestros diseños. http://www.unheap.com/section/media/

Libro gratuito de OReilly: The Web Platform: Building a Solid Stack of HTML, CSS, and JavaScript

Como en el resto de libros gratuitos que van sacando, no se adentra demasiado en ningún tema, se da una perspwctiva general de las posibilidades que ofrecen el HTML, CSS y Javascript, así que es recomendable para principiantes Enlace al libro

Asignar eventos jQuery a contenido cargado con Ajax

Si utilizamos la típica sintaxis jQuery para asignar eventos a los contenidos de nuestra página, éstos no se aplicarán a contenidos cargados con Ajax. La solución es utilizar algo como en el siguiente ejemplo:

$(document).on("change", "#elemento_cargado_con_ajax", function(){
    alert( 'Bienn!' );
});

1

2

3

$(document).on("change", "#elemento_cargado_con_ajax", function(){

alert( 'Bienn!' );

});

Para una mayor optimización conviene sustituir document, por el elemento html más próximo al contenido cargado con ajax.

Formas poco conocidas de utilizar CSS y Javascript

Echa un vistazo al Tweet de @1stwebdesigner: https://twitter.com/1stwebdesigner/status/427138854290989056

Problema con Bootstrap Tabs

Si no funcionan bien las Tabs con Bootstrap, probar actualizando jQuery a la versón 1.7 o posterior y a utilizar el atributo data-toogle. Es un fallo que también arrastra la versión 3.0 de Bootstrap.

<ul class="nav nav-tabs" data-tabs="tabs">
	<li class="active"><a href="#red" data-toggle="tab">Red</a></li>
	<li><a href="#orange" data-toggle="tab">Orange</a></li>
	<li><a href="#yellow" data-toggle="tab">Yellow</a></li>
	<li><a href="#green" data-toggle="tab">Green</a></li>
	<li><a href="#blue" data-toggle="tab">Blue</a></li>
</ul>
<div class="tab-content">
<div id="red" class="tab-pane active">
<h1>Red</h1>
red red red red red red

</div>
<div id="orange" class="tab-pane">
<h1>Orange</h1>
orange orange orange orange orange

</div>
<div id="yellow" class="tab-pane">
<h1>Yellow</h1>
yellow yellow yellow yellow yellow

</div>
<div id="green" class="tab-pane">
<h1>Green</h1>
green green green green green

</div>
<div id="blue" class="tab-pane">
<h1>Blue</h1>
blue blue blue blue blue

</div>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<li><a href="#orange" data-toggle="tab">Orange</a></li>

<li><a href="#yellow" data-toggle="tab">Yellow</a></li>

<li><a href="#green" data-toggle="tab">Green</a></li>

</ul>

red red red red red red

</div>

<h1>Orange</h1>

orange orange orange orange orange

</div>

<h1>Yellow</h1>

yellow yellow yellow yellow yellow

</div>

<h1>Green</h1>

green green green green green

</div>

blue blue blue blue blue

</div>

Acelerando los tiempos de carga uniendo archivos Javascript con PHP | Web.Ontuts

Acelerando los tiempos de carga uniendo archivos Javascript con PHP | Web.Ontuts.

jQuery Parallax Tutorial – Animated Header Background

jQuery Parallax Tutorial – Animated Header Background.

Efectos impresionantes con Paralax scrolling

http://www.webdesignerdepot.com/2012/11/28-amazing-parallax-scrolling-sites/

Cambiar la versión jQuery en Prestashop 1.5

En realidad esto vale para cambiar o añadir cualquier archivo .js a la cabecera de las páginas en Prestashop. La clase FrontController.php es la que se encarga de insertar estos archivos en el head de las páginas y en Prestashop 1.5 está en la carpeta /classes/controller/FrontController.php. El método que se encarga de importar los archivos […]

Live.js – Para ver los cambios mientras estamos diseñando

Este plugin de jQuery puede ser útil si se quieren ver los cambios de forma instantánea en la página web que estamos diseñando. Si cambiamos algo en el archivo css, el plugin se encarga de actualizarlos directamente sin falta de refrescar el navegador. Si vuestro entorno de trabajo consiste en tener el navegador en media […]