Recursos de diseño web

por | Feb 16, 2022 | Pagina web

Unsplash, fotografías libres de regalías: https://unsplash.com/
Imagen del editor Search Engine: https://freephotos.cc/
Pixabay tiene la mayor colección de activos de acciones gratis: https://pixabay.com/
Stockio es el mejor lugar para encontrar fotos de calidad: https://www.stockio.com/
El sitio más útil para un Emprendedor Web: https://www.cuteseotools.net/
El sitio más útil para un Freelancer de WordPress: https://www.freelancerstools.com/
Prueba gratuita de productos de WordPress (incluido Divi): http://demo.diywithwp.com/
Extensiones gratuitas de Chrome para diseñadores web: https://premium.wpmudev.org/blog/chrome-extensions/ y
Clipart vectorial gratis https://en.ac-illust.com/ (sitio en inglés, fuente de Japón)
Foto de archivo libre de regalías https://en.photo-ac.com/ (sitio en inglés, fuente de Japón)

Herramientas de depuración!

¿Has visto un sitio que está haciendo algo que deseas emular? Obteniendo problemas de espaciado extraños; no puede entender de dónde vienen?
¿Las cosas en general han salido mal? ¿Sientes que deberías ponerlo importante en tu código para solucionarlo?
¡Entonces necesitas herramientas de desarrollador!
  1. Cómo usar las herramientas de depuración del navegador: https://www.lifewire.com/web-browser-developer-tools-3988965
  2. Herramientas para desarrolladores web de Firefox. Este es un gran conjunto de herramientas: https://addons.mozilla.org/en-gb/firefox/collections/lifehackeraddons/webdeveloperpack/
  3. Cómo funciona la especificidad de CSS, un concepto realmente importante de comprender: https://stuffandnonsense.co.uk/archives/css_specificity_wars.html
  4. Una excelente guía de la estructura de Divi CSS que debería ayudar a dar sentido a lo que le muestran sus herramientas de desarrollador (esto también se detalla a continuación, pero vale la pena repetirlo, ya que es excelente para la corrección de errores). Si el siguiente enlace no funciona, puede descargar esta guía de la sección de archivos de nuestro grupo. https://divi.space/product/divi-selectors-ebook/
  5. http://csslint.net
  6. https://stackoverflow.com/
  7. Para los desarrolladores de PHP (módulos personalizados, plantillas de página o temas secundarios), WP PHP Console es una herramienta imprescindible para el código de depuración y también configura las alertas de la consola para ayudarlo a conocer lo que ocurre detrás de las escenas. https: //wordpress.org/plugins/wp-ph …

Accesibilidad

  1. http://webaim.org/techniques/screen…
  2. https://make.wordpress.org/accessib…

Divi herramientas

  1. http://divifonts.diviguide.com/
  2. https://divigallery.com/divi-fonts-preview-examples/
  3. http://divi.tutsdirectory.com/listings-category/divi-resources/
  4. http://divi.tutsdirectory.com/listings-category/images-and-graphics/
  5. http://divi.tutsdirectory.com/listings-category/web-design-development/
  6. Divis Divisores de secciones personalizadas
  7. Contenido Divi animado (no solo imágenes)
  8. Guía de fuentes Divi AND (utilizando atributos AND make a través de CSS psuedo)
  9. https://www.elegantthemes.com/blog/divi-resources/the-ultimate-guide-to-using-images-within-divi
  10. https://divi.space/product/divi-selectors-ebook/

