Programación

CarreraTécnica 

Programación 

Módulo 3. Desarrolla aplicaciones Web y Móviles.272

Sub Modulo1. Desarrolla Desarrolla Aplicaciones Web. 144horas/16 semanas 9 horas 

Manual de Apuntes y Cuadernillo de Trabajo 

Cuarto Semestre 

Titular de la Materia:

Rosa Rico Esparza 

Nombre del Alumno:

José Roberto Hernández Palacios 

UNIDAD 1. DISEÑO DE INTERFAZ

1.1 Conocer los conceptos básicos del Diseño y Desarrollo Web

1.2 Teoría del Color 

1.3 Servicios de Internet 

1.4 Protocolos y Lenguajes

1.5 Etiquetas y sus Atributos

1.6 Cuerpo de una Pagina Web 

1.7 Elaborar Paginas HTML Nativo 

UNIDAD 2 DESARROLLA APLICACIONES WEB ESTÁTICAS 

1.1 HTML

1.2 HTML 5

1.3 Etiquetas 

1.4 Tablas 

1.5 Imágenes 

1.6 Videos

1.7 Css3

UNIDAD 3 DESARROLLA APLICACIONES WEB DINÁMICAS 

1.1 Entorno de Adobe DreamWeaver ESS 

1.2 Diseñar Paginas web dinámicas mediante Adobe DreamWeaver CSS

1.3 Formularos 

1.4 Programación de Scripts 

1.5 Servidor Web

1.6 Hojas de Estilo 

U1_Act1_Conocer los conceptos básicos del Diseño y Desarrollo Web

Competencia: C9 Analiza y Compara el origen desarrollo y diversidad de los sistemas y medios de comunicación. 

Instrucciones y Recursos:

1. ¿Qué es internet?

Es una red informática que se utiliza para transmitir información

2. ¿Qué es el manejo de multimedia ?

Que reúne distintos medios como el audio, video, tv, entre otros. A través de ello nos dan información 

3. ¿Qué entiendes por TCP ?

Protocolo de Seguridad Informática

4. ¿Qué entiendes por IP?

Información Personal 

5. ¿Que es www?

Es un sistema de distribución de documentos por hipertexto 

6. ¿Que entiendes por HTML?

Es un lenguaje de programación enfocado para paginas web 

7. ¿Que entiendes por hipertexto?

Es una herramienta de estructura no secuencial 

8. ¿Que es una pagina web?

Es un documento o informe electrónico capaz de contener texto, sonido, video, programas entre otros

9. ¿Que son los navegadores?

Es un software, aplicación o programa que permite el acceso a la web 

10. Menciona 4 navegadores que conozcas

Google

Mozilla

Internet Explorer 

Opera Mini 

11. ¿Que versión de servidor web haz trabajado?

http

12. ¿cuales redes sociales manejas mas con mas frecuencia?

Facebook, Instagram, WhatsApp, Messenger

13. ¿Que paginas visitas con frecuencia?

Facebook, YouTube, Wikipedia 

14. ¿Sabes lo que es un sitio web? 

Es un dominio donde puede ser creado desde cero o mediante alguna pagina 

15. ¿Haz creado paginas web?

No

16. ¿Cuales son los servidores de internet que haz utilizado con mayor frecuencia?

Chrome, Mozilla, Opera, Internet Explorer

17. ¿Cuales son los buscadores mas utilizados?

Google, Internet Explorer

18. ¿Cuales sitios utilizas mas para ver videos?

YouTube

19. ¿cual es tu enciclopedia en línea favorita?

Wikipedia

20. ¿Cal es el sitio para mapas en línea que utilizas?

Google Maps

21. ¿Cual es el sitio que utilizas para ver películas?

Netflix 

U1_Act2_Conocer los conceptos básicos del diseño y desarrollo web_Tipos de servidores web

Competencia:C9 Analiza y compara el origen, desarrollo y diversidad de los sistemas y medios de comunicación:

Instrucciones y Recursos.

1. De manera individual ve el video 

2.Posteriormente llena la tabla.

U1_Act3_Conocer los conceptos básicos del diseño y desarrollo
Web_Tipos de Servidores web 

