Tema:7 -Identificación de riesgos en internet.


TEMA:7

 Crear entornos digitales a través del diseño de una red de aprendizaje para la comunicación y el intercambio de información mediante el uso de herramientas de procesamiento de información en la nube.





."Identificación de riesgos en Internet"

El diseño web es una actividad que consiste en la planificación, diseño e complementación de sitios web.  Un diseñador web tiene que ver con cómo crear y desarrollar. un pagina web así también como los clientes interactúan con ella. Los buenos diseñadores web saben cómo poner juntos los principios de diseño para crear un sitio que se vea muy bien. También entienden acerca de la usabilidad y cómo crear un sitio que los clientes quieren navegar alrededor de porque es tan fácil de hacer.




QUE ES EL CONOCIMIENTO TECNOLÓGICO DE INTERNET?


El conocimiento tecnológico se refiere a un conjunto de saberes dirigido a la creación, manipulación y evaluación de artefactos tecnológicos.


Es una forma de conocimiento que va más allá de la observación de los fenómenos existentes. Su interés está puesto en la creación de nuevos artefactos o sistemas y en la solución de problemas o necesidades a través de nuevos instrumentos tecnológicos.

conocimiento tecnológico

Tiene como fundamento la inventiva y la innovación, ya que, está orientado a la fabricación de cosas que no existen. Artefactos posibles que están basados en principios naturales y científicos pero que requieren de la chispa creativa para volverse realidad.

Este tipo de conocimiento nace de la curiosidad, de un problema para resolver o una necesidad que requiere satisfacción. Por eso es fundamental en el desarrollo de la sociedad y tiene un gran impacto sobre ella.

Grandes hitos históricos han comenzado con el desarrollo de un dispositivo tecnológico. Una muestra de ello es la Revolución Industrial, cuando las máquinas llegaron para agilizar los procesos de producción, pero también para transformar toda la organización de la sociedad.




¿Qué es Hipertexto?

Hipertexto. En informática, es el nombre que recibe el texto que en la pantalla de un dispositivo electrónico conduce a otro texto relacionado. La forma más habitual de hipertexto en informática es la de hipervínculos o referencias cruzadas automáticas que van a otros documentos (lexias). Si el usuario selecciona un hipervínculo el programa muestra el documento enlazado.


                                                        Contenido
 [ocultar] 
1 Generalidades
2 Origen
3 Definiciones
4 Estructura
4.1 Estructura básica
4.2 Estructura mediana
4.3 Estructura compleja
5 Hipertexto como documento con hiperenlaces
6 Hipertexto y la capacidad de integración fragmentaria
7 Fuentes
Generalidades
Otra forma de hipertexto es el strechtext que consiste en dos indicadores o aceleradores y una pantalla. El primer indicador permite que lo escrito pueda moverse de arriba hacia abajo en la pantalla. Es importante mencionar que el hipertexto no esta limitado a datos textuales, podemos encontrar dibujos del elemento especificado, sonido o vídeo referido al tema.


El programa que se usa para leer los documentos de hipertexto se llama “navegador”, el "browser", "visualizador" o "cliente" y cuando seguimos un enlace decimos que estamos navegando por la Web. El hipertexto es una de las formas de la hipermedia, enfocada en diseñar, escribir y redactar texto en una media.




¿Cuál es la estructura básica de un documento Web o HTML?
   

Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que esté en medio será la página web. Dentro de <html></html> se encuentran 2 partes diferenciadas.La primera <head></head> es la cabecera de la página. Aquí irán cierta información que no es directamente el contenido de la página. Aquí se pone el título de la página, los metadatos, estilos, código javascript (todo esto se estudiará en capítulos venideros). La primera que se suele estudiar es <title></title>, que indica el título de la página (lo que el navegador pone en la parte superior izquierda).

La segunda parte es <body></body>. Aquí va propiamente el contenido de la página: fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de la página anterior, el siguiente código, podemos cambiar el título de la página.
<html>

<head>

<title>Esto es el t&iacute;tulo de la p&aacute;gina.</title>

</head>

<body>

Hola mundo!<br>

<b>Esto es negrita.</b><br>

