Css y Wix

Deber de Informática sobre Css y Wix Por: Francisco Vallejo Curso: 10 “A” Fecha: 30/03/2020

Definición de CSS - ¿Qué son las hojas de estilo o cascading style sheets?

• CSS son las siglas de Cascading Style Sheets - Hojas de Estilo en Cascada - que es un lenguaje que describe la presentación de los documentos estructurados en hojas de estilo para diferentes métodos de interpretación, es decir, describe como se va a mostrar un documento en pantalla, por impresora, por voz (cuando la información es pronunciada a través de un dispositivo de lectura) o en dispositivos táctiles basados en Braille.

• ¿Para que sirve?

• CSS es una especificación desarrollada por el W3C (World Wide Web Consortium) para permitir la separación de los contenidos de los documentos escritos en HTML, XML, XHTML, SVG, o XUL de la presentación del documento con las hojas de estilo, incluyendo elementos tales como los colores, fondos, márgenes, bordes, tipos de letra..., modificando as la apariencia de una página web de una forma más sencilla, permitiendo a los desarrolladores controlar el estilo y formato de sus documentos.

• ¿Cómo funciona?

• El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos estructurados, y que forman la sintaxis de las hojas de estilo. Cada regla consiste en un selector y una declaración, esta última va entre corchetes y consiste en una propiedad o atributo, y un valor separados por dos puntos.

Características

• Selector El Selector especifica que elementos HTML van a estar afectados por esa declaración, de manera que hace de enlace entre la estructura del documento y la regla estilística en la hoja de estilo.

• Declaración La Declaración que va entre corchetes es la información de estilo que indica cómo se va a ver el selector. En caso de que haya más de una declaración se usa punto y coma para separarlas.

• Propiedad o Atributo y Valor Dentro de la declaración, la Propiedad o Atributo define la interpretación del elemento asignándosele un cierto Valor, que puede ser color, alineación, tipo de fuente, tamaño..., es decir, especifican qué aspecto del selector se va a cambiar.

• Tres tipos de estilos La información CSS se puede proporcionar por varias fuentes, ya sea adjunto como un documento por separado o incorporado en el documento HTML, y dentro de estas posibilidades destacan tres formas de dar estilo a un documento web: • Hoja de Estilo Externa La Hoja de Estilo Externa se almacena en un archivo diferente al del archivo con el código HTML al cal estar vinculado a través del elemento link, que debe ir situado en la sección head. Es la manera de programar ms eficiente, ya que separa completamente las reglas de formato para la página HTML de la estructura básica de la página.

• Hoja de Estilo Interna La Hoja de Estilo Interna est incorporada a un documento HTML, a través del elemento style dentro de la sección head, consiguiendo de esta manera separar la información del estilo del código HTML. • Estilo en Línea El Estilo en Línea sirve para insertar el lenguaje de estilo directamente dentro de la sección body con el elemento style. Sin embargo, este tipo de estilo no se recomienda pues se debe intentar siempre separar el contenido de la presentación.

Ventajas de CSS

• La principal ventaja de CSS sobre el lenguaje HTML o similar, es que el estilo se puede guardar completamente por separado del contenido siendo posible, por ejemplo, almacenar todos los estilos de presentación para una web de 10.000 páginas en un sólo archivo de CSS. • CSS permite un mejor control en la presentación de un sitio web que los elementos de HTML, agilizando su actualización.

• Aumento de la accesibilidad de los usuarios gracias a que pueden especificar su propia hoja de estilo, permitiéndoles modificar el formato de un sitio web según sus necesidades, de manera que por ejemplo, personas con deficiencias visuales puedan configurar su propia hoja de estilo para aumentar el tamaño del texto.

• El ahorro global en el ancho de banda es notable, ya que la hoja de estilo se almacena en cache después de la primera solicitud y se puede volver a usar para cada página del sitio, no se tiene que descargar con cada página web. Por otro lado, quitando todo lenguaje de marcado en la presentación en favor del uso de CSS reduce su tamaño y ancho de banda hasta más del 50%, esto beneficia al dueño del sitio web con menos ancho de banda y costes de almacenamiento, as como a los visitantes para los cuales las páginas se van a cargar más rápido.