1.2 Teoría del color.Utilizar el color sabiamente 

Usa La Teoría Del Color Para Que Tu Página Web Sea Fabulosa.

Una de las primeras preguntas que vas a necesitar hacerte cuando estés empezando a crear tu página web es: ¿qué paleta de colores voy a utilizar? No es ninguna sorpresa que la paleta de colores es lo primero que los visitantes notan en un sitio, y es una parte fundamental en el proceso de diseño.

Aparte de cómo influyen en el diseño de la página web y en su estilo, los colores también juegan un rol principal en la funcionalidad del sitio. En otras palabras, los colores que elijas para tu página web tendrán un impacto en qué tan exitosa será en lo que se refiere a la duración de las visitas, usuarios que vuelven, cantidad de clics y ventas.

En el mundo online, los colores son un elemento muchísimo más fuerte de lo que simplemente entra por los ojos, y tendrás que tomar esto en cuenta cuando comiences a crear tu página web.

Vamos a enfrentarlo: Algunos de nosotros no podemos ni siquiera combinar la chaqueta con los pantalones, ¿cómo podríamos lograr una combinación de colores ideal para una página web profesional? Es aquí donde ingresa la teoría de los colores. Esta teoría es un concepto importante en el arte y en el diseño. Hablando de manera general, la teoría del color brinda a los diseñadores gráficos herramientas para crear combinaciones de colores que realmente funcionen.

Los diseñadores web profesionales también la utilizan ¡Y es por esto que tú también puedes hacerlo! Esto es lo que necesitas saber:

Aprende a combinar colores en tus presentaciones usando la Rueda de Color

Cuando tratamos el color  para el diseño, algunas personas apuntan que  no tienen gusto para elegir colores. Basta con aprender a utilizar la Rueda de Color.  La Rueda de Color o Círculo Cromático es el resultado de distribuir alrededor de un círculo los colores del espectro visible. Contiene 12 colores e ilustra las relaciones entre ellos. Los 12 colores están separados en tres grupos: los tres colores primarios: rojo, amarillo y azul; los tres colores secundarios, creados a partir de la combinación de los anteriores: verde, violeta y naranja; y los seis colores terciarios: creados combinando los seis anteriores.

A partir del color en sí mismo o matiz, puede añadirse blanco o negro, variando así su luminosidad y saturación. Los colores hacia el centro del círculo son más luminosos porque tienen mayor blanco añadido, mientras que los colores hacia el exterior del círculo tienen más negro y por tanto son más oscuros, sin que en ambos casos cambie su matiz.

Cómo combinar colores con la Rueda de Color

El círculo cromático te ayudará a combinar colores armoniosamente. Entre las armonías de color más sencillas, podrás utilizar:

1 Colores monocromáticos

Utilizando el mismo matiz o color base, se crea una paleta de colores de luminosidad y saturación variables añadiendo más o menos blanco o más o menos negro. Los colores monocromáticos se combinan habitualmente con colores blanco, negro y variaciones de gris.

2 Colores análogos

Son los colores adyacentes en el círculo cromático. Por tanto, cada color posee dos colores análogos. Crean paletas muy armoniosas, donde unos colores se funden en los otros.

3 Colores complementarios

Son los colores opuestos en el círculo cromático. Juntos crean un contraste dinámico e incluso mareante. Evita texto de un color sobre fondo de su complementario. Habitualmente se matan.

4 Colores triádicos

Tres colores equiespaciados alrededor del círculo cromático. Crean grandes y vistosos contrastes.

Herramienta profesional a tu alcance para combinaciones perfectas

Toda esta explicación del círculo cromático está muy bien y te estarás diciendo: “Sí, pero ¿cómo lo aplico en mi próxima presentación?”. Existen herramientas online muy sofisticadas, gratuitas y fáciles de usar que pondrán a tu alcance las maravillas de la Rueda de Color.  Color Scheme Designer.

