Saltar al contenido principal
LibreTexts Español

8.10: Ideas especiales para la edición de sitios web

  • Page ID
    103208
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)

    \( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)

    ( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)

    \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)

    \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)

    \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)

    \( \newcommand{\Span}{\mathrm{span}}\)

    \( \newcommand{\id}{\mathrm{id}}\)

    \( \newcommand{\Span}{\mathrm{span}}\)

    \( \newcommand{\kernel}{\mathrm{null}\,}\)

    \( \newcommand{\range}{\mathrm{range}\,}\)

    \( \newcommand{\RealPart}{\mathrm{Re}}\)

    \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)

    \( \newcommand{\Argument}{\mathrm{Arg}}\)

    \( \newcommand{\norm}[1]{\| #1 \|}\)

    \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)

    \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    \( \newcommand{\vectorA}[1]{\vec{#1}}      % arrow\)

    \( \newcommand{\vectorAt}[1]{\vec{\text{#1}}}      % arrow\)

    \( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vectorC}[1]{\textbf{#1}} \)

    \( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)

    \( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)

    \( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)

    \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)

    \(\newcommand{\avec}{\mathbf a}\) \(\newcommand{\bvec}{\mathbf b}\) \(\newcommand{\cvec}{\mathbf c}\) \(\newcommand{\dvec}{\mathbf d}\) \(\newcommand{\dtil}{\widetilde{\mathbf d}}\) \(\newcommand{\evec}{\mathbf e}\) \(\newcommand{\fvec}{\mathbf f}\) \(\newcommand{\nvec}{\mathbf n}\) \(\newcommand{\pvec}{\mathbf p}\) \(\newcommand{\qvec}{\mathbf q}\) \(\newcommand{\svec}{\mathbf s}\) \(\newcommand{\tvec}{\mathbf t}\) \(\newcommand{\uvec}{\mathbf u}\) \(\newcommand{\vvec}{\mathbf v}\) \(\newcommand{\wvec}{\mathbf w}\) \(\newcommand{\xvec}{\mathbf x}\) \(\newcommand{\yvec}{\mathbf y}\) \(\newcommand{\zvec}{\mathbf z}\) \(\newcommand{\rvec}{\mathbf r}\) \(\newcommand{\mvec}{\mathbf m}\) \(\newcommand{\zerovec}{\mathbf 0}\) \(\newcommand{\onevec}{\mathbf 1}\) \(\newcommand{\real}{\mathbb R}\) \(\newcommand{\twovec}[2]{\left[\begin{array}{r}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\ctwovec}[2]{\left[\begin{array}{c}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\threevec}[3]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\cthreevec}[3]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\fourvec}[4]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\cfourvec}[4]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\fivevec}[5]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\cfivevec}[5]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\mattwo}[4]{\left[\begin{array}{rr}#1 \amp #2 \\ #3 \amp #4 \\ \end{array}\right]}\) \(\newcommand{\laspan}[1]{\text{Span}\{#1\}}\) \(\newcommand{\bcal}{\cal B}\) \(\newcommand{\ccal}{\cal C}\) \(\newcommand{\scal}{\cal S}\) \(\newcommand{\wcal}{\cal W}\) \(\newcommand{\ecal}{\cal E}\) \(\newcommand{\coords}[2]{\left\{#1\right\}_{#2}}\) \(\newcommand{\gray}[1]{\color{gray}{#1}}\) \(\newcommand{\lgray}[1]{\color{lightgray}{#1}}\) \(\newcommand{\rank}{\operatorname{rank}}\) \(\newcommand{\row}{\text{Row}}\) \(\newcommand{\col}{\text{Col}}\) \(\renewcommand{\row}{\text{Row}}\) \(\newcommand{\nul}{\text{Nul}}\) \(\newcommand{\var}{\text{Var}}\) \(\newcommand{\corr}{\text{corr}}\) \(\newcommand{\len}[1]{\left|#1\right|}\) \(\newcommand{\bbar}{\overline{\bvec}}\) \(\newcommand{\bhat}{\widehat{\bvec}}\) \(\newcommand{\bperp}{\bvec^\perp}\) \(\newcommand{\xhat}{\widehat{\xvec}}\) \(\newcommand{\vhat}{\widehat{\vvec}}\) \(\newcommand{\uhat}{\widehat{\uvec}}\) \(\newcommand{\what}{\widehat{\wvec}}\) \(\newcommand{\Sighat}{\widehat{\Sigma}}\) \(\newcommand{\lt}{<}\) \(\newcommand{\gt}{>}\) \(\newcommand{\amp}{&}\) \(\definecolor{fillinmathshade}{gray}{0.9}\)

    Los editores técnicos probablemente no van a codificar sitios web completos ellos mismos. Aun así, es posible que se le pida que edite y posiblemente cree contenido basado en la web, por lo que debe estar familiarizado con los conceptos básicos de la tecnología web.

    HTML y CSS

    El lenguaje de marcado de hipertexto (HTML) es la columna vertebral del contenido de Internet, y las hojas de estilo en cascada (CSS) son una parte vital de cómo los programadores web estilizan ese contenido. En resumen, HTML le dice a tu navegador qué poner en pantalla, y CSS le dice al navegador cómo debería ser.

    Este capítulo no puede entrar en los detalles de cómo funcionan HTML y CSS, pero si pretendes editar sitios web, necesitas poder “leer” HTML y CSS básicos y entender cómo funcionan.

    Existen muchos tutoriales en línea para HTML y CSS; el sitio web de W3 Schools (www.w3schools.com) es uno de los mejores.

    Principios generales de diseño web

    El diseño, el propósito y la función de los sitios web varían enormemente, pero la mayoría de los sitios web siguen un conjunto de conceptos básicos que puedes usar para evaluarlos y editarlos. Considera estas ideas cuando editas sitios web:

    • ¿Se usan las palabras de manera consistente en todo el sitio web? ¿Estas palabras son significativas para los usuarios? Si no, ¿qué palabras preferirían o entenderían los lectores?
    • ¿Las actividades relacionadas están cerca unas de otras en pantalla y en una ubicación lógica? Si no, ¿dónde le gustaría al usuario ver esas actividades?
    • ¿Las páginas tienen bastantes encabezados? De no ser así, ¿dónde serían útiles y apropiados los encabezamientos?
    • ¿Las oraciones y los párrafos son cortos? Si no, ¿cómo y dónde podrías romper largos bloques de texto en trozos bitesizados?
    • ¿Hay párrafos que puedan convertirse en listas?
    • ¿Los tipos de letra y los tamaños de fuente son apropiados para su uso en pantalla? Si son difíciles de leer, ¿cómo podrían mejorarse?
    • ¿Los hipervínculos son fácilmente visibles?
    • ¿El texto visible de los hiperenlaces y el texto del mouse sobre los hiperenlaces describen los elementos que se abrirán? (En particular, renombrar enlaces que digan “haga clic aquí”.)
    • ¿Funcionan los hipervínculos?
    • ¿Los menús de navegación aparecen en el mismo lugar y se ven iguales en todas las páginas?
    • ¿Funcionan los menús de navegación?
    • ¿El sitio web incluye un mapa del sitio?
    • ¿El sitio web tiene un buscador interno? ¿Funciona?
    • ¿El sitio web es utilizable en un dispositivo móvil?
    • ¿El diseño en pantalla sigue un patrón F? (La mayoría de las personas leen sitios web con este patrón: miran por la parte superior, escanean hacia abajo por el lado izquierdo unos centímetros, leen a través y escanean hacia abajo nuevamente).
    • ¿Cuánto tiempo tardaría un usuario en darse cuenta de que se encontró con un problema?
    • ¿Puede el usuario comenzar de nuevo si ocurre algún problema?

    Accesibilidad

    Un tema de edición que debe considerar con mucho cuidado es la accesibilidad del sitio web. Algunos problemas de accesibilidad tratan con discapacidades físicas o mentales, mientras que otros tratan con límites en la experiencia de los usuarios y el acceso a la tecnología.

    Una ley federal llamada Sección 508 requiere que todas las agencias gubernamentales que reciben financiamiento federal hagan que su tecnología electrónica y de información sea accesible para las personas con discapacidad. Las agencias gubernamentales también quieren que sus sitios web sean utilizables para personas con recursos limitados.

    De igual manera, las corporaciones quieren que sus sitios web sean accesibles a la mayor variedad posible de clientes, por lo que los sitios web corporativos deben incorporar estándares de accesibilidad para dar cabida a estas amplias audiencias.

    Como editor técnico, usted puede ser responsable de evaluar la accesibilidad de un sitio web. Considera estas ideas cuando editas sitios web:

    • ¿El sitio web es utilizable por personas con discapacidad física o mental? Los ejemplos incluyen personas que son
      • parcial o completamente ciego
      • daltónicos
      • incapaces de enfocar bien sus ojos
      • incapaz de ver el contraste
      • parcial o completamente sordo
      • fácilmente distraído por el ruido
      • incapaz de usar un mouse con precisión, o en absoluto
      • incapaz de usar las dos manos
      • incapaz de tolerar luces parpadeantes
      • disléxico
      • incapaz de formar recuerdos a corto plazo
      • incapaz de concentrarse durante largos períodos de tiempo

    Muchos de estos usuarios dependen de tecnologías de asistencia como lectores de pantalla y teclados alternativos. Si el sitio web no funciona con estas tecnologías, debe editar el sitio web para que sea accesible.

    • ¿El sitio web es utilizable por personas que tienen experiencia limitada con computadoras? Los ejemplos incluyen
      • personas mayores
      • personas de zonas rurales
      • personas en los países en desarrollo
    • ¿El sitio web es utilizado por personas con recursos tecnológicos limitados o modificados? Los ejemplos incluyen personas que tienen
      • conexiones a Internet de acceso por teléfono
      • computadoras más antiguas
      • monitores pequeños o que no son de pantalla ancha
      • falta de acceso a computadoras que no sean dispositivos móviles
      • falta de acceso a dispositivos móviles
      • no hay software para abrir los archivos descargados
      • navegadores web más antiguos
      • navegadores de solo texto
      • altavoces deshabilitados
      • cookies deshabilitadas
      • Javascript deshabilitado
      • programas bloqueadores de anuncios
      • bloqueadores de ventanas emergentes

    Una discusión detallada de los temas y metas de accesibilidad está disponible en línea a través de la sección de la Iniciativa de Accesibilidad Web del sitio web del Consorcio World Wide Web (W3C): wwww.w3.org/wai/

    El W3C también alberga una página con una extensa y actualizada lista de comprobadores de accesibilidad. Es posible que desee utilizarlos al editar un sitio web para accesibilidad: http://www.w3.org/WAI/eval/Overview.html

    Estrategias de marcado de sitios web

    Tienes múltiples opciones de cómo marcar sitios web. Ninguno es innato mejor que los demás, así que elige el método o métodos que mejor se adapten al proyecto y a las necesidades de tu cliente.

    • Edita el texto inédito de un sitio web en un procesador de textos como lo harías con cualquier otro documento de texto.
    • Copie y pegue el texto de un sitio web publicado en un procesador de textos y edítelo como lo haría con cualquier otro documento de texto.
    • Capture e imprima capturas de pantalla, o imprima páginas web formateadas con la función “Imprimir” de su navegador, luego márquelas como lo haría con cualquier otro documento impreso.
    • Captura capturas de pantalla, ábrelas con un programa gráfico como Photoshop o MS Paint, y márcalas con las herramientas de dibujo y/o creación de texto del programa.
    • Exporte páginas del sitio web a PDF y edítelas con las herramientas de marcado Acrobat o Acrobat Reader.
    • Escriba un archivo de comentarios por separado.
    • Edita directamente el código HTML y CSS.
      • Use un programa de desarrollo web o un editor de texto sin formato. Nunca use MS Word.
      • Etiquete sus ediciones con resaltado, texto coloreado y/o códigos de comentario (<! —commentgoeshere—> para HTML, y /** commentgoeshere **/ para CSS).
    • Exporte el código o texto del sitio web a un espacio colaborativo en línea como un wiki o Google Docs, y edítelo en línea, utilizando las herramientas del programa.

    This page titled 8.10: Ideas especiales para la edición de sitios web is shared under a CC BY license and was authored, remixed, and/or curated by Tiffani Reardon, Tammy Powell, Jonathan Arnett, Monique Logan, & Cassie Race.