• Una página puede tener diferentes hojas de estilo para mostrarse en diferentes dispositivos, como pueden ser impresoras, lectores de voz, o móviles.

¿Como subir un Documento?

• Con Dropbox que es un servicio de alojamiento de archivos multiplataforma en la nube,.. El servicio permite a los usuarios almacenar y sincronizar archivos en línea y entre ordenadores y compartir archivos y carpetas con otros.1 Existen versiones gratuitas y de pago .Dropbox es un software que enlaza todas las computadoras mediante una sola carpeta, lo cual constituye una manera fácil de respaldar y sincronizar los archivos.

Instrucciones • Bien para empezar queda aclarar que este blog "https://conocimientopcymas.blogspot.com", Los archivos JS y CSS están subidos a Dropbox.

• Ir a https://www.dropbox.com/.Si no tienen cuenta se registran. Descargan la aplicación de Dropbox para escritorio la instalan.

• Ahora ya deben de tener su archivo JS o CSS. Ahora al archivo CSS o JS que hallan subido le dan clic derecho y luego en compartir enlace a Dropbox.

• En mi caso es "https://www.dropbox.com/s/b7q48zpf2jy5bk3/Oficial.css".

• Ahora al enlace que les ella dado Dropbox lo pegan en el bloc de notas y cambian el WWW por DL. • En mi caso quedara algo así "https://dl.dropbox.com/s/b7q48zpf2jy5bk3/Oficial.css".

• Ahora ese enlace lo pegan en su navegador y verán que el link cambia.

• En mi caso cambia a "https://dl.dropboxusercontent.com/s/b7q48zpf2jy5bk3/Oficial.css".

• Ahora para que esto funcione y para que Blogger lo leea tenemos que hacer lo siguiente. Pone este código: <link href="Link Del Estilo" rel="stylesheet" type="text/css"> Donde dice link ponen el link del estilo en mi caso es.

• https://dl.dropboxusercontent.com/s/b7q48zpf2jy5bk3/Oficial.css.De manera que les queda algo así: • <link href="https://dl.dropboxusercontent.com/s/b7q48zpf2jy5bk3/Oficial.css" rel="stylesheet" type="text/css"> • Ese código lo pegan antes de <head>.Y ya esta

¿Como crear una revista digital?

Para diseñar una revista digital es necesario considerar ciertos pasos que te permitirán organizar bien su estructura e incluir el contenido que deseas presentar a tu audiencia.Si ya has tenido la experiencia de trabajar para un medio impreso, la tarea de realizar una revista digital será mucho más sencilla para ti, pues ya conoces cómo funciona, lo único que cambia es que los contenidos se presentarán desde una plataforma digital.

Es indudable que la mayoría de los contenidos que hoy consumimos se encuentran en la web y aunque los medios tradicionales siguen conservando un segmento de la audiencia, éstos han tenido que evolucionar adaptándose a las nuevas exigencias del formato digital. Actualmente los medios digitales más usados sin importar el sexo o edad, corresponden a los blogs, el microblogging, las redes sociales y el chat. Todos los recursos y herramientas están disponibles desde la web 2.0, esto demuestra el gran avance y transformación que esto ha significado para las empresas, la publicidad y los consumidores. .Al igual que los periódicos, las revistas han evolucionado incursionando en el medio digital valiéndose de herramientas interactivas y formatos adecuados para dar a conocer sus contenidos.

1. Elige su presentación. Revista digital 1 Al momento de crear tu propia revista digital debes comenzar por pensar en su apariencia desde el logotipo que la diferenciará de un blog hasta la estructura de sus contenidos. Es importante que el logotipo sea llamativo y los colores que decidas usar conserven una coherencia y unidad con el resto de los contenidos que incluyas. Un diseño funcional y simple les facilitará a tus usuarios tener acceso al contenido de una forma más rápida y efectiva.Por otro lado debes pensar en los títulos, los temas y la extensión de tus contenidos., El tipo de artículos que publicarás, los formatos, contenidos, imágenes y número de columnas que incluirás.

