Básicos Diseño Web

Parece mentira, pero en mitad del año 2024 siguen abundando errores graves en la web de muchas instituciones. Concretamente, el sector de las pequeñas y medianas empresas es el que más trabajo tiene por delante porque los expertos de BeeDIGITAL AI mantienen que el 50% de los negocios comete, al menos, uno de los varios errores importantes que se pueden cometer en el diseño de sus páginas web.

No es un asunto baladí, ya que estos fallos tienen consecuencias importantes para los pequeños y medianos negocios en España. Según la compañía que ha retratado este panorama, esos errores hacen que el 70% de las pymes españolas no aparezca en los primeros resultados de Google, y que el 86% siga mostrando información incorrecta o imprecisa en Internet. El deterioro de la imagen digital y la pérdida de oportunidades comerciales son los dos grandes impactos que se esconden en los errores graves en la web de las compañías.

“Los consumidores digitales son cada vez más exigentes. Cuando un usuario busca una empresa en plataformas como Google, obtiene una imagen de esa marca compuesta por múltiples elementos que, mal presentados, resultan perjudiciales a la hora de reforzar su reputación o generar nuevo negocio”, destaca Carmen San Emeterio, directora comercial y de marketing de BeeDIGITAL AI.

Los errores graves en la web más importantes

Ahora bien, ¿cuáles son los errores graves en la web? ¿De qué fallos estamos hablando? Estos son los 9 más importantes que se están produciendo en el diseño de las páginas de las pymes españolas.

1. Tiempo de carga lento: Los usuarios suelen abandonar un sitio web si tarda demasiado en cargar. Esto puede deberse a imágenes pesadas, código innecesario o problemas con el servidor.
2. Diseño no responsive: Con el aumento del uso de dispositivos móviles, es crucial que un sitio web se vea y funcione bien en diferentes tamaños de pantalla. Un diseño no responsive puede alejar a los usuarios y afectar negativamente al posicionamiento en los motores de búsqueda.
3. Contenido pobre o irrelevante: El contenido de baja calidad, irrelevante o mal redactado puede disminuir la credibilidad del sitio y afectar negativamente la experiencia del usuario. Es importante proporcionar contenido valioso y bien estructurado que satisfaga las necesidades e intereses del público objetivo.
4. Problemas de navegación: Una navegación confusa o poco intuitiva puede dificultar que los usuarios encuentren lo que están buscando en el sitio web. Es fundamental tener una estructura de navegación clara y coherente para facilitar la exploración y la interacción.
5. Falta de seguridad: La seguridad es fundamental en cualquier sitio web, especialmente si se manejan datos sensibles o se realizan transacciones financieras. La falta de medidas de seguridad adecuadas puede exponer el sitio a ataques de hackers y poner en riesgo la información de los usuarios.
6. Enlaces rotos o páginas no encontradas: Los enlaces rotos o las páginas no encontradas pueden frustrar a los usuarios y dañar la reputación del sitio. Es importante realizar un mantenimiento regular para corregir estos problemas y asegurarse de que todos los enlaces funcionen correctamente.
7. Ausencia de llamadas a la acción (CTA): La falta de llamadas a la acción claras y relevantes puede dificultar que los usuarios realicen las acciones deseadas en el sitio web, como suscribirse a un boletín informativo, realizar una compra o ponerse en contacto con la empresa.
8. Experiencia de usuario deficiente: Una mala experiencia de usuario, que incluye elementos como formularios complicados, pop-ups molestos o diseños poco atractivos, puede hacer que los usuarios abandonen el sitio rápidamente. Es importante optimizar la experiencia de usuario para garantizar que sea fluida y satisfactoria.
9. Falta de optimización para SEO: Un sitio web que no esté optimizado para los motores de búsqueda puede tener dificultades para clasificarse en los resultados de búsqueda y atraer tráfico orgánico. Es crucial incorporar prácticas de SEO adecuadas, como el uso de palabras clave relevantes, metaetiquetas y enlaces internos.

Las conclusiones de Bee DIGITAL AI

Desde una muestra de dos millones de Pymes, el análisis de BeeDIGITAL AI indica que el 38% de los sitios web tiene poco contenido, el 37% presenta fallos en los títulos y el 27% no tiene sitemap, además de otros comunes como fallos de indexación, más de un año sin actualizar el site o baja velocidad de carga (más de 5 segundos en navegación móvil).

Google contempla diversos requisitos para que una web se considere ‘usable’, y se rige por ellos para posicionar antes a unas páginas que otras. Y todos estos errores comentados penalizan el posicionamiento durante las búsquedas.

Optimizar el SEO (Search Engine Optimization) de la web también resulta fundamental para posicionar a la empresa, a lo que también afectan errores como las imágenes mal etiquetadas (47% de las pymes analizadas) o tener menos de dos backlinks (enlaces redireccionados desde otros sitios web) en el 23% de los casos.

Desde 1997 hasta 2022 han pasado 25 años en los que acens, Part of Telefónica Tech, se ha convertido en una de las empresas pioneras del mundo digital, una de las tecnológicas más longevas de España y de las más innovadoras del mundo.

