Herramientas y Roles para el Diseño Web

•Roles en el Diseño Web

Creativo Técnico supervisión

•Herramientas para el Diseño Web

Herramienta que facilita el diseño web

•Ejemplos de CMS

•Drupal • WordPress •• Joomla • Moodle

•Retos al usar WYSIWYG

•El editor genera código que no es estándar, por lo que es posible que no sea aceptado por cierto navegador Web. •Esto puede ocasionar inconsistencia en cómo se vea en los diferentes navegadores (no se va a ver igual en todos los navegadores Web). •Inserta código que no es necesario, creando grandes página Web que serán lentas. •• Los editores -especialmente lo de versiones viejas- no podrían estar actualizados con los últimos estándares de lenguaje marcado.

•Editor HTML

•Es un editor de texto avanzado que comúnmente prefieren los diseñadores y programadores. •• Tiene características especiales y permite insertar fácilmente HTML tags y sus atributos. •• Ejemplos: HTML-Kit, CoffeeCup HTML Editor, BBEdit y NoteTab.

•Lenguaje de Marcado de Hipertexto

•Es un lenguaje de marca que se utiliza para crear páginas Web. • Utiliza códigos predefinidos que se le llaman etiquetas de HTML (HTML Tags) permite trabajar con la apariencia y la organización de la página Web •Ejemplo:<p> <p/>para indicar dónde comienza y termina un párrafo que se escribirán dentro de una página Web

•Plantillas Web

•Es un modelo de página Web prediseñada que se puede personalizar para crear o actualizar un sitio Web o página Web de forma rápida.

•Malware

•Es un programa malicioso, que incluye virus de computadora y gusanos de Internet (Internet worms), que pueden infectar una sola computadora o una red entera.

•Editor de texto

•Es un programa usado para crear un archivo de texto sencillo. •Ejemplo: Notepad

•Hoja de Estilo en Cascada

•Estandariza la presentación del contenido por medio de la aplicación de estilos a los siguientes elementos. •Letra (font) • Color de fondo (background color) •• Márgenes (margins) •• Posicionamiento (positioning) •Otros

•Ejemplos de Scripting Languages

•Javascript •• PHP: Hypertext Preprocessor (PHP) •• Coffee Script

•PHP

•La programación se ejecuta en el servidor. Tiene que ir al servidor para hacer las funciones y regresar con los resultados.

Ejemplos de herramientas de creación de páginas Web

•Lenguajes de marcado (Markup languages) •• Hojas de estilo en cascada (Cascading Style Sheets, CSS) •• Lenguaje de Secuencia de Comandos (Scripting languages)

•Lenguaje de Secuencia de Comandos

