Semana 8 2p1q Solución Web // Plataforma Web

Solución Web, Plataforma Web

Semana 8 2p1q

Tema: Conceptos básicos de Web

Subtemas: HTML, páginas web, páginas estáticas, páginas dinámicas, protocolos IP, navegadores (browsers), hojas de estilo, tablas, plantillas (template), marcos (frames), hipervínculos locales y externos, software de edición de sitios web, publicador de sitio web, servidor, dominio, alojamiento y publicación, solución web, plataforma web.

Contenido

Soluciones Web

Existe una amplia gama de soluciones web que se pueden desarrollar, entre ellos están:

Se provee de software de calidad a los clientes con desarrollos personalizados a sus necesidades.

Crea y desarrolla sitios Webs y software capaz de poder ejecutarse en distintos tipos de dispositivos, sobre todo en lo más actuales y requeridos como smartphone y tablet, basándose en las técnicas más recientes de programación.

Los sistemas de información que entreguen la información en tiempo real a los clientes y que permitan mejorar los tiempos de reacción en la toma de decisiones de las empresas.

Adoptar las conductas de seguridad que posibiliten la protección de los datos y del propio individuo en sus interacciones en Internet y en la gestión de recursos y aplicaciones locales.

Las aplicaciones sencillas de software estructurado utilizando un Entorno de Desarrollo Integrado orientadas a la producción de una página web interactiva.

Garantizar el servicio y la atención al cliente.

Capacitar a los usuarios de los sistemas y páginas Webs.

El servicio, consiste en desarrollar software para empresas de cualquier rubro que requieran una solución Web o software de gestión.

Garantía de 3 meses para cualquier eventual incidencia con el proyecto desarrollado. Estos 3 meses corren desde el día que se instala el software en los servidores previamente acordados o desde cuando los sitios Webs quedan abierto al público, todo esto en coordinación con el cliente.

Soporte técnico dentro de la empresa que contrata el servicio, online y vía telefónica. El soporte estará disponible las 24 horas del día durante los días hábiles de trabajo, ahora si el cliente necesita soporte en otro horario se debe llegar a un acuerdo monetario para atender esta solicitud.

Manuales de uso en distintos formatos (acordados con el cliente) para el usuario final del software. Los manuales son desarrollados de manera personalizada, en conjunto de los usuarios, para que estos tengan una mayor familiarización con el software que se les entregará o mapa del sitio en caso de que sea una página Web.

Plataformas Web

Plataformas digitales: ¿Qué son y qué tipos existen?

Las plataformas digitales son soluciones online que posibilitan la ejecución de diversas tareas en un mismo lugar a través de internet.

¿Qué objetivos cumplen las plataformas digitales?

El principal objetivo que cumplen las plataformas digitales es facilitar la ejecución de tareas a través de programas o aplicación en un mismo lugar en la web.
Como existe una gran variedad de plataformas digitales, los objetivos específicos de cada una de ellas varían de acuerdo con la necesidad de los usuarios.

¿Qué tipos de plataformas digitales existen?

Existe una infinidad de tipos de plataformas digitales. Con cada problemática se puede generar un tipo de plataforma digital diferente.
A continuación, vamos a ver los principales tipos que existen:

Plataformas educativas

Estas plataformas se enfocan en la educación a distancia e intentan simular las mismas experiencias de aprendizaje que encontramos en un salón de clase.
Sirven para complementar o sustituir el proceso de educación tradicional.
Como ejemplos de plataformas educativas podemos mencionar a Blackboard, e-College y Moodle.

Plataformas sociales

Las plataformas sociales conocidas también como redes sociales, son muy utilizadas actualmente por gran parte de nuestra sociedad.
Son aquellas plataformas digitales donde se guardan diversas informaciones relacionadas con las interacciones sociales.
Gracias a ellas los usuarios se conectan y mantienen relaciones con familiares, amigos o conocidos a través de Internet.
Podemos citar Facebook, LinkedIn, Instagram y Twitter como ejemplos de plataformas sociales.

Plataformas de comercio electrónico

Las plataformas de comercio electrónico abundan hoy en día en Internet.
Gracias a ellas es posible comprar los más diversos productos y servicios sin salir de casa, sin fronteras físicas. Hay tiendas virtuales tanto del modelo B2B como B2C y otros, como puedes ver en el enlace anterior.
Cada vez más las plataformas de e-commerce crecen en todos los sectores. Incluso en países donde esta práctica no era tan común hace algunos años, cada día se está popularizando más.
Cómo ejemplos de plataformas de comercio electrónico tenemos a WooCommerce, Tiendanube, Magento y Shopify.

Actividad # 2

1. De las soluciones web mencionadas elije una y explícala, puedes utilizar un ejemplo.
2. Crea un organigrama con el contenido de las plataformas web.

Semana 6 2p1q Proy. Cient. Dominio, Alojamiento y Publicación, Solución Web, Plataforma Web

Dominio, Alojamiento y Publicación, Solución Web, Plataforma Web.

Semana 6

Tema: Conceptos básicos de Web

Subtemas: HTML, páginas web, páginas estáticas, páginas dinámicas, protocolos IP, navegadores (browsers), hojas de estilo, tablas, plantillas (template), marcos (frames), hipervínculos locales y externos, software de edición de sitios web, publicador de sitio web, servidor, dominio, alojamiento y publicación, solución web, plataforma web.