Desde su nacimiento en 1997, acens ha sido protagonista de algunos de los hitos de Internet más importantes del país, creciendo al ritmo de las innovaciones tecnológicas hasta convertirse en una empresa digital de 272 empleados, con una facturación anual sostenible que superó los 75 millones de euros en 2021 y con dos data centers de más de 6.000 m² que forman el corazón de la nube española. No en vano, la compañía da servicio a más de 160.000 clientes, gestiona más de un millón de cuentas de correo de clientes, 19.000 servidores y máquinas virtuales, 325.000 dominios y 130.000 webs y 1.305.855 buzones de correo Office 365.

Google y acens, del mismo año

El año en que nació acens también lo hizo Google y Amazon salió a bolsa. En España se navegaba con módems de 56 kbps, se tardaba hasta siete minutos en bajarse una foto de tres megas y había 400.000 dominios .es activos. Hoy, a través de la red troncal IP de acens que interconecta sus centros de datos, se puede navegar a velocidad de gigabit, las fotos se descargan en segundos y ya hay casi dos millones de dominios .es activos.

Oferta por su aniversario

Con motivo de sus bodas de plata, acens ha querido celebrarlas ofreciendo un 25% de descuento durante 1 año en los siguientes servicios:

–          Cloud Backup Servidor

–          Cloud Datacenter

–          Hosting

–          One Cloud

–          Tiendas online

–          Tu Web

25 años en anécdotas de acens

Aprovechando sus “bodas de plata”, desde acens ha querido repasar trece momentos destacados de su historia:

1. 1998: un data center pionero en Madrid. El año en que acens planifica su moderno centro de datos en Madrid, nacían Napster y PayPal. En España se podían consultar, por primera vez, los datos de la renta por Internet.

2. 2002: nuevo data center en Barcelona. Mientras que acens apostaba por ampliar su infraestructura con un nuevo centro de datos en Barcelona, nacía LinkedIn y, según Gartner, se superaba el hito de los 1.000 millones de PCs vendidos en el mundo.

3. 2004: impulso a los partners. Salida a bolsa de Google, que ya indexa 8.000 millones de webs, y se funda Facebook. acens decide lanzar su programa de canal para ayudar tanto a partners que añadan una capa de servicios de valor como a los distribuidores que quieren revender los productos y servicios de acens.

4. 2005: acens facilita el e-commerce en España. Se calcula que ese año ya hay más de 1.000 millones de internautas en el mundo, Shop.org anuncia el primer Cybermonday y en España el 3G está dando sus primeros pasos. Ese mismo año acens apuesta por facilitar a las empresas y usuarios el comercio online con el lanzamiento de acens Shop, hoy reconvertido en Tu Tienda con muchas más prestaciones.

5. 2007: dominios multilingües. acens registra 4.000 dominios con la letra “ñ” en el primer día del registro libre para los dominios multilingües .es.

6. 2008: acens con los emprendedores. La historia de acens está ligada a startups y emprendedores. Ya en 2008, con seis millones de DNI electrónicos activos, 186.727.854 páginas web en Internet o 10.000 millones de imágenes en Facebook, acens se une a la campaña “Jóvenes en red” de Red.es, ofreciendo un dominio y espacio web gratis para menores de 30.

7. 2010: triunfa el vídeo. Conscientes de la importancia del vídeo (ese año nace Instagram) y la necesidad de seguir evangelizando sobre conceptos innovadores como cloud, tres años después de que Netflix comenzara con el streaming, acens lanza acens.tv, un canal de divulgación que ya cuenta con más de 600 vídeos. Amazon, que desembarca en España ese año, anuncia que ya vende más libros en Kindle que en papel.

8. 2011: el mundo es móvil. Mientras que Cabify revoluciona la movilidad en los desplazamientos, acens lo hace en el trabajo con su nueva gama de soluciones de correo móvil y colaboración a partir de sólo 1 euro al mes. La integración en el Grupo Telefónica refuerza la visión estratégica de un mundo digital interconectado.

9. 2012: el despegue digital. Tras 244 años, la Enciclopedia Británica anuncia en marzo que dejará de imprimir físicamente sus ediciones. El mundo es digital y acens despliega una nueva conexión de fibra óptica de 10 Gbps entre Madrid y Barcelona, mejora sus productos de colaboración y comercio electrónico y lanza Clic SEO para ayudar a mejorar la presencia web y el marketing digital  de las empresas. Una gama de soluciones que se irá completando los meses siguientes con herramientas de análisis e informes.

10. 2013: el año de la nube. Para 2014 Cisco calcula que los Cloud Datacenter soportarán el 51% de la carga de trabajo este año, y por tanto superarán en este aspecto al centro de datos tradicional. acens continúa con su compromiso por ofrecer soluciones flexibles en la nube que ayuden a la transformación digital de las empresas con el lanzamiento de respaldo cloud, hoy mejorado para almacenar todo tipo de objetos.

11. 2016: formando conocimiento. Se estima que la economía digital genera unos 11,5 billones de dólares en el mundo. Para ayudar a las empresas a entender y colaborar en el mundo digital, acens lanza la plataforma Formacionacens.com con 27 cursos online, además de ofrecer formaciones presenciales y a medida.

12. 2020: Hiperescalares. Desde sus orígenes, acens ha apostado por la alianza con grandes compañías para poner al servicio de pymes y empresas las tecnologías más innovadoras y eficientes. Ese año se cierra el acuerdo de colaboración estratégica de Telefónica con Microsoft para acelerar la digitalización de la pyme, y se lanza el servicio Azure by acens. Posteriormente se forjará la alianza con Amazon para crear los servicios AWS by acens y más tarde con Alphabet para el servicio Google Cloud by acens.

