Redes sociales.

En está ocasión vimos la importancia de las redes sociales en las empresas.

Estas fungen como una de las principales herramientas de publicidad, por este medio los usuarios (clientes) pueden interactuar con la pagina de alguna empresa, ya sea para comprar, suscribirse, opinar, etc.

Hay paginas que se utilizan no solo como medio de diversión si no como medio de atracción publicitario, tal es el caso de Facebook, es uno de los medios principales que las empresas usan ya que es cotidiano el acercamiento a el, donde personas de todas edades y con necesidades distintas usan. 

Geolocalización

Seguimos con JavaScript. ahora para realizar un mapa de localización, trabajando con HTML, CSS y JavaScript.

La API de geolocalización de Javascript permite obtener la geoposición del usuario.

Algunas cosas a tener en cuenta a la hora de utilizar esta API son:

• La geolocalización es compatible con la mayoría de navegadores modernos, tanto de mobile como de escritorio. Los casos mas "problemáticos" de incompatibilidad pueden ser IE8 e inferiores, y Opera Mini
• La precisión de este método depende del navegador/dispositivo. Por ejemplo Chrome utiliza los Google Location Services e Internet Explorer los Microsoft Locacion Service, por lo que los resultados pueden variar en un mismo dispositivo de un navegador a otro.
• Cuando se llama al método getCurrentPosition el navegador mostrará una ventana al usuario solicitando permiso para obtener su posición.

Este ejemplo muestra como obtener la posición (latitud y longitud) del usuario y posicionarla sobre un mapa de GoogleMaps.

Calculadora con JavaScript

Como lo vimos anteriormente con JavaScript se puede realizar operaciones aritméticas. 

en este caso realizaremos una calculadora con las funciones básicas. 

Los operadores son símbolos con los que, como su nombre indica, se pueden realizar operaciones con variables, valores constantes o variables y valores constantes. 

En este caso utilizaremos los aritmeticos. 

• Suma 

var total = sumando1 + sumando2;
    // asigna a total la suma 
    // de las otras dos variables

• Resta

var total = minuendo - sustraendo;
    // asigna a total la resta
    // de las otras dos variables

• Multiplicación 

var total = factor1 * factor2;
    // asigna a total el producto 
    // de las otras dos variables

• División 

var total = dividendo / divisor;
    // asigna a total el cociente 
    // de las otras dos variables

Operaciones con JavaScript

Ya que conocemos un poco mas sobre JavaScript, empezaremos a realizar operaciones aritméticas en este. 

Tales como la multiplicación. 

Por ahora solo veremos un formulario, en el cual tenga una operación predeterminada y que el usuario pueda responder a dicha operación, y que por ende nos envié una alerta (mensaje) indicándonos si es correcto o no la respuesta obtenida. 

ejem:

function CompruebaValor(Formu){

if (Formu.respuesta.value == "100")

alert("Respuesta correcta");

else {

Formu.respuesta.value = "";

alert("Intenta de nuevo")

}

}

Java Script

Ahora empezamos a trabajar con Java Script en conjunto con HTML.

¿Que es JavaScript? Es un lenguaje interpretado, multiplataforma, orientado a eventos con manejo de objetos, cuyo código se incluye directamente en el mismo documento, usado para el desarrollo de aplicaciones cliente-servidor en paginas HTML.

JavaScript proporciona los medios para:

• Controlar las ventanas del navegador y el contenido que muestran.
• Programar páginas dinámicas simples sin tener que matar moscas a cañonazos de Java.
• Evitar depender del servidor Web para cálculos sencillos.
• Capturar los eventos generados por el usuario y responder a ellos sin salir a Internet.
• Simular el comportamiento de las macros CGI cuando no es posible usarlas.
• Comprobar los datos que el usuario introduce en un formulario antes de enviarlos.
• Comunicarse con el usuario mediante diversos métodos.

Todo el código de JavaScript debe explicitarse en la página HTML según el formato:

<SCRIPT Language="JavaScript"> <!-- // Aquí irá su código // --> </SCRIPT>

La característica de JavaScript es que, no es necesario declarar el tipo de las variables, argumentos de funciones ni valores de retorno de las funciones. El tipo de las variables cambia implícitamente cuando es necesario.

GALERÍA

En esta ocasión usamos la propiedad float, para hacer mas dinámica nuestra pagina web.

Float en simples palabras es una propiedad de CSS que nos permite “hacer flotar” un elemento a una posición relativa rompiendo el esquema normal de la pagina.
Nos permitirá con facilidad crear paginas con 2 o más columnas, entre muchas otras cosas.

Esta propiedad tiene 3 valores importantes:

• Left: Flota el elemento a la Izquierda.
• Right: Flota el elemento a la Derecha
• None: Que el elemento no Flota.

Con estas propiedades se vería estructurada de esta manera nuestra pagina de internet. 

 

Propiedad Display

Display es la propiedad más importante para controlar estructuras. Cada elemento tiene un valor de display por defecto dependiendo de que tipo de elemento sea. El valor por defecto para la mayoría de los elementos es usualmente block (de bloque) o inline (en línea). Un elemento que es block es comunmente llamado elemento block-level. Un elemento inline siempre es llamado elemento inline.

Estos son algunos de sus valores.

• inline: Predeterminado. Muestra un elemento como un elemento en línea.
• block: Muestra un elemento como un elemento de bloque.
• inline-block: Muestra un elemento como un contenedor de bloque a nivel de línea. 
• inline-table: El elemento se muestra como una tabla de nivel de línea.
• run-in: Muestra un elemento, ya sea como bloque o en línea, dependiendo del contexto.
• none: El elemento no mostrara nada. 