Contenido

¿Qué es un nombre de dominio?

El nombre de dominio es la dirección de tu sitio web, que las personas escriben en la barra de direcciones del navegador para visitar tu Site. En otras palabras, si tu WebSite fuera una casa, pues su nombre de dominio será algo así como su dirección postal.

Ejemplo: https://www.iess.gob.ec/

Los tipos de dominios de internet se dividen en tres grandes grupos, los dominios genéricos o gTLD (geopraphical Top Level Domain), los dominios territoriales ccTLD (country code Top Level Domain) y los dominios de tercer nivel.

Los gTLD son dominios genéricos que no se ajustan al ambiente de un país específico. Los conocemos por ser los más comunes y tienen extensiones .com, org, .net, etcétera.

Es decir: www.conversiones.com es un dominio genérico.

Los dominios con extensión .com son aquellas que se utilizan para empresas y organizaciones comerciales de todo el mundo. Aquellos con extensión .org lo utilizan organizaciones e instituciones sin ánimo de lucro y Organizaciones No Gubernamentales (ONG). Mientras que las empresas e instituciones relacionadas con servicios de Internet se definen por tener una extensión en .net.

Los dominios asociados a un país determinado son los ccTLD, quienes se definen por adquirir un sitio con extensión única perteneciente a cada región. Por ejemplo, en México los dominios ccTLD terminan con la extensión .mx, en España este tipo de dominios termina en .es, o en Francia, la extensión es .fr.

Los dominios de tercer nivel son aquellos que tienen la misma finalidad que los dominios gTLD sólo que éstos adquieren también la identidad territorial de las ccTLD. Los dominios gubernamentales o educativos son característicos de este tipo. Sencillamente deben tener una terminación .com.mx, .edu.mx, etcétera.

Alojamiento web

El alojamiento web (en inglés: web hosting) es el servicio que provee a los usuarios de Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier contenido accesible vía web.

Es una analogía de "hospedaje o alojamiento en hoteles o habitaciones" donde uno ocupa un lugar específico, en este caso la analogía alojamiento web o alojamiento de páginas web, se refiere al lugar que ocupa una página web, sitio web, sistema, correo electrónico, archivos, en Internet o más específicamente en un servidor, que por lo general hospeda varias aplicaciones o páginas web.

Las compañías que proporcionan espacio de un servidor a sus clientes se suelen denominar con el término en inglés web host.

¿Cómo funciona el hosting?

El alojamiento web asegura que los usuarios puedan introducir un nombre de dominio en su navegador y que se muestre el contenido apropiado del sitio web. Para esto, en primer lugar, el creador del sitio web debe registrar un dominio y después subir el contenido al servidor de un proveedor de hosting web. A través del sistema de nombres de dominio (DNS) se asocian el nombre del dominio y el servidor. Para esto, la información para encontrar la dirección IP de un determinado dominio se almacena en los llamados servidores de nombres. Cuando un usuario accede a un URL, el nombre de dominio se convierte en una dirección IP y se busca la dirección correspondiente en internet. Si todo funciona correctamente, el usuario visualiza el sitio web.

Actividad #1

1.     Transcribe el cuadro 1 y agrega 2 direcciones de domino en las primeras 3 filas.

2.     Organice las imágenes y explique cómo funciona un hosting.

Semana 5 2p1q Publicador de sitio web, Servidor

Semana 5

Tema: 

Conceptos básicos de Web

Subtemas: HTML, páginas web, páginas estáticas, páginas dinámicas, protocolos IP, navegadores (browsers), hojas de estilo, tablas, plantillas (template), marcos (frames), hipervínculos locales y externos, software de edición de sitios web, publicador de sitio web, servidor, dominio, alojamiento y publicación, solución web, plataforma web.

Contenido

Publicador de sitio web, Servidor

La práctica habitual es diseñar las páginas web de nuestro sitio web en el disco duro del equipo para luego enviarlos al servidor web junto con los archivos multimedia referenciados (imágenes, animaciones, audios, etc.). A este proceso se le llama publicación web. Mediante este procedimiento se pone a disposición de cualquier usuario con acceso a Internet las páginas web del centro o proyecto al pasar a estar alojadas físicamente en un ordenador servidor con acceso permanente desde Internet.

La subida de archivos desde el equipo local al servidor se puede realizar mediante un programa que utiliza el protocolo FTP. Esta transferencia de archivos se realiza en modo autentificado, es decir, introduciendo un nombre de usuario y contraseña para evitar que otras personas puedan publicar en nuestro espacio web.

Antes de la publicación será necesario obtener los siguientes datos del administrador del servidor web:

• Dirección del servidor FTP: es la URL del servidor que atiende peticiones de conexión por FTP para la subida de archivos. 
• Usuario y Contraseña: son los datos de la cuenta que es necesario introducir para realizar una subida autentificada de recursos y que estos recursos se alojen en la ubicación correcta del servidor.
• Dirección del servidor HTTP: es la URL del servidor web que nos permitirá acceder a nuestras páginas usando el navegador web. Ejemplo: http://roble.pntic.mec.es/usuario/

Servidor web