13. 2021: Robustecimiento. acens se integra en Telefónica Tech, incrementando con ello su capacidad tecnológica y empresarial, perfeccionando su capacidad de ayuda a las pymes en fase de transformación digital.

Es sabido que Java es uno de los lenguajes más utilizado por los programadores en el desarrollo de aplicaciones. Java abarca un amplio rango de soluciones que van desde los videojuegos, pasando por la ciberseguridad y, cómo no, aplicaciones para las webs. De ahí la importancia de contar con un buen socio en cuestiones de Hosting JAVA.

Si la misma NASA se basa en Java para su organización, es lógico que te intereses por Java como desarrollador web o como responsable digital de tu negocio. Sin embargo, lo primero en lo que debes pensar para que tu web sea verdaderamente responsive y se adapte a estas aplicaciones, es en el servicio de Hosting JAVA.

ANW: más de 20 años especializados en Hosting JAVA

Son muchos los agentes que puedes encontrar en internet, aunque nosotros nos detenemos en los expertos de ANW, entidad altamente especializada en el Hosting JAVA con una trayectoria de más de 20 años (funcionando desde 2001). Gracias a ellos, tendrás en tiempo récord un servidor Java por un importe muy económico.

Contarás con un equipo de técnicos para poder asesorarte en cualquier cuestión relacionada con el hosting Java y una plataforma para poder desplegar aplicaciones de basadas en este famoso lenguaje de programación. Adicionalmente dispondrás de un servidor totalmente privado para alojar los aplicativos.

Y todo en cuestión de segundos gracias a la facilidad de uso de su panel AppManager© desde el que podrás instalar las aplicaciones y la versión del JDK que requieran dichas aplicaciones.

Diferentes planes para cada necesidad

