Taller 1: conceptos básicos y entorno de programación HTML5, CSS3 y Java Script
|
|
|
- Gabriel Ortega Castro
- hace 7 años
- Vistas:
Transcripción
1 Taller 1: conceptos básicos y entorno de programación HTML5, CSS3 y Java Script
2 Contenido Presentación 3 Las aplicaciones móviles web o web apps: 5 El HTML 6 El CSS 9 El Java Script 10 Herramientas para el desarrollo de apps web 10 ACTIVIDAD 1. Personaliza la página índex.html de Mi primera app 17 ACTIVIDAD 2. Personaliza la interfaz gráf ica de la app 20
3 Presentación En este taller comprenderás los conceptos básicos utilizados en la creación de una app web, y cómo modificar su aspecto mediante hojas de estilo en CSS, a partir del código HTML5, CSS3 y Java Script de una app ya establecido, (ver figura 1). Figura 1: aplicación móvil: Mi primera app Duración: 4 horas Objetivos: Familiarizarse con los conceptos básicos y elementos principales del lenguaje HTML5, CSS3 y Java Script. Visualizar la app web desde un navegador web. Contenidos: App web Introducción a HTML Introducción a CSS Java Script Herramientas para el desarrollo de apps web: Sublime Text 3 y PhoneGap 3
4 Recursos: Archivo primera_app.zip PhoneGap instalado en el computador Sublime Text 3 instalado en el computador Evaluación: Al finalizar el taller deberás entregar la app con las modificaciones realizadas en un archivo.zip o.rar, Este archivo deberá contener los documentos que permiten el funcionamiento de la app. 4
5 Las aplicaciones móviles web o web apps: Una web app es aquella que se puede abrir en todos los dispositivos móviles independientemente del sistema operativo que utilicen, ya que las apps web se pueden abrir y visualizar desde el navegador del dispositivo. Este tipo de aplicaciones móviles se consideran multi-plataforma porque permiten a los usuarios acceder a ellas a través de un servidor web o mediante el uso de un navegador. Cómo funciona una app web: Una app web funciona a través del uso del Internet y de la web. El Internet permite formar una red de computadores que se comunican entre ellas. Y la web permite abrir la aplicación web a partir del uso de navegadores como: Internet Explorer, Firefox y Google Chrome entre otros. Lo cual funciona de la siguiente forma: cuando digitamos una dirección web en el navegador de nuestro dispositivo móvil, este realiza un pedido a otro dispositivo que se utiliza como servidor, el servidor recibe los pedidos de los dispositivos que se denominan clientes que son las computadores, tabletas o celulares inteligentes de la gente que navega en Internet y responde enviando un archivo HTML, una página web o aplicación web. Figura 2: relación servidor cliente SERVIDOR SERVIDOR PEDIDO INTERNET CLIENTE CLIENTE INTERNET RESPUESTA 5
6 La base de construcción de una app web son los lenguajes HTML, CSS y Java Script. Java Script Interactividad entre la app web y el usuario CSS Apariencia de la app web Html Estructura de la app web El HTML Corresponde a las siglas HyperText Markup Language (lenguaje de marcas de hipertexto) y hace referencia a un lenguaje de programación que sirve para describir el contenido de una página o aplicación web, es decir, permite indicar que la página o aplicación web tiene texto, imágenes, vídeos, audios, formularios o enlaces a otras páginas. Figura 3: código HTML 6
7 Etiquetas básicas de HTML: El lenguaje HTML usa como códigos algo denominado etiquetas, éstas sirven para orientar y designar funciones o parámetros. Las etiquetas en HTML están encerradas entre los símbolos < y >. Se cierran con el nombre de la etiqueta procedido con el símbolo /. Las etiquetas afectan el código por la apertura y el cierre de la etiqueta. A continuación se exponen las más comunes de la versión HTML5: Estructura de una página web Etiqueta <html> </html> <head> </head> <title> </title> <body> </body> Descripción Delimita y engloba toda la página web, que consta de cabecera y cuerpo. Delimita y engloba la cabecera de una página, que contiene un conjunto de informaciones que no se muestran en la ventana, entre ellas el título de la página, pero que pueden ayudar a los navegadores y a los buscadores para interpretar o a encontrar correctamente la página. Dentro de la cabecera (HEAD), lo que se incluye aquí se muestra en la barra del título de la ventana del navegador. Delimita y engloba el cuerpo de la página, que son el conjunto de informaciones (texto e imágenes) que se muestran en la página, así como las indicaciones de cómo deben mostrarse. Formatos de párrafo Etiqueta <H1>... </H1> o <H2>... </H2> (hasta 6) <P>... </P> Descripción Párrafos que son encabezamientos (con distintos niveles). Párrafos normales. El atributo align permite alinear el texto del párrafo. Se puede aplicar igual a las etiquetas <H1>, <H2> y demás. <BR> Permite partir un párrafo empezando una línea nueva pero sin dejar espacio. 7
8 fram e #1 frame #2 frame #3 Listas Etiqueta Descripción <UL>... </UL> Lista numerada. <OL>... </OL> Lista no numerada. <LI>... </LI> Elementos de una lista. Enlaces y multimedia Etiqueta Descripción Enlace absoluto a una página. Enlace relativo a una página. Marcador (enlace interno) dentro de una página. Muestra una imagen que está contenida en una carpeta llamada img, que normalmente es de formato GIF, PNG o JPG. Muestra un audio que está contenido en una carpeta. Muestra un vídeo que está contenido en una carpeta. 12:12 8
9 El CSS Corresponde a las siglas Cascading Style Sheets (hoja de estilo en cascada) y sirve para escribir el formato o apariencia de una página o aplicación. Si bien HTML es el lenguaje que da estructura a la página web y genera una interfaz básica con la cual interactuar, CSS describe la presentación de la página o aplicación web, es decir, los colores, las capas, las fuentes o tipografías del texto, además de esto, permite adecuar la página a diferentes estructuras o dispositivos, en otras palabras, la reproducción de la página en diferentes tamaños de pantalla responsive (ver figura 1). Una hoja de estilo CSS externa puede ser enlazada a un documento HTML mediante el elemento link de HTML, ejemlo: <link href= css/hojaestilos.css rel= stylesheet >. La etiqueta <link> se coloca en la cabecera HEAD del documento (ver figura 3, línea 29 del código HTML) A continuación se exponen algunos de los elementos utilizados en la versión CSS3. Figura 4: código CSS3 Etiqueta color: #1162ac; color: chocolate; font-size: 20px; background-color: #1162ac background-color: #1162ac; padding: 20px; padding: 20px 0px 6px 40px; #caja1{ margin-left:35px; margin-bottom:20px; } Descripción Cambia el color del texto. Se puede especificar con el código hexadecimal del color (utilizando el prefijo #) o con el nombre de color. Define el tamaño del texto. Se puede definir con un tamaño fijo (expresado en píxeles: px). Define el color de fondo de una caja (o <div>) Se puede indicar un color hexadecimal. Define el espacio existente entre el contenido y el borde de la caja. Define el espacio existente entre cajas (<div>) o bien entre cajas y los márgenes de la página. 9
10 El Java Script HTML y CSS dan forma y estructura a la interfaz de la página web, javascript se encarga de gestionar operativamente las acciones usuario-interfaz, es decir, si el usuario interactúa con la página web, javascript gestionará y validará dichas acciones, por ejemplo, si nos encontramos con un formulario donde el usuario debe ingresar fechas o cajones de selección múltiple para validar una información, Javascript se encargará de gestionar este proceso. Javascript funciona muchas veces como complemento para HTML, ya que algunas funciones no podrían realizarse con este lenguaje, por ello, Javascript también nos permite adjuntar elementos de interacción como botones, gráficos o vídeos. Herramientas para el desarrollo de apps web Para el desarrollo de apps web te sugerimos utilizar las siguientes herramientas por su facilidad de uso: Sublime Text 3: PhoneGap: Sublime Text 3: es un editor de texto pensado para escribir código en la mayoría de lenguajes de programación y formatos documentales de texto, utilizados en la actualidad: Java, Python, Perl, HTML, JavaScript, CSS, HTML, XML, PHP, C, C++, entre otros. Cómo instalar Sublime Text 3: para instalar en tu computador esta herramienta realiza las siguientes acciones: Paso 1: Ingresa y descarga Sublime Text 3 de acuerdo al sistema operativo de tu computador. 10
11 Paso 2: Haz clic en ejecutar para instalar Sublime Text 3. Paso 3: Una vez finalizada la instalación podrás utilizar la herramienta Sublime Text 3. 11
12 PhoneGap: es una aplicación de código abierto que permite convertir aplicaciones móviles creadas en HTML5, Javascript y CSS en aplicaciones que pueden ejecutarse en dispositivos móviles con diferentes sistemas operativos como: Android, Microsoft y IOS, entre otros. Figura 5: PhoneGap Fuente: sitio oficial de PhoneGap Envuelva la app con PhoneGap Ejecute la app en dispositivos móviles Glosario FLas direcciones IP (IP es un acrónimo para Internet Protocol) son un número único e irrepetible con el cual se identifica una computadora conectada a una red que corre el protocolo IP. Por ejemplo: :3000 PhoneGap genera una dirección IP que permite conectar los dispositivos móviles a un computador que funciona como servidor formando una red o enlace que permite intercambiar información y por ende ejecutar la app web a partir del uso de los navegadores web. Para saber más consulta la página oficial de PhoneGap: Cómo instalar PhoneGap: para instalar esta herramienta en tu computador ingresa sigue las siguientes acciones: 12
13 Paso 1: Ingresa y descarga la versión según tu Sistema Operativo. Paso 2: Descomprime el archivo en tu computador. Descomprime el archivo Paso 3: Descomprime el archivo en tu computador. Haz clic para abrir 13
14 Una vez tengas instalado en tu computador la herramienta PhoneGap podrás utilizarla para visualizar en el navegador de los dispositivos móviles tu app. Aprende cómo hacerlo siguiendo los siguientes pasos: Paso 1: Descomprime el archivo: Taller 1. Conceptos básicos y entorno de programación HTML5, CSS3 y Java Script.zip. Luego haz clic en el + que se ubica en el panel izquierdo de PhoneGap. Paso 2: Selecciona crear nuevo proyecto PhoneGap o añadir un proyecto existente. En este caso vamos a añadir un proyecto existente 14
15 Paso 3: Ingresa a la carpeta: Taller 1. Conceptos básicos y entorno de programación HTML5, CSS3 y Java Script y selecciona la carpeta primera_app contiene el proyecto o app existente. Carpeta que contiene la app Paso 4: Inicie el servidor, en la parte inferior aparecerá una barra verde con la dirección IP de la app. Si el servidor no se ha iniciado, haz clic en la flecha > Dirección IP 15
16 Paso 5: Escribe la dirección IP generada por PhoneGap en el navegador de tu computador o dispositivo móvil para visualizar la tu app. Ten en cuenta que la dirección IP, varía a la generada por PhoneGap para este taller :3000 Paso 6: Manos a la obra, ahora podrás visualizar, editar o modificar tu propia app utilizando la herramienta Sublime Text 3 y tener inmediatamente una vista previa de tu app en un dispositivo móvil utilizando PhoneGap. Cómo hacerlo: Abre un documento index.html en Sublime Text 3 Edita el contenido del documento Guarda el documento Visualiza las actualizaciones del documento en el navegador de tu computador o de un dispositivo móvil 16
17 1. A I ACTIVIDAD 1 n f Personaliza la página índex.html de Mi primera app 1. Ingresa a la carpeta: primera_app en ella encontrarás la siguiente estructura de carpetas: 2. Ingresa a la carpeta www y selecciona el archivo index.html para editarlo con la herramienta Sublime Text 3. Utiliza el PhoneGap para visualizar los cambios en la app (Ver página 14). 17
18 Figura 6: página índex.html de mi primera app Antes Después 18
19 Paso 1: Modif ica el título Paso 2: Modif ica la imagen Paso 3: Modif ica el texto 19
20 A ACTIVIDAD 2 Personaliza la interfaz gráf ica de la app En el archivo hojaestilos podrás configurar el color del fondo de la app, de la fuente/textos, el color de los bloques, el de los enlaces y el tamaño de los textos. Para hacerlo realiza las siguientes acciones: 1. Ingresa a la carpeta www y abre la carpeta css luego selecciona el archivo hojaestilos.css para editarlo con la herramienta Sublime Text 3. Ingresa a la carpeta CSS Abre el archivo hojaestilo.css con Sublime Text 3 2. Personaliza el encabezado de la app a partir de los siguientes pasos: Figura 9: Encabezado de la app Banner Home Fondo Título Barra 20
21 Paso 1: Modif ica el fondo Ubícate en la línea 2 y cambia el fondo de la app, (../img/fondoazul.png ) reemplaza la palabra fondo azul por fondoverde: (../img/fondoverde.png ) Paso 2: Modif ica la barra Ubícate en la línea 12 y modifica el color de la barra de la app border-bottom: #648dc1 5px solid; reemplaza el código del color #648dc1 por el código #a9c67a Paso 3: Modif ica el banner Ubícate en la línea 18 y cambia el banner de la app (../img/header.png ) reemplaza la palabra header por headerverde (../img/headerverde.png ) Paso 4: Modif ica el título Para cambiar el tamaño del título ubícate en la línea 25: font-size: 20px; y modifica el tamaño 20px por 30px así: font-size: 30px; Paso 5: Modif ica el color de la home Modifica el color de home, ubícate en la línea 33: background: #648dc1; y reemplaza el código de color #648dc1 por el código #a9c67a 21
22 Figura 10: código css del encabezado de la app Fondo de la app Código del color de la barra Banner de la app Tamaño del título de la app Código del color de home 22
23 3. Personaliza el cuerpo de la app a partir de los siguiente pasos: Figura 11: cuerpo de la app Antes Subtítulo Bloques Después 23
24 Paso 1: Modif ica el color del subtítulo Ubícate en la línea 58: color: #648dc1; y modifica el código de color del subtítulo, reemplaza el código #648dc1 por el código #a9c67a Paso 2: Modif ica el color de los bloques Ubícate en la línea 75: background: #648dc1; y modifica el color de los bloques de la app border reemplaza el código de color #648dc1 por el código #a9c67a Figura 12: código css del cuerpo de la app Código del color del subtítulo de la app Código del color de los bloques de la app 24
25 Anexo: la imagen que se muestra a continuación posee el código de los colores HTML utilizados en el código CSS para modificar los colores de la app, a cada código lo debe anteceder siempre el signo #. Figura 13: códigos de los colores hexadecimales Fuente: holaho 25
26
UNIDAD 1 GENERALIDADES HTML
UNIDAD 1 GENERALIDADES HTML GENERALIDADES HTML5 Una página web es un archivo con texto en el que se insertan diferentes etiquetas HTML, para que ese contenido pueda ser interpretado por el navegador web.
QUÉ SE NECESITA PARA UTILIZAR HTML5
Una página web es un archivo con texto en el que se insertan diferentes etiquetas HTML, para que ese contenido pueda ser interpretado por el navegador web. Existen diferentes versiones del lenguaje HTML,
CONTENIDOS DEL CURSO ONLINE DE DISEÑO Y DESARROLLO WEB CON HTML5, CSS Y DREAMWEAVER CS4:
Curso Online Diseño y Desarrollo Web con HTML5, CSS y Dreamweaver CS4 Completo Curso Online de Diseño y Desarrollo Web mediante el lenguaje programación HTML5, la hoja de estilos CSS y el programa de diseño
Extensiones. Guillermo López Mozilla Hispano
Extensiones Guillermo López Mozilla Hispano Extensiones Qué son? Programilla para extender el comportamiento/visualización de cualquier programa Mozilla Usan la misma tecnología que las aplicaciones Mozilla
HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet)
HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet) 1. QUÉ ES UNA HOJA DE ESTILOS? Las hojas de estilos son un conjunto de instrucciones, el cual permiten manejar el formato y presentación de contenido
Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4
Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Código: DWEB003 Duración: 160 Horas Objetivos: Diseño y desarrollo Web con HTML 5 y CSS Dotar al alumno de conocimientos teóricos y prácticos
Técnicas de visualización
Técnicas de visualización LENGUAJE HTML Máster en Tecnologías de la Información Geográfica Laboratori d Informació Geogràfica i de Teledetecció (LIGIT) Departament de Geografia. UAB Anna Jiménez Introducción
> Temario Curso de Diseño Web <
le ayuda a crear hermosos diseños para sitios web y aplicaciones móviles en un instante, sin necesidad de programación. Brinda imágenes vectoriales y de mapa de bits, maquetas, gráficos 3D, y contenido
Qué es HTML? Estructura interna de una página HTML. Cabecera de la página <head>
Qué es HTML? El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada,
LENGUAJES JÓVENES PROGRAMADORES
LENGUAJES JÓVENES PROGRAMADORES SCRATCH Qué es Scratch? Es un lenguaje de programación creado por el MIT (Instituto Tecnológico de Massachusetts, EE.UU.) y diseñado para el aprendizaje de la programación.
DREAMWEAVER CS4 Código: 3492
DREAMWEAVER CS4 Código: 3492 Modalidad: Distancia Duración: Tipo A Objetivos: Aportar al alumno de un modo rápido y sencillo las competencias necesarias para la creación y diseño de páginas Web en Dreamweaver.
Diseño web. Fundamentos de CSS. Informática 4º ESO
Diseño web Fundamentos de CSS Informática 4º ESO Cascading Style Sheets HTML está bastante limitado a la hora de dar formato a las páginas web HTML fue inventado por científicos Énfasis en el contenido
2. Manejar los elementos básicos de un lenguaje usado en la creación de Páginas Web. 2.1 Definición de objetos y contenidos de la página web.
2. Manejar los elementos básicos de un lenguaje usado en la creación de Páginas Web. 2.1 Definición de objetos y contenidos de la página web. INTERNET En 1969, el Departamento de Defensa de E.U construyo
HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto)
HTML HyperText Markup Language (Lenguaje de Marcas de Hipertexto) Introducción Un lenguaje de marcas es una forma de codificar junto con el texto, incorporando etiquetas que contienen información adicional
Antes de comenzar un sitio. Empezar un sitio web
Antes de comenzar un sitio Es muy recomendable realizar la siguiente actividad, de evaluación de páginas web, para tener ideas y recursos. http://www.uamvirtual.es/mod/assignment/view.php?id=3228 Empezar
DISEÑANDO. Web. Empresa. de mi. COmo crear una web empresarial sin ser programador ni diseñador
introducción Bienvenida El Instructor Juan Sebastián Ossa Domínguez Diseñador Gráfico y Diseñador Desarroldor de Software introducción Bienvenida Objetivo del Curso Transmitir los conceptos básicos diseño
Modalidades.
Curso de HTML5 Accesible con Sublime Text Se han escrito o creado infinidad de libros y cursos sobre desarrollo Web. Sin embargo, la tecnología de desarrollo de sitios Web ha evolucionado muchísimo desde
DISEÑO Y DESARROLLO WEB CON HTML 5, CSS DREAMWEAVER CS4
DISEÑO Y DESARROLLO WEB CON HTML 5, CSS DREAMWEAVER CS4 Código: 1413005 OBJETIVOS: Para diseñar y publicar una página Web, saber maquetar una página Web, saber crear animaciones, etc. CONTENIDOS: DISEÑO
PROGRAMA FORMATIVO. Diseño y desarrollo web con HTML 5, CSS y Dreamweaver CS4 - Obra completa - 2 volúmenes
PROGRAMA FORMATIVO Diseño y desarrollo web con HTML 5, CSS y Dreamweaver CS4 - Obra completa - 2 volúmenes Sector: Desarrollo Web Multimedia Modalidad: Distancia Duración: Objetivos: Código: 4356 Dotar
Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4
Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Modalidad: Distancia, On-Line Duración: 154 horas Objetivos: Diseño y desarrollo Web con HTML 5 y CSS Dotar al alumno de conocimientos teóricos
PROGRAMA: Diseño y desarrollo Web con HTML 5,
PROGRAMA: Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Objetivos: Diseño y desarrollo Web con HTML 5 y CSS Dotar al alumno de conocimientos teóricos y prácticos para poder desarrollar un
GUIA 1 CONCEPTOS BÁSICOS
DEFINICIÓN DE HTML5 CESDE GUIA 1 CONCEPTOS BÁSICOS HTML5 es una combinación de nuevas etiquetas del lenguaje HTML (HyperText Markup Language - lenguaje de marcas de hipertexto), el hipertexto es la unión
TECNOLOGÍA DE LA INFORMACIÓN Y COMUNICACIÓN ÁREA SISTEMAS INFORMÁTICOS. Entorno dreamweaver DESARROLLO DE APLICACIONES WEB I
TECNOLOGÍA DE LA INFORMACIÓN Y COMUNICACIÓN ÁREA SISTEMAS INFORMÁTICOS Entorno dreamweaver DESARROLLO DE APLICACIONES WEB I Lic. RUBICELL PINEDA TELLEZ ALUMNA: DURÁN VARGAS CLAUDIA MATRICULA: 10292047
Programa Formativo. Código: Curso: Curso superior de Diseño de Páginas Web con Adobe Dreamweaver CS6 Modalidad: DISTANCIA Duración: 80h.
Código: 13620 Curso: Curso superior de Diseño de Páginas Web con Adobe Dreamweaver CS6 Modalidad: DISTANCIA Duración: 80h. Objetivos En la actualidad Dreamweaver es uno de los principales programas utilizados
QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un
QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un determinado elemento de una página web. Siglas CCS significa "Cascading
Identificar cuál es la estructura de una página Web y sus principales secciones. Desarrollar una página Web en un editor.
MÓDULO 2. Introducción Después de conocer los conceptos básicos sobre el lenguaje de programación HTML, en este módulo identificaremos la estructura de una página Web y lo haremos revisando el lenguaje
Conceptos Teóricos de HTML5 (material extra adicional libro):
Temario de Examen Unidad I Materia: Informática Catedráticos: Víctor Aquino/Débora Santizo Temas: Uso del programa Sublime Text Forma Correcta de guardar archivos html y css (.html y.css) Uso de la etiquetas
Wenceslao Zavala
Producción Digital I Wenceslao Zavala www.producciondigitalup.com.ar alumnos@producciondigitalup.com.ar Convenciones Web Diseño Web El Monitor: Unidad de Medida (pixel) Dimensión de Trabajo (según pantalla
ESTRUCTURA DEL CÓDIGO HTML5
ESTRUCTURA DEL CÓDIGO HTML5 1. DocType Es la etiqueta que se escribe en la primera línea del código. Permite declarar el tipo de documento. Es decir, el doctype indica que el documento está escrito siguiendo
UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION
CICLO 01-2016 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 2 Nombre de la practica: Introducción y conceptos básicos de CSS Lugar de ejecución:
Aprenda los lenguajes HTML5, CSS3 y JavaScript para crear su primer sitio web
La Web 1. Qué es la Web? 7 1.1 Lado servidor: HTTP, FTP, lenguajes, SQL 7 1.2 Lado cliente: HTML, CSS, JavaScript 10 2. Los lenguajes y su utilidad 10 2.1 HTML 10 2.2 CSS 14 2.3 JavaScript 17 2.4 Ejemplo
Práctica de HTML (Curso )
Práctica de HTML (Curso 2007-2008) Introducción HTML (Hypertext Markup Language) es un lenguaje estándar utilizado en Internet para representar la información intercambiada por sus usuarios en forma de
TEMA 9 CREACIÓN DE PÁGINAS WEB
TEMA 9 CREACIÓN DE PÁGINAS WEB OBJETIVOS Conocer las páginas web y sus elementos. Insertar tablas, capas, enlaces en las páginas web. Crear páginas web con NVU. Crear un sitio web. Configurar un sitio
Las practicas deberás hacerlas sin la ayuda de tu asesor
3 Introducción HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que
Laboratorio de Aplicaciones Telemáticas (Curso 2009/2010)
Breve introducción a la Web y XHTML Laboratorio de Aplicaciones Telemáticas (Curso 2009/2010) Jesús Arias Fisteus jaf@it.uc3m.es Breve introducción a la Web y XHTML p. 1 La Web World Wide Web (abreviado
DISEÑO Y DESARROLLO WEB CON HTML 5, CSS Y DREAMWEAVER CS4 OBRA COMPLETA 2 VOLÚMENES
DISEÑO Y DESARROLLO WEB CON HTML 5, CSS Y DREAMWEAVER CS4 OBRA COMPLETA 2 VOLÚMENES Objetivos Dotar al interesado de conocimientos teóricos y prácticos para poder desarrollar un sitio Web con HTML y aplicar
1.- INTRODUCCIÓN. <etiqueta> contenido</etiqueta>
1.- INTRODUCCIÓN 1.1 Definición A lo largo de este manual vamos a descubrir el lenguaje más utilizado para la creación de páginas web: el Hyper Text Markup Language, más conocido como HTML. Se puede afirmar
PLAN DE ESTUDIOS DE INFORMÁTICA SEGUNDO GRADO DE SECUNDARIA
PLAN DE ESTUDIOS DE INFORMÁTICA SEGUNDO GRADO DE SECUNDARIA Consideraciones iniciales: 1. Presentar el reglamento del aula de medios (uso correcto de las computadoras, medidas de seguridad en el aula,
ANEXO 5 CONFIGURACIÓNES MOODLE
ANEXO 5 CONFIGURACIÓNES MOODLE Como una de las plataformas estudiantiles más conocidas en el mundo por ser de código libre, por facilidad de uso y versatilidad, se escogió para hacer parte de la propuesta
Temario Programación Web para Web
Temario Programación Web para Web 1 Introducción al HTML 1 Qué es una página web? T 2 Qué es HTML? T 3 Porqué aprender HTML T 4 Base del lenguaje: las etiquetas HTML V 5 Estructura de un documento HTML
Índice. Presentación Espacio de trabajo y gestión de archivos. Gestión de sitios y páginas
Índice Índice Presentación.................................... 11 Espacio de trabajo y gestión de archivos Introducción....................................... 15 Lección 1. Acceder a Dreamweaver: la Ventana
1 Conociendo Macromedia Dreamweaver 2 Creación de sitios y páginas Web
1 Conociendo Macromedia Dreamweaver 1.1 Introducción a Macromedia Dreamweaver 1.2 Requisitos mínimos necesarios 1.3 Entrar en Macromedia Dreamweaver 1.4 Entorno de trabajo 1.5 Barra de herramientas Insertar
Guía del Curso Certificación IT en Adobe Dreamweaver CC 2015
Guía del Curso Certificación IT en Adobe Dreamweaver CC 2015 Modalidad de realización del curso: Titulación: A distancia y Online Diploma acreditativo con las horas del curso OBJETIVOS Este Curso aportar
CSS. Rogelio Ferreira Escutia
CSS Rogelio Ferreira Escutia Definición La hojas de estilo en cascada (en inglés Cascading Style Sheets), CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML
Un paseo por la Web Qué es el HTML? Hojas de estilo en cascada (CSS) Qué herramientas necesitamos? LECCIÓN 2: ESTRUCTURA DEL CÓDIGO HTML
NDICE LECCIÓN 1: INTRODUCCIÓN Un paseo por la Web Qué es el HTML? Hojas de estilo en cascada (CSS) Qué herramientas necesitamos? LECCIÓN 2: ESTRUCTURA DEL CÓDIGO HTML Las etiquetas HTML Guardar páginas
CSS Cascading Style Sheets Rellenos y Márgenes Antes de empezar...
Rellenos y Márgenes Antes de empezar... margin tienen una pequeña particularidad que suele ser el origen de muchos quebraderos de cabeza: Los márgenes exterior horizontales de cajas contiguas que se toque
Diseño y programaciã³n de pã ginas web
Diseño y programaciã³n de pã ginas web Objetivos Con motivo de mostrar a cada usuario cómo diseñar y programar páginas web, este curso pretende formar inicialmente al alumno sobre el lenguaje de programación
Manual Básico de Creación y Edición de Entradas, Páginas y Menús en Wordpress
Manual Básico de Creación y Edición de Entradas, Páginas y Menús en Wordpress En su origen, WordPress estaba enfocado hacia la creación de blogs, por lo que la presentación de artículos en formato web
Personalizando Plantillas
Personalizando Plantillas Ya que se tiene la estructura general del sitio web, se comienza a trabajar con la apariencia de cada una de las plantillas. Página Principal (index.html) La página principal
Páginas Web Barcelona
Páginas Web Barcelona Requisito previo: Todos los asistentes deben de tener previo conocimiento de las plataformas Macintosh o Windows. Se prefiere que los delegados tengan una experiencia básica en HTML
Universidad Politécnica de El Salvador Computación Básica. HTML Guía 1. Requerimientos y material. Qué es HTML? Etiquetas
Universidad Politécnica de El Salvador Computación Básica HTML Guía 1 Requerimientos y material Internet es un medio que no precisa de mucho conocimiento, el prerrequisito inmediato para poder usar esta
Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos:
Conceptos básicos de la internet y la web Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos: Internet: Red mundial de computadoras
Recomendaciones Sobre Etiquetas y Páginas
Recomendaciones Sobre Etiquetas y Páginas Índice Etiquetas y Páginas. pág Editor de Texto: Atto. pág Herramientas del Editor. pág 4 4 Hipervinculos. pág 7 5 Imágenes. pág 9 6 Video. pág Material elaborado
Recomendaciones Sobre Etiquetas y Páginas
Recomendaciones Sobre Etiquetas y Páginas Índice Etiquetas. pág Atto, Nuevo Editor de Texto. pág Herramientas del Editor pág 4 4 Hipervinculos. pág 7 5 Imágenes. pág 9 6 Video. pág Material elaborado por
ojovoz Una plataforma de código abierto para la creación de memorias comunitarias. Manual del usuario
ojovoz Una plataforma de código abierto para la creación de memorias comunitarias. http://ojovoz.net Manual del usuario 1. CÓMO INSTALAR OJOVOZ. 1. ojovoz funciona en la mayoría de teléfonos con sistema
Curso básico de creación de páginas web
Curso básico de creación de páginas web Programa de formación docente UAM 2005-2006 Miguel Sevilla Callejo Abril 2006 Departamento de Geografía Universidad Autónoma de Madrid Objetivos Desarrollar las
Instructivo instalación y configuración del Componente Firma (Versión 3.0.6)
() Contenido 1. Descripción general... 3 2. Requerimientos del sistema... 3 3. Instalación del Componente de forma Manual... 4 4. Usuarios con servidor proxy... 6 5. Actualización del componente de forma
Jorge De Nova Segundo
UD 4: Instalación y administración de servicios Web Introducción Jorge De Nova Segundo La World Wide Web (WWW) o Red informática mundial es un sistema de distribución de información basado en hipertexto
HTML HTML HTML. Diseño de Sitios Web. Qué es HTML?
Diseño de Sitios Web 5 (I) Qué es? Es un lenguaje descriptivo con el cual se describe la estructura del texto y todos los elementos que se muestran en la página. Es el método más usado para publicar documentos
CONCEPTOS BÁSICOS PARA EL DISEÑO DE PAGINAS WEB
COLEGIO AGUSTINIANO CIUDAD SALITRE AREA DE TECNOLOGÍA E INFORMATICA GUIA DE APOYO PRIMER BIMESTRE GRADO UNDECIMO CONCEPTOS BÁSICOS PARA EL DISEÑO DE PAGINAS WEB UNIDAD TEMÁTICA: INICIANDO CON HTML Y DREAMWEAVER
Unidad I - INTRODUCCIÓN AL HTML. Profesor: Marcos Tulio Jerez Bastidas. Barinas, abril 2015
República Bolivariana de Venezuela Universidad Nacional Experimental de los Llanos Occidentales Ezequiel Zamora Programa de Ingeniería, Arquitectura y Tecnología Subproyecto de Algoritmo y Programación
En HTML, para indicar el orden de tabulación entre los controles de un formulario se emplea
HTML completo Pregunta 1 En HTML, para indicar el orden de tabulación entre los controles de un formulario se emplea Solución: El atributo tabindex Pregunta 2 El elemento de HTML que se emplea para definir
CURSO HTML5. www.council.cl. Dirección: Serrano #73, Piso 4, Oficina 414 Santiago, Chile. 1) Instalación de Navegadores y Herramientas
CURSO HTML5 1) Instalación de Navegadores y Herramientas Descarga e instalación de Mozilla Firefox Descarga e instalación de Google Chrome Descarga e instalación de Opera No tiene nombre en planilla Descarga
Guía del Curso Técnico Profesional en Diseño Web Profesional con Dreamweaver CS6
Guía del Curso Técnico Profesional en Diseño Web Profesional con Dreamweaver CS6 Modalidad de realización del curso: Titulación: A distancia y Online Diploma acreditativo con las horas del curso OBJETIVOS
Actividad 3: Codificación básica de un texto en HTML
Actividad 3: Codificación básica de un texto en HTML Abrir un editor de texto, por ejemplo en nuestro caso notepad, después codificar los elementos básicos y guardar en una carpeta con la extensión.html
DISEÑOS DE PÁGINAS WEB CON N.V.U. E INICIACIÓN AL CÓDIGO HTML
DISEÑOS DE PÁGINAS WEB CON N.V.U. E INICIACIÓN AL CÓDIGO HTML Una página web es un documento escrito empleando un lenguaje denominado HTML (Hyper text Markup language; Lenguaje de marcas de hipertexto).
TÉCNICO PROFESIONAL EN DISEÑO WEB PROFESIONAL CON DREAMWEAVER CS6
Modalidad: Distancia Duración: 77 Horas Objetivos: En la actualidad Dreamweaver es uno de los principales programas utilizados por los profesionales para el diseño y maquetación de páginas web. Estos materiales
APLICACIÓN DE LA EVALUACION DIAGNOSTICA. Elaboración de Páginas Web 6 Semestre
Elaboración de Páginas Web 6 Semestre Nombre: Fecha: Grupo: Semestre: Calificación: 1. Una página Web es: 2. Los elementos de una página Web son: 3. En que lenguaje se elaboran las páginas Web: 4. Menciona
HTML Guía de trabajo para 3º ESO
HTML Guía de trabajo para 3º ESO Página 2 Índice 1. Qué es HTML?... 3 2. Cómo son las páginas Web?... 3 3. Qué es un sitio Web?... 3 4. Práctica 1. Crear un sitio web local... 4 5. Primera página HTML...
Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6
Modalidad Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6 cod / EU 0518 A Distancia Duración 300 Horas Objetivos Aportar al alumno todas las competencias y conocimientos necesarios
Guía del Curso Certificación IT en Adobe Dreamweaver CC 2015
Guía del Curso Certificación IT en Adobe Dreamweaver CC 2015 Modalidad de realización del curso: Número de Horas: Titulación: Online 140 Horas Diploma acreditativo con las horas del curso OBJETIVOS Este
Curso de Lenguaje de programación HTML
OBJETIVOS DEL CURSO Para comenzar a programar páginas Web realicemos este programa formativo sobre el lenguaje de programación de páginas Web por excelencia: HTML. Explicaciones prácticas y múltiples ejercicios
Mindomo
Mindomo www.mindomo.com Descripción: Mindomo es una herramienta en línea gratuita para crear mapas conceptuales, lo que le permite organizar ideas y pensamientos, planificar y monitorear proyectos, definir
CREACIÓN DE PÁGINAS WEB CON NVU
CREACIÓN DE PÁGINAS WEB CON NVU 1. Introducción... 1 2. Instalación... 2 3. Antes de comenzar una página web... 2 4. Editar páginas web con NVU... 5 5. Definir el diseño de nuestro sitio... 6 5.1. Plantillas...
DESARROLLO WEB EN ENTORNO CLIENTE
DESARROLLO WEB EN ENTORNO CLIENTE CAPÍTULO 1: Selección de arquitecturas y herramientas de programación Juan Manuel Vara Mesa Marcos López Sanz David Granada Emanuel Irrazábal Jesús Javier Jiménez Hernández
Instructivo instalación y configuración del Componente de Autenticación y Firma Digital(Versión 3.0.1)
Componente de Autenticación y Firma Digital() Contenido 1. Instalación del Componente de forma Manual... 4 2. Usuarios con servidor proxy... 6 3. Actualización del componente de forma automática... 10
Guía del Curso Dreamweaver CS 5
Guía del Curso Dreamweaver CS 5 Modalidad de realización del curso: Número de Horas: Titulación: Online 80 Horas Diploma acreditativo con las horas del curso OBJETIVOS Dreamweaver es el programa líder
En ocasiones, nos puede interesar guardar una página web para
1. ALMACENAR LAS PÁGINAS En ocasiones, nos puede interesar guardar una página web para poder visualizarla posteriormente, incluso sin disponer de una conexión a Internet. Para ello, utiliza el comando
MÓDULO 1: FrontPage 2003 Parte 1ª
MÓDULO 1: FrontPage 2003 Parte 1ª TEMA 1. Introducción a la Web Internet y el World Wide Web Hipertexto HTML Servidores, Clientes y Redes Protocolos de Comunicación Direcciones, Dominios y Accesos TEMA
Click Computación Especialidad: Diplomado Materia: HTML y CSS3 40 Horas HTMLY CSS3: HISTORIA, PRESENTE Y FUTURO
CONTENIDO TEMATICO: HTMLY CSS3: HISTORIA, PRESENTE Y FUTURO Presentación de la formación y del formador INSTALACIÓN DE NAVEGADORES Y HERRAMIENTAS Descarga e instalación de Mozilla Firefox Descarga e instalación
I: Formación complementaria en TI
I: Formación complementaria en TI DESARROLLO WEB - MULTIMEDIA FCDW01 Adobe Premiere Pro CS4 FCDW02 Crea tu sitio web con Joomla! FCDW03 Diseño y desarrollo web con HTML 5 y CSS2 FCDW04 DreamWeaver CS4
En que nos ayuda las hojas de estilo cascada (css)?
HECHO POR CREACIONES Y DESARROLLO WEB COSTA RICA, CUALQUIER MACRO CON GUSTO ESTAMOS PARA AYUDARLE, LLAMENOS Y CON GUSTO LE ATENDEREMOS TEL 8364-3733 // 8348-9439 En que nos ayuda las hojas de estilo cascada
DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA
DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA Nombre del Módulo: DISEÑO DE PAGINAS WEB CON HTML Código: CSTI0085 total: 3 Horas Objetivo General: Construir páginas Web en base
Hipervínculos o enlaces
1. INTRODUCCIŁN E n la mayoría de los casos, es conveniente repartir la información en varias páginas en lugar de incluir demasiado contenido en una única página. Por ello, cuando nuestro proyecto incluye
Actualización FX 2017
Actualización FX Store @Marzo 2017 Coincidiendo con nuestro quinto aniversario estamos actualizando FX Store para que sea compatible en las últimas versiones de los principales navegadores: El nuevo Firefox
Curso Básico de HTML
Curso Básico de HTML Qué es HTML? HTML es un pseudo-lenguaje de programación, no es un lenguaje en sí. Utiliza tags o etiquetas específicas para crear contenido y dar una estructura al documento. Existen
HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO
HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO PORTADA Las hojas de estilo referenciadas en la portada (http://pistalocal.pista-femp.org.es/index.php) son:
INSTITUTO TECNOLÓGICO SUPERIOR DE SANTIAGO PAPASQUIARO PROGAMACIÓN WEB CATEDRATICO: ISC JOEL LEYVA MARES
INSTITUTO TECNOLÓGICO SUPERIOR DE SANTIAGO PAPASQUIARO PROGAMACIÓN WEB CATEDRATICO: ISC JOEL LEYVA MARES 1.1 Perspectiva Histórica de Internet. Internet. Red mundial de computadoras interconectadas con
Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales HTML Desarrollo
1. Qué es App Inventor 2? 2. Requisitos para utilizar AI2
1. Qué es App Inventor 2? App Inventor 2 (AI2) es la versión mejorada de una herramienta de programación creada por el MIT (Instituto Tecnológico de Massachusetts) y que fue adoptada por Google para sus
Para tener en cuenta
Para tener en cuenta Puede ingresar por medio de un Computador Desktop (de escritorio); o un computador personal (portátil) sin importar el sistema operativo que este ejecutando, simplemente debe tener
HTML (Básico + Avanzado) Código: 7060
HTML (Básico + Avanzado) Código: 7060 Modalidad: Teleformación Duración: 56 horas Objetivos: HTML (BÁSICO) Para comenzar a programar páginas Web realicemos este programa formativo sobre el lenguaje de
Curso de Diseño web. Juan Carlos Hernández Pérez juancarhdezperez@gmail.com
Curso de Diseño web Juan Carlos Hernández Pérez juancarhdezperez@gmail.com 1 Tema 1 Introducción al lenguaje HTML 2 Introducción a HTML (I/II) HTML es un lenguaje para publicar textos en Web HTML te permite
GUIA CREACIÓN DE FORMULARIOS DE SUSCRIPCIÓN
GUI CRECIÓN DE FORMULRIOS DE SUSCRIPCIÓN Emisión: gosto 2016 Esta guía proporciona ayuda para la creación de formularios de suscripción generados en la plataforma y que se podrán incorporar a cualquier
Certificaciones ADOBE CS5 y CS6
Certificaciones ADOBE CS5 y CS6 La certificación Adobe Certified Associate (ACA) avala de forma internacional los conocimientos tales como conceptos de imagen, diseño, administración de proyectos/ colaboración,
Diplomado de Diseño Web
Fireworks es una aplicación que nos permite crear de una forma relativamente sencilla interfaces para web, es un editor de gráficos tanto vectoriales como de pixeles, en él se desarrollan elementos de
COLEGIO PABLO DE TARSO IED CONSTRUCCION DE PROYECTOS DE VIDA PRODUCTIVOS DREAMWEAVER UNO- PRÁCTICAS DOC RAUL MONROY PAMPLONA
Metas de comprensión cuarto periodo Comprende sus responsabilidades a la hora de formular sus propuestas como soluciones a problemas reales que impliquen el uso de las tecnologías de información y la gestión
Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí.
Internet Es una red de redes de ordenadores, que intercambian información basándose en el protocolo TCP/IP. Existen diversas formas de acceder a Internet: Correo electrónico, FTP, Videoconferencia, y la
Feliz cumpleaños. Introducción HTML & CSS
HTML & CSS 1 Feliz cumpleaños All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club.