Color en HTML.

 En HTML es posible especificar distintos colores para el texto, fondo, etc. de los elementos. Esto puede hacerse de dos formas. La primera y más sencilla, consiste en conocer, en escribir el nombre del color, por ejemplo “black”, “white”, “green”, “yellow”, “red”, “blue”, etc. Sin embargo, esta forma solo es útil para una serie de colores fáciles de recordar. La segunda forma, válida para especificar todos los colores posibles, consiste en escribir el color de la siguiente forma: “#RRGGBB”, donde RR representa el valor del  componente rojo del color, GG el valor del componente verde y BB el valor de la componente azul.  Así, el color blanco es “#FFFFFF”, un tono de gris es “#0F0F0F” (esto es rojo=verde=azul), un tono de verde es “#003D00” (rojo=azul=0) y un tono de morado es “#0F000F” (rojo=azul, verde=0).

U1_Act_4_ tema_ Conocer los conceptos básicos del diseño y desarrollo WEB _¿ cuáles  son los servicios de internet más utilizados?

U1_Act_6_ tema_ Conocer los conceptos básicos del diseño y desarrollo WEB

Competencia: C9 Analiza y compara el origen, desarrollo y diversidad de los sistemas y medios de comunicación.

       1.3 Protocolo de Internet y lenguajes web.

Los protocolos de Internet son un conjunto de reglas estandarizadas que permiten la comunicación entre computadoras heterogéneas conectados a la red.

Común mente se conoce a los protocolos de Internet como TCP/IP por ser elIP y el TCP los dos protocolos mas importantes del grupo, son varios los protocolos usados en  la red pero hay unos específicos para el correo, telnet, el chat, foros de discusión, transferencia de archivos (FTP) y  la videoconferencia.  Los  cinco protocolos mas utilizados en Internet son:

1.IP

2.TCP

3.HTTP

4.HTTPS

5.FTP 

IP (Internet protocol o protocolo de Internet)

El protocolo IP es el que se encarga de dirigir los datagramas (paquetes de información) a través del internet desde el origen hasta su destino. Este protocolo asigna direcciones IP (direccionamiento) y encuentra "caminos" adecuados para dirigir los datagramas a través de la red (enrutamiento). No es exclusivo de la web, sino que es usado por todos los servicios de internet.

TCP (Transmission Control Protocol o Protocolo de Control de Transmisión)

El protocolo de control de transmisión se encarga de enviar la información de manera confiable desde el origen hasta el destino, a través de los caminos indicados por el protocolo IP.

Este protocolo básicamente fragmenta la información en pequeños paquetes (datagramas) y los envía a su destino. Una vez en su destino, el TCP vuelve a ensamblar la información asegurándose que esté completa, en el mismo orden en que fue enviada y libre de errores.

El TCP tampoco es exclusivo de la web, sino que es usado por todos los servicios de internet.

HTTP (HyperText Transfer Protocol o Protocolo de Transmisión de Hipertexto)

Si ves la dirección de esta página web en la barra de tu navegador notarás que empieza con http://. Eso indica que se usa el protocolo HTTP para recibir la información. Éste es el protocolo sobre el que funciona la World Wide Web (www).

El HTTP es un protocolo que sigue el esquema solicitud-respuesta entre un cliente y un servidor. Así que para ver una página, tu navegador (cliente) hace una solicitud HTTP al servidor donde está alojado acrearweb.com. El servidor respondió mediante el mismo protocolo, enviando la página web. acrearweb.com 

HTTPS (HyperText Transfer Protocol Secure o Protocolo Seguro de Transmisión de Hipertexto)

Es una versión segura de HTTP, en la que los datos son encriptados para su transmisión. Este protocolo se utiliza para transacciones bancarias, compras en red, transmisión de datos de usuario y otras situaciones en las que los datos deban manejarse de la forma más segura posible.

FTP (File Transfer Protocol o Protocolo de Transmisión de Archivos)

El protocolo FTP te permite transferir archivos a través de internet. Al igual que IP y TCP, no es un protocolo exclusivo de la web, sino que pertenece a internet. Sin embargo, es muy utilizado por los webmaster para gestionar los archivos de sus sitios web.

Básicamente el FTP te permite manejar archivos en internet de manera similar a como los puedes manejar en tu computadora: copiando, pegando, renombrando y borrando archivos y carpetas.