WordPress, Divi, CSS, HTML y otros consejos, trucos y fragmentos

  1. http://www.wpbeginner.com/wp-tutorials/55-most-wanted-wordpress-tips-tricks-and-hacks
  2. http://www.surfnlearn.com/wordpress-tutorials/
  3. http://jsonld.com/json-ld-generator/ (El complemento a continuación es probablemente una mejor apuesta)
  4. https://schema.press (Agregue JSON-LD legible por máquina (explicado en el enlace anterior) a sus páginas para un mejor SEO y más control sobre cómo aparece su listado)
  5. http://fontawesome.io/cheatsheet/
  6. https://wordpress.org/plugins/code-snippets/
  7. https://wordpress.org/plugins/insert-headers-and-footers/
  8. https://wordpress.org/plugins/preserved-html-editor-markup-plus/
  9. https://varvy.com/pagespeed/defer-images.html
  10. https://varvy.com/pagespeed/render-blocking-css.html
  11. https://varvy.com/pagespeed/defer-loading-javascript.html
  12. http://eloquentjavascript.net
  13. http://read.humanjavascript.com
  14. https://css-tricks.com/box-sizing/
  15. https://www.quirksmode.org/
  16. https://www.paulirish.com/ (Considerado por muchos como una autoridad en estándares de codificación, soluciones y fragmentos para usar para mejorar su sitio)
  17. https://www.smashingmagazine.com/
  18. https://medium.com/startup-grind/ho…
  19. http://enjoycss.com/

Herramientas web

  1. http://www.makeuseof.com/tag/build-…
  2. https://yourbrowser.is/browser-mark…
  3. https://yourbrowser.is/
  4. https://developers.facebook.com/too…
  5. http://www.degraeve.com/color-palet…
  6. https://www.shopify.co.za/tools/policy-generator/terms-and-conditions
  7. https://www.cuteseotools.net/
  8. http://www.flatuicolorpicker.com/
  9. https://who.is/
  10. https://www.browserling.com/
  11. https://moz.com/researchtools/ose/
  12. http://www.whoishostingthis.com/
  13. https://www.whatsmydns.net/
  14. https://www.webpagetest.org/
  15. https://performance.sucuri.net/
  16. http://www.responsinator.com/
  17. http://ami.responsivedesign.is/
  18. http://tools.seobook.com/general/ke…
  19. http://colinkeany.com/blend/
  20. http://smartmockups.com/
  21. http://techsini.com/
  22. http://fa2png.io/
  23. https://www.jpeg.io/
  24. https://www.transparenttextures.com/…
  25. http://bootflat.github.io/color-pic…
  26. http://www.cssarrowplease.com/
  27. https://www.gradient-animator.com/
  28. http://buttonoptimizer.com/
  29. http://qrohlf.com/trianglify/
  30. http://subtlepatterns.com/
  31. http://cssround.com/
  32. http://bg.siteorigin.com/
  33. http://www.colourlovers.com/
  34. http://paletton.com/
  35. https://color.adobe.com/create/colo…
  36. http://www.colorlisa.com/
  37. http://mockuphone.com/
  38. http://dunnnk.com/
  39. http://thepatternlibrary.com/
  40. http://mockerie.io/
  41. https://placeit.net/
  42. http://prefixr.cloudvent.net/
  43. http://css3please.com/
  44. https://typeanything.io/
  45. http://www.linkzoo.net/
  46. http://www.socicon.com/generator.ph…
  47. http://fontello.com/
  48. https://testmysite.thinkwithgoogle.com/…
  49. https://website.grader.com/
  50. http://www.spyfu.com/
  51. http://answerthepublic.com/
  52. http://howmuchdoesawebsiteco.st/
  53. http://www.piktab.com/
  54. http://www.tinypng.com/
  55. http://www.codepen.io/
  56. http://www.whatfontis.com/
  57. http://materialcolors.com/
  58. https://www.canva.com/
  59. https://design.google.com/
  60. http://quirktools.com/screenfly/
  61. http://quirktools.com/wires/
  62. https://getstencil.com/
  63. https://dudleystorey.github.io/CSSs…
  64. https://email-checker.net/
  65. https://www.shopify.com/tools/business-name-generator
  66. https://www.useloom.com/ – En la aplicación del navegador para tomar grabaciones en la pantalla.
  67. https://www.catswhocode.com/blog/useful-tools-and-resources-for-web-developers – Herramientas y recursos útiles para desarrolladores web