Quienes tengan conocimientos sobre lo que es un servidor no deben confundirlo con un servidor web, porque son dos cosas distintas. Es cierto que uno forma parte del otro, ya que de hecho el servidor web es uno de los componentes de un servidor. El server (o servidor) es el equipo en el cual se alojan los sitios o aplicaciones web, mientras que el servidor web es un software que forma parte del servidor.

El servidor web (también llamado webserver en inglés) es el software que se encarga de despachar el contenido de un sitio web al usuario. Este proceso de despacho, que a simple vista parece muy simple, es en realidad más complejo de lo que parece, pues toda la «magia» de un webserver ocurre fuera de quien está navegando por un sitio web. Existen multitud de servidores web, y entre los más conocidos podemos encontrar a Apache, Nginx, LiteSpeed o IIS.

Los servidores web varían mucho de uno a otro, por ejemplo, si comparamos Apache y Nginx veremos que tienen diferencias muy notorias, aunque el objetivo final es el mismo: despachar contenido al usuario. El proceso de despacho comienza en nuestro navegador web. Al escribir la dirección de un sitio web y presionar enter comienza la siguiente secuencia: el sistema hace una búsqueda DNS para encontrar en cuál servidor está alojado el sitio en cuestión.

Cuando el server es encontrado, el navegador le pide el contenido del sitio web, y acto seguido el webserver procesa este pedido y envía dicho contenido al navegador, lo cual da como resultado la visualización del sitio en nuestra pantalla.

Funciones de un servidor web

Cada webServer tiene sus propias características y está destinado a ser utilizado en ciertos entornos y configuraciones. Uno de los factores más importantes a la hora de decidir cuál servidor web utilizar es el sistema operativo de nuestro server, que es otra de sus características, siempre corren bajo un sistema operativo. Por ejemplo, en sistemas Windows Server la elección más tradicional es IIS de Microsoft, mientras que en otros como los basados en Linux se usa mucho Apache, Nginx y LiteSpeed.

Es posible también encontrar servidores web que son utilizados puramente para despachar contenidos estáticos como imágenes, videos, etc., ya que son muy buenos en dicha tarea, y en otros casos también tenemos los que son utilizados frecuentemente en entornos de hosting compartido, despachando varios sitios bajo una misma IP, o bajo IPs dedicadas. También hay que destacar la compatibilidad con sitios dinámicos y los límites que podemos configurar a nivel de recursos como transferencia, por ejemplo, permitiendo ser muy flexibles para revender hosting o hospedar sitios masivamente.

Ampliando tus conocimientos visitando los siguientes enlaces:

Publicador de Sitios – Tutorial de CPanel en español – Lección 12

https://www.youtube.com/watch?v=iqjNzdq_0pM&ab_channel=AQPHostingA1

Publicador de Sitios Web

https://www.youtube.com/watch?v=gJ77aSrjKf8&ab_channel=AlaredSolucionesWeb

Adclic|hosting

https://adclichosting.com/clientes/knowledgebase/327/Crea-una-pagina-web-de-forma-facil-yrapida-conPublicador-de-sitio---cPanel.html

Servidor web

https://searchdatacenter.techtarget.com/es/definicion/Servidor-Web

Características de un servidor web

https://blog.infranetworking.com/caracteristicas-servidor-web

Funcionamiento de un servidor web

https://blog.infranetworking.com/funcionamiento-de-servidor-web

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

Actividad 2:

1. ¿A qué se le llama publicación web?

2. ¿Cómo se realiza la transferencia de archivos?

3. ¿Qué datos se deberá obtener del administrador del servidor web antes de la publicación?

“Los servidores web son programas de uso cotidiano en internet que se emplean para comunicar diversos protocolos de datos.”

Actividad 3:

1. ¿Qué es y para qué sirve un servidor web?

2. ¿Con qué nombre se conoce también al Servidor Web?

3. ¿Cómo se realiza el proceso de despacho de contenido al usuario?

Importante Recordar

“El rendimiento de un servidor web tiene que ir acompañado del CPU, RAM y unidad de almacenamiento”.

Semana 3 2p1q Software de edición de sitios Web

Semana 3

Tema: Conceptos básicos de Web

Subtemas: HTML, páginas web, páginas estáticas, páginas dinámicas, protocolos IP, navegadores (browsers), hojas de estilo, tablas, plantillas (template), marcos (frames), hipervínculos locales y externos, software de edición de sitios web, publicador de sitio web, servidor, dominio, alojamiento y publicación, solución web, plataforma web.

Software de edición de sitios Web

Actividad 1

Con la ayuda de un mapa conceptual organiza los temas Herramientas de diseño y Editores webs libres o de código abierto. (Están resaltadas las frases más idóneas)

Contenido

Software de edición de sitios web

A diferencia del software de edición visual, en el cual no requieres muchos conocimientos de HTML para lograr modificar o editar tu página web, el editor de texto si lo requiere. Al igual que el visual, cuenta con dos formas de hacerlo, una en Windows y la otra en Linux.  Es importante saber sobre códigos, ya que todo lo haces sin imágenes y sin plantilla de relleno que sirva. Lo que hagas, tampoco será guardado como HTML de forma instantánea, es tu deber crear todo desde los códigos fuente. Existe una tercera opción totalmente diferente de estas dos, esta opción es para que la tengas en cuenta si ninguno de los editores te convence o no tienes tiempo que dedicarles a estos programas. Esta opción consta de unas plantillas o templates que puedes encontrar en la web. Estos templates te permiten crear tu página a base de plantillas de relleno, sin necesidad de saber nada de códigos.