Lenguajes web. Existen muchos lenguajes informáticos útiles para crear sitios web.

Para propósito de esta a asignatura se utilizara el lenguaje HTML.

HTML HTML (Hyper Text Markup Language o lenguaje de marcado de hipertexto ) es un lenguaje  estándar  para describir  el contenido y la apariencia  de las paginas  en el www. Es un lenguaje de marcación  diseñado para estructurar textos  y presentarlos en forma de hipertexto que es el formato estándar  de las páginas web. Gracias a  internet  y  Los  navegadores del tipo de internet explorer , opera, y Firefox, el HTML  se ha convertido en uno de los formatos  más populares que existen  para la construcción de documentos  y también de los más fáciles de aprender.   Este  lenguaje  cuenta con palabras llamadas etiquetas y palabras reservadas   comprendidas <>.

U1_Act_7_Etiquets y sus Atributos 

Etiqueta.  Es una marca  con clase que delimita  una  región.

Atributo. Una especificación que define una propiedad de un objeto, elemento, o archivo.

Si se observa el código de una página web (sencillamente escogiendo en el menú del navegador «Ver -> Código fuente»), se encontrará con los paréntesis angulares < > (los símbolos "menor que" y "mayor que", que enmarcan habitualmente la etiqueta de apertura o inicio, y </ >, que acotan la etiqueta de cierre o final). Lo que hay entre las etiquetas suele ser el texto que se puede ver directamente en pantalla. Las etiquetas simplemente dan las órdenes que indican:

1.-  Cómo se van a visualizar los elementos destinados a ser visibles en pantalla y cómo se visualizarán

2.- Cómo actuarán en el mismo documento los elementos no destinados a ser visibles en pantalla, así como la manera en que actuarán en relación con otros documentos.

HTML5 no es una nueva version del antiguo lenguaje de etiquetas, nisiquiera una manera de est ya antigua tecnologia de etiquets , si no un nuevo concepto para la construccion de sitios web y aplicaciones en una era que combina dispositivos moviles, computacion en la nube y trabajos en red. HTML5 provee basicamente tres carcteristicas: estructur, estilo, y funcionalidad.

Los documentoa HTML se encuemtrn estrictamente organizados cada parte del documento esta diferenciada, declarada y determinada por Etiquetas Especificas.

U1_Act_7_ tema_ Conocer los conceptos básicos del diseño y desarrollo WEB.Etiquetas y Atributos 

Elemento	Descripción
<!doctype html>	Define que el documento esta bajo el estandar de HTML 5
<html>	Representa la raíz de un documento HTML o XHTML. Todos los demás elementos deben ser descendientes de este elemento

Meta-datos del documento

Elemento	Descripción
<head>	Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.
<title>	Define el título del documento, el cual se muestra en la barra de título del navegador o en las pestañas de página. Solamente puede contener texto y cualquier otra etiqueta contenida no será interpretada.
<base>	Define la URL base para las URLs relativas en la página.
<link>	Usada para enlazar JavaScript y CSS externos con el documento HTML actual.
meta	Define los metadatos que no pueden ser definidos usando otro elemento HTML.
<style>	Etiqueta de estilo usada para escribir CSS en línea.

Scripting

Elemento	Descripción
<script>	Define ya sea un script interno o un enlace hacia un script externo. El lenguaje de programación es JavaScript
<noscript>	Define un contenido alternativo a mostrar cuando el navegador no soporta scripting.

Secciones

Elemento	Descripción
<body>
<section >	Define una sección en un documento
<nav>	Define una sección que solamente contiene enlaces de navegación
<article>	Define contenido autónomo que podría existir independientemente del resto del contenido
<aside>	Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si es removido, el contenido restante seguirá teniendo sentido
h1>,<h2>,<h3>, <h4>,<h5>,<h6>	Los elemento de cabecera  implementan seis niveles de cabeceras de documentos; <h1> es la de mayor y <h6> es la de menor impotancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce.
<header>	Define la cabecera de una página o sección. Usualmente contiene un logotipo, el título del sitio Web y una tabla de navegación de contenidos.
<footer>	Define el pie de una página o sección. Usualmente contiene un mensaje
<address>	Define una sección que contiene información de contacto.
<main>	Define el contenido principal o importante en el documento. Solamente existe un elemento <main> en el documento.