<i>Y esto it&aacute;lica.</i><br>

</body>

</html>

Para verlo, puedes ver el código fuente de esta misma página. Para eso, haz clic en el botón derecho => ver código fuente, y verás así el código HTML de la página:
Observad el título en la parte superior izquierda de la página. Además, dentro de <body></body> distinguimos varias etiquetas:
<br> => Indica salto de línea. En HTML un salto de línea normal (púlsando la tecla Enter) no produce un salto de línea en el resultado. Es necesario escribir <br> (u otra etiqueta similar).
<b></b> => Indica comienzo y fin de negrita.
<i></b> => Itálica.
También observamos el código &iaacute; => Esto indica que queremos poner una “i” con acento, es decir, “í”. Esto se explicará en un capítulo posterior.

Es importante mencionar que las etiquetas se pueden escribir indistintamente en mayúsculas o minúsculas, es decir <b>Esto es negrita.</b> y <B>Esto es negrita.</B> produce el mismo resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /) debe cerrarse (es decir, poner su equivalente con el símbolo /), si no, el navegador podría dar resultados inesperados. Excepciones a esto son algunas etiquetas que no lo necesitan, como <br> o <hr>.




¿Qué programas podemos utilizar para el diseño de una página web?



Contenido [Ocultar]

1 Prueba GRATIS! OK Builder!
2 Editores WYSIWYG para Crear Páginas Web
2.1 Adobe Dreamweaver
2.2 WebSite X5 Evolution
2.3 Características de WebSite X5 Evolution
2.4 Avanquest WebEasy Professional
2.5 MAGIX Web Designer 11
3 Editores Visuales para Crear Páginas Web
3.1 Jimdo
3.2 Wix
3.3 Weebly
4 ¿Cuál es el Programa para Crear Páginas más Fácil de Usar?
4.1 OK Builder
4.2 Conclusiones


¿Qué es un Administrador de sitios en la Web?

Los administradores de sitios web 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. Trabaja estrechamente con diseñadores y programadores y con los departamentos de ventas y marketing.
Alguno administradores también diseñan y configuran los sitios. Se los conoce también como administradores web o webmasters


Actividades laborales
Los administradores de sitios web planifican y organizan el desarrollo técnico de uno o más sitios web. Esto puede incluir seleccionar el hardware y el software que permita a la empresa realizar negocios a través de internet (el denominado comercio electrónico).


Las responsabilidades principales de los administradores incluyen garantizar que el sitio web funciona correctamente y de forma precisa y que está actualizado. Esto es clave ya que las organizaciones usan los sitios web para proporcionar un servicio y mostrar su imagen y su esencia.

Perfil profesional

  • Como administrador de sitios web, deberá:
  • Disponer de buenas habilidades de planificación, priorización y organización.
  • Tener habilidades de TI.
  • Tener buenas habilidades comunicativas.
  • Tener la habilidad de trabajar estrechamente con diferentes personas como diseñadores, programadores y personal de marketing y ventas.
  • Tener buenas habilidades de liderazgo.
  • Ser capaz de mantener la calma y trabajar bien bajo presión.
  • Prestar atención a los detalles.
  • Tener buenas habilidades con relación a la expresión escrita.
  • Tener habilidades numéricas para reunir estadísticas.
  • Ser creativo y entusiasta.



Competencias

  • Aptitudes para el liderazgo.
  • Aptitudes para la comunicación verbal y escrita.
  • Aptitudes para la gestión de proyectos.
  • Aptitudes para la planificación.
  • Atiende los comentarios y quejas de los usuarios de los sitios web.
  • Capacidad de análisis.
  • Capacidad para priorizar tareas.
  • Capacidad para trabajar en equipo.
  • Capacidades organizativas.
  • Capaz de entablar buenas relaciones con la gente.
  • Capaz de prestar atención al detalle.
  • Capaz de trabajar bajo presión.
  • Conocimientos especializados en informática.
  • Creativo.
  • Destrezas en informática.
  • Entusiasta.
  • Experiencia y conocimientos en software.
  • Habilidad para los negocios.
  • Habilidad para los números.
  • Habilidades interpersonales.
  • Prepara mensualmente estadísticas de uso.
  • Responsable de la seguridad del sitio web.
  • Se asegura de que la gente pueda encontrar los sitios web con facilidad con motores de búsqueda.
  • Se asegura de que la información de los sitios web sea correcta y esté actualizada.
  • Se asegura de que la información que se incorpora a un sitio web sigue su mismo estilo.
  • Se asegura de que los sitios web cumplen con la normativa.
  • Trabaja con personal de otros departamentos.
  • Trabaja para varios clientes.
  • Tranquilo.