2. Utiliza el formato más adecuado. Revista digital 2 La gran mayoría de las revistas digitales son sitios web alternativos que ofrecen contenidos diferentes o más específicos con relación a la revista impresa. Tú puedes diseñar un sitio que presente distintas secciones de la revista, y artículos que correspondan a cada sección que se publican en la página respectiva.Otra opción que puedes considerar es distribuir por correo electrónico la gaceta o revista digital para llegar a los lectores que deseas. También existe la posibilidad de que subas los contenidos de la revista en formato PDF para que sean leídos en línea o descargados por tus lectores a su PC.La “tecnología flip” es otra alternativa que te puede servir para que tus lectores vean tus contenidos en línea de una forma muy agradable, como si se tratará de hojear una revista impresa en la que es posible pasar las páginas

3. Realiza la configuración de tu sitio web. Revista digital 3 Si tienes poca experiencia en el tema de medios digitales, mi recomendación es que empieces por configurar tu sitio a través de un administrador de contenidos fácil de usar como WordPress. Sin embargo, si eres una persona con ciertos conocimientos y experiencia en el tema, y prefieres algo más elaborado, y lo que estás buscando es disponer de tu propio espacio en la web, entonces lo más indicado es que compres un software o programa especializado para realizar el diseño de tu revista digital y si posees los recursos económicos contratar los servicios de un diseñador web.

4. Define los temas para tus ediciones. revista digital 4 Es importante que desde un principio establezcas cuáles son los temas que vas a tratar y los formatos a utilizar, es decir, artículos, crónicas, reportajes, columnas o consejos prácticos. Si te apoyarás en fotografías, videos o infografías para complementar la información.Si en cada edición presentarás un tema nuevo o será la continuación de una investigación que se encuentra en curso o la recopilación de una serie de artículos específicos para cada una de las secciones de la revista digital.

5. Ordena por categorías Algo que te ayudará a organizar tus contenidos, planear los temas y llevarlos a cabo es utilizar categorías en un menú identificado que sea de fácil acceso durante la navegación. Por ejemplo es de gran utilidad tanto para ti como para tus lectores encontrar dentro del menú de la revista los títulos de cada una de las secciones.

6. Determina la periodicidad de tu revista digital.

Otro aspecto importante que debes considerar antes de comenzar con la producción del contenido, es decidir su periodicidad, si será semanal, mensual o trimestral. Sí vas a elaborar todo el material para cada edición o prolongarás el contenido de cada número durante una semana o mes. Todo depende del tiempo que dispongas y los recursos con los que cuentes. Sin embargo, recuerda que en la web, los usuarios son muy activos y esperan ver información actualizada de los sitios que visitan, así que mi recomendación es que mantengas tu revista digital al día

7. Identifica y establece tu contenido Una vez hayas identificado y establecido el tipo de contenido que publicarás debes comenzar por investigar y redactar la información, recopilar el material de apoyo como fotografías, ilustraciones, infografías y videos. Recuerda que lo más importante de una publicación o revista digital es su contenido, por este motivo debes prestar especial atención a los detalles como títulos bien elaborados y atractivos que no solo atraerán a tus lectores, sino que al mismo tiempo te posicionarán bien en los buscadores. Dentro de los artículos usa links referenciales, esto es algo que los usuarios te agradecerán. Las personas siempre desean saber más sobre lo que les interesa. Por último, si tu medio digital logra alcanzar cierto éxito y comienza a demandarte mucho tiempo, el cual no alcanzas a cubrir, piensa en conformar un equipo de trabajo.

8. Usa bien las imágenes Por lo general las revistas impresas utilizan una gran cantidad de fotografías que indudablemente son de muy buena calidad, y el lector puede tomarse el tiempo para observarlas y disfrutarlas sin ningún problema. Sin embargo, en la web esto no funciona igual, es importante que para tu revista digital uses de forma moderada las imágenes, para evitar cansar al usuario. No olvides que la pantalla del computador o cualquier otro dispositivo digital generan cierto grado de cansancio, por lo que no es recomendable saturar tus artículos u otro tipo de formatos con un exceso de fotografías.

9. Usa una estrategia de suscripción.

