SlideShare una empresa de Scribd logo
1 de 42
Disponer de una buena colección de recursos realmente útiles es
una de las características que diferencian a los diseñadores web
profesionales del resto.

Instalar extensiones en el navegador




o Facilitan el trabajo
o Ayudan a descubrir rápidamente la causa de los errores del
diseño
o Mejoran la productividad de los diseñadores

Disponer de varias galerías de paginas, blog o enlaces a recursos
relacionadas con el diseño web.
14.1. Extensiones de Firefox


Una extensión se puede considerar como un pequeño
programa que se instala dentro del navegador y que añade
alguna característica interesante que el navegador no
incorpora de serie.


(http://addons.mozilla.org/es-ES/firefox/)




  o Firebug
  o Web Developer
  o HTML Validator
14.1.1 Firebug


Firebug proporciona toda la información posible
sobre algunos temas de diseño web.
Se trata de una barra que se instala junto con el
resto de herramientas del navegador y que
básicamente se puede utilizar para obtener
información sobre la página.
14.1.4 HTML Validator

Indica en todo momento los errores y las
recomendaciones sobre el código HTML de la
página que muestra el navegador.
permite obtener el color de cualquier
elemento de la página.




              permite medir la altura y anchura de
cualquier elemento de la página.


                     permite elegir el programa o editor
con el que se muestra el código fuente de la página y
los archivos CSS y JavaScript.
permite guardar una página entera
como una imagen. Los pantallazos también se
pueden realizar de una parte concreta de la página
o de los contenidos visibles en la ventana del
navegador.




             permite visualizar con Internet Explorer
cualquier página cargada en Firefox. La integración
con Internet Explorer es total, ya que ni siquiera hace
falta abrir ese navegador.
optimiza, ordena, limpia,
corrige y reduce el tamaño de las hojas de estilos.




                                             permite comparar de forma sencilla
diferentes tipos de letra y propiedades relacionadas con la tipografía y el texto.
▪ Browsershots (http://browsershots.org): muestra cómo se visualiza una misma
página web en diferentes navegadores de diferentes sistemas operativos (55
navegadores en total).
▪ Stripe Generator (http://www.stripegenerator.com/) : permite generar
fácilmente imágenes preparadas para poder repetirse en todas
direcciones de forma correcta y por tanto, para que puedan ser utilizadas
como imágenes de fondo.
Web Creme (http://www.webcreme.com/) :
incluye diariamente varios ejemplos de las mejores páginas diseñadas con CSS y
permite realizar búsquedas a partir del color utilizado en la página.
CSS Remix (http://www.cssremix.com/) : muestra
centenares de páginas diseñadas exclusivamente con CSS y con la posibilidad de puntuar su
diseño.
CSS Zen Garden (http://www.csszengarden.com/) :                              es una
galería diferente a las tradicionales, pero se ha convertido en una referencia en cuanto
a diseños complejos realizados mediante CSS.
Open Source Web Design (http://www.oswd.org) : sitio web que ofrece
cientos de
plantillas gratuitas con posibilidad de utilizarlas libremente en aplicaciones personales y
comerciales.
Especificación oficial de CSS 2.1 (http://www.w3.org/TR/CSS21/)
: la que incluyen todos los navegadores actuales.
Especificación oficial de CSS 3
(http://www.w3.org/Style/CSS/current-work#CSS3) : la que sustituirá
dentro de unos años a la actual versión 2.1.
del.icio.us/webDesign (http://del.icio.us/webDesign) :
colección de recursos relacionados
con todos los aspectos del diseño web. Lista creada y mantenida por el diseñador
Miguel
netvibes.com/formacionweb(http://www.netvibes.com/formacionw
eb) : colección de noticias, artículos y recursos relacionados con el diseño web.
Lectura diaria recomendada. Los recursos han sido seleccionados por el diseñador
Miguel Sánchez
Web Developers Handbook
(http://www.alvit.de/handbook/) : cientos de enlaces con
todos los recursos útiles para diseñadores web.
Blue Vertigo
(http://www.bluevertigo.com.ar/bluevertigo.htm) : otra
colección de cientos de enlaces con recursos útiles para diseñadores web.
Foros del Web (http://www.forosdelweb.com/) :
incluyen foros específicos dedicados a resolver dudas relacionadas con el diseño
web con CSS.
Ovillo (http://www.ovillo.org/) : una de las mejores
listas de distribución en castellano.
Los foros de SitePoint (http://www.sitepoint.com/forums/) son una
de las mejores referencias en inglés para resolver dudas relacionadas
con el diseño web.
Open Source Web Design (http://www.oswd.org) : sitio web que
ofrece cientos de plantillas gratuitas con posibilidad de utilizarlas
libremente en aplicaciones personales y comerciales.

Más contenido relacionado

Destacado

El problema de lo real y la libertad
El problema de lo real y la libertadEl problema de lo real y la libertad
El problema de lo real y la libertadCami_048
 
Presentación seguridadinformaticafinal
Presentación seguridadinformaticafinalPresentación seguridadinformaticafinal
Presentación seguridadinformaticafinalb1dcristiansevilla
 
Promocion vodafone a. cocineros y resposteros de bcn
Promocion vodafone a. cocineros y resposteros de bcnPromocion vodafone a. cocineros y resposteros de bcn
Promocion vodafone a. cocineros y resposteros de bcnAntonio Ruiz
 
COMPUTACION BASICA por Andrea Alva
COMPUTACION BASICA por Andrea AlvaCOMPUTACION BASICA por Andrea Alva
COMPUTACION BASICA por Andrea Alvapaolaalva
 
Preceso general de investigación por rocio calvopiña
Preceso general de investigación por rocio calvopiñaPreceso general de investigación por rocio calvopiña
Preceso general de investigación por rocio calvopiñarociopillajo2607
 
Pasado, presente y futuro de los TICs
Pasado, presente y futuro de los TICsPasado, presente y futuro de los TICs
Pasado, presente y futuro de los TICsLiz Ocampo
 
Brenda y diamela quintanilla primero b
Brenda y diamela quintanilla primero bBrenda y diamela quintanilla primero b
Brenda y diamela quintanilla primero bBrendaLiiz
 
Esquimales
EsquimalesEsquimales
Esquimalesmariabby
 

Destacado (20)

Como crear una hoja de vida
Como crear una hoja de vidaComo crear una hoja de vida
Como crear una hoja de vida
 
El problema de lo real y la libertad
El problema de lo real y la libertadEl problema de lo real y la libertad
El problema de lo real y la libertad
 
Percepcion
PercepcionPercepcion
Percepcion
 
2283853
22838532283853
2283853
 
Presentación seguridadinformaticafinal
Presentación seguridadinformaticafinalPresentación seguridadinformaticafinal
Presentación seguridadinformaticafinal
 
Promocion vodafone a. cocineros y resposteros de bcn
Promocion vodafone a. cocineros y resposteros de bcnPromocion vodafone a. cocineros y resposteros de bcn
Promocion vodafone a. cocineros y resposteros de bcn
 
Alba[1]
Alba[1]Alba[1]
Alba[1]
 
Kkkkkk
KkkkkkKkkkkk
Kkkkkk
 
2ª sesión
2ª sesión2ª sesión
2ª sesión
 
COMPUTACION BASICA por Andrea Alva
COMPUTACION BASICA por Andrea AlvaCOMPUTACION BASICA por Andrea Alva
COMPUTACION BASICA por Andrea Alva
 
Preceso general de investigación por rocio calvopiña
Preceso general de investigación por rocio calvopiñaPreceso general de investigación por rocio calvopiña
Preceso general de investigación por rocio calvopiña
 
Cargar selecciones
Cargar seleccionesCargar selecciones
Cargar selecciones
 
Dr.albornoz
Dr.albornozDr.albornoz
Dr.albornoz
 
Pasado, presente y futuro de los TICs
Pasado, presente y futuro de los TICsPasado, presente y futuro de los TICs
Pasado, presente y futuro de los TICs
 
Cargar selecciones
Cargar seleccionesCargar selecciones
Cargar selecciones
 
Vivi
ViviVivi
Vivi
 
Brenda y diamela quintanilla primero b
Brenda y diamela quintanilla primero bBrenda y diamela quintanilla primero b
Brenda y diamela quintanilla primero b
 
Proyecto
ProyectoProyecto
Proyecto
 
Innovar
InnovarInnovar
Innovar
 
Esquimales
EsquimalesEsquimales
Esquimales
 

Similar a Recursos útiles para diseñadores web

Plataformas de desarrollo web
Plataformas de desarrollo webPlataformas de desarrollo web
Plataformas de desarrollo webfany concepcion
 
Diseño de Páginas Web
Diseño de Páginas WebDiseño de Páginas Web
Diseño de Páginas Web8vivi8
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignJuan Morales
 
Dreamweaver j-l
Dreamweaver j-lDreamweaver j-l
Dreamweaver j-lAquino1912
 
Presentación sobre conceptos de Dw
Presentación sobre conceptos de DwPresentación sobre conceptos de Dw
Presentación sobre conceptos de DwXimenaOrrantia
 
Presentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfdPresentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfdwenjulo
 
Presentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfdPresentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfdwenjulo
 
Presentación1
Presentación1 Presentación1
Presentación1 wenjulo
 
Presentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfdPresentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfdWENDYRODRIG
 
Presentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfdPresentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfdWENJULI
 
Ppt5 bcd.pptm recuperado
Ppt5 bcd.pptm recuperadoPpt5 bcd.pptm recuperado
Ppt5 bcd.pptm recuperadojohanRn21
 
Espacio de trabajo Dreamweaver
Espacio de trabajo DreamweaverEspacio de trabajo Dreamweaver
Espacio de trabajo Dreamweaverpaoloarevaloortiz
 
Desarrollo Rápido y Pruebas Web con Mozilla Firefox
Desarrollo Rápido y Pruebas Web con Mozilla FirefoxDesarrollo Rápido y Pruebas Web con Mozilla Firefox
Desarrollo Rápido y Pruebas Web con Mozilla FirefoxLeonardo J. Caballero G.
 

Similar a Recursos útiles para diseñadores web (20)

Plataformas de desarrollo web
Plataformas de desarrollo webPlataformas de desarrollo web
Plataformas de desarrollo web
 
Diseño de Páginas Web
Diseño de Páginas WebDiseño de Páginas Web
Diseño de Páginas Web
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Dreamweaver j-l
Dreamweaver j-lDreamweaver j-l
Dreamweaver j-l
 
Presentación sobre conceptos de Dw
Presentación sobre conceptos de DwPresentación sobre conceptos de Dw
Presentación sobre conceptos de Dw
 
Presentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfdPresentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfd
 
Presentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfdPresentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfd
 
Presentación1
Presentación1 Presentación1
Presentación1
 
Presentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfdPresentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfd
 
Presentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfdPresentación1 de w.,jlgvjdfmkhgvfd
Presentación1 de w.,jlgvjdfmkhgvfd
 
Johan T,T
Johan T,TJohan T,T
Johan T,T
 
Ppt5 bcd.pptm recuperado
Ppt5 bcd.pptm recuperadoPpt5 bcd.pptm recuperado
Ppt5 bcd.pptm recuperado
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Espacio de trabajo Dreamweaver
Espacio de trabajo DreamweaverEspacio de trabajo Dreamweaver
Espacio de trabajo Dreamweaver
 
Presentacion herramientas
Presentacion herramientasPresentacion herramientas
Presentacion herramientas
 
Desarrollo Rápido y Pruebas Web con Mozilla Firefox
Desarrollo Rápido y Pruebas Web con Mozilla FirefoxDesarrollo Rápido y Pruebas Web con Mozilla Firefox
Desarrollo Rápido y Pruebas Web con Mozilla Firefox
 
Creacion de paginas_web
Creacion de paginas_webCreacion de paginas_web
Creacion de paginas_web
 
Dreamwever
DreamweverDreamwever
Dreamwever
 
Dreamweaver
DreamweaverDreamweaver
Dreamweaver
 
Tecnologias de desarrollo web
Tecnologias de desarrollo webTecnologias de desarrollo web
Tecnologias de desarrollo web
 

Recursos útiles para diseñadores web

  • 1.
  • 2. Disponer de una buena colección de recursos realmente útiles es una de las características que diferencian a los diseñadores web profesionales del resto. Instalar extensiones en el navegador o Facilitan el trabajo o Ayudan a descubrir rápidamente la causa de los errores del diseño o Mejoran la productividad de los diseñadores Disponer de varias galerías de paginas, blog o enlaces a recursos relacionadas con el diseño web.
  • 3. 14.1. Extensiones de Firefox Una extensión se puede considerar como un pequeño programa que se instala dentro del navegador y que añade alguna característica interesante que el navegador no incorpora de serie. (http://addons.mozilla.org/es-ES/firefox/) o Firebug o Web Developer o HTML Validator
  • 4. 14.1.1 Firebug Firebug proporciona toda la información posible sobre algunos temas de diseño web.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11. Se trata de una barra que se instala junto con el resto de herramientas del navegador y que básicamente se puede utilizar para obtener información sobre la página.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19. 14.1.4 HTML Validator Indica en todo momento los errores y las recomendaciones sobre el código HTML de la página que muestra el navegador.
  • 20.
  • 21.
  • 22. permite obtener el color de cualquier elemento de la página. permite medir la altura y anchura de cualquier elemento de la página. permite elegir el programa o editor con el que se muestra el código fuente de la página y los archivos CSS y JavaScript.
  • 23. permite guardar una página entera como una imagen. Los pantallazos también se pueden realizar de una parte concreta de la página o de los contenidos visibles en la ventana del navegador. permite visualizar con Internet Explorer cualquier página cargada en Firefox. La integración con Internet Explorer es total, ya que ni siquiera hace falta abrir ese navegador.
  • 24. optimiza, ordena, limpia, corrige y reduce el tamaño de las hojas de estilos. permite comparar de forma sencilla diferentes tipos de letra y propiedades relacionadas con la tipografía y el texto.
  • 25. ▪ Browsershots (http://browsershots.org): muestra cómo se visualiza una misma página web en diferentes navegadores de diferentes sistemas operativos (55 navegadores en total).
  • 26. ▪ Stripe Generator (http://www.stripegenerator.com/) : permite generar fácilmente imágenes preparadas para poder repetirse en todas direcciones de forma correcta y por tanto, para que puedan ser utilizadas como imágenes de fondo.
  • 27.
  • 28. Web Creme (http://www.webcreme.com/) : incluye diariamente varios ejemplos de las mejores páginas diseñadas con CSS y permite realizar búsquedas a partir del color utilizado en la página.
  • 29. CSS Remix (http://www.cssremix.com/) : muestra centenares de páginas diseñadas exclusivamente con CSS y con la posibilidad de puntuar su diseño.
  • 30. CSS Zen Garden (http://www.csszengarden.com/) : es una galería diferente a las tradicionales, pero se ha convertido en una referencia en cuanto a diseños complejos realizados mediante CSS.
  • 31. Open Source Web Design (http://www.oswd.org) : sitio web que ofrece cientos de plantillas gratuitas con posibilidad de utilizarlas libremente en aplicaciones personales y comerciales.
  • 32.
  • 33. Especificación oficial de CSS 2.1 (http://www.w3.org/TR/CSS21/) : la que incluyen todos los navegadores actuales.
  • 34. Especificación oficial de CSS 3 (http://www.w3.org/Style/CSS/current-work#CSS3) : la que sustituirá dentro de unos años a la actual versión 2.1.
  • 35. del.icio.us/webDesign (http://del.icio.us/webDesign) : colección de recursos relacionados con todos los aspectos del diseño web. Lista creada y mantenida por el diseñador Miguel
  • 36. netvibes.com/formacionweb(http://www.netvibes.com/formacionw eb) : colección de noticias, artículos y recursos relacionados con el diseño web. Lectura diaria recomendada. Los recursos han sido seleccionados por el diseñador Miguel Sánchez
  • 37. Web Developers Handbook (http://www.alvit.de/handbook/) : cientos de enlaces con todos los recursos útiles para diseñadores web.
  • 38. Blue Vertigo (http://www.bluevertigo.com.ar/bluevertigo.htm) : otra colección de cientos de enlaces con recursos útiles para diseñadores web.
  • 39. Foros del Web (http://www.forosdelweb.com/) : incluyen foros específicos dedicados a resolver dudas relacionadas con el diseño web con CSS.
  • 40. Ovillo (http://www.ovillo.org/) : una de las mejores listas de distribución en castellano.
  • 41. Los foros de SitePoint (http://www.sitepoint.com/forums/) son una de las mejores referencias en inglés para resolver dudas relacionadas con el diseño web.
  • 42. Open Source Web Design (http://www.oswd.org) : sitio web que ofrece cientos de plantillas gratuitas con posibilidad de utilizarlas libremente en aplicaciones personales y comerciales.