👨🏻‍💻Desarrollo web🌐tools🛠widgets⌨, divulgación, noticias, reseñas, recomendaciones...para el que viaja y trabaja sobre una bicicleta.
🗺_
Mostrando las entradas con la etiqueta web. Mostrar todas las entradas
Mostrando las entradas con la etiqueta web. Mostrar todas las entradas

Programas basicos que debe manejar un diseñador web


Un diseñador web necesita dominar un conjunto de herramientas que abarquen tanto el diseño visual como la implementación técnica. Aquí citamos 6 programas básicos de ejemplo (hay cientos de equivalentes y alternativas ):


Estos son algunos programas de ejemplo, pues el sector del diseño web está en constante evolución, es beneficioso para un diseñador web estar abierto a aprender nuevas herramientas y tecnologías según las necesidades de los proyectos.


Adobe Photoshop:
Función: Principalmente para la edición y manipulación de imágenes, retoque fotográfico, creación de maquetas visuales (mockups) de sitios web, diseño de interfaces gráficas (UI), creación de iconos y gráficos para la web.
Importancia: Aunque el diseño web ha evolucionado y existen herramientas más enfocadas en la interfaz, Photoshop sigue siendo crucial para trabajar con imágenes, optimizarlas para la web y crear elementos visuales detallados.


Adobe Illustrator:
Función: Se utiliza para la creación de gráficos vectoriales. Esto incluye logotipos escalables, iconos, ilustraciones y otros elementos gráficos que deben verse nítidos en cualquier tamaño de pantalla.
Importancia: Los gráficos vectoriales son fundamentales para el diseño web moderno, ya que garantizan una visualización perfecta en dispositivos de alta resolución (Retina displays) y son fácilmente escalables sin perder calidad.


Figma o Adobe XD:
Función: Estas son herramientas de diseño de interfaz de usuario (UI) y experiencia de usuario (UX) basadas en vectores. Permiten crear wireframes (estructuras alámbricas), prototipos interactivos, diseños de interfaces completas y colaborar en tiempo real con otros diseñadores y desarrolladores.
Importancia: Son esenciales para planificar la estructura y el flujo de un sitio web, diseñar interfaces intuitivas y probar la usabilidad antes de la fase de desarrollo. Figma, en particular, ha ganado mucha popularidad por su colaboración en la nube y su enfoque en el diseño de interfaces digitales. Adobe XD es una alternativa robusta dentro del ecosistema de Adobe.


Visual Studio Code (VS Code) o Sublime Text:
Función: Editores de código fuente potentes y versátiles. Permiten escribir y editar código HTML, CSS, JavaScript y otros lenguajes de programación utilizados en el desarrollo web. Ofrecen características como resaltado de sintaxis, autocompletado, depuración y gestión de proyectos.
Importancia: Aunque un diseñador web no siempre necesita ser un desarrollador completo, comprender y poder editar el código es fundamental para implementar sus diseños, realizar ajustes y colaborar eficazmente con los desarrolladores. VS Code es actualmente uno de los editores más populares y con mayor soporte de la comunidad.


Navegador Web (Chrome, Firefox, Safari):
Función: Herramienta fundamental para visualizar y probar los sitios web en diferentes etapas de desarrollo. Las herramientas de desarrollo integradas en los navegadores (Inspect Element) son cruciales para inspeccionar y modificar el HTML y CSS en tiempo real, depurar JavaScript y analizar el rendimiento del sitio.
Importancia: Permiten al diseñador ver cómo se renderiza su diseño en diferentes navegadores y realizar ajustes precisos para garantizar la compatibilidad y una experiencia de usuario consistente.


Sistemas de gestión de contenidos CMS,  y plataformas como GitHub o GitLab:
Función: Git es un sistema de control de versiones distribuido que permite rastrear los cambios en el código a lo largo del tiempo, colaborar con otros desarrolladores y revertir a versiones anteriores si es necesario. Plataformas como GitHub y GitLab proporcionan un entorno para alojar repositorios Git, gestionar proyectos y colaborar en equipo.
Importancia: Aunque pueda parecer más técnico, comprender los conceptos básicos de Git y cómo trabajar con un repositorio remoto es cada vez más importante para los diseñadores web, especialmente cuando trabajan en equipos o en proyectos complejos. Les permite gestionar sus archivos de diseño y código de manera eficiente y colaborar con los desarrolladores de forma más fluida.

¿he dejado afuera alguna?, ¿Qué otra sugieres?

Buscador web