Si ya creaste tu revista digital, otro paso que debes tener en cuenta es cómo vas hacer para que tus lectores vean la información que publicas ya sea semanal, quincenal o mensual. Ahora los usuarios disponen de una gran cantidad de canales para acceder a la información, así que muchos es posible que ni conozcan tu sitio en la web y para llegar a ellos deberás pensar en otras estrategias. Una de esas efectivas estrategias es por medio del correo electrónico, pero ten cuidado de no convertirte en spam y pedir la autorización a los usuarios de la forma más indicada en el mismo correo o desde un espacio en la revista digital.

10. Verifica la calidad de tus publicaciones Antes de realizar cualquier publicación, comprueba que ésta se encuentre bien y que incluya todos elementos que deseas. Edita el texto de ser necesario, asegúrate que los enlaces son los correctos y que dirigen al lector hacia el sitio correspondiente. Comprueba que las imágenes poseen el tamaño apropiado y si faltan algunos detalles en tus contenidos, inclúyelos. Por otro lado, revisa si el diseño que se presenta en línea es el que esperabas. No olvides colocar los créditos sobre cada autor e imagen que se exponga.

¿Qué es Wix?

Concepto Wix

• Wix es una plataforma para la construcción de páginas Web en lenguaje de programación HTML5. Su característica principal es el sistema Drag & Drop, es decir, arrastrar y soltar, lo que la hace muy intuitiva e ideal para que cualquier persona sin conocimientos de programación pueda crear un sitio en Internet.

• El modelo de negocio de Wix se encuentra en la categoría Freemium, es decir, que ofrece un servicio básico de forma gratuita y funciones avanzadas de pago.

• La decisión de crear un sitio web con Wix o con otra plataforma, depende de las necesidades del usuario. Si es para la marca personal de un profesional autónomo, un blog o un portfolio, esta opción puede ser ideal.Sin embargo, si es para un proyecto corporativo, se recomienda realizar una evaluación detallada, porque tal vez se requiera de una plataforma más robusta.

• Otros aspectos a considerar son el presupuesto disponible y los conocimientos técnicos que tenga el usuario para la programación y mantenimiento de un sitio web.

Para qué sirve Wix

• Esta plataforma sirve para construir una página web de un negocio o un blog, de una manera fácil y divertida, incluso si no se tienen conocimientos técnicos de programación. Además, las plantillas son compatibles con dispositivos móviles, y sirve para que pequeños negocios y emprendedores incursionen en el mundo online.

• Entre las funcionalidades que ofrece Wix se encuentran: añadir imágenes y vídeo, elegir entre una gran variedad de tipos de fuentes y colores, además de permitir agregar formularios e iconos para enlazar con las redes sociales y con Google Maps.

• También es posible agregar apps especiales para negocios, chat para reservas y atención al cliente, un blog o una tienda en línea, con su respectivo carro de compras.

• Por otro lado, es posible conectar el sitio a un dominio propio y realizar optimización del contenido mediante una herramienta SEO integrada.

Ventajas de Wix

• El increíble constructor intuitivo está entre los mejores en la industria. La opción de cuenta gratis le permite a los usuarios crear y hospedar hermosos sitios web sin costo.

• Wix, ofrece más de 510 plantillas con diseños profesionales de alta calidad, que pueden servir para cualquier propósito, es decir, Wix ofrece plantillas cuyos diseños variados se pueden ajustar fácilmente al objeto de tu negocio.

• No necesitas saber codificar o programar para diseñar un sitio web personalizado, debido a que sus herramientas interactivas te facilitarán el trabajo. Brinda herramientas interactivas de arrastrar y soltar, que facilitarán el diseño de tu sitio web. Ofrece la posibilidad de editar tus imágenes de manera fácil con sus herramientas de retoque y edición.

• Ofrece características de diseño fáciles de usar, entre las cuales destacan: insertar texto, insertar videos, insertar múltiples secciones. Realizan actualizaciones mensuales, lo cual es beneficioso, debido a que garantiza mantenerse en la vanguardia.

• Brinda soporte técnico telefónico, y botones de ayuda que te apoyarán cuando así lo necesites.El mercado de aplicaciones Wix se integra con muchos servicios web populares, permitiendo soporte en vivo, boletín de noticias, concursos, herramientas de reservación y testimonios en tu sitio.