Herramientas de diseño

Editores webs libres o de código abierto

A la hora de crear páginas web, la referencia más conocida es Adobe Dreamweaver. Es un editor muy extendido desde su aparición en 1998, y fue desarrollado por la compañía Macromedia, la misma que desarrolló Flash y que luego fue absorbida por Adobe.

Actualmente mantiene el 90% del mercado de editores HTML pero bastantes desarrolladores web lo critican ya que puede incluir mucho código inútil lo cual puede ir en contra de la velocidad de carga o ejecución de las páginas web en el navegador. Esto es especialmente significativo si usamos el soporte que permite, por ejemplo, conexiones de bases de datos y/o opciones para programar sin necesidad de tener conocimiento de programar en algunos lenguajes como asp, jsp o php.

Frente a este editor de pago, tenemos muchos otros editores de código abierto. En este caso tenemos que distinguir principalmente dos tipos, los que están más orientados a diseñadores que son editores WYSIWYG (acrónimo en ingles de «lo que ves es lo que obtienes») y los que están más orientados a programadores.

Una característica interesante de estos editores de código abierto es que muchos de ellos tienen versiones «portables», esto es, los puedes llevar en una memoria USB y ejecutarlos desde ella en cualquier ordenador sin necesidad de instalarlo en ese equipo. Esta característica puede ser muy interesante, por ejemplo, si vais a visitar a un cliente y os surge alguna cosa que no teníais prevista, sacáis vuestra memoria USB y a trabajar en cualquier ordenador.

Los principales editores libres que podemos encontrar son:

Editores WYSIWYG

KompoZer Es un editor de páginas WYSIWYG que permite también ver el código fuente, así como una opción de vista dividida de código gráfico. Además, tiene un pequeño soporte para PHP.

Tiene versiones para Linux, Windows, MacOSX y está disponible en castellano.

KompoZer cumple con los estándares web de W3C. Por defecto, las páginas son creadas en acuerdo a HTML 4.01 Strict aunque se puede modificar en las opciones avanzadas y permite el uso de hojas de estilos CSS. Además, incluye un validador HTML que sube las páginas al W3C para su validación.

Amaya es un editor web creado por el W3C compuesta por un navegador web y una herramienta de creación con el cual se puede trabajar en línea y fuera de línea. Se pueden ver y generar páginas HTML y XHTML con hojas de estilo CSS, o dibujos SVG. Además, renderiza imágenes, por ejemplo, en PNG y un subconjunto del formato de Gráficos Vectoriales Escalables (SVG), como figuras básicas, texto, imágenes o puede incluir fragmentos HTML o expresiones MathML en los dibujos. Está disponible para Windows, Mac y Linux.  Soporta HTML 4.01, XHTML 1.0, XHTML Basic, XHTML 1.1, HTTP 1.1, MathML 2.0, muchas características CSS 2, e incluye soporte para gráficos SVG (transformación, transparencia y animación SMIL), además se puede, no sólo visualizar sino además editar, de manera parcial, documentos XML.

Algunas de las características principales de Amaya son; editor grafico HTML, tablas para abrir documentos en lote, amplia selección de etiquetas HTML con inserción automática, corrección ortográfica y código de limpieza, vista previa en tiempo real de la página web, comparación de código fuente.

BlueGriffon se trata también de un editor WYSIWYG creado por Mozilla y como todo producto de Mozilla, presenta la posibilidad de usar plugins o complementos para ampliar sus funcionalidades. Está basado en Gecko, el motor de renderizado dentro de Firefox, y usa XULRunner. Se puede bajar gratuitamente y está disponible para Mac OS X, Windows y Linux y está traducido al castellano.

BlueGriffon cumple con los estándares web W3C. Puede crear y editar páginas conforme a HTML 4, XHTML 1.0, HTML 5 y XHTML 5. Es compatible con CSS 2.1 y todas las partes de CSS 3 ya aplicadas por Gecko. BlueGriffon también incluye SVG-edit, un editor basado en SVG que se distribuyó originalmente como una extensión para Firefox y se adaptó a BlueGriffon.

Editores orientados a programadores.

Lo primero que hay que destacar es que estos editores no están solo orientados a la creación de páginas web, quizás una excepción seria Bluefish, son editores que se pueden usar normalmente con multitud de lenguajes, desde C++ hasta lenguajes que normalmente solo se suelen usar en páginas web dinámicas como son asp o PHP. La principal característica es el coloreado del código para hacer más fácil su lectura.

Alguno de los principales seria:

Bluefish es un editor de páginas web muy completo, dirigido a diseñadores web experimentados y programadores y se enfoca en la edición de páginas dinámicas e interactivas. Tiene un potente soporte para HTML, PHP, Javascript, JSP, SQL, XML, Python, Perl, CSS, ColdFusion, Pascal, R, Octave/Matlab y resaltado de sintaxis.

Seguramente uno de los editores más completos que puede usarse también en diversos sistemas operativos, lástima que no tenga soporte WYSIWYG, quizás lo único que se pueda echar en falta.

