Página 1 de 221
Página 2 de 221
Autoridades Instituto Emiliani Somascos Comunidad Somasca Obras Somascas en Guatemala
Lic. Raúl Hernández Chacón Director Técnico-Administrativo Instituto Emiliani Somascos
Lic. Henrry Caal Sub-director Instituto Emiliani Somascos
Lic. Juan Carlos Morales Coordinador Ácademico
Prof. David Subuyuj Coordinador Técnico
Armando Garcia Coordinación de Pastoral
Página 3 de 221
Bachillerato Industrial y Perito con especialidad en Computación
Silvio Ernesto Castro Asesor de Práctica Supervisada
Oscar Aurelio Mendez Asesor de Práctica Supervisada
Sandra López Asesor de Práctica Supervisada
Página 4 de 221
Promocion 2021 •
Ajvatz Villagran Edwin Wilfredo
•
6COMA •
Aldana Chigna Jose Mynor
6COMA •
6COMA •
Aldana Chigna José Adolfo Alonzo Reyes Edgar Moises 6COMA
•
Alvarado Muñoz Christel Judith 6COMA
•
•
•
Cotzajay Yapán Heidy Lourdes 6COMA
•
Cuc Hernández David Alfredo 6COMA
•
Arens Higueros Douglas Roberto 6COMA
Corzo Peralta Mario Alejandro 6COMA
6COMA •
Coguox Nerios Saulo Samuel
Culajay Roldan Mario Andres 6COMA
•
Blanco Melendres Maricruz del
Damián Fuentes Walter Iván 6COMA
Rosario 6COMA
•
De Paz Benito Jose Andres 6COMA
•
Bor Siney Daniel Estuardo 6COMA
•
Diaz Lopez Bryan Steve 6COMA
•
Cabrera Campaneros Fatima
•
Diaz olivares Saul Carlo Ivan
Jazmin 6COMA •
Cabrera Mendoza Sofia Asuncion
6COMA •
6COMA •
Camey Magzul Jonathan Camey
6COMA •
6COMA •
Carrascoza Garcia Cristian Castro Porras Julio César 6COMA
•
Chávez de León Alvaro Eduardo 6COMA
•
•
Franco Chiroy David Alejandro 6COMA
•
Godines Pineda Javier Estuardo 6COMA
•
Chinchilla Sosa Cinthya Valeska 6COMA
Florian Pirir Edgar Alexander 6COMA
Benjamin 6COMA •
Escobar Fernández Edgar Manuel
Godínez Socoy Felix Alexander 6COMA
•
Godínez Tunay María Fernanda 6COMA
Página 5 de 221
Promocion 2021 •
Florencio López, Edwin 6COMB
•
Hernández De León, Luis José Mariano 6COMB
• •
•
6COM B •
Hernández Patzán, Omar Alessandro 6COMB
•
Pérez Tipáz, Gerardo Adolfo 6ComB
Lara Ismatul, Laisha Antonia
•
Ramírez Dimatteo, Ricardo Andrés
•
Lima Y Lima, Carlos Manuel 6COMB
•
López Ramírez, Álvaro José 6COMB
•
López Samayoa, Genesis
6COMP B •
Mancilla González, Josué Sebastián
• •
Monzón Nimatuj, Jonathan Samuel
•
•
•
Morales Cifuentes Ruby, Abigail
•
Say Oliva, Pablo Andrés 6COMB
6COMB
•
Suchite Flores, Ángel Manuel
Morales Varela, Ronald Alexis
•
Velásquez Chitay, Josué Daniel
Orellana Sajqui, Kevin Alexander
6COMB •
6COMB •
Rivera Ramírez, Mario Adolfo 6COMB
6COMB •
Reyes Gutiérrez, Jorge Mario 6COMB
Andrés 6COMB •
Reyes Domínguez, Keneth Enrique 6COMB
Griselda 6COMB •
Ramírez Velásquez, César Antonio 6COMB
6COMB Montecinos Hernández, Josseline
Ramírez Solorzano, Jefry Adolfo 6COMB
Alexandra 6COMB
•
Pérez Hernández, Angelo Javier 6COMB
Dayanara 6COMB
•
Peinado Tepeu, Elmer Anscelmo
Osuna Ortiz, Enyembber Alexander
6COMB •
6COMB •
Pacheco Gil, Cesar Steven 6COMB
•
Pasán De León, Kateryn Yohana 6COMB
Velásquez García, Walter Estuardo Villatoro Mazariegos, Miguel Andrés 6COMB
•
Xunic Jutzuy, María Fernanda 6COMB
•
Yoc Chajón, Joshua Isaac 6COMB
Página 6 de 221
Centenario Somasco en América La humilde Congregación de los religiosos somascos tiene su origen en la Compañía de los Servidores de los Pobres, suscitada en la Iglesia de Dios por San Jerónimo Emiliani, bajo la acción del Espíritu Santo. Convertido a Dios y renovado profundamente por intercesión de María, en su ardiente deseo de seguir el camino del Crucificado y de imitar a Cristo, su Maestro, se hizo pobre y se entregó, en cuerpo y alma, al servicio de los pobres. Movido por la caridad divina, contagió a otros hombres, los cuales, por amor del Evangelio, se ofrecieron, junto con él, a Cristo. Mediante el ejercicio de toda clase de obras de misericordia, nuestro ardentísimo Padre propuso, para sí y sus compañeros, un estilo de vida que, mediante el servicio a los pobres, expresa su propia entrega a Cristo. Por eso, en los primeros tiempos, el pueblo los llamó: ‘Padres de las obras y de los pobres’. El 6 de diciembre de 1568, San Pío V adscribió esta nueva Compañía -que se iba desarrollando y cosechaba copiosos frutos para la Iglesia- entre las Congregaciones de Clérigos Regulares, y le concedió la facultad de poder profesar votos solemnes, sometiéndola directamente a la Sede Apostólica. Nuestra Congregación, respondiendo a la llamada de sus pastores y para bien de la Iglesia, ha emprendido desde sus orígenes, diversas actividades apostólicas, todas ellas inspiradas en el amor a Cristo. Con el mismo amor intenso del Fundador sigue dedicándose al cuidado material y espiritual de los huérfanos y de los pobres, se ocupa con tesón de la educación humana y cristiana de la juventud y del ministerio pastoral. La Congregación Somasca es un instituto clerical de derecho pontificio, formado por religiosos, sacerdotes y laicos, cuyo estilo de vida no supone distinciones, aun respetando la diversidad de ministerios. Siguiendo el ejemplo de Jesús y sus discípulos, sus miembros viven en común, y en común lo ponen todo, perseveran unánimes en la oración y en las obras, tienden a la perfección de la caridad con humildad de corazón, mansedumbre y benignidad, amando la pobreza y el trabajo, y deseando ardientemente atraer y unir a todos los hombres a Dios.
Página 7 de 221
La vida de la congregación se rige por sus contituciones y reglas, las cuales mantienen el espíritu de las primitivas ordenanzas adaptándolas a las condiciones de los tiempos. La congregación se las propone a cuantos quieren vivir y perseverar en ellas. En el año 1921, los somascos llegaron a América por primera vez, y con amor hicieron obras, entre ellas el Instituto Emiliani Somascos y Hogar de Huérfanos Santa Teresa. Por ello, celebramos el trienio posterior al centenario somasco en América, a celebrarse en 2021.
Página 8 de 221
Introducción El presente trabajo comprende los temas estudiados durante el ciclo escolar 2020 por los alumnos de 5to grado de la carrera Bachiller Industrial y Perito con Especialidad en Computación, alumnos del prestigioso establecimiento Instituto Emiliani Somascos y Hogar para Huérfanos Santa Teresa, con el objetivo de fomentar el aprendizaje entre los estudiantes. El presente trabajo da a conocer los diferentes temas que abarca el mundo de la tecnología por medio de las materias análisis de sistemas y tecnología II. Nos enfocaremos en los leguajes de programación Java, lenguajes de diseño como lo es CSS y lenguajes de etiquetas osea HTML con el fin de estudiar la estructura de su sintaxis, sus principales funciones y sobre todo para formar en el alumno la habilidad para la solución de problemas lógicos, estimular la creatividad e innovación. En el transcurso de esas dos materias también se manejaron conceptos muy puntuales que se dan a conocer a lo largo del documento, dichos conceptos forman parte de dicho aprendizaje ya que figuran como base de las diferentes aplicaciones que se les dieron en el área práctica.
Página 9 de 221
Justificación La necesidad de esta recopilación de información sobre lo que es nuestra carrera, tanto en nivel teórico como práctico, lleva el fin de retroalimentar a los estudiantes que conlleven leerlo, por propuesta propia o por la participación en las pruebas destacadas como lo que es un temario, con el propósito de hacer conciencia para la recaudación de información y las pruebas sean más conceptuales, prácticas de manera que estudien lo deseado. Lógicamente este Temario está separado por partes en las cuales se encuentran los temas principales y finales de cada bimestre que hayan visto en el año cursado que se desea: refrescar, recopilar, o leer. En el caso de los temas que se le sean propuestos en sus pruebas didácticas, que se realizarán a cabo en la institución. En los temas que corresponden a cada bimestre del año cursado tiene como fin: • • • •
Se explica al estudiante cuál es el tema principal. La perspectiva o perspectivas desde las que se aborda el estudio de ese tema. Explicación del contexto en el que se enmarca a estudiar. Dispone de ejemplos tanto prácticos como teóricos.
Y así con tantos factores que tienen o encuentren los estudiantes a la hora de tener la recepción de este temario para su propio estudio.
Página 10 de 221
Objetivos El presente documento tiene como finalidad dar a conocer todos los temas, que fueron abarcados durante 5to Bachillerato Industrial y Perito con especialidad en Computación, de una manera clara y fácil de comprender para los estudiantes. También pretendemos apoyar a los estudiantes, preparando esta herramienta de estudios, esto con el fin de que todos estén al mismo nivel y asi poder llevar a cabo una evaluación eficiente y exitosa. Por último, el objetivo principal es formar y preparar a los jóvenes, brindándoles una especie de retroalimentación de todo lo visto en años anteriores, esto con la finalidad de medir sus conocimientos y reforzar todo aquello que podría no estar claro. Finalmente, dicho documento tiene como objetivo ser un apoyo confiable para los jóvenes a evaluar y que puedan refrescar todo lo visto durante el segundo año de esta carrera tan importante que elegimos, de esta manera demostrar la importancia de todo lo visto durante el transcurso de toda la carrera.
Página 11 de 221
Temas Quinto Grado Tecnología II Capitulo I 1.
2.
3.
4.
Normalización 1.1
¿Qué es Normalizar?
1.2
Tipos de Normalización
Instalación SQL server 2014 2.2
Creación de la base de datos SQL Server 2014
2.3
Creación de tablas
Sintaxis SQL Server 2014 3.3
SQL Select
3.4
SQL Select Distinct
3.5
SQL Insertar
3.6
SQL Borrar
3.7
SQL Actualizar
Identificación de llaves foráneas y primarias 4.4
Llaves primarias
4.5
Llaves foráneas
4.6
SQL Inner Join
Capitulo II 1. Entorno de trabajo IDE´S 2. Introducción a Java 3. ¿Qué es Java?
Página 12 de 221
4. Instalar Java IDE´S 5. Variables de entorno 6. Estructura general de Java NetBeans 7. Salida de datos en consola 8. Compilador primario de Java 9. Variables e Identificadores 10. Tipos de datos 11. Constantes 12. Operadores lógicos, aritméticos y relacionales 12.12
Aritméticos
12.13
Lógicos
12.14
Relacionales
13. Expresiones 14. Reglas de prioridad 15. Entrada de datos en consola 16. Clase Scanner 17. Sentencias condiciones 18. Estructuras de repetición 18.18
Simple y doble
18.19
Múltiples o anidadas
18.20
Swich Case
18.21
While
18.21.1
Do while y For
18.21.2
Repetitivas anidadas
Capitulo III 1. Java-Swing 1.1
Java JTextArea
1.2
Java JPasswordField
1.3
Java JCheckBox
1.4
Java JRadioButton
1.5
Java JComboBox
1.6
Java JTable
1.7
Java JList
Página 13 de 221
1.8
Java JOptionPane
1.9
Java JScrollBar
1.10
Java JMenuItem & JMenu
1.11
Java JCheckBoxMenuItem
1.12
Java JProgressBar
1.13
Java JTree
1.14
Java JColorChooser
1.15
Java JSpinner
1.16
Java JDialog
1.17
Java JPanel
1.18
Java JToolBar
1.19
Java JFrame
1.20
Java JScrollPane
1.21
Java JTextPane
Capitulo IV 1. HTML 1.1
HTML Instroducción
1.2
Editores HTML
1.3
HTML básico
1.4
HTML elementos
1.5
Atributos HTML
1.6
HTML encabezamientos
1.7
HTML párrafos
1.8
Formato HTML
1.9
Estilos HTML
1.10
Citas HTML
1.11
Comentarios HTML
1.12
HTML enlaces
1.13
HTML imágenes
1.14
Tablas HTML
1.15
HTML listas
1.16
Bloques HTML
1.17
Clases HTML
1.18
Formularios HTML
1.19
HTML Iframes
Página 14 de 221
1.20
HTML color Nombres
1.21
HTML cabeceras
1.22
HTML audio/video
2.1
CSS Introducción
2.2
CSS sintaxis
2.3
CSS selectores
2.4
CSS fondos
2.5
CSS texto
2.6
CSS fuentes
2.7
Vínculos de CSS
2.8
CSS listas o tablas CSS
2.9
Caja CSS modelo
2.10
Border CSS
2.11
Esquema CSS
2.12
Margen CSS
2.13
CSS Navigation Bar
2.14
CSS Galería de Imágenes
2.15
CSS Imagen opacidad
2. CSS
Página 15 de 221
Quinto Grado Análisis de Sistemas Capitulo I 1. ADO.NET 1.1
Clase Connection
1.2
Clase DataAdapter
1.3
Clase DataSet
1.4
Clase DataView
1.5
Clase DataReader
1.6
Creación de conexiones
1.7
Inicio de sesión mediante seguridad
1.8
Conexión mediante un formulario Windows
1.9
Llamada a un procedimiento almacenado
1.10
Inserción de un conjunto de datos en un formulario
1.11
Vinculación a datos de los controles de un formulario
1.12
Uso de conjunto de datos con tablas de una relación padre-hijo
1.13
Creación de formularios de datos CRUD
Capitulo II 1.
Distribuciones de Linux
2.
Linux Mint 2.1
Preparación
2.2
Instalación
2.3
Comandos básicos
2.4
Instalación libre office
2.5
Paquetes de Mint Install
2.6
Configuración de entorno
Capitulo III 1. Marketing 1.1
Teoría del color
Página 16 de 221
1.2
Composición
1.3
Combinación
1.4
Psicología
1.5
Teoría del consumidor
1.6
Mercado
1.7
Grupo
1.8
Segmento
1.9
Teoría de los mercados
1.10
Oferta
1.11
Demanda
1.12
Precio
1.13
Teoría del conocimiento
1.14
Dato
1.15
Información
1.16
Conocimientos
1.17
Panorama digital
1.18
SEO-SEM
1.19
Fundamentos
1.20
Display
1.21
Community Manager
2. Marketing Mobile 3. E-Commerce 3.1
Color
3.2
Sonidos
3.3
Videos
3.4
Mensajes
3.5
Slogan
3.6
Formas
3.7
Logotipo
4. Publicidad
Capitulo IV 1.
Internet 1.1
Historia
1.2
Web 1.0
1.3
Tecnologías
1.4
Servicios
Página 17 de 221
2.
1.5
Web 2.0
1.6
Tecnologias
1.7
Servicios
1.8
Web 3.0
1.9
Tecnologias
1.10
Servicios
1.11
Redes semánticas
1.12
¿Qué es un software Web?
Navegadores y buscadores 2.1
Introducción
2.2
Los navegadores
2.3
Mercados navegadores
2.4
Mercado desde 2007
2.5
Conclusión
Página 18 de 221
Tecnología II
Quinto Grado
Página 19 de 221
Capítulo I 1. Normalización Por Edwin Wilfredo Ajvatz Villagran 1.1 ¿Qué es Normalizar? La normalización es el proceso de organizar datos en una base de datos. Esto incluye la creación de tablas y el establecimiento de relaciones entre esas tablas de acuerdo con las reglas diseñadas tanto para proteger los datos como para que la base de datos sea más flexible mediante la eliminación de la redundancia y la dependencia incoherente. Hay algunas reglas para la normalización de bases de datos. Cada regla recibe el nombre de "formulario normal". Si se observa la primera regla, se dice que la base de datos está en la "primera forma normal". Si se cumplen las tres primeras reglas, se considera que la base de datos está en la "tercera forma normal". Aunque son posibles otros niveles de normalización, la tercera forma normal se considera el nivel más alto necesario para la mayoría de las aplicaciones.
1.2 Tipos de normalización Primera Forma Normal (1FN) Una tabla está en primera forma si: •
Todos los atributos son atómicos. Un atributo es atómico si los elementos del dominio son simples e indivisibles.
•
No debe existir variación en el número de columnas.
•
La tabla contiene una clave primaria única.
•
La clave primaria no contiene atributos nulos.
•
Debe existir una independencia del orden tanto de las filas como de las columnas; es decir, si los datos cambian de orden no deben cambiar sus significados.
Esta forma normal elimina los valores repetidos dentro de una base de datos.
Página 20 de 221
Segunda Forma Normal (2FN) Una relación está en 2FN si está en 1FN y si los atributos que no forman parte de ninguna clave dependen de forma completa de la clave principal. Es decir, que no existen dependencias parciales. Todos los atributos que no son clave principal deben depender únicamente de la clave principal. En otras palabras, podríamos decir que la segunda forma normal está basada en el concepto de dependencia completamente funcional. Tercera Forma Normal (3FN) La tabla se encuentra en 3FN si es 2FN y si no existe ninguna dependencia funcional transitiva en los atributos que no son clave. Otras formas de normalización Hay un cuarto formulario normal, también denominado formulario normal de Boyce Codd (BCNF), y la quinta forma normal, pero rara vez se consideran en un diseño práctico. Si no se tienen en cuenta estas reglas, es posible que el diseño de la base de datos sea inferior al perfecto, pero no debería afectar a la funcionalidad.
2. Instalación de SQL Server 2014 Microsoft SQL Server es un sistema de gestión de base de datos relacional, desarrollado por la empresa Microsoft. Para instalar SQL Server 2014 tenemos que seguir los siguientes pasos: 1. Ingresamos
al
siguiente
enlace
https://www.microsoft.com/es
es/download/details.aspx?id=42299 2. En esa dirección encontraremos un aparto donde seleccionaremos el idioma de la aplicación, luego damos click en Descargar.
Página 21 de 221
3. Nos direccionara a una pestaña donde encontraremos algunas versiones de SQL Server, en este caso nos enfocaremos en las que contienen el tamaño de 1 GB o más de un 1 GB, encontraremos la versión para Windows de 32 bits y Windows de 64 bits.
4. Al seleccionar la versión que vallamos a descargar damos click en Next, al dar click la descarga iniciara inmediatamente.
5. Al finalizar la descarga ejecutaremos el archivo como administrador, luego se nos ejecutara una ventana ahí nos muestra la ubicación donde los archivos serán extraídos. Si deseas cambiar la ubicación del archivo simplemente seleccionamos la opción Examinar. Luego de verificar la ubicación damos click en Aceptar.
6. Nos dirigimos a nuestro archivo extraído, luego de esto ejecutaremos como administrador el archivo llamado SETUP.
Página 22 de 221
7. Se nos abrirá instantáneamente una ventana, en esta nos dirigimos en el apartado de
Instalación,
luego
seleccionaremos
la
opción
de
Nueva
instalación
independiente de SQL Server o agregar características a una instalación existente.
8. Se
nos ejecutara una ventana donde
se realizarán
las configuraciones
correspondientes para luego instalar SQL Server en nuestro ordenador. Luego de comprobar las reglas globales nos mostrara la opción de usar Microsoft Update para comprobar las actualizaciones, en este caso no lo presionaremos y simplemente damos en Siguiente.
9. Por defecto los siguientes tres pasos se realizarán automáticamente, si encuentra algún problema este avisara.
Página 23 de 221
10. Seguimos con el punto de tipos de instalación, en este apartado dejaremos la opción que viene seleccionada por defecto y damos en Siguiente.
11. Seguimos con el punto de términos de licencia, aquí aceptamos los términos y damos en Siguiente.
12. Seguimos con el punto de selección de características, en este apartado encontraremos las características que se instalaran, podemos agregar o quitar, en este caso dejaremos seleccionadas las características que vienen por defecto y damos en Siguiente.
Página 24 de 221
13. En el siguiente punto seleccionamos Instancia predeterminada igualmente puedes colocar Instancia con nombre si es de tu preferencia. Luego damos en Siguiente.
14. En el punto de configuraciones del servidor dejamos todo igual y solo damos en Siguiente.
Página 25 de 221
15. En el siguiente punto configuración del motor de base de datos dejaremos la opción Modo de autenticación de Windows, si escoges colocar Modo mixto tienes que escribir una contraseña con la que podrás ingresar a tu motor de base de datos. Luego damos en Siguiente.
16. En el punto siguiente dejaremos la opción predeterminada, Instalar y configurar, luego de esto damos en Siguiente.
17. El siguiente paso se realizará automáticamente, luego daremos click en la opción de instalar y se empezará a instalar la aplicación. Al final el proceso simplemente cerramos. 18. Finalmente ejecutamos SQL Server 2014 Management Studio, conectamos con el servidor y damos click en conectar.
Página 26 de 221
2.2
Creación de la base de datos SQL Server 2014
Por Jose Mynor Aldana Chigna Para crear una base de datos en SQL Server 2014 realizaremos lo siguiente. 1. Ejecutamos SQL Server 2014 Management Studio y damos click en Nueva consulta.
2. Para crear una base de datos basta con colocar la siguiente sintaxis.
Colocamos Create Database seguido del nombre que le vamos a colocar a nuestra base de datos en este caso será Ejemplo.
3. Para ejecutar vamos a seleccionar lo antes creado y damos click en Ejecutar.
Página 27 de 221
Veremos que al ejecutar nos tira un mensaje donde nos dirá si se creó correctamente nuestra base de datos o si ocurrió algún problema por el cual no se creó la base de datos.
2.3
Creación de tablas
Para crear una tabla en SQL Server 2014 realizaremos lo siguiente. 1. Primero tenemos que definir que base de datos vamos a utilizar, para eso colocamos la siguiente sintaxis.
Nuevamente seleccionamos y ejecutamos, con esto definimos que estamos utilizando la base de datos Ejemplo. 2. Ahora para crear una tabla vamos a colocar la siguiente sintaxis.
Página 28 de 221
Colocamos Create Table seguido del nombre que le vamos a colocar a nuestra tabla, en este caso le colocaremos Alumno.
3. Empezamos colocando nuestros campos, para agregar campos a nuestra tabla realizaremos lo siguiente.
Recordemos que toda tabla tiene que tener un campo identificador, en este caso nuestro campo ID_Alumno es nuestro campo identificador que será de tipo entero, será llave primaria, será identity ósea que será un campo que se generará automáticamente y finalmente será nulo ósea que este campo no puede estar vacío.
4. Terminamos de colocar los campos que va a llevar nuestra tabla y finalmente seleccionamos y ejecutamos.
Si nos aparece un mensaje de comandos completados correctamente quiere decir que se creo correctamente nuestra tabla Alumno en la base de datos Ejemplo.
3. Sintaxis SQL Server 2014 3.3 SQL Select La sentencia select es la base para realizar consultas en cualquier base de datos. Por ejemplo, utilizamos la sentencia select para verificar que una tabla se creo correctamente, para eso colocamos la siguiente sintaxis.
Página 29 de 221
Colocamos Select con un asterisco (*) y un From, luego de esto colocamos el nombre de la tabla en este caso sería Alumno. Luego vamos a seleccionar y ejecutar.
Al ejecutarse correctamente nos mostrara los campos de la tabla Alumno.
3.4 SQL Distinct Por Jose Adolfo Aldana Chigna Con la cláusula distinct se especifica que los registros con ciertos datos duplicados sean obviados en el resultado.
Cuando tenemos dos valores duplicados en nuestra base de datos utilizamos la cláusula distinct para que no aparezcan los nombres repetidos.
Seleccionamos y ejecutamos, al no encontrar ningún error en la consulta ya no mostrara los registros duplicados.
Página 30 de 221
3.5 SQL Insertar Insert into es una sentencia SQL que añade datos a una tabla. Para insertar datos a una tabla utilizamos la siguiente sintaxis.
Colocamos Insert into seguido del nombre de la tabla en donde vamos a insertar los datos, en este caso será la tabla Alumno. Entre paréntesis colocamos ponemos el nombre de las columnas que tiene la tabla separada por comas. No es necesario poner el nombre de todas las columnas de la tabla, podemos poner sólo aquellas en las que vayamos a insertar datos. Pero en este caso recordemos que si colocamos el valor not null a la hora de crear nuestra tabla entonces obligatoriamente tienes que insertar datos en todas las columnas. La columna de clave primaria con autoincremento tampoco la pondremos, ya que su valor se genera automáticamente. Las columnas que no pongamos tomarán el valor nulo o por defecto.
Seguidamente ponemos la palabra clave values, seguido de los valores que tendrán las columnas en ese registro. Estos se ponen incluidos dentro de un paréntesis, entre comillas simples y separados por comas. Los valores que son entero no se les coloca comillas simples.
Finalmente seleccionamos y ejecutamos, si los datos se insertaron correctamente nos indicara cuantas filas fueron afectadas.
3.6 SQL borrar Para eliminar los registros de una tabla usamos la sentencia delete. Para borrar registros de una tabla utilizamos la siguiente sintaxis.
Página 31 de 221
Colocamos delete from seguido del nombre de la tabla, en este caso si seleccionamos y ejecutamos se eliminarán todos los registros de nuestra tabla. Si no queremos eliminar todos los registros, sino solamente algunos, debemos indicar cuál o cuáles, para ello utilizamos la cláusula where con la cual establecemos la condición que deben cumplir los registros a borrar.
En este caso eliminara el registro numero 3 de nuestra tabla Alumno.
Seleccionamos y ejecutamos, si el registro se elimino correctamente nos mostrara cuantas líneas fueron afectadas.
3.7 SQL actualizar Por Edgar Moisés Alonzo Reyes Una sentencia Update de SQL es utilizada para modificar los valores de un conjunto de registros existentes en una tabla. Para modificar los registros de una tabla utilizamos la siguiente sintaxis.
Colocamos Update junto al nombre de la tabla y set junto con el campo a modificar y su nuevo valor. En este caso el cambio afectará a todos los registros.
Página 32 de 221
Seleccionamos y ejecutamos, sino ocurre ningún error nos mostrara cuantas filas fueron afectadas. Utilizamos la sentencia select para verificar que la consulta se realizó correctamente.
Si queremos modificar algunos registros, vamos a utilizar la cláusula where con la cual establecemos la condición que deben cumplir los registros a actualizar.
Seleccionamos y ejecutamos, sino ocurre ningún error nos mostrara cuantas filas fueron afectadas. Utilizamos la sentencia select para verificar que la consulta se realizó correctamente.
4. Identificación de llaves foráneas y primarias Las claves primarias se identifican en el software de bases de datos con el prefijo "PK" en su nombre o usando la interfaz de usuario. En dicha interfaz abre una tabla y ve las columnas. La clave primaria y la foránea se identifican con un pequeño icono de llave. La mejor forma para que un administrador de bases de datos encuentre todas las claves foráneas asociadas con una clave primaria es usar un diagrama de bases de datos.
4.4 Llaves primarias Una clave primaria es un campo o grupo de campos que identifica en forma única un registro. Ningún otro registro puede tener la misma clave primaria. La clave primaria se
Página 33 de 221
utiliza por distinguir registro con el fin de que se pueda tener acceso a ellos, organizarlos y manipularlos. En el caso del registro de un empleado, el número de este representa un ejemplo de una clave primaria. Una llave o clave primaria es un indicador único en una tabla, por ejemplo:
La clave primaria, PRIMARY KEY, identifica de manera única cada fila de una tabla. La columna definida como clave primaria (PRIMARY KEY) debe ser UNIQUE (valor único) y NOT NULL (no puede contener valores nulos). Cada tabla sólo puede tener una clave primaria (PRIMARY KEY).
4.5 Llaves foráneas Por Christel Judith Alvarado Muñoz Una clave foránea es una limitación referencial entre dos tablas la clave foránea identifica una columna o grupo de columnas en una tabla (tabla hija o referendo) que se refiere a una columna o grupo de columnas en otra tabla (la tabla maestra o referenciada). Las columnas en la tabla referente deben ser la clave primaria u otra clave candidata en la tabla referenciada.
Los campos continuos se deben de marcos ambos campos y de la misma forma como se selecciona la Llave Primaria se debe de seleccionar la Llave Externa o Llave
Página 34 de 221
Foránea, utilizando el botón de Barra de Herramientas, Mouse o utilizando el Menú y la opción Edit. (Debe de aparecer una flecha) La Llave Foránea también se determinar en el momento de las relaciones entre las tablas en la cual la Llave Primaria se realizar la unión con el otro campo de otra tabla y automáticamente se vuelve una llave foránea La clave foránea, que también es un indicador muy similar a la clave primaria:
Tabla: Detalles Facturas Campos: IDDetalleFactura (IDDetalleFactura es la clave primaria, única e irrepetible para cada detalle de cada factura) IDFactura (IDFactura es ahora nuestra clave foránea ya que es la clave por la cual se relacionan ambas tablas) Ítem (otro campo) Cantidad (otro campo)
EJEMPLO DE RELACION ENTRE LLAVE PRIMARIA Y FORANEA EN VARIAS TABLAS Usaremos como referencia el siguiente diagrama observamos que disponemos de tres tablas de la tabla canción podemos resaltar a id canción el cual es nuestro identificador único o llave primaria y además otros dos atributos con llave foránea artista y álbum, observamos que estas llaves foráneas hacen referencia a las llaves primarias de las tablas artistas y álbum respectivamente mostrando así la relación existente entre las tablas de nuestra base de datos de tienda existen varias formas de crear llaves primarias y foráneas.
4.6 SQL Inner Join
Página 35 de 221
En el modelo de bases de datos relacionales, se recurre a las sentencias JOIN de SQL para consultar diferentes tablas de bases de datos. A excepción de CROSS JOIN, las sentencias de JOIN son una combinación de producto cartesiano y selección. El Sistema Gestor de Bases de Datos (SGBD) primero presenta el producto cartesiano de dos tablas de bases de datos. A continuación, filtra el resultado según una condición de selección definida por el usuario a través de una sentencia SQL. El INNER JOIN se diferencia de todas las demás sentencias de JOIN por mostrar un conjunto de resultados mínimos, pues solo se muestran los registros de datos del producto cruzado que cumplen la condición de selección. Todo ello se presenta en una tabla de resultados llamada “View” que no incluye valores nulos. INNER JOIN INNER JOIN selecciona todas las filas de las dos columnas siempre y cuando haya una coincidencia entre las columnas en ambas tablas. Es el tipo de JOIN más común.
Vamos a verlo también con un ejemplo, mediante las tablas Clientes y Pedidos:
Clientes:
Pedidos:
La siguiente sentencia SQL devolverá todos los clientes con pedidos:
Página 36 de 221
Si hay filas en Clientes que no tienen coincidencias en Pedidos, los Clientes no se mostrarán. La sentencia anterior mostrará el siguiente resultado:
Sofie Mariona aparece dos veces ya que ha realizado dos pedidos. No aparece Marco Lambert, pues no ha realizado ningún pedido. Cláusula INNER JOIN Lo más usual, lo primero que se suele aprender, es el uso de INNER JOIN, o generalmente abreviado como JOIN. Esta cláusula busca coincidencias entre 2 tablas, en función a una columna que tienen en común. De tal modo que sólo la intersección se mostrará en los resultados.
Página 37 de 221
Capítulo II 1. Entorno de trabajo IDE´s Por Douglas Roberto Arens Higueros Un entorno de desarrollo integrado (IDE) es un sistema de software para el diseño de aplicaciones que combina herramientas del desarrollador comunes en una sola interfaz gráfica de usuario (GUI). Generalmente, un IDE cuenta con las siguientes características: Editor de código fuente: editor de texto que ayuda a escribir el código de software con funciones como el resaltado de la sintaxis con indicaciones visuales, el relleno automático específico del lenguaje y la comprobación de errores a medida que se escribe el código. Automatización de compilación local: herramientas que automatizan tareas sencillas e iterativas como parte de la creación de una compilación local del software para su uso por parte del desarrollador, como la compilación del código fuente de la computadora en un código binario, el empaquetado del código binario y la ejecución de pruebas automatizadas. Depurador: programa que sirve para probar otros programas y mostrar la ubicación de un error en el código original de forma gráfica.
¿Por qué los desarrolladores utilizan los IDE? Los IDE permiten que los desarrolladores comiencen a programar aplicaciones nuevas con rapidez, ya que no necesitan establecer ni integrar manualmente varias herramientas como parte del proceso de configuración. Tampoco es necesario que pasen horas aprendiendo a utilizar diferentes herramientas por separado, gracias a que todas están representadas en la misma área de trabajo. Esto resulta muy útil al incorporar desarrolladores nuevos, porque pueden confiar en un IDE para ponerse al día con los flujos de trabajo y las herramientas estándares de un equipo. De hecho, la mayoría de las características de los IDE están diseñadas para ahorrar tiempo, como el relleno inteligente
Página 38 de 221
y la generación automatizada del código, lo cual elimina la necesidad de escribir secuencias enteras de caracteres. Otras funciones comunes del IDE se encargan de ayudar a los desarrolladores a organizar su flujo de trabajo y solucionar problemas. Los IDE analizan el código mientras se escribe, así que las fallas causadas por errores humanos se identifican en tiempo real. Gracias a que hay una sola GUI que representa todas las herramientas, los desarrolladores pueden ejecutar tareas sin tener que pasar de una aplicación a otra. El resaltado de sintaxis también es común en la mayoría de los IDE, y utiliza indicaciones visuales para distinguir la gramática en el editor de texto. Además, algunos IDE incluyen examinadores de objetos y clases, así como diagramas de jerarquía de clases para ciertos lenguajes. Es posible desarrollar aplicaciones sin IDE, o que los desarrolladores básicamente diseñen su propio IDE integrando varias herramientas de forma manual con los editores de texto ligero como Vim o Emacs. Actualmente, la mayoría de los equipos de desarrollo de las empresas optan por un IDE pre configurado que se adecue mejor a sus casos de uso específicos; por lo que la pregunta no es si conviene adoptar un IDE, sino cuál elegir. Tipos de IDE conocidos Hay muchos casos de uso comerciales y técnicos distintos para los IDE, lo cual también significa que hay muchas opciones de IDE propietarios y open source en el mercado. En general, las características distintivas más importantes entre los IDE son las siguientes: Cantidad de lenguajes compatibles: algunos IDE son compatibles con un solo lenguaje, así que son mejores para un modelo de programación específico. Por ejemplo, IntelliJ es conocido principalmente como un IDE de Java. Otros IDE admiten una gran variedad de lenguajes de manera conjunta, como el IDE Eclipse, que admite Java, XML, Python, entre otros. Sistemas operativos compatibles: el sistema operativo de un desarrollador determinará qué tipos de IDE son viables (salvo que el IDE esté basado en la nube), y estarán aún más limitados si la aplicación que se desarrolla está diseñada para el usuario final con un sistema operativo específico (como Android o iOS). Características de automatización: si bien la mayoría de los IDE incluyen tres funciones fundamentales (el editor de texto, la automatización de compilación y el depurador), muchos admiten funciones adicionales, como la refactorización, la búsqueda de código y las herramientas de integración e implementación continuas (CI/CD).
Página 39 de 221
Impacto en el rendimiento del sistema: es importante considerar el footprint del IDE en la memoria si el desarrollador desea ejecutar otras aplicaciones con uso intensivo de la memoria al mismo tiempo. Complementos y extensiones: algunos IDE incluyen una función para personalizar los flujos de trabajo de forma que se adapten a las necesidades y preferencias del desarrollador.
LOS IDE MAS UTILIZADOS EN JAVA Eclipse Es un IDE muy popular de código abierto y ampliamente extendido. Fue desarrollador originalmente por IBM aunque actualmente cuenta con una gran comunidad que le da soporte con una gigantesca biblioteca de plugins. Es multiplataforma (Windows, Linux y Mac) y dispone de nuevas versiones cada año. Con Eclipse es posible desarrollar todo tipo de aplicaciones para web, escritorio o móviles usando Java, C, C++, JSP, perl, Python, Ruby y PHP. Su mayor punto fuerte reside en su asistente y capacidad para depurar errores. A medida que vas programando Eclipse lanza recomendaciones que nos ayudan a optimizar nuestro código hasta niveles que rozan el elegante guante blanco. Sin duda una excelente elección.
NetBeans NetBeans es otro entorno de desarrollo integrado basado en código abierto. En lo personal adoro este IDE porque gracias a su enfoque podemos desarrollar nuestras aplicaciones como módulos (como un componente de un software). Lo cual resulta sumamente cómodo pues podemos reutilizar nuestro código para diferentes proyectos las veces que queramos sin mayor complicación. NetBeans es el IDE oficial de Java pero también podemos desarrollar en otros lenguajes como PHP, C, C++ e incluso HTML 5. Entre sus detractores hay quien comenta que el desarrollo de una GUI sobre NetBeans es algo complicado y que no cuenta con la ingente cantidad de plugins y extensiones de las que sí cuenta Eclipse, además de carecer de soporte nativo para trabajar con webapps (.war, .jsp, y servlets).
IntelliJ Idea Desarrollado por Jet Brains es un IDE que cuenta con dos versiones.
Página 40 de 221
La Community Edition, libre descarga, y la versión Ultimate Edition que cuesta la friolera de más de 500 dólares de suscripción anual, según el plan que contratemos, pero que podemos probar gratis durante 30 días si lo que queremos es echarle un vistazo a todo lo que puede ofrecer. Con IntelliJ podemos programar sobre diferentes lenguajes y proporciona soporte para trabajar con JAVA , Node JS, PHP, Python, Ruby, Sass, TypeScript, AngularJS, CoffeeScript, CSS, HTML, JavaScript, LESS, etc. Además ofrece integración con GIT lo que permite trabajar con diferentes versiones de nuestro software sin afectar a la línea maestra de nuestro desarrollo.
BlueJ Estoy seguro que has visto este IDE antes. Está presente en innumerables cantidades de vídeos y tutoriales en Youtube. La principal razón es que en cierto momento James Gosling, el creador de Java, dijó dijo que BlueJ era uno de sus IDE IDEs favoritos. Esto desencadenó que de pronto en muchas escuelas y academias se usará BlueJ para dar clase pues era el IDE del momento. Como los IDE anteriores de esta lista, es multiplataforma. Podemos usarlo sobre Windows, macOS y GNU/Linux y cuenta con una gran documentación que lo hace especialmente indicado para estudiantes. Su principal característica es que nos permite generar una vista UML de todos los objetos que componen nuestra aplicación.
Codenvy Codenvy es un IDE comercial de Java que está construido sobre el Eclipse Che. Como muchas otras opciones de la competencia podemos encontrar diferentes variantes en función del tipo de desarrollador o cliente que seamos. Entre las 3 variantes podemos elegir entre la edición developer, enterprise y team. Lo que hace interesante a Codenvy es que está pensado para ofrecer un espacio de trabajo en la nube, colaborativo y bajo demanda. Esto hace que sea muy fácil moverse de una licencia a otra y aprovechar solo aquellas características que necesitemos ahorrando costes. Desde este IDE podemos trabajar cómodamente desde nuestro navegador y beneficiarnos de potentes funciones como la finalización de código, la refactorización y el resaltado de sintaxis. Además de Java, Codenvy proporciona soporte para una gran cantidad de lenguajes de programación interpretados y compilados. Esto incluye C ++, C #, JavaScript y PHP.
Página 41 de 221
Xcode Los usuarios de Mac que quieran usar un IDE completamente gratis deben probar Xcode. Se trata de un IDE desarrollado para macOS por la propia Apple que además de permitir la programación en Java, el IDE viene con una multitud de herramientas que nos permiten desarrollar software para para iOS, macOS, tvOS y watchOS. Algunos de los aspectos más destacados importantes de Xcode son un depurador incorporado, un generador de GUI y un autocompletado de perfiles. Además de Java, Xcode proporciona soporte para AppleScript, C, C ++, Objective-C, Objective-C ++, Python, Ruby y Swift.
jGRASP Por último, el quinto de la lista pero no por ello el peor. Los anteriores IDE tienen un “defecto” común. Todos devoran ingentes cantidades de memoria RAM. Si buscas algo ligero para comenzar tu desarrollo quizá jGRASP pueda ayudarte. Desarrollado en JAVA por el Samuel Ginn College of Engineering de la Universidad de Auburn en su departamento de ciencias de la computación e ingeniería de software. Funciona bien en todas las plataformas con JVM. Cuenta además con una función muy similar a la que comentaba con BlueJ, proporcionando visualizaciones de software CSD, Diagramas de Clase UML, así como vistas Dinámicas y vistas Canvas. Produce CSD (diagramas de estructuras de control) para Java,. Con jGRASP podemos desarrollar además aplicaciones basadas en C, CPP, Objective-C, Python, ADA y VHD.
2. Introducción a Java El lenguaje de programación Java, fue diseñado por la compañía Sun Microsystems Inc, con el propósito de crear un lenguaje que pudiera funcionar en sistemas de ordenadores heterogéneos (redes de computadoras formadas por más de un tipo de ordenador, ya sean PC compatibles, Macintosh o estaciones de trabajo que empleen diferentes sistemas operativos como Windows, OS/2 o Unix), y que fuera independiente de la plataforma en la que se vaya a ejecutar. Esto significa que un programa de Java puede ejecutarse en cualquier máquina o plataforma. Su origen se remonta a la creación de un lenguaje de programación para el desarrollo de aplicaciones para electrodomésticos y otros aparatos electrónicos de consumo por parte de una empresa filial de Sun, llamada FirstPerson en 1991. Su creador, James Gosling,
Página 42 de 221
lo bautizó como Oak. Al abandonarse este proyecto, el lenguaje se modificó, al igual que su nombre y se orientó al desarrollo de aplicaciones para la red. En septiembre de 1995 aparece el primer Kit de Desarrollo de Java (JDK). A principios de 1997 se presenta la primera revisión de Java (la versión 1.1) y a finales de 1998 surge la versión 1.2 (Java 2) que introdujo modificaciones bastante significativos. En octubre de 2004 se hace pública la versión Java 1.5 (Java 5) incluyendo innovaciones muy importantes en la plataforma.
3. ¿Qué es Java? Java es un lenguaje de programación de propósito general, tipado, orientado a objetos,… que permite el desarrollo desde aplicaciones básicas, pasando por aplicaciones empresariales hasta aplicaciones móviles. Java nacía como un lenguaje de programación que pudiese ser multiplataforma y multidispositivo, bajo el paradigma “Write Once Run Anywhere” (WORA). De esta forma un programa Java escrito una vez podemos ejecutarle sobre diferentes plataformas, siendo soportados los sistemas operativos Windows, MacOs y UNIX. Y a su vez en diferentes tipos de dispositivos. Para poder seguir este paradigma la compilación de un programa Java no genera código fuente, si no que genera bytecodes. Estos bytecodes son interpretados por una máquina virtual o JVM (Java Virtual Machine). Dicha máquina ya está escrita para cada uno de los sistemas operativos en cuestión. CARACTERÍSTICAS DEL LENGUAJE Según la propia Sun Microsystems, el lenguaje Java muestra las siguientes características generales: Sencillo. Elimina la complejidad de los lenguajes como C y da paso al contexto de los lenguajes modernos orientados a objetos. Aunque la sintaxis de Java es muy similar a C y C++, que son lenguajes a los que una gran mayoría de programadores están acostumbrados a emplear. Orientado a Objetos. La filosofía de programación orientada a objetos es diferente a la programación convencional (imperativa o procedural). Su nivel de abstracción facilita la creación y mantenimiento de programas. Existen muchas referencias que dan una introducción a esta forma de programar. Independiente a la arquitectura y portable. Al compilar un programa en Java, el código resultante es un tipo de código binario conocido como Java bytecodes. Este código es interpretado por diferentes computadoras de igual manera, por lo que
Página 43 de 221
únicamente hay que implementar un intérprete para cada plataforma. De esa manera Java logra ser un lenguaje que no depende de una arquitectura de ordenador específica. Robusto. Java simplifica la gestión de la memoria dinámica. Por ejemplo, ya no es necesario la liberación explícita, el intérprete de Java lo lleva acabo automáticamente cuando detecta que una variable dinámica ya no es usada por el programa. Por otra parte, impide que un puntero Java apunte a una dirección de memoria no válida, los punteros (referencias) Java son seguros y deterministas: o bien apuntan a un elemento correctamente alojado en memoria o bien tienen el valor nulo. Seguro. El sistema de Java tiene ciertas políticas que evitan que se puedan codificar virus con este lenguaje. Existen muchas restricciones, especialmente para los denominados applets, que limitan lo que se puede y no puede hacer con los recursos críticos de una computadora. Multitarea. Un lenguaje que soporta múltiples threads, hilos o tareas, es un lenguaje que puede ejecutar diferentes líneas de código al mismo tiempo. El soporte y la programación de hilos en Java está integrado en la propia sintaxis del lenguaje. Dinámico. En Java no es necesario cargar completamente el programa en memoria sino que las clases compiladas pueden ser cargadas bajo demanda en tiempo de ejecución (dynamic binding). Esto proceso permite la carga de código bajo demanda.
VENTAJAS EN EL USO DE JAVA Pueden destacarse las siguientes ventajas en el empleo de Java como lenguaje de programación: •
Compatibilidad.
•
Metodología OO
•
Gratuidad.
INCONVENIENTES DEL LENGUAJE JAVA El uso de Java también tiene algunos inconvenientes o limitaciones: •
Mayor consumo memoria.
•
Mayor tiempo de carga.
•
Integración no perfecta con el sistema operativo.
•
Es un lenguaje de programación.
Página 44 de 221
4. Instalar Java IDE´s Por Maricruz del Rosario Blanco Melendres Instalar JDK 8 Y Netbeans Requisitos del sistema. •
Sistema operativo windows, versiones superiores a windows 7.
•
4 GB de memoria del sistema (RAM).
•
Disco duro con 10 GB de espacio libre.
Preparación •
Descargar
instalador
JDK
ultima
versión
de
https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads2133151.html •
Descargar
instalador
de
Netbeans
ultima
versión
full
8.2
de
https://netbeans.org/downloads/8.2/
Paso 1. Descargar e instalar JDK. Antes de comenzar la instalación de Netbeans tendremos que instalar el JDK o Java Development Kit, si queremos desarrollar programas con el lenguaje de programación JAVA. Este Kit nos provee de un conjunto de herramientas para el desarrollo de software. A continuación, se muestra el proceso para descargar el JDK … En nuestro buscador preferido buscamos “JDK”, y seleccionamos el primer resultado que aparece.
En la siguiente imagen se muestra los diferentes JDK para los diferentes sistemas operativos, Seleccionamos el primer grupo de opciones Java SE Development Kit 8u211, aceptamos la licencia y damos click en el instalador para Windows x64 y/o Windows x86 dependiendo la versión del sistema operativo que tengas instalado.
Página 45 de 221
En la siguiente imagen se muestra un formulario donde debemos crear primero una cuenta para poder iniciar la descarga, una vez la crees, ingresa con el usuario y la contraseña.
Si todo sale bien, debe aparecer una ventana emergente con la descripción del archivo a descargar, damos click en Save File.
Terminada la descarga, por defecto queda guardado el instalador en la Carpeta Descargas.
Página 46 de 221
A continuación, damos click derecho sobre el instalador y ejecutamos como administrador. En la ventana que aparece damos click en Next.
Página 47 de 221
Una vez comience el progreso de la instalación, detrás de la ventana sale otra donde debemos dar click en siguiente para continuar con la instalación. Como se muestra en la siguiente imagen.
Por ultimo damos click en Close, y termina la instalación.
Paso 2. Configuración variable de entorno. Un paso importante es la configuración de las variables de entorno ya que ayudan a los programas a saber en qué carpeta instalar los archivos, dónde almacenar los archivos temporales y dónde encontrar la configuración del perfil de usuario. Para esto damos click en Inicio → Equipo (click derecho sobre equipo). → Propiedades.
Una vez estemos en la ventana Propiedades damos click en Configuración avanzada del sistema → Variables de entorno ...
Página 48 de 221
En la siguiente ventana buscamos dentro del grupo de variables del sistema, la variable Path la seleccionamos y damos click en el botón Editar ...
Después de dar click en el botón Editar, aparece una ventana, donde en el valor de la variable debemos ubicarnos al final del texto, agregar un punto y coma “;” y copiar la ruta donde quedo instalado el JDK.
Página 49 de 221
La ruta del JDK la podemos encontrar … C:\Program Files\Java\jdk1.8.0_211
Ingresamos la ruta después de colocar el ";" damos Aceptar -> Aceptar y Aceptar.
Paso 3. Descargar e instalar Netbeans 8.2. En este paso se muestra el proceso para descargar del IDE Netbeans … En nuestro buscador preferido buscamos “Netbeans”. Después damos click en Download.
Página 50 de 221
Los siguiente que debemos hacer es seleccionar el lenguaje y la plataforma, preferiblemente seleccionar el lenguaje ingles ya que la mayoría de documentación siempre va estar en este idioma.
Terminada la descarga, por defecto queda guardado el instalador en la Carpeta Descargas.
Damos click derecho sobre el instalador netbeans-8.2-windows.exe, luego en ejecutar como administrador, presionamos el botón que si, comenzara la instalación, hasta aparecer la siguiente ventana damos click en Next.
Página 51 de 221
Aceptamos los términos de la licencia y le damos click en Next.
En la siguiente ventana muestra dos rutas la primera es donde queda instalado NetBeans, la segunda es la ruta de referencia del JDK que ya instalamos anteriormente.
Ruta de instalación del servidor web, click en Next …
Página 52 de 221
Desmarcamos la opción de Check for Updates y damos click en Install.
Ahora comenzara la instalación, hay que esperar unos minutos...
Por ultimo desmarcamos la opción Contribute to the NetBeans … y damos click en Finish.
Página 53 de 221
5. Variables de entorno CONFIGURAR JAVA EN WINDOWS: VARIABLES DE ENTORNO JAVA_HOME Y PATH. Java requiere una pequeña configuración para poder usarlo en nuestro equipo. Ten en cuenta que puede haber pequeñas diferencias según la versión que usemos (Windows 10 o superior, Windows 8, Windows 7, Windows Vista, etc.). Vamos a ver paso a paso cómo configurar las variables de entorno del sistema necesarias para poder ejecutar Java. Existen una gran variedad de variables de entorno para diferentes propósitos, entre ellos la comunicación de Java con el sistema operativo. Nos vamos a centrar en sólo dos, las más importantes para nuestra configuración. Estas son las variables que informan al Sistema Operativo dónde y cómo ubicar Java dentro del mismo. Estas variables son: “JAVA_HOME” y “PATH”.
PASO 1: CONFIGURAR LA VARIABLE JAVA_HOME JAVA_HOME, es una variable de entorno del sistema que informa al sistema operativo sobre la ruta donde se encuentra instalado Java. Seguiremos la siguiente secuencia de pasos para configurar esta variable: Abrimos el explorador de Windows o pulsamos sobre “Mi Pc”. Pulsamos sobre Equipo y con botón derecho del ratón o buscando el icono -> Propiedades -> Configuración avanzada / Cambiar configuración -> Opciones avanzadas -> Variables de entorno -> Nueva (Variables del sistema). En otras versiones tenemos que llegar a Configuración avanzada del sistema / Variables de entorno... -> Nueva (Variables del sistema).
Página 54 de 221
Escribiremos en las cajas de texto que se muestran lo siguiente: Nombre de variable: JAVA_HOME Valor de variable: escribiremos aquí la ruta en que se haya instalado Java. Puedes consultarla en el propio explorador de Windows buscando la carpeta en que se ha instalado Java, que normalmente será del tipo C:\Program Files\Java\jdk1.8.0_72 ó C:\Program Files (x86)\Java\jdk1.8.0_72 o similar. Fíjate en la barra superior donde aparece la ruta y cópiala tal y como aparece ahí.
PASO 2: CONFIGURAR LA VARIABLE PATH PATH es una variable de entorno del sistema que informa al sistema operativo sobre la ruta de distintos directorios esenciales para el funcionamiento del ordenador. Vamos a añadir al contenido de la variable PATH el lugar donde se encuentran los ficheros
Página 55 de 221
ejecutables de Java necesarios para su ejecución, como el compilador (javac.exe) y el intérprete (java.exe). Seguiremos la siguiente secuencia de pasos para configurar esta variable. Abrimos el explorador de Windows o pulsamos sobre “Mi Pc”. Pulsamos sobre Equipo -> Propiedades y con botón derecho del ratón o buscando el icono -> Configuración avanzada / Cambiar configuración -> Opciones avanzadas -> Variables de entorno -> buscamos en Variables del sistema la variable Path, pulsamos para seleccionarla y hacemos click en el botón Editar. Luego al final del contenido que ya exista, añadiremos un punto y coma y el texto %JAVA_HOME%\bin. No deben quedar espacios intermedios. En otras versiones tenemos que llegar a Configuración avanzada del sistema / Variables de entorno... -> buscamos en Variables del sistema la variable Path, pulsamos para seleccionarla y hacemos click en el botón Editar. A modo de resumen de todo el proceso de configuración: hemos creado una variable de entorno llamada JAVA_HOME y hemos añadido una expresión a la variable PATH.
6. Estructura general de Java Netbeans
Página 56 de 221
Package: Un package es una agrupación de clases. Es parecido a una "caja" que contiene las clases que queramos mantener en un solo lugar. También podría decirse que los packages es el equivalente a las librerías en otros lenguajes. Esta parte del código no es obligatoria, es sólo si lo necesita usar nuestro programa. Import: En ocasiones nuestros programas requerirán utilizar clases existentes en otros Packages, y esto se puede lograr con Import. Clases: Java puede crear diferentes tipos de clases: privadas, públicas y protegidas; y se utilizan de acuerdo a conveniencia de la estructura de nuestro programa. Variables: Java maneja tres tipos de variables: de instancia, de clase y locales. Las variables de instancia son las que se usan para guardar valores o atributos de un objeto en particular. Las variables de clase son las que guardan valores o atributos de la clase. Las variables locales son las que se declaran en una función o método y solamente las puede utilizar esa función o método, de ahí el nombre de locales. Constructores: Los constructores son la forma de crear los objetos. Métodos: En Java los métodos son los que utilizamos para realizar alguna tarea en específico. Podemos decir que hay dos tipos de métodos en Java: El primero, que llamaremos set (poner) sirve para manipular y/o fijar valores en las variables, por ejemplo: cuando especificamos que el balón va a ser color blanco. El segundo, denominado get (obtener) sirve para obtener un valor de una variable, por ejemplo: cuando queremos saber la edad de Juan. Comentarios: Éstos pueden incluirse en cualquier parte del código. Sus líneas serán completamente ignoradas por el compilador, o sea que no afectarán para nada nuestro programa. Cuando una persona está aprendiendo a programar es altamente recomendable que escriba los comentarios que se le de la gana en su código (siempre y cuando no sea basura claro), ya que esto ayuda mucho a entender lo que está haciendo una función, para qué sirve una variable o declaración, hasta facilita el hacer modificaciones y mejoras al programa en el futuro.
Página 57 de 221
7. Salida de datos en consola Por Daniel Estuardo Bor Siney Nos muestra la salida por medio de Print, a continuación, veremos la estructura e implementación. package com.edu4java.javatutorials; public class ConsoleOutput { public static void main(String[] args) { System.out.println("Hello World"); } }
8. Compilador primario de Java La función de un compilador es convertir un programa escrito un en lenguaje como Java a un lenguaje que la computadora pueda entender. Los programas en Java se convierten en códigos de bytes. El comando para llamar al compilador es javac nombreprograma.java,
donde
el
nombre
del
compilador
es
javac
y
nombreprograma.java es el nombre del archivo que contiene el código de nuestro programa. Al compilar el programa, el compilador verifica que éste obedezca las reglas de programación en Java, y si algo sale mal, muestra los mensajes de error apropiados.
9. Compilador primario de Java Los identificadores son los nombres que el programador asigna a variables, constantes, clases, métodos, paquetes, etc. de un programa.
Página 58 de 221
10.
Tipos de datos
Por Fatima Jazmin Cabrera Campaneros Byte: Representa un tipo de dato de 8 bits con signo. De tal manera que puede almacenar los valores numéricos de -128 a 127 (ambos inclusive). Short: Representa un tipo de dato de 16 bits con signo. De esta manera almacena valores numéricos de -32.768 a 32.767. Int: Es un tipo de dato de 32 bits con signo para almacenar valores numéricos. Cuyo valor mínimo es -231 y el valor máximo 231-1. Long: Es un tipo de dato de 64 bits con signo que almacena valores numéricos entre 263 a 263-1 Float: Es un tipo dato para almacenar números en coma flotante con precisión simple de 32 bits. Double: Es un tipo de dato para almacenar números en coma flotante con doble precisión de 64 bits. Boolean: Sirve para definir tipos de datos booleanos. Es decir, aquellos que tienen un valor de true o false. Ocupa 1 bit de información. Char: Es un tipo de datos que representa a un carácter Unicode sencillo de 16 bits.
11.
Constantes
Una constante es una variable del sistema que mantiene un valor inmutable a lo largo de toda la vida del programa. Las constantes en Java se definen mediante el modificador final.
12.
Operadores lógicos, aritméticos y relacionales
12.12 Aritméticos Los operadores aritméticos en Java son los operadores que nos permiten realizar operaciones matemáticas: suma, resta, multiplicación, división y resto.
Página 59 de 221 Operador
Descripción
+
Operador de Suma. Concatena cadenas para la suma de String
-
Operador de Resta
*
Operador de Multiplicación
/
Operador de División
%
Operador de Resto
12.13 Lógicos Por Sofia Asunción Cabrera Mendoza En Java disponemos de los operadores lógicos habituales en lenguajes de programación como son “es igual”, “es distinto”, menor, menor o igual, mayor, mayor o igual, and (y), or (o) y not (no). La sintaxis se basa en símbolos como veremos a continuación y cabe destacar que hay que prestar atención a no confundir == con = porque implican distintas cosas. OPERADOR
DESCRIPCIÓN
==
Es igual
!=
Es distinto
<, <=, >,
Menor, menor o igual, mayor,
>=
mayor o igual
&&
Operador and (y)
||
Operador or (o)
!
Operador not (no)
12.14 Relacionales La estructura de los operadores condicionales en Java es: (expresion_booleana1 && expresion_booleana2)
Página 60 de 221 (expresion_booleana1 || expresion_booleana2)
13.
Expresiones
Una expresión es una combinación de variables, operadores y llamadas de métodos construida de acuerdo a la sintaxis del lenguaje que devuelve un valor. El tipo de dato del valor regresado por una expresión depende de los elementos usados en la expresión. int i; i=3; System.out.println(i++);
14.
Reglas de prioridad
Creación de clases innecesarias: No crear clases que no se vayan a usar posteriormente Sólo debemos crear las clases que sean realmente necesarias para nuestro desarrollo. Cohesión de las clases: Conseguir una alta cohesión La cohesión es la medida que indica si una clase tiene una función bien definida dentro del sistema. El objetivo es enfocar de la forma más precisa posible el propósito de la clase, cada clase debe poseer un propósito claro y simple. No es conveniente mezclar varios propósitos funcionales dentro de una misma clase ya que puede provocar confusión, errores de interpretación y dificultar la detección de errores. Acoplamiento entre clases: Conseguir un bajo acoplamiento entre clases Deberemos intentar que
nuestras clases tengan
un
acoplamiento
bajo. El
acoplamiento entre clases es una medida de la interconexión o dependencia entre clases. Cuantas menos cosas conozca una clase de otra menor será su acoplamiento. Una clase debe conocer los métodos que ofrece otra, pero, por norma general, no los detalles de implementación o sus atributos. Clases finales: No declarar las clases como finales, excepto por motivos de seguridad Al declarar una clase como final impedimos que se puedan crear subclases que hereden de ésta. Por este motivo, nunca se deberán crear clases finales. Tan sólo deben crearse clases finales por motivos de seguridad, para impedir que se puedan crear
Página 61 de 221
subclases que implementen alguna funcionalidad que pueda perjudicar a la aplicación o cuando todos los métodos constructores de la clase sean privados. Atributos de clases finales: Asegurar que los atributos de las clases finales no estén definidos como protected Los atributos de las clases finales deben declararse como públicos o privados, pero no deben declararse como protegidos. Esto se debe a que las clases finales no se pueden derivar, por lo que el uso del modificador de acceso protegido puede crear confusiones. Clases internas: Usar clases internas cuando el grado de acoplamiento sea elevado Se recomienda utilizar clases internas cuando el grado de acoplamiento entre ciertas clases sea muy elevado, pero sin descuidar el tamaño de dichas clases para no aumentar la complejidad. La clases internas no deben sobrepasar las 60 líneas de código. Inicialización de clases: Inicializar las clases y superclases en un estado conocido Las clases y superclases deben inicializarse a un estado estable y conocido para evitar conflictos iniciales y que puedan aparecer ciclos dentro de los inicializadores estáticos que ocasionen errores graves en la aplicación. Herencia: Sólo se deben crear clases que hereden de otras cuando se vaya a ampliar la funcionalidad de la clase padre en la clase hija La herencia consiste en la creación de clases que extienden de otras. Esto es, una clase que añade características propias al contenido de otra clase de la que hereda. Por lo tanto, sólo se deben crear clases que hereden de otras cuando se vaya a ampliar la funcionalidad de la clase padre en la clase hija. Interfaces: Usar las interfaces para establecer 'protocolos' entre las clases. Debemos utilizar las interfaces para establecer protocolos entre las clases, ya que éstas permiten establecer la forma de una clase (nombres de métodos, listas de argumentos y tipos de retorno, pero no bloques de código). En ellas se especifica qué se debe hacer pero no su implementación. Serán las clases que implementen estas interfaces las que describan la lógica del comportamiento de los métodos. Tipos de interfaces: Crear diferentes tipos de interfaces para diferentes tipos de usuarios Se recomienda la creación de diferentes tipos de interfaces según el tipo de usuario para proporcionar un sistema más comprensible desde las diversas perspectivas que puede haber en el mismo. De este modo conseguimos reducir el impacto por mantenimiento. Interfaces frente clases abstractas: Usar las interfaces en lugar de clases abstractas
Página 62 de 221
Debemos promover el uso de interfaces, en lugar de clases abstractas, para aquellos casos en los que se tenga pensado dar distintas implementaciones a un mismo método. Esto se debe a que las interfaces son más flexibles que las clases abstractas, permitiendo herencia múltiple en Java. Se recomienda utilizar clases abstractas sólo cuando se implemente cierta funcionalidad que deba ser compartida por todas las subclases. Interfaces redundantes: Evitar crear interfaces redundantes Existen clases que declaran e implementan una interfaz que también es implementada por una superclase. Esto es redundante porque una vez que una superclase implementa una interfaz, todas las subclases de forma predeterminada también implementan esta interfaz. Clases del API Java: Usar o extender en la medida de lo posible las clases del API Java Debemos usar o extender en la medida de lo posible las clases del API Java, ya que suelen ofrecer un rendimiento nativo de máquina que no se puede igualar utilizando una implementación Java propia. Por ejemplo, el método java.lang.System.arraycopy() es mucho más rápido a la hora de copiar un array de cualquier tamaño que si implementamos nuestro propio bucle para copiar cada uno de sus elementos.
15.
Entrada de datos en consola
Por Jonathan Emanuel Camey Magzul Codigo Así como imprimimos por la consola, también podemos ingresar datos por la consola. Crear una clase llamada ConsoleInput con método main de la misma forma que antes. Reemplazar el comentario por: InputStream stream = System.in; Scanner scanner = new Scanner(stream); System.out.println("Name:"); String input = scanner.next(); System.out.println("Hello " + input); scanner.close();
Página 63 de 221
Se verán errores en rojo en el editor ya que faltan las importaciones:
import java.io.InputStream; import java.util.Scanner;
Si oprimimos conjuntamente Ctrl+Shift y la letra "o", se agregarán automáticamente. Si Eclipse tiene acceso a más de una clase con el mismo nombre, le dará la opción de elegir el paquete para el import. Explicación de codigo InputStream stream = System.in;
En la primera línea guardamos en stream un objeto mantenido por Java, en una variable de clase in de la clase System. Este Objeto InputStream es como un flujo de datos que viene del teclado. Scanner scanner = new Scanner(stream);
En la segunda línea se crea un Objeto Scanner, usando como parámetro un flujo de datos. Esto es posible gracias a que Scanner tiene un constructor que acepta objetos InputStream. System.out.println("Name:"); Imprime por la consola "Name: String input = scanner.next();
Bloquea la ejecución en espera de una entrada finalizada con un retorno. La función next(), retorna el string ingresado antes del retorno. System.out.println("Hello " + input);
Imprime “Hello ”, seguido de lo que ingresamos por la consola scanner.close();
Página 64 de 221
16.
Clase scanner
La clase scanner es una de las mejores maneras para ingresar datos por teclado e n java. •
Para crear un objeto de clase Scanner, normalmente pasamos el objeto predefinido System.in, que representa el flujo de entrada estándar. Podemos pasar un objeto de clase File si queremos leer la entrada de un archivo.
•
Para leer valores numéricos de un determinado tipo de datos XYZ, la función que se utilizará es nextXYZ(). Por ejemplo, para leer un valor de tipo short, podemos usar nextShort().
•
Para leer cadenas (strings), usamos nextLine().
•
Para leer un solo carácter, se usa next().charAt(0). La función next()devuelve el siguiente token/palabra en la entrada como cadena y la función charAt (0) devuelve el primer carácter de esa cadena
Ejemplos:
Entrada:Alex,Masculino,23,92578458 Salida: Nombre: Alex,Género: m,Edad: 23,Teléfono: 92578458,Promedio: 20.0
Página 65 de 221
Ejemplo con hasNextXYZ() A veces, debemos verificar si el siguiente valor que leemos es de cierto tipo o si la entrada ha finalizado (se encontró el marcador EOF).Luego, verificamos si la entrada del Scanner es del tipo que queremos con la ayuda de las funciones hasNextXYZ() donde XYZ es del tipo que nos interesa. La función devuelve true (verdadero) si el scanner tiene un token de ese tipo, de lo contrario es false (falso). Por ejemplo, en el siguiente código, hemos utilizado hasNextInt(). Para verificar una cadena, usamos hasNextLine(). De manera similar, para verificar si hay un solo carácter, usamos hasNext().CharAt(0).
Entrada: 1,2,3,4,5,6 Salida: La media es: 3
17.
Sentencias condiciones
Es una bifurcación o sentencia condicional de una o dos ramas. La sentencia de control evalúa la condición lógica o booleana. Si esta condición es cierta entonces se ejecuta la sentencia o sentencias (1) que se encuentra a continuación. En caso contrario, se ejecuta la sentencia (2) que sigue a else (si ésta existe). La sentencia puede constar opcionalmente de una o dos ramas con sus correspondientes sentencias. if (expresionLogica) { sentencia_1; } o bien (con dos ramas):
Página 66 de 221
if (expresionLogica) { sentencia_1; } else { sentencia_2;
}
Ejemplo: if (a>b) { System.out.println("a es mayor que b"); }else { System.out.println("a no es mayor que b"); }
18.
Estructuras de repetición
Por Cristian Benjamin Carrascoza García Una estructura de repetición o bucle nos permite ejecutar un numero de veces determinado una serie de instrucciones. La mayor utilidad es evitar la repetición de lineas de código iguales. Para salir del bucle, se indica una condición, si esa condición no se cumple se sale del bucle. Las estructuras de repetición son: while: indicamos una condición que se ejecutara hasta que la condición sea falsa, es importante que la variable que este en la condición, varíe para que no se produzca un bucle infinito. Su sintaxis es: while (condicion){ instrucciones }
Página 67 de 221
for: este tipo de bucle, es como el anterior pero ademas de la condición, incluye una inicialización de una variable y un incremento o decremento de esa variable, en principio, no es necesario que incluya las 3 partes, se pueden inicializar o incrementar varias varias separadas por comas. Cada parte se separa con un ; for(inicializacion;condicion;incremento){ instrucciones }
do-while: esta estructura repetitiva, tiene algo especial y es que como mínimo las instrucciones dentro de la estructura repetitiva al menos una vez, mientras que el while sus instrucciones pueden ejecutarse 0 o N veces. Se sale del bucle cuando la condición del while no se cumple, si esto pasa empieza desde el do. Se utiliza para la validación de datos. Su sintaxis es: do{ intrucciones }while(condicion);
18.18 Simple y doble
Página 68 de 221
El anidamiento es la practica de incorporar estructuras condicionales unas dentro de otras, mediante niveles de paréntesis, por lo que puede ser muy exhausto el encontrar errores a la hora que se presentan. Simple: es una estructura de control que ejecuta un conjunto de líneas que si es cierta una expresión boleeana.
if (expresion) { Líneas de código que se ejecutan si la expresión es cierta. }
if (expresion) { Líneas de código que se ejecutan si la expresión es cierta. } else { Líneas de código que se ejecutan si la expresión es falsa. } Doble: Nos permiten controla la ejecución de varias acciones y se utilizan cuando hay dos acciones alternativas
18.19 Múltiples o anidadas
Página 69 de 221
Decimos que una estructura condicional es anidada cuando por la rama del verdadero o el falso de una estructura condicional hay otra estructura condicional
El diagrama de flujo que se presenta contiene dos estructuras condicionales. La principal se trata de una estructura condicional compuesta y la segunda es una estructura condicional simple y está contenida por la rama del falso de la primer estructura. Es común que se presenten estructuras condicionales anidadas aún más complejas. Ejemplo
Página 70 de 221
18.20 Swich Case Por Julio César Castro Porras La instrucción switch es una instrucción de múltiples vías. Proporciona una forma sencilla de enviar la ejecución a diferentes partes del código en función del valor de la expresión. Básicamente, la expresión puede ser tipos de datos primitivos byte, short, char e intWhile
Ejemplo
Página 71 de 221
18.21 While Un bucle while es una sentencia de control de flujo que permite que el código se ejecute repetidamente en función de una condición booleana dada. El bucle while se puede considerar como una instrucción if repetitiva. while (condición booleana) { declaraciones del bucle ... }
•
El while comienza con la verificación de la condición. Si se evalúa como verdadero, las instrucciones del cuerpo del bucle se ejecutan; de lo contrario, se ejecuta la primera instrucción que le sigue al bucle. Por esta razón, también se llama bucle de control de entrada.
•
Una vez que la condición se evalúa como verdadera, se ejecutan las instrucciones en el cuerpo del bucle.
•
Normalmente, las declaraciones contienen un valor de actualización para la variable que se procesa para la siguiente iteración.
Página 72 de 221
•
Cuando la condición se vuelve falsa, el ciclo finaliza y marca el final de su ciclo de vida.
18.21.1 Do while y For Do while: El bucle do while es similar al while con la única diferencia de que comprueba la condición después de ejecutar las instrucciones, y por lo tanto es un ejemplo de Exit Control Loop (Salir del bloque de control).
El bucle do while comienza con la ejecución de la(s) declaración(es). No hay
•
verificación de ninguna condición la primera vez. Después de la ejecución de los enunciados, y la actualización del valor de la
•
variable, la condición se verifica para el valor verdadero o falso. Si se evalúa como verdadero, comienza la siguiente iteración del ciclo. Cuando la condición se vuelve falsa, el ciclo finaliza y marca el final de su ciclo de
•
vida. Es importante tener en cuenta que el bucle do-while ejecutará sus declaraciones al
•
menos una vez antes de que se verifique cualquier condición, y por lo tanto es un ejemplo de bucle de control de salida. Ejemplo: // Programa Java para ilustrar el bucle do-while class dowhileloopDemo { public static void main(String args[]) { int x = 21; do {
Página 73 de 221
//El código dentro del do se imprime incluso //si la condición es falsa System.out.println("Valor de x :" + x); x++; } while (x < 20); } } For: El bucle for proporciona una forma concisa de escribir la estructura de bucle. A diferencia de un ciclo while, una sentencia for consume la inicialización, la condición y el incremento/decremento en una línea, proporcionando así una estructura de bucle más corta y fácil de depurar. Ejemplo: Programa Java para ilustrar el bucle while class whileLoopDemo { int x = 1;
public static void main(String args[])
{
// Salir cuando x llega a ser mayor que 4
while (x <= 4)
{
System.out.println("Valor de x: " + x); //incrementa el valor de x para la siguiente iteración x++;
•
} }}
Condición de inicialización: Aquí, inicializamos la variable en uso. Marca el inicio de un ciclo for. Se puede usar una variable ya declarada o se puede declarar una variable, solo local para el bucle.
Página 74 de 221
•
Condición de prueba: se usa para probar la condición de salida de un bucle. Debe devolver un valor booleano. También es un bucle de control de entrada cuando se verifica la condición antes de la ejecución de las instrucciones de bucle.
•
Ejecución de instrucción: una vez que la condición se evalúa como verdadera, se ejecutan las instrucciones en el cuerpo del bucle.
•
Incremento/Decremento: se usa para actualizar la variable para la siguiente iteración.
•
Terminación de bucle: cuando la condición se vuelve falsa, el bucle termina marcando el final de su ciclo de vida.
Ejemplo // Programa Java para ilustrar el bucle for. class forLoopDemo { public static void main(String args[]) { // bucle for comienza cuando x=2 // y corre hasta x <=4 for (int x = 2; x <= 4; x++) System.out.println("Valor de x: " + x); } }
18.21.2 Repetitivas anidadas Por Alvaro Eduardo Chávez de León Las estructuras anidadas son aquellas que pueden contener otras estructuras (de decisión y repetitivas) cualquier número de veces, ejecutando diferentes acciones. De decisión: las estructuras de selección si-entonces y si-entonces-si_no implican la selección de dos alternativas. Con una estructura de decisión anidada, es posible utilizar la instrucción simple o doble para diseñar estructuras de selección que contengan más de dos alternativas. Por ejemplo, una estructura si-entonces puede contener otra estructura si-entonces y esta estructura si-entonces puede contener otra y así sucesivamente.
Página 75 de 221
Como el pseudocódigo se puede volver complejo en la medida que se agreguen más estructuras de decisión anidadas, se hace necesario aplicar indentación (o sangría) de tal manera que corresponda la palabra si y fin_si de cada estructura Repetitivas: las estructuras repetitivas son anidadas igual que las estructuras de decisión, conservando las reglas de indentación. La estructura interna debe estar contenida completamente en la externa evitando el solapamiento
Página 76 de 221
Capítulo III 1. Java-Swing Es un paquete que hace parte de la Java Foundation Classes o mas conocida como JFC, la cual provee herramientas o facilidades para la construcción de GUI's o interfaces Graficas de Usuario
1.1 Java JTextArea El control de tipo JTextArea permite ingresar múltiples líneas, a diferencia del control de tipo JTextField.
Página 77 de 221
1.2 Java JPasswordField Por Cinthya Valeska Chinchilla Sosa El control de tipo JPasswordField permite la entrada para contraseñas como su nombre lo indica
1.3 Java JCheckBox El control de tipo JCheckBox es un botón de comprobación, permite implementar un cuadro de selección (básicamente un botón de dos estados ).
1.4 Java JRadioButton Control visual muy común donde normalmente se muestran un conjunto de JRadioButton y permiten la selección de solo uno de ellos.
Página 78 de 221
1.5 Java JComboBox Por Saulo Samuel Coguox Nerios Permite seleccionar un String de una lista.
1.6 Java JTable Es un componente visual de java que nos permite dibujar una tabla, de forma que en cada fila/columna de la tabla podamos poner el dato que queramos; un nombre, un apellido, una edad, un número, etc.
1.7 Java JList Es un componente que contiene una lista de objetos. Es parecido a JComboBox, pero posee algunas diferencias: Se utilizan cuando se quiere ver varios elementos de la lista a la vez. Se puede seleccionar uno o varios elementos a la vez.
Página 79 de 221
1.8 Java JOptionPane Por Mario Alejandro Corzo Peralta Es una clase que nos provee una conjunto de ventanas de dialogo que es ideal, para mostrar mensajes al usuario.
1.9 Java JScrollbar Se utiliza para crear una barra de desplazamiento horizontal y vertical. Se puede agregar un JScrollBar a un contenedor de nivel superior como JFrame o un componente como JPanel. JScrollBar es otro componente ligero que amplía la clase JComponent. Ejemplo de su uso: import javax.swing.*;
SwingUtilities.invokeLater(new Runnable() {
import java.awt.*;
public void run() {
public class Scroll2
new A();
{
}
public static void main(String... ar)
});
{
}//Closing the main method
Página 80 de 221 }//Closing the class Combo
JLabel label = new JLabel(image, JLabel.CENTER); jp = new JPanel(new BorderLayout());
class A //implements ActionListener
jp.add( label, BorderLayout.CENTER );
{ Object [] index; JFrame jf; JPanel jp;
JScrollBar scrollB1 = new JScrollBar(JScrollBar.HORIZONTAL, 10, 40, 0, 100); JScrollBar scrollB2 = new JScrollBar(JScrollBar.VERTICAL, 10, 60, 0, 100);
JLabel label1, label2; jf.add(label1,BorderLayout.NORTH); A()
jf.add(jp,BorderLayout.CENTER);
{
jf.add(scrollB2,BorderLayout.EAST); jf.add(scrollB1,BorderLayout.SOUTH);
jf = new JFrame("JScrollBar"); jp = new JPanel();
jf.setSize(350,270); jf.setVisible(true);
label1 = new JLabel("Displaying a picture ",JLabel.CENTER); ImageIcon image = new ImageIcon("nature3.png");
} }
1.10 Java JMenuItem & JMenu La clase JMenuBar se usa para mostrar la barra de menú en la ventana o marco. Puede tener varios menús. El objeto de la clase JMenuItem agrega un elemento de menú etiquetado simple. Los elementos utilizados en un menú deben pertenecer a JMenuItem o cualquiera de su subclase. Ejemplo import javax.swing.*; class MenuExample
{ JMenu menu, submenu;
Página 81 de 221 JMenuItem i1, i2, i3, i4, i5;
submenu.add(i4); submenu.add(i5);
MenuExample(){
menu.add(submenu);
JFrame f= new JFrame("Menu and MenuItem Example");
mb.add(menu); f.setJMenuBar(mb);
JMenuBar mb=new JMenuBar();
f.setSize(400,400);
menu=new JMenu("Menu");
f.setLayout(null);
submenu=new JMenu("Sub Menu"); i1=new JMenuItem("Item 1"); i2=new JMenuItem("Item 2"); i3=new JMenuItem("Item 3"); i4=new JMenuItem("Item 4"); i5=new JMenuItem("Item 5");
f.setVisible(true); } public static void main(String args[]) { new MenuExample(); } }
menu.add(i1); menu.add(i2); menu.add(i3);
1.11 Java JCheckBoxMenuItem Por Heidy Lourdes Cotzajay Yapán La clase JCheckBoxMenuItem representa una casilla de verificación que se puede incluir en un menú. Un CheckBoxMenuItem puede tener texto o un icono gráfico o ambos asociados. MenuItem se puede seleccionar o deseleccionar. MenuItems se puede configurar y controlar mediante acciones. Ejemplo
import java.awt.event.ActionEvent;
import javax.swing.JFrame;
import java.awt.event.ActionListener;
import javax.swing.JMenu;
import java.awt.event.KeyEvent;
import javax.swing.JMenuBar;
import javax.swing.AbstractButton;
import javax.swing.JMenuItem;
import javax.swing.Icon; import javax.swing.JCheckBoxMenuItem;
public class JavaCheckBoxMenuItem {
Página 82 de 221 public static void main(final String args[]) { JFrame frame = new JFrame("Jmenu Example"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE );
AbstractButton aButton = (AbstractButton) event.getSource(); boolean selected = aButton.getModel().isSelected(); String newLabel;
JMenuBar menuBar = new JMenuBar();
Icon newIcon;
// File Menu, F - Mnemonic
if (selected) {
JMenu fileMenu = new JMenu("File");
newLabel = "Value-1";
fileMenu.setMnemonic(KeyEvent.VK_F);
} else {
menuBar.add(fileMenu);
newLabel = "Value-2";
// File->New, N - Mnemonic
}
JMenuItem menuItem1 = new JMenuItem("Open", KeyEvent.VK_N);
aButton.setText(newLabel); }
fileMenu.add(menuItem1);
};
JCheckBoxMenuItem caseMenuItem = new JCheckBoxMenuItem("Option_1");
caseMenuItem.addActionListener(aListener); frame.setJMenuBar(menuBar);
caseMenuItem.setMnemonic(KeyEvent.VK_C);
frame.setSize(350, 250);
fileMenu.add(caseMenuItem);
frame.setVisible(true); }
ActionListener aListener = new ActionListener() { public void actionPerformed(ActionEvent event) {
}
1.12 Java JProgressBar La clase JProgressBar se utiliza para mostrar el progreso de la tarea. Hereda la clase JComponent. Ejemplo:
import javax.swing.*;
int i=0,num=0;
public class ProgressBarExample extends JFrame{
ProgressBarExample(){
JProgressBar jb;
jb=new JProgressBar(0,2000);
Página 83 de 221 jb.setBounds(40,40,160,30);
i=i+20;
jb.setValue(0);
try{Thread.sleep(150);}catch(Exception e){}
jb.setStringPainted(true);
}
add(jb);
}
setSize(250,150);
public static void main(String[] args) {
setLayout(null);
ProgressBarExample m=new ProgressBarExample();
}
m.setVisible(true);
public void iterate(){
m.iterate();
while(i<=2000){
}
jb.setValue(i);
}
1.13 Java JTree La clase JTree se utiliza para mostrar los datos estructurados en árbol o los datos jerárquicos. JTree es un componente complejo. Tiene un 'nodo raíz' en la parte superior que es un padre para todos los nodos del árbol. Hereda la clase JComponent. Ejemplo:
javax.swing.*; import javax.swing.tree.DefaultMutableTreeNode; public class TreeExample { JFrame f; TreeExample(){ f=new JFrame(); DefaultMutableTreeNode style=new DefaultMutableTreeNode("Style");
DefaultMutableTreeNode blue=new DefaultMutableTreeNode("blue"); DefaultMutableTreeNode black=new DefaultMutableTreeNode("black"); DefaultMutableTreeNode green=new DefaultMutableTreeNode("green"); color.add(red); color.add(blue); color.add(black); color.add(green); JTree jt=new JTree(style); f.add(jt);
DefaultMutableTreeNode color=new DefaultMutableTreeNode("color");
f.setSize(200,200);
DefaultMutableTreeNode font=new DefaultMutableTreeNode("font"); style.add(color); style.add(font); DefaultMutableTreeNode red=new DefaultMutableTreeNode("red");
f.setVisible(true); } public static void main(String[] args) { new TreeExample(); }}
Página 84 de 221
1.14 Java JColorChooser Por David Alfredo Cuc Hernández La clase JColorChooser se utiliza para crear un cuadro de diálogo de selección de color para que el usuario pueda seleccionar cualquier color. Hereda la clase JComponent. Ejemplo:
import java.awt.event.*; import java.awt.*; import javax.swing.*; public class ColorChooserExample extends JFrame implements ActionListener { JButton b; Container c;
public void actionPerformed(ActionEvent e) { Color initialcolor=Color.RED; Color color=JColorChooser.showDialog(this,"Sel ect a color",initialcolor); c.setBackground(color); }
ColorChooserExample(){ c=getContentPane(); c.setLayout(new FlowLayout()); b=new JButton("color"); b.addActionListener(this); c.add(b); }
public static void main(String[] args) { ColorChooserExample ch=new ColorChooserExample(); ch.setSize(400,400); ch.setVisible(true);
Página 85 de 221
} ch.setDefaultCloseOperation(EXIT_ON_CL OSE);
}
1.15 Java JSpinner El objeto de la clase JSpinner es un campo de entrada de una sola línea que permite al usuario seleccionar un número o un valor de objeto de una secuencia ordenada. Ejemplo:
Import javax.swing.*;
JSpinner spinner = new JSpinner(value);
public class SpinnerExample {
spinner.setBounds(100,100,50,30);
public static void main(String[] args) {
f.add(spinner);
JFrame f=new JFrame("Spinner Example");
f.setSize(300,300);
SpinnerModel value =
f.setLayout(null);
new SpinnerNumberModel(5, //initial value
f.setVisible(true);
0, //minimum value
}
10, //maximum value
}
1); //step
Página 86 de 221
1.16 Java JDialog El control JDialog representa una ventana de nivel superior con un borde y un título que se usa para tomar alguna forma de entrada del usuario. Hereda la clase Dialog. Ejemplo:
import javax.swing.*;
{
import java.awt.*;
DialogExample.d.setVisible(false);
import java.awt.event.*;
}
public class DialogExample {
});
private static JDialog d;
d.add( new JLabel ("Click button to continue."));
DialogExample() {
d.add(b);
JFrame f= new JFrame();
d.setSize(300,300);
d = new JDialog(f , "Dialog Example", true);
d.setVisible(true);
d.setLayout( new FlowLayout() );
}
JButton b = new JButton ("OK");
public static void main(String args[])
b.addActionListener ( new ActionListener()
{
{
new DialogExample(); public void actionPerformed( ActionEvent e )
} }
1.17 Java JPanel Por Mario Andrés Culajay Roldan JPanel es una clase de contenedor más simple. Proporciona espacio en el que una aplicación puede adjuntar cualquier otro componente. Hereda la clase JComponents.
Ejemplo:
Página 87 de 221 import java.awt.*;
b2.setBounds(100,100,80,30);
import javax.swing.*;
b2.setBackground(Color.green);
public class PanelExample {
panel.add(b1); panel.add(b2);
PanelExample()
f.add(panel);
{
f.setSize(400,400);
JFrame f= new JFrame("Panel Example");
f.setLayout(null);
JPanel panel=new JPanel();
f.setVisible(true);
panel.setBounds(40,80,200,200);
}
panel.setBackground(Color.gray);
public static void main(String args[])
JButton b1=new JButton("Button 1");
{
b1.setBounds(50,100,80,30);
new PanelExample();
b1.setBackground(Color.yellow);
}
JButton b2=new JButton("Button 2");
}
1.18 Java JToolBar El contenedor JToolBar nos permite agrupar otros componentes, generalmente botones con iconos en una fila o columna. JToolBar proporciona un componente que es útil para mostrar acciones o controles de uso común. Ejemplo:
import java.awt.BorderLayout; import java.awt.Container; import javax.swing.JButton; import javax.swing.JComboBox; import javax.swing.JFrame; import javax.swing.JScrollPane; import javax.swing.JTextArea; import javax.swing.JToolBar;
public class JToolBarExample { public static void main(final String args[]) { JFrame myframe = new JFrame("JToolBar Example"); myframe.setDefaultCloseOperation(JFrame.EXIT_ON_C LOSE); JToolBar toolbar = new JToolBar();
Página 88 de 221 toolbar.setRollover(true);
contentPane.add(toolbar, BorderLayout.NORTH);
JButton button = new JButton("File");
JTextArea textArea = new JTextArea();
toolbar.add(button);
JScrollPane mypane = new JScrollPane(textArea);
toolbar.addSeparator();
contentPane.add(mypane, BorderLayout.EAST);
toolbar.add(new JButton("Edit"));
myframe.setSize(450, 250);
toolbar.add(new JComboBox(new String[] { "Opt1", "Opt-2", "Opt-3", "Opt-4" })); Container contentPane = myframe.getContentPane();
myframe.setVisible(true); } }
1.19 Java JFrame JFrame es una clase utilizada en Swing para generar ventanas sobre las cuales añadir distintos objetos con los que podrá interactuar o no el usuario. A diferencia de JPanel, JFrame posee algunas nociones típicas de una ventana como minimizar, cerrar, maximizar y poder moverla. Se requiere de la librería java.swing.JFrame. La clase javax.swing.JFrame es un tipo de contenedor que hereda la clase java.awt.Frame. JFrame funciona como la ventana principal donde se agregan componentes como etiquetas, botones, campos de texto para crear una GUI.
import javax.swing.*; clase gui { public static void main(String args[]) { JFrame frame = new JFrame("Mi primera GUI"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setSize(300, 300); JButton button1 = new JButton("Presionar"); frame.getContentPane().add(button1); frame.setVisible(true); } }
Página 89 de 221
1.20 Java JScrollPane Por Walter Iván Damián Fuentes Es un contenedor para componentes que necesiten redimensionarse a través una barra deslizable tanto vertical como horizontalmente, el componente no cambia su tamaño original solo lo que se muestra al final en la pantalla. Seguramente todos habremos deslizado miles a lo largo de nuestra experiencia con computadoras, sobre todo en internet. Ejemplo:
import java.awt.*; import javax.swing.*; public class Barra extends JFrame{ static JScrollPane panelDeslizable = new JScrollPane(); static JTextArea areaTexto = new JTextArea(80, 4);
panelDeslizable.setViewportView(areaText o); // agregando a la ventana el contenedor scrollpane add(panelDeslizable,BorderLayout.CENTER );
public Barra(){
setVisible(true);
super("Ejemplo Scroll Pane");
}
setSize(250,200);
public static void main(String[] args) {
setLocationRelativeTo(null); setDefaultCloseOperation(JFrame.EXIT_O N_CLOSE); // agregando el scrollpane al area de texto
new Barra(); } } // Fin de la Clase
Página 90 de 221
1.21 Java JTextPane JTextPane es una subclase de la clase JEditorPane. JTextPane se utiliza para documentos con estilo con imágenes y componentes incrustados. Es un componente de texto que se puede marcar con atributos que se representan gráficamente. JTextPane usa un DefaultStyledDocument como su modelo predeterminado. Ejemplo:
import java.awt.BorderLayout; import java.awt.Color; import java.awt.Container; import javax.swing.JFrame;
frame.setDefaultCloseOperation(JFrame.E XIT_ON_CLOSE); Container cp = frame.getContentPane();
import javax.swing.JScrollPane;
JTextPane pane = new JTextPane();
import javax.swing.JTextPane;
SimpleAttributeSet attributeSet = new SimpleAttributeSet();
import javax.swing.text.BadLocationException; import javax.swing.text.Document; import javax.swing.text.SimpleAttributeSet; import javax.swing.text.StyleConstants; public class JTextPaneExample { public static void main(String args[]) throws BadLocationException { JFrame frame = new JFrame("JTextPane Example");
StyleConstants.setBold(attributeSet, true);
// colocamos los atributos y después añadimos el texto pane.setCharacterAttributes(attributeSet, true); pane.setText("Welcome");
attributeSet = new SimpleAttributeSet();
Página 91 de 221
StyleConstants.setItalic(attributeSet, true); StyleConstants.setForeground(attributeSet , Color.red); StyleConstants.setBackground(attributeSe t, Color.blue);
attributeSet = new SimpleAttributeSet(); doc.insertString(doc.getLength(), "World", attributeSet);
JScrollPane scrollPane = new JScrollPane(pane); cp.add(scrollPane, BorderLayout.CENTER);
Document doc = pane.getStyledDocument(); frame.setSize(400, 300);
doc.insertString(doc.getLength(), "To Java ", attributeSet);
frame.setVisible(true); } }
Página 92 de 221
Capítulo IV 1. HTML HTML, siglas en inglés de HyperText Markup Language, hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación.
1.1 HTML introducción Por Jose Andres De Paz Benito Incluye el diseño gráfico de las páginas web, sin embargo, eso no es cierto ya que HTML sólo sirve para indicar como va ordenado el contenido de una página web. Esto lo hace por medio de las marcas de hipertexto las cuales son etiquetas conocidas en inglés como tags. Hasta el momento ya tenemos una idea sobre lo que hace HTML pero aún no sabemos cómo funcionan las etiquetas. Para esto vamos a imaginar que tienen que hacer un ensayo sobre algún tema, consideraremos que el ensayo será nuestra página web y la manera en la que va ordenado un ensayo es por un título, la introducción, el desarrollo y la conclusión, si se tiene en cuenta que esto nos dice cómo debe ir nuestro ensayo podemos considerar que éstas serían las etiquetas porque nos dicen la estructura que lleva, es decir, la forma en que se acomoda el texto en nuestro ensayo. Cabe mencionar
Página 93 de 221
que las etiquetas no sólo sirven para ordenar nuestro contenido sino que ayudan a los buscadores como Google, Yahoo search y muchos otros a encontrar la información por medio de las etiquetas. Ahora que entendemos el concepto de etiquetas, necesitamos poder identificarlas. Éstas se caracterizan porque van dentro de los caracteres menor que < y mayor que >, como en este ejemplo: <Aquí dentro va el nombre de la etiqueta>
Existes ciertas excepciones con el fin de las etiquetas, ya que algunas usualmente sólo se utilizan con el inicio de la etiqueta, ejemplos de esto son las etiquetas BR (salto de línea), IMG (etiqueta para poner una imagen), entre otras.
1.2 Editores HTML Cada desarrollador tiene su propio estilo, por lo que la elección de un editor HTML adecuado es un proceso individual. Probablemente necesitará probar algunos antes de encontrar uno del que se enamores. Por ahora, aquí hay algunas características que debería comprobar en cada interfaz de edición. •
Notepad++
•
Visual Studio Code
•
CoffeeCup Free Editor
•
Brackets
•
Komodo Edit
•
Sublime Text
•
Atom
Editores de HTML más Utilizados para la Codificación de HTML •
Visual Studio Code
•
Notepad++
•
Sublime Text
Página 94 de 221
1.3 HTML básico HTML no es un lenguaje de programación; es un lenguaje de marcado que define la estructura de tu contenido. HTML consiste en una serie de elementos que usarás para encerrar diferentes partes del contenido para que se vean o comporten de una determinada manera. Las etiquetas de encierre pueden hacer de una palabra o una imagen un hipervínculo a otro sitio, se pueden cambiar palabras a cursiva, agrandar o achicar la letra, etc. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mi prueba</title> </head> <body>
</body> </html>
Si quieres especificar que se trata de un párrafo, podrías encerrar el texto con la etiqueta de párrafo (<p>). 1. La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p), encerrado por paréntesis angulares (< >) de apertura y cierre. Establece dónde comienza o empieza a tener efecto el elemento —en este caso, dónde es el comienzo del párrafo—. 2. La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una barra de cierre (/) antes del nombre de la etiqueta. Establece dónde termina el elemento —en este caso dónde termina el párrafo—. 3. El contenido: este es el contenido del elemento, que en este caso es sólo texto. 4. El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido equivale al elemento.
Página 95 de 221
1.4 HTML elementos Por Bryan Steve Diaz López HTML define el término elemento para referirse a las partes que componen los documentos HTML. Aunque en ocasiones se habla de forma indistinta de "elementos" y "etiquetas", en realidad un elemento HTML es mucho más que una etiqueta, ya que está formado por: •
Una etiqueta de apertura.
•
Cero o más atributos.
•
Texto encerrado por la etiqueta.
•
Una etiqueta de cierre.
El texto encerrado por la etiqueta es opcional, ya que algunas etiquetas de HTML no pueden encerrar ningún texto. El siguiente esquema muestra un elemento HTML, formado por una etiqueta <p>, atributos y contenidos de texto:
La estructura mostrada en el esquema anterior es un elemento HTML ya que comienza con una etiqueta de apertura (<p>), contiene cero o más atributos (class="normal"), dispone de un contenido de texto (Esto es un párrafo) y finaliza con una etiqueta de cierre (</p>). Por tanto, si una página web tiene dos párrafos de texto, la página contiene dos elementos y cuatro etiquetas (dos etiquetas <p> de apertura y dos etiquetas </p> de cierre). De todas formas, aunque estrictamente no son lo mismo, es habitual intercambiar las palabras "elemento" y "etiqueta".
1.5 Atributos HTML Los atributos de HTML son palabras especiales utilizadas dentro de la etiqueta de apertura, para controlar el comportamiento del elemento. Los atributos de HTML son un modificador de un tipo de elemento de HTML. Un atributo tampoco modifica la funcionalidad por defecto de un tipo de elemento o proporciona funcionalidad a ciertos tipos de elementos incapaces de funcionar correctamente sin ellos. En sintaxis HTML, un atributo se añade a una etiqueta de inicio de HTML. Aunque cada una de las etiquetas
Página 96 de 221
HTML define sus propios atributos, encontramos algunos comunes a muchas o casi todas las etiquetas, que se dividen en cuatro grupos según su funcionalidad: •
Atributos básicos
•
Atributos de internacionalización
•
Atributos de eventos
•
Atributos de foco
ATRIBUTOS BÁSICOS Los atributos básicos se utilizan en la mayoría de etiquetas HTML y XHTML, aunque adquieren mayor sentido cuando se utilizan hojas de estilo en cascada (CSS)
ATRIBUTOS DE INTERNACIONALIZACIÓN O I18N Estos atributos se utilizan en aquellas páginas que muestran sus contenidos en varios idiomas y las que quieran indicar de forma explícita el idioma de sus contenidos
ATRIBUTOS DE EVENTOS Estos atributos se utilizan en las páginas web que incluyen código JavaScript para realizar acciones dinámicas sobre los elementos de la página. Pueden ser utilizados por: todos los elementos
Página 97 de 221
ATRIBUTOS DE FOCO Se le denomina foco o focus, cuando un control o elemento del documento ha sido seleccionado. Cuando ese elemento deja de estar seleccionado, "pierde el foco" y es el nuevo elemento seleccionado el que se dice que tiene "el foco".
1.6 HTML encabezamiento Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando el título del artículo, categoría, etc. Pues bien, para escribir encabezados disponemos de las etiquetas <h>. Esta etiqueta viene acompañada de un número, desde el 1 hasta el 6, predefiniendo éstos el tamaño del encabezado. Así, <h1> sería el encabezado más grande mientras que <h6> sería el más pequeño.
<!DOCTYPE html>
</head>
<html>
<body>
<head>
<h1>Texto muy grande</h1>
<title>Ejemplo del uso de encabezados aprenderaprogramar.com</title>
<h2>Texto grande</h2>
Página 98 de 221
<h3>Texto algo más grande de lo normal</h3> <h4>Texto normal</h4>
<h6>Texto muy pequeño</h6> </body> </html>
<h5>Texto pequeño</h5>
1.7 HTML párrafos Por Saul Carlo Iván Diaz Olivares En un documento HTML, para escribir un párrafo se usa el elemento "p", cuyas etiquetas de inicio y fin son, respectivamente: <p> y </p>. Ejemplo en un navegador web:
Ejemplo código:
Página 99 de 221
1.8 Formato HTML Vamos a ver una serie de etiquetas y atributos básicos para la creación de páginas webs. No entraremos a describir una a una todas las etiquetas y atributos de que HTML dispone.
Las primeras etiquetas que veremos son las que se usaban en el pasado para dar formato al texto. Para ello tenemos una serie de etiquetas que escribimos en HTML envolviendo la palabra o el texto y que transforman ese texto en el formato que nosotros le hayamos querido dar. Negrita Existen dos etiquetas que hacen que nuestro texto se convierta en negrita. La utilización de cualquiera de ellas es en principio indiferente (aunque pueda atribuírseles un
Página 100 de 221
significado diferente a cada una de ellas no vamos a prestarle atención a esto ahora). La primera es la etiqueta <b> y la otra es la etiqueta <strong>.
Cursiva Para escribir un texto en cursiva se ha utilizado mucho en el pasado la etiqueta <i> (que por supuesto debes cerrarla con la etiqueta </i>). También se ha utilizado la etiqueta <em>.
Subrayado U (Deprecated) Para que la palabra o el texto quedara subrayado se usó en el pasado el rodearlo con la etiqueta <u> y cerrarlo con su correspondiente etiqueta </u>.
Palabras más grandes o más pequeñas Puede que en una frase queramos destacar una palabra por medio de una variación de tamaño sin necesidad de utilizar los encabezados (los encabezados son etiquetas especiales que explicaremos más adelante). La variación de tamaño se podía conseguir gracias a las etiquetas <big> y <small>.
Superíndices y Subíndices Gracias a las etiquetas siguientes podrás escribir subíndices y superíndices fácilmente. La etiqueta <sub> te servirá para escribir un subíndice y <sup> será la etiqueta para un superíndice.
Página 101 de 221
Texto Tachado Existen tres etiquetas que se han venido usando para conseguir que un texto quede tachado. Hablamos de las etiquetas <strike>, <s> y <del>. Todas ellas ofrecen el mismo resultado.
1.9 Estilos HTML Para cambiar el estilo en el que por defecto se visualizan los elementos de un documento HTML en un navegador web, existen varios métodos: •
Estilo en línea (Inline): utilizando el atributo style.
•
Estilo interno (Internal): usando un elemento "style".
•
Estilo externo (External): empleando un archivo CSS (Cascading Style Sheets) externo al documento HTML.
Estilo en línea - Atributo style Para cambiar el color de un párrafo, se puede escribir el siguiente código ("estilo-enlinea.html"): Ejemplo código:
Ejemplo navegador:
Página 102 de 221
Estilo interno - Elemento "style" En este caso, se usa el elemento "style" dentro del "head" ("estilo-interno.html"):
Estilo externo - Elemento "link" Para aplicar un estilo externo, hay que hacer uso del elemento "link", el cual permite enlazar el documento HTML con un archivo externo. El código HTML puede ser ("estiloexterno.html"):
1.10 Citas HTML Por Edgar Manuel Escobar Fernández El elemento HTML <q> indica que el texto adjunto es una cita corta en línea. La mayoría de los navegadores modernos implementan esto rodeando el texto entre comillas. Este
Página 103 de 221
elemento está destinado a citas breves que no requieren saltos de párrafo; para citas de bloque independiente, utiliza el elemento <blockquote>.
Atributos cite El valor de este atributo es una URL que designa un documento o mensaje fuente para la información citada. Este atributo está destinado a señalar información que explica el contexto o la referencia de la cita.
La mayoría de los navegadores modernos automáticamente agregarán comillas alrededor del texto dentro de un elemento <q>. Es posible que se necesite una regla de estilo para agregar comillas en navegadores antiguos.
1.11 Comentarios HTML Los comentarios HTML son visibles para cualquiera que vea el código fuente de la página, pero no se representan cuando el navegador procesa el documento HTML. Este elemento se usa para agregar un comentario a un documento HTML. Un comentario HTML comienza con <!–– y el comentario se cierra con ––>.
Como en cualquier otro lenguaje de programación, los comentarios tienen dos objetivos principales:
Página 104 de 221
Documentar el código fuente. Desactivar una o más líneas de código. Ejemplo:
Ejemplo en el navegador:
1.12 HTML enlaces Enlaces HTML Lo que caracteriza a la web como medio de comunicación es la navegación por medio de hipervínculos (links o enlaces). Esta conexión entre archivos permite al usuario elegir el sentido de la navegación. En el HTML los enlaces se marcan con la etiqueta <a></a> y el atributo principal es href="" donde se escribe la ubicación del archivo de destino que puede estar en la misma carpeta que el archivo que lo está llamando, en otra carpeta del mismo sitio o en otro sitio web. Rutas de enlaces: Se llama ruta al valor que se escribe dentro del atributo href="" y se pueden clasificar en dos tipos: Rutas absolutas: Las rutas absolutas son las que definen la ubicación completa de un archivo en la web y empiezan desde https://nombredelsitio.com/archivo.html (el archivo de destino puede ser de cualquier extensión).
Página 105 de 221
Rutas relativas: Las rutas relativas en cambio, definen la ubicación del archivo de destino en relación a la ubicación del archivo que lo está llamando.
Tipos de enlaces Existen diferentes tipos de enlaces que detallo a continuación:
Enlaces internos entre archivos .html Son los enlaces principales de un sitio. Si en el archivo index.html, queremos agregar un vínculo a contacto.html el código sería así:
Enlaces externos Son los enlaces entre diferentes sitios web. Si queremos vincular un sitio web con otro, tenemos que indicar la ruta absoluta del sitio escribiendo la url completa que conviene copiarla del navegador. En este caso, es común usar el atributo target="" que nos permite abrir el enlace en una pestaña nueva.
Enlaces internos: anclas Las anclas son enlaces hacia un punto determinado dentro de un html. Se usa en varios casos, por ejemplo, en una página de preguntas frecuentes donde las respuestas están desarrolladas debajo de las preguntas, o en Wikipedia, cuando el texto es extenso el menú tiene vínculos con anclas. También en los textos largos, al finalizar muchas veces se coloca un botón para subir. En los sitios de una sola página donde los botones en realidad hacen scroll, esas son anclas.
Página 106 de 221
1.13 HTML imágenes Por Edga Alexander Florian Pirir Las imágenes podrán ser elementos representativos de página web o elementos decorativos. Si bien, en el caso de ser elementos decorativos deberíamos de utilizar CSS para insertarlos en nuestra página web. El uso de imágenes dentro de una página web tiene que hacerse con cautela, ya que cada imagen que pongamos en nuestra web incrementará el tamaño (peso) de la página. Por lo cual se verá afectado el tiempo de descarga de la página. Insertar una imagen: El elemento img Para insertar una imagen en HTML tenemos el elemento img, cuya sintaxis básica es:
Dimensiones de la imagen: width y height Si no indicamos más sobre el elemento img, la imagen que le hayamos pasado en su campo src se cargará con su tamaño original. Si bien disponemos de los atributos width para el ancho de la imagen y height para el alto de la imagen. De esta forma, si queremos que nuestra imagen se vea en 100x100 pixels, podemos insertar el siguiente código:
Tipos de formatos de imágenes JPEG, son imágenes digitales comprimidas con pérdida de información. Pero que nos permiten tener imágenes digitales que ocupen poco espacio. GIF, es un formato para imágenes de mapas de bits las cuales soportan 8 bits por pixel. El formato GIF soporta imágenes animadas. PNG, es un formato de imagen en mapa de bits que emplea compresión de datos sin pérdida de información. No requieren de licencia de patente. Es un formato creado para utilizar imágenes en Internet con un tamaño adecuado.
Página 107 de 221
1.14 Tablas HTML Las tablas es el elemento del lenguaje HTML que utilizaremos para mostrar información de forma agrupada. Ya sea texto, imágenes, vídeos, … El elemento table será el que nos ayudará para crear las tablas en HTML. Crear una tabla Para crear una tabla vamos a necesitar conocer, al menos, tres elementos: table, tr y td. Si bien existen otros cuantos que nos permitirán ampliar la funcionalidad de las tablas. El primer elemento es table. table es el elemento que representa las tablas y será el que agrupe al resto de elementos. Por lo tanto tiene sus etiquetas de inicio y cierre.
Siguiendo con la construcción de la tabla el siguiente elemento que necesitamos es tr. El elemento tr representa a una fila de la tabla. Por lo tanto tendremos tantos elementos tr como filas tenga la tabla.
El último elemento que necesitamos conocer es td. El elemento td es el que representa de una forma unitaria a una celda. Por lo tanto los elementos tr tendrán tantos elementos td en su interior como celdas contenga la fila. El contenido que haya entre los elementos td será el contenido de la celda.
Página 108 de 221
1.15 HTML listas Las listas en HTML nos permiten crear conjuntos de elementos en forma de lista dentro de una página, todos los cuales irán precedidos, generalmente, por un guión o número. Los tipos de listas en HTML son los siguientes: •
Listas ordenadas
•
Listas desordenadas
•
Listas de definiciones
Listas Ordenadas Las listas en HTML ordenadas son aquellas que nos muestran los elementos de la lista en orden. Para representar el orden tendremos los elementos numerados. Es decir, cada uno de los elementos irá precedido de un número o letra que establezca su orden. Las listas en HTML ordenadas se representan mediante el elemento OL.
Tipo de lista ordenada: type De igual manera podemos indicar el tipo de lista ordenada en HTML que queremos representar. Entre los tipos de listas que podemos representar tenemos: 1 - Listas decimales a - Listas alfabéticas en minúsculas A - Listas alfabéticas en mayúsculas i - Listas de números romanos en minúsculas I - Listas de números romanos en mayúsculas
Página 109 de 221
Listas en orden inverso: reversed En HTML 5 aparece el atributo reversed para las listas ordenadas. El atributo reversed nos permite invertir el orden de la lista. Es decir, realiza la numeración de la lista de forma inversa.
Listas Desordenadas Las listas desordenadas en HTML nos sirven para mostrar los elementos sin ningún tipo de orden, simplemente precedidos por una viñeta que puede ser un punto, un cuadrado, … Para definir una lista desordenada en HTML utilizamos el elemento ul.
Tipos de lista desordenada En el caso de las listas en HTML desordenadas en HTML no podemos indicarle el tipo de lista mediante HTML. En este caso tenemos que recurrir a CSS para poder indicar el tipo de lista utilizando el atributo list-style-type
Listas de Definiciones Las listas en HTML de definiciones en HTML nos sirven para montar listas en las que tenemos la estructura valor y definición. Suelen ser listas para definir términos, como si fuese un diccionario, si bien pueden ser cualquier par valor-definición. Las listas en HTML de definiciones en HTML se construyen mediante el elemento dl.
Página 110 de 221
Listas anidadas Cuando
estemos
manejando
listas
podemos
anidar
unas
en
otras
independientemente del tipo de lista que estemos anidando. Para crear listas anidadas en HTML simplemente tenemos que hacer que el elemento de una de las listas sea a su vez una lista. Es decir, el esquema de listas sería parecido al siguiente:
1.16 Bloques HTML Por David Alejandro Franco Chiroy Las etiquetas de bloque permiten definir bloques de contenido coherente, formado por texto e imágenes. Visualmente, cada bloque se muestra separado del resto de bloques. El bloque de contenido más simple es el párrafo (etiqueta <p>).
Párrafo: <p><p>
Página 111 de 221
La etiqueta <p> está pensada para definir párrafos de texto e imágenes.
Separador temático: <hr><hr> La etiqueta vacía <hr> está pensada para separar párrafos e indica un cambio de tema. Tradicionalmente, los navegadores han mostrado este separador como una línea horizontal.
Preformateado: <pre><pre> La etiqueta <pre> se utiliza cuando se quiere conservar los espacios en blanco, los saltos de línea y los tabuladores del texto original. En el resto de etiquetas, los navegadores no muestran ni las líneas en blanco ni varios espacios en blanco seguidos.
Bloque de cita: <blockquote><blockquote> La etiqueta <blockquote> está pensada para identificar una cita larga, que puede contener varios párrafos u otras etiquetas.
Página 112 de 221
Contenido principal: <main><main> La etiqueta <main> se utiliza para agrupar el contenido principal de una página, sin incluir los elementos comunes a otras páginas como bloques de navegación, información general del sitio, etc.
1.17 Clases HTML Dado que el número de etiquetas del HTML es reducido, es probable que en una página web se quiera dar un formato distinto a elementos con la misma etiqueta. Se puede sortear esta limitación utilizando clases, que se pueden asignar a cualquier elemento de una página web. Las clases se asignan con el atributo class. El valor del atributo class (el nombre de la clase) sólo pueden contener caracteres ingleses, números, guiones y subrayados, aunque el primer carácter no puede ser ni un número ni un guion. Para darle formato a un elemento de html como puede ser un párrafo se utilizan las clases (class), que van definidas en la hoja de estilos. Así pues podemos crear en la hoja de estilos a una clase y la aplicaremos a aquellos párrafos que queramos resaltar.
Página 113 de 221
Las clases dentro de html son elementos que se utilizan dentro de las etiquetas para señalar atributos que pueden ser cambiados a través de la hoja de estilos css en donde llamamos a la propia clase para editar tanto su tamaño de letra, posición, transparencia, color de fondo hasta la propia sangría de la letra y en caso de las imágenes proporciona una posición, tamaño, opacidad, redondeados y un color de fondo a la propia figura en donde estos son solo algunos ejemplos ya que las clases pueden utilizarse dentro de diferentes etiquetas como puede ser formularios, columnas, filas, botones, áreas en donde se puede insertar texto, títulos, párrafos, contenedores, etc…
También las clases dentro de html se vuelven un recurso bastante bueno a la hora de manipular cualquier tipo de framework ya que estos permiten sin dañar la integridad del propio framework posicionarlo de forma eficiente sin necesidad de consultar con algún creador del mismo para hacer modificaciones a la hora de trabajar y son la opción más viable para no acumular tanto código de diseño dentro de las propias etiquetas ya que a las anteriores se deben de agregar extensiones como style para poder darle todas estas propiedades a las etiquetas y al mismo tiempo ahorrar peso del propio archivo haciéndolo más compacto. Para darle formato a un elemento de html como puede ser un párrafo se utilizan las clases (class), que van definidas en la hoja de estilos. Así pues, podemos crear en la hoja de estilos a una clase y la aplicaremos a aquellos párrafos que queramos resaltar. En este video te mostramos la diferencia entre añadir estilos propios en la etiqueta dada mediante el atributo style, y mediante nombre con clases.
Página 114 de 221
En el archivo CSS (que es un simple archivo de texto, pero que tiene la extensión .css) definimos la clase, las clases siempre se definen poniendo un punto (.) delante. Y cuando queramos destacar un párrafo sólo tenemos que asignarle esa clase al párrafo.
<! DOCTYPE html> <html lang="es-ES"> <head> <meta charset="utf-8"> <title>Ejemplo uso del elemento div y del atributo class</title> <style>. rojo {color: red;} azul {color: blue;} </style> </head> <body> <p>Primer párrafo. </p> <div class="rojo"> <p>Segundo párrafo. </p> <p>Tercer párrafo. </p> </div> </body> </html>
1.18 Formularios HTML Los formularios en HTML sirven al propósito de recolectar información proporcionada por los visitantes del sitio, la cual es luego enviada nuevamente al servidor. Para su correcto funcionamiento es importante que el formulario provisto en HTML sea acompañado de un código del lado servidor, al que denominaremos "agente procesador", que se encargará de recibir y procesar la información como el autor vea conveniente. Este procesamiento puede consistir en, por ejemplo, el almacenamiento de la información o su envío mediante correo electrónico.
Página 115 de 221
Un formulario (<form>) es básicamente un contenedor para controles. Cada control en un formulario está pensado para recolectar información ingresada por los usuarios, en formas que pueden ir desde líneas de texto a subida de archivos, pasando por opciones, fechas, contraseñas y mucho más. Una vez que los usuarios han rellenado el formulario con los datos, pueden enviarlo de regreso al servidor para que el agente procesador administre la información recolectada. El siguiente código muestra la estructura de un formulario, con sus etiquetas de apertura y cierre encerrando un conjunto de controles. <form> [Conjunto de controles] </form> Pero este modelo no dice nada acerca de cómo y dónde será procesado el formulario. Tal información puede ser especificada con atributos tales como: action, que indica la ubicación del agente procesador; method que determina el método utilizado para empaquetar el formulario antes de ser enviado al agente procesador; y target, que indica dónde serán mostrados los resultados del proceso. Aquí hablaremos únicamente del atributo action, dejando los otros dos para ser analizados en la referencia del elemento form. El siguiente formulario ha sido declarado con el URL de un agente procesador que he preparado para propósitos de aprendizaje, en el atributo action. Puedes ver al agente procesador tomando el control del proceso en una nueva ventana cuando envías el formulario. <form action="../form-result.php" target="_blank"> <input type="submit" value="Enviar el formulario"> </form>
El formulario: <form> Un formulario es un conjunto de controles (botones, cajas de texto, casillas de verificación, botones radio, etc) que permiten al usuario introducir datos y enviarlos al servidor web para su procesamiento. Ejemplo:
Página 116 de 221
<form action="ejemplo.php" method="get"> <p>Nombre: <input type="text" name="nombre" size="40"></p> <p>Año de nacimiento: <input type="number" name="nacido" min="1900"></p> <p>Sexo: <input type="radio" name="hm" value="h"> Hombre <input type="radio" name="hm" value="m"> Mujer </p> <p> <input type="submit" value="Enviar"> <input type="reset" value="Borrar"> </p> </form>
1.19 HTML Iframes Por Javier Estuardo Godines Pineda El elemento
HTML
<Iframe>
(de
inline
frame)
representa
un contexto
de
navegación anidado, el cual permite incrustrar otra página HTML en la página actual. El trabajo con frames obliga a crear una estructura diferente para la página de lo que suele ser lo habitual. Sin embargo, con la etiqueta iframe es distinto. Esta etiqueta inserta una ventana en la que podemos ver el contenido de otra página sin necesidad de utilizar la estructura de página impuesta por los frames. Así dentro de una página normal nos crea una ventana en la que podemos ver otro archivo html, con lo que no necesitamos que todas las partes de la página sean parte de otros archivos. El comportamiento de la etiqueta Iframe es parecido al de la etiqueta image respecto de su posición en la página. Ambas son etiquetas en línea y admiten el atributo align para su posicionamiento, o pueden ser posicionadas de la misma manera mediante el código CSS. para su correcto funcionamiento la etiqueta Iframe debe tener su correspondiente etiqueta de cierre, aunque entre estas dos etiquetas no se escriba nada. La ventana de la etiqueta Iframe se comporta de la misma manera que si fuera una imagen, en cuanto a posicionamiento. Al igual que éstas, es un elemento en línea y admite el atributo Align, también podemos posicionarla mediante código CSS.
Página 117 de 221
Los atributos height y width marcan la anchura y la altura de la ventana. debemos ponerlos si queremos que la ventana tenga una anchura y altura determinadas, aunque también podemos definir esas medidas mediante el código CSS. Los enlaces en la página principal, actualizan la página principal, pero en la página de la ventana iframe actualizan sólo la propia ventana del iframe. Si queremos cambiar esto debemos usar el atributo target. Un enlace dentro del iframe con el atributo target = “_parent” actualizará la ventana principal.
<iframe src="https://es.wikipedia.org" width="400" height="300" name="ventana"></iframe>
Los iframes se introducen en el código HTML con la etiqueta iframe. Para completar el iframe correctamente, hay que especificar también los siguientes atributos: src: fuente del contenido incrustado, en formato URL. width: ancho del marco, que se puede especificar en píxeles o en porcentaje.
Página 118 de 221
Un iFrame es un marco (frame) dentro de un marco. Es un componente de un elemento HTML que permite incrustar documentos, videos y medios interactivos dentro de una página. ... Por ejemplo, si quieres agregar un video de YouTube para aportar valor a tus lectores, puedes insertar un elemento iFrame en ese post.
1.20 HTML color Nombres Los colores en HTML se especifican mediante el estándar RGB (Red Green and Blue). Este estándar indica que una combinación de los tres colores básicos: rojo, verde y azul puede dar lugar a cualquier otro color. Los valores que se les da al RGB son valores hexadecimales que van desde el 00 hasta el FF. Al valor del color se le antepone una almohadilla. De esta forma un color rojo sería aquel que solo tiene activado el Red, el verde solo la parte del Green y el azul la parte del Blue. Así los colores básicos en HTML serán: Rojo
#FF0000
Verde
#00FF00
Azul
#0000FF
Otras combinaciones generales de colores serían el negro (activando todos los colores), el blanco (desactivando todos los colores), amarillo (combinando Red y Blue), fucsia (combinando todo el rojo y todo el azul): Negro
#FFFFFF
Blanco
#000000
Amarillo
#FFFF00
Fucsia
#FF00FF
Y luego ya combinaciones de los múltiples valores hexadecimales: Gris Plata
#C0C0C0
Azul Marino
#000080
Verde Oliva
#808000
Los colores al ser elementos de estilo son utilizados en las CSS. Ya que HTML solo define la estructura de la página. Pero vamos a ver, por encima, cómo podríamos cambiar el color de un texto. Para ello vamos a utilizar el atributo style. El atributo style nos permite asignar un estilo CSS a un elemento HTML.
Página 119 de 221
El estilo que vamos a manipular es color. A ese atributo color le asignaremos un valor RGB. <elemento style="color: #RGB" />
Por ejemplo, si queremos cambiar el color a un header podríamos hacer lo siguiente: <h1 style="color: #FF0000">Cabecera 1</h1>
Otro atributo CSS al que podríamos dar un colo es el color de fondo. Para ello deberemos de manipular el atributo background-color. De esta forma si queremos poner un color de fondo a una capa podríamos hacer lo siguiente. <div style="background-color: #FFFF00">Mi Capa</div>
Los 140 nombres de colores definidos en la especificación de colores HTML y CSS. Con los códigos de color puedes fijar el color del fondo del Web site, el color de fuentes, las células en tablas y mucho más. Este sistema utiliza la combinación de tres códigos de dos dígitos para expresar las diferentes intensidades de los colores primarios RGB (del inglés Red, and Green, Blue; rojo, verde y azul). Este valor se representa en hexadecimal rango (va de 00 a ff).
Página 120 de 221
1.21 HTML cabeceras En HTML existen seis elementos que pueden ser utilizados para escribir cabeceras o encabezados: "h1", "h2", "h3", "h4", "h5" y "h6". Ejemplo: <! DOCTYPE html> <html lang="es-ES"> <head> <meta charset="utf-8"> <title>Ejemplo con 2 cabeceras</title> </head> <body> <h1>Esto es una cabecera h1</h1> <p>Esto es un párrafo. </p> <h2>Esto es una cabecera h2</h2> <p>Esto es otro párrafo. </p> </body> </html>
Las cabeceras se utilizan para estructurar el contenido de una página web y, a la hora de utilizarlas, hay que tener en cuenta que, la cabecera "h1" es la de mayor importancia, después "h2", "h3", etc. Siendo "h6" la menos importante. Ejemplo: <! DOCTYPE html> <html lang="es-ES"> <head> <meta charset="utf-8"> <title>Ejemplo con 6 cabeceras</title> </head> <body>
Página 121 de 221
<h1>Esto es una cabecera h1</h1> <h2>Esto es una cabecera h2</h2> <h3>Esto es una cabecera h3</h3> <h4>Esto es una cabecera h4</h4> <h5>Esto es una cabecera h5</h5> <h6>Esto es una cabecera h6</h6> </body> </html>
Las diversas cabeceras que ofrece HTML son las ya antes mencionadas y representadas con imagines y ejemplos en donde cada una de ellas puede llegar a ser modificada desde el propio document HTML con la propiedad style o con una pagina aparte dedicada a diseño como bien puede ser Css en donde normalmente no solo se utilizan como cabezeras si no que tambien tienen una funcion como titulus y subtitulos para una pagina como tambien sirven para resaltar datos importantes o dar aclaraciones a pequeñas escalas entre diversos propositos diversos en donde estos mismos disponen tambien de un uso de framworks pero dentro de las paginas basicas es mas comun verlo de la manera que se presenta en este apartado de una manera simplificada y con variantes en color como tambien puede ser una variante en tipo de letra y su fuente.
1.22 HTML audio/video Por Felix Alexander Godinez Socoy El elemento audio incrusta recursos de audio en un documento. Aunque es muy fácil de utilizar, este elemento puede ser muy adaptable, poderoso y compatible con la mayoría de los navegadores. Los autores tienen dos formas para indicarle a los navegadores qué recurso se debe cargar. El primero, y más directo, es especificando el URL del recurso en el atributo src.
Página 122 de 221
Uno o más elementos <track> pueden incluirse dentro de cualquier elemento de medios para proveer información extra, como subtítulos, títulos o descripciones, que mejorarán la experiencia del usuario. Los autores deben elegir una de las dos formas de especificar un recurso de audio, pero nunca ambas. Si declaras el atributo src no te será posible proveer alternativas con el elemento <source>. También proveeremos contenido alternativo para que los usuarios con navegadores que no soportan al elemento <audio> sean informados acerca del problema y tengan una pequeña guía acerca de cómo proceder. Ejemplo: <audio
src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"
autoplay> Your browser does not support the <code>audio</code> element. </audio>
La especificación actual del borrador de HTML5 no especifica qué formatos de audio deben admitir los navegadores en la etiqueta de audio. Pero los formatos de audio más utilizados son ogg, mp3 y wav. En HTML5 se introduce la interesante posibilidad de mostrar videos directamente desde nuestro navegador. De hecho, si arrastramos un video a la ventana del navegador, veremos que comienza a reproducirse en él. Para poder insertar videos en nuestras páginas HTML tenemos que utilizar la etiqueta <video>, que junto a la etiqueta <source> podremos utilizar estas capacidades multimedia de HTML5. Si se desea usar en videos de youtube se debe de usar un <Iframe>. La etiqueta <video> tiene varios atributos a nuestra disposición:
Página 123 de 221
Un primer ejemplo muy básico para colocar un video en nuestra página web: <video src="video.mp4" width="640" height="480"></video>
Sin embargo, esto mostrará el primer fotograma del video, con un tamaño de 640x480, pero se verá como una imagen, ya que no muestra los controles del video y tampoco tiene la autoreproducción activada. Podríamos solucionarlo indicando los atributos controls o autoplay.
Otro ejemplo básico para colocar videos en nuestra página
<video src="video. webm" poster="presentacion.jpg" controls></video> <video src="video.mp4" autoplay muted loop></video>
2. CSS Las hojas de estilos aparecieron poco después que el lenguaje de etiquetas SGML, alrededor del año 1970. Desde la creación de SGML, se observó la necesidad de definir un mecanismo que permitiera aplicar de forma consistente diferentes estilos a los documentos electrónicos. El gran impulso de los lenguajes de hojas de estilos se produjo con el boom de Internet y el crecimiento exponencial del lenguaje HTML para la creación de documentos electrónicos. La guerra de navegadores y la falta de un estándar para la definición de los estilos dificultaban la creación de documentos con la misma apariencia en diferentes navegadores. El organismo W3C (World Wide Web Consortium), encargado de crear todos los estándares relacionados con la web, propuso la creación de un lenguaje de hojas de estilos específico para el lenguaje HTML y se presentaron nueve propuestas. Las dos propuestas que se tuvieron en cuenta fueron la CHSS (Cascading HTML Style Sheets) y la SSP (Stream-based Style Sheet Proposal). La propuesta CHSS fue realizada por Håkon Wium Lie y SSP fue propuesto por Bert Bos. Entre finales de 1994 y 1995 Lie y Bos se unieron para definir un nuevo lenguaje que tomaba lo mejor de cada propuesta y lo llamaron CSS (Cascading Style Sheets).
Página 124 de 221
En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSS y lo añadió a su grupo de trabajo de HTML. A finales de 1996, el W3C publicó la primera recomendación oficial, conocida como "CSS nivel 1".
A principios de 1997, el W3C decide separar los trabajos del grupo de HTML en tres secciones: el grupo de trabajo de HTML, el grupo de trabajo de DOM y el grupo de trabajo de CSS.
El 12 de mayo de 1998, el grupo de trabajo de CSS publica su segunda recomendación oficial, conocida como "CSS nivel 2". La versión de CSS que utilizan todos los navegadores de hoy en día es CSS 2.1, una revisión de CSS 2 que aún se está elaborando (la última actualización es del 8 de septiembre de 2009). Al mismo tiempo, la siguiente recomendación de CSS, conocida como "CSS nivel 3", continúa en desarrollo desde 1998 y hasta el momento sólo se han publicado borradores. La adopción de CSS por parte de los navegadores ha requerido un largo periodo de tiempo. El mismo año que se publicó CSS 1, Microsoft lanzaba su navegador Internet Explorer 3.0, que disponía de un soporte bastante reducido de CSS. El primer navegador con soporte completo de CSS 1 fue la versión para Mac de Internet Explorer 5, que se publicó en el año 2000. Por el momento, ningún navegador tiene soporte completo de CSS 2.1.
Página 125 de 221
2.1 CSS introducción CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas. Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados "documentos semánticos"). Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes. Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc. Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc.
CSS está diseñado principalmente para marcar la separación del contenido del documento y la forma de presentación de este, características tales como las capas o layouts, los colores y las fuentes. Esta separación busca mejorar la accesibilidad del documento, proveer más flexibilidad y control en la especificación de características presentacionales, permitir que varios documentos HTML compartan un mismo estilo usando una sola hoja de estilos separada en un archivo .CSS, y reducir la complejidad y la repetición de código en la estructura del documento. La separación del formato y el contenido hace posible presentar el mismo documento marcado en diferentes estilos para diferentes métodos de renderizado, como en pantalla, en impresión, en voz (mediante un navegador de voz o un lector de pantalla, y dispositivos táctiles basados en el sistema Braille. También se puede mostrar una página
Página 126 de 221
web de manera diferente dependiendo del tamaño de la pantalla o tipo de dispositivo. Los lectores pueden especificar una hoja de estilos diferente, como una hoja de estilos CSS guardado en su computadora, para sobreescribir la hoja de estilos del diseñador.
La especificación CSS describe un esquema prioritario para determinar qué reglas de estilo se aplican si más de una regla coincide para un elemento en particular. Estas reglas son aplicadas con un sistema llamado de cascada, de modo que las prioridades son calculadas y asignadas a las reglas, así que los resultados son predecibles. La especificación CSS es mantenida por el World Wide Web Consortium (W3C). El MIME type text - Css está registrado para su uso por CSS descrito en el RFC 2318. El W3C proporciona una herramienta de validación de CSS gratuita para los documentos CSS.
2.2 CSS sintaxis La meta básica del lenguaje Cascading Stylesheet (CSS) es permitir al motor del navegador pintar elementos de la página con características específicas, como colores, posición o decoración. La sintaxis CSS refleja estas metas y estos son los bloques básicos de construcción. •
La propiedad que es un identificador, un nombre leíble por humanos, que define qué característica es considerada.
•
El valor que describe como las características deben ser manejadas por el motor. Cada propiedad tiene un conjunto de valores válidos, definido por una gramática formal, así como un significado semántico, implementados por el motor del navegador.
Página 127 de 221
Configurando propiedades CSS a valores específicos es la función principal del lenguaje del CSS. Una propiedad y su valor son llamados una declaración, y cualquier motor de CSS calcula qué declaraciones aplican a cada uno de los elementos de una página para mostralos apropiadamente y estilizarlos. Ambos propiedades y valores son sensibles a mayúculas y minúsculas en CSS. El par se separa por dos puntos, ':' (U+003A COLON), y los espacios en blanco antes, entre ellos y después, pero no necesariamente dentro de ellos, son ignorados.
Hay más de 100 propiedades diferentes en CSS y cerca de un número infinito de diferentes valores. No todos los pares de propiedades y valores son permitidos cada propiedad define que valores son válidos. Cuando un valor no es válido para una propiedad específica, la declaración es considerada inválida y es completamente ingorada por el motor del CSS.
Esos
bloques
son
naturalmente
llamados bloques
de
declaraciones y
las
declaraciones dentro de ellos están separadas por un punto y coma, ';' (U+003B SEMICOLON). Un bloque de declaración puede estar vacío, que es contener una declaración nula. Los espacios en blanco alrededor de las declaraciones son ignorados. En cuanto a la última declaración de un bloque, esta no necesita terminar en un punto y coma, aunque es usualmente considerado una buena práctica porque previene el olvidar agregarlo cuando se extienda el bloque con otra declaración.
Página 128 de 221
El contenido de un bloque de declaración CSS, que es una lista de declaraciones separadas por un punto y coma, sin las llaves de apertura y cierre, pueden ser colocadas dentro del atributo style de HTML. Si cada hoja de estilos pudiera aplicar una sól declaración a cada elemento de una página web, sería algo inútil. El verdadero objetivo es aplicar varias declaraciones a distintas partes del documento. CSS permite esto asociando condiciones con bloques de declaraciones. Cada declaración (válida) es precedida por un selector, es decir, una condición que selecciona algunos elementos de la página. El bloque que forma el par selector-declaraciones recibe el nombre de set de reglas, o simplemente una regla.
2.4 CSS selectores Por Maria Fernanda Godinez Tunay Selector universal: Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaración de la regla CSS): *{ margin: 0; padding: 0; } El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página.
Página 129 de 221
Selector de tipo o etiqueta: Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página: p{ ... } Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML (sin los caracteres < y >) correspondiente a los elementos que se quieren seleccionar. Selector descendente: Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. El selector del siguiente ejemplo selecciona todos los elementos <span> de la página que se encuentren dentro de un elemento <p>: p span { color: red; } Si el código HTML de la página es el siguiente: <p> ... <span>texto1</span> ... <a href="">...<span>texto2</span></a> ... </p> El selector p span selecciona tanto texto1 como texto2. El motivo es que en el selector descendente, un elemento no tiene que ser descendiente directo del otro. La única condición es que un elemento debe estar dentro de otro elemento, sin importar el nivel de profundidad en el que se encuentre. Al resto de elementos <span> de la página que no están dentro de un elemento <p>, no se les aplica la regla CSS anterior.
Página 130 de 221
Los selectores descendentes permiten aumentar la precisión del selector de tipo o etiqueta. Selector de clase: Si se considera el siguiente código HTML de ejemplo: <body> <p>Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et est adipiscing accumsan...</p> <p>Class aptent taciti sociosqu ad litora...</p> </body> Este tipo de selectores se llaman selectores de clase y son los más utilizados junto con los selectores de ID que se verán a continuación. La principal característica de este selector es que en una misma página HTML varios elementos diferentes pueden utilizar el mismo valor en el atributo class: <body> <p class="destacado">Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</p > <p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p> </body> Selectores de ID: La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se utiliza el símbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la regla CSS: #destacado {color: red; }
<p>Primer párrafo</p> <p id="destacado">Segundo párrafo</p> <p>Tercer párrafo</p>
Página 131 de 221
En el ejemplo anterior, el selector #destacado solamente selecciona el segundo párrafo (cuyo atributo id es igual a destacado). La principal diferencia entre este tipo de selector y el selector de clase tiene que ver con HTML y no con CSS. Como se sabe, en una misma página, el valor del atributo id debe ser único, de forma que dos elementos diferentes no pueden tener el mismo valor de id.
2.5 CSS fondos Se establece un color o imagen de fondo en la página entera, se debe establecer un fondo al elemento <body>. body { background-color: #F5F5F5; } body { background-image: url("imagenes/fondo.png") }
2.6 CSS textos Los valores definidos por CSS permiten alinear el texto según los valores tradicionales: a la izquierda (left), a la derecha (right), centrado (center) y justificado (justify). <div style="text-transform: none"><h1>Original</h1>Lorem ipsum dolor sit amet...</div>
2.7 CSS fuentes Propiedades que permiten describir el tipo de letra (la fuente) en una página web: Interlineado: line-height (no es
•
Inclinación (itálica): font-style
propiamente una característica del
•
Variantes: font-variant
tipo de letra, pero se comenta en
•
Versalitas: font-variant-caps
esta lección)
•
Kerning: font-kerning
•
La propiedad compuesta font
•
Ligaduras: font-variant-ligatures
•
Tipo de letra: font-family
•
Formato de números: font-variant-
•
Tamaño del tipo de letra: font-size
•
Subfamilias tipográficas
•
Posición: font-variant-posititon
•
Grosor del trazo (negrita): font-
•
Tamaño y sustitución de caracteres
•
weight
numeric
asiáticos: font-variant-east-asian
Página 132 de 221
• •
Características de fuentes
•
Ajuste del tamaño: font-size-adjust
OpenType: font-feature-settings
•
Anchura: font-stretch
Síntesis: font-synthesis
2.8 Vínculos de CSS Por Cinthya Valeska Chinchilla Sosa Los estilos más sencillos que se pueden aplicar a los enlaces son los que modifican su tamaño de letra, su color y la decoración del texto del enlace. Utilizando las propiedades text-decoration y font-weight se pueden conseguir estilos como los que se muestran en la siguiente imagen:
A continuación se muestran las reglas CSS del ejemplo anterior: a { margin: 1em 0; display: block;} .alternativo {color: #CC0000;} .simple {text-decoration: none;} .importante {font-weight: bold; font-size: 1.3em;} .raro {text-decoration:overline;} <a href="#">Enlace con el estilo por defecto</a> <a class="alternativo" href="#">Enlace de color rojo</a> <a class="simple" href="#">Enlace sin subrayado</a> <a class="importante" href="#">Enlace muy importante</a> <a class="raro" href="#">Enlace con un estilo raro</a> Pseudo-clases
Página 133 de 221
CSS también permite aplicar diferentes estilos a un mismo enlace en función de su estado. De esta forma, es posible cambiar el aspecto de un enlace cuando por ejemplo el usuario pasa el ratón por encima o cuando el usuario pincha sobre ese enlace. Como con los atributos id o class no es posible aplicar diferentes estilos a un mismo elemento en función de su estado, CSS introduce un nuevo concepto llamado pseudoclases. En concreto, CSS define las siguientes cuatro pseudo-clases: •
: link, aplica estilos a los enlaces que apuntan a páginas o recursos que aún no han sido visitados por el usuario.
•
: visited, aplica estilos a los enlaces que apuntan a recursos que han sido visitados anteriormente
por
el
usuario.
El
historial
de
enlaces
visitados
se
borra
automáticamente cada cierto tiempo y el usuario también puede borrarlo manualmente. •
: hover, aplica estilos al enlace sobre el que el usuario ha posicionado el puntero del ratón.
•
: active, aplica estilos al enlace que está pinchando el usuario. Los estilos sólo se aplican desde que el usuario pincha el botón del ratón hasta que lo suelta, por lo que suelen ser unas pocas décimas de segundo.
2.9 CSS listas o tablas CSS Por defecto, los navegadores muestran los elementos de las listas no ordenadas con una viñeta formada por un pequeño círculo de color negro. Los elementos de las listas ordenadas se muestran por defecto con la numeración decimal utilizada en la mayoría de países. No obstante, CSS define varias propiedades para controlar el tipo de viñeta que muestran las listas, además de poder controlar la posición de la propia viñeta. La propiedad básica es la que controla el tipo de viñeta que se muestra y que se denomina list-style-type.
Página 134 de 221
En primer lugar, el valor none permite mostrar una lista en la que sus elementos no contienen viñetas, números o letras. Se trata de un valor muy utilizado, ya que es imprescindible para los menús de navegación creados con listas, como se verá más adelante. El resto de valores de la propiedad list-style-type se dividen en tres tipos: gráficos, numéricos y alfabéticos. •
Los valores gráficos son disc, circle y square y muestran como viñeta un círculo relleno, un círculo vacío y un cuadrado relleno respectivamente.
•
Los
valores
numéricos
están
formados
por decimal, decimal-leading-zero, lower-
roman, upper-roman, armenian y georgian. •
Por
último,
los
valores
alfanuméricos se
controlan
mediante lower-latin, lower-
alpha, upper-latin, upper-alpha y lower-greek. La siguiente imagen muestra algunos de los valores definidos por la propiedad `list-style-type: Ejemplo: <ul style="list-style-type: square"> <li>list-style-type: square</li> <li>Elemento</li> <li>Elemento</li> </ul> <ol style="list-style-type: lower-roman"> <li>list-style-type: lower-roman</li> <li>Elemento</li> <li>Elemento</li> </ol> <ol style="list-style-type: decimal-leading-zero; padding-left: 2em;"> <li>list-style-type: decimal-leading-zero</li> <li>Elemento</li> <li>Elemento</li> </ol>
2.10 Caja CSS modelo
Página 135 de 221
El modelo de cajas o "box model" es seguramente la característica más importante del lenguaje de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares. Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento. La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la página:
Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes: •
Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)
•
Relleno (padding): espacio libre opcional existente entre el contenido y el borde.
•
Borde (border): línea que encierra completamente el contenido y su relleno.
•
Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.
•
Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.
•
Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes.
Página 136 de 221
2.11 Border CSS Por David Alfredo Cuc Hernández La propiedad border es una de las "propiedades shorthand" que define CSS y que se utilizan para establecer de forma abreviada el valor de una o más propiedades individuales. En este caso, se trata de una de las propiedades shorthand más completas, ya que permite establecer hasta 12 propiedades de forma simultánea. La propiedad border se utiliza para establecer el mismo grosor, estilo y/o anchura de todos los bordes de un elemento. Al contrario que las propiedades margin y padding, con la propiedad border no es posible indicar diferentes valores para cada uno de los cuatro bordes. Como se trata de una de las propiedades más flexibles de CSS, su definición parece complicada, sobre todo en lo que se refiere a los valores permitidos "alguno o todos los siguientes valores y en cualquier orden"). El uso más habitual de border es el de establecer simultáneamente el grosor, estilo y color del borde de un elemento:
Ejemplo: div { border: 1px solid #C00; } div { border-top: 1px solid #C00; border-right: 1px solid #C00; border-bottom: 1px solid #C00; border-left: 1px solid #C00; }
Página 137 de 221
2.12 Esquema CSS Una hoja de estilo es un fichero de texto plano (sin formato) en el que se define el aspecto de las etiquetas de una página web. Una hoja de estilo está formada por una o varias sentencias (reglas), y existen dos tipos de sentencias: reglas-arroba y reglas. /* Regla arroba */ @charset "utf-8"; /* Regla 1 */ h2 { color: red; background-color: black; } /* Regla 2 */ p { font-size: 1.3em; background-color: rgb(255, 255, 224); }
•
Una regla CSS se compone de un selector y de un bloque de declaración
•
Cada declaración está compuesta por uno o más pares propiedad/valor
•
El bloque de declaración empieza y acaba con los signos de llaves { ... }
•
Cada par propiedad/valor se separa por el signo punto y coma ;
•
Cada propiedad debe separarse de su valor por el signo dos puntos :
2.13 Margen CSS CSS define cuatro propiedades para controlar cada uno de los márgenes horizontales y verticales de un elemento.
Página 138 de 221
Cada una de las propiedades establece la separación entre el borde lateral de la caja y el resto de cajas adyacentes:
Las unidades más utilizadas para indicar los márgenes de un elemento son los píxeles (cuando se requiere una precisión total), los em (para hacer diseños que mantengan las proporciones) y los porcentajes (para hacer diseños líquidos o fluidos). El siguiente ejemplo añade un margen izquierdo al segundo párrafo: .destacado { margin-left: 2em; } <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam et elit. Vivamus placerat lorem. Maecenas sapien. Integer ut massa. Cras diam ipsum, laoreet non, tincidunt a, viverra sed, tortor.</p> <p class="destacado">Vestibulum lectus diam, luctus vel, venenatis ultrices, cursus vel, tellus. Etiam placerat erat non sem. Nulla molestie odio non nisl tincidunt faucibus.</p> <p>Aliquam euismod sapien eu libero. Ut tempor orci at nulla. Nam in eros egestas massa vehicula nonummy. Morbi posuere, nibh ultricies consectetuer tincidunt, risus turpis laoreet elit, ut tincidunt risus sem et nunc.</p>
Página 139 de 221
div img { margin-top: .5em; margin-bottom: .5em; margin-left: 1em; margin-right: .5em; } Alternativa directa: div img { margin: .5em .5em .5m 1em; } Otra alternativa: div img { margin: .5em; margin-left: 1em; }
2.14 CSS Navigation Bar Por Jose Mynor Aldana Chigna Tener una navegación fácil de usar es importante para cualquier sitio web. Con CSS puedes transformar aburridos menús HTML en atractivas barras de navegación. Barra de navegación = Lista de enlaces Una barra de navegación necesita HTML estándar como base. En nuestros ejemplos, crearemos la barra de navegación a partir de una lista HTML estándar.
Página 140 de 221
Una barra de navegación es básicamente una lista de enlaces, por lo que usar los elementos <ul> y <li> tiene mucho sentido:
Ahora eliminemos las viñetas y los márgenes y el relleno de la lista:
Barra de navegación vertical
2.15 CSS galería de imágenes El HTML es muy sencillo. Dentro del <div class="galeria"> tenemos 4 imágenes y 4 botones de radio, uno para cada imagen. De hecho los botones vienen primero porque, en el CSS, quiero utilizar la tilde ( ~ ). Como ya se sabe el selector elemento1 ~ elemento2 selecciona cada elemento2 precedido por un elemento1, y el selector input ~ img selecciona cada img precedida por un input. Observe por favor que el primer botón de radio está activado ( checked ). <div class="galeria"> <input type="radio" name="navegacion" id="_1" checked> <input type="radio" name="navegacion" id="_2"> <input type="radio" name="navegacion" id="_3"> <input type="radio" name="navegacion" id="_4">
Página 141 de 221
<img src="https://www.fillmurray.com/260/300" width="260" height="300" alt="Galeria CSS 1" /> <img
src="https://www.placecage.com/c/260/300"
width="260"
height="300"
alt="Galeria CSS 2" /> <img src="http://placekitten.com/260/300" width="260" height="300" alt="Galeria CSS 3" /> <img
src="http://www.stevensegallery.com/260/300"
width="260"
height="300"
alt="Galeria CSS 4" /> </div> Las imágenes utilizadas son imágenes de substitución de varios bancos de imágenes. Para los que no saben como funciona esto: los dos números que aparecen al final del URL representan
la
anchura
y
la
altura
de
la
imagen.
Por
ejemplo
este
URL
https://www.fillmurray.com/260/300 indica que se trata de una imagen que tiene una anchura es de 260px y una altura de 300px. El CSS En el CSS lo esencial es: 1. Apilar las imágenes una encima de otra utilizando position: absolute;
.galeria img { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 3s; } 2. Al inicio todas las imágenes son completamente transparentes opacity: 0;
.galeria img { position: absolute; top: 0;
Página 142 de 221
left: 0; opacity: 0; transition: opacity 3s; } 3. Al activar uno de los botones de radio ( input type="radio" ) seleccionamos la imagen correspondiente. El CSS aquí es un poco verboso: si el primer botón de radio ( input[type=radio]:nth-of-type(1) ) está activado ( :checked ) la primera imagen situada inmediatamente después ( ~ img:nth-of-type(1) ) cambia su opacidad de 0 a 1 (opacity: 1). Si el segundo botón. . . etc. . .
.galeria input[type=radio]:nth-of-type(1):checked ~ img:nth-of-type(1){opacity: 1;} .galeria input[type=radio]:nth-of-type(2):checked ~ img:nth-of-type(2){opacity: 1;} .galeria input[type=radio]:nth-of-type(3):checked ~ img:nth-of-type(3){opacity: 1;} .galeria input[type=radio]:nth-of-type(4):checked ~ img:nth-of-type(4){opacity: 1;}
O sea: al activar el botón de radio correspondiente, la imagen pasa de opacity: 0 ( totalmente transparente ) a opacity:1 ( totalmente opaca ). La transición de opacity: 0; a opacity: 1; dura 3 segundos: transition: opacity 3s;
.galeria img { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 3s; }
Página 143 de 221
2.16 CSS imagen opacidad La opacitypropiedad puede tomar un valor de 0,0 a 1,0. Cuanto menor sea el valor, más transparente:
Efecto de desplazamiento transparente La opacitypropiedad se usa a menudo junto con el :hover selector para cambiar la opacidad al pasar el mouse:
Página 144 de 221
Página 145 de 221
Análisis de Sistemas
Quinto Grado
Página 146 de 221
Capítulo I 1.1 ADO.NET Por: Josseline Montecinos ADO.NET es un conjunto de componentes del software que pueden ser usados por los programadores para acceder a datos y a servicios de datos. Es parte de la biblioteca de clases base que están incluidas en el Microsoft .NET Framework.
Imagen: Componentes de ADO.NET Fuente: https://slideplayer.es/slide/1678691/7/images/5/Componentes+de+ADO.NET+ADO .NET+WinForm+WebForm+Otros.jpg
1.1.1 Clase Connection El objeto SqlConnection está manejando la parte de la comunicación física entre la aplicación vb y la base de datos SQL Server. Una instancia de la clase SqlConnection en vb es compatible con el proveedor de datos para la base de datos de SQL Server. La instancia de SqlConnection toma la Cadena de conexión como argumento y pasa el valor a la instrucción Constructor.
Un objeto SqlConnection representa una única sesión con un origen de datos en SQL SERVER. En el caso de un sistema de base de datos de cliente y servidor, equivalente a una conexión de red al servidor.
Página 147 de 221
Imagen: Clase Connection en Visual Basic Fuente: Captura de Pantalla
Los eventos de inicio y cierre de sesión no se generarán en el servidor cuando una conexión se recupere o se devuelva al grupo de conexiones, porque la conexión no se cierra realmente cuando se devuelve al grupo de conexiones. SqlConnection se utiliza junto con SqlDataAdapter y SqlCommand para aumentar el rendimiento al conectarse a una base de datos de Microsoft SQL Server.
1.1.2 Clase DataAdapter Un SqlDataAdapter representa un conjunto de comandos de datos y una conexión de base de datos que se utilizan para rellenar un DataSet y actualizar una base de datos de SQL Server. Representa un conjunto de comandos de datos y una conexión de base de datos que se utilizan para llenar el DataSet y actualizar una base de datos de SQL Server. Esta clase no puede heredarse. Cuando se crea una instancia de DataAdapter , las propiedades de lectura / escritura se establecen en los valores iniciales. DataAdapter dispone de cuatro propiedades que se utilizan para recuperar y actualizar datos en un origen de datos:
• •
SelectCommand: devuelve datos a partir del origen de datos; InsertCommand, UpdateCommand y DeleteCommand: se utilizan para administrar cambios en el origen de datos.
Página 148 de 221 Imagen: Implementación de DataAdapter en Visual Basic Fuente: Captura de Pantalla
Imagen: Esquema DataAdapter Fuente: https://4.bp.blogspot.com/-65GM7Bq-bwI/WM82qvAt2I/AAAAAAAAB5c/qp298BLPWzMj23cURHvMdN0Za1Moe6H3QCLcB/s1600/visualcplusdotnetchap27020.png
1.1.3 Clase DataSet El DataSet es una representación de datos residente en memoria que proporciona una modelo de programación relacional coherente independientemente del origen de datos que contiene. El DataSet contiene en sí, un conjunto de datos que han sido volcados desde el proveedor de datos. En el siguiente ejemplo se puede observar cómo se utiliza el DataSet para rellenar de datos a ese mismo conjunto de datos que posteriormente serán utilizados para refrescar una GridView.
Imagen: Implementación de DataSet en Visual Basic Fuente: Captura de Pantalla
La Clase DataSet representará un caché de datos de memoria al momento de ser llamados en una función, está por parte tiene la funcionalidad también de devolver datos ya almacenados en ella.
Página 149 de 221
La clase DataSet consiste en una colección de objetos "DataTable", formados por filas y columnas, que se pueden relacionar unas con otras, con objetos llamados "DataRelation". También contiene información acerca de las claves principales y foráneas, que permiten estas relaciones.
Imagen: Esquema DataSet Fuente: https://1.bp.blogspot.com/pj_dIRfDovA/XmP2c623fGI/AAAAAAAAA6E/QqIwkUuhv7ooCMozt1omQ7fkYjYUutWvACLcBGAsYHQ/s1600/A DO_Dataset_Structure.png
1.1.4 Clase DataView Por: López Ramírez Álvaro José Este objeto nos permite crear múltiples vistas de nuestros datos, además de permitirnos presentar los datos. Es la clase que nos permite representar los datos de la clase DataTable, permitiéndonos editar, ordenar y filtrar, buscar y navegar por un conjunto de datos determinado.
Página 150 de 221 Imagen: Implementación de DataView en Visual Basic Fuente: Captura de Pantalla
Una función fundamental de DataView es permitir el enlace de datos con formularios Windows Forms y Web Forms. Además, un DataView se puede personalizar para presentar un subconjunto de datos de DataTable. Esta capacidad permite tener dos controles enlazados al mismo objeto DataTable y que muestren versiones distintas de los datos. Para crear una vista filtrada y ordenada de datos, establezca las propiedades RowFilter y Sort. A continuación, utilice la propiedad Item para devolver un único DataRowView.
Imagen: Resultado de DataView en Visual Basic Fuente: https://lh3.googleusercontent.com/proxy/vBAPffhXfGqw09aqrqHZeewv0KbfiYaTbcWPcg HC6kO0DQSrHaTElDEiNgIwTvDxWG-YZ923YPXZiAQDsSER7aurXvHJyh4yKFNTx8qMuEMIQ7sOacY
1.1.5 Clase DataReader Para recuperar datos usando un DataReader, cree una instancia del objeto Command y luego cree un DataReader llamando a Command.ExecuteReader para recuperar filas de un origen de datos. Para recuperar datos con un DataReader , crear una instancia del objeto Command y luego crear un DataReader llamando a Command.ExecuteReader para recuperar filas de una fuente de datos. El DataReader proporciona un flujo de datos sin búfer que permite que la lógica de procedimiento procese de manera eficiente los resultados de una fuente de datos de forma secuencial. El DataReader es una buena opción cuando está recuperando grandes cantidades de datos porque los datos no se almacenan en la memoria caché. DataReader es un conjunto de registros de solo lectura, solo reenvío y conectado desde la base de datos. En DataReader, la conexión a la base de datos se abre hasta que el objeto se cierra a diferencia de DataSet. Usando DataReader podemos acceder a una fila a la vez, por lo que no es necesario almacenarlo en la memoria.
Página 151 de 221
En un DataReader podemos obtener más de un conjunto de resultados y acceder a él uno por uno. Será más rápido para un propósito simple como completar el formulario. No debemos usarlo para manipular los registros ya que siempre se conectará a la base de datos. El siguiente ejemplo ilustra el uso de un DataReader, donde Reader representa un DataReader válido y Command representa un objeto de comando válido.
Imagen: Implementación de DataRead en Visual Basic Fuente: Captura de Pantalla
1.1.6 Creación de conexiones Por: Mancilla González Josue Sebastian Para crear una conexión a SQL Server existen distintos métodos, pero aquí te presentamos los métodos más utilizados para crear una conexión exitosa, los métodos que existen son los siguientes:
• Módulos • Gráfico
1.1.6.1 Modulos •
Agregamos un módulo a nuestro proyecto y lo nombramos conexión
Página 152 de 221
Imagen: Modulo Fuente: Captura de Pantalla
•
Declaramos la conexión con el siguiente código.
Imagen: Declaración de Clase Fuente: Captura de Pantalla
•
Finalmente llamamos la función Conectar () en nuestra form objetivo.
Página 153 de 221
Imagen: Llamado a la Función Fuente: Captura de Pantalla
1.1.6.2 Modulos
•
Abriremos el “Explorador de servidores” para establecer una nueva conexión (atajo ctrl + s).
Imagen: Explorador de servidores Fuente: Captura de Pantalla
•
Damos click sobre “conectar a una base de datos”
Imagen: Conectar a una base de datos Fuente: Captura de Pantalla
•
Seleccionamos “Microsoft SQL Server” y damos click en “continuar”.
Página 154 de 221
Imagen: Elegir origen de datos Fuente: Captura de Pantalla
•
Seleccionamos el nombre del servidor y el nombre de la base de datos y damos click en “aceptar”.
Imagen: Agregar conexión Fuente: Captura de Pantalla
•
Automáticamente Visual Studio nos da nuestra cadena de conexión.
Página 155 de 221 Imagen: Cadena de conexión Fuente: Captura de Pantalla
1.1.7 Inicio de Sesión mediante Seguridad Integrada Por: López Samayoa Génesis Alexandra SQL Server admite dos modos de autenticación, el modo de autenticación de Windows y el modo mixto.
•
La autenticación de Windows es el modo predeterminado y a veces se le conoce como seguridad integrada porque este modelo de seguridad de SQL Server está estrechamente integrado en Windows. Se confía en las cuentas de usuario y grupo específicas de Windows para iniciar sesión en SQL Server. Los usuarios de Windows que ya se han autenticado no tienen que presentar credenciales adicionales.
Imagen: Windows Authentication Fuente: Captura de Pantalla
•
El modo mixto admite la autenticación mediante Windows y SQL Server. Los pares de nombre de usuario y contraseña se mantienen en SQL Server.
•
Se recomienda usar la autenticación de Windows siempre que sea posible. La autenticación de Windows usa una serie de mensajes cifrados para autenticar a los usuarios en SQL Server. Cuando se usan inicios de sesión de SQL Server, los nombres de inicio de sesión y las contraseñas cifradas se pasan a través de la red, lo que hace de este un método menos seguro.
1.1.7.1 Escenarios de autenticación La autenticación de Windows suele ser la mejor opción en las siguientes situaciones:
Página 156 de 221 •
Hay un controlador de dominio.
•
La aplicación y la base de datos están en el mismo equipo.
•
Está usando una instancia de SQL Server Express o LocalDB.
1.1.7.2 Seguridad Integrada Por: Monzón Nimatuj Jonatan Samuel Andres El ordenador cliente está en el mismo dominio que el MS SQL Server. La conexión al servidor de bases de datos se establece con seguridad integrada. En otras palabras, la cuenta del usuario en Windows Active Directory se usa automáticamente para iniciar sesión en el servidor de bases de datos. Con los valores del ejemplo anterior, la cadena de conexión sería la siguiente:
Imagen: Cadena de conexión con seguridad integrada Fuente: https://www1.citavi.com/sub/manual6/es/index.html?configure_connection_files_manually.html
1.
Conexión Mediante un formulario Windows
Por: Carlos Manuel Lima y Lima Windows Forms es una tecnología para .NET Framework, es un conjunto de bibliotecas administradas que simplifican las tareas comunes de las aplicaciones, como leer y escribir en el sistema de archivos. Cuando se usa un entorno de desarrollo como Visual Studio, puede crear aplicaciones smart client de Windows Forms que muestran información, soliciten la entrada de los usuarios y se comunican con equipos remotos a través de una red. El formulario es el primer objeto o control que se visualiza en Visual Basic y constituye la pantalla o ventana sobre la que se colocan otros objetos o controles como etiquetas, controles de texto, botones, etc, y por supuesto el código necesario de nuestros programas, por lo tanto, constituirán la Interfaz de usuario.
1.1.8 Creacion de una aplicación de Windows Forms en Visual Basic En primer lugar, crearemos un proyecto de aplicación de Visual Basic. En el tipo de proyecto se incluyen todos los archivos de plantilla que vamos a necesitar, sin necesidad de agregar nada más.
1. Abra Visual Studio 2019.
Página 157 de 221
2. En la ventana de inicio, elija Crear un proyecto nuevo.
3. En la ventana Crear un nuevo proyecto, elija la plantilla Windows Forms App (.NET Framework) para Visual Basic.
4. En la ventana Configurar el nuevo proyecto, escriba HelloWorld en el cuadro Nombre del proyecto. Luego, elija Crear.
5. Visual Studio se abre en el proyecto creado con un formulario automáticamente.
Página 158 de 221
1.1.9 Propiedades De Un Formulario • • • • • • • • • •
Por: Xunic Jutzuy María Fernanda BackColor: Permite cambiar el color del fondo del formulario. BackgroundImage: Establece una imagen como fondo del formulario. ControlBox: Determina si la ventana tiene o no botones de control. FormBorderStyle: Establece el estilo del borde del formulario. MaximizeBox: Permite que el botón de maximizar que se encuentra en los botones de control se encuente habilitado o no. MinimizeBox: Permite que el botón de minimizar que se encuentra en los botones de control se encuentren habilitado o no. ShowIcon: Indica si un ícono se muestra o no en la barra de título del formulario. ShowInTaskbar: Determina si el formulario aparece en la barra de tareas de windows. Text: Representa el texto que se visualizará en la barra de título. WindowState: Determina el estado visual inicial del formulario: Normal, Maximized, Minimized.
2. Llamada A Un Procedimiento Almacenado Por: Carlos Manuel Lima y Lima Un procedimiento almacenado es un programa (o procedimiento) almacenado físicamente en una base de datos. Su implementación varía de un gestor de bases de datos a otro. La ventaja de un procedimiento almacenado es que, al ser ejecutado, en respuesta a una petición de usuario, es ejecutado directamente en el motor de bases de datos, el cual usualmente corre en un servidor separado. Como tal, posee acceso directo a los datos que necesita manipular y sólo necesita enviar sus resultados de regreso al usuario, deshaciéndose de la sobrecarga resultante de comunicar grandes cantidades de datos salientes y entrantes. Los procedimientos pueden ser ventajosos: cuando una base de datos es manipulada desde muchos programas externos. Al incluir la lógica de la aplicación en la base de datos utilizando procedimientos almacenados, la necesidad de embeber la misma lógica en todos los programas que acceden a los datos es reducida. Esto puede simplificar la creación y, particularmente, el mantenimiento de los programas involucrados.
Página 159 de 221
Imagen: Procedimientos Almacenados Temporales Fuente: https://dbamemories.wordpress.com/2018/08/22/procedimientos-almacenados-temporales/
1.1.1 Configurar Interfaz De Usuario Por: Villatoro Mazariegoz Miguel Andres 1. Vuelva al Diseñador de Windows Forms (Form1. VB [diseño]). 2. En el menú Ver, haga clic en Cuadro de herramientas. Se abrirá el cuadro de herramientas. 3. Arrastre dos botones, dos cuadros de texto y dos etiquetas desde el cuadro de herramientas hasta Form1. Organice los controles como en la ilustración anexa. Expanda Form1 para que los controles se ajusten fácilmente. 4. Haga clic con el botón secundario en Label1 y, a continuación, haga clic en propiedades. 5. Cambie la propiedad Text de Label1 a Enter OrderID. 6. Del mismo modo CustomerID.
para Label2,
cambie
la
propiedad Text de Label2 a Enter
7. Del mismo modo, cambie la propiedad Text de button1 a Order Details. 8. Cambie la propiedad Text de BUTTON2 a Order History. Amplíe los controles de botón para que todo el texto esté visible.
1.1.2 Para Administrar Los Clics Del Botón Por: Yox Chajon Joshua Isaac 1. Haga doble clic en Order Details en Form1 para crear el Button1 controlador de eventos y abrir el editor de código. 2. Escriba el código siguiente en el controlador Button1:
Página 160 de 221
3. Ahora haga doble clic en BUTTON2 en Form1 para crear el Button2 controlador de eventos y abrir el editor de código. 4. Escriba el código siguiente en el controlador Button2:
3. Inserción De Un Conjunto De Datos En Un Formulario Por: Morales Cifuente Ruby Abigail
1.1.1 CRUD En informática, CRUD es el acrónimo de "Crear, Leer, Actualizar y Borrar" (Create, Read, Update and Delete), que se usa para referirse a las funciones básicas en bases de datos o la capa de persistencia en un software. En pocas palabras, CRUD resume las funciones requeridas por un usuario para crear y gestionar datos. Varios procesos de gestión de datos están basados en CRUD, en los que dichas operaciones están específicamente adaptadas a los requisitos del sistema y de usuario, ya sea para la gestión de bases de datos o para el uso de aplicaciones. Para los
Página 161 de 221
expertos, las operaciones son las herramientas de acceso típicas e indispensables para comprobar. Para este paso vamos a crear un formulario con las siguientes características: Se agrega 5 botones que he nombrado así: • • • • •
Name: BtnConexion – Text: Conexión Name: BtnLeer – Text: Leer Name: BtnAgregar – Text: Agregar Name: BtnActualizar – Text: Actualizar Name: BtnEliminar – Text: Eliminar
Se agrega 3 cajas de texto que he nombrado así: • Name: TxtId • Name: TxtNombres • Name: TxtApellidos Se agregan 3 labels que les asigne los siguientes textos así: • Label1.text = Id • Label2.text= Nombres • Label3.text= Apellidos Se agrega 1 datagridview que he nombrado así: • Name: DGTabla Una vez terminado nuestro formulario debe tener una apariencia como la siguiente:
1.1.2 Create Por: Velásquez Chitay Josué Daniel La siguiente instrucción o sentencia SQL se utiliza para insertar los datos en una base de datos objetivo para su posible futuro uso. El siguiente botón que hemos le hemos dado el texto “Agregar”, será en la consulta SQL y el nombre del procedimiento que en este caso es “operaciones” y nos debe quedar así.
Página 162 de 221
1.1.3 Read La siguiente instrucción o sentencia SQL se utiliza para leer los datos en una base de datos previamente insertados mediante la función Create (Insert). El siguiente botón que hemos le hemos dado el texto “Leer”, será en la consulta SQL y el nombre del procedimiento que en este caso es “consulta” y nos debe quedar así.
1.1.4 Update La siguiente instrucción o sentencia SQL se utiliza para modificar los datos en una base de datos previamente insertados mediante la función Create (Insert). El siguiente botón que hemos le hemos dado el texto “Actualizar”, será en la consulta SQL y el nombre del procedimiento que en este caso es “operaciones” y nos debe quedar así.
1.1.5 Delete La siguiente instrucción o sentencia SQL se utiliza para eliminar los datos en una base de datos previamente insertados mediante la función Create (Insert). El siguiente botón que hemos le hemos dado el texto “Eliminar”, será en la consulta SQL y el nombre del procedimiento que en este caso es “operaciones” y nos debe quedar así
4. Uso De Conjunto De Datos Con Tablas De Una Relación PadreHijo Por: Orellana Sajquí Kevin Alexander El primer paso para crear una base de datos es planificar el tipo de información que se quiere almacenar en la misma, teniendo en cuenta dos aspectos: la información disponible y la información que necesitamos.
Página 163 de 221
Imagen: Como Crear una Base de Datos en Sql Server Fuente: https://codigosql.top/sql-server/como-crear-una-base-de-datos-en-sql-server/
La planificación de la estructura de la base de datos, en particular de las tablas, es vital para la gestión efectiva de la misma. El diseño de la estructura de una tabla consiste en una descripción de cada uno de los campos que componen el registro y los valores o datos que contendrá cada uno de esos campos.
Imagen: SQL Server Fuente: https://channel9.msdn.com/Tags/sql+server?page=5&lang=es
Los campos son los distintos tipos de datos que componen la tabla, por ejemplo: nombre, apellido, domicilio. La definición de un campo requiere: el nombre del campo, el tipo de campo, el ancho del campo, etc. Los registros constituyen la información que va contenida en los campos de la tabla, por ejemplo: el nombre del paciente, el apellido del paciente y la dirección de este.
Página 164 de 221
Imagen: Genera Reporte De Tablas De Sql Server Fuente: https://datoptim.com/reporte-tablas/
Generalmente los diferentes tipos de campos que se pueden almacenar son los siguientes: Texto (caracteres), Numérico (números), Fecha / Hora, Lógico (informaciones lógicas si/no, verdadero/falso, etc.), imágenes.
5. Vinculación A Datos De Los Controles De Un Formulario Por: Osuna Ortíz Enyenmbber Alexander En la mayoría de los casos, los dos formularios de una configuración de rastreo se basan en la misma tabla o consulta. Si ya tiene un par de formularios que quiere usar (uno de los cuales es una hoja de datos o un formulario de varios elementos y el otro un formulario de un solo elemento o de detalle), puede omitir esta sección. De lo contrario, use estos procedimientos para crearlos
6.
Creación De Formularios De Datos
Por: Pacheco Gil César Steven En informática, un formulario consta de un conjunto de Campos de datos solicitados por un determinado programa, los cuales se pueden almacenar para su procesamiento y posterior uso. Cada campo debe albergar un dato específico, por ejemplo, el campo "Nombre" debe rellenarse con un nombre personal; el campo "Fecha de nacimiento" debe aceptar una fecha válida, etc.
1.1.1 Modificación De Fila • • • •
En el Explorador de objetos, expanda la base de datos que contiene la vista y, a continuación, expanda Vistas. Haga clic con el botón derecho en la vista y seleccione Editar las primeras 200 filas. Quizás necesite modificar la instrucción SELECT en el panel SQL para devolver las filas que se modificarán. En el panel de Resultados, busque la fila que se va a cambiar o eliminar. Para eliminar la fila, haga clic con el botón derecho en ella y seleccione Eliminar. Para cambiar los datos de una o más columnas, modifique los datos de la columna.
Página 165 de 221
•
Para insertar una fila, desplácese hasta el final de las filas e inserte los nuevos valores.
1.1.2 Inserción de fila Inserte filas o columnas en una cuadrícula para agregar datos. Entre los tipos de filas y columnas se incluyen: •
Datos: miembros de dimensiones recuperadas de una conexión a base de datos. De forma predeterminada, el miembro de una fila o columna es el del nivel superior de la dimensión. Un símbolo # indica filas de datos, columnas o celdas.
•
Fórmula: valores basados en fórmulas. Normalmente se utilizan para calcular totales, promedios y varianzas en filas o columnas de datos. Un símbolo = # indica filas, columnas o celdas de fórmulas.
•
Texto: texto escrito en las celdas, o bien agregado de forma dinámica mediante una función de texto.
1.1.3 Borrado de fila Para borrar valores de algunas filas de una tabla podemos utilizarla sentencia DELETE FROM WHERE. Su formato es el siguiente: DELETE FROM nombre_tabla [WHERE condiciones]; En cambio, si lo que quisiéramos conseguir es borrar todas las filas de una tabla, entonces sólo tendríamos que poner la sentencia DELETE FROM, sin WHERE.
1.1.4 Enlace Visual Basic 2014 Y Sql Server 2012 Microsoft SQL Server es un sistema para la gestión de bases de datos producido por Microsoft basado en el modelo relacional. Microsoft SQLServer constituye la alternativa de Microsoft a otros potentes sistemas gestores de bases de datos como son Oracle, PostgreSQL o MySQL.
Para poder realizar una conexión desde VB.net, debemos de preparar labase de datos con un usuario y contraseña y asignarle los privilegios necesarios. Desde “SQL Server Management Studio” podemos realizar esta tarea de una manera fácil y sencilla.
Abrimos “SQL Server Management Studio” y una vez conectado al servidor añadimos un nuevo inicio de sesión, utilizamos la “Autenticacion de SqlServer”, en base de datos predeterminada seleccionamos la base de datos que queramos conectarnos, también definimos los permisos a la base de datos que utilizaremos en la conexión.
Página 166 de 221
Capítulo II 1.2 Linux Mint Por: Peinado Tepeu Elmer Anscelmo Linux Mint es una distribución de GNU/Linux comunitaria de origen franco-irlandesa basada en Ubuntu, y a su vez en Debian, que tiene por objetivo proveer "un sistema operativo moderno, elegante y cómodo que sea tanto poderoso como fácil de usar".
1.2.1 Preparación Para poder proceder a instalar Linux Mint primero es necesario que nuestro equipo o maquina virtual cuente con ciertos requerimientos. Requisitos para instalar Linux Mint: • • • •
512MB RAM (1GB recomendado). 9GB de espacio libre en disco (20GB recomendado). Tarjeta gráfica 800×600 de resolución mínima (1024×768 recomendada). DVD drive o puerto USB
Mint cuenta con distintas versiones, por lo que es importante investigar acerca de la versión a intalar antes de proceder, los requisitos anteriormente mencionados son propios de la versión 18.2 pero también es compatible con los requerimientos de muchas otras opciones, sin embargo existen otras que poseen unos requerimientos mayores para poder ser utilizadas sin mayor problema. Por ello el llamado a realizar una investigación previa a intalar una de estas versiones.
1.2.2 Instalación Instalar Linux Mint Cuando se arranca el equipo desde una memoria USB (o DVD), Linux Mint inicia una sesión en vivo. Se inicia sesión automáticamente con el usuario mint y en el escritorio se muestra un acceso directo al instalador:
Página 167 de 221 Fuente: https://linuxmint-installation-guide.readthedocs.io/es/latest/_images/cinnamon.png
La sesión en vivo es similar a una sesión normal de Linux Mint cuando está instalado de forma permanente en el equipo, pero con las siguientes excepciones: La sesión en vivo es más lenta (se carga desde un USB o un DVD en lugar de un SSD o HDD). Los cambios hechos en una sesión en vivo no son permanentes. No se escriben en la memoria USB (o DVD) y no afectan el sistema instalado usando el instalador. Algunas aplicaciones funcionan de manera diferente (o no funcionan) en la sesión en vivo (Timeshift, Flatpak, Administrador de actualizaciones, Pantalla de bienvenida, etc.). El nombre de usuario para la sesión en vivo es mint. Si se le pide una contraseña, pulse Enter. Para instalar Linux Mint: • •
Haga doble click en Instalar Linux Mint. Seleccione su idioma.
Fuente: https://linuxmint-installation-guide.readthedocs.io/es/latest/_images/installer-language.png
•
Si está conectado a Internet, marque la casilla para instalar los códecs multimedia.
Fuente: https://linuxmint-installation-guide.readthedocs.io/es/latest/_images/installer-internet.png
Página 168 de 221
Fuente: https://linuxmint-installation-guide.readthedocs.io/es/latest/_images/installer-codecs.png
•
Seleccione un tipo de instalación.
Fuente: https://linuxmint-installation-guide.readthedocs.io/es/latest/_images/installer-codecs.png
Si Linux Mint es el único sistema operativo que ejecutará en el equipo y se puede borrar todo la información del disco duro, seleccione Borrar disco e instalar Linux Mint. Si hay otro sistema operativo presente en el equipo, el instalador le mostrará la opción de instalar Linux Mint junto a él. Si escoge esta opción, el instalador redimensionará automáticamente el sistema operativo existente e instalará Linux Mint en el espacio hecho. Se instalará un menú de arranque para elegir entre ambos sistemas operativos cada vez que arranque el equipo.
Si desea gestionar las particiones o especificar qué particiones usar, seleccione Más opciones.
Página 169 de 221
Fuente: https://linuxmint-installation-guide.readthedocs.io/es/latest/_images/installer-partitions.png
Linux Mint precisa que una partición se monte en el directorio raíz / El sistema operativo Linux Mint (sin software adicional ni información personal) ocupa alrededor de 15GB. Asigne a esta partición un tamaño apropiado (100GB o más). Se recomienda ext4. Es el sistema de archivos Linux más popular.
Fuente: https://linuxmint-installation-guide.readthedocs.io/es/latest/_images/installer-partition.png
•
Seleccione la zona horaria
Fuente: https://linuxmint-installation-guide.readthedocs.io/es/latest/_images/installer-timezone.png
•
Seleccione la distribución del teclado
Página 170 de 221
Fuente: https://linuxmint-installation-guide.readthedocs.io/es/latest/_images/installer-keyboard.png
•
Introduzca los detalles del usuario
Fuente: https://linuxmint-installation-guide.readthedocs.io/es/latest/_images/installer-user.png
Su nombre puede ser su nombre real, pero no es imprescindible. Solo se utilizará localmente, en el salvapantallas y en la pantalla de inicio de sesión. El nombre de usuario es el que usará para iniciar sesión, y el nombre de su equipo es el que éste tendrá en la red. Para evitar fallos utilice sólo minúsculas, sin puntuación ni acentuación. Para proteger su información personal contra ataques locales (gente cerca de usted, o en el caso de que su equipo sea robado), marque la casilla Cifrar mi carpeta personal. Elija una contraseña segura.
•
Disfrute las diapositivas mientras Linux Mint se instala en su equipo.
Página 171 de 221
Fuente: https://linuxmint-installation-guide.readthedocs.io/es/latest/_images/installer-slideshow.png
Cando termine la instalación, haga click en Reiniciar ahora.
Fuente: https://linuxmint-installation-guide.readthedocs.io/es/latest/_images/installer-finished.png
El equipo comenzará el apagado y le pedirá que retire el disco USB (o DVD). Al reiniciar, el equipo debe mostrarle un menú de inicio o iniciar su sistema operativo Linux Mint recién instalado.
1.2.3 Comandos Básicos Por: Pasán de León Kateryn Yohana 1. comando pwd Usa el comando pwd para encontrar la ruta del directorio (carpeta) de trabajo actual en el que te encuentras. El comando devolverá una ruta absoluta (completa), que es básicamente una ruta de todos los directorios que comienzan con una barra diagonal (/) Un ejemplo de una ruta absoluta es /home/nombredeusuario.
Fuente: https://codingornot.files.wordpress.com/2016/05/comando-pwd.png
2. comando cd
Página 172 de 221
Para navegar por los archivos y directorios de Linux, usa el comando cd. Te pedirá la ruta completa o el nombre del directorio, dependiendo del directorio de trabajo actual en el que te encuentres. Supongamos que estás en /home/nombredeusuario/Documentos y deseas ir a Fotos, un subdirectorio de Documentos. Para hacerlo, simplemente escribe el siguiente comando: cd Fotos. Otro escenario es si deseas ir a un directorio completamente nuevo, por ejemplo, /home/nombredeusuario/Peliculas. En este caso, debes escribir cd seguido de la ruta absoluta del directorio: cd /home/ nombredeusuario/Peliculas. Hay algunos atajos para ayudarte a navegar rápidamente: cd .. (con dos puntos) para ir un directorio hacia arriba cd para ir directamente a la carpeta de inicio cd- (con un guión) para ir al directorio anterior Como nota al margen, el shell de Linux distingue entre mayúsculas y minúsculas. Por lo tanto, debes escribir el nombre del directorio de forma exacta.
Fuente: https://phhsnews.com/img/how-to-2018/how-to-define-base-directory-for-cd-command-in-linux.png
3. comando ls El comando ls se usa para ver el contenido de un directorio. Por defecto, este comando mostrará el contenido de tu directorio de trabajo actual. Si deseas ver el contenido de otros directorios, escribe ls y luego la ruta del directorio. Por ejemplo, ingresa ls/home/nombredeusuario/Documentos para ver el contenido de Documentos. Hay variaciones que puedes usar con el comando ls: ls -R también listará todos los archivos en los subdirectorios ls -a mostrará los archivos ocultos ls -al listará los archivos y directorios con información detallada como los permisos, el tamaño, el propietario, etc.
Página 173 de 221
Fuente: https://elblogdeliher.com/wp-content/uploads/2015/09/ls-ubuntu-3.jpg
4. comando cat cat (abreviatura de concatenate, en inglés) es uno de los comandos más utilizados en Linux. Se utiliza para listar el contenido de un archivo en la salida estándar (sdout). Para ejecutar este comando, escribe cat seguido del nombre del archivo y su extensión. Por ejemplo: cat archivo.txt. Aquí hay otras formas de usar el comando cat: cat > nombredearchivo crea un nuevo archivo. cat nombredearchivo1 nombredearchivo2>nombredearchivo3 une dos archivos (1 y 2) y almacena la salida de ellos en un nuevo archivo (3) convertir un archivo a mayúsculas o minúsculas, cat nombredearchivo | tr a-z A-Z> salida.txt
Fuente: https://1.bp.blogspot.com/-NcbO8QlqM6s/XXKHFVrcG0I/AAAAAAAADo/ZRyD4wt2d8QTwszzGVHwGOWeyZrCP24EwCLcBGAs/s1600/Captura%2Bde%2Bpantalla%2Bde%2B2019-09-06%2B18-18-44.png
5. comando cp Usa el comando cp para copiar archivos del directorio actual a un directorio diferente. Por ejemplo, el comando cp escenario.jpg /home/nombredeusuario/Imagenes crearía una copia de escenario.jpg (desde tu directorio actual) en el directorio de Imagenes.
Fuente: https://i0.wp.com/static1.makeuseofimages.com/wp-content/uploads/2020/12/cp-command-linux.png?w=800&ssl=1
Página 174 de 221
6. comando mv El uso principal del comando mv es mover archivos, aunque también se puede usar para cambiar el nombre de los archivos. Los argumentos en mv son similares al comando cp. Debes escribir mv, el nombre del archivo y el directorio destino. Por ejemplo: mv archivo.txt /home/nombredeusuario/Documentos. Para cambiar el nombre de los archivos, el comando de Linux es mv nombreviejo.ext nombrenuevo.ext
Fuente: https://www.solvetic.com/uploads/monthly_09_2019/tutorials-7463-0-25085500-1568363977.png
7. comando mkdir Usa el comando mkdir para crear un nuevo directorio: si escribes mkdir Musica, creará un directorio llamado Musica. También hay comandos adicionales de mkdir: Para generar un nuevo directorio dentro de otro directorio, usa este comando básico de Linux mkdir Musica/Nuevoarchivo Usa la opción p (padres) para crear un directorio entre dos directorios existentes. Por ejemplo, mkdir -p Musica/2020/Nuevoarchivo creará el nuevo archivo «2020».
8. comando rmdir Si necesitas eliminar un directorio, usa el comando rmdir. Sin embargo, rmdir solo te permite eliminar directorios vacíos.
9. comando rm El comando rm se usa para eliminar directorios y el contenido dentro de ellos. Si solo deseas eliminar el directorio, como alternativa a rmdir, usa rm -r. Nota: Ten mucho cuidado con este comando y verifica en qué directorio te encuentras. Este comando elimina todo y no se puede deshacer.
Página 175 de 221
Fuente: https://phhsnews.com/img/how-to-2018/how-to-remove-multiple-subdirectories-with-one-linux-command.png
10. comando touch El comando touch te permite crear un nuevo archivo en blanco a través de la línea de comando de Linux. Como ejemplo, ingresa touch /home/nombredeusuario/Documentos/Web.html para crear un archivo HTML titulado Web en el directorio Documentos.
11. comando locate Puedes usar este comando para localizar un archivo, al igual que el comando de búsqueda en Windows. Además, el uso del argumento -i junto con este comando hará que no distinga entre mayúsculas y minúsculas, por lo que puedes buscar un archivo incluso si no recuerdas su nombre exacto. Para buscar un archivo que contenga dos o más palabras, usa un asterisco (*). Por ejemplo, el comando locate -i escuela*nota buscará cualquier archivo que contenga la palabra «escuela» y «nota», ya sea en mayúsculas o minúsculas.
Fuente: https://www.solvetic.com/uploads/monthly_04_2018/tutorials-9832-0-54426100-1522837798.png
12. comando find Similar al comando locate, usando find también buscas archivos y directorios. La diferencia es que usas el comando find para ubicar archivos dentro de un directorio dado. Como ejemplo, el comando find /home/ -name notas.txt buscará un archivo llamado notas.txt dentro del directorio de inicio y sus subdirectorios. Otras variaciones al usar find son: Para buscar archivos en el directorio actual, find . -name notas.txt Para buscar directorios, / -type d -name notes.txt
Página 176 de 221
Fuente: https://www.solvetic.com/uploads/monthly_04_2018/tutorials-9832-0-87313100-1522837798.png
13. comando grep Otro comando básico de Linux que sin duda es útil para el uso diario es grep. Te permite buscar a través de todo el texto en un archivo dado. Para ilustrar, grep azul notepad.txt buscará la palabra azul en el archivo del bloc de notas. Las líneas que contienen la palabra buscada se mostrarán.
14. comando sudo Abreviatura de «SuperUser Do» (SuperUsuario hace), este comando te permite realizar tareas que requieren permisos administrativos o raíz. Sin embargo, no es aconsejable usar este comando para el uso diario, ya que podría ser fácil que ocurra un error si haces algo mal.
Fuente: http://cursosdedesarrollo.com/wp-content/uploads/2019/10/Captura-de-pantalla-de-2019-10-25-03-15-22.png
15. comando df Usa el comando df para obtener un informe sobre el uso del espacio en disco del sistema, que se muestra en porcentaje y KB. Si deseas ver el informe en megabytes, escribe df -m.
16. comando du Por: Pérez Hernández Angelo Javier Si deseas verificar cuánto espacio ocupa un archivo o un directorio, el comando du (Uso del disco, en inglés) es la respuesta. Sin embargo, el resumen de uso del disco mostrará números de bloque de disco en lugar del formato de tamaño habitual. Si deseas verlo en bytes, kilobytes y megabytes, agrega el argumento -h a la línea de comando.
Página 177 de 221
17. comando head El comando head se usa para ver las primeras líneas de cualquier archivo de texto. De manera predeterminada, mostrará las primeras diez líneas, pero puedes cambiar este número a tu gusto. Por ejemplo, si solo deseas mostrar las primeras cinco líneas, escribe head -n 5 nombredearchivo.ext.
18. comando tail Este tiene una función similar al comando head, pero en lugar de mostrar las primeras líneas, el comando tail mostrará las últimas diez líneas de un archivo de texto. Por ejemplo, tail -n nombredearchivo.ext.
Fuente: https://www.hebergementwebs.com/image/67/resize-6732f22cbd4847e9ba2bad7b2cd29e24.png/como-usarel-comando-tail-en-linux-14.png
19. comando diff Para abreviar diferencia, el comando diff compara el contenido de dos archivos línea por línea. Después de analizar los archivos, genera las líneas que no coinciden. Los programadores a menudo usan este comando cuando necesitan hacer modificaciones al programa en lugar de reescribir todo el código fuente. La forma más simple de usar este comando es diff archivo1.ext archivo2.ext
20. comando tar El comando tar es el comando más utilizado para guardar múltiples archivos en un tarball, un formato de archivo de Linux común que es similar al formato zip, con compresión opcional. Este comando es bastante complejo con una larga lista de funciones, como agregar nuevos archivos a un archivo existente, enumerar el contenido de un archivo, extraer el contenido de un archivo y muchos más.
21. comando chmod chmod es otro comando de Linux, utilizado para cambiar los permisos de lectura, escritura y ejecución de archivos y directorios.
Página 178 de 221
22. comando chown En Linux, todos los archivos son propiedad de un usuario específico. El comando chown te permite cambiar o transferir la propiedad de un archivo al nombre de usuario especificado. Por ejemplo, chown usuariolinux2 archivo.ext hará que usuariolinux2 sea el propietario del archivo.ext.
23. comando jobs El comando jobs mostrará todos los trabajos actuales junto con sus estados. Un trabajo es básicamente un proceso iniciado por el shell.
24. comando kill Si tienes un programa que no responde, puedes cerrarlo manualmente utilizando el comando kill. Enviará una cierta señal al programa que se está ejecutando mal y le indica a la aplicación que finalice. Hay un total de sesenta y cuatro señales que puedes usar, pero las personas generalmente solo usan dos señales: SIGTERM (15): solicita que un programa deje de ejecutarse y te da algo de tiempo para guardar todo tu progreso. Si no especificas la señal al ingresar el comando kill, se utilizará esta señal. SIGKILL (9): obliga a los programas a detenerse inmediatamente. El progreso no guardado se perderá. Además de conocer las señales, también debes conocer el número de identificación del proceso (PID) del programa que deseas detener (kill). Si no conoces el PID, simplemente ejecute el comando ps ux. Después de saber qué señal deseas usar y el PID del programa, ingresa la siguiente sintaxis: kill [opción de señal] PID.
25. comando ping Usa el comando ping para verificar tu estado de conectividad a un servidor. Por ejemplo, simplemente ingresando ping google.com, el comando verificará si puedes conectarte a Google y también medirá el tiempo de respuesta.
Página 179 de 221 Fuente: https://www.profesionalreview.com/wp-content/uploads/2017/01/Captura-de-pantalla-de-2017-01-15-15-42-31.png
26. comando wget La línea de comandos de Linux es muy útil: incluso puedes descargar archivos de Internet con la ayuda del comando wget. Para hacerlo, simplemente escribe wget seguido del enlace de descarga.
27. comando uname El comando uname, abreviatura de Nombre de Unix, imprimirá información detallada sobre tu sistema Linux, como el nombre de la máquina, el sistema operativo, el núcleo, etc.
28. comando top Como un terminal equivalente al Administrador de tareas en Windows, el comando top mostrará una lista de los procesos en ejecución y la cantidad de CPU que utiliza cada proceso. Es muy útil monitorear el uso de los recursos del sistema, especialmente para saber qué proceso debe terminarse porque consume demasiados recursos.
29. comando history Cuando hayas estado utilizando Linux durante un cierto período de tiempo, notarás rápidamente que puedes ejecutar cientos de comandos todos los días. Como tal, ejecutar el comando history es particularmente útil si deseas revisar los comandos que ingresaste anteriormente.
30. comando man ¿Confundido sobre la función de ciertos comandos de Linux? No te preocupes, puedes aprender fácilmente cómo usarlos directamente desde el shell de Linux mediante el comando man. Por ejemplo, al ingresar man tail se mostrarán las instrucciones manuales del comando tail.
31. comando echo Este comando se usa para mover algunos datos a un archivo. Por ejemplo, si deseas agregar el texto «Hola, mi nombre es John» en un archivo llamado nombre.txt, debes escribir echo Hola, mi nombre es John >> nombre.txt
Página 180 de 221 Fuente: https://i.imgur.com/FM94KlW.png
32. comando zip, unzip Usa el comando zip para comprimir tus archivos en un archivo zip y use el comando unzip para extraer los archivos comprimidos de un archivo zip.
Fuente: https://www.solvetic.com/uploads/monthly_05_2019/tutorials-9832-0-87138600-1558080777.png
33. comando hostname Si deseas conocer el nombre de tu host/red, simplemente escribe hostname. Agregar un I al final mostrará la dirección IP de tu red.
34. comando useradd, userdel Dado que Linux es un sistema multiusuario, esto significa que más de una persona puede interactuar con el mismo sistema al mismo tiempo. useradd se usa para crear un nuevo usuario, mientras que passwd agrega una contraseña a la cuenta de ese usuario. Para agregar una nueva persona llamada John, escribe useradd John y luego para agregar su contraseña, escribe passwd 123456789. Eliminar un usuario es muy similar a agregar un nuevo usuario. Para eliminar la cuenta de usuario, escribe userdel NombredeUsuario
1.4 Instalación de Libre Office Por: Pérez Tipáz Gerardo Adolfo Es un software de automatización de oficina gratuito, que incluye un procesador de texto, una hoja de cálculo y un editor de presentaciones. Fue promovido y desarrollado por la misma comunidad bajo un proyecto llamado The Document Foundation de una organización sin fines de lucro. Instalarlo es incluso más sencillo que usarlo, únicamente tienes que seguir los siguientes pasos: 1. Descarga el programa en tu ordenador y puedes alojarlo en el escritorio. Puedes conseguirlo en el siguiente link (Click aquí)
Página 181 de 221
Imagen Creada por Ruby Morales 1.1. Elegimos la versión que necesitemos
Imágenes creadas por Ruby Morales 1.2. Abrimos la terminal y colocamos el código “sudo apt-get remove libreofficecore”, poner nuestra contraseña y si deseamos continuar colocamos “S” Fuente: Instalar Libre Office en Mint
1.3. Después de que termine el proceso, colocamos el 2 codigo para eliminar archivos previos de configuración:
Página 182 de 221
“sudo apt-get remove –purge libreoffice-core”
Fuente: Instalar Libre Office en Mint 1.4. Escogemos la versión de nuestra maquina y descargamos
Imagen creada por Ruby Morales
1.5. Nos redireccionara a una pagina donde podemos escoger la versión Imagen creada por Ruby Morales
Página 183 de 221
1.6. También descargamos los archivos para tener la versión en español y Offline, estos archivos están la pagina que redirecciona al descargar la versión. Imagen creada por Ruby Morales
2. Buscamos los archivos en Descargas y descomprimimos Imagen creada por Ruby Morales 2.1. Ahora que tenemos descomprimido los archivos, abriremos la carpeta con el instalador principal y abrimos el archivo “DEBS” en la terminal Imagen creada por Ruby Morales
2.2. Agregamos el código que se muestra y nuestra contraseña y esperamos a
que termine el proceso y cerramos la terminal
Imagen creada por Ruby Morales
Página 184 de 221
2.3. Hacemos el mismo proceso con la carpeta otras dos carpetas, dejando finalizar los procesos para que todo esté bien instalado y podemos encontrar los programas en el inicio
Imagen creada por Ruby Morales 3. Y como podemos ver tiene marca de error en la ortografía
Imagen creada por Ruby Morales
1.5 Paquetes de Linux Mint (instalación) Por: Rámirez Dimatteo Ricardo Andres Aunque esta no es una clasificación estricta, esta es la forma en que veo que se habla de estos paquetes. Son paquetes de software de uso general, suficientes para despertar el interés de la gente, y pueden ser utilizados por el público en general a través de la distribución. 1. PLAYON:
Página 185 de 221
1.1. Para instalar el programa abrimos la terminar e insertamos el código de la imagen, además de ingresar nuestra contraseña
Imagen creada por Ruby Morales 1.2. Luego del proceso nos preguntaran si deseamos continuar, Si deseamos continuar, ingresamos “S”.
Imagen Creada por Ruby Morales 1.3. Después del proceso cerramos terminal y vamos a inicio, buscamos nuestra aplicación y ya esta lista para utilizarla.
Fuente: PlayOnLinux
1.6 Configuración de Entorno Por: Ramírez Solorsano Jefry Adolfo Cuando trabajamos en nuestro equipo normalmente nos gusta hacer configuraciones y personalizar un poco el entorno en el que se trabaja. Veremos algunas configuraciones para que se vea un poco mejor nuestro equipo
1. Papelera
Página 186 de 221
Vamos a la parte de inicio y seleccionamos configuración del Sistema.
Imagen creada por Ruby Morales Y activamos la Papelera en el escritorio
Imagen Creada por Ruby Morales 2. Agregar Iconos al panel Nos vamos a inicio y vamos a la aplicación que queramos agregar, en este caso “Libre Office Writter” y seleccionamos “Añadir al panel
Página 187 de 221
Imagen Creado por Ruby Morales 3. Agregar iconos Al Escritorio Esto lo hacemos para tener un acceso directo al estar en el inicio. Lo logramos al hacer clic sobre la aplicación y elegimos la opción de “Añadir al Escritorio”
Imagen Creada por Ruby Morales
Página 188 de 221
Capítulo III MARKETING: Teoría Del Color: Es un grupo de reglas básicas en la mezcla de colores para conseguir el efecto deseado combinándolos. Es sumamente útil dentro del Marketing y la publicidad debido a que ayuda a crear una mejor comunicación a la vez que armoniza y empatiza los valores de la marca con su público. La teoría del color no es lo mismo que la psicología del color. La teoría del color habla sobre los efectos ópticos y de composición de los colores. Y la psicología del color habla sobre el comportamiento que tenemos al percibir un color. En nuestro ojo tenemos tres tipos de conos que nos determinan los llamados colores primarios de luz. Son el rojo, el verde y el azul (Modelo RGB). La combinación de todos estos colores nos da la gama cromática completa y, si los mezclamos los tres, el resultado es el blanco y la ausencia de los tres nos genera el negro. En pintura, sin embargo, trabajamos con un modelo diferente. Los llamaríamos colores pigmento e interactúan de forma distinta a los colores luz. Los colores pigmento primarios son el amarillo, el cían y el magenta (Modelo CMYK). La mezcla de los tres nos genera el negro. La rueda de color es una herramienta clave. Este círculo cromático muestra diferentes colores ordenados y su relación entre sí. El círculo de color está construido alrededor de colores primarios, secundarios y terciarios. Los colores primarios son aquellos que no se pueden obtener mediante la mezcla de ningún otro color, mientras que los colores secundarios y terciarios se crean combinando los colores primarios y secundarios respectivamente.
Imagen: Ejemplo De Rueda De Color. Fuente: https://unayta.es/wp-content/uploads/2016/03/116.jpg
Página 189 de 221
Composición: Se compone por el movimiento y la luz. Los colores cambian dependiendo sus perspectivas y volúmenes. Pero sobre todo hay un cambio grande en cuanto surgen los degradados de los colores. El color se degrada según se alejan los objetos, esto provoca una sensación de profundidad en el espectador. El contraste inflige mucho a la hora de componer el color, intensifica el color y lo distingue entre los demás. De igual manera podemos referirnos al contraste de luminosidad, o de claro-oscuro, que ocurre cuando tenemos un color oscuro frente a uno claro. La mayor parte de los colores pueden definirse y crearse por adición de tres colores, llamados colores o componentes principales (azul, verde y rojo) o por sustracción de sus complementarios (cian o aguamarina, amarillo y magenta) también denominados componentes primarios de los pigmentos o colorantes. Debemos saber que una cosa es la intensidad del color que registra nuestro ojo, otra cosa es el registro que hace la película o sensor de la cámara digital y otra cosa también es como tengamos configurada la exposición en la cámara fotográfica. Son todas variantes que el fotógrafo profesional debe saber y controlar en el momento de la toma. Se puede artificialmente lograr que un color sea más intenso, más puro, más vivo o más apagado desde el manejo de la cámara. Obviamente dejando de lado las técnicas de post producción que se pueden hacer de un archivo digital con algún programa de edición.
Imagen: Ejemplo De Composición. Fuente: https://maruaprosof.com/wp-content/uploads/2015/06/circulocromatico.jpg
Combinación: De acuerdo a la teoría del color, los colores primarios no se pueden formar por ningún otro. Los colores secundarios surgen de la combinación de dos colores primarios. Y los colores terciarios se componen con la combinación de un color primario y un color secundario.
Página 190 de 221
Los colores primarios pueden tener sus derivados dependiendo de su tono, es por ello que las combinaciones se representan por medio del Circulo Cromático. El modelo RGB es el modelo utilizado por medios digitales como la televisión, las páginas webs y las pantallas de las computadoras. Sin embargo, el modelo RGB, previa a la era digital, ya tenía una teoría sólida, basada en la percepción humana de los colores. ¿Qué significan las siglas RGB? Las siglas RGB representan las iniciales de los colores rojo, azul y verde, en su traducción al inglés, red, blue and Green, haciendo referencia a los colores primarios de este modelo. El modelo RGB está basado en la “síntesis aditiva”, es decir que, se puede obtener cualquier color a través de los colores primarios y todos estos superpuestos dan como resultado el color blanco, mientras que el negro es la ausencia total de color.
Imagen: Ejemplo De Combinación Fuente: https://s1.significados.com/foto/modelo-rgb_bg.jpg
Psicología: La psicología del color estudia lo que producen los colores en las emociones y conductas de las personas. Los colores pueden tener diferentes significados que dependerán de factores como nuestra educación, cultura, etc. Los significados del color en el Marketing son diferentes a los que están relacionados con la teoría de los colores artísticos. Azul: Da la sensación de seguridad y confianza. Rojo: Crea sensación de urgencia. Estimula el apetito. Verde: Relaja. Se le asocia con la riqueza y la fertilidad. Amarillo: Representa optimismo y juventud. Llama la atención. Naranja: Llama a la acción. Es amigable, confiable y alegre.
Página 191 de 221
Morado: Representa calma, imaginación y creatividad. Rosa: Transmite inocencia, feminidad y generosidad. Café: Da sensación de constancia, solidez y amor a lo material. Blanco: Representa salud, simpleza y minimalismo. Negro: Transmite seriedad, estatus y alta calidad. Tal vez el área en el que más se aplique la psicología del color es en marketing. Es habitual creer que las decisiones que tomamos a la hora de comprar se basan en un análisis racional, pero, en muchas ocasiones, nuestras emociones son las que deciden por nosotros.
Imagen: Ejemplo De Psicología Del Color Fuente: https://static-cse.canva.com/blob/203478/03-psicologia-del-color.png
Teoría Del Consumidor: La teoría del consumidor es la perspectiva microeconómica destinada a conocer el comportamiento de los consumidores en su decisión de satisfacer sus preferencias y necesidades. El consumidor es un agente económico que demanda y disfruta bienes y servicios económicos, satisfaciendo sus necesidades. En economía se sabe de la existencia de una serie de factores que determinan la demanda de estos bienes y servicios. Los individuos deben decidir su consumo de bienes y servicios. Ahora bien, esta decisión de consumo es dado un precio y una restricción presupuestaria. La teoría del consumidor procura saber cómo los consumidores prefieren distribuir su ingreso entre un conjunto de bienes y servicios logrando alcanzar la satisfacción más alta posible. De manera que, la teoría del consumidor engloba la interacción de preferencias de los consumidores, las combinaciones preferentes de bienes que reportan igual satisfacción y la totalidad posible de bienes que se puede agotar con un ingreso dado.Según la teoría, la asignación de bienes por la que el consumidor debe optar es el punto de contacto entre la restricción presupuestaria y la curva de indiferencia tangente al grado de utilidad.
Página 192 de 221
Imagen: Ejemplo De La Teoría Del Consumidor. Fuente: https://lh4.googleusercontent.com/proxy/UCOHK_RtrmNJTlVRY0Ko2ezpD7Nl39Te1y1lvylt 6YalVdsyYnq2lDKtvOZfVXRGx63Thi6ndeuKTW6elS0t0ABtnJlKJ7PBz_rSRXLYq-8=w1200h630-p-k-no-nu
Mercado: La teoría del mercado es la teoría económica que se refiere a la determinación de los precios y cantidades a producir de bienes y servicios, y los precios y usos de los factores de producción. Un mercado es una de las numerosas diversidades de instituciones, sistemas, procedimientos, infraestructuras y relaciones sociales, mediante las cuales participan las partes en un intercambio. Existe un mercado cada vez que los miembros individuales de una sociedad tienen un contacto lo suficientemente cercano entre sí, como para estar conscientes de las numerosas oportunidades de intercambio y, además, tienen la libertad de aprovecharlas. Se encuentran diferentes tipos de mercados como: Mercado de consumo: En este campo se enmarca un amplio catálogo de productos y servicios que cubren las necesidades de sus clientes. El mercado no solo se basa en el consumo de los productos, sino también en los servicios. Mercado online: Los beneficios de este mercado es la interacción de las redes sociales que multiplican la velocidad en la inmediatez de la difusión de un mensaje gracias a la actividad de compartir ese contenido que produce un movimiento en cadena. Mercado ambiental: El marketing verde centra el valor diferencial de sus campañas en el propósito de vincular la imagen de marca con este mensaje de responsabilidad ambiental. Mercado Geográfico: Puede ser un mercado internacional, nacional, regional y local. El alcance de las acciones de marketing está relacionado con las dimensiones de la empresa y su espacio de interacción directa.
Página 193 de 221 Imagen: Ejemplo De Mercado. Fuente: https://userscontent2.emaze.com/images/a2b21177-8440-4515-bad73f6791c549e7/9d5977d8da94669493c2aac3d980e507.png
Grupo: Marketing Digital trabaja con el concepto de personas, basados en sus consumidores reales, y que representan a su comprador ideal. A la hora de identificar el grupo de personas como nuestro público debemos tener en cuenta las siguientes variables: • Selección del mercado en el que vamos a operar • Segmentación del mercado • Posicionamiento de marca, producto o servicio Está basada en datos reales sobre el comportamiento y las características demográficas de tus clientes, así como en una creación de sus historias personales, motivaciones, objetivos, retos y preocupaciones. Esta pasa justamente por el contacto con tu público objetivo, de manera que en un rápido análisis puedas identificar características comunes entre los potenciales compradores. Un consejo importante es enfocarse tanto en clientes satisfechos como insatisfechos. En ambos casos, seguramente aprenderás algo sobre la percepción de tu producto y qué desafíos tus clientes están enfrentando.
Imagen: Ejemplo De Grupo. Fuente: https://www.thepowermba.com/es/wp-content/uploads/2019/01/Dise%C3%B1o-sint%C3%ADtulo-17-min.png
Segmento: La segmentación de mercados es una de las estrategias más eficientes para llegar correctamente a un grupo o una determinada audiencia específica. Esta estrategia facilita el proceso de personalización de las campañas, el enfoque en lo necesario y la agrupación de consumidores con intereses parecidos para dirigirse de manera rentable a ellos. La segmentación permite personalizar las campañas y brinda un enfoque para impactar a aquellos consumidores potenciales que se parecen a la marca.
Página 194 de 221
La segmentación, normalmente, se divide en cuatro grandes subcategorías: Comportamiento: La mayor parte de las veces relacionado con necesidades específicas y cómo se usa un determinado producto. Ubicación: País, región, comunidad, provincia, ciudad, pueblo, área, etc. Demografía: Edad o etnicidad. Psicografía: Estilo de vida y opinión. Si bien estos cuatro tipos de segmentación están bien definidos y son fácilmente distinguibles, son generalmente superficiales y requieren un filtrado posterior para que puedan obtenerse Insights reales. Por ejemplo, hombres de edad media y mujeres jóvenes puede que compartan interés por zapatillas de atletismo, aunque por razones diferentes, como la comodidad, la moda o el deporte. Estos no pueden definirse simplemente usando las categorías anteriormente mencionadas. Para que sea realmente útil, debemos profundizar más en cada segmento.
Imagen: Ejemplo De Segmento. Fuente: https://www.masquenegocio.com/wp-content/uploads/2015/08/mercadosegmentacion-874x492.jpg
Teoría De Los Mercados: La teoría del mercado entiende que los precios son los principales canales de información y de asignación de recursos. Cuando los precios surgen de la libre interacción entre compradores (demanda) y vendedores (oferta) en un mercado perfecto, la asignación de recursos será la más eficiente posible, según la teoría económica generalmente aceptada. Lamentablemente, en los estudios tradicionales de economía, las investigaciones para averiguar las fallas de mercado no buscan salirse de los métodos de investigación que son comparables a los métodos de la economía neoclásica, es decir, se investigan usualmente situaciones que son posibles modelizar matemáticamente. Sin embargo, sería muy fructífero para la ciencia económica que se investigue más sobre otro tipo de situaciones, que necesariamente deben incorporar elementos de otras disciplinas, como la historia, psicología y sociología.
Página 195 de 221
Imagen: Ejemplo De Teoría De Los Mercados. Fuente: https://1.bp.blogspot.com/PeYLq_gyQLo/W5z50Aa4P0I/AAAAAAAAFII/cq7x3MXRfHEX6moz2rUkA2BGZV6LmlRIQCLcBGAs/ s1600/mercado%2Beficiente_opt.jpg
Oferta: La oferta es el conjunto de ofertas hechas en el mercado por los bienes y servicios a la venta. La curva de oferta recoge la localización de los puntos correspondientes a las cantidades ofertadas de un bien o servicio particular a diferentes precios. Esta curva muestra una relación directa entre la cantidad ofertada y el precio, dando una pendiente positiva. La razón por la que esto existe se conoce como la ley de la oferta: caeteris paribus, y considerando bienes ordinarios, cuanto mayor sea el precio, mayor será la cantidad ofertada, y viceversa. Las ofertas se dividen en: Oferta instantánea: En este mercado el precio se establece rápidamente y se encuentra determinado por el precio de reserva, último precio el cual el vendedor está dispuesto a vender mercancías. De corto plazo: El precio no se establece tan rápidamente, ya que se encuentra determinado sobre todo por el costo de producción de las mercancías. De largo plazo: El precio se establece con lentitud, todos los costos cambian o pueden cambiar de acuerdo a como se utilicen los recursos.
Página 196 de 221 Imagen: Ejemplo De Oferta. Fuente: https://www.sistemaimpulsa.com/blog/wp-content/uploads/2019/10/1-41696x404.jpg
Demanda: La ley de demanda refleja la relación entre la demanda que existe de un bien en el mercado y la cantidad del mismo que es ofrecido en base al precio que se establezca. Su estudio permite deducir de modo sencillo las cantidades de los productos que en un mercado son accesibles para los consumidores a varios niveles de precios. Existen además otras variables condicionantes de la demanda. Estas son, por ejemplo, la renta, las preferencias o conductas de los individuos, las modas y la existencia de bienes sustitutivos o complementarios. Por lo general, esta relación entre precio y cantidad es inversamente proporcional. Habitualmente se representa la cantidad demandada como una variable dependiente del precio, pero, de hecho, depende además de la renta de los individuos, los precios de otros bienes y otros factores diversos. La Ley de la demanda es una relación negativa o inversa entre el precio de un bien y la cantidad demandada de dicho bien. Cuando el precio de un bien aumenta, los consumidores están cada vez menos dispuestos a pagar ese mayor precio por ese determinado bien, lo que genera que la demanda del mismo decaiga. Y sucede completamente lo contrario cuando el precio de ese bien disminuye. En este caso, ante un precio menor, los demandantes están más dispuestos a consumir ese determinado bien lo que hace que la cantidad demandada se incremente.
Imagen: Ejemplo De Demanda. Fuente: http://img.over-blog-kiwi.com/1/59/47/79/20150606/ob_8543bb_pic024b.jpg
Precio: El precio produce ingresos; los otros producen costos. Se puede modificar rápidamente, a diferencia de las características de los productos. Al mismo tiempo, la competencia de precios es el problema más grave que enfrentan las empresas. Pese a ello, muchas empresas no manejan bien la fijación de precios.
Página 197 de 221
El precio es la cantidad necesaria para adquirir un bien, un servicio u otro objetivo. Suele ser una cantidad monetaria. Para que se produzca una transacción el precio tiene que ser aceptado por los compradores y vendedores. Por ello, el precio es un indicador del equilibrio entre consumidores y ahorradores cuando compran y venden bienes o servicios. Existe una teoría económica que sirve para representar ese equilibrio entre compradores y vendedores. Es la llamada ley de la oferta y la demanda. Los errores más comunes: • La fijación de los precios está demasiado orientada a los costos. • Los precios no se modifican con la frecuencia suficiente para aprovechar los cambios del mercado. • El precio se fija con independencia del resto de la mezcla de marketing y no como un elemento intrínseco de la estrategia de posicionamiento en el mercado.
Imagen: Ejemplo De Precio. Fuente: https://economipedia.com/wp-content/uploads/precio.jpg
Teoría Del Conocimiento: La Teoría del conocimiento es una rama de la filosofía, centrada en el estudio del conocimiento humano. Dependiendo de la perspectiva académica específica, este término puede considerarse sinónimo de la gnoseología, dedicada al estudio de la naturaleza del conocimiento, su origen y sus límites. En otros casos puede usarse como sinónimo a la epistemología, que se centra en el estudio de las circunstancias históricas, psicológicas o sociológicas en las que se obtiene el conocimiento, así como las estrategias empleadas para justificarlo o invalidarlo. El conocimiento humano es un tema abordable desde muchas aristas posibles y cuya naturaleza es difícil de asir, aunque mucho más fácil de clasificar. De esta manera, el estudio del conocimiento, por un lado, reflexiona sobre sus características y sus condiciones de aparición. Por otro lado, esta disciplina ordena el conocimiento en base a sus limitaciones, requisitos formales o mecanismos que empleamos para convalidarlos y diferenciar el conocimiento de la fe, de la fantasía o del error.
Página 198 de 221
Así, es posible hablar de conocimiento científico, por ejemplo, cuando se rige por las exigencias del método científico; de conocimiento teológico, cuando se trata de los saberes en torno a lo religioso; de conocimiento artístico, cuando se adquiere mediante el ejercicio del talento y de los mecanismos de representación conocidos por el ser humano.
Imagen: Ejemplo De Teoría Del Conocimiento. Fuente: https://concepto.de/wp-content/uploads/2019/06/teoria-del-conocimientognoseologia-epistemologia-filosofia-e1561902198564.jpg
Dato: Es una representación simbólica (numérica, alfabética, algorítmica, espacial, etc.) de un atributo o variable cuantitativa o cualitativa. Los datos describen hechos comprobados, sucesos y entidades. Es un valor o referente que recibe el computador por diferentes medios, los datos representan la información que el programador manipula en la construcción de una solución o en el desarrollo de un algoritmo. Es importa tener en cuenta que el dato no tiene sentido en sí mismo, sino que se utiliza en la toma de decisiones o en la realización de cálculos a partir de un procesamiento adecuado y teniendo en cuenta su contexto. Por lo general, el dato es una representación simbólica o un atributo de una entidad. En el campo de las humanidades, los datos se consideran como una expresión mínima de contenido respecto a un tema. El conjunto de los datos relacionados constituye una información. En este sentido es interesante que demos a conocer la existencia de lo que se conoce como banco de datos. Este es un término que se utiliza para referirse al conjunto de información que sobre una determinada materia se ha conseguido recopilar y que puede ser utilizado por varias personas. Es importante subrayar, además de todo lo expuesto, que a lo largo de la geografía mundial existen una serie de países que utilizan el término datos con otra acepción. Concretamente se trata de naciones de Oriente que cuando hablan de dato están haciendo referencia a un título de alta estimación y dignidad.
Página 199 de 221
Imagen: Ejemplo De Dato. Fuente: https://www.tecnologias-informacion.com/proces.jpg
Información: Como información denominamos al conjunto de datos, ya procesados y ordenados para su comprensión, que aportan nuevos conocimientos a un individuo o sistema sobre un asunto, materia, fenómeno o ente determinado. La importancia de la información radica en que, con base en esta, podemos solucionar problemas, tomar decisiones o determinar cuál alternativa, de un conjunto de ellas, es la que mejor se adapta a nuestras necesidades. El aprovechamiento que hagamos de la información, en este sentido, es la base racional del conocimiento. La consecuencia más importante de la información es cambiar el estado de conocimiento que un individuo o sistema maneja con respecto a determinado fenómeno o cuestión, todo lo cual influirá en las acciones, actitudes o decisiones que se tomen a partir de la nueva información. Por ejemplo, al informarnos sobre el estado del tiempo y enterarnos de que va a llover, sabremos que nuestra mejor hipótesis para evitar mojarnos es llevar un paraguas con nosotros al salir. Por otra parte, algunas de las características fundamentales de la información es que esta debe tener cierto grado de utilidad, pues, con base en ella, el individuo o sistema modificará las sucesivas interacciones que realice con su entorno.
Imagen: Ejemplo De Información. Fuente: https://www.tiposde.com/wp-content/uploads/2010/01/informaci%C3%B3n.jpg
Página 200 de 221
EL CONOCIMIENTO DEL MERCADO Teniendo en cuenta que, en lo que concierne al Mercado, nuestro objetivo principal como empresa es satisfacer las Necesidades de nuestros Clientes, lo lógico es que, previamente, sepamos muy en detalle cuáles son estas necesidades y a qué nos estamos refiriendo cuando utilizamos este término. El conocimiento exacto y completo de los Factores Cualitativos y Cuantitativos que caracterizan el comportamiento de nuestros Clientes (de los reales y actuales, para que se mantengan como Clientes y repitan sus compras; y de los potenciales para que comiencen a comprar nuestros productos) es uno de los elementos esenciales de esta área que se denomina técnicamente Investigación de Marketing o Análisis de Mercados.
Imagen: Ejemplo de El conocimiento del mercado Fuente: https://mercado.com.ar/wp/wp-content/uploads/2020/10/conocimiento.jpg
Panorama digital: Aumenta el número de internautas, pero como profesionistas de medios digitales también ha cambiado la forma en que se realiza la conexión por medio de dispositivos móviles. Ahora podemos atender varias cosas a la vez y desde diferentes dispositivos. Es el llamado multiscreening, un nuevo concepto que permite al usuario encontrar la información solicitada en cuatro pantallas: televisión, computadora, tablet y smartphone.
Imagen: Ejemplo de Panorama Digital
Página 201 de 221
Fuente: https://lh3.googleusercontent.com/proxy/0qzLDBEMu13HQRZXcl4Y_019w9sA2dVzoXGjpkU lafA5ByYK5AT18tDslaKlgJOe40bL2mpP5DQ0955R7pDWa9kgb9fSanwj2pVWw2uxGF7zGklW 8ZefkJFo3QRB8720wUd5KLR
SEM y SEO ¿Qué es el SEO? SEO son las siglas de Search Engine Optimization (optimización para motores de búsqueda). Según la Wikipedia, se puede definir como "el proceso de mejorar la visibilidad de un sitio web en los resultados orgánicos de diferentes buscadores". En nuestro país, las estrategias de SEO se centran en Google, ya que es el buscador utilizado por la inmensa mayoría de los usuarios.
Imagen: Ejemplo de SEO Fuente: https://www.itconsultors.com/images/blog/SEO-Ottawa.png
¿Qué es el SEM? En el otro lado de la moneda, SEM son las siglas de de Search Engine Marketing (marketing en motores de búsqueda). De manera global, podríamos considerar que el SEM engloba todas las técnicas usadas para mejorar el posicionamiento de una web (incluyendo el SEO). Sin embargo, la mayoría de los marketers usan SEM como sinónimo de "publicidad en buscadores". Para evitar confusiones, haremos lo mismo en este artículo.
Imagen: Ejemplo de SEM Fuente: https://irp-cdn.multiscreensite.com/355fb8b4/que-es-el-sem.jp
Fundamentos de Marketing El Marketing es un intercambio de valor que busca satisfacer las necesidades mediante el intercambio, se podrían identificar dos conceptos principales;
Página 202 de 221
– la parte técnica, donde se realiza la transacción o intercambio. – la filosófica; el hecho de inducir a la compra. Pretende alcanzar los objetivos establecidos por la empresa, para ello deberá identificar las necesidades de su público objetivo y del mercado, adaptarse, y ofrecer las soluciones deseadas, de manera eficiente, superando a la competencia. En definitiva, el marketing es un modo de concebir y ejecutar la relación de intercambio, de forma satisfactoria para ambas partes.
Imagen: Ejemplo de Fundamentos de Marketing Fuente: https://cdn.lynda.com/course/551323/551323-637491114589975583-16x9.jpg
¿Qué es la publicidad display? La publicidad display constituye un formato publicitario online en el que el anuncio (conocido generalmente como banner y formado por texto, imagen, audio, e incluso vídeo) se muestra en una página web de destino, por lo general presentado en la parte superior o lateral de la misma. ¿Quieres saber implantarla? Aprende como con este Curso en Traffic y Display de IEBSchool y 100% Online. Y lo que comenzó siendo como una mera imagen estática con texto ha evolucionado a nuevas fórmulas publicitarias más interactivas. Ahora los banners pueden incluir audio, vídeo e, incluso, pueden ofrecer cierta interacción al usuario. Este mayor atractivo indudablemente consigue aumentar el CTR (Click Throught Rate o porcentaje de clics sobre el número de impresiones) sobre las versiones anteriores.
Imagen: Ejemplo de Display del marketing
Página 203 de 221
Fuente: https://youdecidedmarketing.com/wp-content/uploads/2019/04/display-ade1556653684506.png
¿Qué es un Community Manager? El community management podría definirse como la planeación y ejecución de tareas que hacen a una empresa tener presencia en la internet, especialmente en las redes sociales. Es un profesional de marketing digital responsable de la gestión y desarrollo de la comunidad online de una marca o empresa en el mundo digital. En estas funciones de gestión y desarrollo, debe trabajar para aumentar la comunidad, para detectar a los potenciales clientes y prescriptores. El Community Manager es el profesional responsable de construir y administrar la comunidad online y gestionar la identidad y la imagen de marca, creando y manteniendo relaciones estables y duraderas con sus clientes, sus fans en internet.
Imagen: Ejemplo de Community Manager Fuente: https://rockcontent.com/es/wpcontent/uploads/sites/3/elementor/thumbs/Community-managerp2d7m0eap2gcv7pg5jlyvcejhcfyjw5lshwdxx9vbg.png
¿Qué es el Mobile Marketing? Todos vamos con un móvil en la mano o usamos una tablet a menudo. Por eso, estos medios ofrecen un gran potencial publicitario a los anunciantes para llegar a sus consumidores. El target de las marcas se ha movilizado y debemos ir a buscarlo allí donde se encuentra. El Mobile Marketing o Marketing Móvil es un conjunto de acciones y técnicas de marketing online dirigidas a los dispositivos móviles. Esta nueva variante del marketing viene dada por el éxito de la telefonía móvil, la facilidad de acceso a internet que ofrece y la gran capacidad de captar clientes y fidelizarlos. Las estrategias de marketing online se han tenido que redefinir y pensar en formato mobile, para seguir conectando con los consumidores móviles y obtener buenos resultados en la conversión final, tanto en la ecommerce como en la store real.
Página 204 de 221
Imagen: Ejemplo de Mobile Marketing Fuente: https://www.cyberclick.es/hsfs/hubfs/Landings/Marketing/KW_Mobile%20Marketing.jpg?width=640&name=KW_Mobile %20Marketing.jpg
¿Qué es E-commerce? Originalmente el término se aplicaba a la realización de transacciones mediante medios electrónicos, como por ejemplo el intercambio electrónico de datos. Sin embargo, con el advenimiento de la Internet a mediados de los años 90, comenzó el concepto de venta de servicios por la red, usando como forma de pago medios electrónicos como las tarjetas de crédito. Desde entonces, las empresas han estado preocupadas por mantenerse a la vanguardia y poder ofrecer lo que hoy en día sus clientes están demandando. El comercio electrónico y cómo nos conectamos a Internet está cambiando. El año 2020 es el del Internet de las Cosas (IoT), conectividad con todos los dispositivos a través del 5G, datos en directo y obviamente la e-commerce tendrá un protagonismo más alto. La finalidad del Ecommerce no sólo se remite a la venta de productos y servicios, sino que también tiene como objetivo: Compartir información comercial. Conseguir la fidelidad de los clientes. Ampliar el mercado.
Imagen: Ejemplo de e-commerce marketing
Página 205 de 221
Fuente: https://www.price2spy.com/blog/wp-content/uploads/2019/10/E-commercemarketing-strategies.png
Colores en Marketing Los investigadores han desarrollado todo un campo de estudio dedicado a indagar acerca de los colores y la forma en que nos influyen. El marketing ha sacado gran provecho de esos estudios, utilizándolos para determinar qué tonalidades aplicar en productos, publicidad, sitios web y puntos de venta, entre otros, para influir en la decisión de compra de las personas y conseguir un incremento en las ventas. Los colores que vemos en los puntos de venta o las calles, mientras caminamos, tienen una enorme repercusión en nuestra psicología y en nuestra decisión de compra. La gran mayoría de los productos y anuncios publicitarios tiene un fuerte componente de estrategia del color, diseñada por especialistas en esta disciplina.
Imagen: Ejemplo de Colores en Marketing Fuente: https://www.revistagenteqroo.com/wp-content/uploads/2019/06/006.jpg
Sonido con el Marketing El sonido es una herramienta definitivamente importante para comunicar y vender. Pero posiblemente el ejemplo más claro de lo que se supone la música como valor añadido en la comunicación publicitaria esté en los anuncios. Según un estudio de Flyabit, el 72% de los consumidores recuerda la marca asociada a una sintonía y el 37,7% lo hace, de hecho, de forma completamente espontánea. Esto nos lleva a asumir la responsabilidad de usar la música como estrategia diferencial, además ésta tiene un alto valor a la hora de ubicar targets.
Imagen: Ejemplo de Sonido con el Marketing Fuente: https://www.gestion.org/wp-content/uploads/2017/02/audiomarketingmarketing-auditivo.jpg
Página 206 de 221
¿Qué es el video marketing? Cada día resulta más difícil captar nuevos clientes debido a la existencia de un mercado competitivo y al bombardeo de información que sufrimos todos los usuarios en internet. Hay que buscar nuevas formas de promoción. Es por ello que hoy quiero hablarte del video marketing. El video marketing consiste en la utilización de videos para promocionar un producto o servicio, y que tiene un potencial increíble gracias a la creciente utilización de smartphones para consumir información y a plataformas como Youtube.
Imagen: Ejemplo de video con el Marketing Fuente: https://blog.hotmart.com/blog/2018/10/BLOG_O-que-e-video-marketing-e-quaissao-seus-beneficios-670x419.png
¿QUÉ ES EL MENSAJE DE MARKETING? Un breve texto que transmite la esencia de tu marca y comunica qué haces, el proceso o tu forma de trabajar con tus clientes en el caso de servicios y los beneficios que tendrán al elegirte a ti y no a tu competencia. Como consecuencia de tener un mensaje de marketing definido, conseguirás ser percibido justo como quieres para posicionarte en la mente de las personas y proyectarás correctamente tu imagen de marca. El mensaje de marketing tiene que ser tan claro que cuando alguien lo lea o escuche, sea muy sencillo entenderlo. Debe quedarles claro, no debe causar confusión.
Imagen: Ejemplo de MENSAJE DE MARKETING Fuente: http://coachparaempresarias.com/wp-content/uploads/2014/01/Mensaje-deMarketing.jpg
Página 207 de 221
Eslogan en marketing Un eslogan es una frase corta que se utiliza para promover la rápida identificación y memorización de los productos y servicios por los consumidores o compradores potenciales. Un eslogan exitoso es aquel que se queda en la memoria de los consumidores o usuarios potenciales y ayuda a que la marca, empresa, producto o servicio tengan un alto grado de notoriedad, es decir, facilitará que, por ejemplo, cuando busquen una categoría de productos sea esa la marca que les venga a la mente. He leído recientemente que, por su origen etimológico, eslogan (slogan en inglés) procede del término gaélico sluagh-ghairm. Sluagh se refiere a «multitud» y ghairm significa «grito». La combinación de estas dos palabras significa «grito de guerra». En castellano, eslogan aparece por primera vez en el Diccionario de la Real Academia en 1984 como «frase corta significativa que alude a algo que se pretende grabar en la mente de los demás».
Imagen: Ejemplo de Eslogan Fuente: http://formacion.intef.es/pluginfile.php/43246/mod_imscp/content/3/destapafelicidad.jpg
Formas Círculo Cuadrado Triangulo Hexágono Línea Cruz Espiral
Imagen: Ejemplo de Formas Fuente: https://i.pinimg.com/originals/d2/0a/36/d20a36653a7165efb822086e46cb8120.png
Página 208 de 221
Logotipo Un logotipo coloquialmente también llamado logo es un signo gráfico que identifica a una empresa, un producto comercial, un proyecto, o en general, a cualquier entidad pública o privada. Antes Lo más importante de un logotipo es que sea: Legible. Responsive. Reproducible. Atemporal y Único.
Imagen: Ejemplo de Logotipo Fuente: https://www.ejemplos.co/wp-content/uploads/2015/11/Logo-Adidas.jpg
La Publicidad La publicidad se define por un conjunto de estrategias orientadas a dar a conocer productos y servicios a la sociedad. Sin embargo, no solo se trata de que las personas sepan que existes, sino también de otorgar cierta reputación a lo que se ofrece. Sin utilizar esta comunicación patrocinada, sería muy complejo posicionarse en la mente de los consumidores como algo de buena calidad.
Imagen: Ejemplo De Publicidad. Fuente: https://conceptodefinicion.de/wp-content/uploads/2020/07/publicidad-1.jpg
Página 209 de 221
Capítulo IV Internet Por: Florencio López Edwin
Historia La historia de internet se remonta al desarrollo de las redes de comunicación. La idea de una red de ordenadores creada para permitir la comunicación general entre usuarios de varias computadoras sea tanto desarrollos tecnológicos como la fusión de la infraestructura de la red ya existente y los sistemas de telecomunicaciones. La primera descripción documentada acerca de las interacciones sociales que podrían ser propiciadas a través del networking (trabajo en red) está contenida en una serie de memorandos escritos por J. C. R. Licklider, del Massachusetts Institute of Technology, en agosto de 1972, en los cuales Licklider discute sobre su concepto de Galactic Network (Red Galáctica) Las versiones más antiguas de estas ideas aparecieron a finales de los años cincuenta. Implementaciones prácticas de estos conceptos empezaron a finales de los ochenta y a lo largo de los noventa. En la década de 1990, tecnologías que reconoceríamos como las bases de la moderna Internet, empezaron a expandirse por todo el mundo. En los noventa se introdujo la World Wide Web (WWW), que se hizo común. La infraestructura de Internet se esparció por el mundo, para crear la moderna red mundial de computadoras que hoy conocemos como internet. Atravesó los países occidentales e intentó una penetración en los países en desarrollo, creando un acceso mundial a información y comunicación sin precedentes, pero también una brecha digital en el acceso a esta nueva infraestructura. Internet también alteró la economía del mundo entero, incluyendo las implicaciones económicas de la burbuja de las .com.
https://es.wikipedia.org/wiki/Historia_de_Internet#/media/Archivo:I nternet_map_1024_-_transparent,_inverted.png
Página 210 de 221
Un método de conectar computadoras, prevalente sobre los demás, se basaba en el método de la computadora central o unidad principal, que simplemente consistía en permitir a sus terminales conectarse a través de largas líneas alquiladas. Este método se usaba en los años cincuenta por el Proyecto RAND para apoyar a investigadores como Herbert Simon, en Pittsburgh (Pensilvania), cuando colaboraba a través de todo el continente con otros investigadores de Santa Mónica (California) trabajando en demostración automática de teoremas e inteligencia artificial. Un pionero fundamental en lo que se refiere a una red mundial, J. C. R. Licklider, comprendió la necesidad de una red mundial, según consta en su documento de enero, 1960, «Man-Computer Symbiosis» («Simbiosis Hombre-Computadora»).
Captura de pantalla
Web 1.0 Por: Velásquez García Walter Estuardo Web 1.0 se refiere a un estado de la World Wide Web. Es en general un término usado para describir la Web antes del impacto de la «fiebre punto com» en el 2001, que es visto por muchos como el momento en que el internet dio un giro. El concepto Web 1.0 surgió simultáneamente al de Web 2.0, y se usa en relación con este segundo término para comparar ambos. Características Terry Flew, en la tercera edición de New Media describe cuál cree que son las diferencias que caracterizan a la Web 1.0: es de los primeros diseños de la web y la más importante.
Página 211 de 221
https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/PikiWiki_Is rael_32304_The_Internet_Messenger_by_Buky_Schwartz.JPG/800pxPikiWiki_Israel_32304_The_Internet_Messenger_by_Buky_Schwartz.JPG
Tecnologías Por: Suchite Flores Angel Manuel • • • • • •
• • •
Páginas estáticas en vez de dinámicas por el usuario que la visita El uso de framesets o marcos. Extensiones propias del HTML como <blink> y <marquee>, etiquetas introducidas durante la guerra de navegadores web. Libros de visitas en línea o guestbooks Botones GIF, casi siempre a una resolución típica de 88x31 píxeles en tamaño promocionando navegadores web u otros productos. Formularios HTML enviados vía correo electrónico. Un usuario llenaba un formulario y después de hacer clic se enviaba a través de un cliente de correo electrónico, con el problema que en el código se podía observar los detalles del envío del correo electrónico. No se podían añadir comentarios ni nada parecido Todas sus páginas se creaban de forma fija y muy pocas veces se actualizaban. No se trata de una nueva versión, sino de una nueva forma de ver las cosas.
Servicios Vamos a revisar brevemente las herramientas fundamentales, clasificándolas en cuanto al tipo de comunicación que se establece y a la finalidad a la que se orientan:
Página 212 de 221
Finalidad
Servicio Correo electrónico (e-mail)
Comunicación asíncrona Listas de distribución Foros Charlas (IRC) Comunicación síncrona Audioconferencia y Videoconferencia Transferencia de ficheros (FTP) Acceso información
Telnet Páginas web (World Wide Web-www)
Web 2.0 El término 'Web 2.0' o 'Web social'1 comprende aquellos sitios web que facilitan compartir información, la interoperabilidad, el diseño centrado en el usuario y la colaboración en la World Wide Web. Web 2.0 permite a los usuarios interactuar y colaborar entre sí, como creadores de contenido. La red social conocida como web 2.0 pasa de ser un simple contenedor o fuente de información; la web en este caso se convierte en una plataforma de trabajo colaborativo. Ejemplos de la Web 2.0 son las comunidades web, los servicios web, las aplicaciones Web, los servicios de red social, los servicios de alojamiento de videos, las wikis, blogs, mashups y folcsonomías.
El término fue inventado por Darcy DiNucci en 1999 y luego popularizado por Tim O'Reilly y Dale Dougherty, en una conferencia sobre la Web 2.0 de O'Reilly Media en 2004. Aunque el término sugiere una nueva versión de la World Wide Web, no se refiere a una actualización de las especificaciones técnicas de la web, sino más bien a cambios acumulativos en la forma en la que desarrolladores de software y usuarios finales utilizan la Web. El término surgió para referirse a nuevos sitios web que se diferenciaban de los sitios web más tradicionales englobados bajo la denominación Web 1.0. La característica diferencial es la participación colaborativa de los usuarios.
Página 213 de 221
https://es.wikipedia.org/wiki/Web_2.0#/media/Archivo:Sir_Tim_BernersLee.jpg
Tecnologías En pocas palabras, una web está construida con una tecnología de la Web 2.0 si posee las siguientes características: •
Técnicas: o o o o o o o o o
•
CSS, marcado XHTML válido semánticamente y Microformatos. Técnicas de aplicaciones ricas no intrusivas (como AJAX). Redifusión/Agregación de datos en RSS/ATOM. URLs sencillas con significado semántico. Soporte para postear en un blog. JCC y APIs REST o XML. JSON. Algunos aspectos de redes sociales. Mashup (aplicación web híbrida).
General: o o o o o
El sitio debe estar listo para la entrada de cualquier persona. El sitio no debe actuar como un "jardín sin cosechar inminentemente": la información debe poderse introducir y extraer fácilmente. Los usuarios deberían controlar su propia información. Basada exclusivamente en la Web: los sitios Web 2.0 con más éxito pueden ser utilizados enteramente desde un navegador. La existencia de Links es requisito imprescindible.
https://es.wikipedia.org/wiki/Web_2.0#/media/Archivo:Web20buzz.png
Web 3.0 Por: Hernández de Leon Luis Mariano Según Cointelegraph, La Web 3.0 o Web semántica, es un término creado en 2006 por el conocido diseñador y emprendedor Jeffrey Zeldman. Zeldman crítico de la Web 2.0 actual, desarrollo un escrito de nombre "Web 3.0". En este escrito, él hablaba de las cosas que estaban mal en ese entonces en la web.
Página 214 de 221
En medio de toda su disertación, la expresión Web 3.0cobraba vida como la forma de corregir todo. La visión de Zeldman mostraba a la Web 3.0 como la Web Data. Esta era una red donde el acceso a datos y su procesamiento no tendría comparación con nada antes vistos. Se vislumbraba así conceptos como Big Data, Data Mining e Inteligencia Artificial aplicada a la Web. Pero lo mejor, una Web estandarizada que aún hoy en día está muy lejos de ser una realidad, aunque estamos mucho mejor que hace 20 años. Sin embargo, el término Web 3.0 parecía algo aletargado. La verdad es que incluso hoy, el potencial de Web 2.0 es enorme y no ha explotado del todo. Así que en medio del desarrollo para explotar lo que tenemos, no se pensó mucho en el futuro de la tecnología. Sin embargo, fue la llegada pública del Big Data y la IA a la Web lo que impulsó esta idea. Una idea que luego sería conocida como Web 3.0 o Web Semántica. Sin embargo, otro detonante fue también la creación de Bitcoin y la tecnología blockchain en 2008. Esto debido a que esta tecnología podría servir de base para lograr la ansiada descentralización de la Web 3.0. Algo que especialmente impactaba en la capacidad de organizar y crear redes dentro de redes, tal como muchos cypherpunks y cyberpunks soñaban. Partes de esta nueva red ya podemos verlas en funcionamiento. Por ejemplo, las redes sociales son aplicaciones que son capaces de interactuar con otras aplicaciones. Además de que hacen uso de Big Data, Inteligencia Artificial y de algoritmos cada vez más potentes para poner en tu "timeline o feed" aquello en lo que puedas estar interesado. Sin embargo, estas funciones aún son limitadas y no existe un consenso claro si deben ser consideradas Web 3.0 o simplemente mejoras a la Web 2.0 que conocemos.
Tecnologias Por: Hernández Patzan Omar Alessandro Resource Description Framework: El Marco de Descripción de Recursos es una familia de especificaciones de la World Wide Web Consortium, O también conocida como la W3C, originalmente diseñado como un modelo de datos para metadatos. Ha llegado a ser usado como un método general para la descripción conceptual o modelado de la información que se implementa en los recursos web, utilizando una variedad de notaciones de sintaxis y formatos de serialización de datos.
Página 215 de 221
Web Ontology Language: OWL facilita un mejor mecanismo de interpretabilidad de contenido Web que los mecanismos admitidos por XML, RDF, y esquema RDF proporcionando vocabulario adicional junto con una semántica formal. OWL tiene tres sublenguajes, con un nivel de expresividad creciente: OWL Lite, OWL DL, y OWL Full. SPARQL: SPARQL es un acrónimo recursivo del inglés SPARQL Protocol and RDF Query Language. Se trata de un lenguaje estandarizado para la consulta de grafos RDF, normalizado por el RDF Data Access Working Group del World Wide Web Consortium.
Imagen de: TreceBits
Servicios Por: Rivera Ramírez Mario Adolfo Búsquedas inteligentes: La web 3.0 busca crear un nuevo sistema de clasificación de páginas web estrechamente ligado a las necesidades y características de los usuarios. De esta forma, al conectarse a Internet, los usuarios pueden disfrutar de una plataforma mucho más personalizada. La evolución de las redes sociales: Crecen las comunidades sociales en la red, tanto en número como en nivel de complejidad. Aumentan también las formas de conectarse a estas redes. Más rapidez:
Página 216 de 221
Las nuevas funcionalidades de la Web 3.0 requieren de un Internet mucho más rápido. En respuesta a esto, las principales operadoras de telecomunicaciones han implementado conexiones de banda ancha para garantizar una experiencia de uso más satisfactoria para los usuarios. Conectividad a través de más dispositivos: La Web 3.0 mejora las posibilidades de los usuarios de conectarse no sólo a través de las computadoras de escritorio y laptops, sino también a través de celulares, tablets, relojes y más dispositivos. Contenido libre: Los programas libres y las licencias 'Creative Commons' son mucho más comunes en la Web 3.0 Espacios tridimensionales: Los usuarios pueden acceder a nuevas formas de visualizar la web, con espacios tridimensionales. Un claro ejemplo de esto es Google Earth.
Web Geoespacial: Los usuarios pueden acceder a información disponible en la red en base a su localización geográfica. Facilidad en la navegación: Las nuevas tendencias de diseño buscan establecer ciertas estandarizaciones que hagan más sencilla la experiencia del usuario en la navegación, además de la creación de espacios que puedan ser modificados y personalizados por estos. Computación en la nube: Con la creación de nuevos espacios de almacenamiento, no sólo de datos sino de programas, la web se convierte en un espacio ejecutable a modo de computador universal. Vinculación de datos:
Página 217 de 221
Cada vez existen más servicios de información que son capaces de añadir datos procedentes de otras fuentes con el fin de unificar las respuestas que ofrecen a los usuarios.
Redes Semanticas Según el Mineduc, Una red semántica o esquema de representación en Red es una forma de representación del conocimiento lingüístico en la que los conceptos y sus interrelaciones se representan mediante un grafo. En caso de que no existan ciclos, estas redes pueden ser visualizadas como árboles. Las redes semánticas son usadas, entre otras cosas, para representar mapas conceptuales y mentales. En un grafo o red semántica los elementos semánticos se representan por nodos. Dos elementos semánticos entre los que se admite se da la relación semántica que representa la red, estarán unidos mediante una línea, flecha o enlace o arista. Cierto tipo de relaciones no simétricas requieren grafos dirigidos que usan flechas en lugar de líneas.
Que es un software web Por: Reyes Gutierrez Jorge Mario Acorde a Wikipedia, En la ingeniería de software se denomina aplicación web a aquellas herramientas que los usuarios pueden utilizar accediendo a un servidor web a través de internet o de una intranet mediante un navegador. En otras palabras, es un programa que se codifica en un lenguaje interpretable por los navegadores web en la que se confía la ejecución al navegador. Las aplicaciones web son populares debido a lo práctico del navegador web como cliente ligero, a la independencia del sistema operativo, así como a la facilidad para actualizar y mantener aplicaciones web sin distribuir e instalar software a miles de usuarios potenciales. Existen aplicaciones como los correos web, wikis, blogs, tiendas
Página 218 de 221
en línea y la propia Wikipedia que son ejemplos bastante conocidos de aplicaciones web. Es importante mencionar que una página web puede contener elementos que permiten una comunicación activa entre el usuario y la información. Esto permite que el usuario acceda a los datos de modo interactivo, gracias a que la página responderá a cada una de sus acciones, como por ejemplo rellenar y enviar formularios, participar en juegos diversos y acceder a gestores de base de datos de todo tipo.
NAVEGADORES Y BUSCADORES Por: Lima y Lima Carlos Manuel INTRODUCCION El navegador se utiliza en los PC para navegar por Internet y por la web, los navegadores permiten realizar varias funciones, incluyendo la búsqueda, navegación y desplazamiento de recursos de Internet. Normalmente, los navegadores están preinstalados en un sistema informático. Los dispositivos móviles, como smartphones, las tablets, contienen navegadores móviles. Los navegadores web conocidos son Mozilla Firefox, Internet Explorer, Safari, Opera y Google Chrome, a nivel mundial, los navegadores difieren significativamente en sus cuotas de mercado.
Chrome
es
el
navegador
más
utilizado.
Históricamente, las llamadas guerras de navegadores han sido relevantes para el desarrollo de las cuotas de mercado actuales. LOS NAVEGADORES Por: Ramírez Velásquez César Antonio De acuerdo a la pagina Ryte, Un navegador, o como se diría en ingles, Un Browser, es una herramienta informática que te va a permitir ver documentos y datos y navegar por la red. Los navegadores pueden mostrar diferentes tipos de recursos de información; principalmente documentos HTML, sin embargo, también son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. Mediante el uso de complementos especiales y la
Página 219 de 221
configuración correspondiente, los navegadores son compatibles con Flash, JavaScript o Java “Applets” para que el contenido multimedia interactivo esté disponible o para reenviar direcciones de correo electrónico a un programa de correo electrónico. Los navegadores son comúnmente interfaces gráficas de usuario para aplicaciones web. Ofrecen una variedad de funciones para recuperar recursos, navegar en ellos, realizar búsquedas o almacenar marcadores.
Referencia de Imagen: https://www.ecured.cu/images/e/e8/Navegadores.jpg El navegador suele funcionar con el modelo cliente-servidor, en el que el cliente web se comunica con un servidor utilizando protocolos estandarizados (HTTP, HTTPS o FTP). Si accedes a una dirección URL en el navegador, este se pondrá en contacto con el servidor. La URL contiene un prefijo que indica al servidor con qué protocolo se deben recuperar los datos. Al introducir una dirección de Internet el navegador utiliza el protocolo HTTP y recupera los datos almacenados allí. Si el recurso está disponible y ha sido referenciado unívocamente por la dirección correcta, el browser interpreta los datos y se los muestra. Esta visualización de datos también se denomina renderización. La recuperación de un recurso por medio de una URL o URI se llama fetching. El servidor responde al navegador pasando el documento HTML solicitado y los recursos asociados, como archivos CSS o JavaScript, al navegador. El motor de diseño del navegador es responsable de la conversión del código fuente y de los motores JavaScript para la ejecución de scripts. Existen distintos tipos, como los navegadores de texto, los cuales sólo proporcionan texto y, por lo tanto, se denominan navegadores basados en texto o navegadores sin cabeza. Estos navegadores se utilizan para mostrar sitios desde la perspectiva de un programa de ordenador. Los motores de búsqueda utilizan navegadores basados en texto para analizar los recursos e incluirlos en su índice. Los navegadores basados
Página 220 de 221
en texto suelen formar parte de crawlers, bots o arañas. Sin embargo, también puede utilizar este tipo de navegador para probar sitios y emular lo que ve el rastreador de un motor de búsqueda. Otro como lo es el navegador sin conexión, o Offline, se utilizan principalmente para navegar por documentos locales sin conexión a Internet. Los navegadores predeterminados como IE o Edge, también le permiten trabajar sin conexión. Los marcadores se pueden establecer y los sitios están disponibles sin conexión para recuperarlos más tarde.
Referencia: Microsoft
MERCADOS NAVEGADORES Por: Reyes Domínguez Keneth Enríque Para mucha gente pueden llegar a pasar desapercibidos, pero los navegadores web son esenciales para el acceso y circulación por Internet, son el vehículo mediante el cual navegamos a través de la infinita red. Si nos fijamos en la definición que nos da la Wikipedia, un navegador o, en inglés, un browser, es un software que permite el acceso a Internet, interpretando la información de los sitios web para que éstos puedan ser leídos. Hoy en día sabemos que existe una gran variedad de navegadores. La utilitzación de uno u otro es muy subjetiva, depende de cada persona y de la comodidad que tenga con cada uno de ellos, porque las diferencias entre los más populares son bastante reducidas si lo vemos desde la perspectiva de un usuario corriente, no el de un profesional de la informática. En este artículo, pues, hablaremos de algunos de los browsers más conocidos e intentaremos encontrar algunas de las diferencias que haya entre uno y otro, para que después cada cual pueda elegir el que se adapte mejor a sus necesidades. Estos navegadores son -
Google Chrome.
Página 221 de 221
-
Safari.
-
Firefox.
-
Edge.
-
Samsung Internet.
-
Opera.
-
Microsoft Edge
MERCADO DESDE 2007 Por: Laisha Ismatul Laisha Antonia Dayanara El ganador como mejor navegador web de 2007 ha sido Mozilla Firefox, siendo los resultados en el mercado tal que: -
Firefox 2: 1067 (77.2%).
-
Internet Explorer 7: 72 (5.2%).
-
Opera 9.2: 183 (13.2%).
-
Safari 3: 60 (4.3).
No obstante, cabe aclarar que, desde este año, el trono de Mozilla Firefox, caería con la llegada del renovado Google Chrome Google Chrome econcluss un navegador web que contiene aplicaciones de código abierto y que ha sido desarrollado por la empresa Google. Chrome significa “interfaz gráfica de usuario” que hace referencia a un programa informático que se nutre de imágenes y objetos gráficos para proporcionar un entorno visualmente sencillo para el usuario. Esta interfaz además es segura y fácil y rápida. Google Chrome cuenta con más de 750 millones de usuarios, y se lo considera el primer navegador más utilizado a nivel mundial. El segundo es Mozilla Firefox, e Internet Explorerel tercero.
CONCLUSION NAVEGADORES Los navegadores Web son posiblemente el software más importante de tu equipo. Pasas una gran parte de tu tiempo conectado a Internet en el navegador. ... En conclusión podemos decir que la función de los Navegadores de Internet es es descargar los archivos de documento y mostrarlos en pantalla.