Funcionamiento:
Este formulario está integrado para Blogger, se usa para ofrecer a los visitantes una herramienta de búsqueda personalizada que combina la potencia de Google con opciones específicas para explorar contenido relevante, como archivos o sitios relacionados con el contenido.


La integración con Google asegura que las búsquedas sean procesadas por el mayor motor de búsqueda, donde los filtros hacen que los resultados sean más específicos, lo que es ideal para un blog temático (como se sugiere las opciones del menú).

Desglose del código:

Imagen inicial con enlace:
El código comienza con una imagen animada como un elemento decorativo, con un tamaño reducido (99x99 píxeles) para no ocupar mucho espacio en la página y está centrada con márgenes a los lados. Es un toque visual que hace el formulario más limpio.

Formulario de búsqueda:
El formulario está diseñado para enviar una consulta de búsqueda a Google (https://www.google.com/search) usando el método GET, que es una forma de enviar datos a través de la URL.

Campo de texto: 
Hay un cuadro donde el usuario escribe lo que quiere buscar. Este cuadro tiene un límite de caracteres (88% del espacio disponible) y un tamaño visual de 33 caracteres para que sea cómodo de usar.

Filtro por tipo de archivo: 
El formulario incluye un menú desplegable (<select name="as_filetype">) que permite elegir el tipo de archivo a buscar, como páginas web (HTML), archivos comprimidos (RAR), documentos de Excel, Word o PDF. La opción "CUALQUIERA" es la predeterminada, lo que significa que no se aplicará un filtro específico si no se selecciona nada.

Filtro por sitio: 
Otro menú desplegable (<select name="as_sitesearch">) permite elegir dónde realizar la búsqueda. Las opciones incluyen buscar en todo Google, en Google Fotos, Google Drive, Google Business, o sitios específicos como el propio blog (neuralnetbasedartificialintelligence.blogspot.com), otro blog llamado BH-Lab5, Google Maps o WebRadio. Esto es útil para limitar los resultados a un lugar concreto.

Número de resultados: 
El un campo (<input name="num" type="SHOW" value="33" />) que indica que se mostrarán 33 resultados por búsqueda, aunque el atributo type="SHOW" parece ser un error, ya que no es un tipo válido en HTML (probablemente debería ser type="hidden" para que no se vea en la página).

Botón de búsqueda:
Un botón simple con el texto "BUSCAR" envía la consulta al servidor de Google cuando se hace click.
vista funcional

Por tipo de archivo: Buscar en: Resultados

Mi lista de blogs

💰Publicidad y Monetización de contenido. ♿:Cuentanos tus necesidades especificas, ofrecemos soluciones personalizadas. Nuestro blog sigue siendo gratuito mostrando PUBLICIDAD 💎 Te invitamos a apoyarnos SUSCRIBIÉNDOTE.
Colaboraciones_Monetización_
Recompensas,Patrocinios y Mecenazgos*💰https://www.paypal.com/paypalme/cavaldezb 💳CLABE: 002180903466533440(BANAMEX)
🦇
#TIENDITAS #PANADERÍAS #RESTAURANTES #DARK-KITCHENs #E-COMMERCE #DESPACHOS #BANCOS #FARMACIAS #LIBRERÍAS #IMPRENTAS #LABORATORIOS #OFICINAS #CORPORATIVOS #TALLERES #LLANTERAS #AUTOAGENCIAS #REFACCIONARIAS etc...
  • +Rápidos y confiables : 99% en bicicleta...
    Lo que necesites.
  • Reclutamos a Mensajeros experimentados para asegurar el éxito de entregas.
    Ya estámos en camino,seguro llegamos!
  • Entregas urgentes y programadas. Documentos o paquetes a su destino y retorno con evidencias.
    Hasta 5 destinos para envíos múltiples.
  • En cualquier momento y a cualquier lugar. Deja que alguien de la comunidad te ayude.
    Ya están en camino y pueden ahorrarle mucho tiempo y dinero en comparación con otros servicios.
  • Nuestro programa de lealtad ofrece beneficios especiales y tarifas preferentes. Trabajando juntos podemos hacer que el envío sea más efectivo, rentable y sostenible.
    Aún puede conseguir una cuenta de aliado, contáctenos y le asignaremos las credenciales necesarias.
🚀

Apoyamos a marcas y negocios locales, para fortalecernos juntos.

Cuéntale a alguien sobre nosotros
🧭Tienes un producto, proyecto, idea de negocio o emprendimiento a destacar? 👊estarémos encantados de conocerte
👨‍💻
https://bicihacklabs.chayns.site/ _🗺