Notepad2 es un editor de texto de código abierto para Windows. Ofrece resaltado de sintaxis para los lenguajes de programación: ASP, PHP, JavaScript, CSS, HTML, XHTML y XML y otros no orientados a la web como lenguaje ensamblador C, C++, C#, CGI, Java, NSIS, Pascal, Perl, Python, SQL, VB, VBScript. Tiene alguna característica más como el emparejamiento de paréntesis o el auto indentación.

Notepad++ es un editor de texto y de código fuente libre para Windows con soporte para la mayor parte de los lenguajes de programación como C++, CSS, Flash ActionScript, HTML, Java, JavaScript, JSP, Perl, PHP, Python, Ruby, SQL, XML y muchos más. Además, permite al usuario definir su propio lenguaje.

Incluye opciones que pueden ser útiles para usuarios avanzados como desarrolladores y programadores como el coloreado y envoltura de sintaxis: es capaz de resaltar las expresiones propias de la sintaxis de ese lenguaje para facilitar su lectura. Resaltado de paréntesis, corchetes y llaves e indentación. También permite la grabación y reproducción de macros. y se le pueden añadir extensiones.

¿Qué es la indentación?

Este término significa mover un bloque de texto hacia la derecha insertando espacios o tabuladores, para así separarlo del margen izquierdo y distinguirlo mejor del texto

NetBeans IDE.  Por último, vamos a ver sin duda uno de los más importantes editores, se trata de NetBeans IDE, un entorno absolutamente libre para el desarrollo de software con código abierto. Está enfocado al lenguaje de Programación Java, pero actualmente soporta PHP, C/C, Groovy, JavaScript, HTML entre otros.

Viene integrado con servidores de aplicaciones GlassFish v3, Apache Tomcat y maneja Bases de Datos MySQL, PostgreSQL y cualquiera que se conecte con JDBC como Oracle, SQL Server, y otros más. Es una herramienta de programación integrada. Su aprendizaje se ha convertido en fundamental para quienes están interesados en el desarrollo de aplicaciones multiplataforma.

Semana 2 2p1q Hojas de estilos CSS

Tema: Conceptos básicos de Web

Elaborar páginas WEB desde el celular (Sublime text)

Subtemas: HTML, páginas web, páginas estáticas, páginas dinámicas, protocolos IP, navegadores (browsers), hojas de estilo, tablas, plantillas (template), marcos (frames), hipervínculos locales y externos, software de edición de sitios web, publicador de sitio web, servidor, dominio, alojamiento y publicación, solución web, plataforma web.

TAREA:
Hacer un organizador gráfico del texto antecedentes y otro del conjunto de protocolos que conforman la arquitectura formada por cinco niveles o capas

Objetivo:
Diseñar y construir soluciones web de nivel intermedio con interfaz amigable, empleando herramientas multimedia que permitan promocionar la información e imagen de una organización y/o cliente.

Actividad 1

Crea tu propia página Web.

Contenido

Tema: ¿Hojas de estilos?

Son conocidas como style sheets. Se trata de una serie de conjuntos de instrucciones, a veces en forma de archivo anexo, que se asocian a los archivos de texto y se ocupan de los aspectos de formato y de presentación de los contenidos: tipo, fuente y tamaño de letras, alineación y posicionamiento del texto, colores y fondos, etc., de las distintas etiquetas que forman una página.

Se puede crear una sola hoja de estilo y se enlazan algunas o todas las páginas. De esta manera, al hacer el cambio en la hoja de estilo, se cambiarán todas aquellas que estén vinculadas.

1.       Escribiremos o copiaremos y pegaremos el siguiente código: (en bloc de notas o sublime text)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

<head>

  <title>Hojas de Estilo</title>

  </head>

<body>

<!-- Menú de navegación del sitio -->

<ul class="navbar">

  <li><a href="indice.html">Página principal</a>

  <li><a href="contenido.html">Contenidos</a>

  <li><a href="trabajos.html">Tareas</a>

  <li><a href="evaluaciones.html">Evaluaciones</a>

</ul>

 <!-- Contenido principal -->

<h1>Cómo hacer mi página con Hojas de Estilo</h1>

<p>¡Bienvenidos!

<p>Podemos cargar imágenes, aplicar otros estilos.

Existe un menú con enlaces, pero aún no están activados

<!-- Firma y fecha de la página! -->

<address>Creada el 17 de julio de 2020<br>

  mi nombre.</address>

</body>

</html>

2.       Luego, escogemos el menú Archivo y la opción Guardar. En la ventana que aparece, se pondrá el nombre. Por ejemplo, prueba1.html.

No olvides escoger la ruta para guardar la página web.

3.       Busca el archivo en la ruta en la que lo guardaste y haz doble clic. Entonces, se abrirá en el navegador que tengas predeterminado, como se puede observar a continuación:

Dato curioso: “Las hojas de estilo utilizan el lenguaje CSS.”

1. ¿Qué es y para qué sirve una hoja de estilo?

2. ¿Qué significa CSS?

3. Investiga y escribe los códigos de los colores para las hojas de estilo CSS.

Recuerda:

“La hoja de estilos es la clave para establecer el diseño de una web, por lo tanto, se convierte en el principal espacio de trabajo para los diseñadores web”.

Tema: Tablas y plantillas (templates)