Estudios oficiales
A continuación se relacionan algunos de los estudios oficiales (ciclos formativos o carreras universitarias) que permiten ejercer esta profesión. Hay que tener en cuenta que dependiendo del ámbito de especialización, es posible que se tenga que complementar la formación con otros cursos más específicos del sector. La formación continua es un aspecto clave para la mejora profesional.


¿Que son los Enlaces (vínculos) y cuantos tipos hay?

alternate

Si el elemento es <link>y el relatributo también contiene el stylesheettipo, el enlace define una hoja de estilo alternativa ; en ese caso, el titleatributo debe estar presente y no ser la cadena vacía.

<a>, <area>,<link> Ninguno .
archives Define un hipervínculo a un documento que contiene un enlace de archivo a este. Por ejemplo, una entrada de blog podría enlazar a una página de índice mensual de esta manera. 

Nota: Aunque se reconoce, el singular archivees incorrecto y debe evitarse. <a>, <area>,<link> Ninguna.
author Define un hipervínculo a una página que describe al autor o proporciona una manera de contactar al autor. 


Si uno o varios uptipos de enlace también están presentes, el número de estos upindica la profundidad de la página actual en la jerarquía. <a>, <area>,<link> Ninguna.
last Indica que el enlace lleva a la última de recursos de la secuencia de la página actual está en. 

Nota: Otros tipos de enlaces relacionados con la vinculación de los recursos en la misma secuencia son first, prev, next. 

Aunque reconocido, el sinónimo endes incorrecto y debe ser evitado. <a>, <area>,<link> Ninguna.
license Indica que el hipervínculo conduce a un documento que describe la información de la licencia. Si no está dentro del <head>elemento, el estándar no distingue entre un hipervínculo que se aplica a una parte específica del documento o al documento en su totalidad. Sólo los datos en la página pueden indicar esto. 

Nota: aunque reconocido, el sinónimo copyrightes incorrecto y debe ser evitado. <a>, <area>,<link> Ninguna.
manifest Indica que el archivo vinculado es un manifiesto de aplicación web . <link> <a>, <area>
modulepreload Inicia la carga temprana (y de alta prioridad) de los scripts del módulo. <link> <a>, <area>
next Indica que el enlace lleva a la siguiente recurso de la secuencia de la página actual está en. 

Tenga en cuenta que cuando noopenerse utiliza, los nombres de destino no vacíos distintos de _top, _selfy _parenttodos se tratan como _blanken términos de decidir si abrir una nueva ventana / pestaña.


<a>, <area> <link>
pingback Define un URI de recurso externo para llamar si uno desea hacer un comentario o una cita sobre la página web. El protocolo utilizado para realizar dicha llamada se define en la especificación Pingback 1.0 . 

Nota: si el X-Pingback:encabezado HTTP también está presente, reemplaza el <link>elemento con este tipo de enlace. <link> <a>, <area>
preconnect

Nota: Las preguntas frecuentes de Link Prefetch tienen detalles sobre qué enlaces se pueden obtener previamente y sobre métodos alternativos. <a> Sin aplicarse , sin aplicarse ,
<area> 
<link> Ninguna.
preload Le dice al navegador que descargue un recurso porque este recurso se necesitará más adelante durante la navegación actual. Consulte Precarga de contenido con rel = "precarga" para obtener más detalles. <link> <a>, <area>

<a>, <area>,<link>

<link> ???sidebar Indica que el hipervínculo conduce a un recurso que sería más adecuado para un contexto de navegación secundario, como una barra lateral . Los navegadores que no tengan ese contexto ignorarán esta palabra clave. 

