25 Tutoriales de Adobe Dreamweaver CS6 para diseñadores web | SpyreStudios

Colección de tutoriales muy útilles sobre Dreamweaver CS6, desde niveles básicos a intermedios. http://spyrestudios.com/25-dreamweaver-cs6-tutorials/

Guia de diseño web responsive por Adam Kaplan

Una guía genial con consejos y ejemplos muy útiles para poder afrontar el diseño web responsive. http://www.adamkaplan.me/grid/

Herramienta online para diseño web responsive | FROONT

Se trata de una herramienta online que permite diseñar webs responsive dentro del navegador y sin programar una sola línea de còdigo. Es algo que llevo buscando mucho tiempo porque mimguna de las que hay actualmente me gustan del todo. Sin embargo ésta puede servir para prototipar de forma rápida y compartir el resultado con […]

Mapas de imagen con CSS3

Los mapas de imagen aparecieron en 1993 y poco después empezaron a dejar de usarse solamente para casos indispensables, porque suponían una carga innecesaria de imágenes y ralentizaban la carga de la página. Fueron siendo sustituidos por Flash y efectos javascript, sin embargo actualmente siguen estando soportados por HTML5 y con un poco se imaginación […]

Formas poco conocidas de utilizar CSS y Javascript

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

Utilizar LESS dentro de las herramientas de desarrollo de Chrome

Poco a poco LESS va tomando fuerza en la maquetación de webs y prueba de ello es que Google Chrome ya es capaz de integrarlo en las herramientas para desarrolladores. Aún es un poco complicado para quienes no tienen experiencia en el uso de LESS, pero ahorra bastante trabajo y consigue optimizar el código y […]

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>

Google presenta Google Web Designer

Una herramienta de diseño web para la que en teoría no hace falta saber nada sobre programación web. Habrá que echarle un vistazo!!

Colección de webs imágenes de fondo a pantalla completa

Es un efecto muy vistoso que una foto o incluso un vídeo se muestre como fondo a pantalla completa y mucho más si se adapta al tamaño del navegador cuando jugamos con el tamaño de la ventana. Es algo complicado de conseguir y sobre todo que funcione en todos los navegadores y, más aún en […]

26 ejemplos de diseño web responsive

http://designm.ag/design/26-inspiring-responsive-web-design/