Una tabla es un medio de organizar datos en filas y columnas. En cada grupo de filas contiene a un grupo de celdas que pueden ser utilizadas para listar datos como listas, agendas, resultados y otros datos de una forma organizada y/o tabulada. En HTML se adopta como una forma de presentar información que no sería comprendida tan fácilmente de otra manera. HTML dispone de una gran variedad de etiquetas para crear tablas con sus atributos que se deben utilizar en una forma determinada.

Etiquetas básicas para tablas en HTML

1. Las tablas son definidas por las etiquetas TABLE y su cierre.

<table>

…

</table>

2. Dentro de estas dos colocaremos las otras etiquetas de las tablas hasta llegar a las celdas. Y dentro de las celdas ya se podrá colocar textos e imágenes que será el contenido de la tabla.

3. Las tablas son descritas por líneas de arriba a abajo y luego por columnas de izquierda a derecha. Cada una de estas líneas, llamada fila, es definida por otra etiqueta y su cierre: TR.

4. Dentro de cada línea, habrá diferentes celdas. Cada una de estas celdas será definida por otra etiqueta: TD. Dentro de esta y su cierre será donde coloquemos el contenido.

Ejemplo: Estructura de tabla:

<table border=2 cellspacing=3 cellpadding=1 width="50%">

<tr>

   <td bgcolor="#FFFF00"> Celda 1, linea 1</td>

   <td> Celda 2, linea 1</td>

</tr>

<tr>

   <td> Celda 1, linea 2</td>

   <td> Celda 2, linea 2</td> 

</tr> 

</table>

El resultado:

Atributos para tablas, filas y celdas

Algunos son conocidos como width, height, align, etc.

 1. Para las etiquetas TABLE.

cellspacing: es el espacio entre celdas de la tabla.

cellpadding: es el espacio entre el borde de la celda y su contenido.

border: es el número de píxeles que tendrá el borde de la tabla.

bordercolor: es el rbg que le vas a asignar al borde de la tabla.

2. Para las etiquetas "interiores" de una tabla, (TR y TD): Se puede usar cualquier tipo de etiqueta dentro de la etiqueta TD, y luego escribir su contenido. Las etiquetas situadas en el interior de la celda no modifican el resto del documento. Las etiquetas fuera de la celda no serán consideradas por ésta.

3. El formato de una celda se especifica a partir de etiquetas introducidas en su interior o mediante atributos colocados: Dentro de la etiqueta de celda TD y dentro de la etiqueta TR (válido para toda la línea). 

Atributos para modificar una celda en determinada o toda una línea

align: Justifica el texto de la celda del como si fuese el de un párrafo.

valign: (Top) para elegir que el texto aparezca arriba, (Middle) en el centro o (Bottom) debajo de la celda.

bgcolor: Para color a la celda o línea elegida.

bordercolor: Define el color del borde.

Atributos asignados a una celda y no al conjunto de celdas de una línea

background: Fondo para la celda a partir de un enlace a una imagen.

height: Define altura de la celda en pixels o porcentaje.

width: Define anchura de la celda en pixels o porcentaje.

colspan: Expande celda horizontalmente.

rowspan: Expande celda verticalmente.

Las dimensiones de las celdas se definen de forma absoluta es decir en pixels o puntos de pantalla. También puede ser de una forma relativa, es decir por porcentajes referidos al tamaño total de la tabla.

Ejemplo:

<td width="50">        Esto presenta ancho de celda de 50 pixels,

<td width="50%">     Esto presenta ancho de celda al 50% del ancho de la tabla.

<td colspan="2">       Esto combina la celda con la celda derecha.

<td rowspan="2">     Esto combina la celda con la celda inferior.

Plantillas (templates)

El theme o template es un formato existente prediseñado para un sitio o página web, donde el usuario puede personalizar la información. Algunas suelen ser gratuitas, pero con funciones limitadas. Una plantilla proporciona una estructura definida, ahorra tiempo y crea páginas webs sin tener que estar manejando códigos complicados.

Ventajas de usar plantilla web

• Fácil manipulación y edición. No se necesita tener mucho conocimiento de programación.

• Es asequible y económico, en algunos casos son gratuitas.

• Implementación en poco tiempo, no se debe diseñar a tiempo completo.

 Desventajas de usar plantillas

• Es limitada su personalización, suele ser difícil cambiar la posición de algunos elementos de diseño web. En algunos casos no se puede modificar.

• No están optimizados y por ello afecta su rapidez de carga y del posicionamiento SEO.

• No es la plantilla que necesito, muchas veces no está hecho a la medida, y lo barato sale caro.

Plataforma para adquirir una plantilla

Existen muchas plataformas o lugares donde se puedes visitar, explorar y revisar el catálogo de plantillas. Esto te permite ver, evaluar y adquirir la plantilla más indicada según su necesidad.

Algunos lugares donde puedes encontrar plantillas web:

1. Template Monster, posee más de 21 mil productos.

2. ThemeForest – EnvatoMarket, posee más de 47 mil plantillas.

3. Webflow, posee aproximadamente 100 modelos diferentes.

4. Creativemarket, posee más de 5.500 plantillas de sitios web.

Semana 10 Protocolos IP, Navegadores (browsers)

Protocolos IP, Navegadores (browsers)

Actividad 3

Hacer un organizador gráfico del texto antecedentes y otro del conjunto de protocolos que conforman la arquitectura formada por cinco niveles o capas.