•Lenguajes de programación para escribir programas cortos, llamados scripts. •Los programas pueden ejecutarse en el servidor o en el navegador Web (Web browser

•Extensible Markup Language

•Permite trabajar por sí mismo con el contenido de la página Web. •• Facilita el intercambio constante de información (el compartir la información). •A diferencia con el HTML, el cual tiene unas etiquetas que son únicas, el programador puede definir un tag (etiqueta) para indicar un dato en específico

•Herramientas de Desarrollo Web

•Permiten la creación de páginas Web de forma rápida.

•World Wide Web Consortium (W3C)

•Produce estándares y recomendaciones para el Web y el HTML.

•Sistemas para la Administración de Contenido

•Proveen herramientas de autoría y para administrar el desarrollo del contenido Web (crear, revisar, editar y publicar).

Intranet

•Red privada dentro de una organización grande o entidad comercial que usa las tecnologías de Internet y del Web para compartir información entre su membresía, los empleados y los socios de negocio.

•Javascript

•Se ejecuta principalmente en el cliente (computadora del usuario, no tiene que ir al servidor para hacer las funciones que se requieran).

•Roles Creativos

•Se enfoca principalmente en cómo el sitio Web se ve y se siente.

•Roles de supervisión

•Se enfocará en la dirección y administración o en el mercadeo/servicio al cliente

•Roles técnicos

•Su atención se centrará principalmente en la funcionalidad y seguridad del sitio Web.

•WYSIWYG

•Why You See Is Why You Get •Programas que automáticamente generan el código HTML. •Similar a como se crea un documento en un procesador de texto como Word, se puede dar formato al texto, insertar gráficas y enlaces en una página Web.

•Wireless Markup Language

•XML para dispositivos móviles

•Contenido activo

•contenido de una página Web se puede crear usando un scripting language, tale como Javascript o PHP.

•Programador o desarrollador Web

•crea la funcionalidad del sitio web.

•Desarrollador de bancos de datos

•diseñan, prueban y ponen en funcionamiento bases de datos aplicando el conocimiento de los sistemas de gestión de bases de datos, vigilando la protección y la seguridad de la base de datos.

•Diseñador Web

•es la persona o profesional que reúne los conocimientos necesarios para crear sitios web con las características y requisitos necesarios para representar y defender un negocio, empresa o actividad en Internet.

•Experto en SEO

•es todo aquel profesional que se centra en el posicionamiento en buscadores web, analizando las páginas de sus clientes para determinar cuáles son los cambios, estrategias y medidas que se deben llevar a cabo para mejorarlo y obtener un mayor volumen de tráfico a través de las visitas procedentes de las SERPs(Search Engine Results Page) de buscadores como Google.

•Experto en medios sociales

•es un profesional que sabe diseñar, planificar y aplicar estrategias de social media en el contexto del marketing online para empresas.

•Internet worms

•es un programa que se propaga a través de Internet al replicarse en las computadoras a través de sus conexiones de red. •Un programa de computadora que se copia a sí mismo en otras computadoras a través de Internet

•Escritor/editor de contenido

•escribe para otras personas. Esto quiere decir que puede escribir la letra de una página web, los artículos de un blog o las entradas de las redes sociales.

•Arquitecto Web

•especializado en diseñar y contruir aplicaciones que se van a utilizar a través de lo que conocemos como la Web, es decir, haciendo uso del protocolo HTTP para comunicarse con el usuario o con otras aplicaciones web.

•Scrips

•hacen que las páginas Web sean dinámicas e interactivas, por ejemplo, añadiéndole multimedios (texto, gráficas, audio, video y animación), y formularios. •También se pueden utilizar para conectarse a un banco de datos.

•Administrador del servidor Web

•incluye muchas funciones variando de una organización a otra. No obstante, lo fundamental es gestionar la instalación, soporte y mantenimiento de un sistema o servidor informático

•Artista Web/diseñador gráfico

•se encarga de crear conceptos visuales que comunican ideas, mensajes o elementos que identifican a una marca o producto. A través del diseño gráfico es posible inspirar al público, informarle algo o captar su atención, por lo que existe una estrecha relación entre esta disciplina y la publicidad, el mercadeo, la animación, lo fotografía y otras artes visuales.

•Administrador del interfaz del usuario (UI)

•se ocupa de la presentación visual del sitio web. El diseñador de la interfaz de usuario puede trabajar con otros diseñadores gráficos o de impresión para coordinar la apariencia del sitio web con materiales relacionados o, si corresponde, comenzar de cero para desarrollar una identidad visual, incluidos logotipos, fuentes y paletas de colores.

•Hacking

•se refiere a actividades que buscan comprometer dispositivos digitales, como computadoras, teléfonos inteligentes, tabletas e incluso redes enteras. Los piratas informáticos están motivados por el beneficio personal, para hacer una declaración o simplemente porque pueden

Webmaster

•son los responsables de los sitios web de internet.Se aseguran de que la información del sitio web es correcta, segura y está actualizada.

•Productor de multimedios

•usan ordenadores para trabajar con productos que mezclan texto, sonido, gráficos, vídeo digital, música e imágenes. Pueden incluir productos de software, sitios web y DVDs

•experiencia del usuario (UX)

•utiliza los requisitos funcionales y de contenido definidos para el sitio para desarrollar un conjunto de diseños de estructura metálica y diagramas de flujo que describen cómo los usuarios interactuarán con el sitio