stylesheet

Si se usa en combinación con la alternatepalabra clave, define una hoja de estilo alternativa ; en ese caso, el titleatributo debe estar presente y no ser la cadena vacía. <link> <a>, <area>
tag Indica que el hipervínculo se refiere a un documento que describe una etiqueta que se aplica a este documento. 




¿Cuáles son los tipos formatos de Imágenes compatibles con la Web?
Los formatos

Para la web existen 4 formatos de imágenes: jpg, png, gif y svg. Cada uno tiene sus caracterísitcas y ventajas propias que voy a detallar. Optimizar una imagen significa guardarla en el formato más conveniente y logrando el menor peso posible del archivo final. El peso de los archivos en la web es importantísimo ya que influye en la velocidad de descarga del sitio, una variable que puede decidir si el usuario se queda o se va.

Formato JPG:
El formato JPG es el indicado para guardar imágenes fotográficas o con degradados. Este formato admite millones de colores (24 bits) y mantiene el modo de color en RGB de la imagen original. Al guardar en JPG se debe elegir una calidad de compresión. Conviene comprimir lo más posible, mientras la calidad de la imagen sea aceptable (generalmente entre 40 y 60). Cuanto menos contraste de luces tenga la imagen, más compresión se logra. Si a una imagen se le aplica el efecto desenfoque (blur), el archivo resulta mucho más liviano.

Las galerías de fotos se hacen con imágenes JPG. Si en mi boceto tengo planteada una galería de fotos que presento en miniaturas y al cliquear se amplían, esas imágenes no las exporto desde el boceto, sino que simplemente ahi decido el tamaño y la ubicación, pero el recorte definitivo lo hago desde Photoshop, con todas las imágenes abiertas, recortando y optimizando cada una en los dos tamaños (miniatura y ampliada).

Formato PNG:
La extensión PNG es la más usada para iconos o marcas. No pudo ser aprovechada durante muchos años ya que IExplorer no reconocía su mayor ventaja: la transparencia. Desde que los diseñadores dejamos de preocuparnos por las versiones anteriores al IE8, lo estamos aprovechando realmente. La transparencia de PNG a diferencia del GIF no tiene halo, logrando una calidad de imagen mucho mayor y simplificando el maquetado, permitiendo independizar las imágenes de sus fondos.

El PNG tiene dos opciones: PNG8 (con paleta de color reducida hasta 256 colores) y el PNG24 ideal para transparencias.

Formato GIF:
El GIF comprime mejor las imágenes con plenos de color originados en dibujos vectoriales. Este formato reduce la paleta a 256 colores como máximo. En el momento de guardar una imagen como gif, los más importante es decidir la cantidad de colores porque de esto depende el peso del archivo: cuanto menos colores, más liviano. Las imágenes gif además pueden ser transparentes y animadas.

Los archivos GIF permiten seleccionar áreas transparentes en el momento de exportar. La imágenes transparentes necesitan un tratamiento especial: los bordes de la imagen deben ser suavizados hacia el color sobre el que irá colocado en el HTML, de lo contrario la imagen resultará con bordes duros (serruchados) o suavizados con halos de color diferente al fondo. Para esto se utiliza la opción Mate que permite seleccionar el color similar al fondo.

Actualmente este formato sólo se usa para animaciones simples.

Formato SVG:
Es el único formato vectorial y por lo tanto escalable para web con la enorme ventaja que eso significa para hacer un sitio adaptable.

Se está empezando a usar recién ahora ya que el IE8 no lo reconoce. El archivo SVG se guarda directamente desde Illustrator y el resultado es un archivo que se puede ver en el navegador, pero que también se puede abrir en el Sublime porque es puro código. Esto le da infinitas posibilidades de uso para web, especialmente combinado con el lenguaje javascript.

Cómo exportar una imagen en Photoshop


Se usa la opción: Guardar para web, y en ese momento se selecciona el formato y según el archivo, muestra las posibilidades de compresión de cada uno. Ejemplo:



¿Cuáles son las etiquetas para Insertar tablas, instrucciones HTML y videos?