Ayúdese con estos videos. Ver también: https://www.youtube.com/watch?v=1pB2kan_AFk

https://www.youtube.com/watch?v=BWb6ri3ePew

Contenido

¿Qué es Sublime text?

Sublime Text 3 es un programa de edición de código que permite ser capaz de escribir código de manera eficiente. Con él es posible hacer todo lo necesario dentro del proceso de codificación, contando con un sólido número de plugins y extras para personalizar la plataforma directamente según los requisitos de cada usuario. Fue creado basado en Python y C++.

ANTECEDENTES

PROTOCOLOS TCP/IP DE INTERNET

La Internet como una mega red, una red de redes o una red global de redes de computadoras, pero también es un conjunto de tecnologías que ha originado un nivel de comunicación y un acceso a la información sin antecedente alguno en la historia de la humanidad.

Lo que hoy en día es Internet poco o nada tiene que ver con sus orígenes: ante la posibilidad de un embate nuclear a finales de los sesenta (70), la Agencia de Proyectos de Investigación Avanzada del Departamento de Defensa de Estados Unidos (DARPA), comisionó en 1967 a la Agencia de Proyectos de Investigación Avanzada (ARPA) la creación de una red para proteger los sistemas estratégicos y de información localizados en los núcleos y ciudades principales.

INTERNET: DEL USO MILITAR AL USO CIVIL

A través de cuatro supercomputadoras conectadas en las universidades UCLA, UCSB, Stanford y University of Utah, empezó a funcionar una red descentralizada con vías de acceso redundantes. La información podía llegar a su destino por medio de rutas alternas, gracias a que todos los equipos enlazados serían servidores, en una telaraña de conexiones. Esta red, llamada ARPANET, surgió en 1969 con el propósito de apoyar las investigaciones militares, pues el gobierno de Estados Unidos necesitaba redes de comunicación que pudieran soportar daños como los causados por misiles.

Posteriormente aparecieron otras redes: CSNET (Computer Science Network) y MILNET. Mientras que la primera surgió con la finalidad de enlazar las computadoras de las áreas de investigación científica de las universidades, la industria y el gobierno, la segunda era una red militar del departamento de defensa de Estados Unidos. Con la unión de estas tres redes, en 1983 se inició el proyecto Internetwork. El término Internetwork se abrevió después para dar lugar a lo que hoy se conoce como Internet. Con esta fusión se desarrolló el sistema de protocolos TCP (Protocolo de Control de Transmisión) /IP (Protocolo de Internet), común para todas las computadoras conectadas.

Así, dejando ya atrás su papel militar, Internet se convirtió en un instrumento de propagación de la información y un medio de concurrencia entre los individuos, así como una forma de interacción de éstos con las computadoras, particularmente para fines académicos y de investigación. Es en las universidades donde se popularizó el correo electrónico, pues a través de él los académicos ya contaban con una excelente herramienta para colaborar en proyectos de investigación.

Pronto Internet fue inundada con sitios WEB de carácter comercial: fue a finales de los ochenta cuando los usuarios de la red se multiplicaron a nivel mundial, iniciándose la inclusión de elementos de índole mercantil. Actualmente Internet se compone en su mayoría por “redes privadas que brindan facilidades a nivel mundial” en la educación, la investigación, el comercio y la producción.

Protocolo TCP/IP

Los protocolos IP (Protocolo de Internet) y TCP (Protocolo de Control de Transmisión) se originaron a principios de 1980 y fueron adoptados por la red ARPANET en 1983, que estaba integrada por cientos de computadoras de universidades, centros de investigación militar y algunas empresas. El e-mail (electronic mail) fue el servicio más comúnmente utilizado entonces, mientras que el sistema operativo más empleado era UNIX, en su versión BSD UNIX, desarrollada por la Universidad de California. Fue a mediados de los ochenta cuando fue creado el protocolo TCP/IP con la finalidad de contar con un lenguaje común a todas las computadoras conectadas a Internet, ya con la unión de las redes ARPANET, CSNET y MILNET. El protocolo TCP/IP representa, entonces, las reglas que hacen posible la conexión de computadoras de marcas y tecnología diferentes. TCP e IP son los protocolos más importantes. Su nombre representa al conjunto de protocolos que conforman la arquitectura formada por cinco niveles o capas:

1.       Aplicación.

La capa aplicación se encuentra en la parte superior del modelo TCP/ IP. Contiene las aplicaciones de red, las cuales comunicarán con la capa inferior llamada capa de transporte a través de los protocolos UDP y TCP. Las aplicaciones se pueden clasificar según los servicios que proporcionan:

·         Servicios de transferencia de archivos e impresión.

·         Servicios de conexión de red.

·         Servicios de conexiones remotas.

·         Resto de servicios y utilidades.

Están contenidos los protocolos SMTP, para el correo electrónico; FTP, para la transferencia de archivos; TELNET, para la conexión remota, y HTTP, Hypertext Transfer Protocol.

2.       Transporte. Se comprende a los protocolos TCP y UDP, que se ocupan del manejo y el transporte de los datos.

Permite que las aplicaciones se puedan comunicar entre sí a través de protocolos como el TCP, orientado a la conexión con corrección de errores, y el UDP, que no está orientado a la conexión y por tanto no lleva corrección de errores.

3.       Internet. Se ubica en el nivel de la red para enviar los paquetes de información.