Todos estos elementos permiten controlar la forma de visualizar un elemento e incluso ocultarlo. 

Diseño Responsivo

Seguimos trabajando con HTML y CSS3 en combinación.
En esta ocasión vimos algunas de las propiedades de CSS3. 

Opacity: Esta propiedad nos permite incluir transparencias en el diseño de la página. El valor de está propiedad se establece mediante el número decimal comprendido entre 0.0 y 1.0. 

Border-style: Se refiere al tipo de borde ya sea de la página, imagen, texto, etc.
Aquí se ve algunos de los estilos de bordes que podemos aplicar a nuestra página derivados de esta propiedad. 

Border-width: Se refiere al grosor de los bordes.

Border-color: Al color de bordes.

Border-radius: Redondea nuestros bordes.

Background

En esta clase ya vimos nuestra pagina web mas dinámica  con mas colores e incrustraciones de imágenes, doodles, etc.
Utilizando para ello la propiedad de Background. 
Primero realizamos nuestro código en html el cual debía contener, secciones por párrafos (asides) e ilustraciones (imágenes) principalmente. 
Por consecuente hicimos nuestro hoja de estilo cascada (scc3) este contiene las propiedades de Background. las que utilizamos fueron las sig. 

• background-attachment: Establece si una imagen de fondo está fija o se desplaza con el resto de la página.
• background-color: Propiedad que establece el color de fondo de un elemento. 
• background-image: Propiedad que establece una o varias imágenes de fondo de un elemento.
• background-repeat: Propiedad que se establece si / cómo se repite una imagen de fondo.
• background-size: Propiedad  que especifica el tamaño de las imágenes de fondo.

NOTA: Recordemos que en SCC3 debemos llevar un orden alfabetico

CSS3

¿Que es CSS3?

Son hojas de estilo en cascada (Cascading Style Sheets) en un lenguaje de hojas de estilos usado para describir la presentación semántica (el aspecto y formato) de un documento escrito en lenguaje de marcas. Su aplicación más común es dar estilo a páginas web escritas en lenguaje HTML.

La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "<style>".

Veamos también algunas de sus propiedades tales como:

• Tipo de letra (fuente).

1. font (propiedad compuesta)
2. font size (tamaño)
3. font-style (cursiva)
4. font-family (tipo de letra).

• Texto

1. color (color del texto)
2. direction (dirección del texto)
3. letter espacing (espacio entre caracteres)
4. line height (espacio entre lineas)
5. text align (alineación del texto)

• Bordes

1. border (cuatro bordes simultaneamente)
2. border-top (borde superior)
3. border-right (borde derecho)
4. border-bottom (borde inferior)
5. border-left (borde izquierdo)
6. border-color (color de los bordes)

Formulario

En esta actividad vimos la importancia de crear un formulario, principalmente es para interactuar con el usuario, al fin de que el mismo se sienta familiarizado con la pagina.

 

La etiqueta para esta actividad es

<form>

y a su vez tiene sus propios atributos

<action> El archivo que recibe los datos.

<method> Información puede ser por

                  GET: Se verán todos los atributos.

                  POST: No se vera toda la URL.

<name> Nombre

<enctype> Cuando se requiera adjuntar archivos

<input> Para introducir información.

 

Estas solo son algunas de las propiedades para crear un formulario.

Mi primera página web

He realizado mi primera pagina web practicando con etiquetas básicas.
algunas de ellas son:

• Doctype: Se manifiesta como una cadena corta de caracteres de marcado.
• Head: Contenedor para información global acerca del documento.
• Meta: Etiquetas html que se incorporan en el encabezado de una pagina web. Su propósito es el de incluir información de referencia sobre la página.
• Title: Provee un título para el documento entero.
• Body: Contenedor para todo el contenido representable del documento.
• Header: Muestra información de cabecera útil para un documento (encabezados)
• Article: Se utiliza cuando al mover el contenido a otro lugar de la página, no afecte al resto de la página

Cada vez que insertemos una etiqueta debe ser entre el menor y mayor que < > y al cerrar una etiqueta seria de la siguiente forma </> con una diagonal en medio del menor y mayor que.

También se debe respetar el espacio de cada Tag es decir al abrir y cerrar en la misma línea de dicha etiqueta.

Mapa de Navegación - Mapa de Sitio

¿Que son los mapas de navegación y de sitio?

El mapa de sitio es una lista de paginas web que un usuario visitante puede acceder, guiándolo por dicha pagina tipo (índice).

El mapa de navegación es lo contrario al mapa de sitio, este es exclusivo de los programadores o diseñadores, para organizar la presentación de la información expresada en un diagrama.


Diagrama ejemplo:

NOTA. No se ve reflejado como tal en la pagina web, pero es la estructura para la realización de una.

El día de hoy en la clase aprendimos a realizar un Blog.

 

Para crear un blog en Google es necesario tener una cuenta de correo en Gmail.

 

Los Blogs son espacios web utilizados para compartir e interactuar en la red.

 

En dichos blogs se utiliza el HTML que es un lenguaje de marcado y se utiliza para el desarrollo de paginas web. El texto en el se crea a partir de etiquetas las cuales se especifican por corchetes o paréntesis angulares < >.

 

Los artículos de los blogs pueden contener: texto, imágenes, enlaces, audios, animaciones, etc. también podemos administrar el contenido de una manera sencilla y practica.

Cuentan con un apartado de comentarios en el cual los lectores envían sus comentarios y así establecer un debate sobre los artículos publicados!!