AtributoValorDescripción
srcDirección URLVideo a reproducir. Obligatoria si actua como etiqueta contenedora.
posterDirección URLMuestra una imagen a modo de presentación.
preloadauto | metadata | noneIndica como realizar la precarga del video.
mediagroupnombreEstablece un nombre para un grupo de contenidos multimedia.
autoplay-Comienza a reproducir el video automáticamente.
loop-Vuelve a iniciar el video cuando finaliza su reproducción (bucle).
muted-Establece el video sin sonido (silenciado).
controls-Muestra los controles de reproducción. Por defecto no se muestran.
widthtamañoIndica el tamaño de ancho del video.
heighttamañoIndica el tamaño de alto del video.

¿Qué es la nube?

La nube de Internet es un nuevo modelo de uso de los equipos informáticos. Traslada parte de tus archivos y programas a un conjunto de servidores a los que puedes acceder a través de Internet. Permite almacenar tus cosas en esos servidores. Y abrirlas, utilizarlas o usar programas que no están en tu equipo, sino en ellos.

Lo que normalmente estaría almacenado en tu PC (tus programas o tus archivos, por ejemplo) pasa a estar en los servidores que forman la nube.


Por eso se habla en inglés de Cloud Computing, que suele abreviarse simplemente como The Cloud.

Ejemplos de uso
Es muy probable que ya estés utilizándola aunque no seas consciente. Piensa en tu cuenta de Facebook, Gmail, Hotmail, Twitter, Pinterest, etc. En todos esos y otros casos tienes cosas tuyas, como mensajes, fotos o vídeos almacenados en los servidores de la red social o proveedor de e-mail que sea.

Para acceder a ellos y utilizarlos te conectas a Internet y te identificas con tu nombre de usuario y contraseña. Ninguno de esos datos tuyos ni las aplicaciones con las que los manejas en Internet están en tu equipo. Todo se guarda en la nube y se usa con los programas almacenados también en ella.

Ventajas que tiene
Acceso desde cualquier sitio y con varios dispositivos: Tus programas y archivos están en la nube, con lo que te basta una conexión a Internet para acceder a ellos y usarlos de modo remoto. Puedes hacerlo mediante un PC fijo, un laptop, un tablet PC, un iPad, un smartphone.

Todo el software está en un solo sitio. Eso te evita tener que instalar tú los programas en tu PC, tu laptop o todos y cada uno de los múltiples equipos de una red. También te evita preocuparte por actualizar los programas o hacer upgrades. Tu proveedor de la nube se encarga también de eso por ti. Casi el único programa que necesitas tener instalado es un navegador de Internet con el que acceder a ella y trabajar.


Ahorro en software y hardware. Un mismo programa lo comparten muchos usuarios, sin necesidad de tener que comprar una copia individual para cada uno de ellos. Eso abarata el precio de las aplicaciones. Como todos esos programas se ejecutan desde fuera de tu PC y todo se guarda también fuera, no hace falta gastar mucho dinero en un PC muy potente y con un disco duro grande.

Ahorro en mantenimiento técnico. Sin programas instalados o redes de PC complejas que configurar y mantener, los usuarios deben tener menos problemas informáticos. El proveedor de la nube se encarga del mantenimiento técnico de sus propios servidores. El usuario no necesita saber crear redes para compartir recursos, porque puede hacerlo a través de ella.


Escalabilidad: Un sistema informático es escalable si puede crecer para responder a necesidades más exigentes. Esto es crucial sobre todo para las empresas. Con esta tecnología la escalabilidad está garantizada sin tener que invertir más de lo necesario en previsión de que las necesidades aumenten. Si un usuario necesita más o menos capacidad de proceso o de almacenamiento, el proveedor se lo facilitará casi en tiempo real. Eso optimiza los recursos en todo momento.


¿Seguridad? Hay una gran discusión sobre si es o no más segura que los modelos tradicionales. En principio debería serlo. Los servidores de Microsoft, por ejemplo, deben ser más seguros que mi PC o el tuyo. Pero las cosas no son tan simples. Sigue leyendo...




¿Como puedes crear una red social y que es? 


1. Elgg