Es la capa importante, ya que permite el enrutamiento de los paquetes de datos a equipos remotos.

Define los paquetes de datos en datagramas y los enruta. Esta capa contiene varios protocolos, de los cuales los más importantes son el protocolo IP, el protocolo ARP y el protocolo ICMP.

4.       Físico. Es el análogo al nivel físico del OSI.

Define la interfaz entre el dispositivo de transmisión de datos (por ejemplo, la estación de trabajo o la computadora) y el medio de transmisión o red. Esta capa se encarga de la especificación de las características del medio de transmisión, la naturaleza de las señales, la velocidad de datos y cuestiones afines.

5.       Red. Es el correspondiente a la interfaz de la red.

Es responsable del intercambio de datos entre el sistema final (servidor, estación de trabajo, etc.) y la red a la cual está conectado. El emisor debe proporcionar a la red la dirección del destino, de tal manera que ésta pueda encaminar los datos hasta el destino apropiado. El emisor puede requerir ciertos servicios que pueden ser proporcionados por el nivel de red, por ejemplo, solicitar una determinada prioridad. El software en particular que se use en esta capa dependerá del tipo de red que se disponga.

Dirección IP

Con el fin de que un usuario pueda recibir los archivos de información que solicitó a través de su computadora, es necesario que ésta cuente con datos de identificación para ser localizada. Estos datos están contenidos en la dirección IP de su computadora: un número único para cada equipo o “host”, representado por cuatro cifras separadas por puntos, quedando determinado el 255 como límite: 255.255.255.255. Con la dirección IP o dirección de Internet queda identificada la máquina del usuario y la red a la que pertenece.

 Navegadores (browsers)

Un navegador o navegador web (del inglés, web browser) es: una aplicación que opera a través de Internet, interpretando la información de archivos y sitios web para que podamos ser capaces de leerla. (ya sea que la información se encuentre alojada en un servidor17 dentro de la World Wide Web o en un servidor local).

El navegador interpreta el código en el que está escrita la página web (generalmente HTML18), y lo presenta en pantalla permitiendo al usuario interactuar con su contenido y navegar hacia otros lugares de la red mediante enlaces o hipervínculos. La funcionalidad básica de un navegador web es permitir la visualización de documentos de texto, posiblemente con recursos multimedia incrustados. Los documentos pueden estar ubicados en la computadora en donde está el usuario, pero también pueden estar en cualquier otro dispositivo que esté conectado a la computadora del usuario o a través de Internet, y que tenga los recursos necesarios para la transmisión de los documentos (un software servidor web).

Tales documentos, comúnmente denominados páginas web, poseen hipervínculos que enlazan una porción de texto o una imagen a otro documento, normalmente relacionado con el texto o la imagen.

El seguimiento de enlaces de una página a otra, ubicada en cualquier computadora conectada a Internet, se llama navegación, de donde se origina el nombre navegador (aplicado tanto para el programa como para la persona que lo utiliza, a la cual también se le llama cibernauta). Por otro lado, navegador es una traducción literal del original en inglés, browser, aunque su uso es minoritario.

Novena Semana Conceptos básicos de Web

Novena semana

Tema: Conceptos básicos de Web

Elaborar páginas WEB desde el celular (Html Editor)

Subtemas: HTML, páginas web, páginas estáticas, páginas dinámicas, protocolos IP, navegadores (browsers), hojas de estilo, tablas, plantillas (template), marcos (frames), hipervínculos locales y externos, software de edición de sitios web, publicador de sitio web, servidor, dominio, alojamiento y publicación, solución web, plataforma web.

Fecha:

Objetivo:

Diseñar y construir soluciones web de nivel intermedio con interfaz amigable, empleando herramientas multimedia que permitan promocionar la información e imagen de una organización y/o cliente.

Actividad 2

Crea tu propia página Web.

Contenido

¿Qué es HTML Editor?

HTML Editor es un sencillo editor de HTML, puede colorear la sintaxis: nodos, atributos, JavaScript, CSS, soporte de autocompletado y búsqueda y reemplazo. Abre los archivos predeterminados con las extensiones: html, htm.

Qué es una página web estática

Lo primero que debemos entender es ¿a qué nos referimos con la palabra estática en el contexto de una página web?, y no es más que aquello que en el ámbito del código fuente del sitio web se encuentra fijo, no se mueve ni cambia de ninguna manera. Cuando hablamos de “estático” también podemos referirnos a que la página web tiene un número fijo de página, es decir, que tal como fue diseñada y almacenada en el servidor web, así mismo la recibe el navegador y la ve el usuario, como un número fijo de páginas HTML.

Una página web estática está compuesta por archivos HTML individuales por cada página que son pre-generados y presentados al usuario a través del navegador de la misma forma.

Qué es una página web dinámica

La palabra dinámica se refiere a elementos que cambian continuamente, son interactivos y funcionales, en lugar de ser simplemente informativos. Por supuesto, eso requiere utilizar más que solo código HTML y CSS.

En comparación con las páginas web estáticas, que son mayoritariamente informativas, una página web dinámica incluye aspectos que se caracterizan por la interactividad y la funcionalidad, por ejemplo, los usuarios pueden interactuar con la información que se presenta en la página gracias a las instrucciones creadas a través de los lenguajes de programación y la base de datos sobre la que está construida.