• La nueva Inteligencia Artificial de Diseño (ADI) crea sitios completos desde la nada en minutos basado en tus necesidades, usando información semántica de sitios similares en la web.

• Recientemente, Wix ha introducido herramientas avanzadas para el comercio electrónico, entre las mismas se encuentra: la configuración de los gastos de envío según el rango de precios y el destino el producto, la realización del seguimiento de las ordenes inconclusas, entre otras.

• El creador web, Wix es compatible con HTML lo cual permite a los usuarios con conocimientos de programación la creación de códigos para personalizar aún más su sitio web.

¿Como crear una Pagina Web en Wix?

Paso #1: Saber lo que quieres

• Antes de zambullirte directamente en el creador de Wix, aparta tiempo para hacer una lluvia de ideas y pensar sobre lo que quieres en tu sitio web:¿Cuál es el propósito de mi sitio web? ¿Quieres que tu sitio web te ayude a vender, mostrar tus habilidades o logros, aumentar la consciencia social sobre un tema en particular u ofrecer una plataforma para tus pensamientos y opiniones? La meta de tu sitio web afectará el diseño, disposición y contenido que incluyas.

Paso #2: Crear tu cuenta de Wix • Una vez sepas qué quieres que te ofrezca tu sitio web, es momento de crear una cuenta con Wix. Necesitarás compartir tu información básica y crear un nombre de usuario y contraseña. Puedes empezar gratis, pero para acceder a las mejores herramientas de Wix, te sugerimos suscribirte a un plan de pago. Si ya has empezado a diseñar tu sitio web en el creador de sitio web gratuito, no te preocupes, no perderás el trabajo que has adelantado al ir a un plan de pago.Wix ofrece cinco planes de pago con un rango de precios y beneficios asociados. A menos que solo necesites un sitio muy sencillo y pequeño

Paso #3: Conocer los editores de Wix • Una vez hayas creado tu cuenta, es momento de elegir el editor ADI o el editor normal de Wix.El editor ADI. El editor de Wix ADI (inteligencia de diseño artificial) te hará algunas preguntas básicas sobre el tipo de sitio web que quieres y su objetivo, y automáticamente creará un sitio web para tu negocio. Puedes elegir de las funciones sugeridas, introducir información sobre tu negocio y elegir las preferencias del esquema de colores. El editor ADI es un acceso directo a un sitio web que funciona, y puedes personalizar casi todo, pero es mucho más satisfactorio usar el editor de Wix tú mismo y controlar cada elemento individual en tu sitio nuevo.

• El editor normal de Wix. Si eliges el editor normal de Wix, tendrás que tomar algunas decisiones adicionales. Cuando empieces con el editor, te pedirán elegir una categoría de sitio web como fotografía, tienda en línea, restaurantes; y alimentos y eventos. Cada categoría está predeterminada con plantillas que te facilitan presentar tu sitio web de forma atractiva, pero sigues teniendo muchas opciones para cambiar cada cosa del sitio prototipo. Después de seleccionar una categoría de sitio web, tendrás que elegir el tema. Wix tiene cientos de temas, pero puedes reducirlos con las funciones de filtro y búsqueda. Encontrarás que cuando llegues a esta sección.

Paso #4: Personalizar tu sitio web Una vez hayas creado tu plantilla inicial de sitio web, es momento de personalizarla a través de las barras laterales del editor. Puedes cambiar el fondo con cualquier imagen de archivo que quieras o subir tus propias imágenes y contenido multimedia para crear un fondo personalizado.

Subir imágenes personalizadas para que puedas poner tus logos y fotos por todo el sitio web.Wix ofrece elementos adicionales para que los arrastres y sueltes en tus nuevas páginas web. Estos elementos incluyen cajas de texto, galerías de fotos, botones de llamada a la acción, música, vídeo e imágenes, enlaces sociales y menús desplegables. Hay como añadir funciones prémium como desplazamiento con efecto parallax.

Si necesitas funciones adicionales, puedes añadirlas con la App Market de Wix. La app de mercado incluye funciones gratuitas y de pago que satisfacen prácticamente todas las necesidades existentes, como pago seguro, formulario de suscripción, widget de chat en directo y otras opciones. Wix también ofrece un elemento de reservas fácil de añadir para que puedas programar citas y reservas directamente a través de tu sitio.