El precio de partida de los planes de ANW es de 6,90 euros al mes para la versión estándar del Hosting JAVA. Esta incluye un dominio gratis, un tráfico de datos de hasta 500 GB al mes, 50 cuentas de correo y 4 GB de bases de datos MySQL (un software libre muy utilizado en WordPress, PhpBB, MediaWikio Drupal.

Por 14,90 euros al mes el tráfico de datos se convierte en ilimitado y la capacidad de disco es de 30 GB. Asimismo pasamos de 50 a 100 cuentas de correo y 100 bases de datos MySQL.

La opción Plus+ tiene un precio de 24,90 euros al mes y la oferta consiste en 50 GB de disco, 200 cuentas de correo y 15 bases de datos ilimitado, conservando un tráfico de datos ilimitado.

Todas las opciones de ANW y su portfolio de hosting Java cuentan con certificado de seguridad SSL y soporte técnico en castellano, para que no tengamos ningún problema al desplegar nuestras aplicaciones. Además, ANW aplica para todos los planes una garantía de reembolso por la que se puede cancelar el servicio en los primeros 30 días sin ningún tipo de penalización.

¿Y si queremos desplegar aplicaciones de otros lenguajes?

Más allá de lo anterior, hay que destacar que aunque se trate un Hosting JAVA, la solución de ANW admite más lenguajes. Todos los planes mencionados incluyen soporte para PHP, Node.JS y Javascript.

Dar cabida a otros aplicativos es sumamente fácil y también se puede realizar desde el  Panel de Control appManager©. Aquí tendrás la opción de configurar el mapping del servidor web para que las aplicaciones de JAVA se desplieguen directamente en la raíz del dominio (https://elnombredetudominio.es) o bien en un determinado directorio (https://elnombredetudominio.es/backend/).

Esto permite alojar en un mismo dominio tanto aplicaciones Java como otras desarrolladas en los otros lenguajes que acabamos de mencionar (por ejemplo, puedes alojar entornos Web que incluyen el Front-End desarrollado en un lenguaje de programación y el Back-End en otro).

Lo más importante de todo es basta con que tengas una noción básica sobre JAVA, Hosting JAVA y desarrollo web en general porque la atención al cliente es la base del éxito de esta organización en sus dos décadas de trayectoria, tal y como revelan los clientes de esta compañía.

Los técnicos y los contenidos que tienen publicados sirven de guía perfecta para poder disponer de una web que además de volar no tenga ni un solo problema para funciona con aplicaciones de JAVA, las más populares en el amplio mundo del desarrollo web.

Todas las necesidades cubiertas para tu web corporativa. Pásate por ANW y echa un vistazo a toda la oferta. Te sorprenderá…

¿Te gustaría crear tu propio sitio web de WordPress? A continuación, te mostraremos cómo puede crear una cuenta de usuario y crear un sitio web. También te diremos cómo descargar la aplicación de WordPress para computadora. Está disponible para Windows, macOS y Linux.

Configurar el sitio web de WordPress

1er paso: Abre el sitio web de WordPress y haga clic en «Crea tu sitio web» o «Empieza ahora» para comenzar a configurar tu propio sitio web.

2do paso: Ahora ingresa tu dirección de correo electrónico. Luego define un nombre de usuario y una contraseña. Estos son los datos de inicio de sesión de tu cuenta de WordPress. Finalmente, haz clic en «Crea tu cuenta».

3er paso: Ahora equipa tu sitio web con las propiedades necesarias: asígnale un nombre y define los temas en los que debe girar tu sitio web. También puedes especificar lo que quieres lograr con tu sitio web. Confirma tus entradas para pasar al siguiente paso.

4to paso: En el siguiente paso, ingresa la dirección deseada en la barra de búsqueda de arriba. WordPress ahora sugerirá los nombres de dominio que más se acercan a este deseo. Algunas de las alternativas son de pago. Sin embargo, siempre se te ofrecerá al menos una URL gratuita. Decide una dirección haciendo clic en «Seleccionar».

5to paso: Ahora debes decidir la tarifa. La tarifa «Gratis» es completamente gratuita, pero solo contiene un paquete básico de funciones. Cada una de las otras tarifas ofrecidas es de pago: cuanto más cuesta una tarifa mensualmente, más funciones contiene. Decide tú mismo cuál es la mejor opción para usted haciendo clic en «Comenzar con [nombre de tarifa]».

6to paso: Ahora serás dirigido a la descripción general de tu sitio web. Serás recibido con estadísticas de visitantes en la página de inicio de «Mi sitio web». En el lado izquierdo encontrará un menú con todas las funciones importantes. En el área «Administrar» puedes utilizar el botón «Agregar» para agregar páginas, entradas de blog, referencias o una biblioteca multimedia a tu sitio web. Para que puedas diseñar fácilmente tu propio sitio web de acuerdo con tus deseos.

Descarga e instala la aplicación de WordPress

1er paso: Inicie sesión en el sitio web de WordPress. Si aún no tiene una cuenta allí, puedes crear una fácilmente. En la vista general de «Mi sitio web», debes hacer clic en el icono de cuenta / perfil en la parte superior derecha. Esto te llevará a tu perfil y descripción general de la configuración.

2do paso: Desplázate hacia abajo en la barra de la izquierda hasta que aparezca el elemento «Descargar aplicación». A continuación, puedes hacer clic en “Descargar» a la derecha si deseas descargar la aplicación para una PC con Windows. Si tienes un sistema operativo diferente, simplemente haz clic en su nombre sombreado en azul a la izquierda del botón de descarga.

3er paso: Ahora aparece una ventana emergente en la que debes hacer clic en «Guardar archivo». El archivo de configuración de la aplicación de WordPress ahora se descargará automáticamente.

4to paso: El archivo de instalación se encuentra ahora en la carpeta de descargas de tu computadora. Ábrelo con un doble clic.

5to paso: Ahora se abrirá una nueva ventana. Aquí puedes decidir con un clic si deseas instalar el programa para todos los usuarios de la computadora o solo para tu cuenta de usuario. Una vez que hayas tomado tu decisión, haz clic en «Instalar». Ahora comienza la instalación.

6to paso: Una vez finalizada la instalación, solo tienes que «Terminar haciendo clic». Si marcas la casilla junto a «Ejecutar WordPress.com» arriba, el programa también se iniciará directamente.

Forma resumida de configurar un sitio web de WordPress

1. Ve al sitio web de WordPress y haz clic en «Crear tu sitio web» o «Comenzar ahora».
2. Luego ingresa tu dirección de correo electrónico y elige un nombre de usuario y contraseña. Confirma haciendo clic en «Crea tu cuenta».
3. Ahora decide cómo debe llamarse tu sitio web e ingresa temas para tu sitio web.
4. Ahora debes decidir una URL, la dirección de tu sitio web. WordPress te ayuda a establecer la mejor dirección de sitio web posible. Algunas de las direcciones son de pago, pero siempre se ofrece una dirección gratuita.
5. El último paso es elegir una tarifa. La tarifa «Gratuita» es siempre gratuita, las demás tarifas son de pago. Si te decides por una tarifa pagada, aún debes ingresar tus detalles de pago.
6. Ahora llegas a la descripción general «Mi sitio web», en la que puedes configurar tu sitio web de WordPress. El «Tráfico», es decir, el contador de visitantes, se muestra directamente en la página de inicio.
7. Ahora, el área «Administrar» a la izquierda del menú es importante para ti: aquí puedes agregar páginas, publicaciones de blog, una biblioteca de medios o referencias a su sitio web usando el botón «Agregar».

Forma resumida de descargar e instalar la aplicación

1. Inicia sesión en el sitio web de WordPress con tu cuenta de WordPress. Si aún no tienes una cuenta, puedes crear fácilmente.
2. Tan pronto como estés en la descripción general de «Mi sitio web», debes hacer clic en el icono de persona / cuenta en la esquina superior derecha.
3. Desplázate hacia abajo en la barra izquierda y luego haz clic en «Descargar aplicación». Luego, haz clic en «Descargar» en la sección «Aplicación de escritorio para Windows» si tienes una PC con Windows. De lo contrario, haz clic en el nombre del sistema operativo correspondiente con un fondo azul.
4. Ahora se abre una ventana en la que debes hacer clic en «Guardar archivo». La aplicación de WordPress ahora se descargará automáticamente.
5. El archivo de instalación se encuentra ahora en la carpeta de descargas de tu PC. Ábrelo.
6. Ahora se te preguntará si deseas instalar el programa para ti o para todos los usuarios de la computadora. Selecciona una opción haciendo clic en ella y luego selecciona «Instalar».
7. Una vez completada la instalación de WordPress, todo lo que queda por hacer es finalizarla. Para hacer esto, haz clic en el botón correspondiente en la ventana. Si marcas la casilla «Ejecutar WordPress.com», el programa también se iniciará automáticamente.

¿Alguna vez has hecho un cambio en una página web sólo para luego mirar con confusión y consternación cuando los cambios no se reflejan en el navegador? Tal vez olvidaste guardar el archivo o no lo subiste al servidor (o lo subiste en el lugar equivocado). Otra posibilidad, sin embargo, es que el navegador esté cargando la página desde su caché en lugar del servidor donde se encuentra el nuevo archivo.

Forzar a cargar una página desde el servidor

Puedes controlar la caché del navegador con una etiqueta meta:

Configurar Expires a -1 le dice al navegador que siempre cargue la página desde el servidor web.

También puedes indicar al navegador cuánto tiempo debe dejar una página en caché. En lugar de -1, introducea la fecha, incluyendo la hora, en la que deseas que se recargue la página desde el servidor. Ten en cuenta que la hora debe estar en la hora media de Greenwich (GMT) y escrita en el formato, dd Mon yyyyyy hh:mm:ss.

Advertencia: Esto puede no ser una buena idea

Cuando una página web se carga por primera vez desde un servidor, todos los recursos de esa página deben ser recuperados y enviados al navegador. Esto significa que una petición HTTP debe ser enviada al servidor. Cuantas más solicitudes haga una página para recursos como archivos CSS, imágenes y otros medios, más lenta será la carga de la página.

En resumen: Cuando obligas a un sitio a cargar desde el servidor en lugar de desde la caché, el rendimiento se ve afectado. Por lo tanto, antes de añadir estas meta etiquetas a su titio, pregúntate si esto es realmente necesario y vale la pena la pérdida de rendimiento que el sitio tendrá como resultado.

Los gráficos vectoriales escalables, o SVG, juegan un papel importante en el diseño de sitios web hoy en día. Si actualmente no está utilizando SVG en su trabajo de diseño web, aquí hay algunas razones por las que debería empezar a hacerlo, así como también puede utilizar los complementos que puede utilizar para navegadores más antiguos que no soportan estos archivos.

Resolución

El mayor beneficio de SVG es la independencia en la resolución. Debido a que los archivos SVG son gráficos vectoriales en lugar de imágenes raster basadas en píxeles, se pueden redimensionar sin perder calidad de imagen. Esto es especialmente útil cuando está creando sitios web con capacidad de respuesta que necesitan tener un buen aspecto y funcionar bien en una amplia gama de tamaños de pantalla y dispositivos.

Los archivos SVG se pueden escalar hacia arriba o hacia abajo para adaptarse a las necesidades cambiantes de tamaño y diseño de su sitio web con capacidad de respuesta y no necesita preocuparse de que esos gráficos pongan en peligro la calidad de cualquier paso del camino.

Tamaño del archivo

Uno de los retos con el uso de imágenes raster (JPG, PNG, GIF) en sitios web con capacidad de respuesta es el tamaño del archivo de esas imágenes. Debido a que las imágenes rasterizadas no escalan de la misma manera que las vectoriales, usted necesita entregar sus imágenes basadas en píxeles en el tamaño más grande en el que serán mostradas. Esto se debe a que siempre se puede hacer una imagen más pequeña y conservar su calidad, pero no ocurre lo mismo con las imágenes más grandes. El resultado final es que a menudo tienes imágenes que son mucho más grandes que las que se muestran en la pantalla de una persona, lo que significa que están siendo forzados innecesariamente a descargar un archivo muy grande.

SVG aborda este problema. Debido a que los gráficos vectoriales son escalables, puede tener tamaños de archivo muy pequeños, independientemente del tamaño de las imágenes que deban mostrarse. Esto tendrá en última instancia un impacto positivo en el rendimiento general del sitio y en la velocidad de descarga.

Estilo CSS

El código SVG también se puede añadir directamente al HTML de una página. Esto se conoce como «SVG en línea». Una de las ventajas de usar SVG en línea es que como los gráficos son dibujados por el navegador basados en su código, no hay necesidad de hacer una petición HTTP para obtener un archivo de imagen. Otra ventaja es que el SVG en línea se puede estilizar con CSS.

¿Necesita cambiar el color de un icono SVG? En lugar de tener que abrir esa imagen en algún tipo de software de edición y exportar y cargar el archivo de nuevo, puede simplemente cambiar el archivo SVG con unas pocas líneas de CSS.

También puede utilizar otros estilos de CSS en gráficos SVG para cambiarlos en los estados flotantes o para ciertas necesidades de diseño. Incluso puede animar esos gráficos para añadir algo de movimiento e interactividad a una página.

Animaciones

Debido a que los archivos SVG en línea pueden ser estilizados con CSS, también puedes usar animaciones CSS en ellos. Las transformaciones y transiciones CSS son dos maneras fáciles de añadir vida a los archivos SVG. Usted puede obtener experiencias ricas como Flash en una página sin sucumbir a los inconvenientes que vienen con el uso de Flash en los sitios web de hoy.

Usos de SVG

Por muy poderoso que sea SVG, estos gráficos no pueden reemplazar cualquier otro formato de imagen que esté utilizando en su sitio web. Las fotos que requieren una profundidad de color profunda tendrán que ser un archivo JPG o tal vez un archivo PNG, pero las imágenes simples como los iconos son perfectamente adecuados para ser ejecutados como SVG.

SVG también puede ser apropiado para ilustraciones más complejas, como logotipos de empresas o gráficos y diagramas. Todos los gráficos se beneficiarán de ser escalables, capaces de ser estilizados con CSS, y de las otras ventajas que se enumeran en esta sección.

Soporte para navegadores antiguos

El soporte actual para SVG es muy bueno en los navegadores web modernos. Los únicos navegadores que realmente no son compatibles con estos gráficos son las versiones anteriores de Internet Explorer (versión 8 y posteriores) y algunas versiones anteriores de Android. En general, un porcentaje muy pequeño de la población que navega sigue utilizando estos navegadores, y ese número sigue disminuyendo. Esto significa que SVG se puede utilizar de forma bastante segura en los sitios web actuales.

Si desea proporcionar una solución alternativa para SVG, puede utilizar una herramienta como Grumpicon de Filament Group. Este recurso tomará sus archivos de imagen SVG y creará copias de seguridad PNG para navegadores más antiguos.

Editado por Jeremy Girard

Durante muchos años, las versiones anticuadas del navegador Internet Explorer de Microsoft causaron dolores de cabeza a los diseñadores y desarrolladores de sitios web. La necesidad de crear archivos CSS para dirigirse específicamente a las versiones más antiguas de IE es algo que muchos desarrolladores web de mucho tiempo pueden recordar. Afortunadamente, las versiones más nuevas de IE, así como el navegador más nuevo de Microsoft – Edge, son mucho más compatibles con los estándares web, y dado que esos nuevos navegadores de Microsoft son «siempre verdes» en la forma en que se actualizan automáticamente a la última versión, es poco probable que tengamos que luchar con versiones anticuadas de esta plataforma de la misma manera que lo hicimos en el pasado.

Para la mayoría de los diseñadores web, los avances en el navegador de Microsoft significan que ya no tenemos que lidiar con los retos que la antigua versión de IE nos presentaba en el pasado. Algunos de nosotros, sin embargo, no somos tan afortunados. Si un sitio que está administrando todavía incluye un número considerable de visitantes de una versión anterior de IE, o si está trabajando en un recurso interno, como una Intranet, para una empresa que está utilizando una de estas versiones anteriores de IE por alguna razón, entonces tendrá que seguir probando estos navegadores, a pesar de que estén desactualizados. Una forma de hacerlo es utilizando el modo X-UA-Compatible.

X-UA-Compatible es una metaetiqueta en modo documento que permite a los autores web elegir la versión de Internet Explorer en la que se debe mostrar la página. Internet Explorer 8 lo utiliza para especificar si una página debe representarse como IE 7 (vista de compatibilidad) o IE 8 (vista de estándares).

Tenga en cuenta que con Internet Explorer 11, los modos de documento han sido obsoletos, ya no se utilizan. IE11 ha actualizado el soporte para los estándares web que causaban problemas con sitios web más antiguos.

Para ello, especifique el agente de usuario y la versión a utilizar en el contenido de la etiqueta:

"IE=EmulateIE7" 

Las opciones que tiene para el contenido son:

• «IE=5»
• «IE=EmulateIE7»
• «IE=7»
• «IE=EmulateIE8»
• «IE=8»
• «IE=EmulateIE9»
• «IE=9»
• «IE=edge»

Emular la versión le dice al navegador que use el DOCTYPE para determinar cómo renderizar el contenido. las páginas sin un DOCTYPE se renderizarán en modo peculiar.

Si le dice que use la versión del navegador sin emular (por ejemplo,

"IE=7"

) el navegador mostrará la página en modo estándar independientemente de que exista o no una declaración DOCTYPE. «IE=edge» le dice a Internet Explorer que use el modo más alto disponible para esa versión de IE. Internet Explorer 8 puede soportar hasta los modos IE8, IE9 puede soportar los modos IE9 y así sucesivamente.

Tipo de metaetiqueta compatible con X-UA:

La metaetiqueta X-UA-Compatible es una metaetiqueta http-equiv.

Formato de metaetiqueta compatible con X-UA:

Emular IE 7

Mostrar como IE 8 con o sin un DOCTYPE
>>.

Modo Quirks (IE 5)
>>.

 Usos recomendados de la Metaetiqueta Compatible con X-UA: 
Utilice la metaetiqueta X-UA-Compatible en las páginas web en las que sospeche que Internet Explorer 8 intentará mostrar la página en una vista incorrecta. Como cuando se tiene un documento XHTML con una declaración XML. La declaración XML en la parte superior del documento pondrá la página en la vista de compatibilidad, pero la declaración DOCTYPE debería obligar a que se muestre en la vista de estándares.
  Comprobación de la realidad
Hay que reconocer que es poco probable que estés trabajando en sitios web que necesiten ser renderizados como IE 5, pero nunca se sabe. Todavía hay compañías que obligan a los empleados a usar versiones muy, muy antiguas de los navegadores para poder seguir utilizando el software heredado propietario que fue desarrollado hace mucho tiempo para estos navegadores específicos. Para aquellos de nosotros en la industria de la web, la idea de usar un navegador como este parece una locura, pero imagínese una empresa de fabricación que utiliza un programa de décadas de antigüedad para gestionar el inventario en su taller. Sí, sin duda existen plataformas modernas para hacerlo, pero ¿han invertido en alguna de ellas? Si su sistema actual no está roto, ¿por qué lo cambiarían? En muchos casos, no lo harán, y usted encontrará que esta compañía obliga a los empleados a usar ese software y el navegador antiguo seguro que lo ejecutará. ¿Poco probable? Si te encuentras con un problema como este, el hecho de poder ejecutar el sitio en estos modos de documento más antiguos puede acabar siendo exactamente lo que necesitas.
			

Las tablas HTML son fáciles de crear una vez que entienda los conceptos básicos de filas y columnas, y también una vez que entienda cuándo está bien usar una tabla y cuándo debe evitarlas.

Breve historia de las tablas y el diseño web

Hace muchos años, antes de la aceptación de los estándares CSS y web, los diseñadores web utilizaban el elemento HTML para crear un diseño de página para los sitios. Los diseños de sitios web se «rebanaban» en pequeñas piezas como un rompecabezas y luego se combinaban con una tabla HTML para que se renderizaran en el navegador como se pretendía. Fue un proceso muy complejo que creó muchas marcas HTML adicionales y que hoy en día nunca se podrían utilizar en el mundo multipantalla en el que viven nuestros sitios web. A medida que el CSS se convirtió en el método aceptado para los visuales y el diseño de la página web, el uso de tablas para esto fue rechazado y muchos diseñadores web creyeron erróneamente que «las tablas eran malas». Eso era y es falso. Las tablas para el diseño son malas, pero todavía tienen un lugar en el diseño web y HTML, es decir, para mostrar datos tabulares como un calendario o un horario de trenes. Para ese contenido, el uso de una tabla sigue siendo un enfoque aceptable y bueno.

Entonces, ¿cómo se diseña una mesa? Comencemos por crear una tabla 2×2 simple. Esto tendrá 2 columnas (estos son los bloques verticales) y 2 filas (los bloques horizontales). Después de haber construido una tabla 2×2, puede construir cualquier tamaño de tabla que desee, simplemente añadiendo filas o columnas adicionales.

Aquí está el cómo

1. Primero abra la tabla

2. Abrir la primera fila con la etiqueta tr

3. Abrir la primera columna con la etiqueta td

4. Escribir el contenido de la celda

5. Cerrar la primera celda y abrir la segunda

   / i>

6. Escribir el contenido de la segunda celda

7. Cerrar la segunda celda y cerrar la fila

   / i>

8. Escriba la segunda fila exactamente como la primera

    td>  
   Luego cierre la tabla

9. ¡Eso es todo!

También puede elegir añadir cabeceras de tabla a su tabla usando el comando

elemento. Estas cabeceras de tabla reemplazarían a las piezas de "datos de tabla" de la primera fila de la tabla, así:
 #fefefe">#fefefe">#fefefe Name} DIFUNDE LA PALABRA-  / i>  #fefefe">#fefefe DIFUNDE LA PALABRA- DIFUNDE LA PALABRA-  / i>  #fefefe">#fefefe  / i>    

Cuando esta página se renderiza en el navegador, esa primera fila con las cabeceras de la tabla se muestra, por defecto, en negrita y se centran en la celda de la tabla en la que aparecen.
  Entonces, ¿está bien usar tablas en HTML?  
Sí, siempre y cuando no los utilice con fines de diseño, está bien utilizar tablas. Si necesita visualizar información tabular, una tabla es la forma de hacerlo. De hecho, evitar una tabla debido a una pureza equivocada para evitar este elemento HTML legítimo es tan atrasado como usarlos por razones de diseño en estos tiempos.
Escrito por Jennifer Kyrin. Editado por Jeremy Girard.
			

RSS, que significa Rich Site Summary (pero a menudo se piensa que significa Real Simple Syndication), es un formato de alimentación Web que puede utilizarse para publicar contenido. El contenido típico que se puede publicar con RSS incluye los blogs y cualquier contenido que se actualice con frecuencia. Cuando publicas una nueva entrada en tu blog o quieres promocionar un nuevo negocio, RSS te permite notificar a muchos individuos (aquellos que se han suscrito a la fuente RSS) al mismo tiempo de la actualización.

Aunque alguna vez fue muy popular, el RSS ha perdido bastante uso con los años y muchos sitios web, como Facebook y Twitter, ya no ofrecen esta opción en sus sitios. Tanto Internet Explorer de Microsoft como Mozilla Firefox siguen ofreciendo compatibilidad con RSS, pero el navegador Chrome de Google ha dejado de ofrecer esa compatibilidad.

El debate legal

Existe cierto debate sobre la legalidad de utilizar el contenido enviado a través de RSS en otro sitio web. El lado legal de los canales RSS es el derecho de autor RSS.

Desde un punto de vista legal, gran parte de Internet en su conjunto cae en un pozo gris. Internet es una estructura global. Dado que no existe una estandarización de la ley, cada país tiene su propio conjunto de reglas. Internet es difícil de regular. Por lo tanto, las fuentes RSS son difíciles de regular. Como regla general, está prohibido reutilizar el contenido de otra persona, ya que las leyes de derechos de autor se aplican a los feeds. Como escritor, cuando compongo palabras que eventualmente serán publicadas en Internet, alguien posee el derecho de esas palabras. En la mayoría de los casos, es el editor ya que me pagan por contribuir con contenido. Para sitios web personales o blogs, el autor es el propietario de los derechos. A menos que usted otorgue una licencia específica a otro sitio para su contenido, no puede ser replicado.

¿Significa eso que cuando pones todo el contenido de un RSS en un feed que no se puede volver a publicar? Técnicamente, sí. El envío de texto a través de un feed no renuncia a sus derechos sobre el mismo, lo que no significa que alguien no lo redistribuya para su propio beneficio. No deberían, pero ciertamente pueden hacerlo con RSS.

Hay una manera de recordar a los demás que usted es el dueño de la página… No es una necesidad legal poner una declaración de derechos de autor en sus feeds, pero es un movimiento inteligente. Esto recuerda a cualquier persona que pueda considerar la reproducción de su contenido que es una violación de las leyes de derechos de autor aplicables. Esto no es una protección general, de ninguna manera. Es una maniobra de sentido común que puede reducir el robo de su s. Piense en ello como la señal en la puerta que dice’No traspasar’ La gente todavía puede traspasar, pero algunos verán la señal y lo reconsiderarán.

Declaración de licencia

Puede añadir una línea en su código XML para recordar a los demás que usted es el propietario de los derechos sobre el contenido.

Mi blog 
 http://www.myblog.com DIFUNDE LA PALABRA- Todas las cosas que escribo 
 © 2022 Mary Smith, Todos los derechos reservados.

Esa línea extra en los datos de alimentación XML sirve como un recordatorio amistoso de que copiar contenido es ética y legalmente incorrecto.
			

Es fácil utilizar Adobe Dreamweaver para realizar una búsqueda y reemplazar el archivo actual, los archivos seleccionados o todos los archivos de su sitio web. Una vez que esté acostumbrado a utilizar la búsqueda global y el reemplazo, se preguntará cómo es que alguna vez ha vivido sin ella. Aprende cómo en sólo cinco minutos.

Introducción

Para buscar en un archivo, abra el archivo para editarlo en Dreamweaver. Vaya a «Buscar y reemplazar» en el menú «Edición» o haga clic en Ctrl-F/Cmd-F. Escriba las palabras que desea buscar en el cuadro de búsqueda y las palabras que desea reemplazar en el cuadro de sustitución. Asegúrese de que está seleccionado «Documento actual» y haga clic en «Reemplazar». Siga haciendo clic en reemplazar hasta que Dreamweaver haya reemplazado todas las instancias de la página.

Para buscar en todo un sitio web, abra Dreamweaver y abra un sitio web predefinido. En la lista de carpetas, resalte los archivos por los que desea buscar. Vaya a «Buscar y reemplazar» en el menú «Edición» o haga clic en Ctrl-F/Cmd-F. Escriba las palabras que desea buscar en el cuadro de búsqueda y las palabras que desea reemplazar en el cuadro de sustitución.

Asegúrese de que «Selected Files in Site» (Archivos seleccionados en el sitio) esté seleccionado si sólo desea buscar en algunas de las páginas de su sitio web, «Open Documentos» (Abrir documentos) si sólo desea buscar en los archivos que tiene abiertos para editar o «Entire Current Local Site» (Todo el sitio local actual) si desea buscar en todas las páginas. A continuación, haga clic en «Reemplazar todo».

Dreamweaver le avisará que no podrá deshacer esta operación. Haz clic en «Sí». Dreamweaver le mostrará todos los lugares donde se encontró su cadena de búsqueda. Los resultados se mostrarán en el panel de búsqueda debajo de la ventana de su sitio.

Consejos útiles

Para evitar coincidencias en elementos que no deberían ser reemplazados, cree una cadena de búsqueda que sea muy específica. Por ejemplo, la cadena «in» se encontraría dentro de las palabras («tin», «insider», etc.). Puede incluir partes de su frase de búsqueda dentro de su frase de reemplazo. Por ejemplo, si desea reemplazar «en el asunto de» por «en el asunto de», debe incluir todas las palabras en su cadena de búsqueda y reemplazar la cadena. La simple búsqueda de «in» dará como resultado que cada una de esas dos letras sea reemplazada por «on». Convirtiendo el «estaño» en «tonelada» y el «insider» en «onsider».

Dreamweaver le permite seleccionar opciones para limitar la búsqueda: Las mayúsculas y minúsculas coinciden exactamente con el texto que escriba. «In» no coincidirá con «in». «Match whole word will match only the word «in» and not «insider» or «tin.»

Ignorar espacios en blanco hará coincidir frases en las que haya una pestaña o un retorno de carro entre las palabras, incluso si la frase de búsqueda sólo tenía un espacio. Usar expresión regular le permite buscar con caracteres comodín.

Dreamweaver también le permite buscar dentro de un bloque de texto o una carpeta específica en su disco duro. Seleccione las opciones en el cuadro desplegable «Buscar en». Dreamweaver buscará a través del código fuente, dentro sólo del texto de la página, dentro de las etiquetas (para encontrar atributos y valores de atributos) o en una búsqueda avanzada de texto para buscar en múltiples etiquetas.

Puede hacer doble clic en los resultados para ver lo que se ha cambiado y hacer ediciones.