Elgg es una de las herramientas más recomendadas por sus múltiples funcionalidades y soporte multilenguaje. Permite a las empresas, escuelas, universidades y asociaciones crear sus propios entornos sociales con todas las características y aplicaciones más comunes.

Elgg es de código abierto. Integra RSS, perfiles para usuarios, soporte para celulares, personalización mediante plantillas y plugins y usa Open ID. La ONG internacional Oxfam, el gobierno australiano, entre otros, la usan.

2. Budypress

BuddyPress también es un software libre y open source. Su comunidad de programadores se encarga de dar soporte a su código, crear plugins y temas.

A diferencia de los servicios alojados, BuddyPress permite mantener el control de tu sitio y crear una experiencia única, totalmente personalizada. Pueden crearse perfiles para usuarios, grupos, integrar un sistema de mensajería, blogs, foros y chat.

3. Pligg

Pligg es una plataforma de red social con la que puedes generar sitios como Digg y Menéame. Una red colaborativa con sistemas de votación en donde los usuarios comparten sus contenidos y los valoran.

Integra perfiles de usuarios, correo, sistema de comentarios, RSS, soporte multilenguaje, entre otros. Para hacer uso de esta herramienta se requieren PHP y MySQL.

4. AroundMe

AroundMe es un proyecto que nace para brindar software libre para ayudar a que las organizaciones sociales en todo el mundo se comuniquen y comparten en comunidad.

Permite crear sitios web de colaboración social (como Ning, MySpace, Yahoo o Google groups). Cada grupo puede crear una página web, libro de visitas, blog, foro y wiki. Es multilenguaje y soporta personalización mediante temas.

Cada grupo es totalmente personalizable utilizando XHTML, CSS, JavaScript y PHP. Se puede interactuar con otras redes sociales y actualizarlas o revisar sus últimas noticias.

5. SocialEngine

SocialEngine es la herramienta de pago mas usada para crear redes sociales, esta desarrollada en PHP. La secuencia de comandos le permite crear fácilmente su propia red social o comunidad en línea. Incluye grupos personalizados, álbumes de fotos, mensajes, perfiles de miembros, videos, noticias. Usa arrastrar y soltar como funcionalidad para administrar el CMS, y mucho más.

6. Mahara

Mahara es un sistema de código abierto que permite crear comunidades en línea y redes sociales a través de grupos, blogs y foros.

Los usuarios pueden crear sus portafolios con carpetas y subcarpetas y cargar múltiples archivos, gestionar un blog, crear listas de amigos, incluye un constructor de currículum vitae.

7. CrowVine

CrowVine ofrece un entorno social muy fácil de crear para fines más específicos. Ayuda a organizadores de conferencias y seminarios a generar una comunidad alrededor de su evento.

Los usuarios pueden crearse perfiles. Integra un sistema de preguntas y comentarios, búsqueda mediante etiquetas, un sistema de mensajería y contacto, grupos de interés. Además pueden compartir un calendario con las fechas del evento y agregar un sistema de puntuación. Permite exportar contactos y usa OpenID.

8. SocialGO

SocialGo te permite crear una red social totalmente gratis. Es altamente personalizable con plugins y temas. Puedes crear para tu comunidad perfiles de usuarios, Blogs, foros, moderación de contenidos, compartir imágenes y vídeos, chat, correo interno, boletines informativos y calendarios. Ofrece integración con Facebook y Twitter.

9. Lovdbyless:

Lovbyless es otra solución de código abierto escrito en Ruby on Rails. Los usuarios pueden seguir a otros usuarios, realizar comentarios en los perfiles, enviar mensajes internos, crear blogs, galería de fotos, buscar amigos y ver su actividad reciente. Ofrece integración con Flickr y YouTube.

10. iSocial

iSocial es una forma rápida y fácil para crear una red social. Incluye soporte para OpenID y autenticación abierta, así como Facebook Connect. Una vez que la red esté en funcionamiento, los usuarios pueden compartir archivos multimedia como fotos y vídeos y añadir eventos.


































































Comentarios

Entradas más populares de este blog

9.- Programación en pseudocódigo y estructurado

tema:5Uso de diferentes fuentes de información

8.-Identificación de riesgos en internet.