Paso #5: Elegir un nombre de dominio Cuando crees tu nuevo sitio de Wix, te invitarán a escoger un nombre de dominio URL. Puedes elegir cualquier nombre que desees (que no esté elegido ya) pero en el plan gratuito o Connect Domain, tu nombre de sitio web se verá así: En todo caso, si tienes un negocio lo más probable es que tengas un plan Unlimited o superior, pero también es buena idea escogerlos solo por el nombre de dominio personalizado. Tener un nombre de dominio personalizado le da a tu negocio mayor credibilidad.

La única desventaja de tener un nombre de dominio personalizado a través de Wix es que si quieres mudar tu sitio a un alojamiento diferente y otra plataforma de sitio web en el futuro, será algo difícil. Puede que no puedas llevarte tu nombre de dominio cuando te mudes y podrías verte forzado a quedarte con Wix más tiempo del que deseas. Puedes comprar un nombre de dominio personalizado de un servicio de dominios, para que tengas más flexibilidad sobre las opciones de alojamiento de tu sitio web en el futuro, y luego integrarlo a Wix (que se puede hacer).

Paso #6: Añadir un blog Añadir un blog a tu sitio web te da un lugar para compartir tus pensamientos y reflexiones sobre la industria de tu negocio, lo que te permite tener un suministro constante de nuevo contenido, y le da a tus clientes y fans un lugar donde ir para buscar nueva información y actualizaciones.

Un blog también ofrece oportunidades para usar palabras clave que te permitan mejorar tu ranking de SEO en la industria del negocio.

El creador de sitios web de Wix incluye un módulo de blog predeterminado con el que puedes añadir un blog a cualquier sitio web. Puedes personalizar el esquema de colores, disposición e imágenes en tu blog tan fácilmente como el resto de tu sitio web. Si estás nervioso porque no sabes cómo vas a pensar en suficiente contenido para tu blog, puedes usar uno de los elementos de blog de Wix para integrar comentarios de Disqus y Facebook, o sacar material de un feed RSS.

Paso #7: Garantizar que tu sitio es adaptable a móviles • En esta era de móviles, los clientes potenciales tienen tantas probabilidades de visitar tu sitio web desde su smartphone como desde su ordenador de escritorio o portátil, así que es esencial que garantices que tu sitio web es atractivo y accesible para usuarios de móvil y tabletas. Afortunadamente, Wix ofrece la oportunidad única de diseñar tu sitio web para clientes de ordenador y móvil. Una vez hayas creado tu sitio, previsualizalo para ver desde el móvil o tableta antes de lanzarlo, y ajusta la posición y tamaño de los elementos según corresponda.

Paso #8: Comprobar la usabilidad de tu sitio web • Antes de que lances tu sitio, deberías comprobar su usabilidad y facilidad de navegación. Es fácil centrarte planificando imágenes hermosas y creando un sitio web estéticamente agradable, pero es mucho más importante tener un sitio fácil de navegar. Asegúrate de que todo tu texto sea fácil de leer en una fuente clara que sea lo suficientemente grande y de un color que no moleste la vista. Tener una jerarquía web clara, menús sencillos y navegación intuitiva es mucho más importante que las mejores imágenes o vídeos.Una buena idea es recorrer el viaje del usuario en tu sitio web para garantizar que los clientes pueden ir a donde quieren sin demasiadas distracciones y preguntas.

Paso #9: Optimizar para SEO • El creador de sitios web de Wix incluye un juego completo de herramientas de SEO que te ayudarán a optimizar tu sitio web para los motores de búsqueda. Es una buena idea realizar una investigación básica de palabras clave para tu negocio, para saber qué palabras y frases son las más buscadas, y así puedas incluirlas en tu contenido. Wix facilita introducir meta etiquetas, metadatos y textos alternativos para imágenes. Toda esta información es muy valorada por los motores de búsqueda.

• Las opciones de editores de Wix, la interfaz intuitiva y una selección gigantesca de módulos, apps y elementos de sitio web, hacen que crear un sitio web básico con Wix sea fácil para todos, incluso si no tienen ninguna experiencia de diseño web.