Agrupación de Contenido

Elemento	Descripción
<p>	Define una parte que debe mostrarse como un párrafo.
<hr>	Representa un quiebre temático entre parrafos de una sección o articulo o cualquier contenido.
<pre>	Indica que su contenido esta preformateado y que este formato debe ser preservado.
<blockquote>	Representa una contenido citado desde otra fuente.
<ol>	Define una lista ordenada de artículos.
<ul>	Define una lista de artículos sin orden.
<li>	Define un artículo de una lista ennumerada.
<dl>	Define una lista de definiciones, es decir, una lista de términos y sus definiciones asociadas.
<dt>	Representa un término definido por el siguiente <dd>.
<dd>	Representa la definición de los terminos listados antes que él.
<figure>	Representa una figura ilustrada como parte  del documento.
<figcaption>	Representa la leyenda de una figura.
<div>	Representa un contenedor genérico sin ningún significado especial.

Semántica  a  Nivel texto

Elemento	Descripción
<a>	Representa un hiperenlace , enlazando a otro recurso.
<em>	Representa un texto enfatizado , como un acento de intensidad.
<strong>	Representa un texto especialmente importante .
<small>	Representa un comentario aparte , es decir, textos como un descargo de responsabilidad o una nota de derechos de autoría, que no son esenciales para la comprensión del documento.
<s>	Representa contenido que ya no es exacto o relevante .
<cite>	Representa el título de una obra .
<q>	Representa una cita textual  inline.
<dfn>	Representa un término cuya definición  está contenida en su contenido ancestro más próximo.
<abbr>	Representa una abreviación  o un acrónimo ; la expansión de la abreviatura puede ser representada por el atributo title.
<data>	Asocia un equivalente legible por máquina a sus contenidos. (Este elemento está sólamente en la versión de la  WHATWG del estandar HTML, y no en la versión de la W3C de HTML5).
<time>	Representa un valor de fecha y hora; el equivalente legible por máquina puede ser representado en el atributo datetime.
<code>	Representa un código de ordenador .
<var>	Representa a una variable, es decir, una expresión matemática o contexto de programación, un identificador que represente a una constante, un símbolo que identifica una cantidad física, un parámetro de una función o un marcador de posición en prosa.
<samp>	Representa la salida de un programa o un ordenador.
<kbd>	Representa la entrada de usuario, por lo general desde un teclado, pero no necesariamente, este puede representar otras formas de entrada de usuario, como comandos de voz transcritos.
<sub>,<sup>	Representan un subíndice y un superíndice, respectivamente.
<i>	Representa un texto en una voz o estado de ánimo alterno, o por lo menos de diferente calidad, como una designación taxonómica, un término técnico, una frase idiomática, un pensamiento o el nombre de un barco.
<b>	Representa un texto hacia el cual se llama la atención para propósitos utilitaros.  No confiere ninguna importancia adicional y no implica una voz alterna.
<u>	Representa una anotación no textual sin-articular, como etiquetar un texto como mal escrito o etiquetar un nombre propio en texto en Chino.
<mark>	Representa texto resaltado con propósitos de referencia, es decir por su relevancia en otro contexto.
<ruby>	Representa contenidos a ser marcados con anotaciones ruby,  recorridos cortos de texto presentados junto al texto. Estos son utilizados con regularidad en conjunto a lenguajes de Asia del Este, donde las anotaciones actúan como una guía para la pronunciación, como el furigana Japonés.
<rt>	Representa el texto de una anotación ruby .
<rp>	Representa los paréntesis alrededor de una anotación ruby, usada para mostrar la anotación de manera alterna por los navegadores que no soporten despliegue estandar para las anotaciones.
<bdi>	Representa un texto que debe ser aislado de sus alrededores para el formateado bidireccional del texto.  Permite incrustar un fragmento de texto con una direccionalidad diferente o desconocida.
<bdo>	Representa la direccionalidad de sus descendientes con el fin de anular de forma explícita al algoritmo bidireccional Unicode.
<span>	Representa texto sin un significado específico.  Este debe ser usado cuando ningún otro elemento semántico le confiere un significado adecuado, en cuyo caso, provendrá de atributos globales como class, lang, o dir.
<br>	Representa un salto de línea.
<wbr>	Representa una oportunidad de salto de línea, es decir, un punto sugerido de envoltura donde el texto de múltiples líneas puede ser dividido para mejorar su legibilidad.