IMÁGENES Y FOTOS DE STOCK PARA DISEÑO (Libre de derechos de autor – Creative Commons CC0: Puede descargar, modificar, distribuir y usar estas imágenes de forma gratuita para lo que desee, incluso en aplicaciones comerciales. No se requiere atribución) – Lea más sobre esta licencia de AQUÍ
  1. https://realgraphy.org/
  2. http://librestock.com/
  3. https://visualhunt.com/
  4. https://www.jumpingjackrabbit.com/b…
  5. https://medium.com/@dustin/stock-ph…
  6. https://pixabay.com/
  7. https://stock.tookapic.com/
  8. https://picjumbo.com/
  9. http://littlevisuals.co/
  10. http://nos.twnsnd.co/
  11. http://getrefe.tumblr.com/
  12. http://jaymantri.com/
  13. http://magdeleine.co/browse/
  14. http://picography.co/
  15. http://startupstockphotos.com/
  16. http://www.freestockphotos.biz/
  17. http://thestocks.im/
  18. http://morguefile.com/search/morgue…
  19. http://www.gratisography.com/
  20. https://unsplash.com/
  21. http://allthefreestock.com/
  22. http://www.lifeofpix.com/
  23. http://www.lifeofvids.com/
  24. http://publicdomainarchive.com/
  25. http://photos.bypeople.com/
  26. http://stokpic.com/
  27. http://jeshoots.com/
  28. http://www.coverr.co/
  29. https://videos.pexels.com/
  30. http://www.videvo.net/
  31. https://stocksnap.io/
  32. http://kaboompics.com/
  33. https://www.pexels.com/
  34. http://www.linkzoo.net/
  35. http://web-tools.club/royalty-free-…
  36. http://zoommyapp.com/
  37. http://freepik.com/
  38. http://flaticon.com/
  39. http://flickr.com/
  40. https://www.videezy.com/
  41. Imagen de archivo Search Engine: https://everypixel.com/ * Después de hacer su primera búsqueda, asegúrese de marcar el interruptor en la parte superior derecha para ver solo imágenes gratis si ese es su objetivo.
  42. http://www.capturingamerica.com/fre…
  43. http://mystock.photos/
  44. http://www.bluevertigo.com.ar/
  45. https://picsbuffet.com/pixabay/

Alternativas a Divi Theme / Divi Builder …

Una lista de productos de WordPress que puedes usar como alternativas para Divi. Estos productos pueden ser más adecuados para el proyecto que va a trabajar.
  1. https://elementor.com/
  2. https://www.wpbeaverbuilder.com/
  3. https://generatepress.com/
  4. https://oceanwp.org/
  5. https://theme.co/x/ Puedes hacerlo por X en https: //themeforest.net/item/x-the -… , pero Themeco también salió con un creador de encabezado / pie de página avanzado que usa Flexbox, esta versión de X se llama Pro, que se puede comprar aquí https://theme.co/pro/

Fragmentos

Una lista de fragmentos útiles
  1. Mensaje de Whatsapp a través del sitio web: <a href = » https://api.whatsapp.com/send?phone=556299990000&text=Hola ! Me pondré en contacto con usted a través del sitio web www.domainofyoursite.com.br . Mi nombre es … «target =» _ blank «> Envíe un mensaje a través de Whatsapp </a> PS1: Reemplace el número del teléfono con el suyo. > 55 = Código internacional> 62 = Código de área> 99990000 = Su número de móvil. PS2: Reemplaza el texto «¡Hola! Me pongo en contacto contigo a través del sitio web www.domainofyoursite.com.br. Mi nombre es … «con el tuyo. No borre las comillas ya que es parte del código html. Este texto aparecerá en el campo de texto de whatsapp. PS3: el usuario solo verá el texto «Enviar un mensaje a través de Whatsapp». Pero también puedes usar una imagen en lugar del texto. Con la imagen en lugar de texto, sería así: <a href = » https://api.whatsapp.com/send?phone=556299990000&text=Hello ! Me pondré en contacto con usted a través del sitio web www.domainofyoursite .com.br . Mi nombre es … «target =» _ blank «> <img src =» yourimage.png «> </a>