Ediciones

Elemento	Descripción
<ins>	Define una adición en el documento.
<del>	Define una remoción del documento.

Contenido incrustado

Elemento	Descripción
<img>	Representa una imagen.
<iframe>	Representa un contexto anidado de navegación, es decir, un documento HTML embebido.
<embed>	Representa un punto de integración para una aplicación o contenido interactivo externo que por lo general no es HTML.
<object>	Representa un recurso externo, que será tratado como una imagen, un sub-documento HTML o un recurso externo a ser procesado por un  plugin.
<param>	Define parámetros para el uso por los plugins invocados por los elementos <object>.
<video>	Representa un video , y sus archivos de audio y capciones asociadas, con la interfaz necesaria para reproducirlos.
<audio>	Representa un sonido o stream de audio.
<source>	Permite a autores especificar recursos multimedia alternativos para los elementos multimedia como  <video> o <audio>.
<track>	Permite a autores especificar una pista de texto temporizado para elementos multimedia como <video> o  <audio>.
<canvas>	Representa un área de mapa de bits  en el que se pueden utilizar scripts para renderizar gráficos como gráficas, gráficas de juegos o cualquier imagen visual al vuelo.
<map>	En conjunto con <area>, define un mapa de imagen.
<area>	En conjunto con  <map>, define un mapa de imagen.
<svg>	Define una imagen vectorial embebida.
<math>	Define una fórmula matemática.

Datos tabulares

Elemento	Descripción
<table>	Representa datos con más de una dimensión.
<caption>	Representa el título de una tabla.
<colgroup>	Representa un conjunto de una o más columnas de una tabla.
<col>	Representa una columna de una tabla.
<tbody>	Representa el bloque de filas que describen los datos contretos  de una tabla.
<thead>	Representa el bloque de filas que describen las etiquetas de columna de una tabla.
<tfoot>	Representa los bloques de filas que describen los resúmenes de columna  de una tabla.
<tr>	Representa una fila de celdas en una tabla.
<td>	Representa una celda de datos en una tabla.
<th>	Representa una celda encabezado en una tabla.

Formularios

Elemento	Descripción
<form>	Representa un formulario, consistendo de controles que puede ser enviado a un servidor para procesamiento.
<fieldset>	Representa un conjunto de controles.
<legend>	Representa el título de un <fieldset>.
<label>	Representa el título de un control de formulario.
<input>	Representa un campo de datos escrito que permite al usuario editar los datos.
<button>	Representa un botón .
<select>	Representa un control que permite la selección entre un conjunto de opciones.
<datalist>	Representa un conjunto de opciones predefiniddas para otros controles.
<optgroup>	Representa un conjunto de opciones, agrupadas lógicamente.
<option>	Representa una opción en un elemento <select>, o una sugerencia de un elemento <datalist>.
<textarea>	Representa un control de edición de texto multi-línea.
<keygen>	Representa un control de par generador de llaves.
<output>	Representa el resultado de un cálculo.
<progress>	Representa el progreso de finalización de una tarea.
<meter>	Representa la medida escalar (o el valor fraccionario) dentro de un rango conocido.

Elementos interactivos

Elemento	Descripción
<details>	Representa un widget desde el que un usuario puede obtener información o controles adicionales.
<summary>	Representa un resumen, título o leyenda para un elemento  <details> dado.
<command>	Representa un comando que un usuario puede invocar.
<menu>	Representa una lista de comandos .

U1_Act8_Encabezado de Pagina 

U1_Act9_Conocer los conceptos básicos del diseño y desarrollo web 

1.7 Elabora paginas HTML nativo   

U1_Act10_Tabajar Elementos de texto con parrafo en la pagina web.

U1_Act10_Alineacion de Texto en Pagina Web